@lido-sdk/react

⚠️DEPRECATION WARNING⚠️

This project is being slowly deprecated and may not receive further updates. Check out modern Lido SDK to access latest functionality. It is actively maintained and is built for interacting with Lido Protocol.

React helpers

React helpers for Lido Finance projects. Part of Lido JS SDK

• Install
• Factories
  • Contracts factory
  • ERC20 hooks factory
• ERC20 hooks
  • ProviderSDK
  • useTotalSupply
  • useTokenBalance
  • useAllowance
  • useApprove
  • useDecimals
• SWR hooks
  • useLidoSWR
  • useLidoSWRImmutable
  • useContractSWR
  • useContractEstimateGasSWR
  • useEthereumSWR
  • useEthereumBalance
  • useFeeHistory
  • useFeeAnalytics
• Price hooks
  • useEthPrice
  • useTxPrice
• Other hooks
  • useTokenToWallet
  • useLocalStorage
  • useDebounceCallback

Install

yarn add @lido-sdk/react

Factories

Contracts factory

Source

contractHooksFactory creates set of hooks, which return RPC and Web3 contracts.

// use typechain package to generate factories for your contracts
import { YOUR_ABI_FACTORY } from 'your/abi/folder';
import { contractHooksFactory } from '@lido-sdk/react';
import { CHAINS, TOKENS } from '@lido-sdk/constants';

const getMyContractAddress = (chainId) => {
  // should return contract address
};

const { useContractRPC, useContractWeb3 } = contractHooksFactory(
  YOUR_ABI_FACTORY,
  getMyContractAddress,
);

Package @lido-sdk/react exports hooks for WSTETH, STETH, LDO and WithdrawalQueue contracts:

useWSTETHContractRPC();
useWSTETHContractWeb3();

useSTETHContractRPC();
useSTETHContractWeb3();

useLDOContractRPC();
useLDOContractWeb3();

useWithdrawalQueueContractRPC();
useWithdrawalQueueContractWeb3();

ERC20 hooks factory

Source

hooksFactory binds a token address to the ERC20 hooks and returns an object of them. The factory function takes a callback, that uses to get a token address by chain id.

import { hooksFactory } from '@lido-sdk/react';

const getMyContractAddress = (chainId) => {
  // should return contract address
};

const {
  useTokenBalance,
  useTotalSupply,
  useDecimals,
  useAllowance,
  useApprove,
} = hooksFactory(getMyContractAddress);

Hooks for tokens WSTETH, STETH and LDO with attached addresses:

useWSTETHBalance()
useWSTETHTotalSupply()
useWSTETHDecimals()
useWSTETHAllowance(spender: string)
useWSTETHApprove(amount: BigNumber, spender: string, wrapper: UseApproveWrapper)

useSTETHBalance()
useSTETHTotalSupply()
useSTETHDecimals()
useSTETHAllowance(spender: string)
useSTETHApprove(amount: BigNumber, spender: string, wrapper: UseApproveWrapper)

useLDOBalance()
useLDOTotalSupply()
useLDODecimals()
useLDOAllowance(spender: string)
useLDOApprove(amount: BigNumber, spender: string, wrapper: UseApproveWrapper)

ERC20 hooks

ProviderSDK

To use ERC20 hooks, your app must be wrapped with <ProviderSDK />.

import { ProviderSDK } from '@lido-sdk/react';
import { CHAINS } from '@lido-sdk/constants';

const supportedChainIds = [CHAINS.Mainnet, CHAINS.Goerli];
const defaultChainId = CHAINS.Mainnet;

const providerRpc = getRpcProvider(
  CHAINS.Goerli,
  `/api/rpc?chainId=${CHAINS.Goerli}`,
);
const providerMainnetRpc = getRpcProvider(
  CHAINS.Mainnet,
  `/api/rpc?chainId=${CHAINS.Mainnet}`,
);

const App = ({ children }) => {
  const { chainId, providerWeb3 } = FromYourLibrary; // web3-react for example

  return (
    <ProviderSDK
      chainId={chainId || defaultChainId}
      supportedChainIds={supportedChainIds}
      providerRpc={providerRpc}
      providerMainnetRpc={providerMainnetRpc}
      providerWeb3={providerWeb3}
    >
      {children}
    </ProviderSDK>
  );
};

Hooks

All request hooks accept SWR config as optional last argument.

useTotalSupply

import { useTotalSupply } from '@lido-sdk/react';

const Component = () => {
  const token = 'token address';
  const { data, loading } = useTotalSupply(token, { isPaused: !token });
  const totalSupply = data?.toString();

  return <div>{loading ? 'loading...' : totalSupply}</div>;
};

useTokenBalance

import { useTokenBalance } from '@lido-sdk/react';

const Component = () => {
  const token = 'token address';
  const account = 'account address';
  const { data, loading } = useTokenBalance(token, account);
  const balance = data?.toString();

  return <div>{loading ? 'loading...' : balance}</div>;
};

useAllowance

import { useAllowance } from '@lido-sdk/react';

const Component = () => {
  const token = 'token address';
  const spender = 'spender address';
  const { data, loading } = useAllowance(token, spender);
  const balance = data?.toString();

  return <div>{loading ? 'loading...' : balance}</div>;
};

useApprove

import { useApprove } from '@lido-sdk/react';
import { BigNumber } from '@ethersproject/bignumber';

const Component = () => {
  const amount = BigNumber.from(10);
  const token = 'token address';
  const spender = 'spender address';
  const { approve } = useApprove(amount, token, spender);

  return <button onClick={approve}>Approve</button>;
};

useDecimals

import { useDecimals } from '@lido-sdk/react';

const Component = () => {
  const token = 'token address';
  const { data, loading } = useDecimals(token);

  return <div>{loading ? 'loading...' : data}</div>;
};

SWR hooks

useLidoSWR

useLidoSWR hook is a wrapped useSWR. The hook additionally returns:

• update function, which implements mutate(undefined, true)
• loading and initialLoading flags

import { useLidoSWR } from '@lido-sdk/react';

const Component = () => {
  const { data, loading } = useLidoSWR('/data', fetcher);

  return <div>{loading ? 'loading...' : data}</div>;
};

useLidoSWRImmutable

Immutable version of useLidoSWR. It has the same API interface as the normal hook.

useLidoSWRImmutable('/data', fetcher);

// equal to
useLidoSWR('/data', fetcher, {
  dedupingInterval: 86_400_000,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
});

useContractSWR

useLidoSWR for contracts

import { useContractSWR } from '@lido-sdk/react';
import { CHAINS, TOKENS } from '@lido-sdk/constants';

const Component = () => {
  const accountAddress = 'your address';
  const tokenAddress = getTokenAddress(CHAINS.Mainnet, TOKENS.STETH);
  const contractRpc = getERC20Contract(tokenAddress, providerRpc);

  const { data, loading } = useContractSWR({
    contract: contractRpc,
    method: 'balanceOf',
    params: [accountAddress],
  });

  const balance = data?.toString();

  return <div>{loading ? 'loading...' : balance}</div>;
};

useContractEstimateGasSWR

useLidoSWR over contract.estimateGas[method]

import { useContractEstimateGasSWR } from '@lido-sdk/react';
import { CHAINS, TOKENS } from '@lido-sdk/constants';

const Component = () => {
  const { data, loading } = useContractEstimateGasSWR({
    contract: myContractInstance,
    method: 'myMethod',
    params: ['argument'],
  });

  const gas = data?.toString();

  return <div>{loading ? 'loading...' : gas}</div>;
};

useEthereumSWR

useLidoSWR for RPC provider

import { useEthereumSWR } from '@lido-sdk/react';

const Component = () => {
  const { data, loading } = useEthereumSWR({ method: 'getGasPrice' });
  const gasPrice = data?.toString();

  return <div>{loading ? 'loading...' : gasPrice}</div>;
};

useEthereumBalance

import { useEthereumBalance } from '@lido-sdk/react';

const Component = () => {
  const { data, loading } = useEthereumBalance();
  const balance = data?.toString();

  return <div>{loading ? 'loading...' : balance}</div>;
};

useFeeHistory

import { useFeeHistory } from '@lido-sdk/react';

const Component = () => {
  const { data, loading } = useFeeHistory({ blocks: 1024 });
  const { oldestBlock, baseFeePerGas, gasUsedRatio } = data;

  return <div>{loading ? 'loading...' : oldestBlock}</div>;
};

useFeeAnalytics

import { useFeeAnalytics } from '@lido-sdk/react';

const Component = () => {
  const { percentile, loading } = useFeeAnalytics({ blocks: 1024 });

  return <div>{loading ? 'loading...' : percentile}</div>;
};

Price hooks

useEthPrice

import { useEthPrice } from '@lido-sdk/react';

const Component = () => {
  const { data, loading } = useEthPrice();
  const ethPrice = data?.toString();

  return <div>{loading ? 'loading...' : ethPrice}</div>;
};

useTxPrice

import { useTxPrice } from '@lido-sdk/react';

const Component = () => {
  const gasLimit = 10_000;
  const { data, loading } = useTxPrice(gasLimit);
  const txPrice = data?.toString();

  return <div>{loading ? 'loading...' : txPrice}</div>;
};

Other hooks

useTokenToWallet

import { useTokenToWallet } from '@lido-sdk/react';

const Component = () => {
  const token = 'token address';
  const { addToken } = useTokenToWallet(token);

  return <button onClick={addToken}>Add token</button>;
};

useLocalStorage

import { useLocalStorage } from '@lido-sdk/react';

const Component = () => {
  const initialValue = null;
  const [value, setValue] = useLocalStorage('unique-key-in-LS', initialValue);

  return <button onClick={() => setValue(2)}>{value}</button>;
};

useDebounceCallback

import { useDebounceCallback } from '@lido-sdk/react';

const Component = () => {
  const debounced = useDebounceCallback(callback);
};