fix code in default frames, add 2 sub-frames

package.json

@@ -31,7 +31,8 @@
     "prettier": "^3.1.1",
     "publint": "^0.2.7",
     "rimraf": "^5.0.5",
-    "turbo": "^1.13.2"
+    "turbo": "^1.13.2",
+    "typescript": "^5.5.2"
   },
   "engines": {
     "node": ">=18"

templates/next-starter-with-examples/app/frames/frames.ts

@@ -1,11 +1,11 @@
 import { createFrames } from "frames.js/next";
 
 type State = {
-  counter: number;
+  otcUrl: string | undefined;
 };
 
 export const frames = createFrames<State>({
   basePath: "/frames",
-  initialState: { counter: 0 },
+  initialState: { otcUrl: undefined },
   debug: process.env.NODE_ENV === "development",
 });

templates/next-starter-with-examples/app/frames/route.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-key */
 import { Button } from "frames.js/next";
 import { frames } from "./frames";
-import { appURL } from "../utils";
+// import { appURL } from "../utils";
 
-const frameHandler = frames(async (ctx) => {
+const frameHandler = frames(async (ctx: any) => {
   const counter = ctx.message
     ? ctx.searchParams.op === "+"
       ? ctx.state.counter + 1
@@ -13,23 +13,20 @@ const frameHandler = frames(async (ctx) => {
   return {
     image: (
       <div tw="flex flex-col">
-        <div tw="flex">frames.js starter</div>
+        <div tw="flex">Welcome AirSwap OTC Maker! Enter your OTC URL below</div>
         {ctx.message?.inputText && (
           <div tw="flex">{`Input: ${ctx.message.inputText}`}</div>
         )}
         <div tw="flex">Counter {counter}</div>
       </div>
     ),
-    textInput: "Say something",
+    textInput: "Enter OTC URL",
     buttons: [
       <Button action="post" target={{ pathname: "/", query: { op: "+" } }}>
-        Increment
+        Upload OTC URL
       </Button>,
       <Button action="post" target={{ pathname: "/", query: { op: "-" } }}>
-        Decrement
-      </Button>,
-      <Button action="link" target={appURL()}>
-        External
+        View OTC URLs
       </Button>,
     ],
     state: { counter: counter },

templates/next-starter-with-examples/app/frames/urlForm/urlFormRoute.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/jsx-key */
+import { frames } from "../frames";
+import { Button } from "frames.js/next";
+
+export const POST = frames(async (ctx: any) => {
+  const foo = ctx.searchParams.foo;
+
+  return {
+    image: <div tw="flex">Upload OTC URL below: {foo}</div>,
+    textarea: [<textarea >URL</textarea>],
+    buttons: [
+      <Button action="post" target="/route2">
+        Upload
+      </Button>,
+    ],
+  };
+});

templates/next-starter-with-examples/app/frames/urlList/urlListRoute.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/jsx-key */
+import { frames } from "../frames";
+import { Button } from "frames.js/next";
+
+export const POST = frames(async () => {
+  return {
+    image: <div tw="flex">Upload new OTC URL</div>,
+    buttons: [
+      <Button action="post" target="/urlForm">
+        Navigate to form
+      </Button>,
+      <Button action="post" target="/" >
+        Go back
+      </Button>
+    ],
+  };
+});

templates/next-starter-with-examples/app/globals.css

@@ -1,76 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

templates/next-starter-with-examples/app/layout.tsx

@@ -14,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className="w-fit p-4 m-auto text-center">{children}</body>
     </html>
   );
 }

templates/next-starter-with-examples/app/page.tsx

@@ -6,8 +6,8 @@ import { DebugLink } from "./components/DebugLink";
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
-    title: "frames.js starter",
-    description: "This is a frames.js starter template",
+    title: "AirSwap OTC Frames",
+    description: "AirSwap OTC makers can paste OTC URLs for their followers to click in Farcaster",
     other: {
       ...(await fetchMetadata(new URL("/frames", appURL()))),
     },
@@ -18,12 +18,10 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function Home() {
   // then, when done, return next frame
   return (
-    <div className="p-4">
-      frames.js starter kit. The Template Frame is on this page, it&apos;s in
-      the html meta tags (inspect source). <DebugLink /> or see{" "}
-      <Link href="/examples" className="underline">
-        other examples
-      </Link>
-    </div>
+    <>
+      <h1 className="text-lg font-bold">Welcome AirSwap Makers!</h1>
+      <h2>Your followers can now discover your OTC orders directly within farcaster!</h2>
+      <span>AirSwap x Farcaster <span className="underline font-bold"><DebugLink /></span></span>
+    </>
   );
 }