diff --git a/packages/widget-v2/src/components/Modal.tsx b/packages/widget-v2/src/components/Modal.tsx index 195f6884..aa41e0b9 100644 --- a/packages/widget-v2/src/components/Modal.tsx +++ b/packages/widget-v2/src/components/Modal.tsx @@ -1,4 +1,4 @@ -import { css, styled, useTheme } from "styled-components"; +import { css, styled } from "styled-components"; import * as Dialog from "@radix-ui/react-dialog"; import { ShadowDomAndProviders } from "@/widget/ShadowDomAndProviders"; import NiceModal, { useModal as useNiceModal } from "@ebay/nice-modal-react"; diff --git a/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx b/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx index c77d823b..f49b6315 100644 --- a/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx +++ b/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx @@ -24,21 +24,21 @@ export const TokenAndChainSelectorModal = createModal( const modal = useModal(); const { onSelect, chainsContainingAsset, asset } = modalProps; const { data: assets, isLoading: isAssetsLoading } = useAtomValue(skipAssetsAtom); - const { isLoading: isChainsLoading } = useAtomValue(skipChainsAtom) - const isLoading = isAssetsLoading || isChainsLoading + const { isLoading: isChainsLoading } = useAtomValue(skipChainsAtom); + const isLoading = isAssetsLoading || isChainsLoading; const [showSkeleton, setShowSkeleton] = useState(true); const [searchQuery, setSearchQuery] = useState(""); const filteredAssets = useMemo(() => { - if (!assets) return + if (!assets) return; return matchSorter(assets, searchQuery, { keys: ["recommendedSymbol", "symbol", "denom"], }); }, [assets, searchQuery]); const filteredChains = useMemo(() => { - if (!chainsContainingAsset) return + if (!chainsContainingAsset) return; return matchSorter(chainsContainingAsset, searchQuery, { keys: ["chainID", "chainName", "prettyName"], }); @@ -95,9 +95,9 @@ export const TokenAndChainSelectorModal = createModal( itemHeight={70} itemKey={(item) => { if (isClientAsset(item)) { - return `${item.denom}-${item.chainID}-${item.recommendedSymbol}` + return `${item.denom}-${item.chainID}-${item.recommendedSymbol}`; } - return `${item.chainID}-${item.asset?.denom}` + return `${item.chainID}-${item.asset?.denom}`; }} renderItem={renderItem} /> diff --git a/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx b/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx index 3d4bbc0f..5638b614 100644 --- a/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx +++ b/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx @@ -6,6 +6,7 @@ import { CircleSkeletonElement, SkeletonElement } from "@/components/Skeleton"; import { styled } from "styled-components"; import { useAtomValue } from "jotai"; import { Chain } from "@skip-go/client"; +import { useGetAssetDetails } from "@/hooks/useGetAssetDetails"; export const isClientAsset = ( item: ClientAsset | ChainWithAsset @@ -32,30 +33,19 @@ export const TokenAndChainSelectorModalRowItem = ({ skeleton, onSelect, }: TokenAndChainSelectorModalRowItemProps) => { - const { isLoading: isChainsLoading, data: chains } = useAtomValue(skipChainsAtom) + const { isLoading: isChainsLoading, data: chains } = useAtomValue(skipChainsAtom); if (!item || isChainsLoading) return skeleton; if (isClientAsset(item)) { - const chain = chains?.find((chain) => chain.chainID === item.chainID) + const chain = chains?.find((chain) => chain.chainID === item.chainID); return ( onSelect(item)} style={{ margin: "5px 0" }} leftContent={ - - - {item.symbol} - - {chain?.prettyName} - - + } /> ); @@ -63,7 +53,7 @@ export const TokenAndChainSelectorModalRowItem = ({ if (isChainWithAsset(item)) { - const chain = chains?.find((chain) => chain.chainID === item.chainID) + const chain = chains?.find((chain) => chain.chainID === item.chainID); return ( { + const assetDetails = useGetAssetDetails({ + assetDenom: asset.denom, + chainId: asset.chainID, + }); + return ( + + + {assetDetails.symbol} + + {chain?.prettyName} + + + ); +}; + const StyledAssetImage = styled.img` border-radius: 50%; object-fit: cover; diff --git a/packages/widget-v2/src/state/skipClient.ts b/packages/widget-v2/src/state/skipClient.ts index 471851c2..04c8edbf 100644 --- a/packages/widget-v2/src/state/skipClient.ts +++ b/packages/widget-v2/src/state/skipClient.ts @@ -127,7 +127,7 @@ const skipRouteRequestAtom = atom((get) => { export const debouncedRouteRequestEffect = atomEffect((get, set) => { const routeRequest = get(skipRouteRequestAtom); set(debouncedSkipRouteRequestAtom, routeRequest); -}) +}); export const skipRouteAtom = atomWithQuery((get) => {