hide swap button for token if it can't be swapped (#3657)

if there are no Jupiter routes for the token, or if there is a zero balance of the token, then hide the swap button on the token info page

packages/app-extension/src/components/Unlocked/Balances/TransferWidget.tsx

@@ -6,7 +6,11 @@ import {
   STRIPE_ENABLED,
 } from "@coral-xyz/common";
 import { Dollar } from "@coral-xyz/react-common";
-import { SwapProvider, useFeatureGates } from "@coral-xyz/recoil";
+import {
+  SwapProvider,
+  useFeatureGates,
+  useSwapContext,
+} from "@coral-xyz/recoil";
 import { useCustomTheme } from "@coral-xyz/themes";
 import { ArrowDownward, ArrowUpward, SwapHoriz } from "@mui/icons-material";
 import { Typography } from "@mui/material";
@@ -18,7 +22,6 @@ import { Swap, SwapSelectToken } from "../../Unlocked/Swap";
 
 import {
   AddressSelectorLoader,
-  NftAddressSelector,
   TokenAddressSelector,
 } from "./TokensWidget/AddressSelector";
 import { Deposit } from "./TokensWidget/Deposit";
@@ -101,27 +104,39 @@ function SwapButton({
     />
   );
 
-  // Wrap in Suspense so it doesn't block if Jupiter is slow or down.
+  const SwapButtonIfTheTokenIsSwappable = () => {
+    // This component loads inside Suspense, so it should not block
+    // rendering as we wait for Jupiter Routes to be downloaded and parsed
+    const { canSwap } = useSwapContext();
+    return canSwap ? (
+      <SwapButtonComponent
+        routes={[
+          {
+            name: "swap",
+            component: (props: any) => <Swap {...props} />,
+            title: `Swap`,
+            props: {
+              blockchain,
+            },
+          },
+          {
+            title: `Select Token`,
+            name: "select-token",
+            component: (props: any) => <SwapSelectToken {...props} />,
+          },
+        ]}
+      />
+    ) : // There are no Jupiter Routes for this token, so hide the button
+    null;
+  };
+
+  // This displays a semi-transparent Swap button while Jupiter routes are
+  // first downloaded and parsed. After that it will either make the button
+  // fully opaque and clickable or hide it if the token isn't supported
   return (
     <React.Suspense fallback={<SwapButtonComponent />}>
       <SwapProvider tokenAddress={address}>
-        <SwapButtonComponent
-          routes={[
-            {
-              name: "swap",
-              component: (props: any) => <Swap {...props} />,
-              title: `Swap`,
-              props: {
-                blockchain,
-              },
-            },
-            {
-              title: `Select Token`,
-              name: "select-token",
-              component: (props: any) => <SwapSelectToken {...props} />,
-            },
-          ]}
-        />
+        <SwapButtonIfTheTokenIsSwappable />
       </SwapProvider>
     </React.Suspense>
   );

packages/recoil/src/context/Swap.tsx

@@ -15,7 +15,7 @@ import { getAssociatedTokenAddress } from "@solana/spl-token";
 import type { TokenInfo } from "@solana/spl-token-registry";
 import { PublicKey, Transaction } from "@solana/web3.js";
 import * as bs58 from "bs58";
-import { BigNumber, ethers, FixedNumber } from "ethers";
+import { BigNumber, ethers,FixedNumber } from "ethers";
 
 import { blockchainTokenData } from "../atoms/balance";
 import { jupiterInputTokens } from "../atoms/solana/jupiter";
@@ -99,6 +99,7 @@ export type SwapContext = {
   isLoadingRoutes: boolean;
   isLoadingTransactions: boolean;
   isJupiterError: boolean;
+  canSwap: boolean;
 };
 
 const _SwapContext = React.createContext<SwapContext | null>(null);
@@ -568,6 +569,7 @@ export function SwapProvider({
         availableForSwap,
         exceedsBalance,
         feeExceedsBalance,
+        canSwap: !availableForSwap.isZero(),
       }}
     >
       {children}