feat: add guards for when provider is not valid or present

src/components/providers/SafeFarcasterSolanaProvider.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import dynamic from "next/dynamic";
+import { sdk } from '@farcaster/frame-sdk';
+
+const FarcasterSolanaProvider = dynamic(
+  () => import('@farcaster/mini-app-solana').then(mod => mod.FarcasterSolanaProvider),
+  { ssr: false }
+);
+
+type SafeFarcasterSolanaProviderProps = {
+  endpoint: string;
+  children: React.ReactNode;
+};
+
+const SolanaProviderContext = React.createContext<{ hasSolanaProvider: boolean }>({ hasSolanaProvider: false });
+
+export function SafeFarcasterSolanaProvider({ endpoint, children }: SafeFarcasterSolanaProviderProps) {
+  const isClient = typeof window !== "undefined";
+  const [hasSolanaProvider, setHasSolanaProvider] = React.useState<boolean>(false);
+  const [checked, setChecked] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    if (!isClient) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const provider = await sdk.wallet.getSolanaProvider();
+        if (!cancelled) {
+          setHasSolanaProvider(!!provider);
+        }
+      } catch {
+        if (!cancelled) {
+          setHasSolanaProvider(false);
+        }
+      } finally {
+        if (!cancelled) {
+          setChecked(true);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [isClient]);
+
+  React.useEffect(() => {
+    let errorShown = false;
+    const origError = console.error;
+    console.error = (...args) => {
+      if (
+        typeof args[0] === "string" &&
+        args[0].includes("WalletConnectionError: could not get Solana provider")
+      ) {
+        if (!errorShown) {
+          origError(...args);
+          errorShown = true;
+        }
+        return;
+      }
+      origError(...args);
+    };
+    return () => {
+      console.error = origError;
+    };
+  }, []);
+
+  if (!isClient || !checked) {
+    return null;
+  }
+
+  return (
+    <SolanaProviderContext.Provider value={{ hasSolanaProvider }}>
+      {hasSolanaProvider ? (
+        <FarcasterSolanaProvider endpoint={endpoint}>
+          {children}
+        </FarcasterSolanaProvider>
+      ) : (
+        <>{children}</>
+      )}
+    </SolanaProviderContext.Provider>
+  );
+}
+
+export function useHasSolanaProvider() {
+  return React.useContext(SolanaProviderContext).hasSolanaProvider;
+}