feat: RequirementLink component

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/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/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/Requirement.stories.tsx

@@ -6,6 +6,7 @@ import {
   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";
@@ -26,6 +27,9 @@ const RequirementExample = () => (
 
         <RequirementFooter className="text-secondary text-sm">
           <ChainIndicator chain={1} />
+          <RequirementLink href="https://polygonscan.com/token/0xff04820c36759c9f5203021fe051239ad2dcca8a">
+            View on explorer
+          </RequirementLink>
         </RequirementFooter>
       </RequirementContent>
     </Requirement>

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",
+  },
+};