diff --git a/web/public/exchange-icons/aster.svg b/web/public/exchange-icons/aster.svg new file mode 100644 index 00000000..df4221b1 --- /dev/null +++ b/web/public/exchange-icons/aster.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/public/exchange-icons/binance.jpg b/web/public/exchange-icons/binance.jpg new file mode 100644 index 00000000..a59715ed Binary files /dev/null and b/web/public/exchange-icons/binance.jpg differ diff --git a/web/public/exchange-icons/bitget.svg b/web/public/exchange-icons/bitget.svg new file mode 100644 index 00000000..107ce788 --- /dev/null +++ b/web/public/exchange-icons/bitget.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/public/exchange-icons/bybit.png b/web/public/exchange-icons/bybit.png new file mode 100644 index 00000000..b15aca3a Binary files /dev/null and b/web/public/exchange-icons/bybit.png differ diff --git a/web/public/exchange-icons/hyperliquid.png b/web/public/exchange-icons/hyperliquid.png new file mode 100644 index 00000000..4a48daa3 Binary files /dev/null and b/web/public/exchange-icons/hyperliquid.png differ diff --git a/web/public/exchange-icons/lighter.png b/web/public/exchange-icons/lighter.png new file mode 100644 index 00000000..3e8c3c1e Binary files /dev/null and b/web/public/exchange-icons/lighter.png differ diff --git a/web/public/exchange-icons/okx.svg b/web/public/exchange-icons/okx.svg new file mode 100644 index 00000000..41d9d036 --- /dev/null +++ b/web/public/exchange-icons/okx.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/src/components/ExchangeIcons.tsx b/web/src/components/ExchangeIcons.tsx index e4792339..d97af73e 100644 --- a/web/src/components/ExchangeIcons.tsx +++ b/web/src/components/ExchangeIcons.tsx @@ -6,218 +6,73 @@ interface IconProps { className?: string } -// Binance SVG 图标组件 -const BinanceIcon: React.FC = ({ +// 本地图标路径映射 +const ICON_PATHS: Record = { + binance: '/exchange-icons/binance.jpg', + bybit: '/exchange-icons/bybit.png', + okx: '/exchange-icons/okx.svg', + bitget: '/exchange-icons/bitget.svg', + hyperliquid: '/exchange-icons/hyperliquid.png', + aster: '/exchange-icons/aster.svg', + lighter: '/exchange-icons/lighter.png', +} + +// 通用图标组件 +const ExchangeImage: React.FC = ({ width = 24, height = 24, className, + src, + alt, }) => ( - - - + ) -// Hyperliquid SVG 图标组件 -const HyperliquidIcon: React.FC = ({ +// Fallback 图标 +const FallbackIcon: React.FC = ({ width = 24, height = 24, className, + label, }) => ( - - - -) - -// Bybit SVG 图标组件 (Official from bybit-web3.github.io) -const BybitIcon: React.FC = ({ - width = 24, - height = 24, - className, -}) => ( - - - - - - - - - - - - - - - - - -) - -// OKX SVG 图标组件 -const OKXIcon: React.FC = ({ - width = 24, - height = 24, - className, -}) => ( - - - - - - - - -) - -// Bitget SVG 图标组件 -const BitgetIcon: React.FC = ({ - width = 24, - height = 24, - className, -}) => ( - - - - - -) - -// Aster SVG 图标组件 -const AsterIcon: React.FC = ({ - width = 24, - height = 24, - className, -}) => ( - - - - - - - - - - - - - - - - - - - - - - - -) - -// Lighter SVG 图标组件 -const LighterIcon: React.FC = ({ - width = 24, - height = 24, - className, -}) => ( - - - - - + {label[0]?.toUpperCase() || '?'} + ) // 获取交易所图标的函数 @@ -225,22 +80,22 @@ export const getExchangeIcon = ( exchangeType: string, props: IconProps = {} ) => { - // 支持完整ID或类型名 - const type = exchangeType.toLowerCase().includes('binance') + const lowerType = exchangeType.toLowerCase() + const type = lowerType.includes('binance') ? 'binance' - : exchangeType.toLowerCase().includes('bybit') + : lowerType.includes('bybit') ? 'bybit' - : exchangeType.toLowerCase().includes('okx') + : lowerType.includes('okx') ? 'okx' - : exchangeType.toLowerCase().includes('bitget') + : lowerType.includes('bitget') ? 'bitget' - : exchangeType.toLowerCase().includes('hyperliquid') + : lowerType.includes('hyperliquid') ? 'hyperliquid' - : exchangeType.toLowerCase().includes('aster') + : lowerType.includes('aster') ? 'aster' - : exchangeType.toLowerCase().includes('lighter') + : lowerType.includes('lighter') ? 'lighter' - : exchangeType.toLowerCase() + : lowerType const iconProps = { width: props.width || 24, @@ -248,42 +103,10 @@ export const getExchangeIcon = ( className: props.className, } - switch (type) { - case 'binance': - return - case 'bybit': - return - case 'okx': - return - case 'bitget': - return - case 'hyperliquid': - case 'dex': - return - case 'aster': - return - case 'lighter': - return - case 'cex': - default: - return ( -
- {type[0]?.toUpperCase() || '?'} -
- ) + const path = ICON_PATHS[type] + if (path) { + return } + + return }