Vanilla JS SDK

Beta Preview

Our vanilla Javascript SDK is very similar to our ReactJS SDK. Instead of doing an npm i , you can integrate our SDK by importing from our CDN. Afterwards, you just need to interact with the window.ramper global object to gain access to most of the exported methods. Currently our vanilla JS SDK is in beta preview mode. There are a few minor bugs and refinements needed to reach full parity with our ReactJS SDK so please check back next week for updates. For any SDK design feedback, please contact the Ramper team.

<html>
<head>
  <script src="https://js.ramper.xyz/v1/ethereum"></script>
  <script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js"
  type="application/javascript"></script>
</head>
<body>
  <script>
    window.onload = () => {
      window.ramper.init({
        appName: "Ethereum Test App",
        chainName: "ethereum",
        defaultTokenAddresses: [],
        theme: "dark",
        network: "maticmum",
        authProviders: ["twitter", "google", "facebook", "apple", "email"],
      })
    }
    
    async function signIn() {
      if (window.ramper.getUser()) {
        alert("Error: You are already signed in.")
        return
      }
      const userData = await window.ramper.signIn()
      console.log(userData)
    }

    function openWallet() {
      if (!window.ramper.getUser()){
        alert("Error: You are signed out.")
        return
      }
      window.ramper.openWallet()
    }

    async function sendTransaction() {
      console.log("Send Transaction using ether.js is in the process of being fully migrated to our Vanilla JS SDK. Please check back in 1-2 days.")

      if (!window.ramper.getUser()){
        alert("Error: You are signed out.")
        return
      }
      const wallet = window.ramper.getUser().wallets["ethereum"]

      const alchemy = new ethers.providers.AlchemyProvider(80001, 'pEWvHrkSkkyWGZmezdGMk_LjYu8DAx1k')
      const ramperSigner = await window.ramper.getRamperSigner(alchemy)
      try {
        if (!ramperSigner || !wallet) {
          throw new Error('No wallet')
        }

        const fromAddress = wallet.publicKey
        const toAddress = '0x1A2060a7469A5Df387e73dE3a9268763F4bE793d'
        const value = '0.00001'

        const tx = {
          type: 2,
          from: fromAddress,
          to: toAddress,
          value: ethers.utils.parseEther(value),
          chainId: 80001,
          nonce: alchemy.getTransactionCount(fromAddress),
          gasLimit: alchemy.estimateGas({
            to: toAddress,
            value: ethers.utils.parseEther(value),
          }),
          maxFeePerGas: alchemy.getFeeData().then((x) => x.maxFeePerGas),
          maxPriorityFeePerGas: alchemy.getFeeData().then((x) => x.maxPriorityFeePerGas),
        }
        console.log(tx)
        const signedTx = await ramperSigner.signTransaction(tx)
        const txResult = await alchemy.sendTransaction(signedTx)

        console.log('RESULTS ' + txResult.hash)
      } catch (ex) {
        console.log(ex)
      }
    }

    function signOut() {
      if (!window.ramper.getUser()){
        alert("Error: You are already signed out.")
        return
      }
      window.ramper.signOut()
    }
  </script>
  <button onclick="signIn()">Sign In</button>
  <button onclick="openWallet()">View Wallet</button>
  <button onclick="sendTransaction()">Send Transaction (Not Fully Ported)</button>
  <button onclick="signOut()">Sign Out</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="https://js.ramper.xyz/v1/near"></script>
  <!-- Recommended you use `npm i --save near-api-js` instead -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/near-api-js.min.js"></script>
  <!-- Recommended you use `npm i --save bn.js` instead -->
  <script type="text/javascript" src="https://testdapp.ramper.xyz/bn.js"></script>
</head>
<body>
  <script>
    window.ramper.init({
      appName: "Near Test App",
      chainName: "near",
      defaultTokenAddresses: [],
      theme: "dark",
      network: "testnet",
      authProviders: ["twitter", "google", "facebook", "apple", "email"],
    });
    
    async function signIn() {
      if (window.ramper.getUser()) {
        alert("Error: You are already signed in.")
        return
      }
      const userData = await window.ramper.signIn()
      console.log(JSON.stringify(userData))
    }

    function openWallet() {
      if (!window.ramper.getUser()){
        alert("Error: You are signed out.")
        return
      }
      window.ramper.openWallet()
    }

    const experimental = true;

    async function sendTransaction() {
      const actions = [nearApi.transactions.transfer(new BN(10000000))]
      window.ramper.sendTransaction({
        toAddress: "02c49b4d1ce076c30c94bba082ec78e493915a6f84537b5fe7cb90ed56722d09",
        actions
      })
    }

    function signOut() {
      if (!window.ramper.getUser()){
        alert("Error: You are already signed out.")
        return
      }
      window.ramper.signOut()
    }
  </script>
  <button onclick="signIn()">Sign In</button>
  <button onclick="openWallet()">View Wallet</button>
  <button onclick="sendTransaction()">Send Transaction</button>
  <button onclick="signOut()">Sign Out</button>
</body>
</html>

Last updated 2 years ago