Как построить быстрый DAPP Web3 с бесплатным RPC GetBlock

Как построить быстрый DAPP Web3 с бесплатным RPC GetBlock

18 июня 2025 г.

Почему производительность имеет значение в Web3

В 2025 году приложения Web3 должны конкурировать с бесшовным опытом Web2. Медленные транзакции, загарные интерфейсы и ненадежные данные страдают от многих дапсов, часто из -за плохо оптимизированного использования удаленного процедурного вызова (RPC).

Здесь я проверил бесплатный уровень GetBlock(5 тысяч ежедневных запросов, 5 RPS и поддержка с несколькими цепи). Их оплачиваемые планы имеют невероятные функции; Однако для тестирования бесплатный уровень все еще предлагает достойную возможность построитьготовые к производству DAPPS по нулевой стоимости- Если вы знаете, как его оптимизировать.

Я проверил невероятные возможности GetBlock и попытался организовать руководство на простой для понимания язык. По сути, это руководство проведет вас через строительствоПоперечный токен мостс обновлениями в реальном времени, максимизируя бесплатные ограничения GetBlock.

📥 GetBlock RPC: бесплатные возможности уровня и стратегические преимущества

A. Технические спецификации бесплатного плана (обновление 2025 года)

  • Throughput: 5 запросов в секунду (RPS)
  • Ежедневный лимит: 5000 запросов
  • Поддержка протокола: Rest, json-rpc, websocket, grpc, graphql
  • Сети: 55+ блокчейнов (Ethereum, Solana, Polygon, BSC и т. Д.)

Это таблица с более подробным описанием.

Особенность

Бесплатный предел уровня

Идеальный вариант использования

Запросы/день

5000

Прототипы, MVP DAPPS

Запросы/Второе

5 RPS

Интеграции кошелька

Цепочки поддерживаются

55+ (EVM, SOLANA и т. Д.)

Поперечные мосты

Доступ к WebSocket

✅ Да

Отслеживание событий в реальном времени

📥duden преимущества для оптимизации производительности

  1. Multi-Chain Single API-ключ- Уменьшает сложность, управляя Ethereum, Polygon и Solana через одну конечную точку.
  2. ТЕПТАННАЯ КРАКЕТЫ- БЕСПЛАТНЫЙ матичок для быстрой итерации.
  3. WebSocket для данных в реальном времени: Избегайте опросов и запросов на сбережения.

Что мы строим

Мы строим токен-мост с поперечной цепью, который позволяет пользователям переносить токены между полигоном и интеллектуальной цепью Binance, используя мультишевую панель панели кошелька. Решение будет включать в себя эффективное использование RPC, обновления баланса в реальном времени и многое другое.

Это будет интересно, следите за обновлениями.

Технический стек

Компонент

Технология

Цель

Внешний интерфейс

React + Vite

Быстрый рендеринг пользовательского интерфейса и управление государством

Блокчейн

Ethers.js

Взаимодействие RPC, смарт -контрактные звонки

Бэкэнд

Node.js (необязательно)

Кэширование и резервный слой для эффективного использования

RPC -провайдер

Получить бесплатный уровень

Данные BSC и Polygon RPC

Отлично-позвольте нам создать полный, углубленный проект Web3 DAPP с использованием бесплатного уровня RPC от GetBlock в 2025 году.

📁 Финальный каталог проектов

Убедитесь, что каталог вашего финального проекта выглядит так. Вы можете обновить свой каталог в соответствии со следующей диаграммой шаг.

Figure 1. Project’s final directory

💻 Настройка проекта

👉initialize проект

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

Впоследствии должны быть установлены следующие зависимости:

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

👉 Выключите свой ключ GetBlock API

  • Зарегистрируйтесь вGetBlock.io
  • Возьмите бесплатный ключ API с приборной панели
  • Обратите внимание на свои конечные точки:
    • Polygon Amoy Testnet:https://go.getblock.io/your_api_key(Возможно, в некоторых случаях не будет иметь баланс тестовую сеть!)
    • Binance Smart Chain (BSC):https://go.getblock.io/your_api_key

⚛ Конфигурация .ENV Файл

Создать .env в корне:

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

⚠ Всегда используйте тестовые учетные записи для разработки.
⚠ Сохраняйте мнемоническую безопасность - не делитесь им публично.


⚡update Hardhat.config.js

👉Пожалуйста, обновите предварительно созданныйhardhat.config.jsв корневом каталоге.

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

const { MNEMONIC, BSC_RPC_URL, POLYGON_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",
    networks: {
        bscTestnet: {
            url: BSC_RPC_URL,
            accounts: getAccounts(),
            gasPrice: 25000000000, // Set minimum gas price to 25 Gwei
        },
        polygonAmoy: {
            url: POLYGON_RPC_URL,
            accounts: getAccounts(),
            gasPrice: 25000000000, // Avoid "gas price below minimum" error
            timeout: 60000, // Increase timeout for better deployment reliability
        },
    },
};

💡smart Contracts - Lock & Mint

Здесь мы создадим три важных контракта:

  • Токен.sol- токен ERC20 развернута на BSC и Polygon
  • Bscbridge.sol- Block Tokens & Emit Event на BSC
  • Polygonbridge.sol- Токены мяты на многоугольниках (только администратором/реле)

📁 Местоположение

Все умные контракты вступают в:
/contracts/

Пожалуйста, перепроверьте структуру каталога на рисунке 1.

1 Token.sol - Согласный срок.

Основной токен ERC20.

📄 контракты/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); // Explicitly assigning ownership
    }

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

2⃣ bscbridge.sol - контракт с блокировкой на BSC

Это блокирует токены и излучает токенковое событие.

📄 Контракты/bscbridge.sol

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

import "./Token.sol";

contract BSCBridge {
    BridgeToken public token;
    address public admin;

    event TokenLocked(address indexed user, uint256 amount, string targetChainAddress);

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

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

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

🧠 Как это работает:

  • Пользователи одобряют и звонятlockTokens
  • Контракт испускаетTokenLocked
  • Бэкэнд слушает и запускает мяту на многоугольниках

3⃣ polygonbridge.sol - Контракт на Mint на многоугольниках

Только доверенный релератор (администратор) может мятный жетоны.

📄 Контракты/Polygonbridge.sol


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

import "./Token.sol";

contract PolygonBridge {
    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);
    }
}

🧠 Как это работает:

  • Бэкэнд (доверенный реле) слушает события BSC
  • ВызовыmintTokensНа многоугольниках амоя через частный ключ
  • Токены фигурировали для пользователя

4⃣ развертывание сценариев

Подождите, не забудьте установить зависимость для контрактов:

npm install @openzeppelin/contracts

👉createscripts/deployBSC.js:

const hre = require("hardhat");

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

    // Deploy Token
    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 deployed to:", 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 to:", bridgeAddress);
}

main().catch((error) => {
    console.error(error);
    process.exitCode = 1;
});

👉createscripts/deployPolygon.js:

const hre = require("hardhat");

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

    // Fetch native token balance (POL)
    const balanceBigInt = await hre.ethers.provider.getBalance(deployer.address);
    const balance = hre.ethers.formatEther(balanceBigInt);
    console.log(`Account balance: ${balance} POL`);

    if (parseFloat(balance) < 0.01) { // Ensure at least 0.01 POL is available
        console.error("⚠️ Warning: Your deployer account has insufficient POL balance. You need funds to deploy.");
        process.exit(1);
    }

    // Explicit Gas Configuration
    const gasLimit = 5_000_000;
    const gasPrice = hre.ethers.parseUnits("25", "gwei"); // Ensure minimum gas price is met

    // Deploy BridgeToken
    const BridgeToken = await hre.ethers.getContractFactory("BridgeToken");
    console.log("Deploying BridgeToken...");
    const token = await BridgeToken.deploy(deployer.address, { gasLimit, gasPrice });
    await token.deploymentTransaction().wait(1); // Wait for confirmations
    const tokenAddress = await token.getAddress();
    console.log("✅ BridgeToken deployed to:", tokenAddress);

    // Deploy PolygonBridge
    const PolygonBridge = await hre.ethers.getContractFactory("PolygonBridge");
    console.log("Deploying PolygonBridge...");
    const bridge = await PolygonBridge.deploy(tokenAddress, { gasLimit, gasPrice });
    await bridge.deploymentTransaction().wait(1); // Wait for confirmations
    const bridgeAddress = await bridge.getAddress();
    console.log("✅ PolygonBridge deployed to:", bridgeAddress);
}

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

5⃣ развернуть контракты

На этот раз мы развертываем наши контракты на блокчейн. Перед этим убедитесь, что у вас есть токены Testnet для тестов BSC и Polygon в вашем кошельке Metamask. Они могут быть получены из бесплатных сайтов крана, таких какПолучить, иBnb FaucetПолем

Во -первых, давайте попробуем развернуть контракт на тест BSC; команда запускаnpx hardhat compilesдля компиляции, а затем запустить следующую команду на терминале:

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

Как только вы развернете контракт на Testnet, вы увидите следующий вывод в терминале:

Figure 2.BSC Bridge Deploy

Во -вторых, контракт был развернут в Testnet Polygon. Запустите следующую команду на терминале:

npx hardhat run scripts/deployPolygon.js --network polygonAmoy

Вывод терминала должен быть похожим, если все правильно.


Примечание. Пожалуйста, оставьте как адреса контракта от BSC, так и полигона для обновления.envфайлы для следующего шага. Токены, развернутые здесь, являются BRG, и их можно отслеживать на BSC Testnet и Polygon Amoy Testnet Explorers.


⚙backend Слушатель - ретранслятор Token Bridge

АРеферальная службаслушает события изBSC Bridgeи вызывает функцию minttokens ()Многоугольный мостПолем

📁 Обновление структуры каталогов

Создатьbackend/каталог в вашей корневой папке:

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

🔐 .ENV (уровень корня)

Теперь мы обновляемся со следующими деталями.envфайл.

BSC_BRIDGE="0x...your deployed BSCBridge address"
POLYGON_RPC_URL="0x...your deployed PolygonBridge address"
POLYGON_TOKEN="0x...your POLYGON token address"

🧠 Вы должны заменить вышеуказанные значенияРеальные развернутые адресаПолем


📄backend/index.js- основная логика ретрансляции

require("dotenv").config();
const { ethers } = require("ethers");

// Load env vars
const {
  MNEMONIC,
  BSC_RPC_URL,
  POLYGON_RPC_URL,
  BSC_BRIDGE,
  POLYGON_BRIDGE,
} = process.env;

// ABIs
const BSC_BRIDGE_ABI = [
  "event TokenLocked(address indexed user, uint256 amount, string targetChainAddress)"
];
const POLYGON_BRIDGE_ABI = [
  "function mintTokens(address to, uint256 amount) external"
];

// Setup Providers
const bscProvider = new ethers.JsonRpcProvider(BSC_RPC_URL);
const polygonProvider = new ethers.JsonRpcProvider(POLYGON_RPC_URL);

// Setup Wallets (derived from same mnemonic)
const walletMnemonic = ethers.Wallet.fromPhrase(MNEMONIC);
const polygonSigner = walletMnemonic.connect(polygonProvider);

// Setup Contracts
const bscBridge = new ethers.Contract(BSC_BRIDGE, BSC_BRIDGE_ABI, bscProvider);
const polygonBridge = new ethers.Contract(POLYGON_BRIDGE, POLYGON_BRIDGE_ABI, polygonSigner);

// Deduplication protection
const processedTxs = new Set();

const startRelayer = async () => {
  console.log("🚀 Relayer started. Listening for BSC lock events...");

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

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

    try {
      console.log(`🔒 ${user} locked ${ethers.formatEther(amount)} BRG → ${targetAddress}`);
      
      const tx = await polygonBridge.mintTokens(targetAddress, amount);
      await tx.wait();

      console.log(`✅ Minted ${ethers.formatEther(amount)} BRG on Polygon for ${targetAddress}`);
    } catch (err) {
      console.error("❌ Minting failed:", err);
    }
  });
};

startRelayer();

Начните реле

Отbackend/каталог:

node index.js

Если все установлено правильно, вы должны увидеть:

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

Теперь ваш релератор слушает 24/7 к BSC Testnet и запускает маттин на многоугольниках, когда происходит блокировка.


🌐 Теперь мы сосредоточены на создании DAPP Frontend Bridge с React + Metamask + Ethers.js

📁 Обновление каталога проектов

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

Создать другой.envк/frontend/.env :

VITE_BSC_BRIDGE=0xYourBSCBridge
VITE_BSC_TOKEN=0xYourBSCToken

VITE_POLYGON_BRIDGE=0xYourPolygonBridge
VITE_POLYGON_TOKEN=0xYourPolygonToken

Примечание:Вы бы уже создали тестовый токен тестовой сети Polygon, просто включающий адрес контракта в.envфайл. Токен на основе теста BSC может быть легко создан изздесьБез каких -либо трудностей, если вы хотите дальнейших тестирований.Следовательно, создание токенов в блокчейне простое и не требует дополнительного опыта, кодирующего стресс.


1⃣frontend/src/bridge.js- Логика контракта

// src/bridge.js

export const BSC_BRIDGE_ADDRESS = import.meta.env.VITE_BSC_BRIDGE;
export const BSC_TOKEN_ADDRESS = import.meta.env.VITE_BSC_TOKEN;

export const BSC_BRIDGE_ABI = [
  {
    "inputs": [
      { "internalType": "uint256", "name": "amount", "type": "uint256" },
      { "internalType": "string", "name": "targetChainAddress", "type": "string" }
    ],
    "name": "lockTokens",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  }
];

export const ERC20_ABI = [
  "function approve(address spender, uint256 amount) public returns (bool)",
  "function balanceOf(address account) public view returns (uint256)",
  "function decimals() view returns (uint8)"
];

2⃣frontend/src/App.jsx- React UI

import React, { useEffect, useState } from "react";
import Web3 from "web3";
import detectEthereumProvider from "@metamask/detect-provider";
import {
    BSC_BRIDGE_ABI,
    TOKEN_ABI,
    BSC_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(""); // Polygon address input
    const [status, setStatus] = useState("");

    // 🔗 Connect MetaMask Wallet
    const connectWallet = async () => {
        const provider = await detectEthereumProvider();

        if (provider) {
            try {
                await provider.request({ method: "eth_requestAccounts" });
                const web3Instance = new Web3(provider);
                setWeb3(web3Instance);

                const accounts = await web3Instance.eth.getAccounts();
                setAccount(accounts[0]);

                const networkId = await web3Instance.eth.net.getId();
                console.log("Connected to network ID:", networkId);

                if (networkId !== 97) {
                    setStatus("❌ Please switch to BSC Testnet in MetaMask.");
                } else {
                    setStatus("✅ Connected to BSC Testnet.");
                }
            } catch (err) {
                console.error("MetaMask connection failed:", err);
                setStatus("❌ Failed to connect MetaMask.");
            }
        } else {
            setStatus("❌ MetaMask not detected.");
        }
    };

    // 💰 Load user's BRG token balance
    const loadBalance = async () => {
        if (web3 && account) {
            try {
                const token = new web3.eth.Contract(TOKEN_ABI, TOKEN_ADDRESS);
                const rawBalance = await token.methods.balanceOf(account).call();
                const formatted = web3.utils.fromWei(rawBalance, "ether");
                setTokenBalance(formatted);
            } catch (err) {
                console.error("Balance fetch error:", err);
                setStatus("❌ Failed to fetch BRG balance.");
            }
        }
    };

    // 🔐 Bridge Handler: Approve & Lock tokens
    const handleBridge = async () => {
        if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
            setStatus("❗ Please enter a valid amount.");
            return;
        }

        if (!web3.utils.isAddress(targetAddress)) {
            setStatus("❗ Enter a valid Polygon address.");
            return;
        }

        try {
            const weiAmount = web3.utils.toWei(amount, "ether");
            const token = new web3.eth.Contract(TOKEN_ABI, TOKEN_ADDRESS);
            const bridge = new web3.eth.Contract(BSC_BRIDGE_ABI, BSC_BRIDGE_ADDRESS);

            // Approve Bridge contract
            setStatus("🔃 Approving tokens...");
            await token.methods.approve(BSC_BRIDGE_ADDRESS, weiAmount).send({ from: account });

            // Lock tokens on BSC
            setStatus("🔐 Locking tokens...");
            await bridge.methods.lockTokens(weiAmount, targetAddress).send({ from: account });

            setStatus("✅ Tokens locked. Wait for minting on Polygon.");
            setAmount("");
            loadBalance();
        } catch (err) {
            console.error("Bridge error:", err);
            setStatus("❌ Transaction failed: " + (err.message || "Unknown error"));
        }
    };

    // 🔁 Effects: Connect wallet + load balance
    useEffect(() => {
        connectWallet();
    }, []);

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

    return (
        <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center px-4">
            <div className="bg-gray-800 max-w-md w-full p-6 rounded-2xl shadow-2xl">
                <h1 className="text-2xl font-bold text-center mb-4">🌉 BSC ➡ Polygon Bridge</h1>
                <p className="text-sm text-center text-gray-300 mb-4">
                    Bridge your <strong>BRG</strong> tokens from <span className="text-yellow-400">BSC Testnet</span> to <span className="text-green-400">Polygon Amoy</span> using the GetBlock RPC.
                </p>

                <div className="text-center text-green-300 mb-4">
                    💰 BRG Balance: {tokenBalance}
                </div>

                <input
                    type="number"
                    className="w-full p-3 mb-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none"
                    placeholder="Enter amount to bridge"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                />

                <input
                    type="text"
                    className="w-full p-3 mb-4 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none"
                    placeholder="Polygon wallet address"
                    value={targetAddress}
                    onChange={(e) => setTargetAddress(e.target.value)}
                />

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

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

export default App;

3⃣ CREATE/CHECK INDEX.HTML В каталоге Frontend.

Убедитесь, что ваш index.html выглядит так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BSC → Polygon Bridge</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

4⃣ CREATE MAIN.JSX (или MAIN.JS), если использование React в каталоге Frontend/SRC:

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>
);

Затем редактируйте редактированиеtailwind.config.jsВ каталоге фронта:

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

5⃣install зависимости

Установите React, Reactdom и @Metamask/Detect-Provider в каталоге Frontend, выполнив следующие команды в терминале:

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

После этого запустите Dev Server:

npm run dev

Вы увидите, что ваш сервер начинается сhttp: // localhost: 5173/Полем Как только вы посетите URL, DAPP автоматически просит вас подключить кошелек Metamask, запустив всплывающее окно.

Figure 3. The dApp asking user to connect MetaMask wallet.

Как только вы подключите кошелек, вы увидите фронт DAPP следующим образом:

Figure 4. dApp is calling MetaMask to confirm transaction.

Как только ваши транзакции будут подтверждены, вы увидите уведомление от Metmask следующим образом:

Figure 5.Exhibiting the confirmation of the transactions.

🧪final Testing, Руководство по развертыванию и усовершенствованные усовершенствования

✅ Стоинный поток токенового моста

Шаг

Действие

Цепь

Актер

1

Пользователь подключает Metamask

Бакалавра

дап

2

Одобряет токены + замки

Бакалавра

DAPP (пользовательские знаки)

3

Токеновый излучен

Бакалавра

Умный контракт

4

Релератор улавливает мероприятие

Node.js

Бэкэнд

5

Жетоны ретрансляции

Многоугольник

Вызывает умный контракт

6

Пользователь видит токены

Многоугольник

На цепочке

Во время теста обязательно посмотрите на следующий контрольный список.

✅manual тестового контрольного списка

Preparation:

  • Развернуть как токены, так и мостовые контракты, как обсуждалось выше.
  • Фонрируйте свой кошелек на:
    • BSC Testnet Faucet
    • Полигонный кран тестовой сети
  • Настройка .env как в корне, так и в/frontend

✅ Шаги тестирования:

#

Тест

Чего ожидать

1

Запустить DAPP

Metamask подключается

2

Одобрить и заблокировать 0,1 Brg (это наш тестовый токен)

TX завершается, зарегистрировано событие

3

Бэкэнд печатных журналов

Тонковое событие

4

Токены фигурированы на многоугольниках

Тенученное событие

5

Проверьте баланс токена многоугольника

Соответствует мостовой сумме


✅ Вы можете проверить баланс многоугольников, используя пользовательский проводник блоков, введя свой адрес.


🧠 3. Усовершенствованные функции и улучшения безопасности

Что ж, демонстрация до сих пор в этом уроке состояла в том, чтобы с безопасным тестированием DAPP в среде Testnet в блокчейне. Если вы серьезны и хотите пойти дальше, вот несколько советов для вас.

1⃣ Защита от Nonce & Replay

ДобавитьКартирование обработанных хэшей TXВ бэкэнде, чтобы предотвратить переработку того же события:

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

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

2⃣ индексация событий с GraphQL (необязательно)

Вы можете использоватьГрафик(Когда необходима индексация BSC) или интегрируйте веб -крючки GetBlock для эффективного улавливания событий вместо опроса.

3⃣ Проверка подписи для майтинга (в стиле Zkbridge)

Во время производства полигонбридж долженне доверяйте реле вслепуюПолем Вместо:

  • Замок излучает хэш сообщения
  • Пользователь подписывает это сообщение вне цепи
  • Отправить подпись на мяту (необязательный слой)

4⃣ Поддерживать несколько цепей

Вы можете сделать этот мостмногочастотас использованием

  • Идентификаторы цепи для отслеживания источника моста/назначения
  • Добавление нескольких контрактов с токенами
  • Абстрагирование реле, чтобы справиться с множеством цепей (многоугольник, Eth Sepolia и т. Д.)

🚀 Развертывание на производство (необязательно)

Если вы можете проверить DAPP в TestNet, вам не сложно перейти на основе MainNet DAPP, который вы можете развернуть для производства. Вот несколько классных вариантов развертывания для вас.

Компонент

Вариант развертывания

Frontend UI

Страницы Vercel / NetLify / CloudFlare

Бэкэнд

Железная дорога / рендерин / VPS

Умные контракты

Развернуто уже через Hardhat на GetBlock RPC

RPC шлюзы

Получить приборную панель


Действия GitHubиспользуются для автоматического запуска развертывания из Commits.


📥conclusion: Сводка завершенного мостового DAPP с использованием APIS

GetBlocks предлагает проверенные в битве API-интерфейсы блокчейна. Мы также попытались доказать это в некоторой степени в этом уроке. Чтобы создать новые приложения Web3, которые являются масштабируемыми и удобными для пользователя, необходимо преодолеть ограничения общественной инфраструктуры. Слой API блочной цепи не является сантехникой; Это спинной мозг DAPP. Важно понимать инженерные сложности, которые стоят за быстрыми и надежными API, включая оптимизацию узлов и распределение по всему миру, интеллектуальное балансирование нагрузки и постоянное кэширование. Вернуть их в поставщика, такого как Getblock, который сделал инвестиции на всех этих уровнях инфраструктуры и предоставляет выделенные узлы, многоцелевую поддержку и надежность, ожидаемая от многонациональных предприятий, больше не является роскошью, а стратегическим движением со стороны DAPPS, серьезно относится к производительности, масштабируемости и удержанию клиентов. Обращая соответствующее внимание на эти слои, разработчики смогут обеспечить, чтобы инновационные приложения были разработаны на пуленепробиваемой инфраструктуре, которая будет отвечать потребностям второго всплеска принятия Web3. Его будущее быстрое, последовательное и установлено на элегантной инфраструктуре, и важно выбрать его партнера по API. Мы считаем, что вы успешно выполнили следующий контрольный список:

ERC-20 токенразвернуто на BSC + Ploygon
Мостовые контрактыДля блокировки и майтинга
Node.js Backend Relayerдля устранения активов
React Frontend Dappс интеграцией кошелька
GetBlock RPC конечные точкиИспользуется для беспроблемного соединения общедоступной тестовой сети
Готовая к производству архитектурас путями обновления для безопасности и масштабирования

Если у вас есть какие -либо вопросы при тестировании этого DAPP, прокомментируйте ниже. Спасибо 🙏!


Оригинал
PREVIOUS ARTICLE
NEXT ARTICLE