@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
63 lines • 2.91 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AccessibleListItem, Button, ChainTokenIcon, Flex, Text } from '../../primitives/index.js';
import { useMemo } from 'react';
import { useInternalRelayChains } from '../../../hooks/index.js';
export const SuggestedTokens = ({ chainId, depositAddressOnly, onSelect }) => {
const { chains } = useInternalRelayChains();
const chain = chains?.find((c) => c.id === chainId);
const suggestedTokens = useMemo(() => {
if (!chain?.featuredTokens)
return [];
return chain.featuredTokens
.filter((token) => (depositAddressOnly ? token.supportsBridging : true))
.map((currency) => {
return {
...currency,
chainId: Number(chainId),
verified: true,
logoURI: currency?.metadata?.logoURI ?? ''
};
});
}, [chain?.featuredTokens, chainId, depositAddressOnly]);
if (!suggestedTokens.length) {
return null;
}
return (_jsx(Flex, { css: {
width: '100%',
alignItems: 'center',
flexWrap: 'wrap',
gap: '1',
my: '2'
}, children: suggestedTokens.map((token, idx) => (_jsx(AccessibleListItem, { asChild: true, value: `${token.chainId}:${token.address}`, children: _jsxs(Button, { onClick: (e) => {
e.preventDefault();
onSelect({
...token
});
}, color: "ghost", size: "none", css: {
display: 'flex',
flexShrink: 0,
cursor: 'pointer',
outline: 'none',
p: '1',
pr: '2',
gap: 1,
alignItems: 'center',
'--borderColor': 'colors.gray5',
border: '1px solid var(--borderColor)',
borderRadius: '100px',
'--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)'
}
}, children: [_jsx(ChainTokenIcon, { chainId: token.chainId, tokenlogoURI: token?.metadata?.logoURI, tokenSymbol: token.symbol }), _jsx(Text, { style: "h6", ellipsify: true, children: token.symbol })] }) }, `${token.chainId}:${token.address}:${idx}`))) }));
};
//# sourceMappingURL=SuggestedTokens.js.map