tenderly/tenderly-rabby-transaction-preview

Integrate the Tenderly Simulation API into Rabby Wallet to enable a transaction preview option for wallet users.

Integrate Tenderly Transaction Simulations Into Rabby Wallet

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)