83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import styled, { type AnyStyledComponent } from 'styled-components';
|
|
|
|
import { Nullable } from '@/constants/abacus';
|
|
|
|
export type AssetSymbol = keyof typeof assetIcons;
|
|
|
|
const assetIcons = {
|
|
'1INCH': '/currencies/1inch.png',
|
|
AAVE: '/currencies/aave.png',
|
|
ADA: '/currencies/ada.png',
|
|
ALGO: '/currencies/algo.png',
|
|
APE: '/currencies/ape.png',
|
|
APT: '/currencies/apt.png',
|
|
ARB: '/currencies/arb.png',
|
|
ATOM: '/currencies/atom.png',
|
|
AVAX: '/currencies/avax.png',
|
|
BCH: '/currencies/bch.png',
|
|
BLUR: '/currencies/blur.png',
|
|
BTC: '/currencies/btc.png',
|
|
CELO: '/currencies/celo.png',
|
|
COMP: '/currencies/comp.png',
|
|
CRV: '/currencies/crv.png',
|
|
DAI: '/currencies/dai.png',
|
|
DOGE: '/currencies/doge.png',
|
|
DOT: '/currencies/dot.png',
|
|
DYDX: '/currencies/dydx.png',
|
|
ENJ: '/currencies/enj.png',
|
|
EOS: '/currencies/eos.png',
|
|
ETC: '/currencies/etc.png',
|
|
ETH: '/currencies/eth.png',
|
|
FIL: '/currencies/fil.png',
|
|
ICP: '/currencies/icp.png',
|
|
LDO: '/currencies/ldo.png',
|
|
LINK: '/currencies/link.png',
|
|
LTC: '/currencies/ltc.png',
|
|
MATIC: '/currencies/matic.png',
|
|
MKR: '/currencies/mkr.png',
|
|
NEAR: '/currencies/near.png',
|
|
OP: '/currencies/op.png',
|
|
PEPE: '/currencies/pepe.png',
|
|
RUNE: '/currencies/rune.png',
|
|
SEI: '/currencies/sei.png',
|
|
SHIB: '/currencies/shib.png',
|
|
SNX: '/currencies/snx.png',
|
|
SOL: '/currencies/sol.png',
|
|
SUI: '/currencies/sui.png',
|
|
SUSHI: '/currencies/sushi.png',
|
|
TRX: '/currencies/trx.png',
|
|
UMA: '/currencies/uma.png',
|
|
UNI: '/currencies/uni.png',
|
|
USDC: '/currencies/usdc.png',
|
|
USDT: '/currencies/usdt.png',
|
|
WBTC: '/currencies/wbtc.png',
|
|
WETH: '/currencies/weth.png',
|
|
WLD: '/currencies/wld.png',
|
|
XLM: '/currencies/xlm.png',
|
|
XMR: '/currencies/xmr.png',
|
|
XRP: '/currencies/xrp.png',
|
|
XTZ: '/currencies/xtz.png',
|
|
YFI: '/currencies/yfi.png',
|
|
ZEC: '/currencies/zec.png',
|
|
ZRX: '/currencies/zrx.png',
|
|
} as const;
|
|
|
|
const isAssetSymbol = (symbol: Nullable<string>): symbol is AssetSymbol =>
|
|
symbol != null && assetIcons.hasOwnProperty(symbol);
|
|
|
|
export const AssetIcon = ({
|
|
symbol,
|
|
className,
|
|
}: {
|
|
symbol?: Nullable<string>;
|
|
className?: string;
|
|
}) =>
|
|
isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
|
|
|
|
const Styled: Record<string, AnyStyledComponent> = {};
|
|
|
|
Styled.Img = styled.img`
|
|
width: auto;
|
|
height: 1em;
|
|
`;
|