Merge branch 'shadcn-ui' into v2-explorer

.vscode/settings.json

@@ -2,7 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript][typescriptreact]": {
     "editor.codeActionsOnSave": {
-      "source.organizeImports": "explicit"
-    }
+      "quickfix.biome": "explicit",
+      "source.organizeImports.biome": "explicit"
+    },
   }
 }

biome.json

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

next.config.js

@@ -210,12 +210,6 @@ const nextConfig = {
         source: "/",
         destination: "/explorer",
         permanent: false,
-        has: [
-          {
-            type: "host",
-            value: "guild.xyz",
-          },
-        ],
       },
       {
         source: "/community",

src/app/globals.css

@@ -30,7 +30,7 @@
     --muted: 0 0% 100%;
     --muted-foreground: 240 5% 56%;
 
-    --accent: 240 7% 90%;
+    --accent: 240 5% 96%;
     --accent-foreground: 240 4% 16%;
 
     --anchor-foreground: 221 83% 53%;
@@ -48,8 +48,8 @@
     --success-active: 142 72% 29%;
     --success-foreground: 0 0% 100%;
 
-    --border: 240 6% 90%;
-    --border-muted: 240 6% 94%;
+    --border: 240 5.9% 90%;
+    --border-muted: 240 3% 93%;
     --input: var(--border);
     --ring: 240, 0%, 45%, 25%;
 

src/components/[guild]/Requirements/components/ConnectRequirementPlatformButton.tsx

@@ -1,12 +1,14 @@
 import { ConnectEmailButton } from "@/components/Account/components/AccountModal/components/EmailAddress"
 import { ConnectFarcasterButton } from "@/components/Account/components/AccountModal/components/FarcasterProfile"
-import { ButtonProps } from "@chakra-ui/react"
+import { PLATFORM_COLORS } from "@/components/Account/components/AccountModal/components/SocialAccount"
+import { Button, ButtonProps } from "@/components/ui/Button"
+import { cn } from "@/lib/utils"
+import { useToast } from "@chakra-ui/react"
+import type { Icon } from "@phosphor-icons/react"
 import useConnectPlatform from "components/[guild]/JoinModal/hooks/useConnectPlatform"
 import useMembershipUpdate from "components/[guild]/JoinModal/hooks/useMembershipUpdate"
 import useUser from "components/[guild]/hooks/useUser"
-import Button from "components/common/Button"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"
-import useToast from "hooks/useToast"
 import REQUIREMENTS from "requirements"
 import { RequirementType } from "requirements/types"
 import rewards from "rewards"
@@ -19,7 +21,7 @@ function requirementTypeToPlatformName(type: RequirementType): PlatformName {
   return REQUIREMENTS[type].types[0].split("_")[0] as PlatformName
 }
 
-const RequirementConnectButton = (props: ButtonProps) => {
+const RequirementConnectButton = () => {
   const { platformUsers, emails, farcasterProfiles } = useUser()
   const { type, roleId, id } = useRequirementContext()
   const platform = requirementTypeToPlatformName(type)
@@ -62,26 +64,31 @@ const RequirementConnectButton = (props: ButtonProps) => {
         ? ConnectFarcasterButton
         : ConnectRequirementPlatformButton
 
-  return null
-  // TODO
-  // return (
-  //   <ButtonComponent
-  //     isReconnection={isReconnection}
-  //     onSuccess={onSuccess}
-  //     // TODO:
-  //     // leftIcon={<Icon as={rewards[platform]?.icon} />}
-  //     // size="xs"
-  //     // iconSpacing="1"
-  //     {...props}
-  //   />
-  // )
+  return (
+    <ButtonComponent
+      isReconnection={isReconnection}
+      onSuccess={onSuccess}
+      className="gap-1"
+      size="xs"
+      // TODO: find a better solution for handling the icon
+      {...(platform === "EMAIL" || platform === "FARCASTER"
+        ? undefined
+        : { icon: rewards[platform]?.icon })}
+    />
+  )
 }
 
 const ConnectRequirementPlatformButton = ({
   onSuccess,
   isReconnection,
+  icon: IconComponent,
+  className,
   ...props
-}: ButtonProps & { onSuccess: () => void; isReconnection?: boolean }) => {
+}: ButtonProps & {
+  onSuccess: () => void
+  isReconnection?: boolean
+  icon?: Icon
+}) => {
   const { type } = useRequirementContext()
 
   const platform = requirementTypeToPlatformName(type)
@@ -97,9 +104,10 @@ const ConnectRequirementPlatformButton = ({
       onClick={onConnect}
       isLoading={isLoading}
       loadingText={loadingText}
-      colorScheme={rewards[platform]?.colorScheme}
+      className={cn(PLATFORM_COLORS[platform], className)}
       {...props}
     >
+      {!!IconComponent && <IconComponent />}
       {`${isReconnection ? "Reconnect" : "Connect"} ${
         rewards[platform]?.name === "X" ? "" : rewards[platform]?.name
       }`}

src/components/common/CardMotionWrapper.tsx

@@ -1,7 +1,13 @@
-// import { EASINGS } from "@chakra-ui/react"
 import { LazyMotion, domMax, m } from "framer-motion"
 import { PropsWithChildren } from "react"
 
+const EASINGS = {
+  ease: [0.25, 0.1, 0.25, 1],
+  easeIn: [0.4, 0, 1, 1],
+  easeOut: [0, 0, 0.2, 1],
+  easeInOut: [0.4, 0, 0.2, 1],
+} as const
+
 type Props = {
   animateOnMount?: boolean
   delay?: number
@@ -21,16 +27,14 @@ const CardMotionWrapper = ({
       animate={{
         opacity: 1,
         scale: 1,
-        // transition: { delay, duration: 0.2, ease: EASINGS.easeOut },
+        transition: { delay, duration: 0.2, ease: EASINGS.easeOut },
       }}
       exit={{
         opacity: 0,
         scale: 0.95,
-        // transition: { duration: 0.1, ease: EASINGS.easeIn },
+        transition: { duration: 0.1, ease: EASINGS.easeIn },
       }}
-      // transition={{ duration: 0.3, ease: EASINGS.easeInOut }}
-      // TODO: solve this if it is relevant
-      // sx={{ "> *": { height: "full" } }}
+      transition={{ duration: 0.3, ease: EASINGS.easeInOut }}
     >
       {children}
     </m.div>

src/v2/components/Account/components/AccountModal/components/AccountConnections.tsx

@@ -60,7 +60,7 @@ const AccountConnections = () => {
 
       <AccountSectionTitle
         title="Linked addresses"
-        className="gap-3"
+        className="gap-1.5"
         titleRightElement={
           addresses?.length > 1 ? (
             <div className="flex w-full items-center justify-between">

src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx

@@ -330,7 +330,7 @@ const ConnectEmailButton = ({
         ) : (
           <>
             {leftIcon}
-            emails?.emailAddress || "Connect"
+            {emails?.emailAddress || "Connect"}
           </>
         )}
       </Button>

src/v2/components/Account/components/AccountModal/components/SharedSocials.tsx

@@ -10,6 +10,7 @@ import useGuild, { useSimpleGuild } from "components/[guild]/hooks/useGuild"
 import useUser from "components/[guild]/hooks/useUser"
 
 import { GuildLogo } from "@/components/GuildLogo"
+import { anchorVariants } from "@/components/ui/Anchor"
 import { Button, ButtonProps } from "@/components/ui/Button"
 import {
   Dialog,
@@ -52,7 +53,7 @@ const SharedSocials = () => {
   return (
     <Dialog>
       {/* TODO: scrollBehavior="inside" (maybe we can do it here and don't need to abstract it into the component?) */}
-      <DialogTrigger>
+      <DialogTrigger asChild>
         {!guildSharedSocial ? (
           <Button {...buttonProps}>
             <Shield weight="bold" className="mr-1" />
@@ -84,7 +85,10 @@ const SharedSocials = () => {
           Choose which guilds you'd like to share your profile with.{" "}
           <a
             href="https://help.guild.xyz/en/articles/8489031-privacy-for-members"
-            className="font-semibold text-muted-foreground"
+            className={anchorVariants({
+              variant: "muted",
+              className: "font-semibold",
+            })}
             target="_blank"
           >
             Learn more{" "}
@@ -100,15 +104,18 @@ const SharedSocials = () => {
                 guildId={guildSharedSocial.guildId}
                 sharedSocials={sharedSocials}
               />
-              <hr />
+              <hr className="border-border-muted" />
             </>
           )}
           {restSharedSocials.map((sharedSocial) => (
-            <ShareSocialsWithGuildSelect
-              key={sharedSocial.guildId}
-              guildId={sharedSocial.guildId}
-              sharedSocials={sharedSocials}
-            />
+            <>
+              <ShareSocialsWithGuildSelect
+                key={sharedSocial.guildId}
+                guildId={sharedSocial.guildId}
+                sharedSocials={sharedSocials}
+              />
+              <hr className="border-border-muted" />
+            </>
           ))}
         </div>
 

src/v2/components/Header/NavMenu.tsx

@@ -94,7 +94,7 @@ export const NavMenu = () => (
             Guild SDK
           </NavButton>
 
-          <NavButton href="https://guildxyz.notion.site/Join-the-Guild-Team-7ffd822c4d7749cb9c1adb525c858ae1">
+          <NavButton href="https://careers.guild.xyz">
             <UsersThree weight="bold" />
             Team
           </NavButton>

src/v2/components/ThemeToggle.tsx

@@ -1,13 +1,16 @@
 "use client"
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
+import { useColorMode } from "@chakra-ui/react"
 import { Desktop, Moon, Sun } from "@phosphor-icons/react/dist/ssr"
 import { useTheme } from "next-themes"
-import { useIsClient } from "usehooks-ts"
+import { useIsClient, useLocalStorage } from "usehooks-ts"
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme()
   const isClient = useIsClient()
+  const { colorMode: chakraColorMode, setColorMode: setChakraColorMode } =
+    useColorMode()
 
   if (!isClient) {
     return
@@ -16,9 +19,13 @@ export function ThemeToggle() {
   return (
     <ToggleGroup
       type="single"
-      value={theme}
+      value={chakraColorMode || theme}
       onValueChange={(selected) => {
-        if (selected) setTheme(selected)
+        if (selected) {
+          console.log("selected", selected)
+          setTheme(selected)
+          if (typeof setChakraColorMode === "function") setChakraColorMode(selected)
+        }
       }}
       aria-label="Toggle between themes"
     >

src/v2/components/ui/Anchor.tsx

@@ -6,7 +6,7 @@ import Link from "next/link"
 import * as React from "react"
 
 const anchorVariants = cva(
-  "underline-offset-4 focus-visible:ring-ring focus-visible:ring-4 outline-none",
+  "underline-offset-4 focus:ring-ring focus-visible:ring-4 outline-none",
   {
     variants: {
       variant: {

src/v2/components/ui/Badge.tsx

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority"
 import { ElementRef, HTMLAttributes, forwardRef } from "react"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border-2 px-2 transition-colors focus:outline-none focus:ring-4 focus:ring-ring",
+  "inline-flex items-center rounded-md border-2 px-2 transition-colors focus:outline-none focus-visible:ring-4 focus:ring-ring",
   {
     variants: {
       variant: {

src/v2/components/ui/Button.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 import { CircleNotch } from "@phosphor-icons/react/dist/ssr"
 
 const buttonVariants = cva(
-  "font-medium inline-flex items-center justify-center whitespace-nowrap rounded-xl transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base min-w-max",
+  "font-medium inline-flex items-center justify-center whitespace-nowrap rounded-xl transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-xl text-base min-w-max",
   {
     variants: {
       variant: {

src/v2/components/ui/Dialog.tsx

@@ -30,7 +30,7 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 export const dialogContentVariants = cva(
-  "w-full my-16 relative rounded-xl bg-card shadow-lg p-10 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "w-full my-16 relative rounded-xl bg-card shadow-lg p-10 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 focus-visible:outline-none ring-ring focus-visible:ring-4 ring-offset-0",
   {
     variants: {
       size: {
@@ -82,7 +82,7 @@ const DialogCloseButton = React.forwardRef<
   <DialogPrimitive.Close
     ref={ref}
     className={cn(
-      "absolute top-8 right-10 rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-4 focus-visible:ring-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+      "absolute top-8 right-10 rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-ring focus-visible:ring-4 disabled:pointer-events-none data-[state=open]:text-muted-foreground",
       className
     )}
     {...props}

src/v2/components/ui/DropdownMenu.tsx

@@ -86,7 +86,7 @@ const DropdownMenuItem = forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex h-10 cursor-default select-none items-center px-2 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex h-10 cursor-pointer select-none items-center px-2 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -102,7 +102,7 @@ const DropdownMenuCheckboxItem = forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex h-10 cursor-default select-none items-center rounded-sm pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex h-10 cursor-pointer select-none items-center rounded-sm pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -125,7 +125,7 @@ const DropdownMenuRadioItem = forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex h-10 cursor-default select-none items-center rounded-sm pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex h-10 cursor-pointer select-none items-center rounded-sm pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -164,7 +164,7 @@ const DropdownMenuSeparator = forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("h-px bg-border-muted", className)}
+    className={cn("h-px bg-border", className)}
     {...props}
   />
 ))

src/v2/components/ui/Input.tsx

@@ -3,7 +3,7 @@ import { VariantProps, cva } from "class-variance-authority"
 import { InputHTMLAttributes, forwardRef } from "react"
 
 const inputVariants = cva(
-  "flex w-full border border-input bg-muted px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full border border-input bg-muted px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {

src/v2/components/ui/Toast.tsx

@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "bg-card text-foreground group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md p-4 pr-8 shadow-lg transition-transform data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full data-[state=open]:sm:slide-in-from-right-full focus:outline-none focus-visible:ring-4 focus-visible:ring-ring",
+  "bg-card text-foreground group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md p-4 pr-8 shadow-lg transition-transform data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full data-[state=open]:sm:slide-in-from-right-full focus:outline-none focus-visible:ring-4 focus:ring-ring",
   {
     variants: {
       variant: {
@@ -61,7 +61,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 w-max shrink-0 items-center justify-center rounded-md bg-secondary px-3 font-medium text-sm transition-colors hover:bg-secondary-hover focus:outline-none focus-visible:ring-4 focus-visible:ring-ring active:bg-secondary-active disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex h-8 w-max shrink-0 items-center justify-center rounded-md bg-secondary px-3 font-medium text-sm transition-colors hover:bg-secondary-hover focus:outline-none focus:ring-ring focus-visible:ring-4 active:bg-secondary-active disabled:pointer-events-none disabled:opacity-50",
       className
     )}
     {...props}