How to Build a Fast Web3 dApp with GetBlock’s Free RPC

Written by induction | Published 2025/06/17
Tech Story Tags: web3-development | getblock-tutorial | bsc-polygon-bridge | getblockbridge | fast-asset-transfer | getblock-rpc | chainswap25 | cross-chain-bridge-tutorial

TLDRGetBlock's free tier has 5K daily requests, 5 RPS, and multi-chain support. This guide will walk you through building a**cross-chain token bridge** with real-time updates.via the TL;DR App

Why Performance Matters in Web3

In 2025, Web3 applications must compete with Web2's seamless experience. Slow transactions, laggy interfaces, and unreliable data plague many dApps, often owing to poorly optimized Remote Procedure Call (RPC) usage.

Here, I tested GetBlock's free tier (5K daily requests, 5 RPS, and multi-chain support). Their paid plans have incredible features; however, for testing, the free tier still offers a decent opportunity to build production-ready dApps at zero cost—if you know how to optimize it.

I tested GetBlock’s incredible capabilities and attempted to organize the guide into easy-to-understand language. Essentially, this guide will walk you through building a cross-chain token bridge with real-time updates while maximizing GetBlock's free limits.

📥 GetBlock RPC: Free Tier Capabilities & Strategic Advantages

A. Free Plan Technical Specifications (2025 Update)

  • Throughput: 5 requests per second (RPS)
  • Daily Limit: 5,000 requests
  • Protocol Support: REST, JSON-RPC, WebSocket, gRPC, GraphQL
  • Networks: 55+ blockchains (Ethereum, Solana, Polygon, BSC, etc.)

This is a table with a more detailed description.

Feature

Free Tier Limit

Ideal Use Case

Requests/Day

5,000

Prototypes, MVP dApps

Requests/Second

5 RPS

Wallet integrations

Chains Supported

55+ (EVM, Solana, etc.)

Cross-chain bridges

WebSocket Access

✅ Yes

Real-time event tracking

📥Hidden Advantages for Performance Optimization

  1. Multi-Chain Single API Key – Reduces complexity by managing Ethereum, Polygon, and Solana via one endpoint.
  2. Testnet Faucets – Free MATIC, ETH for rapid iteration.
  3. WebSocket for Real-Time Data: Avoid polling and saving requests.

What We're Building

We are building a cross-chain token bridge that allows users to transfer tokens between Ethereum and Binance Smart Chain using a multichain wallet dashboard. The solution will include efficient RPC usage, real-time balance updates, and many more.

It is gonna be interesting, stay tuned😊.

Tech Stack

Component

Technology

Purpose

Frontend

React + Vite

Fast UI rendering and state management

Blockchain

Ethers.js

RPC interactions, smart contract calls

Backend

Node.js (optional)

Caching and fallback layer for efficient use

RPC Provider

GetBlock Free Tier

BSC and ETH RPC data

Great — let us build the complete, in-depth Web3 dApp project using GetBlock’s free RPC tier in 2025.

📁 Final Project Directory

Make sure that your final project’s directory looks like this. You can update your directory according to the following diagram stepwise.

💻 Project Setup

👉Initialize the Project

mkdir ETH-bsc-bridge && cd ETH-bsc-bridge
npm init -y
npm install --save-dev hardhat
npx hardhat

Subsequently, the following dependencies should be installed:

npm install dotenv ethers
npm install --save-dev @nomicfoundation/hardhat-toolbox

👉Get Your GetBlock API Key

⚛️Configure .env File

Create .env in root:

MNEMONIC="your_12 words mnemonic phrase"
BSC_RPC_URL="https://bsc-testnet.getblock.io/YOUR_API_KEY/jsonrpc"
SEPOLIA_RPC_URL="https://eth-testnet.getblock.io/YOUR_API_KEY/jsonrpc"

⚠️ Always use TEST ACCOUNTS for development.
⚠️ Keep mnemonic safe — don’t share it publicly.


⚡Update hardhat.config.js

👉Please update pre-created hardhat.config.js in the root directory.

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

const { MNEMONIC, SEPOLIA_RPC_URL, BSC_RPC_URL } = process.env;

function getAccounts() {
    if (!MNEMONIC || MNEMONIC.split(" ").length !== 12) {
        console.warn("⚠️ Invalid MNEMONIC, no accounts loaded.");
        return [];
    }
    return { mnemonic: MNEMONIC };
}

module.exports = {
    solidity: "0.8.20",
    defaultNetwork: "sepolia",
    networks: {
        sepolia: {
            url: SEPOLIA_RPC_URL,
            accounts: getAccounts(),
            gasPrice: 25_000_000_000,
            timeout: 60_000,
        },
        bscTestnet: {
            url: BSC_RPC_URL,
            accounts: getAccounts(),
            gasPrice: 25_000_000_000,
        },
    },
};

💡Smart Contracts – Lock & Mint

We'll create three essential contracts here:

  • Token.sol — ERC20 token deployed on both BSC & ETH
  • BSCBridge.sol — Lock tokens & emit event on BSC
  • ETHBridge.sol — Mint tokens on Ethereum (only by admin/relayer)

📁 Location

All smart contracts go into:
/contracts/

Please re-check the directory structure in the Figure 1.

1️⃣ Token.sol – Shared Token Contract

Basic ERC20 token.

📄 contracts/Token.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract BridgeToken is ERC20, Ownable {
    constructor(address initialOwner) ERC20("BridgeToken", "BRG") {
        _mint(initialOwner, 1_000_000 * 10 ** decimals());
        transferOwnership(initialOwner); // This sets the initial owner (e.g., bridge contract later)
    }

    function mint(address to, uint256 amount) external onlyOwner {
        _mint(to, amount);
    }
}

2️⃣ BSCBridge.sol – Lock Contract on BSC

This locks tokens and emits TokenLocked event.

📄 contracts/BSCBridge.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "./BridgeToken.sol";

contract BSCBridge {
    BridgeToken public token;
    address public admin;

    event TokenMinted(address indexed user, uint256 amount);

    constructor(address tokenAddress) {
        token = BridgeToken(tokenAddress);
        admin = msg.sender;
    }

    function mintTokens(address to, uint256 amount) external {
        require(msg.sender == admin, "Only admin can mint");
        token.mint(to, amount);
        emit TokenMinted(to, amount);
    }
}

🧠 How it works:

  • Users approve and call lockTokens
  • Contract emits TokenLocked
  • Backend listens and triggers mint on BSC

3️⃣ ETHBridge.sol – Mint Contract on Ethereum

Only a trusted relayer (admin) can mint tokens.

📄 contracts/ETHBridge.sol


// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "./BridgeToken.sol";

contract ETHBridge {
    BridgeToken public token;
    address public admin;

    event TokenLocked(address indexed user, uint256 amount, address targetAddress);

    constructor(address tokenAddress) {
        token = BridgeToken(tokenAddress);
        admin = msg.sender;
    }

    function lockTokens(uint256 amount, address targetAddress) external {
        require(amount > 0, "Amount must be greater than 0");
        token.transferFrom(msg.sender, address(this), amount);
        emit TokenLocked(msg.sender, amount, targetAddress);
    }

    function withdraw(address to, uint256 amount) external {
        require(msg.sender == admin, "Only admin");
        token.transfer(to, amount);
    }
}

🧠 How it works:

  • Backend (trusted relayer) listens to BSC events
  • Calls mintTokens on Ethereum Sepolia via private key
  • Tokens minted for user

4️⃣ Deploy Scripts

Wait, don’t forget to install dependency for Contracts:

npm install @openzeppelin/contracts

👉Create scripts/deployBSC.js:

const hre = require("hardhat");

async function main() {
    const [deployer] = await hre.ethers.getSigners();
    console.log("Deploying to BSC Testnet from:", deployer.address);

    // Deploy BridgeToken (owned by deployer for now)
    const BridgeToken = await hre.ethers.getContractFactory("BridgeToken");
    const token = await BridgeToken.deploy(deployer.address);
    await token.waitForDeployment();
    const tokenAddress = await token.getAddress();
    console.log("✅ BridgeToken (BSC) deployed at:", tokenAddress);

    // Deploy BSCBridge
    const BSCBridge = await hre.ethers.getContractFactory("BSCBridge");
    const bridge = await BSCBridge.deploy(tokenAddress);
    await bridge.waitForDeployment();
    const bridgeAddress = await bridge.getAddress();
    console.log("✅ BSCBridge deployed at:", bridgeAddress);

    // Transfer token ownership to BSCBridge so it can mint
    const tx = await token.transferOwnership(bridgeAddress);
    await tx.wait();
    console.log("🔑 Token ownership transferred to BSCBridge.");
}

main().catch((error) => {
    console.error("🚨 Deployment failed:", error);
    process.exitCode = 1;
});

👉Create scripts/deployETH.js:

const hre = require("hardhat");

async function main() {
    const [deployer] = await hre.ethers.getSigners();
    console.log("Deploying to Sepolia from:", deployer.address);

    // Deploy BridgeToken
    const BridgeToken = await hre.ethers.getContractFactory("BridgeToken");
    const token = await BridgeToken.deploy(deployer.address);
    await token.waitForDeployment();
    const tokenAddress = await token.getAddress();
    console.log("✅ BridgeToken (Sepolia) deployed at:", tokenAddress);

    // Deploy ETHBridge
    const ETHBridge = await hre.ethers.getContractFactory("ETHBridge");
    const bridge = await ETHBridge.deploy(tokenAddress);
    await bridge.waitForDeployment();
    const bridgeAddress = await bridge.getAddress();
    console.log("✅ ETHBridge deployed at:", bridgeAddress);
}

main().catch((error) => {
    console.error("🚨 Deployment failed:", error);
    process.exitCode = 1;
});

5️⃣ Deploy the Contracts

This time, we deploy our contracts to the blockchain. Before this, make sure to have testnet tokens for the BSC and Ethereum testnets  in your MetaMask wallet. They can be obtained from free faucet sites such as the GetBlock, and BNB faucet.

First, let us try to deploy a contract to the BSC test; the run command npx hardhat compiles to compile,  and  then run the following command at the terminal:

npx hardhat run scripts/deployBSC.js --network bscTestnet

Once you deploy the contract to the testnet, you will see the following output in the terminal:

Second, the contract was deployed to the Ethereum Sepolia testnet. Run the following command at the terminal:

npx hardhat run scripts/deployEth.js --network sepolia

The output of the terminal should be similar if everything is correct.


Note: Please keep both the contract addresses from the BSC and Ethereum deployment to update.env files for the next step. The tokens deployed here are BRG and they can be tracked on BSC testnet and Ethereum Sepolia testnet explorers.


⚙️Backend Listener — Token Bridge Relayer

The relayer service listens to events from the BSC Bridge and calls the mintTokens() function of the Ethereum Bridge.

📁 Directory Structure Update

Create the backend/ directory in your root folder:

mkdir backend && cd backend
npm init -y
npm install ethers dotenv

🔐 .env (Root-level)

Now, we update with the following details .env file.

BSC_BRIDGE="0x...your deployed BSCBridge address"
SEPOLIA_RPC_URL="0x...your deployed EthereumBridge address"
SEPOLIA_TOKEN="0x...your ETH token address"

🧠 You must replace the above values with real deployed addresses.


📄 backend/index.js — Main Relayer Logic

require("dotenv").config({ path: __dirname + "/../.env" });

const { ethers } = require("ethers");

// Load environment variables
const {
    MNEMONIC,
    SEPOLIA_WS_URL,
    SEPOLIA_BRIDGE,
    BSC_RPC_URL,
    BSC_BRIDGE
} = process.env;

// Validate env variables
if (!MNEMONIC || !SEPOLIA_WS_URL || !SEPOLIA_BRIDGE || !BSC_RPC_URL || !BSC_BRIDGE) {
    console.error("❌ Missing environment variables. Check .env file.");
    process.exit(1);
}

// Create wallet from mnemonic
let wallet;
try {
    wallet = ethers.Wallet.fromPhrase(MNEMONIC);
} catch (err) {
    console.error("❌ Invalid MNEMONIC:", err.message);
    process.exit(1);
}

// Providers
const sepoliaProvider = new ethers.WebSocketProvider(SEPOLIA_WS_URL);
const bscProvider = new ethers.JsonRpcProvider(BSC_RPC_URL);
const bscSigner = wallet.connect(bscProvider);

// Contract ABIs
const ETH_BRIDGE_ABI = [
    "event TokenLocked(address indexed user, uint256 amount, address targetAddress)"
];
const BSC_BRIDGE_ABI = [
    "function mintTokens(address to, uint256 amount) external"
];

// Contract instances
const ethBridge = new ethers.Contract(SEPOLIA_BRIDGE, ETH_BRIDGE_ABI, sepoliaProvider);
const bscBridge = new ethers.Contract(BSC_BRIDGE, BSC_BRIDGE_ABI, bscSigner);

// In-memory cache to avoid duplicate processing
const processedTxs = new Set();

async function replayPastEvents(fromBlock = null, toBlock = "latest") {
    console.log("🔁 Scanning past events...");

    if (!fromBlock) {
        const currentBlock = await sepoliaProvider.getBlockNumber();
        fromBlock = currentBlock - 10000; // Lookback 10K blocks
        if (fromBlock < 0) fromBlock = 0;
    }

    if (toBlock === "latest") {
        toBlock = await sepoliaProvider.getBlockNumber();
    }

    const step = 2000;
    for (let start = fromBlock; start <= toBlock; start += step) {
        let end = start + step - 1;
        if (end > toBlock) end = toBlock;

        console.log(`📦 Querying blocks: ${start} → ${end}`);

        try {
            const logs = await ethBridge.queryFilter("TokenLocked", start, end);

            for (const event of logs) {
                const { user, amount, targetAddress } = event.args;
                const txHash = event.transactionHash;

                if (processedTxs.has(txHash)) {
                    console.log("⚠️ Already processed:", txHash);
                    continue;
                }

                processedTxs.add(txHash);
                console.log(`🔒 Replaying: ${user} locked ${ethers.formatEther(amount)} BRG → ${targetAddress}`);

                try {
                    const tx = await bscBridge.mintTokens(targetAddress, amount);
                    await tx.wait();
                    console.log(`✅ Minted ${ethers.formatEther(amount)} BRG on BSC for ${targetAddress}`);
                } catch (err) {
                    console.error("❌ Minting failed:", err.message);
                }
            }
        } catch (err) {
            console.error(`❌ Error querying blocks ${start} → ${end}:`, err.message);
        }
    }
}

async function startRelayer() {
    console.log("🚀 Relayer started. Listening for real-time TokenLocked events...");

    ethBridge.on("TokenLocked", async (user, amount, targetAddress, event) => {
        const txHash = event.transactionHash;

        if (processedTxs.has(txHash)) {
            console.log("⚠️ Duplicate real-time event skipped:", txHash);
            return;
        }

        processedTxs.add(txHash);
        console.log(`🔒 Detected real-time lock: ${user} locked ${ethers.formatEther(amount)} BRG → ${targetAddress}`);

        try {
            const tx = await bscBridge.mintTokens(targetAddress, amount);
            await tx.wait();
            console.log(`✅ Minted ${ethers.formatEther(amount)} BRG on BSC for ${targetAddress}`);
        } catch (err) {
            console.error("❌ Real-time minting failed:", err.message);
        }
    });
}

// Start everything
(async () => {
    await replayPastEvents();
    await startRelayer();
})();

Start Relayer

From backend/ directory:

node index.js

If everything is set correctly, you should see:

🚀 Relayer started. Listening for BSC lock events...

Now your relayer listens 24/7 to Ethereum Testnet, and triggers minting on Binance Smart Chain when locking happens. Also, don’t forget to install npm install ethers dotenv in the backend directory. In case you notice an error due to RPC endpoint, switch it to WebSocket on GetBlock and update your .env file SEPOLIA_WS_URL="wss://go.getblock.io/YOUR_API_KEY


In our case, terminal exhibited something like as the following output:

🌐 Now, we are focused to build  the Frontend Bridge dApp with React + MetaMask + Ethers.js

📁 Project Directory Update

npm create vite@latest frontend
cd frontend
npm install
npm install -D tailwindcss@3.4.3 postcss autoprefixer web3@latest
npx tailwindcss init -p

Create another .env to /frontend/.env :

# Sepolia network
VITE_ETH_BRIDGE=0xYourETHBridge
VITE_TOKEN_ADDRESS=0xourETHToken
VITE_ETH_CHAIN_ID=11155111

# BSC Testnet
VITE_BSC_BRIDGE=0xYourBSCBridge
VITE_BSC_TOKEN=0xYourBSCToken
VITE_BSC_CHAIN_ID=97

Note: You would have already created the ETH testnet token just include the contract address in the .env file. The BSC testnet-based token can be created easily from here without any difficulties if you wish further testings. Therefore, creating tokens in the blockchain is simple and does not require extra stress-coding expertise.


1️⃣ frontend/src/bridge.js – Contract Logic


// frontend/src/bridge.js

export const ETH_BRIDGE_ADDRESS = import.meta.env.VITE_ETH_BRIDGE;
export const TOKEN_ADDRESS = import.meta.env.VITE_TOKEN_ADDRESS;

// Full ABI from Hardhat artifact (for ETHBridge)
export const ETH_BRIDGE_ABI = [
    {
        "inputs": [
            { "internalType": "address", "name": "tokenAddress", "type": "address" }
        ],
        "stateMutability": "nonpayable",
        "type": "constructor"
    },
    {
        "anonymous": false,
        "inputs": [
            { "indexed": true, "internalType": "address", "name": "user", "type": "address" },
            { "indexed": false, "internalType": "uint256", "name": "amount", "type": "uint256" },
            { "indexed": false, "internalType": "address", "name": "targetAddress", "type": "address" }
        ],
        "name": "TokenLocked",
        "type": "event"
    },
    {
        "inputs": [
            { "internalType": "uint256", "name": "amount", "type": "uint256" },
            { "internalType": "address", "name": "targetAddress", "type": "address" }
        ],
        "name": "lockTokens",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "admin",
        "outputs": [{ "internalType": "address", "name": "", "type": "address" }],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "token",
        "outputs": [{ "internalType": "contract BridgeToken", "name": "", "type": "address" }],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            { "internalType": "address", "name": "to", "type": "address" },
            { "internalType": "uint256", "name": "amount", "type": "uint256" }
        ],
        "name": "withdraw",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    }
];

// ERC20 ABI for approve and balanceOf
export const ERC20_ABI = [
    {
        "constant": true,
        "inputs": [{ "name": "_owner", "type": "address" }],
        "name": "balanceOf",
        "outputs": [{ "name": "balance", "type": "uint256" }],
        "type": "function"
    },
    {
        "constant": false,
        "inputs": [
            { "name": "_spender", "type": "address" },
            { "name": "_value", "type": "uint256" }
        ],
        "name": "approve",
        "outputs": [{ "name": "success", "type": "bool" }],
        "type": "function"
    },
    {
        "constant": true,
        "inputs": [],
        "name": "decimals",
        "outputs": [{ "name": "", "type": "uint8" }],
        "type": "function"
    }
];

2️⃣ frontend/src/App.jsx – React UI

import React, { useEffect, useState } from "react";
import Web3 from "web3";
import detectEthereumProvider from "@metamask/detect-provider";
import {
    ETH_BRIDGE_ABI,
    ERC20_ABI,
    ETH_BRIDGE_ADDRESS,
    TOKEN_ADDRESS,
} from "./bridge";

function App() {
    const [web3, setWeb3] = useState(null);
    const [account, setAccount] = useState("");
    const [tokenBalance, setTokenBalance] = useState("0");
    const [amount, setAmount] = useState("");
    const [targetAddress, setTargetAddress] = useState("");
    const [status, setStatus] = useState("");

    // Debugging: Log env variables
    console.log("ENV ETH_BRIDGE_ADDRESS:", ETH_BRIDGE_ADDRESS);
    console.log("ENV TOKEN_ADDRESS:", TOKEN_ADDRESS);

    // Verify addresses on mount
    useEffect(() => {
        if (!ETH_BRIDGE_ADDRESS || !TOKEN_ADDRESS) {
            setStatus(
                "❌ Contract address not specified. Please check your .env file."
            );
        }
    }, []);

    const connectWallet = async () => {
        const provider = await detectEthereumProvider();
        if (!provider) {
            setStatus("❌ MetaMask not detected.");
            return;
        }

        try {
            await provider.request({ method: "eth_requestAccounts" });
            const web3Instance = new Web3(provider);
            setWeb3(web3Instance);
            const accounts = await web3Instance.eth.getAccounts();
            setAccount(accounts[0]);

            const chainId = await provider.request({ method: "eth_chainId" });
            if (chainId !== "0xaa36a7") {
                setStatus("❌ Please switch to Ethereum Sepolia.");
            } else {
                setStatus("✅ Connected to Ethereum Sepolia.");
            }
        } catch (err) {
            console.error("MetaMask connection error:", err);
            setStatus("❌ Failed to connect MetaMask.");
        }
    };

    const loadBalance = async () => {
        if (!web3 || !account) return;
        try {
            if (!TOKEN_ADDRESS) {
                setStatus("❌ Token contract address missing.");
                return;
            }
            const token = new web3.eth.Contract(ERC20_ABI, TOKEN_ADDRESS);
            const raw = await token.methods.balanceOf(account).call();
            const formatted = web3.utils.fromWei(raw, "ether");
            setTokenBalance(formatted);
        } catch (err) {
            console.error("Balance error:", err);
            setStatus("❌ Failed to fetch BRG balance.");
        }
    };

    const handleBridge = async () => {
        setStatus("");

        if (!ETH_BRIDGE_ADDRESS) {
            setStatus("❌ Bridge contract address not specified.");
            return;
        }

        if (!TOKEN_ADDRESS) {
            setStatus("❌ Token contract address not specified.");
            return;
        }

        if (!account) {
            setStatus("❗ Wallet not connected.");
            return;
        }

        if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
            setStatus("❗ Please enter a valid token amount.");
            return;
        }

        if (!targetAddress || !web3.utils.isAddress(targetAddress)) {
            setStatus("❗ Please enter a valid BSC wallet address.");
            return;
        }

        try {
            const weiAmount = web3.utils.toWei(amount.toString(), "ether");
            const token = new web3.eth.Contract(ERC20_ABI, TOKEN_ADDRESS);
            const bridge = new web3.eth.Contract(ETH_BRIDGE_ABI, ETH_BRIDGE_ADDRESS);
            const checksumAddress = web3.utils.toChecksumAddress(targetAddress);

            setStatus("🔃 Approving token transfer...");
            await token.methods.approve(ETH_BRIDGE_ADDRESS, weiAmount).send({ from: account });

            setStatus("🔐 Locking tokens on Sepolia...");
            await bridge.methods.lockTokens(weiAmount, checksumAddress).send({ from: account });

            setStatus("✅ Tokens locked. Mint will happen on BSC.");
            setAmount("");
            loadBalance();
        } catch (err) {
            console.error("Bridge error:", err);
            setStatus("❌ Transaction failed: " + (err?.message || "Unknown error"));
        }
    };

    useEffect(() => {
        connectWallet();
    }, []);

    useEffect(() => {
        if (web3 && account) loadBalance();
    }, [web3, account]);

    return (
        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 to-black text-white px-4 py-10">
            <div className="bg-gray-900 border border-gray-700 shadow-2xl rounded-3xl max-w-md w-full p-8 space-y-6">
                <h1 className="text-3xl font-bold text-center text-blue-400">🌉 ETH ➝ BSC Bridge</h1>
                <p className="text-center text-gray-400 text-sm">
                    Bridge your <span className="text-yellow-300 font-bold">BRG</span> tokens from <strong>Ethereum Sepolia</strong> to <strong>BSC Testnet</strong>.
                </p>
                <div className="text-center text-green-300 font-mono text-sm">💰 BRG Balance: {tokenBalance}</div>

                <input
                    type="number"
                    min="0"
                    step="any"
                    placeholder="Amount to bridge"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    className="w-full p-3 rounded-lg bg-gray-800 border border-gray-600 placeholder-gray-500 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                />

                <input
                    type="text"
                    placeholder="Your BSC wallet address"
                    value={targetAddress}
                    onChange={(e) => setTargetAddress(e.target.value)}
                    className="w-full p-3 rounded-lg bg-gray-800 border border-gray-600 placeholder-gray-500 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                />

                <button
                    onClick={handleBridge}
                    className="w-full py-3 bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 font-bold rounded-xl shadow-md transition"
                >
                    🔐 Lock & Bridge
                </button>

                {status && (
                    <div className="text-center mt-4 text-yellow-300 font-mono text-sm">
                        {status}
                    </div>
                )}

                <div className="text-xs text-center text-gray-500 pt-4 border-t border-gray-700">
                    Connected:{" "}
                    <span className="text-gray-300 font-mono">
                        {account ? `${account.slice(0, 6)}...${account.slice(-4)}` : "Not connected"}
                    </span>
                </div>
            </div>
        </div>
    );
}

export default App;

3️⃣Create/Check index.html in frontend directory.

Make sure your index.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Token Bridge dApp</title>
</head>
<body class="bg-black text-white">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>
</html>

4️⃣Create main.jsx (or main.js) if using React in frontend/src directory:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Then edit Edit tailwind.config.js in the frontend directory:

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Don’t forget to paste the following code in frontend/src/index.css for the better styling.

@tailwind base;
@tailwind components;
@tailwind utilities;

5️⃣Install dependencies

Install React, ReactDOM and @metamask/detect-provider in the frontend directory by running the following commands in the terminal:

npm install react react-dom
npm install @metamask/detect-provider

After that, start the dev server:

npm run dev

You will see your server starting at http://localhost:5173/. Once you visit the URL, dApp automatically ask you to connect MetaMask wallet by triggering a pop-up window.

Once you connect wallet, you see the frontend of dApp exhibiting total BRG tokens and wallet connected status. You can check the following GIF of “Lock & Bridge” testing process.

Once your transactions are confirmed, you see a notification from MetMask. However, one BRG token is located in the Ethereum Sepolia network, as can be seen in the Sepolia test net explorer. You will notice a message like , “✅ Tokens locked. Mint occurs in the BSC. How to check it in BSC.”

The next step is crucial. This time, we have to run relayer from the backend directory using the following command.

 node index.js

As you can see, 1 BRG token has been successfully minted on BSC testnet. You can track the transaction in BSC explorer here.

Finally, our 1 BRG token from Ethereum network is transferred to BSC testnet. You can find source code on GitHub here.

🧪Final Testing, Deployment Guide & Advanced Enhancements

✅ End-to-End Token Bridge Flow

Step

Action

Chain

Actor

1

User connects MetaMask

BSC

dApp

2

Approves + locks tokens

BSC

dApp (user signs)

3

TokenLocked emitted

BSC

Smart contract

4

Relayer catches event

Node.js

Backend

5

Relayer mints tokens

Ethereum

Calls smart contract

6

User sees tokens

Ethereum

On-chain

During the test, make sure to have a look at the following checklist.

✅Manual Test Checklist

👉Preparation:

  • Deploy both tokens and bridge contracts, as discussed above.
  • Fund your wallet on:
    • BSC testnet faucet
    • Ethereum testnet faucet
  • Configure .env in both root and /frontend

✅ Test Steps:

#

Test

What to Expect

1

Launch dApp

MetaMask connects

2

Approve & Lock 1 BRG (This is our test token)

Tx completes, event logged

3

Backend prints log

TokenLocked event

4

Tokens minted on Ethereum

TokenMinted event

5

Check Ethereum token balance

Matches bridged amount


✅ You can check Ethereum and BSC balances using a custom block explorer by inputting your address.


🧠 3. Advanced Features & Security Improvements

Well, the demonstration so far in this tutorial was to safe to test the dApp in the testnet environment of the blockchain. If you are serious and want to go further, here are a few tips for you.

1️⃣ Nonce & Replay Protection

Add a mapping of processed tx hashes in the backend to prevent the reprocessing of the same event:

const processedTxs = new Set(); // Use DB in production

if (processedTxs.has(event.transactionHash)) return;
processedTxs.add(event.transactionHash);

2️⃣ Event Indexing with GraphQL (Optional)

You can use The Graph (when BSC indexing is needed) or integrate GetBlock’s webhooks for efficient event catching instead of polling.

3️⃣ Signature Verification for Minting (zkBridge-style)

During production, the Ethereum Bridge should not trust the relayer blindly. Instead:

  • Lock emits a message hash
  • User signs that message off-chain
  • Submit signature to mint (optional layer)

4️⃣ Support Multiple Chains

You can make this bridge multichain using

  • Chain IDs for tracking bridge source/destination
  • Adding multiple token contracts
  • Abstracting the relayer to handle many chains (Polygon, ETH Sepolia, etc.)

🚀 Deployment to Production (Optional)

If you are able to test the dApp in the testnet it is not hard for you to go mainnet-based dApp which you can deploy for the production. Here are some cool deployment options for you.

Component

Deployment Option

Frontend UI

Vercel / Netlify / Cloudflare Pages

Backend

Railway / Render / VPS

Smart Contracts

Deployed already via Hardhat on GetBlock RPC

RPC Gateways

GetBlock Dashboard


GitHub actions are used to automatically trigger deployments from commits.


📥Conclusion: Summary of Completed Bridge dApp Using APIs

GetBlocks offers battle-tested blockchain APIs. We have also attempted to prove this to some extent in this tutorial. To create new Web3 applications that are scalable and user-friendly, there is a need to overcome the constraints of public infrastructure. The blockchain API layer is not plumbing; it is the spinal cord of the dApp. It is essential to understand the engineering complexities that lie behind quick and dependable APIs, including node optimization and worldwide distribution, intelligent load balancing, and persistent caching. Putting their faith in a provider such as GetBlock, who has made investments at all these infrastructure levels and provides dedicated nodes, multi-chain support, and the reliability expected of multinational enterprises, is no longer a luxury but a strategic move on the part of dApps serious about performance, scalability, and customer retention. By paying appropriate attention to these strata, developers will be able to ensure that innovative applications are developed on a bulletproof infrastructure, which will meet the needs of the second surge of Web3 adoption. Its future is rapid, consistent, and established on elegant infrastructure, and it is important to select its API partner. We believe that you have successfully performed the following checklist:

ERC-20 Tokendeployed on BSC + ETH
Bridge contractsfor locking and minting
Node.js backend relayerto bridge assets
React frontend dAppwith wallet integration
GetBlock endpointsused for seamless public testnet connection
Production-ready architecture with upgrade paths for security & scaling

If you have any question while testing this dApp, comment below. Thank You 🙏 !


Written by induction | Die-Hard fan of Nikola Tesla.
Published by HackerNoon on 2025/06/17