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

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
PreviousGet Started on zkSync EraNextGet Started on Chiliz

Last updated