@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
48 lines (47 loc) • 2.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TokenList = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const hooks_1 = require("../../hooks");
const providers_1 = require("../../providers");
const TokenNotFound_1 = require("./TokenNotFound");
const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
const useTokenSelect_1 = require("./useTokenSelect");
const TokenList = ({ formType, height, onClick, }) => {
const parentRef = (0, react_1.useRef)(null);
const { account } = (0, providers_1.useWallet)();
const [selectedChainId] = (0, react_hook_form_1.useWatch)({
name: [providers_1.FormKeyHelper.getChainKey(formType)],
});
const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.FormKey.TokenSearchFilter], 320);
const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(selectedChainId);
const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
let filteredTokens = (tokensWithBalance ??
chainTokens ??
[]);
const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
filteredTokens = tokenSearchFilter
? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
token.symbol.toUpperCase().includes(searchFilter) ||
token.address.toUpperCase().includes(searchFilter))
: filteredTokens;
const tokenSearchEnabled = !isTokensLoading &&
!filteredTokens.length &&
!!tokenSearchFilter &&
!!selectedChainId;
const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
const isLoading = isTokensLoading ||
isChainLoading ||
(tokenSearchEnabled && isSearchedTokenLoading);
const tokens = filteredTokens.length
? filteredTokens
: searchedToken
? [searchedToken]
: filteredTokens;
const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
};
exports.TokenList = TokenList;