Integrate the Tenderly Simulation API into Rabby Wallet to simulate ERC-20 and ERC-721 transactions and display human-readable information.
Introduction · Setup · Examples · Contributing
Introduction
This repo is forked from Rabby Wallet repository.
Rabby Wallet with a transaction preview option can allow users to simulate transactions and get in-depth insights before sending them on-chain. By using the Tenderly Simulation API, Rabby Wallet, and other wallets, DEXs, and DeFi platforms, can create a better experience for users, protect their funds, and provide the information they need to sign and send transactions with confidence.
Setup
Welcome to the setup guide for integrating the Tenderly Simulation API into Rabby Wallet. In this tutorial, we will guide you through each step to ensure that you are set up correctly. Follow the instructions below to get started.
For the full setup and understanding how Rabby works, follow the guide on Rabby Wallet's GitHub repo.
1. Rabby Wallet Installation
Install Rabby Wallet Chrome Extension
The first step is to install the Rabby Wallet Chrome extension. You can install it from the Chrome Web Store. Simply click the link and follow the instructions to add the extension to your browser.
Disable the Production Version of Rabby Wallet
If you have the production version of Rabby Wallet installed, you'll need to disable it. Navigate to chrome://extensions
in your browser. Locate Rabby Wallet from the list of your installed extensions, and toggle it off. Alternatively, you can start a new profile in Chrome or Brave, which will allow you to use different extensions for different purposes.
Load an Unpacked Version
Follow the Google Chrome instructions to load an unpacked extension in developer mode.
2. Tenderly Access
Open a Tenderly Account
To utilize the features provided by the Tenderly Simulation API, you'll need a Tenderly account. If you don't have one already, visit the Tenderly website and create a new account.
Create an Access Token
Once you've logged into your Tenderly account, you will need to create an access token
. This is a unique identifier that allows the Rabby Wallet integration to interact with your Tenderly account. Generate it on the following link https://dashboard.tenderly.co/account/authorization.
Create a file /_raw/tenderly.json
and update the Tenderly credentials:
{
"tenderlyAccount": "YOUR_ACCOUNT_NAME",
"tenderlyProject": "YOUR_PROJECT_NAME",
"tenderlyAccessToken": "YOUR_ACCESS_TOKEN"
}
3. App Setup
Clone the Repository
Now, you'll need to get the code for the app onto your local machine. You can do this by cloning this repository. If you're not sure how to do this, you can find detailed instructions in the GitHub documentation.
Start the App
To clone the repository, use the following command:
git clone https://github.com/Tenderly/tenderly-rabby-transaction-preview.git
Then navigate to the root directory of the project:
cd tenderly-rabby-transaction-preview
Start the app with:
yarn build:dev
Examples
In this section, we show how to simulate ERC20 and NFT transfers in Rabby Wallet using the Tenderly Simulation API.
ERC20 Token Swap on Uniswap
The image below shows a successful ERC20 token swap of ETH to 1INCH with asset changes and a detailed breakdown of the transaction.
You can see the whole simulated transaction on the Tenderly Dashboard here:
https://dashboard.tenderly.co/shared/simulation/a2690d05-6136-47b8-af83-b264e3defc1a
Transaction Preview in Rabby Wallet Powered by Tenderly Simulations - Video Tutorial
NFT Purchase on Joepegs
The image below shows a successful purchase of several NFTs with asset changes and a detailed breakdown of the transaction.
You can see the whole simulated transaction on the Tenderly Dashboard here:
https://dashboard.tenderly.co/shared/simulation/f72eca66-57a9-4411-9398-0a9d5f14f560
Simulate NFT Transfer in Rabby Wallet With Tenderly Simulations - Video Tutorial
Contributing
We love our contributors! Here's how you can contribute:
- Open an issue if you believe you've encountered a bug.
- Make a pull request to add new features/make quality-of-life improvements/fix bugs.
Author
- Vanja Paunović (@dzimiks)