如何将useDApp连接到Rootstock网络?

Question

我正在创建一个React.js DApp，它将与Rootstock (RSK)部署的智能合约进行交互。最近我遇到了一个叫做useDApp的React库。该库通过使用React钩子和上下文提供程序自动化区块链连接、智能合约交互和发送事务。​例如:

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

然而，我没有在支持的网络中看到Rootstock。

我已经尝试按照文档中的描述创建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)现在你已经准备好在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();
...
}

Answer 2

bguiz的答案是完美的问题，你问，但如果你不是锁定使用useDApp，我可以建议一个替代方案，也许更容易实现?

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

对于RSK测试网和RSK主网，我们已经在其中有RPC url，所以您不必配置它们。rLogin还支持任何EVM网络，因此您可以在以太坊，币安等上使用它。

你可以这样设置它:

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构造函数，这些参数在自述文件中也有提到。还有一些示例应用程序可以查看其实现。