Web3 react helpers

Web3 react helpers for Lido Finance projects.

Provider

To use hooks from @oone-lido-sdk/web3-react you need to wrap your app with ProviderWeb3. ProviderWeb3 also contains ProviderSDK from @oone-lido-sdk/react. No need to wrap again.

import { CHAINS } from '@oone-lido-sdk/constants';
import { ProviderWeb3 } from '@oone-lido-sdk/web3-react';

const rpc = {
  [CHAINS.Mainnet]: '/rpc/mainnet',
  [CHAINS.Rinkeby]: '/rpc/rinkeby',
};

const supportedChainIds = [CHAINS.Mainnet, CHAINS.Rinkeby];

const Provider = () => {
  return (
    <ProviderWeb3
      defaultChainId={CHAINS.Mainnet}
      supportedChainIds={supportedChainIds}
      rpc={rpc}
    >
      {children}
    </ProviderWeb3>
  );
};

Auto connect

The ProviderWeb3 contains logic to automatically activate one of the connectors when the application is initialized. It checks the conditions and tries to connect in the following order:

1. To Ledger Live Dapp Browser with LedgerHQFrameConnector.
2. To Gnosis Safe with SafeAppConnector.
3. To Dapp browser provider with InjectedConnector.
4. To a connector saved in Local Storage.

Connector hooks

Hooks for manually connecting to the user's wallet:

• useConnectorCoinbase
• useConnectorImToken
• useConnectorMetamask
• useConnectorTrust
• useConnectorWalletConnect

They return an object with a connect handler if connecting is possible. In MetaMask, Trust and ImToken hooks the connect method contains the Deep Linking logic.

import {
  useConnectorMetamask,
  useConnectorCoinbase,
} from '@oone-lido-sdk/web3-react';

const Component = () => {
  const metamask = useConnectorMetamask();
  const coinbase = useConnectorCoinbase();

  return (
    <div>
      <button onClick={metamask.connect}>Connect to Metamask</button>;
      <button onClick={coinbase.connect}>Connect to Coinbase</button>;
    </div>
  );
};

useDisconnect

Return an object with a disconnect handler if disconnection is possible.

import { useDisconnect } from '@oone-lido-sdk/web3-react';

const Component = () => {
  const { disconnect } = useDisconnect();

  return (
    <button onClick={disconnect} disabled={!disconnect}>
      Disconnect
    </button>
  );
};

useSupportedChains

import { useSupportedChains } from '@oone-lido-sdk/web3-react';

const Component = () => {
  const { isUnsupported, supportedChains } = useSupportedChains();

  if (isUnsupported) {
    return (
      <div>
        Chain is not supported. Supported chains:{' '}
        {supportedChains.map(({ name }) => name)}
      </div>
    );
  }

  // ...
};