feat: appkit demo (#3413)

apps/builder/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

apps/builder/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/builder/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/builder/app/globals.css

@@ -0,0 +1,127 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+
+  ::selection {
+    background-color: hsl(var(--apkt-background-accent-primary) / 0.1);
+  }
+}
+
+@layer base {
+  :root {
+    --apkt-background-primary: 0 0% 100%;
+    --apkt-background-invert: 0 0% 13%;
+    --apkt-background-accent-primary: 207 93% 49%;
+
+    --apkt-foreground-primary: 0 0% 95%;
+    --apkt-foreground-secondary: 0 0% 91%;
+    --apkt-foreground-tertiary: 0 0% 82%;
+    --apkt-foreground-accent: 231 100% 70%;
+
+    --apkt-border: 0 0% 91%;
+    --apkt-border-secondary: 0 0% 82%;
+    --apkt-border-accent: 207 93% 49%;
+    --apkt-border-accent-certified: 44 31% 68%;
+    --apkt-border-success: 0.42 55% 42%;
+    --apkt-border-error: 0.02 73% 54%;
+    --apkt-border-warning: 0.09 88% 60%;
+
+    --apkt-text-primary: 0 0% 13%;
+    --apkt-text-secondary: 0 0% 60%;
+    --apkt-text-tertiary: 0 0% 42%;
+    --apkt-text-invert: 0 0% 100%;
+
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+
+    --apkt-border-sm: 8px;
+    --apkt-border-md: 12px;
+    --apkt-border-lg: 16px;
+
+    --box-shadow-picked-up: 0px 2px 8px 2px hsl(var(--apkt-background-primary) / 0.5);
+  }
+  .dark {
+    --apkt-background-primary: 0 0% 13%;
+    --apkt-background-invert: 0 0% 100%;
+    --apkt-background-accent-primary: 207 93% 49%;
+
+    --apkt-foreground-primary: 0 0% 15%;
+    --apkt-foreground-secondary: 0 0% 16%;
+    --apkt-foreground-tertiary: 0 0% 21%;
+    --apkt-foreground-accent: 207 92.8% 48.8%;
+
+    --apkt-border: 0 0% 16%;
+    --apkt-border-secondary: 0 0% 31%;
+    --apkt-border-accent: 207 93% 49%;
+    --apkt-border-accent-certified: 0.12 31% 68%;
+    --apkt-border-success: 0.42 55% 42%;
+    --apkt-border-error: 0.02 73% 54%;
+    --apkt-border-warning: 0.09 88% 60%;
+
+    --apkt-text-primary: 0 0% 100%;
+    --apkt-text-secondary: 0 0% 60%;
+    --apkt-text-tertiary: 0 0% 73%;
+    --apkt-text-invert: 0 0% 13%;
+
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground h-[100svh];
+  }
+  .inset-shadow {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
+  }
+  wui-card {
+    box-shadow: 0 0 24px 0px rgba(0, 0, 0, 0.15);
+  }
+  .ease {
+    transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+  }
+}

apps/builder/app/layout.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from 'next'
+import { Toaster } from 'sonner'
+import { ThemeProvider } from 'next-themes'
+
+import { khTeka } from '@/lib/fonts'
+import { cn } from '@/lib/utils'
+import { ContextProvider } from '@/providers/appkit-context-provider'
+import { AppKitProvider } from '@/providers/appkit-provider'
+import { headers } from 'next/headers'
+import './globals.css'
+
+const title = 'AppKit | Builder'
+const description = 'The full stack toolkit to build onchain app UX'
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    locale: 'en_US',
+    type: 'website'
+  },
+  icons: {
+    icon: [
+      {
+        url: '/favicon-dark.png',
+        media: '(prefers-color-scheme: light)'
+      },
+      {
+        url: '/favicon.png',
+        media: '(prefers-color-scheme: dark)'
+      }
+    ]
+  }
+}
+
+export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const cookies = headers().get('cookie')
+
+  return (
+    <html lang="en">
+      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+        <Toaster />
+        <AppKitProvider cookies={cookies}>
+          <ContextProvider>
+            <body className={cn(khTeka.className)}>{children}</body>
+          </ContextProvider>
+        </AppKitProvider>
+      </ThemeProvider>
+    </html>
+  )
+}

apps/builder/app/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { SidebarContent } from '@/components/sidebar-content'
+import { PreviewContent } from '@/components/preview-content'
+import { cn } from '@/lib/utils'
+import { BrandingHeader } from '@/components/branding-header'
+
+export default function Page() {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse items-center md:items-start md:flex-row p-4 bg-background gap-4 pt-10 md:pt-4 h-full overflow-auto'
+      )}
+    >
+      <div className="flex max-w-[450px] md:max-w-[340px] w-full bg-transparent md:bg-fg-primary h-none md:h-full text-foreground p-0 md:p-6 flex-col rounded-2xl overflow-none md:overflow-y-auto h-auto pb-20">
+        <SidebarContent />
+      </div>
+
+      <div className="max-w-[360px] md:max-w-none w-full h-none md:h-full flex flex-col">
+        <PreviewContent />
+      </div>
+
+      <BrandingHeader className="flex md:hidden" />
+    </div>
+  )
+}

apps/builder/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

apps/builder/components/appkit-button-mobile.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+
+import { useAppKit } from '@reown/appkit/react'
+
+export function AppKitButtonMobile() {
+  const { open } = useAppKit()
+
+  return (
+    <div className="fixed bottom-0 p-4 flex md:hidden w-full backdrop-blur-sm bg-background/20 z-50">
+      <Button variant="neutral" size="lg" className="w-full flex md:hidden" onClick={() => open()}>
+        Launch AppKit
+      </Button>
+    </div>
+  )
+}

apps/builder/components/branding-header.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import Image from 'next/image'
+import { useAppKitContext } from '@/hooks/use-appkit'
+import { cn } from '@/lib/utils'
+
+export function BrandingHeader({ className }: { className?: string }) {
+  const { config } = useAppKitContext()
+
+  return (
+    <div className={cn('flex flex-col items-center md:items-start justify-center', className)}>
+      <Image
+        src={config.themeMode === 'light' ? '/reown-logo-dark.png' : '/reown-logo.png'}
+        alt="Reown logo"
+        width={150}
+        height={40}
+        className="mb-4 md:mb-12"
+      />
+
+      <div className="flex-col gap-2 items-center md:items-start mb-0 md:mb-12">
+        <h4 className="text-3xl text-text-primary text-center md:text-left">AppKit demo</h4>
+        <p className="text-sm text-text-secondary text-center md:text-left">
+          Use our AppKit demo to test and design onchain UX
+        </p>
+      </div>
+    </div>
+  )
+}