chore: merge v3-main, resolve conflicts

package.json

@@ -29,6 +29,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)/[guildId]/[roleGroupId]/page.tsx

@@ -72,11 +72,10 @@ const RoleCard = async ({ role }: { role: Role }) => {
       }
     }) ?? [],
   )) as Reward[];
-  //console.log(rewards);
 
   return (
-    <Card className="flex flex-col border md:flex-row" key={role.id}>
-      <div className="border-r-2 p-6 md:w-1/2">
+    <Card className="flex flex-col md:flex-row" key={role.id}>
+      <div className="border-r p-6 md:w-1/2">
         <div className="flex items-center gap-3">
           {role.imageUrl && (
             <img
@@ -91,16 +90,16 @@ const RoleCard = async ({ role }: { role: Role }) => {
           {role.description}
         </p>
         {!!rewards.length && (
-          <ScrollArea className="mt-8 h-64 rounded-lg border-2">
-            <div className="flex flex-col">
+          <ScrollArea className="mt-8 h-64 rounded-lg border pr-3">
+            <div className="flex flex-col gap-4">
               {rewards.map((reward) => (
                 <Reward reward={reward} key={reward.id} />
               ))}
             </div>
           </ScrollArea>
         )}
       </div>
-      <div className="bg-background p-6 md:w-1/2">
+      <div className="bg-card-secondary p-6 md:w-1/2">
         <div className="flex items-center justify-between">
           <span className="font-bold text-foreground-secondary text-xs">
             REQUIREMENTS
@@ -117,7 +116,7 @@ const RoleCard = async ({ role }: { role: Role }) => {
 
 const Reward = ({ reward }: { reward: Reward }) => {
   return (
-    <div className="border-b p-6">
+    <div className="border-b p-4 last:border-b-0">
       <div className="mb-2 font-medium">{reward.name}</div>
       <div className="text-foreground-dimmed text-sm">{reward.description}</div>
       <pre className="mt-3 text-foreground-secondary text-xs">

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",