Rootstock Reown-Wagmi Starter Kit

The Rootstock Reown-Wagmi starter kit provides a foundation for building decentralized applications (dApps) on the Rootstock blockchain. It leverages the security of Bitcoin and the flexibility of Ethereum.

The kit uses Reown (previously WalletConnect) to handle wallet management, Wagmi, a React Hooks library, to simplify smart contracts and blockchain network interactions, and Shadcn libraries, a set of customizable and accessible UI components for React, designed to streamline frontend development.

This starter kit is designed to help developers jump-start their dApp development journey on Rootstock.

Prerequisites

• Node.js and Git: Ensure that Node.js and Git are installed on your system.
  • See the Prerequisites section for how to download Node.js using NVM.
• Package Manager: You can use either Yarn or npm to manage your project dependencies:
  • Yarn: Install Yarn, a package manager for Node.js projects. You can do this by running the following command in your terminal:

    npm install -g yarn

  • npm: npm comes bundled with the Node.js installation. To verify your npm installation, run:

    npm -v

    If you need to update npm to the latest version, you can run:

    npm install -g npm@latest

• Basic Knowledge:
  • React (a JavaScript library for building user interfaces)
  • Solidity (a programming language for Ethereum smart contracts).

Rootstock Blockchain Developer Course

Learn how to write, test, secure, deploy, and verify smart contracts on the Rootstock blockchain network. Enroll in the Rootstock Blockchain Developer Course.

Setup

1. Clone the Repository

First, you’ll need to clone the Rootstock Reown Starter Kit repository. Open your terminal and run the following commands:

git clone https://github.com/rsksmart/rsk-reown-starter-kit
cd rsk-reown-starter-kit

2. Get Project ID

Every dApp that relies on Reown (previously WalletConnect) now needs to obtain a project ID from Reown Cloud. This is free and only takes a few minutes.

To get the key:

1. Go to Reown and sign up.
2. Create a new project by clicking on Create Project.
3. Add a name and link to your project, on the product selection screen, select WalletKit and continue.
4. Your project ID is shown in the left menu under your project name. Click to copy it

3. Environment Setup

To set up your environment, follow these steps:

• Create a .env file and add environment variables.

  VITE_WC_PROJECT_ID=Your project ID from Reown Cloud
  VITE_BUNDLER_API_KEY='etherspot_public_key'
  VITE_CUSTOM_BUNDLER_URL=https://rootstocktestnet-bundler.etherspot.io/

• Enter your project ID. For testnet purposes, you can keep the Etherspot Bundler API key and Bundler URL. If you need a production environment, please go to Etherspot, create an account, and obtain your API key.

4. Install Dependencies

Before running the project, make sure to have the necessary dependencies installed. You can use NPM or Yarn. Run the following command to install dependencies:

yarn

5. Run the Project

Now that you’ve cloned the repository and installed dependencies, it’s time to run the project. Execute the following command:

yarn dev

This will start the Rootstock Reown Starter dApp locally, allowing you to develop and test your smart contracts. You can access the Vite server at http://localhost:5173.

Result

Info

After successfully running your project using the command above, do the following:

• Click the “Connect” button to log in. Once connected, you can:
• Switch Networks: Easily switch between Mainnet and Testnet.
• View and Copy Your Address: Access your wallet address.
• Check Your tRBTC Balance: See your tRBTC balance.
• Disconnect: Log out from the project.

Test Project

To test the project, follow these simple steps:

1. Connect Your Wallet: Click the “Connect” button.
2. Navigate to the Reown-Wagmi Section: Scroll down and find the card labeled “Contract Interaction with Reown Starter Kit.” Click it.
3. Explore the Tabs: In the Wagmi section, you’ll see three tabs: ERC-20, ERC-721, and ERC-1155. Click on any of these tabs to explore further.

Understanding the Codebase

Folder Structure

public
src
Src
.env
.env.example

The src folder is organized to streamline the development process and facilitate locating specific code or assets. Here's a detailed breakdown:

.src Folder Structure

• Assets: Contains the ABIs (Application Binary Interfaces) for ERC20, ERC721, and ERC1155.
• Components:
  • AccountAbstraction: Contains code related to account abstraction.
  • Home: Holds components specific to the homepage.
  • Icons: Contains various icon components.
  • Tokens: Includes components for different token types.
  • UI: General UI components used across the application.
  • Footers.tsx: Footer component.
  • Navbar.tsx: Navbar component.
• Config:
  • config.ts: Holds the Wagmi configuration for Reown (WalletConnect) implementation.
  • provider.tsx: Configuration for web3 providers.
  • wagmiProviderConfig.ts: Configuration for Wagmi providers.
• Lib: Contains various utility folders for easy organization:
  • Constants: Application constants.
  • Functions: General functions used across the app.
  • Types: Type definitions.
  • Utils: Utility functions.
• Pages:
  • index.ts: Main entry point.
  • Etherspot.tsx: Page component for Etherspot.
  • Home.tsx: Homepage component.
  • Wagmi.tsx: Wagmi-related page component.

Code for ERC20, ERC721, and ERC1155 Tabs

The code responsible for the tabs corresponding to ERC20, ERC721, and ERC1155 can be found within the components folder:

• ERC20: Located in the components/tokens/ERC20 directory.
• ERC721: Located in the components/tokens/ERC721 directory.
• ERC1155: Located in the components/tokens/ERC1155 directory.

This structured approach ensures that code and assets are logically grouped, facilitating ease of navigation and maintainability.

Understanding the ERC20 Tab Code

The code interacts with a smart contract to mint tRSK tokens. Here's a detailed breakdown of how this is achieved:

1. Smart Contract Reference:

• Address: The smart contract's address is specified by the ERC20_ADDRESS constant.
• ABI: The contract's ABI (Application Binary Interface), which defines the contract functions and their parameters, is provided by the abi constant.

2. Reading Contract Data:

const { data, isLoading, isError, refetch } = useReadContract({
    abi,
    address: ERC20_ADDRESS,
    functionName: "balanceOf",
    args: [address],
});

3. Writing to the Contract: The useWriteContract hook from the wagmi library is used to interact with the contract's write functions (functions that modify the state).

4. Minting Tokens: The mintTokens function calls writeContractAsync to mint tRSK tokens.

• Arguments:
  • abi: Defines the contract functions and their parameters.
  • address: The address of the deployed ERC-20 contract.
  • functionName: The name of the function to call, which is "mint" in this case.
  • args: An array containing the user's wallet address and the amount to mint (100 in this case).

const mintTokens = async () => {
  setLoading(true);
  try {
      const txHash = await writeContractAsync({
          abi,
          address: ERC20_ADDRESS,
          functionName: "mint",
          args: [address, 100],
      });
      await waitForTransactionReceipt(config, {
          confirmations: 1,
          hash: txHash,
      });
      setLoading(false);
      toast({
          title: "Successfully minted tRSK tokens",
          description: "Refresh the page to see changes",
      });
      refetch();
  } catch (e) {
      toast({
          title: "Error",
          description: "Failed to mint tRSK tokens",
          variant: "destructive",
      });
      setLoading(false);
      console.error(e);
  }
};

This sends a transaction to the blockchain to execute the "mint" function on the smart contract, thereby minting tRSK tokens and depositing them into the user's wallet.

Understanding the ERC721 Tab Code

This code defines a React component named ERC721Tab, which provides a user interface for interacting with an ERC-721 smart contract.

The Key Functions Within This Component:

1. useReadContract: This hook is used to read data from the ERC-721 contract. It fetches the balance of NFTs held by the connected user's address.

• Parameters:
  • abi: The ABI (Application Binary Interface) of the ERC-721 contract.
  • address: The address of the ERC-721 contract.
  • functionName: The name of the function to call on the contract (balanceOf).
  • args: The arguments to pass to the contract function ([address]).

2. useWriteContract: This hook is used to write data to the ERC-721 contract, specifically to mint a new NFT.

Function:

• writeContractAsync: Asynchronously writes to the contract by calling the safeMint function of the ERC-721 contract.

3. mintNFT: This is an asynchronous function that handles the minting process of a new NFT.

• Steps:
  • Sets the loading state to true.
  • Attempts to call the safeMint function on the ERC-721 contract using writeContractAsync.
  • Waits for the transaction to be confirmed using waitForTransactionReceipt.
  • Displays a success toast message if the minting is successful.
  • Refetches the user's NFT balance by calling refetch.
  • Catches any errors, logs them, and displays an error toast message.
  • Sets the loading state to false.

4. refetch: This function is part of the useReadContract hook and is used to refresh the balance of NFTs after a successful minting operation.

5. toast: This function is used to display toast notifications for success or error messages.

The rest of the component contains JSX to render the UI elements, including a button to mint the NFT, a balance display, and a link to view the minted NFTs on a block explorer.

Understanding the ERC1155 Tab Code

The code provided is a React component that interacts with a smart contract using the ERC-1155 standard. It allows users to mint tokens and check their balances.

The Key Functions Within This Component:

1. ERC1155Tab Component:

State Variables:

• loading: Boolean to manage the loading state during token minting.
• value: Number to store the selected token type for minting.
• address: The user's wallet address obtained from the useAccount hook.

2. useReadContract Hooks: These hooks are used to read data from the smart contract.

• useReadContract for checking the balance of Type A tokens (with ID 1).
• useReadContract for checking the balance of Type B tokens (with ID 2).

3. mintTokens Function: An asynchronous function that handles the minting of tokens.

• Steps:
  • Calls writeContractAsync to interact with the smart contract and mint tokens.
  • Waits for the transaction receipt using waitForTransactionReceipt.
  • Displays success or error toasts based on the outcome.
  • Refetches the balance data after minting.

Join the Community

Building dApps can be challenging, but you’re not alone.
Join the Rootstock Discord community for help, questions, and collaboration.