如何将useDApp连接到Rootstock网络？

Question

我正在创建一个React.js DApp，它将与砧木(RSK)部署的智能契约交互。最近，我遇到了一个名为useDApp的React库。这个库通过使用React和上下文提供程序来自动化块链连接、智能契约交互和发送事务。例如，​：

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

然而，我看不到支持网络中的​。​

我尝试创建一个在文档中描述：​的Rootstock配置

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

不幸的是，添加上述内容似乎是不够的，我无法连接到RSK或RSK。

配置 useDApp是否有可能连接到Rootstock？

Answer 1

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

(1)为两个网络(Rootstock Testnet、Rootstock Mainnet)创建配置对象。

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

它们应该是这样的：

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)现在您可以使用您的反应性组件中的区块链数据了：

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();
  ...
}

Answer 2

布奎兹的回答对于您提出的问题是完美的，但是如果您没有被锁定在使用useDApp中，我是否可以建议一种更容易实现的替代方案？

我们为将用户的钱包连接到开发人员的dapp的用例构建了rLogin。还有一些额外的集成，比如walletConnect、硬件钱包等等。

对于RSK和RSK，我们已经有了RPC，所以您不必对它们进行配置。rLogin还支持任何EVM网络，因此您可以在etc、Binance等上使用它。

下面是您如何设置它：

yarn add @rsksmart/rlogin

然后，在一个基本的React应用程序中，它可能如下所示：

import RLogin from '@rsksmart/rlogin'

const rLogin = new RLogin({
   supportedChains: [30, 31]
})

function App() {
  const [provider, setProvider] = useState(null)
  const connect = () => {
    console.log('connecting...')
    rLogin.connect().then(response => {
        setProvider(response.provider)
    })
  }

  return (
    <div className="App">
      <h1>rLogin demo...</h1>
      <button onClick={connect}>Connect!</button>
    </div>
  );
}

初始的rLogin变量需要在组件之外，因此它只能呈现/创建一次。还有一些附加的参数可以发送给自述的rLogin构造函数。还有查看实现的示例应用程序。