@lido-sdk/web3-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.19.0 • Public • Published

    Web3 react helpers

    Web3 react helpers for Lido Finance projects. Part of Lido JS SDK

    Install

    yarn add @lido-sdk/web3-react

    Provider

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

    import { CHAINS } from '@lido-sdk/constants';
    import { ProviderWeb3 } from '@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>
      );
    };

    Connectors

    The ProviderWeb3 creates several connectors and stores them in context. To access them directly use useConnectors hook.

    Used connectors:

    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 '@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 '@lido-sdk/web3-react';
    
    const Component = () => {
      const { disconnect } = useDisconnect();
    
      return (
        <button onClick={disconnect} disabled={!disconnect}>
          Disconnect
        </button>
      );
    };

    useSupportedChains

    import { useSupportedChains } from '@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>
        );
      }
    
      // ...
    };

    Install

    npm i @lido-sdk/web3-react

    DownloadsWeekly Downloads

    93

    Version

    1.19.0

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    123

    Last publish

    Collaborators

    • zmoki
    • skozin
    • kolyasapphire
    • azat-s
    • george-avs