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

Copyright

2024 BGD Labs