Merge branch 'v3-main' into add-guild-page

package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.60.2",

src/app/(dashboard)/explorer/components/CreateGuildLink.tsx

@@ -2,15 +2,18 @@ import { buttonVariants } from "@/components/ui/Button";
 import { Plus } from "@phosphor-icons/react/dist/ssr";
 import Link from "next/link";
 
-export const CreateGuildLink = () => (
+export const CreateGuildLink = ({ className }: { className?: string }) => (
   <Link
     href="/create-guild"
     aria-label="Create guild"
     prefetch={false}
     className={buttonVariants({
       variant: "ghost",
       size: "sm",
-      className: "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3",
+      className: [
+        "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3",
+        className,
+      ],
     })}
   >
     <Plus />

src/app/(dashboard)/explorer/page.tsx

@@ -35,7 +35,15 @@ export default async function Explorer() {
 
   return (
     <>
-      <main className="container mx-auto grid gap-4 py-16">
+      <div
+        className="-z-10 absolute top-0 right-0 left-0 h-80 bg-[center_top_0.5rem] bg-[length:theme(screens.lg)_auto] bg-[url('/images/banner-light.svg')] bg-repeat opacity-10 dark:bg-[url('/images/banner.svg')] dark:opacity-5"
+        style={{
+          maskImage:
+            "radial-gradient(ellipse at top, var(--background), transparent 90%)",
+        }}
+      />
+
+      <main className="container relative mx-auto grid gap-4 py-16">
         <section className="pt-6 pb-8">
           <h1
             className="font-black font-display text-5xl tracking-tight"
@@ -123,7 +131,7 @@ async function YourGuilds() {
         or create your own!
       </p>
 
-      <CreateGuildLink />
+      <CreateGuildLink className="ml-auto" />
     </div>
   );
 }

src/components/Providers.tsx

@@ -7,6 +7,7 @@ import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import type { FunctionComponent, PropsWithChildren } from "react";
 import { WagmiProvider } from "wagmi";
+import { TooltipProvider } from "./ui/Tooltip";
 
 const queryClient = new QueryClient();
 
@@ -21,12 +22,14 @@ export const Providers: FunctionComponent<PropsWithChildren> = ({
         enableSystem
         disableTransitionOnChange
       >
-        <WagmiProvider config={wagmiConfig}>
-          <QueryClientProvider client={queryClient}>
-            {children}
-            <ReactQueryDevtools initialIsOpen={false} />
-          </QueryClientProvider>
-        </WagmiProvider>
+        <TooltipProvider>
+          <WagmiProvider config={wagmiConfig}>
+            <QueryClientProvider client={queryClient}>
+              {children}
+              <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
+          </WagmiProvider>
+        </TooltipProvider>
       </ThemeProvider>
     </JotaiProvider>
   );

src/components/SignInDialog.tsx

@@ -96,15 +96,15 @@ const WalletList = () => {
           <span>{"By continuing, you agree to our "}</span>
           <Anchor
             href="/privacy-policy"
-            variant="muted"
+            variant="secondary"
             onClick={() => setOpen(false)}
           >
             Privacy Policy
           </Anchor>
           <span>{" and "}</span>
           <Anchor
             href="/terms-of-use"
-            variant="muted"
+            variant="secondary"
             onClick={() => setOpen(false)}
           >
             Terms of use

src/components/requirements/ChainIndicator.tsx

@@ -0,0 +1,13 @@
+import { Badge } from "@/components/ui/Badge";
+import { CHAINS, type SupportedChainID } from "@/config/chains";
+
+export const ChainIndicator = ({ chain }: { chain: SupportedChainID }) => (
+  <Badge size="sm">
+    <img
+      src={CHAINS[chain].icon}
+      alt={CHAINS[chain].name}
+      className="size-3.5"
+    />
+    <span>{CHAINS[chain].name}</span>
+  </Badge>
+);

src/components/requirements/DataBlock.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export const DataBlock = ({ children }: PropsWithChildren): JSX.Element => {
+  return (
+    <span className="h-6 break-words rounded-md bg-blackAlpha px-1.5 py-0.5 font-mono text-sm dark:bg-blackAlpha-hard">
+      {children}
+    </span>
+  );
+};

src/components/requirements/DataBlockWithCopy.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { Check } from "@phosphor-icons/react/dist/ssr";
+import { useClipboard } from "foxact/use-clipboard";
+import { useDebouncedState } from "foxact/use-debounced-state";
+import { type PropsWithChildren, useEffect } from "react";
+import { DataBlock } from "./DataBlock";
+
+type Props = {
+  text: string;
+};
+
+export const DataBlockWithCopy = ({
+  text,
+  children,
+}: PropsWithChildren<Props>): JSX.Element => {
+  const { copied, copy } = useClipboard({
+    timeout: 1500,
+  });
+
+  /**
+   * Maintaining a debounced copied state too, so we can change the tooltip content only after the tooltip is actually invisible
+   */
+
+  const [debouncedCopied, debouncilySetState] = useDebouncedState(copied, 200);
+
+  useEffect(() => {
+    debouncilySetState(copied);
+  }, [debouncilySetState, copied]);
+
+  const tooltipInCopiedState = copied || debouncedCopied;
+
+  return (
+    <Tooltip open={copied || undefined}>
+      <TooltipTrigger
+        onClick={() => copy(text)}
+        className="inline-flex rounded-md"
+      >
+        <DataBlock>
+          <span>{children ?? text}</span>
+        </DataBlock>
+      </TooltipTrigger>
+
+      <TooltipPortal>
+        <TooltipContent side="top" className="flex items-center gap-1.5">
+          {tooltipInCopiedState && <Check weight="bold" />}
+          <span>{tooltipInCopiedState ? "Copied" : "Click to copy"}</span>
+        </TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  );
+};

src/components/requirements/Requirement.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/cssUtils";
+import type { PropsWithChildren } from "react";
+
+export const Requirement = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div className={cn("flex w-full items-center gap-4 py-2", className)}>
+    {children}
+  </div>
+);
+
+export const RequirementImage = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div
+    className={cn(
+      "flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full bg-blackAlpha dark:bg-blackAlpha-hard",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+export const RequirementContent = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div className={cn("flex flex-grow flex-col items-start", className)}>
+    {children}
+  </div>
+);
+
+export const RequirementFooter = ({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <div
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 has-[>*]:mt-1",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

src/components/requirements/RequirementLink.tsx

@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from "react";
+import { Anchor } from "../ui/Anchor";
+
+export const RequirementLink = ({
+  href,
+  children,
+}: PropsWithChildren<{ href: string }>) => (
+  <Anchor
+    href={href}
+    target="_blank"
+    rel="noopener"
+    variant="secondary"
+    showExternal
+    className="font-medium text-xs"
+  >
+    {children}
+  </Anchor>
+);

src/components/ui/Anchor.tsx

@@ -12,7 +12,7 @@ const anchorVariants = cva(
       variant: {
         default: "text-foreground hover:underline",
         highlighted: "text-blue-500 dark:text-blue-400 hover:underline",
-        muted: "text-muted-foreground hover:underline",
+        secondary: "text-foreground-secondary hover:underline",
         unstyled: "",
       },
     },

src/components/ui/Badge.tsx

@@ -7,7 +7,7 @@ export const badgeVariants = cva(
   {
     variants: {
       size: {
-        sm: "text-xs h-5",
+        sm: "text-xs h-5 gap-1",
         md: "text-sm h-6",
         lg: "text-base h-8",
       },

src/components/ui/Button.tsx

@@ -32,7 +32,7 @@ const buttonVariants = cva(
       },
       size: {
         xs: "h-6 px-2 text-xs gap-1",
-        sm: "h-8 px-3 text-sm",
+        sm: "h-8 px-3 text-sm gap-1",
         md: "h-11 px-4 py-2",
         lg: "h-12 px-6 py-4 text-lg",
         xl: "h-14 px-6 py-4 text-lg gap-2",

src/components/ui/Tooltip.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { cn } from "@/lib/cssUtils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type FC,
+  forwardRef,
+} from "react";
+
+const tooltipVariants = cva(
+  "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm animate-in px-3 py-1.5 text-center font-medium font-sans text-sm shadow-md data-[state=closed]:animate-out",
+  {
+    variants: {
+      variant: {
+        tooltip:
+          "bg-tooltip text-tooltip-foreground rounded-xl [&_svg.tooltip-arrow]:fill-tooltip",
+        popover:
+          "bg-popover text-popover-foreground rounded-lg outline outline-1 outline-border [&_svg.tooltip-arrow]:fill-popover [&_svg.tooltip-arrow]:[filter:drop-shadow(1px_0_0_hsl(var(--border)))_drop-shadow(-1px_0_0_hsl(var(--border)))_drop-shadow(0_1px_0_hsl(var(--border)))]",
+      },
+    },
+    defaultVariants: {
+      variant: "tooltip",
+    },
+  },
+);
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip: FC<ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>> = ({
+  ...props
+}) => <TooltipPrimitive.Root delayDuration={0} {...props} />;
+
+const TooltipTrigger = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <TooltipPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "outline-none focus-visible:ring-4 focus-visible:ring-ring",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </TooltipPrimitive.Trigger>
+));
+
+export interface TooltipContentProps
+  extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+    VariantProps<typeof tooltipVariants> {}
+
+const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, sideOffset = 4, variant, children, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(tooltipVariants({ variant, className }))}
+    {...props}
+  >
+    {children}
+    <TooltipPrimitive.Arrow className="tooltip-arrow" />
+  </TooltipPrimitive.Content>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipPortal,
+};

src/config/chains.ts

@@ -0,0 +1,21 @@
+import { mainnet, sepolia } from "viem/chains";
+import type { Register } from "wagmi";
+
+export const CHAINS = {
+  [mainnet.id]: {
+    name: mainnet.name,
+    icon: "/chainLogos/eth.svg",
+  },
+  [sepolia.id]: {
+    name: sepolia.name,
+    icon: "/chainLogos/eth.svg",
+  },
+} satisfies Record<
+  SupportedChainID,
+  {
+    name: string;
+    icon: string;
+  }
+>;
+
+export type SupportedChainID = Register["config"]["chains"][number]["id"];