From 12fc5276267c6a1fe17ba340c054dc01b5bf9bbc Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Thu, 25 Jul 2024 17:23:06 +0200
Subject: [PATCH] Add flags and improve styling

---
 src/components/RedFlagBadge.tsx     | 20 +++++++++++++
 src/components/StatValue.tsx        |  8 +++++
 src/components/StatusBadge.tsx      | 13 ++++++++
 src/pages/chain/{Chain.chainId}.tsx | 46 ++++++++++++++++-------------
 src/types/chain.ts                  |  3 ++
 5 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 src/components/RedFlagBadge.tsx
 create mode 100644 src/components/StatValue.tsx
 create mode 100644 src/components/StatusBadge.tsx

diff --git a/src/components/RedFlagBadge.tsx b/src/components/RedFlagBadge.tsx
new file mode 100644
index 000000000..9dc2bb51d
--- /dev/null
+++ b/src/components/RedFlagBadge.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Badge, Tooltip } from "@chakra-ui/react";
+import { ChainData } from "../types/chain";
+
+export const RedFlagBadge = ({ redFlags }: Pick<ChainData, "redFlags">) => {
+  if (!redFlags || redFlags.length === 0) {
+    return null;
+  }
+  const flagLabel =
+    redFlags[0] === "reusedChainId"
+      ? "Flagged for reusing chain ID"
+      : "Flagged for unknown reasons";
+  return (
+    <Tooltip label={flagLabel}>
+      <Badge colorScheme="red" textTransform="capitalize">
+        Flagged
+      </Badge>
+    </Tooltip>
+  );
+};
diff --git a/src/components/StatValue.tsx b/src/components/StatValue.tsx
new file mode 100644
index 000000000..477e0dd15
--- /dev/null
+++ b/src/components/StatValue.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { VStack } from "@chakra-ui/react";
+
+export const StatValue = ({ children }: { children: React.ReactNode }) => (
+  <VStack align="start" gap="1">
+    {children}
+  </VStack>
+);
diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx
new file mode 100644
index 000000000..02526e805
--- /dev/null
+++ b/src/components/StatusBadge.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Badge } from "@chakra-ui/react";
+import { ChainData } from "../types/chain";
+
+export const StatusBadge = ({ status }: Pick<ChainData, "status">) => {
+  const actualStatus = status ?? "Active";
+  const colorScheme = status === "deprecated" ? "yellow" : undefined;
+  return (
+    <Badge textTransform="capitalize" colorScheme={colorScheme}>
+      {actualStatus}
+    </Badge>
+  );
+};
diff --git a/src/pages/chain/{Chain.chainId}.tsx b/src/pages/chain/{Chain.chainId}.tsx
index 94302596a..2076b2b9b 100644
--- a/src/pages/chain/{Chain.chainId}.tsx
+++ b/src/pages/chain/{Chain.chainId}.tsx
@@ -1,26 +1,27 @@
 import React, { useContext } from "react";
 import {
-  Box,
   Button,
   Flex,
   StatGroup,
   StatLabel,
   Stat,
-  StatNumber,
   Heading,
-  Text,
   Divider,
+  Text,
 } from "@chakra-ui/react";
 import { graphql } from "gatsby";
 import { Seo } from "../../components/SEO";
-import { SearchProvider } from "../../context/SearchContext";
-import { Web3Context, Web3Provider } from "../../context/Web3Context";
+import { Web3Context } from "../../context/Web3Context";
 import { ChainIcon } from "../../components/ChainIcon";
 import { Layout } from "../../components/Layout";
 import { ExternalLink } from "../../components/ExternalLink";
 import { RpcTable } from "../../components/RpcTable";
+import { RedFlagBadge } from "../../components/RedFlagBadge";
+import { StatusBadge } from "../../components/StatusBadge";
+import { StatValue } from "../../components/StatValue";
+import { ChainData } from "../../types/chain";
 
-const ChainPage = ({ data }) => {
+const ChainPage = ({ data }: { data: { chain: ChainData } }) => {
   const {
     name,
     chainId,
@@ -28,7 +29,7 @@ const ChainPage = ({ data }) => {
     icon,
     explorers,
     rpc,
-    slip44,
+    redFlags,
     infoURL,
     status,
   } = data.chain;
@@ -40,7 +41,7 @@ const ChainPage = ({ data }) => {
     handleAddChain({ name, chainId, nativeCurrency, rpc, explorers });
   };
 
-  const handleRpcClick = (rpc) => {
+  const handleRpcClick = (rpc: string) => {
     handleAddChain({ name, chainId, nativeCurrency, rpc: [rpc], explorers });
   };
 
@@ -65,39 +66,44 @@ const ChainPage = ({ data }) => {
             )}
           </Flex>
           <Divider my="8" />
-          <StatGroup>
+          <StatGroup flexDirection={["column", null, "row"]} gap={[2, null, 0]}>
             <Stat>
               <StatLabel>Chain ID</StatLabel>
-              <StatNumber fontSize="md">{chainId}</StatNumber>
+              <StatValue>
+                <Text>{chainId}</Text>
+              </StatValue>
             </Stat>
             <Stat>
               <StatLabel>Currency</StatLabel>
-              <StatNumber fontSize="md">{nativeCurrency.symbol}</StatNumber>
+              <StatValue>
+                <Text>{nativeCurrency.symbol}</Text>
+              </StatValue>
             </Stat>
             <Stat>
-              <StatLabel>Status</StatLabel>
-              <StatNumber fontSize="md" textTransform="capitalize">
-                {status ?? "Active"}
-              </StatNumber>
+              <StatLabel mb="1.5">Status</StatLabel>
+              <StatValue>
+                <StatusBadge status={status} />
+                <RedFlagBadge redFlags={redFlags} />
+              </StatValue>
             </Stat>
             {infoURL && (
               <Stat>
                 <StatLabel>Info</StatLabel>
-                <StatNumber fontSize="md">
+                <StatValue>
                   <ExternalLink href={infoURL}>{infoURL}</ExternalLink>
-                </StatNumber>
+                </StatValue>
               </Stat>
             )}
             {explorers && (
               <Stat>
                 <StatLabel>Explorers</StatLabel>
-                <StatNumber fontSize="md">
+                <StatValue>
                   {explorers.map((explorer) => (
                     <ExternalLink href={explorer.url}>
                       {explorer.url}
                     </ExternalLink>
                   ))}
-                </StatNumber>
+                </StatValue>
               </Stat>
             )}
           </StatGroup>
@@ -135,7 +141,7 @@ export const query = graphql`
       }
       status
       faucets
-      slip44
+      redFlags
       infoURL
     }
   }
diff --git a/src/types/chain.ts b/src/types/chain.ts
index 5ca376aac..42100bcfc 100644
--- a/src/types/chain.ts
+++ b/src/types/chain.ts
@@ -11,6 +11,9 @@ export interface ChainData {
   chainId: number;
   nativeCurrency: ChainCurrency;
   explorers?: BlockExplorer[];
+  status?: string;
+  redFlags?: string[];
+  infoURL?: string;
 }
 
 export interface ChainCurrency {