From aead3a2eab00fe0244393bdb6c4e93acf22b7f51 Mon Sep 17 00:00:00 2001 From: Kris Urbas <605420+krzysu@users.noreply.github.com> Date: Fri, 7 Feb 2025 17:47:32 +0100 Subject: [PATCH] fix: tree shaking web3 icons --- package.json | 1 - packages/circle-demo-webapp/package.json | 1 - packages/circle-react-elements/README.md | 5 +- packages/circle-react-elements/package.json | 2 +- .../src/GettingStarted.mdx | 5 +- .../src/components/ChainIcon/ChainIcon.tsx | 66 +++++++++++-------- .../LazyTokenIcon/LazyTokenIcon.tsx | 20 ++++++ .../src/components/LazyTokenIcon/index.ts | 1 + .../src/components/TokenItem/TokenItem.tsx | 8 +-- .../TokenSelect/TokenSelectItem.tsx | 8 +-- .../WalletBalance/WalletBalance.tsx | 10 +-- yarn.lock | 18 ++--- 12 files changed, 80 insertions(+), 65 deletions(-) create mode 100644 packages/circle-react-elements/src/components/LazyTokenIcon/LazyTokenIcon.tsx create mode 100644 packages/circle-react-elements/src/components/LazyTokenIcon/index.ts diff --git a/package.json b/package.json index 9025875..da94fc5 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ }, "dependencies": { "@circle-fin/developer-controlled-wallets": "^7.0.0", - "@web3icons/react": "^3.16.0", "lucide-react": "^0.474.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/circle-demo-webapp/package.json b/packages/circle-demo-webapp/package.json index 9860e97..08f7267 100644 --- a/packages/circle-demo-webapp/package.json +++ b/packages/circle-demo-webapp/package.json @@ -36,7 +36,6 @@ "@remix-run/node": "^2.15.0", "@remix-run/react": "^2.15.0", "@remix-run/serve": "^2.15.0", - "@web3icons/react": "^3.16.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "ethereum-blockies-base64": "^1.0.2", diff --git a/packages/circle-react-elements/README.md b/packages/circle-react-elements/README.md index 1309412..6b0c27e 100644 --- a/packages/circle-react-elements/README.md +++ b/packages/circle-react-elements/README.md @@ -59,7 +59,6 @@ This package requires the following peer dependencies: ```json { "@circle-fin/developer-controlled-wallets": "^7.0.0", // Circle SDK - "@web3icons/react": "^3.16.0", // Blockchain icons "lucide-react": "^0.474.0", // Icon library "react": "^18.2.0", "react-dom": "^18.2.0", @@ -71,13 +70,13 @@ This package requires the following peer dependencies: Install them all in a single command: ```bash -npm install @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss +npm install @circle-fin/developer-controlled-wallets lucide-react react react-dom react-hook-form tailwindcss ``` or ```bash -yarn add @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss +yarn add @circle-fin/developer-controlled-wallets lucide-react react react-dom react-hook-form tailwindcss ``` ## Tailwind CSS Setup diff --git a/packages/circle-react-elements/package.json b/packages/circle-react-elements/package.json index e2fb1bc..a061934 100644 --- a/packages/circle-react-elements/package.json +++ b/packages/circle-react-elements/package.json @@ -54,6 +54,7 @@ "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-slot": "^1.1.0", + "@web3icons/react": "^4.0.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "ethereum-blockies-base64": "^1.0.2", @@ -94,7 +95,6 @@ }, "peerDependencies": { "@circle-fin/developer-controlled-wallets": "^7.0.0", - "@web3icons/react": "^3.16.0", "lucide-react": "^0.474.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/circle-react-elements/src/GettingStarted.mdx b/packages/circle-react-elements/src/GettingStarted.mdx index 5d8028e..c74703c 100644 --- a/packages/circle-react-elements/src/GettingStarted.mdx +++ b/packages/circle-react-elements/src/GettingStarted.mdx @@ -59,7 +59,6 @@ This package requires the following peer dependencies: ```json { "@circle-fin/developer-controlled-wallets": "^7.0.0", // Circle SDK - "@web3icons/react": "^3.16.0", // Blockchain icons "lucide-react": "^0.474.0", // Icon library "react": "^18.2.0", "react-dom": "^18.2.0", @@ -71,13 +70,13 @@ This package requires the following peer dependencies: Install them all in a single command: ```bash -npm install @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss +npm install @circle-fin/developer-controlled-wallets lucide-react react react-dom react-hook-form tailwindcss ``` or ```bash -yarn add @circle-fin/developer-controlled-wallets @web3icons/react lucide-react react react-dom react-hook-form tailwindcss +yarn add @circle-fin/developer-controlled-wallets lucide-react react react-dom react-hook-form tailwindcss ``` ## Tailwind CSS Setup diff --git a/packages/circle-react-elements/src/components/ChainIcon/ChainIcon.tsx b/packages/circle-react-elements/src/components/ChainIcon/ChainIcon.tsx index cb49a47..740fce0 100644 --- a/packages/circle-react-elements/src/components/ChainIcon/ChainIcon.tsx +++ b/packages/circle-react-elements/src/components/ChainIcon/ChainIcon.tsx @@ -1,10 +1,19 @@ import type { Blockchain } from '@circle-fin/developer-controlled-wallets'; -import { NetworkIcon } from '@web3icons/react'; +import { + NetworkArbitrumOne, + NetworkPolygon, + NetworkNearProtocol, + NetworkAvalanche, + NetworkSolana, + NetworkEthereum, + NetworkUnichain, + type IconComponentProps, +} from '@web3icons/react'; /** * Props for the ChainIcon component */ -export interface ChainIconProps { +export interface ChainIconProps extends IconComponentProps { /** * The blockchain network to display an icon for * Supports all networks from Circle's API including testnet variants @@ -12,38 +21,37 @@ export interface ChainIconProps { blockchain: Blockchain; } -/** - * Mapping of Circle blockchain identifiers to web3icons network names - */ -const BlockchainToIconMap: Record = { - 'ARB-SEPOLIA': 'arbitrum', - ARB: 'arbitrum', - 'AVAX-FUJI': 'avalanche', - AVAX: 'avalanche', - 'ETH-SEPOLIA': 'ethereum', - ETH: 'ethereum', - 'EVM-TESTNET': '', - EVM: '', - 'MATIC-AMOY': 'polygon', - MATIC: 'polygon', - 'NEAR-TESTNET': 'near-protocol', - NEAR: 'near-protocol', - 'SOL-DEVNET': 'solana', - SOL: 'solana', - 'UNI-SEPOLIA': 'uni', -}; +const BlockchainToIconMap: Record> = { + 'ARB-SEPOLIA': NetworkArbitrumOne, + ARB: NetworkArbitrumOne, + 'AVAX-FUJI': NetworkAvalanche, + AVAX: NetworkAvalanche, + 'ETH-SEPOLIA': NetworkEthereum, + ETH: NetworkEthereum, + 'EVM-TESTNET': NetworkEthereum, + EVM: NetworkEthereum, + 'MATIC-AMOY': NetworkPolygon, + MATIC: NetworkPolygon, + 'NEAR-TESTNET': NetworkNearProtocol, + NEAR: NetworkNearProtocol, + 'SOL-DEVNET': NetworkSolana, + SOL: NetworkSolana, + 'UNI-SEPOLIA': NetworkUnichain, +} as const; /** * Displays a branded icon for a given blockchain network * * Features: - * - Shows branded network icons using web3icons library + * - Uses specific network icons from @web3icons/react * - Supports all Circle-supported networks including testnets - * - Consistent 20px size for all icons - * - Uses official branded network colors */ -export function ChainIcon({ blockchain }: ChainIconProps) { - return ( - - ); +export function ChainIcon({ blockchain, ...props }: ChainIconProps) { + const Icon = BlockchainToIconMap[blockchain]; + + if (!Icon) { + return null; + } + + return ; } diff --git a/packages/circle-react-elements/src/components/LazyTokenIcon/LazyTokenIcon.tsx b/packages/circle-react-elements/src/components/LazyTokenIcon/LazyTokenIcon.tsx new file mode 100644 index 0000000..55da96a --- /dev/null +++ b/packages/circle-react-elements/src/components/LazyTokenIcon/LazyTokenIcon.tsx @@ -0,0 +1,20 @@ +import type { TokenIconProps } from '@web3icons/react'; +import { lazy, Suspense } from 'react'; + +const TokenIcon = lazy(() => + import('@web3icons/react').then((mod) => ({ + default: mod.TokenIcon, + })), +); + +export type LazyTokenIconProps = TokenIconProps & { + ref?: React.Ref; +}; + +export function LazyTokenIcon(props: LazyTokenIconProps) { + return ( + }> + + + ); +} diff --git a/packages/circle-react-elements/src/components/LazyTokenIcon/index.ts b/packages/circle-react-elements/src/components/LazyTokenIcon/index.ts new file mode 100644 index 0000000..6b6c7d8 --- /dev/null +++ b/packages/circle-react-elements/src/components/LazyTokenIcon/index.ts @@ -0,0 +1 @@ +export * from './LazyTokenIcon'; diff --git a/packages/circle-react-elements/src/components/TokenItem/TokenItem.tsx b/packages/circle-react-elements/src/components/TokenItem/TokenItem.tsx index fa02d44..0350003 100644 --- a/packages/circle-react-elements/src/components/TokenItem/TokenItem.tsx +++ b/packages/circle-react-elements/src/components/TokenItem/TokenItem.tsx @@ -1,5 +1,6 @@ import type { Token } from '@circle-fin/developer-controlled-wallets'; -import { TokenIcon } from '@web3icons/react'; + +import { LazyTokenIcon } from '../LazyTokenIcon'; /** * Props for the TokenItem component @@ -17,14 +18,11 @@ export interface TokenItemProps { * * Features: * - Shows branded token icons using web3icons library - * - Handles split token symbols (e.g., "USDC-ETH" displays USDC icon) - * - Consistent styling with muted text and icon alignment - * - Fixed icon size of 24px for visual consistency */ export function TokenItem({ token }: TokenItemProps) { return (
- -
-