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
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.
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.
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.
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.
Follow the Google Chrome instructions to load an unpacked extension in developer mode.
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.
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"
}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.
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
In this section, we show how to simulate ERC20 and NFT transfers in Rabby Wallet using the Tenderly Simulation API.
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
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
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.
- Vanja Paunović (@dzimiks)