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.
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,})constsignInResult=awaitsignIn()// 80001 is the chainid for 'maticmum'constalchemy=newethers.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
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()constsigner=awaitgetRamperSigner(alchemy)constvalue=ethers.utils.parseEther('0.0000001')constgasLimit=awaitalchemy.estimateGas({ to:'0xa419dfa199Df8651c3f4476546AF5E4CC4E0F73F', value: value,})constfeeData=awaitalchemy.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:
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).
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.
<!DOCTYPEhtml><html><head> <scriptsrc="https://js.ramper.xyz/v1/ethereum"></script> <scriptsrc="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. */functiongetUserData() {constcachedUser=window.localStorage.getItem('ramper_loggedInUser')if (!cachedUser || cachedUser ==='undefined'|| cachedUser ==='null') {returnnull }constcachedWallet=window.localStorage.getItem('ramper_currentUserWallets')if (!cachedWallet || cachedWallet ==='undefined'|| cachedWallet ==='null') {returnnull }constuser=JSON.parse(cachedUser)constwallets=JSON.parse(cachedWallet)return {user, wallets} }asyncfunctionsignIn() {if (getUserData()) {alert("Error: You are already signed in.")return }constuserData=awaitwindow.ramper.signIn()console.log(userData) }functionopenWallet() {if (!getUserData()){alert("Error: You are signed out.")return }window.ramper.openWallet() }functionshowUserData() {if (!getUserData()){alert("Error: You are signed out.")return } }asyncfunctionsendTransaction() {console.log("Send Transaction using ether.js is in the process of being fully migrated to our Vanilla JS SDK")const {users,wallets} =getUserData()constwallet= wallets["ethereum"]if (!getUserData()){alert("Error: You are signed out.")return }constalchemy=newethers.providers.AlchemyProvider(80001,'pEWvHrkSkkyWGZmezdGMk_LjYu8DAx1k')constramperSigner=awaitwindow.ramper.getRamperSigner(alchemy)try {if (!ramperSigner ||!wallet) {thrownewError('No wallet') }constfromAddress=wallet.publicKeyconsttoAddress='0x1A2060a7469A5Df387e73dE3a9268763F4bE793d'constvalue='0.00001'consttx= { 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)constsignedTx=awaitramperSigner.signTransaction(tx)consttxResult=awaitalchemy.sendTransaction(signedTx)console.log('RESULTS '+txResult.hash) } catch (ex) {console.log(ex) } }functionsignOut() {if (!getUserData()){alert("Error: You are already signed out.")return }window.ramper.signOut() } </script> <buttononclick="signIn()">Sign In</button> <buttononclick="openWallet()">View Wallet</button> <buttononclick="sendTransaction()">Send Transaction (Not Fully Ported)</button> <buttononclick="signOut()">Sign Out</button></body></html