feat: ChainIndicator component

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

@@ -12,7 +12,7 @@ type Props = {
   error?: string;
 };
 
-const DataBlock = ({
+export const DataBlock = ({
   isLoading,
   error,
   children,
@@ -38,5 +38,3 @@ const DataBlock = ({
     </Tooltip>
   );
 };
-
-export { DataBlock };

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