Update

src/components/Swap.tsx

@@ -34,7 +34,11 @@ import {
   FEE_MULTIPLIER,
 } from "../context/Dex";
 import { useTokenMap } from "../context/TokenList";
-import { useMint, useOwnedTokenAccount } from "../context/Token";
+import {
+  useMint,
+  useOwnedTokenAccount,
+  useTokenContext,
+} from "../context/Token";
 import { useCanSwap, useReferral, useIsWrapSol } from "../context/Swap";
 import TokenDialog from "./TokenDialog";
 import { SettingsButton } from "./Settings";
@@ -335,7 +339,8 @@ export function SwapButton() {
     isClosingNewAccounts,
     isStrict,
   } = useSwapContext();
-  const { swapClient } = useDexContext();
+  const { swapClient, isLoaded: isDexLoaded } = useDexContext();
+  const { isLoaded: isTokensLoaded } = useTokenContext();
   const fromMintInfo = useMint(fromMint);
   const toMintInfo = useMint(toMint);
   const openOrders = useOpenOrders();
@@ -649,16 +654,32 @@ export function SwapButton() {
 
     await swapClient.program.provider.sendAll(txs);
   };
-  return disconnected ? (
-    <Button
-      variant="contained"
-      className={styles.swapButton}
-      onClick={sendCreateAccountsTransaction}
-      disabled={true}
-    >
-      Disconnected
-    </Button>
-  ) : needsCreateAccounts ? (
+
+  if (disconnected) {
+    return (
+      <Button
+        variant="contained"
+        className={styles.swapButton}
+        onClick={sendCreateAccountsTransaction}
+        disabled={true}
+      >
+        Disconnected
+      </Button>
+    );
+  }
+  if (!isDexLoaded || !isTokensLoaded) {
+    return (
+      <Button
+        variant="contained"
+        className={styles.swapButton}
+        onClick={sendSwapTransaction}
+        disabled={true}
+      >
+        Swap
+      </Button>
+    );
+  }
+  return needsCreateAccounts ? (
     <Button
       variant="contained"
       className={styles.swapButton}

src/context/Dex.tsx

@@ -36,6 +36,7 @@ type DexContext = {
   openOrders: Map<string, Array<OpenOrders>>;
   closeOpenOrders: (openOrder: OpenOrders) => void;
   swapClient: SwapClient;
+  isLoaded: boolean;
 };
 const _DexContext = React.createContext<DexContext | null>(null);
 
@@ -43,6 +44,7 @@ export function DexContextProvider(props: any) {
   const [ooAccounts, setOoAccounts] = useState<Map<string, Array<OpenOrders>>>(
     new Map()
   );
+  const [isLoaded, setIsLoaded] = useState(false);
   const swapClient = props.swapClient;
 
   // Removes the given open orders from the context.
@@ -154,6 +156,8 @@ export function DexContextProvider(props: any) {
           new Promise<Market>((resolve) => resolve(m.account))
         );
       });
+
+      setIsLoaded(true);
     });
   }, [
     swapClient.program.provider.connection,
@@ -166,6 +170,7 @@ export function DexContextProvider(props: any) {
         openOrders: ooAccounts,
         closeOpenOrders,
         swapClient,
+        isLoaded,
       }}
     >
       {props.children}

src/context/Token.tsx

@@ -14,12 +14,14 @@ import { SOL_MINT } from "../utils/pubkeys";
 
 export type TokenContext = {
   provider: Provider;
+  isLoaded: boolean;
 };
 const _TokenContext = React.createContext<TokenContext | null>(null);
 
 export function TokenContextProvider(props: any) {
   const provider = props.provider;
   const [, setRefresh] = useState(0);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   // Fetch all the owned token accounts for the wallet.
   useEffect(() => {
@@ -35,6 +37,8 @@ export function TokenContextProvider(props: any) {
           _OWNED_TOKEN_ACCOUNTS_CACHE.push(...accs);
           setRefresh((r) => r + 1);
         }
+        console.log("setting is loaded");
+        setIsLoaded(true);
       }
     );
     // Fetch SOL balance.
@@ -59,6 +63,7 @@ export function TokenContextProvider(props: any) {
     <_TokenContext.Provider
       value={{
         provider,
+        isLoaded,
       }}
     >
       {props.children}
@@ -66,7 +71,7 @@ export function TokenContextProvider(props: any) {
   );
 }
 
-function useTokenContext() {
+export function useTokenContext() {
   const ctx = useContext(_TokenContext);
   if (ctx === null) {
     throw new Error("Context not available");