Merge pull request #5 from neynarxyz/arthur/neyn-5412-add-solana-support-to-mini-app-template

feat: add solana support to mini app template [NEYN-5412]

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";
@@ -26,6 +31,7 @@ import { BaseError, UserRejectedRequestError } from "viem";
 import { useSession } from "next-auth/react";
 import { Label } from "~/components/ui/label";
 import { useFrame } from "~/components/providers/FrameProvider";
+import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js';
 
 export default function Demo(
   { title }: { title?: string } = { title: "Frames v2 Demo" }
@@ -38,6 +44,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);
@@ -359,7 +372,7 @@ export default function Demo(
           </div>
 
           <div className="mb-4">
-            <SignMessage />
+            <SignEvmMessage />
           </div>
 
           {isConnected && (
@@ -413,12 +426,150 @@ 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 className="mb-4">
+              <SendSolana />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
-function SignMessage() {
+// Solana functions inspired by farcaster demo
+// https://github.com/farcasterxyz/frames-v2-demo/blob/main/src/components/Demo.tsx
+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 = new TextEncoder().encode("Hello from Solana!");
+      const signatureBytes = await signMessage(input);
+      const signature = btoa(String.fromCharCode(...signatureBytes));
+      setSignature(signature);
+      setSignError(undefined);
+    } catch (e) {
+      if (e instanceof Error) {
+        setSignError(e);
+      }
+    } finally {
+      setSignPending(false);
+    }
+  }, [signMessage]);
+
+  return (
+    <>
+      <Button
+        onClick={handleSignMessage}
+        disabled={signPending}
+        isLoading={signPending}
+        className="mb-4"
+      >
+        Sign Message
+      </Button>
+      {signError && renderError(signError)}
+      {signature && (
+        <div className="mt-2 text-xs">
+          <div>Signature: {signature}</div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function SendSolana() {
+  const [state, setState] = useState<
+    | { status: 'none' }
+    | { status: 'pending' }
+    | { status: 'error'; error: Error }
+    | { status: 'success'; signature: string }
+  >({ status: 'none' });
+
+  const { connection: solanaConnection } = useSolanaConnection();
+  const { sendTransaction, publicKey } = useSolanaWallet();
+
+  // This should be replaced but including it from the original demo
+  // https://github.com/farcasterxyz/frames-v2-demo/blob/main/src/components/Demo.tsx#L718
+  const ashoatsPhantomSolanaWallet = 'Ao3gLNZAsbrmnusWVqQCPMrcqNi6jdYgu8T6NCoXXQu1';
+
+  const handleSend = useCallback(async () => {
+    setState({ status: 'pending' });
+    try {
+      if (!publicKey) {
+        throw new Error('no Solana publicKey');
+      }
+
+      const { blockhash } = await solanaConnection.getLatestBlockhash();
+      if (!blockhash) {
+        throw new Error('failed to fetch latest Solana blockhash');
+      }
+
+      const fromPubkeyStr = publicKey.toBase58();
+      const toPubkeyStr = ashoatsPhantomSolanaWallet;
+      const transaction = new Transaction();
+      transaction.add(
+        SystemProgram.transfer({
+          fromPubkey: new PublicKey(fromPubkeyStr),
+          toPubkey: new PublicKey(toPubkeyStr),
+          lamports: 0n,
+        }),
+      );
+      transaction.recentBlockhash = blockhash;
+      transaction.feePayer = new PublicKey(fromPubkeyStr);
+
+      const simulation = await solanaConnection.simulateTransaction(transaction);
+      if (simulation.value.err) {
+        // Gather logs and error details for debugging
+        const logs = simulation.value.logs?.join('\n') ?? 'No logs';
+        const errDetail = JSON.stringify(simulation.value.err);
+        throw new Error(`Simulation failed: ${errDetail}\nLogs:\n${logs}`);
+      }
+      const signature = await sendTransaction(transaction, solanaConnection);
+      setState({ status: 'success', signature });
+    } catch (e) {
+      if (e instanceof Error) {
+        setState({ status: 'error', error: e });
+      } else {
+        setState({ status: 'none' });
+      }
+    }
+  }, [sendTransaction, publicKey, solanaConnection]);
+
+  return (
+    <>
+      <Button
+        onClick={handleSend}
+        disabled={state.status === 'pending'}
+        isLoading={state.status === 'pending'}
+        className="mb-4"
+      >
+        Send Transaction (sol)
+      </Button>
+      {state.status === 'error' && renderError(state.error)}
+      {state.status === 'success' && (
+        <div className="mt-2 text-xs">
+          <div>Hash: {truncateAddress(state.signature)}</div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function SignEvmMessage() {
   const { isConnected } = useAccount();
   const { connectAsync } = useConnect();
   const {

src/components/providers/SafeFarcasterSolanaProvider.tsx

@@ -0,0 +1,86 @@
+import React, { createContext, useEffect, useState } 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 = createContext<{ hasSolanaProvider: boolean }>({ hasSolanaProvider: false });
+
+export function SafeFarcasterSolanaProvider({ endpoint, children }: SafeFarcasterSolanaProviderProps) {
+  const isClient = typeof window !== "undefined";
+  const [hasSolanaProvider, setHasSolanaProvider] = useState<boolean>(false);
+  const [checked, setChecked] = useState<boolean>(false);
+
+  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]);
+
+  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;
+}