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) => { + if (!redFlags || redFlags.length === 0) { + return null; + } + const flagLabel = + redFlags[0] === "reusedChainId" + ? "Flagged for reusing chain ID" + : "Flagged for unknown reasons"; + return ( + + + Flagged + + + ); +}; 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 }) => ( + + {children} + +); 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) => { + const actualStatus = status ?? "Active"; + const colorScheme = status === "deprecated" ? "yellow" : undefined; + return ( + + {actualStatus} + + ); +}; 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 }) => { )} - + Chain ID - {chainId} + + {chainId} + Currency - {nativeCurrency.symbol} + + {nativeCurrency.symbol} + - Status - - {status ?? "Active"} - + Status + + + + {infoURL && ( Info - + {infoURL} - + )} {explorers && ( Explorers - + {explorers.map((explorer) => ( {explorer.url} ))} - + )} @@ -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 {