[FRE-1314] fix: filter available wallets in RenderWalletList component (

#597)
skip-mev · Dec 23, 2024 · 7caf0cb · 7caf0cb
1 parent 2cff22b
commit 7caf0cb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 52 deletions.
diff --git a/.changeset/moody-beers-turn.md b/.changeset/moody-beers-turn.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+filter cosmos wallets for is available items
diff --git a/packages/widget/src/components/RenderWalletList.tsx b/packages/widget/src/components/RenderWalletList.tsx
@@ -61,6 +61,14 @@ export const RenderWalletList = ({
   const theme = useTheme();
   const setChainAddresses = useSetAtom(chainAddressesAtom);
 
+  const displayWallets = useMemo(() => {
+    const filteredWallets = walletList.filter(
+      (wallet) => isMinimalWallet(wallet) && wallet?.isAvailable !== false
+    );
+
+    return filteredWallets.length === 1 ? walletList : filteredWallets;
+  }, [walletList]);
+
   const clearAssetInputAmounts = useSetAtom(clearAssetInputAmountsAtom);
 
   const connectMutation = useMutation({
@@ -106,77 +114,61 @@ export const RenderWalletList = ({
 
   const renderItem = useCallback(
     (wallet: ManualWalletEntry | MinimalWallet) => {
-      const name = isMinimalWallet(wallet) ? wallet.walletPrettyName ?? wallet.walletName : wallet.walletName;
-      const imageUrl = isMinimalWallet(wallet) ? wallet.walletInfo.logo : undefined;
-      const rightContent = isManualWalletEntry(wallet) ? wallet.rightContent : undefined;
-      const isAvailable = isMinimalWallet(wallet) ? wallet.isAvailable : undefined;
+      const name = isMinimalWallet(wallet)
+        ? wallet.walletPrettyName ?? wallet.walletName
+        : wallet.walletName;
+
+      const imageUrl = isMinimalWallet(wallet) ? wallet?.walletInfo?.logo : undefined;
+      const rightContent = isManualWalletEntry(wallet) ? wallet?.rightContent : undefined;
+      const isAvailable = isMinimalWallet(wallet) ? wallet?.isAvailable : undefined;
+
+      const renderedRightContent = rightContent?.() ?? <></>;
+
+      const imageElement = (
+        <img
+          height={35}
+          width={35}
+          style={{ objectFit: "cover" }}
+          src={imageUrl}
+          alt={`${name}-logo`}
+        />
+      )
 
       const onClickConnectWallet = () => {
         if (isMinimalWallet(wallet)) {
           connectMutation.mutate(wallet);
         } else {
           wallet.onSelect();
-        };
+        }
       };
 
-      if (wallet.walletName === "prax") {
-        return (
-          <ModalRowItem
-            key={name}
-            onClick={onClickConnectWallet}
-            style={{ marginTop: ITEM_GAP }}
-            leftContent={
-              <Row align="center" gap={10}>
-                {imageUrl && (
-                  <img
-                    height={35}
-                    width={35}
-                    style={{ objectFit: "cover" }}
-                    src={imageUrl}
-                    alt={`${name} logo`}
-                  />
-                )}
-
-                <Text>{name}</Text>
-              </Row>
-            }
-            rightContent={rightContent?.()}
-          />
-        );
-      }
+      const leftContent = (
+        <Row style={{ width: "100%" }} align="center" justify="space-between">
+          <Row align="center" gap={10}>
+            {imageElement}
+            <Text>{name}</Text>
+          </Row>
+          {isAvailable !== undefined && <SmallText>{isAvailable ? "Installed" : "Not Installed"}</SmallText>}
+        </Row>
+      );
 
       return (
         <ModalRowItem
           key={name}
           onClick={onClickConnectWallet}
           style={{ marginTop: ITEM_GAP }}
-          leftContent={
-            <Row style={{ width: "100%" }} align="center" justify="space-between">
-              <Row align="center" gap={10}>
-                {imageUrl && (
-                  <img
-                    height={35}
-                    width={35}
-                    style={{ objectFit: "cover" }}
-                    src={imageUrl}
-                    alt={`${name} logo`}
-                  />
-                )}
-                <Text>{name}</Text>
-              </Row>
-              {isAvailable !== undefined && <SmallText>{isAvailable ? "Installed" : "Not Installed"}</SmallText>}
-            </Row>
-          }
-          rightContent={rightContent?.()}
+          leftContent={leftContent}
+          rightContent={renderedRightContent}
         />
       );
     },
     [connectMutation]
   );
 
   const height = useMemo(() => {
-    return Math.min(530, walletList.length * (ITEM_HEIGHT + ITEM_GAP));
-  }, [walletList]);
+    return Math.min(530, displayWallets.length * (ITEM_HEIGHT + ITEM_GAP));
+  }, [walletList, displayWallets.length]);
+
 
   const renderWalletListOrWalletConnectionStatus = useMemo(() => {
     if (connectMutation.isError || connectMutation.isPending) {
@@ -219,7 +211,7 @@ export const RenderWalletList = ({
     return (
       <VirtualList
         height={height}
-        listItems={walletList}
+        listItems={displayWallets}
         itemHeight={ITEM_HEIGHT + ITEM_GAP}
         renderItem={renderItem}
         itemKey={(item) => item.walletName}
@@ -238,7 +230,6 @@ export const RenderWalletList = ({
     renderItem,
     theme.primary.text.lowContrast,
     theme.primary.text.normal,
-    walletList,
   ]);
 
   return (