From 06eef9db45171a686cf5921cd7c4a65d2e1fae5f Mon Sep 17 00:00:00 2001 From: ak Date: Sun, 18 Aug 2024 02:29:34 +0300 Subject: [PATCH] use `DynamicIcon` in `NetworkIcon`, `WalletIcon`, `TokenIcon` --- packages/react/src/NetworkIcon.tsx | 74 ++------------ packages/react/src/TokenIcon.tsx | 149 ++++------------------------- packages/react/src/WalletIcon.tsx | 103 ++++---------------- 3 files changed, 44 insertions(+), 282 deletions(-) diff --git a/packages/react/src/NetworkIcon.tsx b/packages/react/src/NetworkIcon.tsx index c30850ee4..16b138eef 100644 --- a/packages/react/src/NetworkIcon.tsx +++ b/packages/react/src/NetworkIcon.tsx @@ -1,77 +1,21 @@ -import { forwardRef, ReactElement, useState, useEffect } from 'react' -import { networks } from '@web3icons/core/metadata' -import { INetworkMetadata } from '@web3icons/core' +import { forwardRef } from 'react' import { NetworkIconProps } from './types' -import { toKebabCase, toPascalCase, NETWORK_ICON_IMPORT_MAP } from './utils' - -const findNetwork = (network: string): INetworkMetadata | undefined => { - const networkObj = networks.find( - (net) => - net.id.toLowerCase() === toKebabCase(network) || - net.name.toLowerCase() === network.toLowerCase() || - net.shortname?.toLowerCase() === network.toLowerCase(), - ) - return networkObj -} - -const DynamicIconLoader = forwardRef( - ( - { network, size, className, variant, color }: NetworkIconProps, - ref, - ): ReactElement | null => { - const [IconComponent, setIconComponent] = useState( - null, - ) - - useEffect(() => { - const loadIcon = async () => { - const matchedNetwork = findNetwork(network) - if (!matchedNetwork) { - console.error(`Network not found: ${network}`) - return - } - - const iconName = `Network${toPascalCase(matchedNetwork.name)}` - const importFunction = - NETWORK_ICON_IMPORT_MAP[iconName] ?? - NETWORK_ICON_IMPORT_MAP[`Network${toPascalCase(matchedNetwork.id)}`] - - if (importFunction) { - try { - const { default: ImportedIcon } = await importFunction() - setIconComponent( - , - ) - } catch (error) { - console.error(`Error loading icon: ${iconName}`, error) - } - } - } - - loadIcon() - }, [network, ref, size, className, variant, color]) - - return IconComponent - }, -) +import { findNetwork } from './utils' +import { DynamicIcon } from './DynamicIcon' export const NetworkIcon = forwardRef( - ({ network, size, className, variant = 'mono', color }, ref) => { + ({ network, size, className, variant = 'mono', color, fallback }, ref) => { + const metadata = findNetwork({ network }) return ( - ) }, diff --git a/packages/react/src/TokenIcon.tsx b/packages/react/src/TokenIcon.tsx index 332654013..f8865a1e8 100644 --- a/packages/react/src/TokenIcon.tsx +++ b/packages/react/src/TokenIcon.tsx @@ -1,117 +1,7 @@ -import { forwardRef, ReactElement, useEffect, useState } from 'react' -import { ITokenMetadata, tokens } from '@web3icons/core' +import { forwardRef } from 'react' import { TokenIconProps } from './types' -import { TOKEN_ICON_IMPORT_MAP } from './utils' - -const findToken = ( - symbol?: string, - address?: string, - network?: string, -): ITokenMetadata | undefined => { - if (symbol) { - return tokens.find( - (token) => token.symbol.toLowerCase() === symbol.toLowerCase(), - ) - } else if (address && network) { - return tokens.find( - (token) => - token.addresses[network]?.toLowerCase() === address.toLowerCase(), - ) - } - return undefined -} - -const DynamicIconLoader = forwardRef( - ( - { - symbol, - size, - className, - variant, - color, - address, - network, - defaultImg, - }: TokenIconProps, - ref, - ): ReactElement | null => { - const [IconComponent, setIconComponent] = useState( - null, - ) - - useEffect(() => { - const loadIcon = async () => { - const tokenData = findToken(symbol, address, network) - - if (!tokenData) { - setIconComponent( - } - src={defaultImg} - alt="default icon" - className={className} - style={{ width: size, height: size }} - />, - ) - return - } - - const iconName = `Token${tokenData.symbol.toUpperCase()}` - const importFunction = TOKEN_ICON_IMPORT_MAP[iconName] - - if (importFunction) { - try { - const { default: ImportedIcon } = await importFunction() - setIconComponent( - , - ) - } catch (error) { - console.error(`Error loading icon: ${iconName}`, error) - setIconComponent( - } - src={defaultImg} - alt="default icon" - className={className} - style={{ width: size, height: size }} - />, - ) - } - } else { - setIconComponent( - } - src={defaultImg} - alt="defult icon" - className={className} - style={{ width: size, height: size }} - />, - ) - } - } - loadIcon() - }, [ - symbol, - address, - network, - ref, - size, - className, - variant, - color, - defaultImg, - ]) - - return IconComponent - }, -) +import { findToken } from './utils' +import { DynamicIcon } from './DynamicIcon' export const TokenIcon = forwardRef( ( @@ -123,28 +13,23 @@ export const TokenIcon = forwardRef( color, address, network, - defaultImg, + fallback, }, ref, ) => { - const props = { - color, - size, - variant, - className, - ref, - defaultImg, - } - - if (symbol) { - return - } - - if (address && network) { - return ( - - ) - } + const metadata = findToken(symbol ? { symbol } : { address, network }) + return ( + + ) }, ) diff --git a/packages/react/src/WalletIcon.tsx b/packages/react/src/WalletIcon.tsx index e89557d06..c2a42eca7 100644 --- a/packages/react/src/WalletIcon.tsx +++ b/packages/react/src/WalletIcon.tsx @@ -1,91 +1,24 @@ -import { forwardRef, ReactElement, useState, useEffect } from 'react' -import { IWalletMetadata, wallets } from '@web3icons/core' +import { forwardRef } from 'react' import { WalletIconProps } from './types' -import { toKebabCase, toPascalCase, WALLET_ICON_IMPORT_MAP } from './utils' - -const findWallet = (wallet: string): IWalletMetadata | undefined => { - const walletObj = wallets.find( - (w) => - w.id.toLowerCase() === toKebabCase(wallet) || - w.name.toLowerCase() === wallet.toLowerCase(), - ) - return walletObj -} - -const DynamicIconLoader = forwardRef( - ( - { id, name, size, className, variant, color }: WalletIconProps, - ref, - ): ReactElement | null => { - // prettier-ignore - const [IconComponent, setIconComponent] = useState(null) - - useEffect(() => { - const loadIcon = async () => { - const matchedWallet = findWallet(name ?? id) - if (!matchedWallet) { - return - } - - const importFunction = - WALLET_ICON_IMPORT_MAP[`Wallet${toPascalCase(matchedWallet.name)}`] ?? - WALLET_ICON_IMPORT_MAP[`Wallet${toPascalCase(matchedWallet.id)}`] - - if (importFunction) { - try { - const { default: ImportedIcon } = await importFunction() - setIconComponent( - , - ) - } catch (error) { - console.error(`Error loading icon: ${matchedWallet.name}`, error) - } - } - } - - loadIcon() - }, [name, id, ref, size, className, variant, color]) - - return IconComponent - }, -) +import { DynamicIcon } from './DynamicIcon' +import { findWallet } from './utils' export const WalletIcon = forwardRef( - ({ id, name, size, className, variant = 'mono', color }, ref) => { - if (id) { - return ( - - ) - } - - if (name) { - return ( - - ) - } + ({ id, name, size, className, variant = 'mono', color, fallback }, ref) => { + const metadata = findWallet({ wallet: id ?? name }) + + return ( + + ) }, )