Add pages for chains (#136)

* Experiment with chain pages * More progress on chain pages * Move providers to root * Add flags and improve styling * Add gatsby-ssr * More responsiveness and fixes
FrederikBolding · Jul 26, 2024 · f991fdc · f991fdc
1 parent 96897c2
commit f991fdc
Show file tree

Hide file tree

Showing 15 changed files with 350 additions and 59 deletions.
diff --git a/gatsby-browser.jsx b/gatsby-browser.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { Web3Provider } from "./src/context/Web3Context";
+import { SearchProvider } from "./src/context/SearchContext";
+
+export const wrapRootElement = ({ element }) => (
+  <SearchProvider>
+    <Web3Provider>{element}</Web3Provider>
+  </SearchProvider>
+);
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -65,6 +65,8 @@ exports.sourceNodes = async ({
   }, Promise.resolve({}));
 
   chains
+    // Filter out non HTTP(S) RPC URLs
+    .map((chain) => ({ ...chain, rpc: chain.rpc.filter(rpc => rpc.startsWith('http://') || rpc.startsWith('https://'))}))
     .filter((chain) => chain.rpc.length > 0)
     .forEach((chain) => {
       const icon = chain.icon;

diff --git a/gatsby-ssr.jsx b/gatsby-ssr.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { Web3Provider } from "./src/context/Web3Context";
+import { SearchProvider } from "./src/context/SearchContext";
+
+export const wrapRootElement = ({ element }) => (
+  <SearchProvider>
+    <Web3Provider>{element}</Web3Provider>
+  </SearchProvider>
+);
diff --git a/src/components/Chain.tsx b/src/components/Chain.tsx
@@ -12,6 +12,7 @@ import React, { useContext } from "react";
 import { Web3Context } from "../context/Web3Context";
 import { ChainData } from "../types/chain";
 import { ChainIcon } from "./ChainIcon";
+import { Link } from "gatsby";
 
 export const Chain = ({
   name,
@@ -22,55 +23,65 @@ export const Chain = ({
 }: ChainData) => {
   const { isConnected, handleConnect, handleAddChain } =
     useContext(Web3Context);
-  const handleAddChainClick = () => {
+
+  const handleConnectClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    handleConnect();
+  };
+
+  const handleAddChainClick = (event: React.MouseEvent) => {
+    event.preventDefault();
     handleAddChain({ name, chainId, nativeCurrency, ...rest });
   };
+
   return (
-    <Flex
-      flexDirection="column"
-      px="5"
-      py="4"
-      borderWidth="1px"
-      rounded="md"
-      boxShadow="base"
-    >
-      <Flex justifyContent="space-between">
-        <Flex flexDirection="column" minW="200px">
-          <Flex mb="2">
-            <Text
-              fontSize="lg"
-              fontWeight="semibold"
-              lineHeight="short"
-              isTruncated
-              verticalAlign="middle"
-            >
-              {name}
-            </Text>
+    <Link to={`/chain/${chainId}`}>
+      <Flex
+        flexDirection="column"
+        px="5"
+        py="4"
+        borderWidth="1px"
+        rounded="md"
+        boxShadow="base"
+      >
+        <Flex justifyContent="space-between">
+          <Flex flexDirection="column" minW="200px">
+            <Flex mb="2">
+              <Text
+                fontSize="lg"
+                fontWeight="semibold"
+                lineHeight="short"
+                isTruncated
+                verticalAlign="middle"
+              >
+                {name}
+              </Text>
+            </Flex>
+            <StatGroup mb="2">
+              <Stat>
+                <StatLabel>Chain ID</StatLabel>
+                <StatNumber fontSize="md">{chainId}</StatNumber>
+              </Stat>
+              <Stat>
+                <StatLabel>Currency</StatLabel>
+                <StatNumber fontSize="md">{nativeCurrency.symbol}</StatNumber>
+              </Stat>
+            </StatGroup>
           </Flex>
-          <StatGroup mb="2">
-            <Stat>
-              <StatLabel>Chain ID</StatLabel>
-              <StatNumber fontSize="md">{chainId}</StatNumber>
-            </Stat>
-            <Stat>
-              <StatLabel>Currency</StatLabel>
-              <StatNumber fontSize="md">{nativeCurrency.symbol}</StatNumber>
-            </Stat>
-          </StatGroup>
+          {icon && (
+            <Flex>
+              <ChainIcon name={name} icon={icon} />
+            </Flex>
+          )}
         </Flex>
-        {icon && (
-          <Flex>
-            <ChainIcon name={name} icon={icon} />
-          </Flex>
-        )}
+        <Center mt="auto">
+          {!isConnected ? (
+            <Button onClick={handleConnectClick}>Connect</Button>
+          ) : (
+            <Button onClick={handleAddChainClick}>Add Chain</Button>
+          )}
+        </Center>
       </Flex>
-      <Center mt="auto">
-        {!isConnected ? (
-          <Button onClick={handleConnect}>Connect Wallet</Button>
-        ) : (
-          <Button onClick={handleAddChainClick}>Add Chain</Button>
-        )}
-      </Center>
-    </Flex>
+    </Link>
   );
 };
diff --git a/src/components/ChainIcon.tsx b/src/components/ChainIcon.tsx
@@ -3,13 +3,13 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import { ChainData } from "../types/chain";
 import { Image } from "@chakra-ui/react";
 
-export const ChainIcon = ({ icon, name }: Pick<ChainData, "icon" | "name">) =>
+export const ChainIcon = ({ icon, name, width = "40px" }: Pick<ChainData, "icon" | "name"> & { width?: string; }) =>
   icon.childImageSharp ? (
     <GatsbyImage
       objectFit="scale-down"
       image={icon.childImageSharp.gatsbyImageData}
       alt={name}
     />
   ) : (
-    <Image src={icon.publicURL} width="40px" />
+    <Image src={icon.publicURL} width={width} />
   );
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { Link } from "@chakra-ui/react";
+
+export const ExternalLink = ({ href, children }) => (
+  <Link href={href} isExternal>
+    {children} <ExternalLinkIcon mx="2px" />
+  </Link>
+);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -14,6 +14,7 @@ import { Search } from "./Search";
 import { FaGithub } from "react-icons/fa";
 import { AddIcon } from "@chakra-ui/icons";
 import { Filters } from "./Filters";
+import { Link as GatsbyLink } from "gatsby";
 
 export const Header = ({ showSearch = true, showFilters = true }) => {
   const { handleConnect, isConnected, address } = useContext(Web3Context);
@@ -33,7 +34,9 @@ export const Header = ({ showSearch = true, showFilters = true }) => {
       width="100%"
       zIndex="sticky"
     >
-      <Heading>Chainlist</Heading>
+      <GatsbyLink to="/">
+        <Heading as="h1">Chainlist</Heading>
+      </GatsbyLink>
       {showSearch && <Search />}
       <Flex>
         {showFilters && <Filters />}
@@ -62,7 +65,7 @@ export const Header = ({ showSearch = true, showFilters = true }) => {
             size="lg"
             onClick={handleConnect}
           >
-            Connect Wallet
+            Connect
           </Button>
         ) : (
           <Button size="lg" w={{ base: "100%", md: "auto" }}>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -5,7 +5,14 @@ import { Header } from "./Header";
 export const Layout = ({ children, headerProps = {} }) => (
   <Flex flexDirection="column" py="4" px="8" height="100vh" position="relative">
     <Header {...headerProps} />
-    <Flex as="main" flexDirection="column" mt={{ base: "164px", md: "16" }}>
+    <Flex
+      as="main"
+      flexDirection="column"
+      mt={{
+        base: headerProps.showSearch !== false ? "164px" : "116px",
+        md: "16",
+      }}
+    >
       {children}
     </Flex>
   </Flex>

diff --git a/src/components/RedFlagBadge.tsx 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/RpcTable.tsx b/src/components/RpcTable.tsx
@@ -0,0 +1,45 @@
+import React, { useContext } from "react";
+import {
+  Button,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+import { Web3Context } from "../context/Web3Context";
+
+export const RpcTable = ({ rpcs, handleRpcClick }) => {
+  const { isConnected, handleConnect } = useContext(Web3Context);
+
+  return (
+    <TableContainer>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th pl="0">RPC URL</Th>
+            <Th></Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rpcs.map((rpcUrl) => (
+            <Tr>
+              <Td pl="0">{rpcUrl}</Td>
+              <Td pr="0" textAlign="end">
+                {!isConnected ? (
+                  <Button onClick={handleConnect}>Connect</Button>
+                ) : (
+                  <Button onClick={() => handleRpcClick(rpcUrl)}>
+                    Add Chain
+                  </Button>
+                )}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
diff --git a/src/components/StatValue.tsx 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
@@ -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>
+  );
+};