如何将 useDApp 连接到 Rootstock 网络？

Question

我正在创建一个 React.js DApp，它将与Rootstock (RSK)部署的智能合约进行交互。\n最近我遇到了一个名为的 React 库useDApp的 React 库。该库使用 React 挂钩和上下文提供程序自动执行区块链连接、智能合约交互和发送交易。\n\xe2\x80\x8b\n例如：

\n

const { activateBrowserWallet, account } = useEthers();\nconst etherBalance = useEtherBalance(account);\n

\n

\xe2\x80\x8b\n但是，我在支持的网络中没有看到 Rootstock。\n\xe2\x80\x8b

\n

我尝试按照文档中的描述创建 Rootstock 配置创建 Rootstock 配置：\n\xe2\x80\x8b

\n

const config = {\n  readOnlyChainId: 30,\n  readOnlyUrls: {\n    31: \'https://public-node.testnet.rsk.co\',\n    30: \'https://public-node.rsk.co\',\n  },\n};\n

\n

\xe2\x80\x8b\n不幸的是，添加上述内容似乎还不够，\n我无法连接到 RSK 主网或 RSK 测试网。

\n

是否可以配置useDApp 连接到 Rootstock？

\n

Answer 1

是的，可以将 useDApp 连接到 Rootstock。

(1) 为两个网络（Rootstock 测试网、Rootstock 主网）创建配置对象。

(2) 在这些配置对象中指定Multicall 智能合约地址。

它们应该看起来像这样：

const rootstockTestnetExplorerUrl = 'https://explorer.testnet.rsk.co/';

export const RootstockTestnet = {
  chainId: 31,
  chainName: 'Rootstock Testnet',
  isTestChain: true,
  isLocalChain: false,
  rpcUrl: 'https://public-node.testnet.rsk.co',
  // deployed at https://explorer.testnet.rsk.co/address/0xca11bde05977b3631167028862be2a173976ca11
  multicallAddress: '0xcA11bde05977b3631167028862bE2a173976CA11',
  nativeCurrency: {
    name: 'Test Rootstock Bitcoin',
    symbol: 'tRBTC',
    decimals: 18,
  },
  getExplorerAddressLink: getAddressLink(rootstockTestnetExplorerUrl),
  getExplorerTransactionLink: getTransactionLink(rootstockTestnetExplorerUrl),
};

const rootstockMainnetExplorerUrl = 'https://explorer.rsk.co/';

export const RootstockMainnet = {
  chainId: 30,
  chainName: 'Rootstock Mainnet',
  isTestChain: false,
  isLocalChain: false,
  rpcUrl: 'https://public-node.rsk.co',
  // deployed at https://explorer.rsk.co/address/0xca11bde05977b3631167028862be2a173976ca11
  multicallAddress: '0xcA11bde05977b3631167028862bE2a173976CA11',
  nativeCurrency: {
    name: 'Rootstock Bitcoin',
    symbol: 'RBTC',
    decimals: 18,
  },
  getExplorerAddressLink: getAddressLink(rootstockMainnetExplorerUrl),
  getExplorerTransactionLink: getTransactionLink(rootstockMainnetExplorerUrl),
};

(3) 使用这些网络配置创建 useDApp 配置：

const useDAppConfig = {
  networks: [RootstockTestnet, RootstockMainnet],
  readOnlyChainId: RootstockMainnet.chainId,
  readOnlyUrls: {
    [RootstockTestnet.chainId]: RootstockTestnet.rpcUrl,
    [RootstockMainnet.chainId]: RootstockMainnet.rpcUrl,
  },
};

(4) 将 useDApp 配置连接到DAppProvider（例如在index.js）

import { DAppProvider } from '@usedapp/core';
...
root.render(
    <DAppProvider config={useDAppConfig}>
      <App />
    </DAppProvider>,
);

(5) 现在您已准备好在 React 组件中使用区块链数据：

import {
  useEthers,
  useEtherBalance,
  useTokenBalance,
  useSendTransaction,
} from '@usedapp/core';

function App() {
  const { activateBrowserWallet, account } = useEthers();
  const etherBalance = useEtherBalance(account);
  const tokenBalance = useTokenBalance(
    tokenAddress,
    account,
  );
  const { sendTransaction } = useSendTransaction();
  ...
}