feat: add first db support

package.json

@@ -12,18 +12,21 @@
   },
   "dependencies": {
     "@lens-protocol/client": "^2.0.0",
+    "@libsql/client": "^0.14.0",
     "@vercel/kv": "^1.0.1",
     "@xmtp/frames-validator": "^0.6.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "drizzle-orm": "^0.36.4",
     "frames.js": "^0.20.0",
     "maiton": "^0.0.2",
     "next": "^14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "zod": "^3.23.8"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -37,6 +40,7 @@
     "autoprefixer": "^10.0.1",
     "concurrently": "^8.2.2",
     "dotenv": "^16.4.5",
+    "drizzle-kit": "^0.28.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
     "is-port-reachable": "^4.0.0",

src/app/page.tsx

@@ -13,9 +13,22 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function Home() {
+  const ethPrice = "3500";
+
   return (
-    <div className="flex flex-col max-w-[600px] w-full gap-2 mx-auto p-2">
-      Something will be here
+    <div className="flex flex-col w-full h-screen gap-2 mx-auto">
+      <header className="flex justify-between items-center p-4">
+        <img src="/logo.png" alt="Logo" className="h-8" />
+        <input
+          type="text"
+          placeholder="Token address..."
+          className="border rounded p-2 w-full max-w-xs"
+        />
+      </header>
+      <main className="flex-grow p-4">Something will be here</main>
+      <footer className="p-4 sticky bottom-0 bg-black text-white">
+        Current ETH Price: ${ethPrice}
+      </footer>
     </div>
   );
 }

src/utils/db.ts

@@ -0,0 +1,15 @@
+import { env } from "@/utils/env";
+import { createClient } from "@libsql/client";
+import { drizzle } from "drizzle-orm/libsql";
+import { tokenTable } from "./schemas/db.schema";
+
+export const tursoClient = createClient({
+  url: env.TURSO_DATABASE_URL,
+  authToken: env.TURSO_AUTH_TOKEN,
+});
+
+export const db = drizzle(tursoClient, {
+  schema: {
+    tokenTable,
+  },
+});

src/utils/env.ts

@@ -0,0 +1,23 @@
+import * as dotenv from "dotenv";
+import z from "zod";
+
+dotenv.config();
+
+const envSchema = z.object({
+  TURSO_DATABASE_URL: z.string().url().trim().min(1),
+  TURSO_AUTH_TOKEN: z.string().trim().min(1),
+});
+
+const { data, success, error } = envSchema.safeParse(process.env);
+
+if (!success) {
+  console.error(
+    `An error has occurred while parsing environment variables:${error.errors.map(
+      (e) => ` ${e.path.join(".")} is ${e.message}`
+    )}`
+  );
+  process.exit(1);
+}
+
+export type EnvSchemaType = z.infer<typeof envSchema>;
+export const env = data;

src/utils/schemas/db.schema.ts

@@ -0,0 +1,13 @@
+import { sql } from "drizzle-orm";
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+
+export const tokenTable = sqliteTable("token", {
+  id: integer("id").primaryKey({ autoIncrement: true }),
+  address: text("address").unique().notNull(),
+  name: text("name").notNull(),
+  ticker: text("ticker").notNull(),
+  requestedBy: integer("requestedBy").notNull(), // user Farcaster FID
+  image: text("image").notNull(),
+  createdAt: text("created_at").default(sql`CURRENT_TIMESTAMP`),
+  updatedAt: text("updated_at").default(sql`CURRENT_TIMESTAMP`),
+});