@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
79 lines • 7.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { Flex, Text, Skeleton, ChainTokenIcon, AccessibleListItem, Box, Button } from '../../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronUp, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { formatBN, formatDollar } from '../../../utils/numbers.js';
import { truncateAddress } from '../../../utils/truncate.js';
export const TokenList = ({ title, tokens: rawTokens, isLoading, isLoadingBalances, chainFilterId, showMoreButton }) => {
const [tokensExpanded, setTokensExpanded] = useState(false);
const tokens = showMoreButton && rawTokens && rawTokens.length > 4 && !tokensExpanded
? rawTokens.slice(0, 4)
: rawTokens;
if (isLoading) {
return (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, index) => (_jsxs(Flex, { align: "center", css: { gap: '2', p: '2', width: '100%' }, children: [_jsx(Skeleton, { css: {
width: 40,
height: 40,
borderRadius: '50%',
flexShrink: 0
} }), _jsxs(Flex, { direction: "column", css: { gap: '2px', flexGrow: 1 }, children: [_jsx(Skeleton, { css: { width: '60%', height: 16 } }), _jsx(Skeleton, { css: { width: '40%', height: 16 } })] })] }, index))) }));
}
if (tokens.length > 0)
return (_jsxs(Flex, { direction: "column", css: { gap: '1', width: '100%' }, children: [_jsx(Text, { style: "subtitle2", color: "subtle", children: title }), tokens.map((token) => {
const value = `${token.chainId}:${token.address}`;
const compactBalance = Boolean(token.balance &&
token.decimals &&
token.balance.toString().length - token.decimals > 4);
return (_jsx(AccessibleListItem, { value: value, asChild: true, children: _jsxs(Button, { color: "ghost", css: {
gap: '2',
cursor: 'pointer',
px: '2',
py: '2',
transition: 'backdrop-filter 250ms linear',
_hover: {
backgroundColor: 'gray/10'
},
flexShrink: 0,
alignContent: 'center',
display: 'flex',
width: '100%',
'--focusColor': 'colors.focus-color',
_focusVisible: {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
'&[data-state="on"]': {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
_active: {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
_focusWithin: {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
scrollSnapAlign: 'start'
}, children: [_jsx(ChainTokenIcon, { chainId: token.chainId, tokenlogoURI: token.logoURI, tokenSymbol: token.symbol, size: "lg" }), _jsxs(Flex, { direction: "column", align: "start", css: { gap: '2px', maxWidth: '100%', minWidth: 0 }, children: [_jsxs(Flex, { align: "center", css: { gap: '1', maxWidth: '100%' }, children: [_jsx(Text, { style: "h6", ellipsify: true, css: {
gap: '1',
alignItems: 'center'
}, children: token.symbol }), token.isGasCurrency && chainFilterId && (_jsx(Text, { style: "subtitle3", css: {
px: '6px',
py: '4px',
borderRadius: '100px',
backgroundColor: 'gray3',
whiteSpace: 'nowrap',
flexShrink: 0,
lineHeight: '12px',
'button:hover &': {
backgroundColor: 'gray5'
}
}, children: "Gas Token" }))] }), _jsxs(Flex, { align: "center", css: { gap: '1', maxWidth: '100%' }, children: [_jsx(Text, { style: "subtitle3", color: chainFilterId ? 'subtle' : undefined, ellipsify: true, children: chainFilterId
? token.name
: token.chain?.displayName || token.name }), _jsx(Text, { style: "subtitle3", color: "subtle", ellipsify: true, css: { textWrap: 'nowrap' }, children: truncateAddress(token.address) }), !token.verified ? (_jsx(Box, { css: { color: 'gray8' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationTriangle, width: 14, height: 14 }) })) : null] })] }), (token.balance || isLoadingBalances) && (_jsx(Flex, { direction: "column", align: "end", css: { gap: '2px', ml: 'auto', flexShrink: 0 }, children: isLoadingBalances ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { css: { ml: 'auto', width: 60 } }), _jsx(Skeleton, { css: { ml: 'auto', width: 60 } })] })) : (_jsxs(_Fragment, { children: [token.balance?.value_usd &&
token.balance.value_usd > 0 && (_jsx(Text, { style: "h6", children: formatDollar(token.balance?.value_usd) })), _jsx(Text, { style: "subtitle3", color: "subtle", children: formatBN(token.balance.amount, 4, token.decimals, compactBalance) })] })) }))] }) }, value));
}), showMoreButton && (_jsxs(Button, { color: "grey", size: "small", corners: "pill", css: { ml: 'auto', minHeight: 24, px: '2', py: '1' }, onClick: () => setTokensExpanded(!tokensExpanded), children: [_jsx(Text, { style: "subtitle3", color: "subtle", children: tokensExpanded ? 'Less' : 'More' }), _jsx(Text, { style: "body1", css: {
color: 'gray9',
marginLeft: 'auto',
transform: tokensExpanded ? 'rotate(180deg)' : 'rotate(0)',
width: 12
}, children: _jsx(FontAwesomeIcon, { icon: faChevronDown }) })] }))] }));
};
//# sourceMappingURL=TokenList.js.map