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

src/components/Demo.tsx

@@ -17,6 +17,11 @@ import {
   useSwitchChain,
   useChainId,
 } from "wagmi";
+import {
+  useConnection as useSolanaConnection,
+  useWallet as useSolanaWallet,
+} from '@solana/wallet-adapter-react';
+import { useHasSolanaProvider } from "./providers/SafeFarcasterSolanaProvider";
 
 import { config } from "~/components/providers/WagmiProvider";
 import { Button } from "~/components/ui/Button";
@@ -38,6 +43,13 @@ export default function Demo(
 
   const { address, isConnected } = useAccount();
   const chainId = useChainId();
+  const hasSolanaProvider = useHasSolanaProvider();
+  let solanaWallet, solanaPublicKey, solanaSignMessage, solanaAddress;
+  if (hasSolanaProvider) {
+    solanaWallet = useSolanaWallet();
+    ({ publicKey: solanaPublicKey, signMessage: solanaSignMessage } = solanaWallet);
+    solanaAddress = solanaPublicKey?.toBase58();
+  }
 
   useEffect(() => {
     console.log("isSDKLoaded", isSDKLoaded);
@@ -413,11 +425,65 @@ export default function Demo(
             </>
           )}
         </div>
+
+        {solanaAddress && (
+          <div>
+            <h2 className="font-2xl font-bold">Solana</h2>
+            <div className="my-2 text-xs">
+              Address: <pre className="inline">{truncateAddress(solanaAddress)}</pre>
+            </div>
+            <SignSolanaMessage signMessage={solanaSignMessage} />
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
+function SignSolanaMessage({ signMessage }: { signMessage?: (message: Uint8Array) => Promise<Uint8Array> }) {
+  const [signature, setSignature] = useState<string | undefined>();
+  const [signError, setSignError] = useState<Error | undefined>();
+  const [signPending, setSignPending] = useState(false);
+
+  const handleSignMessage = useCallback(async () => {
+    setSignPending(true);
+    try {
+      if (!signMessage) {
+        throw new Error('no Solana signMessage');
+      }
+      const input = Buffer.from("Hello from Solana!", "utf8");
+      const signatureBytes = await signMessage(input);
+      const signature = Buffer.from(signatureBytes).toString("base64");
+      setSignature(signature);
+      setSignError(undefined);
+    } catch (e) {
+      if (e instanceof Error) {
+        setSignError(e);
+      }
+    } finally {
+      setSignPending(false);
+    }
+  }, [signMessage]);
+
+  return (
+    <>
+      <Button
+        onClick={handleSignMessage}
+        disabled={signPending}
+        isLoading={signPending}
+      >
+        Sign Message
+      </Button>
+      {signError && renderError(signError)}
+      {signature && (
+        <div className="mt-2 text-xs">
+          <div>Signature: {signature}</div>
+        </div>
+      )}
+    </>
+  );
+}
+
 function SignMessage() {
   const { isConnected } = useAccount();
   const { connectAsync } = useConnect();

src/components/SolanaWalletDemo.tsx

@@ -1,16 +0,0 @@
-import * as React from "react";
-import { useWallet } from "@solana/wallet-adapter-react";
-
-export function SolanaWalletDemo() {
-  const { publicKey } = useWallet();
-  const solanaAddress = publicKey?.toBase58() ?? "";
-  return (
-    <div style={{ padding: 16, background: "#f6f6f6", borderRadius: 8, margin: 16 }}>
-      <h3>Solana Wallet Demo</h3>
-      <div>
-        <strong>Solana Address:</strong>
-        <span style={{ marginLeft: 8 }}>{solanaAddress || "Not connected"}</span>
-      </div>
-    </div>
-  );
-}

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;
+}