How to connect useDApp to Rootstock networks?

Question

I am creating a React.js DApp which will interact with Rootstock (RSK) deployed smart contracts. Recently I came across a React library called useDApp. This library automates the blockchain connection, smart contract interaction and sending transactions by using React hooks and context providers. ​ For example:

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

​ However, I don't see Rootstock among the supported networks. ​

I have tried to create a Rootstock configuration as described in the docs: ​

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

​ Unfortunately, adding the above appears to be insufficient, and I was unable to connect to either RSK Mainnet nor RSK Testnet.

Is it possible to configure useDApp to connect to Rootstock?

Answer 1

Yes connecting useDApp to Rootstock is possible.

(1) Create config objects for both networks (Rootstock Testnet, Rootstock Mainnet).

(2) Specify Multicall smart contract addresses, within these config objects.

They should look like this:

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) Create useDApp configuration using these network configs:

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

(4) Connect the useDApp configuration to DAppProvider (e.g. in index.js)

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

(5) Now you are ready to go with the blockchain data in your React components:

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's answer is perfect for the question that you asked but if you are not locked into using useDApp, can I suggest an alternative that maybe a bit easier to implement?

We built rLogin for the use case of connecting the user's wallet to a developer's dapp. There are a bunch of additional integrations like walletConnect, hardware wallets, etc.

For RSK Testnet and RSK Mainnet we have the RPC URLs already in it so you don't have to configure them. rLogin also supports any EVM network so you can use it on Ethereum, Binance, etc.

Here is how you would set it up:

yarn add @rsksmart/rlogin

then in a basic React app, it might look like this:

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

The initial rLogin variable needs to be outside the component so it only gets rendered/created once. There are a bunch of additional parameters you can send to the rLogin constructor as well mentioned in the readme. There are also sample applications to see the implementation.