@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
67 lines • 3.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SuggestedTokens = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../primitives/index.js");
const react_1 = require("react");
const index_js_2 = require("../../../hooks/index.js");
const SuggestedTokens = ({ chainId, depositAddressOnly, onSelect }) => {
const { chains } = (0, index_js_2.useInternalRelayChains)();
const chain = chains?.find((c) => c.id === chainId);
const suggestedTokens = (0, react_1.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 ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: {
width: '100%',
alignItems: 'center',
flexWrap: 'wrap',
gap: '1',
my: '2'
}, children: suggestedTokens.map((token, idx) => ((0, jsx_runtime_1.jsx)(index_js_1.AccessibleListItem, { asChild: true, value: `${token.chainId}:${token.address}`, children: (0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: token.chainId, tokenlogoURI: token?.metadata?.logoURI, tokenSymbol: token.symbol }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", ellipsify: true, children: token.symbol })] }) }, `${token.chainId}:${token.address}:${idx}`))) }));
};
exports.SuggestedTokens = SuggestedTokens;
//# sourceMappingURL=SuggestedTokens.js.map