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
- Multi-Chain Single API Key – Reduces complexity by managing Ethereum, Polygon, and Solana via one endpoint.
- Testnet Faucets – Free MATIC, ETH for rapid iteration.
- 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
- Sign up at GetBlock.io
- Grab your free API key from the dashboard
- Note your endpoints:
- Sepolia RPC Testnet: https://go.getblock.io/YOUR_API_KEY (May not exhibit testnet balance in some cases if you are using Polygon Amoy ! )
- Binance Smart Chain (BSC): https://go.getblock.io/YOUR_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 🙏 !