token use useGetAssetDetails hook (#241)

skip-mev · Sep 13, 2024 · 0caa740 · 0caa740
1 parent 56b7814
commit 0caa740
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 23 deletions.
diff --git 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
@@ -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<string>("");
 
     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/...ges/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx b/...ges/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,38 +33,27 @@ 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 (
       <ModalRowItem
         key={`${index}${item.denom}`}
         onClick={() => onSelect(item)}
         style={{ margin: "5px 0" }}
         leftContent={
-          <Row align="center" gap={10}>
-            <StyledAssetImage
-              height={35}
-              width={35}
-              src={item.logoURI}
-              alt={`${item.symbol} logo`}
-            />
-            <Text>{item.symbol}</Text>
-            <SmallText>
-              {chain?.prettyName}
-            </SmallText>
-          </Row>
+          <TokenAndChainSelectorModalRowItemLeftContent asset={item} chain={chain} />
         }
       />
     );
   }
 
   if (isChainWithAsset(item)) {
 
-    const chain = chains?.find((chain) => chain.chainID === item.chainID)
+    const chain = chains?.find((chain) => chain.chainID === item.chainID);
     return (
       <ModalRowItem
         key={item.chainID}
@@ -86,6 +76,27 @@ export const TokenAndChainSelectorModalRowItem = ({
   }
 };
 
+const TokenAndChainSelectorModalRowItemLeftContent = ({ asset, chain }: { asset: ClientAsset, chain?: Chain }) => {
+  const assetDetails = useGetAssetDetails({
+    assetDenom: asset.denom,
+    chainId: asset.chainID,
+  });
+  return (
+    <Row align="center" gap={10}>
+      <StyledAssetImage
+        height={35}
+        width={35}
+        src={assetDetails.assetImage}
+        alt={`${assetDetails.symbol} logo`}
+      />
+      <Text>{assetDetails.symbol}</Text>
+      <SmallText>
+        {chain?.prettyName}
+      </SmallText>
+    </Row>
+  );
+};
+
 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
@@ -127,7 +127,7 @@ const skipRouteRequestAtom = atom<RouteRequest | undefined>((get) => {
 export const debouncedRouteRequestEffect = atomEffect((get, set) => {
   const routeRequest = get(skipRouteRequestAtom);
   set(debouncedSkipRouteRequestAtom, routeRequest);
-})
+});
 
 
 export const skipRouteAtom = atomWithQuery((get) => {