poc: minikit

package.json

@@ -35,6 +35,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
+    "@farcaster/frame-sdk": "^0.0.26",
+    "@farcaster/frame-wagmi-connector": "^0.0.14",
     "@tanstack/react-query": "^5",
     "clsx": "^2.1.1",
     "graphql": "^14 || ^15 || ^16",

playground/nextjs-app-router/app/api/notify/route.ts

@@ -0,0 +1,36 @@
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    console.log('Received request body:', body); // Debug log
+
+    const { url, token, notification } = body;
+
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { 
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${token}`
+      },
+      body: JSON.stringify(notification)
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error('Warpcast API error:', errorData);
+      return new Response(JSON.stringify(errorData), { 
+        status: response.status,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    }
+
+    return new Response('OK', { status: 200 });
+  } catch (error) {
+    console.error('Server error:', error);
+    return new Response(JSON.stringify({ 
+      error: error instanceof Error ? error.message : 'Unknown error'
+    }), { 
+      status: 400,
+      headers: { 'Content-Type': 'application/json' }
+    });
+  }
+} 

playground/nextjs-app-router/app/minikit/app.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import SwapDemo from "@/components/demo/Swap";
+import WalletDemo from "@/components/demo/Wallet";
+import { useAddFrame, useAuthenticate, useMiniKit, useNotification, useOpenUrl, usePrimaryButton, useViewProfile } from "@coinbase/onchainkit";
+import { useCallback, useEffect } from "react";
+import { BaseError, useAccount, useSignTypedData } from "wagmi";
+import { base } from "wagmi/chains";
+import { UserRejectedRequestError } from "viem";
+
+export default function App() {
+  const { ready, isReady, context } = useMiniKit();
+  const { address } = useAccount();
+
+  const handleViewProfile = useViewProfile();
+  const addFrame = useAddFrame();
+  const openUrl = useOpenUrl();
+  const sendNotification = useNotification();
+
+  usePrimaryButton({
+    text: 'primary button',
+  }, () => {
+    console.log('primary button clicked');
+  });
+
+  useEffect(() => {
+    if (!isReady) {
+      window.setTimeout(() => {
+        ready();
+      }, 2000)
+    }
+  }, [ready, isReady]);
+
+  const {
+    signTypedData,
+    error: signTypedError,
+    isError: isSignTypedError,
+    isPending: isSignTypedPending,
+  } = useSignTypedData();
+
+  const signTyped = useCallback(() => {
+    signTypedData({
+      domain: {
+        name: "Minikit",
+        version: "1",
+        chainId: base.id,
+      },
+      types: {
+        Message: [{ name: "content", type: "string" }],
+      },
+      message: {
+        content: "Hello from Minikit!",
+      },
+      primaryType: "Message",
+    });
+  }, [signTypedData]);
+
+  const handleAddFrame = async () => {
+    const notificationDetails = await addFrame();
+    if (!notificationDetails) {
+      console.error('No notification details returned');
+      return;
+    }
+
+    sendNotification({
+      title: "Added Frame!",
+      body: "You've successfully added this frame",
+      targetUrl: "https://onchainkit.xyz",
+    });
+  };
+
+  return (
+    <div>
+      <WalletDemo />
+      <SwapDemo />
+
+      <div style={{display: 'flex', flexDirection: 'column', gap: '10px', width: '50%', margin: '0 auto'}}>
+        <Button 
+          onClick={() => openUrl('https://farcaster.xyz')}>
+          Open URL
+        </Button>
+        <Button
+          onClick={signTyped}
+          disabled={!address ||isSignTypedPending}
+        >
+          {isSignTypedPending ? 'Signing...' : 'Sign Typed Data'}
+        </Button>
+        {isSignTypedError && renderError(signTypedError)}
+        <Button 
+          disabled={!context?.user?.fid}
+          onClick={handleViewProfile}>
+          View Profile
+        </Button>
+        <Button 
+          onClick={handleAddFrame}>
+          Add Frame with Notification
+        </Button>
+        <SignIn />
+      </div>
+    </div>
+  );
+}
+
+const renderError = (error: Error | null) => {
+  if (!error) {
+    return null;
+  }
+
+  if (error instanceof BaseError) {
+    const isUserRejection = error.walk(
+      (e) => e instanceof UserRejectedRequestError
+    );
+
+    if (isUserRejection) {
+      return <div style={{color: 'red', fontSize: '12px', marginTop: '10px'}}>Rejected by user.</div>;
+    }
+  }
+
+  return <div style={{color: 'red', fontSize: '12px', marginTop: '10px'}}>{error.message}</div>;
+};
+
+
+function SignIn() {
+  const { login, logout, authenticated, isLoading } = useAuthenticate();
+
+  return (
+    <>
+      {authenticated 
+        ? (
+          <Button
+            onClick={logout}
+            disabled={isLoading}
+          >
+            Sign out
+          </Button>
+      ) : (
+          <Button
+            onClick={login}
+            disabled={isLoading}
+          >
+            Sign In with Farcaster
+          </Button>
+        )}
+    </>
+  );
+}
+
+function Button({children, ...props}: React.ButtonHTMLAttributes<HTMLButtonElement> & {children: React.ReactNode}) {
+  return <button 
+    type="button" 
+    style={{backgroundColor: 'blue', color: 'white', padding: '10px 20px', borderRadius: '5px'}}
+    {...props}
+  >
+    {children}
+  </button>
+}

playground/nextjs-app-router/app/minikit/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from 'next';
+import '../globals.css';
+import '@coinbase/onchainkit/styles.css';
+import Providers from './providers';
+
+const appUrl = 'https://80b6-2600-1f18-24c9-6105-5-0-4-706.ngrok-free.app/minikit';
+
+export const metadata: Metadata = {
+  title: 'MiniKit',
+};
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+    <head>
+      <meta name="fc:frame" content={JSON.stringify({
+        version: "next",
+        imageUrl: `${appUrl}/opengraph-image`,
+        button: {
+          title: "Launch Minikit",
+          action: {
+            type: "launch_frame",
+            name: "MiniKit",
+            url: appUrl,
+            splashImageUrl: "https://onchainkit.xyz/favicon/48x48.png?v4-19-24",
+            splashBackgroundColor: "#000000",
+          },
+        },
+      })} />
+    </head>
+    <body>
+      <Providers>{children}</Providers>
+    </body>
+  </html>
+  );
+}

playground/nextjs-app-router/app/minikit/page.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import Layout from './layout';
+import App from './app';
+
+export function getLayout(page: ReactNode) {
+  return <Layout>{page}</Layout>;
+}
+
+export default function MiniKit() {
+  return <App />;
+}

playground/nextjs-app-router/app/minikit/providers.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
+import { MiniKitProvider, OnchainKitProvider } from '@coinbase/onchainkit';
+import type { ReactNode } from 'react';
+import { base } from 'wagmi/chains';
+
+function Providers({ children }: { children: ReactNode }) {
+  return (
+    <MiniKitProvider>
+      <OnchainKitProvider
+        apiKey={ENVIRONMENT_VARIABLES[ENVIRONMENT.API_KEY]}
+        chain={base}
+        config={{
+          appearance: {
+            mode: 'light',
+            theme: 'default',
+          },
+        }}
+        projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}
+        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+      >
+        {children}
+      </OnchainKitProvider>
+    </MiniKitProvider>
+  );
+}
+
+export default Providers;

playground/nextjs-app-router/onchainkit/package.json

@@ -35,6 +35,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
+    "@farcaster/frame-sdk": "^0.0.26",
+    "@farcaster/frame-wagmi-connector": "^0.0.14",
     "@tanstack/react-query": "^5",
     "clsx": "^2.1.1",
     "graphql": "^14 || ^15 || ^16",
@@ -63,8 +65,8 @@
     "@types/qrcode": "^1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/ui": "^3.0.5",
     "autoprefixer": "^10.4.19",
     "babel-plugin-module-resolver": "^5.0.2",
     "concurrently": "^8.0.0",
@@ -81,7 +83,7 @@
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",
     "vite": "^5.3.3",
-    "vitest": "^2.0.5"
+    "vitest": "^3.0.5"
   },
   "resolutions": {
     "react": "npm:react@^18"

playground/nextjs-app-router/public/.well-known/farcaster.json

@@ -0,0 +1,15 @@
+{
+  "accountAssociation": {
+    "header": "eyJmaWQiOjgxODAyNiwidHlwZSI6ImN1c3RvZHkiLCJrZXkiOiIweDU4YjU1MTNjMzk5OTYzMjU0MjMzMmU0ZTJlRDAyOThFQzFmRjE4MzEifQ",
+    "payload": "eyJkb21haW4iOiI4MGI2LTI2MDAtMWYxOC0yNGM5LTYxMDUtNS0wLTQtNzA2Lm5ncm9rLWZyZWUuYXBwIn0",
+    "signature": "MHhmOGQ1YzQyMmU3ZTZlMWNhMzU1ZmNmN2ZjYzFmYjMyZWRhZmEyNWU1NjJiMzlhYzE4OWNlMmM5ODU3Y2JjZWViNzlkZTk2ZjhiNTc5NzZjMDM2NzM4Y2UwYjhhOGQxZmMyZDFhYzA2NTdiZTU5N2VhZjFhZDE1ODBmMGQyYjJhODFi"
+  },
+  "frame": {
+    "version": "0.0.0",
+    "name": "MiniKit",
+    "iconUrl": "https://onchainkit.xyz/favicon/48x48.png?v4-19-24",
+    "splashImageUrl": "https://onchainkit.xyz/favicon/48x48.png?v4-19-24",
+    "splashBackgroundColor": "#000000",
+    "homeUrl": "https://80b6-2600-1f18-24c9-6105-5-0-4-706.ngrok-free.app/minikit"
+  }
+}