npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lido-sdk/react

v2.0.7

Published

This project is being slowly deprecated and may not receive further updates. Check out [modern Lido SDK](https://github.com/lidofinance/lido-ethereum-sdk/pulls) to access latest functionality. It is actively maintained and is built for interacting with Li

Downloads

717

Readme

⚠️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

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