Fix Network dropdown

components/FundForm/FundForm.tsx

@@ -47,6 +47,7 @@ export const FundForm = memo(({ walletAddress }: FundFormProps) => {
     purchaseCurrencies,
     dataLoading,
     setAppLoading,
+    allNetworks,
   } = useApp();
 
   const foregroundMuted = useThemeColor({}, "foregroundMuted");
@@ -70,7 +71,10 @@ export const FundForm = memo(({ walletAddress }: FundFormProps) => {
 
       handleFiatChange(fiatAmount, exchangeRate);
 
-      setNetwork(asset.networks[0]);
+      // Check if the asset is supported on the current network. If not, set the network to the first network that supports the asset
+      if (!asset.networks.some((n) => n.name === network?.name)) {
+        setNetwork(asset.networks[0]);
+      }
 
       setExchangeRate(exchangeRate);
 

components/NetworkDropdown/NetworkDropdown.tsx

@@ -4,7 +4,7 @@ import { OnrampNetwork } from "@/constants/types";
 import { useApp } from "@/context/AppContext";
 import { fetchExchangeRate } from "@/utils/fetchExchangeRate";
 import { getNetworkIcon } from "@/utils/getNetworkIcon";
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 import { useAmountInput } from "../FundForm/hooks/useAmountInput";
 
 export const NetworkDropdown = memo(() => {
@@ -82,22 +82,26 @@ export const NetworkDropdown = memo(() => {
     ]
   );
 
+  const networkList = useMemo(() => {
+    return allNetworks
+      ?.filter((n) => asset?.networks.some((n) => n.name === n.name))
+      .map((network) => ({
+        id: network.chainId,
+        name: network.name,
+        label: network.displayName,
+        value: network,
+        iconUrl: getNetworkIcon(network.name),
+        Icon: getNetworkIconComponent(network.name),
+      }));
+  }, [allNetworks, asset]);
+
   return (
     <Dropdown
       title="Select network"
       value={network}
       onValueChange={handleChangeNetwork}
       isSelected={(option) => option.value === network}
-      options={
-        allNetworks?.map((network) => ({
-          id: network.chainId,
-          name: network.name,
-          label: network.displayName,
-          value: network,
-          iconUrl: getNetworkIcon(network.chainId),
-          Icon: getNetworkIconComponent(network.name),
-        })) ?? []
-      }
+      options={networkList ?? []}
     />
   );
 });