Get Started on EVM

Good to know: Currently, Ramper's EVM SDK only supports React, and is compatible with Ether.js (currently supporting Ethereum & Polygon)

Overview

Ramper's EVM SDK provides an easy wallet solution for developers to integrate into their DApps. Once integrated, your users will be able to log in with a popular OAuth solution and instantly interact with an Ethereum wallet, compatible with ethers.js

Ethers.js compatibility means any chain that works with ethers.js is also compatible with Ramper SDK.

Ramper SDK also provides WalletView component, which provides the DApp with various wallet-related functionalities such as fiat-on-ramp, transaction history and token transfers.

In addition, Ramper's EVM SDK provides native support to connect your DApp with Metamask (more wallet supports coming soon) as well.

See these functions in action at https://example.ramper.xyz/

Install Ramper SDK

Setup ether.js signer

Ramper SDK provides your Dapp an ethers.js Signer object to abstract the wallet operations away from your work scope. It works with any ethers.js-compatible Provider, such as Infura, Alchemy, etc. Unlike Metamask, you do need to set your own Provider up and pass it in to our SDK (see https://docs.ethers.io/v5/api/providers/). This design was to provide maximum control over the DApp infrastructure (e.g. with Metamask you are tied to using Infura, which had various issues)

Install SDK

$ npm i @ramper/ethereum

or

$ yarn add @ramper/ethereum

User signup & login

import { 
  init, 
  AUTH_PROVIDERS, 
  CHAIN, 
  THEME, 
  WALLET_PROVIDER, 
  SUPPORTED_ETHEREUM_NETWORKS 
} from '@ramper/ethereum'
import { getWalletModel, User } from '@ramper/core'
import { ethers } from '@ethers'

init({
  appName: 'EVM Test App',
  authProviders: [
    AUTH_PROVIDER.GOOGLE,
    AUTH_PROVIDER.FACEBOOK,
    AUTH_PROVIDER.TWITTER,
    AUTH_PROVIDER.APPLE,
    AUTH_PROVIDER.EMAIL
  ],
  walletProviders: [WALLET_PROVIDER.METAMASK],
  network: SUPPORTED_ETHEREUM_NETWORKS.MATICMUM,
  theme: THEME.DARK,
})

const signInResult = await signIn()
// 80001 is the chainid for 'maticmum'
const alchemy = new ethers.providers.AlchemyProvider(80001, ALCHEMY_KEY)

Calling await signIn(walletToUse) launch the log in dialog and return a signInResult when the user successfully logs in or connects an account

Get logged-in user

import { getUser } from '@ramper/ethereum'

const user = getUser()

Send token

The following code demonstrates how to send a token from a wallet belonging to the signed in user or a connected wallet.

import { sendToken } from '@ramper/ethereum'

try {
  const isSuccess = await sendToken({
    to: '0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F',
    value: '0.000001', 
    network: 'mainnet'
  })
  console.log('sendToken result: ', isSuccess)
} catch (e) {
  console.error(e)
}

Get ethers.js compatible signer

Once you have obtained a Signer, you can use the familiar ethers.js functions to write your DApp. See https://docs.ethers.io/v5/api/signer/ for reference if you aren't already familiar with ethers.js

Both signTransaction and sendTransaction functions are implemented (signMessage coming soon).

import { getRamperSigner } from '@ramper/ethereum'

// This will be either RamperSigner or MetamaskSigner depending on
// what the user signed in with when prompted by signIn()
const signer = await getRamperSigner(alchemy)

const value = ethers.utils.parseEther('0.0000001')
const gasLimit = await alchemy.estimateGas({
  to: '0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F',
  value: value,
})
const feeData = await alchemy.getFeeData()

try {
  signer.sendTransaction({
    type: 2,
    from: 'your-address',
    to: '0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F',
    value: value,
    chainId: 80001,
    nonce: alchemy.getTransactionCount('your-address'),
    gasLimit: gasLimit,
    maxFeePerGas: feeData.maxFeePerGas,
    maxPriorityFeePerGas: feeData.maxPriorityFeePerGas,
  })
} catch (e) {
  console.log(e)
}

We highly recommend you use Promise for the fields that need network access to be determined, such as nonce and gasLimit, etc.

If sendTransaction is triggered by a button, for example, and you perform all the accesses before actually calling sendTransaction, we've noticed the popup window for the user confirmation can be blocked by Safari.

Sign out

Users can log out or disconnect their wallet with:

import { signOut } from '@ramper/ethereum'

await signOut()

Yup, it really is just that easy!

If there's any feature you would like to see or design patterns you would like for the Ramper team to adopt, come chat with us (see Introduction for ways to reach us).

Boilerplate Example

ReactJS

import {
  CHAIN,
  getRamperSigner,
  getUser,
  getWalletModel,
  init,
  openWallet,
  sendToken,
  signIn,
  signOut,
  User,
} from '@ramper/ethereum'
import { ethers } from 'ethers'
import { useMemo, useState } from 'react'

init({
  appName: 'EVM Test App',
  walletProviders: ['metamask'],
  defaultTokenAddresses: ['0x514910771af9ca656af840dff83e8264ecf986ca'],
  theme: 'dark',
  network: 'maticmum',
  authProviders: ['google', 'facebook', 'twitter', 'apple', 'email'],
})

const alchemy = new ethers.providers.AlchemyProvider(80001, 'pEWvHrkSkkyWGZmezdGMk_LjYu8DAx1k')

function App() {
  const [user, setUser] = useState<User | null>(getUser())
  const wallet = useMemo(() => {
    return user ? getWalletModel(window.localStorage, CHAIN.ETHEREUM) : null
  }, [user])

  const handleSignIn = async () => {
    const signInResult = await signIn()
    setUser(signInResult.user ?? null)
  }

  const handleSendToken = async () => {
    try {
      const isSuccess = await sendToken({
        to: '0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F',
        value: '0.000001',
        network: 'mainnet',
      })
      console.log('sendToekn result: ', isSuccess)
    } catch (e) {
      console.error(e)
    }
  }

  const handleSendTransactionWithRamperSigner = async () => {
    if (!wallet) {
      console.log('No wallet')
      return
    }

    const signer = await getRamperSigner(alchemy)

    const value = ethers.utils.parseEther('0.0000001')
    const gasLimit = await alchemy.estimateGas({
      to: '0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F',
      value,
    })
    const feeData = await alchemy.getFeeData()

    try {
      signer.sendTransaction({
        type: 2,
        from: wallet.publicKey,
        to: '0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F',
        value,
        chainId: 80001,
        nonce: alchemy.getTransactionCount(wallet.publicKey),
        gasLimit: gasLimit,
        maxFeePerGas: feeData.maxFeePerGas,
        maxPriorityFeePerGas: feeData.maxPriorityFeePerGas,
      })
    } catch (e) {
      console.log(e)
    }
  }

  const handleSignOut = () => {
    signOut()
    setUser(null)
  }

  const handleOpenWalletView = () => {
    openWallet()
  }

  return (
    <div
      style={{
        padding: '20px 16px',
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <p>Ramper Ethereum Example</p>
        <button onClick={handleSignIn}>Sign in</button>
        <br />
        <button onClick={handleSendToken}>Test sendToken</button>
        <br />
        <button onClick={handleSendTransactionWithRamperSigner}>Test sendTransaction with RamperSigner</button>
        <br />
        <button onClick={handleOpenWalletView}>Open WalletView</button>
        <br />
        <button onClick={handleSignOut}>Sign out</button>
      </div>
    </div>
  )
}

export default App

Vanilla Javascript

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.

<!DOCTYPE html>
<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.ramper.setConfig({
      appName: "EVM Test App",
      chainName: "ethereum",
      defaultTokenAddresses: [],
      theme: "dark",
      network: "maticmum",
      authProviders: ["twitter", "google", "facebook", "apple", "email"],
    });

    /*
     * Gets the cached user and wallet.
     */
    function getUserData() {
      const cachedUser = window.localStorage.getItem('ramper_loggedInUser')
      if (!cachedUser || cachedUser === 'undefined' || cachedUser === 'null') {
        return null
      }

      const cachedWallet = window.localStorage.getItem('ramper_currentUserWallets')
      if (!cachedWallet || cachedWallet === 'undefined' || cachedWallet === 'null') {
        return null
      }

      const user = JSON.parse(cachedUser)
      const wallets = JSON.parse(cachedWallet)
      return {user, wallets}
    }
    
    async function signIn() {
      if (getUserData()) {
        alert("Error: You are already signed in.")
        return
      }
      const userData = await window.ramper.signIn()
      console.log(userData)
    }

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

    function showUserData() {
      if (!getUserData()){
        alert("Error: You are signed out.")
        return
      }
    }

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

      const {users, wallets} = getUserData()
      const wallet = wallets["ethereum"]

      if (!getUserData()){
        alert("Error: You are signed out.")
        return
      }
      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 (!getUserData()){
        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