feat: initial commit

app/actions.json/route.ts

@@ -0,0 +1,26 @@
+import { ACTIONS_CORS_HEADERS, ActionsJson } from "@solana/actions";
+
+export const GET = async () => {
+  const payload: ActionsJson = {
+    rules: [
+      // map all root level routes to an action
+      {
+        pathPattern: "/*",
+        apiPath: "/api/actions/*",
+      },
+      // idempotent rule as the fallback
+      {
+        pathPattern: "/api/actions/**",
+        apiPath: "/api/actions/**",
+      },
+    ],
+  };
+
+  return Response.json(payload, {
+    headers: ACTIONS_CORS_HEADERS,
+  });
+};
+
+// DO NOT FORGET TO INCLUDE THE `OPTIONS` HTTP METHOD
+// THIS WILL ENSURE CORS WORKS FOR BLINKS
+export const OPTIONS = GET;

app/api/actions/donate/const.ts

@@ -0,0 +1,7 @@
+import { PublicKey } from "@solana/web3.js";
+
+export const DEFAULT_SOL_ADDRESS: PublicKey = new PublicKey(
+  "H5RrDozaPqXmyEfsLSAkMpSEjN6H7bTTxvvS2w6krxS", // devnet wallet
+);
+
+export const DEFAULT_SOL_AMOUNT: number = 1.0;

app/api/actions/donate/route.ts

@@ -0,0 +1,151 @@
+import { ACTIONS_CORS_HEADERS, ActionGetResponse, ActionPostRequest, ActionPostResponse, createPostResponse } from "@solana/actions"
+import { Connection, PublicKey, clusterApiUrl, Transaction, SystemProgram, LAMPORTS_PER_SOL } from "@solana/web3.js";
+
+import { DEFAULT_SOL_ADDRESS, DEFAULT_SOL_AMOUNT } from "./const";
+
+export const GET = (req: Request) => {
+    try {
+        const requestUrl = new URL(req.url);
+        const { toPubkey } = validatedQueryParams(requestUrl);
+
+        const baseHref = new URL(
+        `/api/actions/support?to=${toPubkey.toBase58()}`,
+        requestUrl.origin,
+        ).toString();
+
+        const payload: ActionGetResponse = {
+            icon: new URL("/support.svg", new URL(req.url ?? "").origin).toString(),
+            title: "Donate",
+            label: "Support",
+            description: "Support the creator",
+            links: {
+                actions: [
+                {
+                    label: "Send 1 SOL", // button text
+                    href: `${baseHref}&amount=${"1"}`,
+                },
+                {
+                    label: "Send 5 SOL", // button text
+                    href: `${baseHref}&amount=${"5"}`,
+                },
+                {
+                    label: "Send 10 SOL", // button text
+                    href: `${baseHref}&amount=${"10"}`,
+                },
+                {
+                    label: "Send SOL", // button text
+                    href: `${baseHref}&amount={amount}`, // this href will have a text input
+                    parameters: [
+                    {
+                        name: "amount", // parameter name in the `href` above
+                        label: "Enter the amount of SOL to send", // placeholder of the text input
+                        required: true,
+                    },
+                    ],
+                },
+                ],
+            },
+        } 
+        return Response.json({payload, headers: ACTIONS_CORS_HEADERS})
+    } catch (err) {
+        console.log(err);
+        let message = "An unknown error occurred";
+        if (typeof err == "string") message = err;
+        return new Response(message, {
+            status: 400,
+            headers: ACTIONS_CORS_HEADERS,
+        });
+    }
+} 
+
+export const OPTIONS = GET;
+
+export const POST = async (req: Request) => {
+
+    try {
+        const requestUrl = new URL(req.url);
+        const { amount, toPubkey } = validatedQueryParams(requestUrl);
+        const body: ActionPostRequest = await req.json();
+
+        let account: PublicKey;
+
+        try {
+            account = new PublicKey(body.account);
+        } catch(e) {
+            return new Response('Invalid "account" provided', {
+                status: 400,
+                headers: ACTIONS_CORS_HEADERS,
+              });
+        }
+
+        const connection = new Connection(clusterApiUrl('devnet'));
+
+        // ensure the receiving account will be rent exempt
+        const minimumBalance = await connection.getMinimumBalanceForRentExemption(
+            0, // note: simple accounts that just store native SOL have `0` bytes of data
+        );
+        if (amount * LAMPORTS_PER_SOL < minimumBalance) {
+            throw `account may not be rent exempt: ${toPubkey.toBase58()}`;
+        }
+
+        const transaction = new Transaction()
+
+        transaction.add(
+            SystemProgram.transfer({
+              fromPubkey: account,
+              toPubkey: toPubkey,
+              lamports: amount * LAMPORTS_PER_SOL,
+            }),
+          );
+
+        transaction.feePayer = account;
+
+        transaction.recentBlockhash = (await connection.getLatestBlockhash()).blockhash;
+
+        const payload: ActionPostResponse = await createPostResponse({
+            fields: {
+                transaction,
+                message: `Send ${amount} SOL to ${toPubkey.toBase58()}`,
+            }
+        });
+
+        return Response.json({payload, headers: ACTIONS_CORS_HEADERS}); // eslint-disable-line
+    } catch(e) {
+        console.log(e);
+        let message = "An unknown error occurred";
+        if (typeof e == "string") message = e;
+        return new Response(message, {
+          status: 400,
+          headers: ACTIONS_CORS_HEADERS,
+        });
+
+    }
+}
+
+function validatedQueryParams(requestUrl: URL): { amount: number; toPubkey: PublicKey } {
+    let toPubkey: PublicKey = DEFAULT_SOL_ADDRESS;
+    let amount: number = DEFAULT_SOL_AMOUNT;
+
+    try {
+      if (requestUrl.searchParams.get("to")) {
+        toPubkey = new PublicKey(requestUrl.searchParams.get("to")!);
+      }
+    } catch (err) {
+      throw "Invalid input query parameter: to";
+    }
+
+    try {
+      if (requestUrl.searchParams.get("amount")) {
+        amount = parseFloat(requestUrl.searchParams.get("amount")!);
+      }
+
+      if (amount <= 0) throw "amount is too small";
+    } catch (err) {
+      throw "Invalid input query parameter: amount";
+    }
+
+    return {
+      amount,
+      toPubkey,
+    };
+  }

app/donate/page.tsx

@@ -0,0 +1,10 @@
+export default function DonateIndexPage() {
+
+    return (
+        <div>
+        <h1>Donate</h1>
+        <p>Donate to help us keep the lights on!</p>
+        </div>
+    );
+}
+

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
+import { SolanaWalletConnectors } from "@dynamic-labs/solana";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +18,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <DynamicContextProvider settings={{
+        environmentId: '33003d8f-ffe6-4cc0-86b0-0f8d02b614f4',
+        walletConnectors: [SolanaWalletConnectors]
+      }}>
+        <body className={inter.className}>{children}</body>
+      </DynamicContextProvider>
     </html>
   );
 }

app/page.tsx

@@ -1,113 +1,27 @@
-import Image from "next/image";
+'use client';
 
+import Image from "next/image";
+import { useDynamicContext } from "@/lib/dynamic";
 export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+  const { setShowAuthFlow, primaryWallet } = useDynamicContext();
 
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
+  const handleGenerateSupporterLink = async () => {
+    if(!primaryWallet) return;
+    setShowAuthFlow(true);
+  };
 
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      {!primaryWallet && <div>
+        <p>Generate your supporter link</p>
+        <button onClick={() => handleGenerateSupporterLink()} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          Generate
+        </button>
+      </div>}
+      {primaryWallet && <div>
+        <p>Your supporter link</p>
+        <p>https://support-a-creator.xyz/donate/{primaryWallet.address}</p>
+        </div>}
     </main>
   );
 }

lib/dynamic.ts

@@ -0,0 +1 @@
+export * from "@dynamic-labs/sdk-react-core";

middleware.js

@@ -0,0 +1,16 @@
+// middleware.js
+import { NextResponse } from 'next/server';
+
+export function middleware(request) {
+  const response = NextResponse.next();
+
+  // Add the custom header
+  response.headers.set('ngrok-skip-browser-warning', 'Your Custom Value');
+
+  return response;
+}
+
+// Define the paths where the middleware should run
+export const config = {
+  matcher: '/:path*', // This applies the middleware to all paths
+};