@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
83 lines • 8.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TokenList = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const numbers_js_1 = require("../../../utils/numbers.js");
const truncate_js_1 = require("../../../utils/truncate.js");
const TokenList = ({ title, tokens: rawTokens, isLoading, isLoadingBalances, chainFilterId, showMoreButton }) => {
const [tokensExpanded, setTokensExpanded] = (0, react_1.useState)(false);
const tokens = showMoreButton && rawTokens && rawTokens.length > 4 && !tokensExpanded
? rawTokens.slice(0, 4)
: rawTokens;
if (isLoading) {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2', p: '2', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: {
width: 40,
height: 40,
borderRadius: '50%',
flexShrink: 0
} }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { gap: '2px', flexGrow: 1 }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { width: '60%', height: 16 } }), (0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { width: '40%', height: 16 } })] })] }, index))) }));
}
if (tokens.length > 0)
return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { gap: '1', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.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 ((0, jsx_runtime_1.jsx)(index_js_1.AccessibleListItem, { value: value, asChild: true, children: (0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: token.chainId, tokenlogoURI: token.logoURI, tokenSymbol: token.symbol, size: "lg" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "start", css: { gap: '2px', maxWidth: '100%', minWidth: 0 }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '1', maxWidth: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", ellipsify: true, css: {
gap: '1',
alignItems: 'center'
}, children: token.symbol }), token.isGasCurrency && chainFilterId && ((0, jsx_runtime_1.jsx)(index_js_1.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" }))] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '1', maxWidth: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: chainFilterId ? 'subtle' : undefined, ellipsify: true, children: chainFilterId
? token.name
: token.chain?.displayName || token.name }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", ellipsify: true, css: { textWrap: 'nowrap' }, children: (0, truncate_js_1.truncateAddress)(token.address) }), !token.verified ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray8' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faExclamationTriangle, width: 14, height: 14 }) })) : null] })] }), (token.balance || isLoadingBalances) && ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { direction: "column", align: "end", css: { gap: '2px', ml: 'auto', flexShrink: 0 }, children: isLoadingBalances ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { ml: 'auto', width: 60 } }), (0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { ml: 'auto', width: 60 } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [token.balance?.value_usd &&
token.balance.value_usd > 0 && ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: (0, numbers_js_1.formatDollar)(token.balance?.value_usd) })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", children: (0, numbers_js_1.formatBN)(token.balance.amount, 4, token.decimals, compactBalance) })] })) }))] }) }, value));
}), showMoreButton && ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "grey", size: "small", corners: "pill", css: { ml: 'auto', minHeight: 24, px: '2', py: '1' }, onClick: () => setTokensExpanded(!tokensExpanded), children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", children: tokensExpanded ? 'Less' : 'More' }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", css: {
color: 'gray9',
marginLeft: 'auto',
transform: tokensExpanded ? 'rotate(180deg)' : 'rotate(0)',
width: 12
}, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown }) })] }))] }));
};
exports.TokenList = TokenList;
//# sourceMappingURL=TokenList.js.map