@bgd-labs/react-web3-icons NPM

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 `Web3Icon` component.

DynamicIcon 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.
`chainId?`	`number`	Id of the chain.
`walletKey?`	`string`	Name of the wallet for example "Metamask".
`brandKey?`	`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.
`assetTag?`	`"a", "stata", "stk"`	Asset tag, can be `a`, a circle is added around the standard icon, and can be `stata`, a circle with cuts is added around the standard icon, and `stk` umbrella circle is added around the standart icon. (automatically determined when the asset symbol is passed from the contract)
`formatSymbol?`	`(symbol: string) => string`	If you have a special condition for asset symbol formatting, you can replace the formatting function inside the component.
`iconsPack?`	`Record<string, string>`	Need to pass iconsPack from library, to using static imports. This option is not recommended for the `symbol` icon.

import { Web3Icon } from "@bgd-labs/react-web3-icons";
import { assetsIconsPack } from "@bgd-labs/react-web3-icons/dist/iconsPacks/assetsIconsPack";
import { chainsIconsPack } from "@bgd-labs/react-web3-icons/dist/iconsPacks/chainsIconsPack";
import { walletsIconsPack } from "@bgd-labs/react-web3-icons/dist/iconsPacks/walletsIconsPack";
import { brandsIconsPack } from "@bgd-labs/react-web3-icons/dist/iconsPacks/brandsIconsPack";
export const ExampleUsage = () => {
  return (
    <div>
      <Web3Icon symbol="AAVE" />
      <Web3Icon chainId={1} />
      <Web3Icon walletKey="MetaMask" />
      <Web3Icon brandKey="0x4e033931ad43597d96D6bcc25c280717730B58B1" />
      {/* static variants */}
      <Web3Icon symbol="AAVE" iconsPack={assetsIconsPack} />
      <Web3Icon chainId={1} iconsPack={chainsIconsPack} />
      <Web3Icon walletKey="MetaMask" iconsPack={walletsIconsPack} />
      <Web3Icon brandKey="0x4e033931ad43597d96D6bcc25c280717730B58B1" iconsPack={brandsIconsPack} />
    </div>
  );
};

2) You can import either full or mono icon directly from the package

import { AaaveIcon } from "@bgd-labs/react-web3-icons/dist/components/icons/full";
import { AaaveIcon as AaaveMonoIcon } from "@bgd-labs/react-web3-icons/dist/components/icons/mono";
export const UsageExample = () => {
  return (
    <>
      <AaaveIcon />
      <AaaveMonoIcon />
    </>
  );
};

3) 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 { Web3Icon } from "@bgd-labs/react-web3-icons";
export const UsageExample = () => {
  const assetName = getAssetName({ symbol: "aave" });
  return (
    <div>
      <span>{assetName}</span>
      <Web3Icon symbol="aave" />
    </div>
  );
};

Get chain name

Parameter	Type	Description
`chainId`	`number`	Id of the chain.

import { Web3Icon } from "@bgd-labs/react-web3-icons";
export const UsageExample = () => {
  const chainName = getChainName({ chainId: 1 });
  return (
    <div>
      <span>{chainName}</span>
      <Web3Icon 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 { Web3Icon } from "@bgd-labs/react-web3-icons";
const InstalledBrowserWalletWallet = () => {
  const walletName = getWeb3WalletName();
  return (
    <div>
      {walletName}
      <Web3Icon walletKey={walletName} />
    </div>
  );
};
export default dynamic(() => Promise.resolve(InstalledBrowserWalletWallet), {
  ssr: false,
});