@bgd-labs/react-web3-icons

React web3 icons

Package with some of web3 assets, chains and web3 wallets icons for easy use in the React.js ecosystem.

Installation

npm

npm i @bgd-labs/react-web3-icons

yarn

yarn add @bgd-labs/react-web3-icons

pnpm

pnpm add @bgd-labs/react-web3-icons

Usage

1) You can use AssetIcon component.

AssetIcon type parameters

Parameter	Type	Description
symbol	string	The symbol parameter is not case sensitive, you can pass it as AAVE or aave or AaVe. The result will always be the AAVE asset token icon.
mono	boolean	If true then the icon is displayed in black and white.
assetTag	AssetTag	Asset tag, can be aToken, a circle is added around the standard icon, and can be stataToken, a circle with cuts is added around the standard icon.
formatSymbol	(symbol: string) => string	If you have a special condition for asset symbol formatting, you can replace the formatting function inside the component.

import { AssetTag } from "@bgd-labs/react-web3-icons/dist/utils";
import { AssetIcon } from "@bgd-labs/react-web3-icons";
export const ExampleUsage = () => {
  return (
    <div>
      <span>AAVE</span>
      <AssetIcon symbol="AAVE" assetTag={AssetTag.AToken} mono />
    </div>
  );
};

2) You can use ChainIcon component.

ChainIcon type parameters

Parameter	Type	Description
chainId	number	Id of the chain.
mono	boolean	If true then the icon is displayed in black and white.

import { ChainIcon } from "@bgd-labs/react-web3-icons";
export const ExampleUsage = () => {
  return (
    <div>
      <span>Ethereum</span>
      <ChainIcon chainId="1" mono />
    </div>
  );
};

3) You can use WalletIcon component.

WalletIcon type parameters

Parameter	Type	Description
walletName	string	Name of the wallet for example "Metamask".
mono	boolean	If true then the icon is displayed in black and white.

import { WalletIcon } from "@bgd-labs/react-web3-icons";
export const ExampleUsage = () => {
  return (
    <div>
      <span>MetaMask</span>
      <WalletIcon walletName="MetaMask" mono />
    </div>
  );
};

4) You can use BrandIcon component.

BrandIcon type parameters

Parameter	Type	Description
addressOrName	string	Address of the pool or name of the brand for example "Lido".
mono	boolean	If true then the icon is displayed in black and white.

import { BrandIcon } from "@bgd-labs/react-web3-icons";
export const ExampleUsage = () => {
  return (
    <BrandIcon addressOrName="Lido" mono />
  );
};

5) The above examples use dynamic loading of icons, but you can also use icons with static loading. This option is not recommended for the AssetIcon.

Examples

import { AssetTag } from "@bgd-labs/react-web3-icons/dist/utils";
import { StaticAssetIcon, StaticChainIcon, StaticWalletIcon, StaticBrandIcon } from "@bgd-labs/react-web3-icons";
export const ExampleUsage = () => {
  return (
    <div>
      <StaticAssetIcon symbol="AAVE" assetTag={AssetTag.AToken} mono />
      <StaticChainIcon chainId="1" mono />
      <StaticWalletIcon walletName="MetaMask" mono />
      <StaticBrandIcon addressOrName="0x4e033931ad43597d96D6bcc25c280717730B58B1" mono />
    </div>
  );
};

6) You can get chain or asset name without rpc call. Also you can check installed browser wallet name, and get icon for this wallet.

Get asset name

Parameter	Type	Description
symbol	string	The symbol parameter is not case sensitive, you can pass it as AAVE or aave or AaVe. The result will always be the AAVE asset token icon.
formatSymbol	(symbol: string) => string	If you have a special condition for asset symbol formatting, you can replace the formatting function inside the component.

import { AssetIcon } from "@bgd-labs/react-web3-icons";
export const UsageExample = () => {
  const assetName = getAssetName({ symbol: "aave" });
  return (
    <div>
      <span>{assetName}</span>
      <AssetIcon "aave" />
    </div>
  );
};

Get chain name

Parameter	Type	Description
chainId	number	Id of the chain.

import { ChainIcon } from "@bgd-labs/react-web3-icons";
export const UsageExample = () => {
  const chainName = getChainName({ chainId: 1 });
  return (
    <div>
      <span>{chainName}</span>
      <ChainIcon chainId={1} />
    </div>
  );
};

Check installed wallet name and use icon from package

import { getWeb3WalletName } from "@bgd-labs/react-web3-icons/dist/utils";
import dynamic from "next/dynamic";
import { WalletIcon } from "@bgd-labs/react-web3-icons";
const InstalledBrowserWalletWallet = () => {
  const walletName = getWeb3WalletName();
  return (
    <div>
      {walletName}
      <WalletIcon walletName={walletName} />
    </div>
  );
};
export default dynamic(() => Promise.resolve(InstalledBrowserWalletWallet), {
  ssr: false,
});

Copyright

2024 BGD Labs