From f2cf7a2098d9e134452e4500ab35bc9b8addb65e Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Wed, 14 Aug 2024 10:43:14 +0200
Subject: [PATCH] feat: migrate the `/create-guild` page without the icon
 selector

---
 .../_components/CreateGuildButton.tsx         |  49 ++++++++
 .../_components/CreateGuildCard.tsx           |  66 ++++++++++
 .../_components/CreateGuildFormProvider.tsx   |  48 ++++++++
 .../_components/EmailFormField.tsx            |  54 ++++++++
 .../create-guild/_hooks/useCreateGuild.ts}    |  36 ++----
 src/app/create-guild/page.tsx                 |  45 +++++++
 src/app/create-guild/types.ts                 |   6 +
 .../BasicInfo/components/ContactInfo.tsx      |   2 +-
 .../create-guild/CreateGuildButton.tsx        |  46 -------
 .../create-guild/CreateGuildForm.tsx          | 115 ------------------
 .../IconSelector/IconSelector.tsx             |   2 +-
 src/pages/create-guild.tsx                    |  89 --------------
 12 files changed, 281 insertions(+), 277 deletions(-)
 create mode 100644 src/app/create-guild/_components/CreateGuildButton.tsx
 create mode 100644 src/app/create-guild/_components/CreateGuildCard.tsx
 create mode 100644 src/app/create-guild/_components/CreateGuildFormProvider.tsx
 create mode 100644 src/app/create-guild/_components/EmailFormField.tsx
 rename src/{components/create-guild/hooks/useCreateGuild.tsx => app/create-guild/_hooks/useCreateGuild.ts} (76%)
 create mode 100644 src/app/create-guild/page.tsx
 create mode 100644 src/app/create-guild/types.ts
 delete mode 100644 src/components/create-guild/CreateGuildButton.tsx
 delete mode 100644 src/components/create-guild/CreateGuildForm.tsx
 delete mode 100644 src/pages/create-guild.tsx

diff --git a/src/app/create-guild/_components/CreateGuildButton.tsx b/src/app/create-guild/_components/CreateGuildButton.tsx
new file mode 100644
index 0000000000..438ac05f71
--- /dev/null
+++ b/src/app/create-guild/_components/CreateGuildButton.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { Button } from "@/components/ui/Button"
+import { Collapsible, CollapsibleContent } from "@/components/ui/Collapsible"
+import { useSetAtom } from "jotai"
+import { useFormContext } from "react-hook-form"
+import { useCreateGuild } from "../_hooks/useCreateGuild"
+import { CreateGuildFormType } from "../types"
+
+const CreateGuildButton = () => {
+  const { handleSubmit } = useFormContext<CreateGuildFormType>()
+  const { onSubmit, isLoading } = useCreateGuild()
+
+  const { isWeb3Connected } = useWeb3ConnectionManager()
+  const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Collapsible open={!isWeb3Connected}>
+        <CollapsibleContent>
+          <Button
+            colorScheme="info"
+            size="xl"
+            disabled={isWeb3Connected}
+            onClick={() => setIsWalletSelectorModalOpen(true)}
+            className="w-full"
+          >
+            Connect wallet
+          </Button>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Button
+        colorScheme="success"
+        size="xl"
+        isLoading={isLoading}
+        loadingText="Creating guild"
+        onClick={handleSubmit(onSubmit)}
+        disabled={!isWeb3Connected}
+      >
+        Create guild
+      </Button>
+    </div>
+  )
+}
+
+export { CreateGuildButton }
diff --git a/src/app/create-guild/_components/CreateGuildCard.tsx b/src/app/create-guild/_components/CreateGuildCard.tsx
new file mode 100644
index 0000000000..39b55afa34
--- /dev/null
+++ b/src/app/create-guild/_components/CreateGuildCard.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Card } from "@/components/ui/Card"
+import {
+  FormControl,
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import { useFormContext } from "react-hook-form"
+import { CreateGuildFormType } from "../types"
+import { CreateGuildButton } from "./CreateGuildButton"
+import { EmailFormField } from "./EmailFormField"
+
+const CreateGuildCard = () => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<CreateGuildFormType>()
+
+  return (
+    <Card className="flex flex-col px-5 py-6 shadow-lg md:px-6">
+      <h2 className="mb-7 text-center font-display font-extrabold text-2xl">
+        Begin your guild
+      </h2>
+
+      {/* <Center mb="6">
+          <IconSelector
+            uploader={iconUploader}
+            minW={512}
+            minH={512}
+            onGeneratedBlobChange={async (objectURL) => {
+              const generatedThemeColor = await getColorByImage(objectURL)
+              setValue("theme.color", generatedThemeColor)
+            }}
+            boxSize={28}
+          />
+        </Center> */}
+
+      <div className="mb-8 flex flex-col gap-4">
+        <FormField
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Guild name</FormLabel>
+              <FormControl>
+                <Input size="lg" {...field} />
+              </FormControl>
+
+              <FormErrorMessage />
+            </FormItem>
+          )}
+        />
+
+        <EmailFormField />
+      </div>
+
+      <CreateGuildButton />
+    </Card>
+  )
+}
+
+export { CreateGuildCard }
diff --git a/src/app/create-guild/_components/CreateGuildFormProvider.tsx b/src/app/create-guild/_components/CreateGuildFormProvider.tsx
new file mode 100644
index 0000000000..e3491e6a22
--- /dev/null
+++ b/src/app/create-guild/_components/CreateGuildFormProvider.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import { schemas } from "@guildxyz/types"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { PropsWithChildren } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import getRandomInt from "utils/getRandomInt"
+import { CreateGuildFormType } from "../types"
+
+const defaultValues = {
+  name: "",
+  imageUrl: "",
+  contacts: [
+    {
+      type: "EMAIL",
+      contact: "",
+    },
+  ],
+  /**
+   * We need to define these values so the Zod resolver won't throw errors, but we'll actually overwrite these with proper values in the `useCreateGuild` hook
+   *
+   * Temporarily creating a default Member role, later the users will be able to pick from Guild Templates
+   */
+  urlName: "",
+  roles: [
+    {
+      name: "Member",
+      imageUrl: `/guildLogos/${getRandomInt(286)}.svg`,
+      requirements: [
+        {
+          type: "FREE",
+        },
+      ],
+    },
+  ],
+} satisfies CreateGuildFormType
+
+const CreateGuildFormProvider = ({ children }: PropsWithChildren) => {
+  const methods = useForm<CreateGuildFormType>({
+    mode: "all",
+    resolver: zodResolver(schemas.GuildCreationPayloadSchema),
+    defaultValues,
+  })
+
+  return <FormProvider {...methods}>{children}</FormProvider>
+}
+
+export { CreateGuildFormProvider }
diff --git a/src/app/create-guild/_components/EmailFormField.tsx b/src/app/create-guild/_components/EmailFormField.tsx
new file mode 100644
index 0000000000..01f780436c
--- /dev/null
+++ b/src/app/create-guild/_components/EmailFormField.tsx
@@ -0,0 +1,54 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import useUser from "components/[guild]/hooks/useUser"
+import { useEffect } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+import { CreateGuildFormType } from "../types"
+
+const EmailFormField = () => {
+  const {
+    control,
+    setValue,
+    formState: { touchedFields },
+  } = useFormContext<CreateGuildFormType>()
+  const { emails, platformUsers } = useUser()
+
+  const providedEmail = useWatch({ control, name: "contacts.0.contact" })
+  useEffect(() => {
+    if (!!providedEmail || touchedFields.contacts?.[0]?.contact) return
+
+    const emailAddress = emails?.emailAddress
+    const googleEmailAddress = platformUsers?.find(
+      (pu) => pu.platformName === "GOOGLE"
+    )?.platformUserId
+
+    if (!emailAddress && !googleEmailAddress) return
+
+    setValue("contacts.0.contact", emailAddress ?? googleEmailAddress)
+  }, [touchedFields.contacts, emails, platformUsers, providedEmail, setValue])
+
+  return (
+    <FormField
+      control={control}
+      name="contacts.0.contact"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>Your e-mail</FormLabel>
+          <FormControl>
+            <Input size="lg" {...field} />
+          </FormControl>
+
+          <FormErrorMessage />
+        </FormItem>
+      )}
+    />
+  )
+}
+
+export { EmailFormField }
diff --git a/src/components/create-guild/hooks/useCreateGuild.tsx b/src/app/create-guild/_hooks/useCreateGuild.ts
similarity index 76%
rename from src/components/create-guild/hooks/useCreateGuild.tsx
rename to src/app/create-guild/_hooks/useCreateGuild.ts
index feefdb0f04..4a7136f788 100644
--- a/src/components/create-guild/hooks/useCreateGuild.tsx
+++ b/src/app/create-guild/_hooks/useCreateGuild.ts
@@ -1,4 +1,5 @@
 import { usePostHogContext } from "@/components/Providers/PostHogProvider"
+import { useToast } from "@/components/ui/hooks/useToast"
 import { useYourGuilds } from "@/hooks/useYourGuilds"
 import { Schemas } from "@guildxyz/types"
 import processConnectorError from "components/[guild]/JoinModal/utils/processConnectorError"
@@ -6,13 +7,12 @@ import useJsConfetti from "components/create-guild/hooks/useJsConfetti"
 import useMatchMutate from "hooks/useMatchMutate"
 import useShowErrorToast from "hooks/useShowErrorToast"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
-import useToast from "hooks/useToast"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 import { Guild, GuildBase } from "types"
 import fetcher from "utils/fetcher"
 import getRandomInt from "utils/getRandomInt"
 import slugify from "utils/slugify"
-import { CreateGuildFormType } from "../CreateGuildForm"
+import { CreateGuildFormType } from "../types"
 
 const useCreateGuild = ({
   onError,
@@ -26,9 +26,9 @@ const useCreateGuild = ({
   const { mutate: mutateYourGuilds } = useYourGuilds()
   const matchMutate = useMatchMutate()
 
-  const toast = useToast()
+  const { toast } = useToast()
   const showErrorToast = useShowErrorToast()
-  const triggerConfetti = useJsConfetti()
+  const triggerConfetti = useJsConfetti() // TODO: use the new confetti?
   const router = useRouter()
 
   const fetchData = async (signedValidation: SignedValidation): Promise<Guild> =>
@@ -61,9 +61,9 @@ const useCreateGuild = ({
       )
 
       toast({
-        title: `Guild successfully created!`,
+        title: "Guild successfully created!",
         description: "You're being redirected to its page",
-        status: "success",
+        variant: "success",
       })
       onSuccess?.()
       router.push(`/${response_.urlName}`)
@@ -72,32 +72,18 @@ const useCreateGuild = ({
 
   return {
     ...useSubmitResponse,
-    /**
-     * Temporarily creating a default Member role, later the users will be able to
-     * pick from Guild Templates
-     */
+
     onSubmit: (data: CreateGuildFormType) =>
       useSubmitResponse.onSubmit({
         ...data,
         urlName: slugify(data.name),
         imageUrl: data.imageUrl || `/guildLogos/${getRandomInt(286)}.svg`,
-        roles: [
-          {
-            name: "Member",
-            imageUrl: `/guildLogos/${getRandomInt(286)}.svg`,
-            requirements: [
-              {
-                type: "FREE",
-              },
-            ],
-          },
-        ],
       } satisfies Schemas["GuildCreationPayload"]),
   }
 }
 
-const mutateGuildsCache = (prev: GuildBase[], createdGuild: Guild) => [
-  ...prev,
+const mutateGuildsCache = (prev: GuildBase[] | undefined, createdGuild: Guild) => [
+  ...(prev ?? []),
   {
     id: createdGuild.id,
     name: createdGuild.name,
@@ -110,4 +96,4 @@ const mutateGuildsCache = (prev: GuildBase[], createdGuild: Guild) => [
   },
 ]
 
-export default useCreateGuild
+export { useCreateGuild }
diff --git a/src/app/create-guild/page.tsx b/src/app/create-guild/page.tsx
new file mode 100644
index 0000000000..cda9f3b740
--- /dev/null
+++ b/src/app/create-guild/page.tsx
@@ -0,0 +1,45 @@
+import { Header } from "@/components/Header"
+import { Layout, LayoutBanner, LayoutHero, LayoutMain } from "@/components/Layout"
+import svgToTinyDataUri from "mini-svg-data-uri"
+import { CreateGuildCard } from "./_components/CreateGuildCard"
+import { CreateGuildFormProvider } from "./_components/CreateGuildFormProvider"
+
+export const metadata = {
+  title: "Begin your guild",
+}
+
+const Page = () => (
+  <CreateGuildFormProvider>
+    <Layout>
+      <div
+        className="-z-10 absolute inset-0 opacity-40 dark:opacity-60"
+        style={{
+          background: `radial-gradient(ellipse at center, transparent -250%, hsl(var(--background)) 80%), url("${svgToTinyDataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="30" height="30" fill="none" stroke="#666"><path d="M0 .5H31.5V32"/></svg>`
+          )}")`,
+        }}
+      />
+
+      <LayoutHero className="pb-52">
+        <LayoutBanner className="border-b border-dashed bg-banner-dark">
+          <div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] bg-repeat opacity-5" />
+          <div
+            className="absolute inset-0"
+            style={{
+              background:
+                "radial-gradient(circle at bottom, transparent 5%, hsl(var(--banner-dark)))",
+            }}
+          />
+        </LayoutBanner>
+
+        <Header />
+      </LayoutHero>
+
+      <LayoutMain className="max-w-lg">
+        <CreateGuildCard />
+      </LayoutMain>
+    </Layout>
+  </CreateGuildFormProvider>
+)
+
+export default Page
diff --git a/src/app/create-guild/types.ts b/src/app/create-guild/types.ts
new file mode 100644
index 0000000000..11cb102897
--- /dev/null
+++ b/src/app/create-guild/types.ts
@@ -0,0 +1,6 @@
+import { Schemas } from "@guildxyz/types"
+
+export type CreateGuildFormType = Pick<
+  Schemas["GuildCreationPayload"],
+  "name" | "urlName" | "imageUrl" | "contacts" | "roles" | "theme"
+>
diff --git a/src/components/create-guild/BasicInfo/components/ContactInfo.tsx b/src/components/create-guild/BasicInfo/components/ContactInfo.tsx
index 61774aa32b..61e9ae8400 100644
--- a/src/components/create-guild/BasicInfo/components/ContactInfo.tsx
+++ b/src/components/create-guild/BasicInfo/components/ContactInfo.tsx
@@ -12,11 +12,11 @@ import {
   Text,
 } from "@chakra-ui/react"
 import { ArrowSquareOut, Plus, TrashSimple } from "@phosphor-icons/react"
+import { CreateGuildFormType } from "app/create-guild/types"
 import Button from "components/common/Button"
 import ClientOnly from "components/common/ClientOnly"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import StyledSelect from "components/common/StyledSelect"
-import { CreateGuildFormType } from "components/create-guild/CreateGuildForm"
 import { Controller, useFieldArray, useFormContext } from "react-hook-form"
 import { SelectOption } from "types"
 
diff --git a/src/components/create-guild/CreateGuildButton.tsx b/src/components/create-guild/CreateGuildButton.tsx
deleted file mode 100644
index 3fd5675e2d..0000000000
--- a/src/components/create-guild/CreateGuildButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { walletSelectorModalAtom } from "@/components/Providers/atoms"
-import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { Collapse, Stack } from "@chakra-ui/react"
-import Button from "components/common/Button"
-import { useSetAtom } from "jotai"
-import { useFormContext } from "react-hook-form"
-import { CreateGuildFormType } from "./CreateGuildForm"
-import useCreateGuild from "./hooks/useCreateGuild"
-
-const CreateGuildButton = () => {
-  const { handleSubmit } = useFormContext<CreateGuildFormType>()
-  const { onSubmit, isLoading } = useCreateGuild()
-
-  const { isWeb3Connected } = useWeb3ConnectionManager()
-  const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
-
-  return (
-    <Stack spacing={2}>
-      <Collapse in={!isWeb3Connected}>
-        <Button
-          size="xl"
-          colorScheme="blue"
-          onClick={() => setIsWalletSelectorModalOpen(true)}
-          isDisabled={isWeb3Connected}
-          w="full"
-        >
-          Connect wallet
-        </Button>
-      </Collapse>
-      <Button
-        colorScheme="green"
-        ml="auto"
-        size="xl"
-        w="full"
-        isLoading={isLoading}
-        loadingText="Creating guild"
-        onClick={handleSubmit(onSubmit)}
-        isDisabled={!isWeb3Connected}
-      >
-        Create guild
-      </Button>
-    </Stack>
-  )
-}
-
-export default CreateGuildButton
diff --git a/src/components/create-guild/CreateGuildForm.tsx b/src/components/create-guild/CreateGuildForm.tsx
deleted file mode 100644
index 78fee1a47c..0000000000
--- a/src/components/create-guild/CreateGuildForm.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  Center,
-  FormControl,
-  FormLabel,
-  Heading,
-  Input,
-  Stack,
-} from "@chakra-ui/react"
-import { Schemas } from "@guildxyz/types"
-import useUser from "components/[guild]/hooks/useUser"
-import Card from "components/common/Card"
-import FormErrorMessage from "components/common/FormErrorMessage"
-import usePinata from "hooks/usePinata"
-import { useEffect } from "react"
-import { useFormContext, useWatch } from "react-hook-form"
-import getColorByImage from "utils/getColorByImage"
-import CreateGuildButton from "./CreateGuildButton"
-import IconSelector from "./IconSelector"
-import Name from "./Name"
-
-export type CreateGuildFormType = Pick<
-  Schemas["GuildCreationPayload"],
-  "name" | "imageUrl" | "contacts" | "theme"
->
-
-const CreateGuildForm = () => {
-  const {
-    control,
-    register,
-    setValue,
-    formState: { errors, touchedFields },
-  } = useFormContext<CreateGuildFormType>()
-
-  const iconUploader = usePinata({
-    fieldToSetOnSuccess: "imageUrl",
-    fieldToSetOnError: "imageUrl",
-    control,
-  })
-
-  const { emails, platformUsers } = useUser()
-
-  const providedEmail = useWatch({ control, name: "contacts.0.contact" })
-  useEffect(() => {
-    if (!!providedEmail || touchedFields.contacts?.[0]?.contact) return
-
-    const emailAddress = emails?.emailAddress
-    const googleEmailAddress = platformUsers?.find(
-      (pu) => pu.platformName === "GOOGLE"
-    )?.platformUserId
-
-    if (!emailAddress && !googleEmailAddress) return
-
-    setValue("contacts.0.contact", emailAddress ?? googleEmailAddress)
-  }, [touchedFields.contacts, emails, platformUsers, providedEmail, setValue])
-
-  return (
-    <Stack
-      w="min(100%, var(--chakra-sizes-md))"
-      mx="auto"
-      pt={{ base: 8, md: 16 }}
-      pb={8}
-    >
-      <Card py={6} p={{ base: 5, md: 6 }} mx={{ base: -3, sm: 0 }} boxShadow={"lg"}>
-        <Heading
-          as="h2"
-          fontFamily="display"
-          textAlign="center"
-          fontSize="2xl"
-          mb="7"
-        >
-          Begin your guild
-        </Heading>
-
-        <Center mb="6">
-          <IconSelector
-            uploader={iconUploader}
-            minW={512}
-            minH={512}
-            onGeneratedBlobChange={async (objectURL) => {
-              const generatedThemeColor = await getColorByImage(objectURL)
-              setValue("theme.color", generatedThemeColor)
-            }}
-            boxSize={28}
-          />
-        </Center>
-
-        <FormControl isRequired mb="4">
-          <FormLabel>Guild name</FormLabel>
-          <Name width="full" />
-        </FormControl>
-
-        <FormControl isRequired isInvalid={!!errors.contacts?.[0]?.contact} mb="10">
-          <FormLabel>Your email</FormLabel>
-          <Input
-            {...register("contacts.0.contact", {
-              required: "This field is required",
-              pattern: {
-                value: /\S+@\S+\.\S+/,
-                message: "Invalid e-mail format",
-              },
-            })}
-            size="lg"
-          />
-          <FormErrorMessage>
-            {errors.contacts?.[0]?.contact?.message}
-          </FormErrorMessage>
-        </FormControl>
-
-        <CreateGuildButton />
-      </Card>
-    </Stack>
-  )
-}
-
-export default CreateGuildForm
diff --git a/src/components/create-guild/IconSelector/IconSelector.tsx b/src/components/create-guild/IconSelector/IconSelector.tsx
index aada9e673d..59ac5cf266 100644
--- a/src/components/create-guild/IconSelector/IconSelector.tsx
+++ b/src/components/create-guild/IconSelector/IconSelector.tsx
@@ -24,13 +24,13 @@ import {
   useRadioGroup,
 } from "@chakra-ui/react"
 import { Image } from "@phosphor-icons/react"
+import { CreateGuildFormType } from "app/create-guild/types"
 import LogicDivider from "components/[guild]/LogicDivider"
 import GuildLogo from "components/common/GuildLogo"
 import { Modal } from "components/common/Modal"
 import { Uploader } from "hooks/usePinata/usePinata"
 import React, { ComponentProps, useEffect } from "react"
 import { useController, useFormContext } from "react-hook-form"
-import { CreateGuildFormType } from "../CreateGuildForm"
 import PhotoUploader from "./components/PhotoUploader"
 import SelectorButton from "./components/SelectorButton"
 import icons from "./icons.json"
diff --git a/src/pages/create-guild.tsx b/src/pages/create-guild.tsx
deleted file mode 100644
index 15e4c0a645..0000000000
--- a/src/pages/create-guild.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Box, useColorModeValue } from "@chakra-ui/react"
-import { ThemeProvider } from "components/[guild]/ThemeContext"
-import ClientOnly from "components/common/ClientOnly"
-import { Layout } from "components/common/Layout"
-import CreateGuildForm, {
-  CreateGuildFormType,
-} from "components/create-guild/CreateGuildForm"
-import DynamicDevTool from "components/create-guild/DynamicDevTool"
-import svgToTinyDataUri from "mini-svg-data-uri"
-import { FormProvider, useForm } from "react-hook-form"
-
-const CreateGuildPage = (): JSX.Element => {
-  const methods = useForm<CreateGuildFormType>({
-    mode: "all",
-    defaultValues: {
-      name: "",
-      imageUrl: "",
-      contacts: [
-        {
-          type: "EMAIL",
-          contact: "",
-        },
-      ],
-    },
-  })
-
-  const bgColor = useColorModeValue("var(--chakra-colors-gray-800)", "#1d1d1f")
-  const bgOpacity = useColorModeValue(0.06, 0.06)
-  const pageBgColor = useColorModeValue(
-    "var(--chakra-colors-gray-100)",
-    "var(--chakra-colors-gray-800)"
-  )
-  const bgPatternColor = useColorModeValue("#c5c5ca", "#52525b")
-
-  return (
-    <>
-      <Layout.Root>
-        <Box
-          bg={`radial-gradient(ellipse at center, transparent -250%, ${pageBgColor} 80%), url("${svgToTinyDataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="30" height="30" fill="none" stroke="${bgPatternColor}"><path d="M0 .5H31.5V32"/></svg>`
-          )}")`}
-          bgPosition="top 16px left 0px"
-          minH="100vh"
-        >
-          <Layout.Head ogTitle="Begin your guild" />
-          <Layout.HeaderSection>
-            <Layout.Background
-              opacity={1}
-              bgColor={bgColor}
-              _before={{
-                content: '""',
-                position: "absolute",
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                bg: `radial-gradient(circle at bottom, transparent 5%, ${bgColor}), url('/banner.svg ')`,
-                bgSize: { base: "auto 100%", sm: "auto 115%" },
-                bgPosition: "top 5px right 0px",
-                opacity: bgOpacity,
-              }}
-              borderBottomWidth="1px"
-              borderStyle="dashed"
-              offset={200}
-              boxShadow="inset 1px -2px 8px 0px rgba(0, 0, 0, 0.06)"
-            />
-            <Layout.Header />
-          </Layout.HeaderSection>
-          <Layout.MainSection>
-            <ClientOnly>
-              <FormProvider {...methods}>
-                <CreateGuildForm />
-                <DynamicDevTool control={methods.control} />
-              </FormProvider>
-            </ClientOnly>
-          </Layout.MainSection>
-        </Box>
-      </Layout.Root>
-    </>
-  )
-}
-
-const CreateGuildPageWrapper = (): JSX.Element => (
-  <ThemeProvider>
-    <CreateGuildPage />
-  </ThemeProvider>
-)
-
-export default CreateGuildPageWrapper