feat: requirement building blocks

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,16 @@
+import { Badge } from "@/components/ui/Badge";
+import { CHAINS } from "@/config/chains";
+import type { Register } from "wagmi";
+
+export const ChainIndicator = ({
+  chain,
+}: { chain: Register["config"]["chains"][number]["id"] }) => (
+  <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="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,55 @@
+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="rounded-md">
+        <DataBlock>
+          <span>{children ?? text}</span>
+        </DataBlock>
+      </TooltipTrigger>
+
+      <TooltipPortal>
+        <TooltipContent side="top" className="flex items-center gap-1.5">
+          {tooltipInCopiedState && (
+            <Check weight="bold" className="text-icon-success" />
+          )}
+          <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/config/chains.ts

@@ -0,0 +1,19 @@
+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<
+  Register["config"]["chains"][number]["id"],
+  {
+    name: string;
+    icon: string;
+  }
+>;

src/stories/Anchor.stories.tsx

@@ -35,11 +35,11 @@ export const Default: Story = {
   },
 };
 
-export const Muted: Story = {
+export const Secondary: Story = {
   args: {
     ...Default.args,
-    variant: "muted",
-    children: "Muted",
+    variant: "secondary",
+    children: "Secondary",
   },
   argTypes: {
     ...Default.argTypes,

src/stories/requirements/ChainIndicator.stories.tsx

@@ -0,0 +1,17 @@
+import { ChainIndicator } from "@/components/requirements/ChainIndicator";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ChainIndicator> = {
+  title: "Requirement building blocks/ChainIndicator",
+  component: ChainIndicator,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChainIndicator>;
+
+export const Default: Story = {
+  args: {
+    chain: 1,
+  },
+};

src/stories/requirements/DataBlock.stories.tsx

@@ -0,0 +1,17 @@
+import { DataBlock } from "@/components/requirements/DataBlock";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof DataBlock> = {
+  title: "Requirement building blocks/DataBlock",
+  component: DataBlock,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataBlock>;
+
+export const Default: Story = {
+  args: {
+    children: "DataBlock",
+  },
+};

src/stories/requirements/DataBlockWithCopy.stories.tsx

@@ -0,0 +1,24 @@
+import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy";
+import { TooltipProvider } from "@/components/ui/Tooltip";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof DataBlockWithCopy> = {
+  title: "Requirement building blocks/DataBlockWithCopy",
+  component: DataBlockWithCopy,
+  decorators: (Story) => (
+    <TooltipProvider>
+      <Story />
+    </TooltipProvider>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataBlockWithCopy>;
+
+export const Default: Story = {
+  args: {
+    children: "DataBlockWithCopy",
+    text: "DataBlockWithCopy",
+  },
+};

src/stories/requirements/Requirement.stories.tsx

@@ -0,0 +1,53 @@
+import { ChainIndicator } from "@/components/requirements/ChainIndicator";
+import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy";
+import {
+  Requirement,
+  RequirementContent,
+  RequirementFooter,
+  RequirementImage,
+} from "@/components/requirements/Requirement";
+import { RequirementLink } from "@/components/requirements/RequirementLink";
+import { Card } from "@/components/ui/Card";
+import { TooltipProvider } from "@/components/ui/Tooltip";
+import { QuestionMark } from "@phosphor-icons/react/dist/ssr";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const RequirementExample = () => (
+  <Card className="max-w-sm px-6 py-4">
+    <Requirement>
+      <RequirementImage>
+        <QuestionMark weight="bold" className="size-6" />
+      </RequirementImage>
+      <RequirementContent>
+        <p>
+          <span>{"Copy "}</span>
+          <DataBlockWithCopy text="this text" />
+          <span>{" to your clipboard"}</span>
+        </p>
+
+        <RequirementFooter className="text-secondary text-sm">
+          <ChainIndicator chain={1} />
+          <RequirementLink href="https://polygonscan.com/token/0xff04820c36759c9f5203021fe051239ad2dcca8a">
+            View on explorer
+          </RequirementLink>
+        </RequirementFooter>
+      </RequirementContent>
+    </Requirement>
+  </Card>
+);
+
+const meta: Meta<typeof RequirementExample> = {
+  title: "Requirement building blocks/Requirement",
+  component: RequirementExample,
+  decorators: (Story) => (
+    <TooltipProvider>
+      <Story />
+    </TooltipProvider>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RequirementExample>;
+
+export const Default: Story = {};

src/stories/requirements/RequirementLink.stories.tsx

@@ -0,0 +1,18 @@
+import { RequirementLink } from "@/components/requirements/RequirementLink";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof RequirementLink> = {
+  title: "Requirement building blocks/RequirementLink",
+  component: RequirementLink,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RequirementLink>;
+
+export const Default: Story = {
+  args: {
+    href: "https://polygonscan.com/token/0xff04820c36759c9f5203021fe051239ad2dcca8a",
+    children: "Guild Pin contract",
+  },
+};

src/styles/globals.css

@@ -63,6 +63,17 @@ html {
   --blue-800: #1e40af;
   --blue-900: #1e3a8a;
 
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-200: #fed7aa;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #c2410c;
+  --orange-800: #9a3412;
+  --orange-900: #7c2d12;
+
   --red-50: #fef2f2;
   --red-100: #fee2e2;
   --red-200: #fecaca;
@@ -156,6 +167,7 @@ html {
 
   --icon-success: var(--green-500);
   --icon-error: var(--red-500);
+  --icon-warning: var(--orange-500);
 }
 
 .dark {
@@ -213,6 +225,7 @@ html {
 
   --icon-success: var(--green-400);
   --icon-error: var(--red-400);
+  --icon-warning: var(--orange-300);
 }
 
 body {