From 1a8cc142da6e60bfa97b5333f4dda8ace0762769 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Thu, 28 Nov 2024 09:33:48 +0100
Subject: [PATCH] feat: ChainIndicator component

---
 public/chainLogos/eth.svg                     |  1 +
 .../requirements/ChainIndicator.tsx           | 16 ++++++++++++++++
 src/components/requirements/DataBlock.tsx     |  4 +---
 src/components/ui/Badge.tsx                   |  2 +-
 src/config/chains.ts                          | 19 +++++++++++++++++++
 .../requirements/ChainIndicator.stories.tsx   | 17 +++++++++++++++++
 6 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 public/chainLogos/eth.svg
 create mode 100644 src/components/requirements/ChainIndicator.tsx
 create mode 100644 src/config/chains.ts
 create mode 100644 src/stories/requirements/ChainIndicator.stories.tsx

diff --git a/public/chainLogos/eth.svg b/public/chainLogos/eth.svg
new file mode 100644
index 0000000000..1f9ad00f9f
--- /dev/null
+++ b/public/chainLogos/eth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><linearGradient id="eth-c" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF" stop-opacity=".5"/><stop offset="100%" stop-opacity=".5"/></linearGradient><circle id="eth-b" cx="16" cy="15" r="15"/><filter id="eth-a" width="111.7%" height="111.7%" x="-5.8%" y="-4.2%" filterUnits="objectBoundingBox"><feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199473505 0"/></filter><path id="eth-e" d="M16.4977734,20.9675435 L23.9999473,16.616495 L16.4977207,26.9946245 L16.4976173,26.9943278 L9,16.6164144 L16.4977734,20.9674935 Z M16.4977471,3.00004297 L23.9954941,15.2198561 L16.4977734,19.5730917 L9,15.2198561 L16.4977471,3.00004297 Z"/><filter id="eth-d" width="123.3%" height="114.6%" x="-11.7%" y="-5.2%" filterUnits="objectBoundingBox"><feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.204257246 0"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#eth-a)" xlink:href="#eth-b"/><use fill="#627EEA" xlink:href="#eth-b"/><use fill="url(#eth-c)" style="mix-blend-mode:soft-light" xlink:href="#eth-b"/><circle cx="16" cy="15" r="14.5" stroke="#000" stroke-opacity=".097"/><g fill-rule="nonzero"><use fill="#000" filter="url(#eth-d)" xlink:href="#eth-e"/><use fill="#FFF" fill-opacity="0" fill-rule="evenodd" xlink:href="#eth-e"/></g><g fill="#FFF" fill-rule="nonzero" transform="translate(9 3)"><polygon fill-opacity=".602" points="7.498 0 7.498 8.87 14.995 12.22"/><polygon points="7.498 0 0 12.22 7.498 8.87"/><polygon fill-opacity=".602" points="7.498 17.968 7.498 23.995 15 13.616"/><polygon points="7.498 23.995 7.498 17.967 0 13.616"/><polygon fill-opacity=".2" points="7.498 16.573 14.995 12.22 7.498 8.872"/><polygon fill-opacity=".602" points="0 12.22 7.498 16.573 7.498 8.872"/></g></g></svg>
\ No newline at end of file
diff --git a/src/components/requirements/ChainIndicator.tsx b/src/components/requirements/ChainIndicator.tsx
new file mode 100644
index 0000000000..bcc6d464da
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx
index a752611585..6411a06eaf 100644
--- a/src/components/requirements/DataBlock.tsx
+++ b/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 };
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index 10a0e1b0fd..f81b6a5e8d 100644
--- a/src/components/ui/Badge.tsx
+++ b/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",
       },
diff --git a/src/config/chains.ts b/src/config/chains.ts
new file mode 100644
index 0000000000..71f2a3b953
--- /dev/null
+++ b/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;
+  }
+>;
diff --git a/src/stories/requirements/ChainIndicator.stories.tsx b/src/stories/requirements/ChainIndicator.stories.tsx
new file mode 100644
index 0000000000..a032a29bdf
--- /dev/null
+++ b/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,
+  },
+};