feat: add header (#1329)

* feat: add header

* chore: configure navigator

* feat: `Providers` component

* chore: disable navigator on blur

* feat: `NavigationEvents` component

* refactor: make providers work with both routers

* feat: add IntercomProvider

* feat: usePrevious hook

* feat(CardMotionWrapper): use `m.div` instead of `MotionBox`

* wip: WalletSelectorModal without Google login button

* update package-lock

* fix: proper button states in wallet selector modal

* feat: `NavMenu` as popover

* feat: `CopyableAddress` component

* fix(useGuild): use the new `usePathname` hook

* fix: export `connectorButtonBaseProps` from `ConnectorButton`

* refactor toast related css variables

* fix: replace relevant toasts with our new toast component

* chore: upgrade nextjs

* wip: account modal

* cleanup playground

* refactor posthog, intercom, web3 related contexts & hooks

* cleanup: remove `DialogExample`

* fix(CardMotionWrapper): remove the `EASING` import

* Try fix build "out of memory" error (#1347)

* build: allocate more memory for nodejs on build

* build: increase memory limit

* chore: remove posthog provider to test build error

* chore: remove posthog provider to test build error

* chore: remove reward import

* build: remove memory limit override

* chore: fix circular import

* fix: update import outside v2

* fix: add missing react suspense

* Revert "chore: remove reward import"

This reverts commit b2cf1d8.

* chore: remove accidental svg

* fix(layout): add back `PostHogPageViews`

---------

Co-authored-by: BrickheadJohnny <[email protected]>

* feat(CopyableAddress): add tooltip

* feat: `NetworkModal` migration

* feat: `Accordion` component

* temporarily remove `CircularDependencyPlugin`

* move `platformMergeAlertAtom` to `atoms.ts`

* fix(useUserPublic): comment posthog related stuff

* feat: `FarcasterProfile` component

* fix ring color in light mode

* fix: remove ring offset

* fix: connect Farcaster button colors

* feat: define css vars for every platform type

* fix(SocialAccount): use the correct button colors

* feat: `Collapse` component

* feat(Form): don't re-export `FormProvider` as `Form`

* chore: remove old `Header` & `NavMenu`

* fix: Button & Input classNames

* feat(FormErrorMessage): add collapse animation

* feat: migrate the `EmailAddress` component

* chore: migrate `useDisconnect`

* fix(AccountModal): simplify modal state

* fix(EmailAddress): verify flow

* chore: remove unused `AccountButton`

* cleanup: move `processEmailError` inside `AccountModal/utils`

* feat: `useGuildUrlNameFromPathname` helper hook

* wip: `SharedSocials` migration

* refactor: move `useEditSharedSocials` to the `v2` folder

* feat: finish `SharedSocial` migration

* feat: `useErrorToast` hook

* fix(WalletSelectorModal): remove `CardMotionWrapper`

* fix(Button): remove important modifier

* fix(WalletSelectorModal): remove animations

* feat: "Linked addresses" section

* feat: `WalletLinkHelperModal` migration

* feat: `UsersGuildPins` migration

* fix(UsersGuildPins): `isValidating` logic

* fix(_app): remove custom-scrollbar.css import

* patch package-lock

* fix(playground): remove Section component

* chore(playground): remove FormExample

* cleanup: remove unused `GoogleTerms` component

* feat: migrate the `Error` component

* cleanup(LinkedAddress): remove unused legacy code

* fix: use bold icons everywhere under the `/v2` directory

* feat: `/cwaas-export` page

* fix(next.config.js): add `CircularDependencyPlugin`

* fix: uncomment `useResolveAddress` hook usages

* fix(Account): simplify conditional classNames

* fix: don't use `clsx` inside `cn` calls

* fix(usePrevious): remove assertion

* fix(EmailAddress): better generic type for `emailSentAt` state

* chore(NetworkButton): add comment about `img`

* fix(CopyableAddress): simplify className

* fix(NavMenu): remove unnecessary boolean inversion

* cleanup(ConnectorButton): use descriptive variable names

* fix(AddressTypeBadge): tooltip content

* feat: use the `useTheme` hook for dynamic connector icons

* cleanup(useWeb3ConnectionManager): remove ternary

* fix: use consistent ring sizes

* cleanup(tailwind.config.ts): remove unnecessary custom animations

* fix(WalletSelectorModal): move export link to the end of the list

* feat: `IntercomProvider` migration

* feat: `PlatformMergeErrorAlert` migration

* feat: `useConnectFromLocalStorage` migration

* fix(_app): add `Toaster`

* feat: `Collapsible` component

* fix(useLensProfile): don't import icon from the requirements config

* fix(EmailAddress): use the new  hook

* fix(FarcasterProfile): use the new  hook

* feat: new `GuildLogo` component

* fix(SharedSocials): use the new `GuildLogo` component

* fix: add more packages to `optimizePackageImports`

* fix(useTriggerNetworkChange): use the new `useToast` hook

* fix: patch package-lock

* fix: Tooltip animation duration

* cleanup: remove some unnecessary comments

* feat(WalletSelectorModal): use the new `Anchor` tag

* fix(useConnectPlatform): uncomment error toast

* fix: use buttons for `AlertDialogAction` where it is relevant

* fix(SocialAccount): apply different styles for the reconnect button

* fix: minor improvements/todos

* feat: `Alert` component

* fix: fine-tune `Alert` styles

* feat: use the new  component

* fix(guild page): incorrect import

* patch package-lock

---------

Co-authored-by: BrickheadJohnny <[email protected]>

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>
   )