feat: add header

biome.json

@@ -11,7 +11,7 @@
   },
   "files": {
     "include": ["src", "cypress"],
-    "ignore": ["node_modules", ".next", "public", ".out"]
+    "ignore": ["node_modules", ".next", "public", ".out", "package-lock.json"]
   },
   "organizeImports": { "enabled": true },
   "linter": {

next.config.js

@@ -22,6 +22,9 @@ const nextConfig = {
       ],
     })
 
+    // To get rid of "Can't resolve ..." errors which come from some wallet connector SDKs
+    config.externals.push("pino-pretty", "lokijs", "encoding")
+
     if (!config.plugins) config.plugins = []
     if (process.env.VERCEL_ENV === "production") {
       config.plugins.push(
@@ -91,7 +94,12 @@ const nextConfig = {
   },
   experimental: {
     scrollRestoration: true,
-    optimizePackageImports: ["@phosphor-icons/react"],
+    optimizePackageImports: [
+      "@phosphor-icons/react",
+      "@phosphor-icons/react/dist/ssr",
+      "@fuels/react",
+      "fuels",
+    ],
   },
   async rewrites() {
     return {

package.json

@@ -45,11 +45,14 @@
     "@lexical/utils": "^0.12.0",
     "@nouns/assets": "^0.4.2",
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
@@ -77,11 +80,12 @@
     "framer-motion": "^7.10.3",
     "fuels": "^0.89.1",
     "idb-keyval": "^6.2.0",
+    "input-otp": "^1.2.4",
     "jotai": "^2.7.0",
     "js-confetti": "^0.11.0",
     "lexical": "^0.12.0",
     "mini-svg-data-uri": "^1.4.4",
-    "next": "14.0.1",
+    "next": "^14.2.4",
     "next-themes": "^0.3.0",
     "papaparse": "^5.4.1",
     "posthog-js": "^1.139.3",

src/app/globals.css

@@ -8,10 +8,11 @@
     --foreground: 240 4% 16%;
 
     --card: 0 0% 100%;
+    --card-secondary: 0 0% 98%;
     --card-foreground: var(--foreground);
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
+    --popover: var(--card);
+    --popover-foreground: var(--card-foreground);
 
     --tooltip: 0 0% 0%;
     --tooltip-foreground: 0 0% 100%;
@@ -50,13 +51,49 @@
     --border: 240 6% 90%;
     --border-muted: 240 6% 94%;
     --input: var(--border);
-    --ring: 224 71.4% 4.1%;
+    --ring: 240, 0%, 45%, 25%;
 
     --toast-success: 137 64% 98%;
     --toast-error: 0 78% 98%;
     --toast-warning: 40 79% 96%;
     --toast-info: 218 80% 98%;
 
+    --alert-success: var(--toast-success);
+    --alert-success-icon: 142 71% 45%;
+    --alert-info: var(--toast-info);
+    --alert-info-icon: 217 91% 60%; /* TODO: --info-... CSS variables */
+    --alert-warning: var(--toast-warning);
+    --alert-warning-icon: 27 96% 61%;
+    /* TODO: should we call it error or destructive? */
+    --alert-error: var(--toast-error);
+    --alert-error-icon: 0 84% 60%;
+
+    --discord: 233 78% 63%;
+    --discord-hover: 243 75% 59%;
+    --discord-active: 245 58% 51%;
+    --telegram: 200 73% 50%;
+    --telegram-hover: 200 98% 39%;
+    --telegram-active: 201 96% 32%;
+    --email: 217 91% 60%;
+    --email-hover: 221 83% 53%;
+    --email-active: 224 76% 48%;
+    --google: 217 91% 60%;
+    --google-hover: 221 83% 53%;
+    --google-active: 224 76% 48%;
+    /* TODO: proper hover/active colors for Twitter */
+    --twitter: 0 0% 0%;
+    --twitter-hover: 0 0% 0%;
+    --twitter-active: 0 0% 0%;
+    --github: 0 0% 20%;
+    --github-hover: 0 0% 18%;
+    --github-active: 0 0% 15%;
+    --polygonid: 259 59% 59%;
+    --polygonid-hover: 258 50% 52%;
+    --polygonid-active: 256 44% 42%;
+    --farcaster: 238 76% 69%;
+    --farcaster-hover: 239 75% 64%;
+    --farcaster-active: 239 75% 58%;
+
     --sm: 640px;
     --md: 768px;
     --lg: 1024px;
@@ -68,10 +105,11 @@
     --foreground: 210 20% 98%;
 
     --card: 240 5.26% 26.08%;
+    --card-secondary: 240 5% 22%;
     --card-foreground: var(--foreground);
 
-    --popover: 240 5.26% 26.08%;
-    --popover-foreground: 240 2% 58%;
+    --popover: var(--card);
+    --popover-foreground: var(--card-foreground);
 
     --tooltip: 240 5% 84%;
     --tooltip-foreground: 240 4% 16%;
@@ -116,11 +154,30 @@
     --toast-error: 317 4% 35%;
     --toast-warning: 30 6% 34%;
     --toast-info: 226 7% 36%;
-  }
 
-  :root[data-theme="dark"] video,
-  :root[data-theme="dark"] img {
-    filter: brightness(0.85) contrast(1.15);
+    --alert-success: var(--toast-success);
+    --alert-success-icon: 141 79% 85%;
+    --alert-info: var(--toast-info);
+    --alert-info-icon: 213 97% 87%;
+    --alert-warning: var(--toast-warning);
+    --alert-warning-icon: 32 98% 83%;
+    --alert-error: var(--toast-error);
+    --alert-error-icon: 0 96% 89%;
+
+    --discord-hover: 234 89% 74%;
+    --discord-active: 230 94% 82%;
+    --telegram-hover: 198 93% 60%;
+    --telegram-active: 199 95% 74%;
+    --email-hover: 213 94% 68%;
+    --email-active: 212 96% 78%;
+    --google-hover: 213 94% 68%;
+    --google-active: 212 96% 78%;
+    --github-hover: 0 0% 44%;
+    --github-active: 0 0% 68%;
+    --polygonid-hover: 260 73% 70%;
+    --polygonid-active: 262 81% 77%;
+    --farcaster-hover: 239 75% 75%;
+    --farcaster-active: 238 76% 81%;
   }
 }
 
@@ -132,3 +189,43 @@
     @apply min-h-screen bg-background font-sans text-foreground;
   }
 }
+
+/* Copy-pasted from custom-scrollbar.css just so we can use it everywhere */
+@layer utilities {
+  .custom-scrollbar::-webkit-scrollbar,
+  .custom-menu-list > div::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track,
+  .custom-menu-list > div::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb,
+  .custom-menu-list > div::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .invisible-scrollbar::-webkit-scrollbar,
+  .invisible-menu-list > div::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .invisible-scrollbar::-webkit-scrollbar-track,
+  .invisible-menu-list > div::-webkit-scrollbar-track {
+    width: 0;
+    height: 0;
+  }
+
+  .invisible-scrollbar::-webkit-scrollbar-thumb,
+  .invisible-menu-list > div::-webkit-scrollbar-thumb {
+    width: 0;
+    height: 0;
+  }
+}

src/app/layout.tsx

@@ -1,11 +1,13 @@
-import { ThemeProvider } from "@/components/ThemeProvider"
+import { Providers } from "@/components/Providers"
+import { PostHogPageViews } from "@/components/Providers/PostHogPageViews"
 import clsx from "clsx"
 import { dystopian, inter } from "fonts"
 import type { Metadata } from "next"
+import { Suspense, type ReactNode } from "react"
 import "./globals.css"
 
 interface RootLayoutProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const metadata: Metadata = {
@@ -19,15 +21,13 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <html lang="en" suppressHydrationWarning>
       <head />
       <body className={clsx(dystopian.variable, inter.variable)}>
-        <ThemeProvider
-          attribute="data-theme"
-          storageKey="chakra-ui-color-mode"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
+        <Providers>
           {children}
-        </ThemeProvider>
+
+          <Suspense>
+            <PostHogPageViews />
+          </Suspense>
+        </Providers>
       </body>
     </html>
   )

src/app/playground/page.tsx

@@ -1,43 +1,17 @@
-import { Card } from "@/components/ui/Card"
+import { Header } from "@/components/Header"
 import { Metadata } from "next"
-import { PropsWithChildren } from "react"
-import { ThemeToggle } from "../../v2/components/ThemeToggle"
-import { DialogExample } from "./_components/DialogExample"
-import { FormExample } from "./_components/FormExample"
 
 export const metadata: Metadata = {
   title: "Playground",
 }
 
-const Section = ({ title, children }: PropsWithChildren<{ title: string }>) => (
-  <section className="flex flex-col gap-2">
-    <h2 className="text-lg font-bold">{title}</h2>
-    {children}
-  </section>
-)
-
 export default function Page() {
   return (
     <div className="p-8">
       <h1 className="text-2xl font-bold">Playground</h1>
-      <h1 className="text-2xl italic">Playground</h1>
 
       <div className="flex flex-col items-start gap-4">
-        <Section title="Theme toggle">
-          <ThemeToggle />
-        </Section>
-
-        <Section title="Card">
-          <Card className="p-4">This is a card</Card>
-        </Section>
-
-        <Section title="Modal">
-          <DialogExample />
-        </Section>
-
-        <Section title="Form">
-          <FormExample />
-        </Section>
+        <Header />
       </div>
     </div>
   )