+
+
+ );
+ }
+ return (
+
+ {children}
+
+ );
+ }
+ if (!width.endsWith("px") || !height.endsWith("px")) {
+ width = `${width}px`;
+ height = `${height}px`;
+ }
+
+ return (
+
+ 
+
+ );
+};
+
+export { BackgroundImage };
+export type { BackgroundImageProps };
diff --git a/src/app/frames/components/badge.tsx b/src/app/frames/components/badge.tsx
new file mode 100644
index 0000000..884cd72
--- /dev/null
+++ b/src/app/frames/components/badge.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { cva, VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/frames/lib/utils";
+
+const badgeVariants = cva("flex justify-center items-center", {
+ variants: {
+ variant: {
+ primary: "bg-blue-500 text-white",
+ secondary: "bg-purple-500 text-white",
+ outline: "bg-transparent border border-black",
+ success: "bg-green-500 text-white",
+ error: "bg-red-500 text-white",
+ warning: "bg-yellow-500 text-white",
+ },
+ size: {
+ sm: "text-[24px] h-[55px] px-4 rounded-[60px]",
+ md: "text-[32px] h-[73px] px-8 rounded-[80px]",
+ lg: "text-[40px] h-[90px] px-8 rounded-[100px]",
+ },
+ },
+ defaultVariants: {
+ variant: "primary",
+ size: "md",
+ },
+});
+
+interface BadgeProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps
+ {children}
+
+
+ {children}
+
+ );
+};
+
+export { Badge };
diff --git a/src/app/frames/components/banner.tsx b/src/app/frames/components/banner.tsx
new file mode 100644
index 0000000..782f76a
--- /dev/null
+++ b/src/app/frames/components/banner.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/frames/lib/utils";
+
+const bannerVariants = cva("absolute", {
+ variants: {
+ position: {
+ centered: "",
+ topRight: "top-0 right-0",
+ bottomRight: "bottom-0 right-0",
+ topLeft: "top-0 left-0",
+ bottomLeft: "bottom-0 left-0",
+ },
+ size: {
+ sm: "text-[20px]",
+ md: "text-[30px]",
+ lg: "text-[40px]",
+ },
+ },
+ defaultVariants: {
+ position: "centered",
+ size: "md",
+ },
+});
+
+interface BannerProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps
+ {children}
+
+ );
+};
+
+const cardContentVariants = cva("flex flex-col w-full my-4", {
+ variants: {},
+});
+
+interface CardContentProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps
+ {children}
+
+ );
+};
+
+const cardHeaderVariants = cva("flex flex-col w-full mb-4", {
+ variants: {},
+});
+
+interface CardHeaderProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps
+ {children}
+
+ );
+};
+
+const cardTitleVariants = cva("my-2", {
+ variants: {
+ size: {
+ default: "text-[48px]",
+ sm: "text-[32px]",
+ lg: "text-[58px]",
+ },
+ },
+ defaultVariants: {
+ size: "default",
+ },
+});
+
+interface CardTitleProps
+ extends React.ComponentPropsWithoutRef<"h2">,
+ VariantProps+ {children} +
+ ); +}; + +export { Card, CardContent, CardHeader, CardTitle }; +export type { CardProps, CardContentProps, CardHeaderProps, CardTitleProps }; diff --git a/src/app/frames/components/column.tsx b/src/app/frames/components/column.tsx new file mode 100644 index 0000000..3a3259c --- /dev/null +++ b/src/app/frames/components/column.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { cva, VariantProps } from "class-variance-authority"; + +import { cn } from "@/app/frames/lib/utils"; + +const columnVariants = cva("flex flex-col", { + variants: {}, +}); + +interface ColumnProps + extends React.ComponentPropsWithoutRef<"div">, + VariantProps
+ {children}
+
+ );
+};
+
+export { Column };
+export type { ColumnProps };
diff --git a/src/app/frames/components/container.tsx b/src/app/frames/components/container.tsx
new file mode 100644
index 0000000..7fbddf7
--- /dev/null
+++ b/src/app/frames/components/container.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { cva, VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/frames/lib/utils";
+
+const containerVariants = cva("flex flex-col w-full h-full", {
+ variants: {
+ size: {
+ sm: "p-[50px]",
+ md: "p-[75px]",
+ lg: "p-[100px]",
+ },
+ },
+ defaultVariants: {
+ size: "md",
+ },
+});
+
+interface ContainerProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps
+ {children}
+
+ );
+};
+
+export { Container };
+export type { ContainerProps };
diff --git a/src/app/frames/components/progress.tsx b/src/app/frames/components/progress.tsx
new file mode 100644
index 0000000..2bd4e31
--- /dev/null
+++ b/src/app/frames/components/progress.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { cva, VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/frames/lib/utils";
+
+const progressVariants = cva("flex flex-row w-full rounded-full", {
+ variants: {
+ size: {
+ default: "h-[30px]",
+ sm: "h-[5px]",
+ lg: "h-[15px]",
+ },
+ },
+ defaultVariants: {
+ size: "default",
+ },
+});
+
+interface ProgressProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps
+ {/* instead of full rounded corners I would like to have only left rounded corners */}
+
+ );
+};
+
+export { Progress };
+export type { ProgressProps };
diff --git a/src/app/frames/components/row.tsx b/src/app/frames/components/row.tsx
new file mode 100644
index 0000000..0186e23
--- /dev/null
+++ b/src/app/frames/components/row.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { cva, VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/frames/lib/utils";
+
+const rowVariants = cva("flex flex-row", {
+ variants: {},
+});
+
+interface RowProps
+ extends React.ComponentPropsWithoutRef<"div">,
+ VariantProps 100 ? 100 : props.value}%] h-full rounded-l-full`}
+ >
+
+ {children}
+
+ );
+};
+
+export { Row };
+export type { RowProps };
diff --git a/src/app/frames/components/text.tsx b/src/app/frames/components/text.tsx
new file mode 100644
index 0000000..d6a2846
--- /dev/null
+++ b/src/app/frames/components/text.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { cva, VariantProps } from "class-variance-authority";
+
+import { cn } from "@/app/frames/lib/utils";
+
+const textVariants = cva("m-0", {
+ variants: {
+ size: {
+ sm: "text-[32px]",
+ md: "text-[40px]",
+ lg: "text-[52px]",
+ },
+ },
+ defaultVariants: {
+ size: "md",
+ },
+});
+
+interface TextProps
+ extends React.ComponentPropsWithoutRef<"p">,
+ VariantProps+ {children} +
+ ); +}; + +export { Text }; +export type { TextProps }; diff --git a/src/app/frames/components/transaction-result.tsx b/src/app/frames/components/transaction-result.tsx new file mode 100644 index 0000000..24419d9 --- /dev/null +++ b/src/app/frames/components/transaction-result.tsx @@ -0,0 +1,120 @@ +import React from "react"; + +import { cn } from "@/app/frames/lib/utils"; + +import { Container, ContainerProps } from "./container"; +import { Text, TextProps } from "./text"; + +interface TransactionResultProps extends ContainerProps { + type: "success" | "failed" | "error"; + title?: string; +} + +const SuccessIcon = () => ( + +); + +const FailedIcon = () => ( + +); + +const ErrorIcon = () => ( + +); + +interface TransactionResultProps extends ContainerProps { + type: "success" | "failed" | "error"; + title?: string; + titleProps?: TextProps; + childrenProps?: TextProps; +} + +const TransactionResult: React.FC
+ 
+
+ );
+};
+
+export { UserBanner };
diff --git a/src/app/frames/frames.ts b/src/app/frames/frames.ts
new file mode 100644
index 0000000..3d92c56
--- /dev/null
+++ b/src/app/frames/frames.ts
@@ -0,0 +1,11 @@
+import { createFrames } from "frames.js/next";
+
+type State = {
+ counter: number;
+};
+
+export const frames = createFrames+ {user.displayName && user.displayName?.length > MAX_DISPLAY_NAME_LENGTH + ? `${user.displayName.slice(0, 10)}...` + : user.displayName} +
+
+
+ ),
+ textInput: "Say something",
+ buttons: [
+ ,
+ ,
+ ,
+ ],
+ state: { counter: counter },
+ };
+});
+
+export const GET = frameHandler;
+export const POST = frameHandler;
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..6a75725
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,76 @@
+@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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..e9a31ac
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ // without a title, warpcast won't validate your frame
+ title: "frames.js starter",
+ description: "...",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..7ef298b
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,21 @@
+import { fetchMetadata } from "frames.js/next";
+import type { Metadata } from "next";
+import { createExampleURL } from "./utils";
+
+export async function generateMetadata(): Promiseframes.js starter
+ {ctx.message?.inputText && (
+ {`Input: ${ctx.message.inputText}`}
+ )}
+ Counter {counter}
+
+ Something will be here
+
+ );
+}
diff --git a/src/app/utils.ts b/src/app/utils.ts
new file mode 100644
index 0000000..6596603
--- /dev/null
+++ b/src/app/utils.ts
@@ -0,0 +1,36 @@
+import { headers } from "next/headers";
+
+export function currentURL(pathname: string): URL {
+ try {
+ const headersList = headers();
+ const host = headersList.get("x-forwarded-host") || headersList.get("host");
+ const protocol = headersList.get("x-forwarded-proto") || "http";
+
+ return new URL(pathname, `${protocol}://${host}`);
+ } catch (error) {
+ console.error(error);
+ return new URL("http://localhost:3000");
+ }
+}
+
+export function appURL() {
+ if (process.env.APP_URL) {
+ return process.env.APP_URL;
+ } else {
+ const url = process.env.APP_URL || vercelURL() || "http://localhost:3000";
+ console.warn(
+ `Warning (examples): APP_URL environment variable is not set. Falling back to ${url}.`
+ );
+ return url;
+ }
+}
+
+export function vercelURL() {
+ return process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : undefined;
+}
+
+export function createExampleURL(path: string) {
+ return new URL(path, appURL()).toString();
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..d822206
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,90 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./@/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ // js files primarily because in dist
+ "./node_modules/frames.js/dist/**/*.{ts,tsx,js,css}",
+ "./node_modules/@frames.js/render/dist/*.{ts,tsx,js,css}",
+ "./node_modules/@frames.js/render/dist/**/*.{ts,tsx,js,css}",
+
+ // monorepo weirdness
+ "../../node_modules/frames.js/dist/**/*.{ts,tsx,js,css}",
+ "../../node_modules/@frames.js/render/dist/*.{ts,tsx,js,css}",
+ "../../node_modules/@frames.js/render/dist/**/*.{ts,tsx,js,css}",
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+} satisfies Config;
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..b07b4e8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+ "$schema": "https://json.schemastore.org/tsconfig",
+ "display": "Default",
+ "compilerOptions": {
+ "esModuleInterop": true,
+ "incremental": false,
+ "isolatedModules": true,
+ "lib": ["es2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "moduleDetection": "force",
+ "moduleResolution": "Bundler",
+ "noEmit": true,
+ "noUncheckedIndexedAccess": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "jsx": "preserve",
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "target": "ES2022",
+ "allowJs": true
+ },
+ "include": [
+ "next-env.d.ts",
+ "next.config.js",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": ["node_modules"]
+}