From 4451b7c38c9cc7ec542c3bef36b7b70db1a21436 Mon Sep 17 00:00:00 2001
From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com>
Date: Wed, 27 Mar 2024 11:05:52 +0200
Subject: [PATCH] fix: refactor frames app into frames.ts in examples

---
 .changeset/thirty-dots-doubt.md                    |  5 +++++
 .../new-api-cache-control/frames/frames.ts         |  5 +++++
 .../new-api-cache-control/frames/route.tsx         |  6 +-----
 .../examples/new-api-mint-button/frames/frames.ts  |  5 +++++
 .../examples/new-api-mint-button/frames/route.tsx  |  7 ++-----
 .../new-api-multi-protocol/{ => frames}/frames.ts  |  4 ++--
 .../new-api-multi-protocol/frames/route.tsx        |  2 +-
 .../{ => frames}/who-am-i/route.tsx                |  0
 .../frames/frames.ts                               | 12 ++++++++++++
 .../frames/route.tsx                               | 14 ++------------
 .../new-api-post-redirect/frames/frames.ts         |  5 +++++
 .../new-api-post-redirect/frames/route.tsx         |  7 ++-----
 .../examples/new-api-slow-request/frames/frames.ts |  5 +++++
 .../examples/new-api-slow-request/frames/route.tsx |  7 ++-----
 .../examples/new-api-transaction/frames/frames.ts  |  5 +++++
 .../examples/new-api-transaction/frames/route.tsx  |  6 +-----
 16 files changed, 55 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/thirty-dots-doubt.md
 create mode 100644 examples/framesjs-starter/app/examples/new-api-cache-control/frames/frames.ts
 create mode 100644 examples/framesjs-starter/app/examples/new-api-mint-button/frames/frames.ts
 rename examples/framesjs-starter/app/examples/new-api-multi-protocol/{ => frames}/frames.ts (88%)
 rename examples/framesjs-starter/app/examples/new-api-multi-protocol/{ => frames}/who-am-i/route.tsx (100%)
 create mode 100644 examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/frames.ts
 create mode 100644 examples/framesjs-starter/app/examples/new-api-post-redirect/frames/frames.ts
 create mode 100644 examples/framesjs-starter/app/examples/new-api-slow-request/frames/frames.ts
 create mode 100644 examples/framesjs-starter/app/examples/new-api-transaction/frames/frames.ts

diff --git a/.changeset/thirty-dots-doubt.md b/.changeset/thirty-dots-doubt.md
new file mode 100644
index 000000000..4fa25c547
--- /dev/null
+++ b/.changeset/thirty-dots-doubt.md
@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+fix: refactor frames app into frames.ts in examples
diff --git a/examples/framesjs-starter/app/examples/new-api-cache-control/frames/frames.ts b/examples/framesjs-starter/app/examples/new-api-cache-control/frames/frames.ts
new file mode 100644
index 000000000..fe4ae3f1e
--- /dev/null
+++ b/examples/framesjs-starter/app/examples/new-api-cache-control/frames/frames.ts
@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-cache-control",
+});
diff --git a/examples/framesjs-starter/app/examples/new-api-cache-control/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-cache-control/frames/route.tsx
index ee6293fa3..0b8a89e6f 100644
--- a/examples/framesjs-starter/app/examples/new-api-cache-control/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-cache-control/frames/route.tsx
@@ -1,10 +1,6 @@
 /* eslint-disable react/jsx-key */
 import { Button } from "frames.js/next";
-import { createFrames } from "frames.js/next";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-cache-control",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   return {
diff --git a/examples/framesjs-starter/app/examples/new-api-mint-button/frames/frames.ts b/examples/framesjs-starter/app/examples/new-api-mint-button/frames/frames.ts
new file mode 100644
index 000000000..94b797cf6
--- /dev/null
+++ b/examples/framesjs-starter/app/examples/new-api-mint-button/frames/frames.ts
@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-mint-button/frames",
+});
diff --git a/examples/framesjs-starter/app/examples/new-api-mint-button/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-mint-button/frames/route.tsx
index 23ee9ccf8..5221bbf65 100644
--- a/examples/framesjs-starter/app/examples/new-api-mint-button/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-mint-button/frames/route.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-key */
-import { Button, createFrames } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { getTokenUrl } from "frames.js";
 import { zora } from "viem/chains";
+import { frames } from "./frames";
 
 const nfts: {
   src: string;
@@ -33,10 +34,6 @@ const nfts: {
   },
 ];
 
-const frames = createFrames({
-  basePath: "/examples/new-api-mint-button/frames",
-});
-
 const handleRequest = frames(async (ctx) => {
   const page = Number(ctx.searchParams?.pageIndex ?? 0);
   return {
diff --git a/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames.ts b/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/frames.ts
similarity index 88%
rename from examples/framesjs-starter/app/examples/new-api-multi-protocol/frames.ts
rename to examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/frames.ts
index 0234c8657..0b9fea07f 100644
--- a/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames.ts
+++ b/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/frames.ts
@@ -2,10 +2,10 @@
 import { farcasterHubContext, openframes } from "frames.js/middleware";
 import { createFrames } from "frames.js/next";
 import { getXmtpFrameMessage, isXmtpFrameActionPayload } from "frames.js/xmtp";
-import { DEFAULT_DEBUGGER_HUB_URL } from "../../debug";
+import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
 
 export const frames = createFrames({
-  basePath: "/examples/new-api-multi-protocol",
+  basePath: "/examples/new-api-multi-protocol/frames",
   initialState: {
     pageIndex: 0,
   },
diff --git a/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/route.tsx
index 07043b99d..e0aa09916 100644
--- a/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/route.tsx
@@ -1,5 +1,5 @@
 import { Button } from "frames.js/next";
-import { frames } from "../frames";
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   return {
diff --git a/examples/framesjs-starter/app/examples/new-api-multi-protocol/who-am-i/route.tsx b/examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/who-am-i/route.tsx
similarity index 100%
rename from examples/framesjs-starter/app/examples/new-api-multi-protocol/who-am-i/route.tsx
rename to examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/who-am-i/route.tsx
diff --git a/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/frames.ts b/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/frames.ts
new file mode 100644
index 000000000..38920546f
--- /dev/null
+++ b/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/frames.ts
@@ -0,0 +1,12 @@
+import { farcasterHubContext } from "frames.js/middleware";
+import { createFrames } from "frames.js/next";
+import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-only-followers-can-mint/frames",
+  middleware: [
+    farcasterHubContext({
+      hubHttpUrl: DEFAULT_DEBUGGER_HUB_URL,
+    }),
+  ],
+});
diff --git a/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/route.tsx
index 31cc4f6a5..2a91ba277 100644
--- a/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/route.tsx
@@ -1,18 +1,8 @@
 /* eslint-disable react/jsx-key */
 import { getTokenUrl } from "frames.js";
-import { farcasterHubContext } from "frames.js/middleware";
-import { Button, createFrames } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { zora } from "viem/chains";
-import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-only-followers-can-mint/frames",
-  middleware: [
-    farcasterHubContext({
-      hubHttpUrl: DEFAULT_DEBUGGER_HUB_URL,
-    }),
-  ],
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   const page = ctx.searchParams?.page ?? "initial";
diff --git a/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/frames.ts b/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/frames.ts
new file mode 100644
index 000000000..a5a37a0d6
--- /dev/null
+++ b/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/frames.ts
@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-post-redirect/frames",
+});
diff --git a/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/route.tsx
index b478f04b1..c80484e74 100644
--- a/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-post-redirect/frames/route.tsx
@@ -1,10 +1,7 @@
 /* eslint-disable react/jsx-key */
-import { createFrames, Button } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { redirect } from "frames.js/core";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-post-redirect/frames",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   if (ctx.pressedButton?.action === "post_redirect") {
diff --git a/examples/framesjs-starter/app/examples/new-api-slow-request/frames/frames.ts b/examples/framesjs-starter/app/examples/new-api-slow-request/frames/frames.ts
new file mode 100644
index 000000000..5ea7f8d1a
--- /dev/null
+++ b/examples/framesjs-starter/app/examples/new-api-slow-request/frames/frames.ts
@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-slow-request/frames",
+});
diff --git a/examples/framesjs-starter/app/examples/new-api-slow-request/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-slow-request/frames/route.tsx
index a9944f032..b785e1d11 100644
--- a/examples/framesjs-starter/app/examples/new-api-slow-request/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-slow-request/frames/route.tsx
@@ -1,11 +1,8 @@
 import { kv } from "@vercel/kv";
 import { types } from "frames.js/core";
-import { createFrames, Button } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { RandomNumberRequestStateValue } from "../slow-fetch/types";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-slow-request/frames",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   const initialFrame = {
diff --git a/examples/framesjs-starter/app/examples/new-api-transaction/frames/frames.ts b/examples/framesjs-starter/app/examples/new-api-transaction/frames/frames.ts
new file mode 100644
index 000000000..3a29b360a
--- /dev/null
+++ b/examples/framesjs-starter/app/examples/new-api-transaction/frames/frames.ts
@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-transaction",
+});
diff --git a/examples/framesjs-starter/app/examples/new-api-transaction/frames/route.tsx b/examples/framesjs-starter/app/examples/new-api-transaction/frames/route.tsx
index 8a1587891..51e0831cb 100644
--- a/examples/framesjs-starter/app/examples/new-api-transaction/frames/route.tsx
+++ b/examples/framesjs-starter/app/examples/new-api-transaction/frames/route.tsx
@@ -1,10 +1,6 @@
 /* eslint-disable react/jsx-key */
 import { Button } from "frames.js/next";
-import { createFrames } from "frames.js/next";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-transaction",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   if (ctx.message?.transactionId) {