Building a dApp with React & Buburuza

Buburuza, leveraging Arbitrum's Layer 3 architecture, offers a scalable and cost-effective environment for decentralized applications. This guide walks you through setting up a React-based dApp, integrating it with Buburuza, and addressing common challenges.

---

1. Setting Up the Development Environment

Prerequisites

Ensure you have the following installed:

• Node.js: Download and install from nodejs.org.

• Yarn: Install via npm:

  npm install --global yarn

• MetaMask: Install the MetaMask extension from metamask.io.

• React App: Create a new React application using Create React App:

  npx create-react-app my-buburuza-dapp
  cd my-buburuza-dapp

Install Dependencies

Install the necessary packages:

yarn add ethers @web3-react/core

---

2. Connecting to Buburuza with MetaMask

Configure MetaMask

1. Open MetaMask and click on the network dropdown.

2. Select Add Network and enter the following details:

   • Network Name: Buburuza Testnet

   • New RPC URL: https://rpc.buburuza.com

   • Chain ID: 5456918401

   • Currency Symbol: BUBU

   • Block Explorer URL: https://explorer.buburuza.com

Connect React App to MetaMask

In your React application, create a context to manage the MetaMask connection:

import { createContext, useContext, useState, useEffect } from 'react';
import { ethers } from 'ethers';

const Web3Context = createContext();

export const Web3Provider = ({ children }) => {
  const [provider, setProvider] = useState(null);
  const [account, setAccount] = useState(null);

  useEffect(() => {
    if (window.ethereum) {
      const ethProvider = new ethers.providers.Web3Provider(window.ethereum);
      setProvider(ethProvider);
    }
  }, []);

  const connectWallet = async () => {
    if (provider) {
      await provider.send('eth_requestAccounts', []);
      const signer = provider.getSigner();
      const userAccount = await signer.getAddress();
      setAccount(userAccount);
    }
  };

  return (
    <Web3Context.Provider value={{ provider, account, connectWallet }}>
      {children}
    </Web3Context.Provider>
  );
};

export const useWeb3 = () => useContext(Web3Context);

Wrap your application with the Web3Provider in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Web3Provider } from './Web3Context';
import App from './App';

ReactDOM.render(
  <Web3Provider>
    <App />
  </Web3Provider>,
  document.getElementById('root')
);

---

3. Interacting with Smart Contracts

Deploying a Smart Contract

Use Remix IDE to deploy your smart contract to Buburuza:

1. Navigate to Remix IDE.

2. Create a new file and paste your Solidity contract code.

3. Compile the contract using the Solidity compiler.

4. Deploy the contract to the Buburuza network using the Injected Web3 environment.

Interacting with the Contract in React

In your React components, interact with the deployed contract:

import { useEffect, useState } from 'react';
import { ethers } from 'ethers';

const contractAddress = 'your_contract_address';
const abi = [ /* ABI array */ ];

const MyComponent = () => {
  const { provider, account } = useWeb3();
  const [contract, setContract] = useState(null);

  useEffect(() => {
    if (provider && account) {
      const signer = provider.getSigner();
      const contractInstance = new ethers.Contract(contractAddress, abi, signer);
      setContract(contractInstance);
    }
  }, [provider, account]);

  const callContractFunction = async () => {
    if (contract) {
      try {
        const result = await contract.someFunction();
        console.log(result);
      } catch (error) {
        console.error('Error calling contract function:', error);
      }
    }
  };

  return (
    <div>
      <button onClick={callContractFunction}>Call Contract Function</button>
    </div>
  );
};

---

4. Troubleshooting Common Issues

MetaMask Connection Issues

• Problem: MetaMask is not connecting to Buburuza.

• Solution: Ensure that Buburuza's RPC URL is correctly configured in MetaMask.

Contract Deployment Failures

• Problem: Deploying contracts fails with "out of gas" errors.

• Solution: Increase the gas limit in Remix or your deployment script.

Transaction Reverts

• Problem: Transactions revert unexpectedly.

• Solution: Check the contract's logic for require statements or other conditions that may cause reverts.

Network Errors

• Problem: Network errors during contract interaction.

• Solution: Verify that Buburuza's network is operational and that your RPC URL is correct.