chore: filter based on the token network support

reown-com · Jan 15, 2025 · ab2ee0f · ab2ee0f
1 parent 5c35c54
commit ab2ee0f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/...nced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/ChooseNetworkView.tsx b/...nced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/ChooseNetworkView.tsx
@@ -10,8 +10,9 @@ import {
   GiftDonutModalViewProps,
 } from "@/controllers/GiftDonutModalManager";
 import { Button } from "../ui/button";
-import { useAppKitAccount, useAppKitNetwork } from "@reown/appkit/react";
+import { useAppKitNetwork } from "@reown/appkit/react";
 import { toast } from "sonner";
+import { getSupportedNetworks } from "@/consts/tokens";
 
 function ChooseNetworkView({ onViewChange, onClose }: GiftDonutModalViewProps) {
   return (
@@ -38,32 +39,39 @@ function ChooseNetworkView({ onViewChange, onClose }: GiftDonutModalViewProps) {
 
 function NetworkList({ className }: React.ComponentProps<"form">) {
   const selectedNetwork = giftDonutModalManager.getNetwork();
+  const selectedToken = giftDonutModalManager.getToken();
+  const tokenSupportedNetworks = getSupportedNetworks(selectedToken.name);
+
   const { switchNetwork, caipNetwork } = useAppKitNetwork();
   const [network, setNetwork] = React.useState<Network | undefined>(
-    selectedNetwork,
+    selectedNetwork
   );
 
   const setSelectedNetwork = (network: Network) => {
     setNetwork(network);
     giftDonutModalManager.setNetwork(network);
-    if(caipNetwork?.id !== network.chainId){
+    if (caipNetwork?.id !== network.chainId) {
       switchNetwork(network.chain);
-      toast.info("Switching Network from " + caipNetwork?.name + " to " + network.name,)
+      toast.info(
+        "Switching Network from " + caipNetwork?.name + " to " + network.name
+      );
     }
   };
 
   return (
     <div className={cn("flex flex-col items-start gap-4", className)}>
-      {supportedNetworks.map((networkItem, index) => (
-        <div key={index} className="flex items-center flex-col gap-4 w-full">
-          <NetworkItem
-            network={networkItem}
-            selected={network?.chainId === networkItem.chainId}
-            onClick={() => setSelectedNetwork(networkItem)}
-          />
-          {supportedNetworks.length - 1 !== index && <Separator />}
-        </div>
-      ))}
+      {supportedNetworks
+        .filter((network) => tokenSupportedNetworks.includes(network.chainId))
+        .map((networkItem, index) => (
+          <div key={index} className="flex items-center flex-col gap-4 w-full">
+            <NetworkItem
+              network={networkItem}
+              selected={network?.chainId === networkItem.chainId}
+              onClick={() => setSelectedNetwork(networkItem)}
+            />
+            {supportedNetworks.length - 1 !== index && <Separator />}
+          </div>
+        ))}
     </div>
   );
 }

diff --git a/advanced/dapps/chain-abstraction-demo/consts/tokens.ts b/advanced/dapps/chain-abstraction-demo/consts/tokens.ts
@@ -15,3 +15,12 @@ export const tokenAddresses: Record<string, Record<string, Hex>> = {
   USDC: usdcTokenAddresses,
   USDT: usdtTokenAddresses
 };
+
+export const getSupportedNetworks = (token: string): number[] => {
+  const tokenNetworks = tokenAddresses[token];
+  if (!tokenNetworks) {
+    throw new Error(`Token ${token} not found`);
+  }
+
+  return Object.keys(tokenNetworks).map(Number);
+};