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]

README.md

@@ -6,11 +6,11 @@ This is a [NextJS](https://nextjs.org/) + TypeScript + React app.
 
 ## Guide
 
-Check out [this Neynar docs page](https://docs.neynar.com/docs/create-v2-farcaster-frame-in-60s) for a simple guide on how to create a Farcaster Mini App in less than 60 seconds!
+Check out [this Neynar docs page](https://docs.neynar.com/docs/create-farcaster-miniapp-in-60s) for a simple guide on how to create a Farcaster Mini App in less than 60 seconds!
 
 ## Getting Started
 
-To create a new frames project, run:
+To create a new mini app project, run:
 ```{bash}
 npx @neynar/create-farcaster-mini-app@latest
 ```
@@ -41,3 +41,39 @@ npm run build
 ```
 
 The above command will generate a `.env` file based on the `.env.local` file and user input. Be sure to configure those environment variables on your hosting platform.
+
+## Developing Script Locally
+
+This section is only for working on the script and template. If you simply want to create a mini app and _use_ the template, this section is not for you.
+
+### Recommended: Using `npm link` for Local Development
+
+To iterate on the CLI and test changes in a generated app without publishing to npm:
+
+1. In your installer/template repo (this repo), run:
+   ```bash
+   npm link
+   ```
+   This makes your local version globally available as a symlinked package.
+
+
+1. Now, when you run:
+   ```bash
+   npx @neynar/create-farcaster-mini-app
+   ```
+   ...it will use your local changes (including any edits to `init.js` or other files) instead of the published npm version.
+
+### Alternative: Running the Script Directly
+
+You can also run the script directly for quick iteration:
+
+```bash
+node ./bin/index.js
+```
+
+However, this does not fully replicate the npx install flow and may not catch all issues that would occur in a real user environment.
+
+### Environment Variables and Scripts
+
+If you update environment variable handling, remember to replicate any changes in the `dev`, `build`, and `deploy` scripts as needed. The `build` and `deploy` scripts may need further updates and are less critical for most development workflows.
+

bin/init.js

@@ -328,7 +328,9 @@ export async function init() {
     "@farcaster/frame-node": ">=0.0.18 <1.0.0",
     "@farcaster/frame-sdk": ">=0.0.31 <1.0.0",
     "@farcaster/frame-wagmi-connector": ">=0.0.19 <1.0.0",
+    "@farcaster/mini-app-solana": "^0.0.5",
     "@radix-ui/react-label": "^2.1.1",
+    "@solana/wallet-adapter-react": "^0.15.38",
     "@tanstack/react-query": "^5.61.0",
     "@upstash/redis": "^1.34.3",
     "class-variance-authority": "^0.7.1",

src/app/providers.tsx

@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import type { Session } from "next-auth"
 import { SessionProvider } from "next-auth/react"
 import { FrameProvider } from "~/components/providers/FrameProvider";
+import { SafeFarcasterSolanaProvider } from "~/components/providers/SafeFarcasterSolanaProvider";
 
 const WagmiProvider = dynamic(
   () => import("~/components/providers/WagmiProvider"),
@@ -13,11 +14,14 @@ const WagmiProvider = dynamic(
 );
 
 export function Providers({ session, children }: { session: Session | null, children: React.ReactNode }) {
+  const solanaEndpoint = process.env.SOLANA_RPC_ENDPOINT || "https://solana-rpc.publicnode.com";
   return (
     <SessionProvider session={session}>
       <WagmiProvider>
         <FrameProvider>
-          {children}
+          <SafeFarcasterSolanaProvider endpoint={solanaEndpoint}>
+            {children}
+          </SafeFarcasterSolanaProvider>
         </FrameProvider>
       </WagmiProvider>
     </SessionProvider>

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