add: chains

src/components/element/chain/ChainLibrary.tsx

@@ -0,0 +1,24 @@
+import type { Chain } from "@merkl/api";
+import { Group } from "dappkit";
+import { useMemo } from "react";
+import OpportunityPagination from "../opportunity/OpportunityPagination";
+import { ChainTable } from "./ChainTable";
+import ChainTableRow from "./ChainTableRow";
+
+export type ChainLibraryProps = {
+  chains: Chain[];
+  count?: number;
+};
+
+export default function ChainLibrary({ chains, count }: ChainLibraryProps) {
+  const rows = useMemo(
+    () => chains?.map(c => <ChainTableRow key={`${c.id}`} chain={c} />),
+    [chains],
+  );
+
+  return (
+    <ChainTable>
+      {rows}
+    </ChainTable>
+  );
+}

src/components/element/chain/ChainTable.tsx

@@ -0,0 +1,11 @@
+import { createTable } from "dappkit";
+
+export const [ChainTable, ChainRow, chainColumns] = createTable({
+  chain: {
+    name: "CHAIN",
+    size: "minmax(350px,1fr)",
+    compact: "1fr",
+    className: "justify-start",
+    main: true,
+  },
+});

src/components/element/chain/ChainTableRow.tsx

@@ -0,0 +1,41 @@
+import type { Protocol, Chain } from "@merkl/api";
+import { Link } from "@remix-run/react";
+import { Button, Group, Icon, Value } from "dappkit";
+import type { BoxProps } from "dappkit";
+import { Title } from "dappkit";
+import { mergeClass } from "dappkit";
+import type { TagTypes } from "../Tag";
+import { ChainRow } from "./ChainTable";
+
+export type ChainTableRowProps = {
+  hideTags?: (keyof TagTypes)[];
+  chain: Chain;
+} & BoxProps;
+
+export default function ChainTableRow({ hideTags, chain, className, ...props }: ChainTableRowProps) {
+  console.log(chain);
+
+  return (
+    <Link to={`/chains/${chain.name}`}>
+      <ChainRow
+        size="lg"
+        content="sm"
+        className={mergeClass("", className)}
+        {...props}
+        chainColumn={
+          <Group className="py-md flex-col w-full text-nowrap whitespace-nowrap text-ellipsis">
+            <Group className="text-nowrap whitespace-nowrap text-ellipsis min-w-0 flex-nowrap overflow-hidden max-w-full">
+              <Title
+                h={3}
+                size={4}
+                className="text-nowrap flex gap-lg whitespace-nowrap text-ellipsis min-w-0 overflow-hidden">
+                <Icon src={chain.icon} />
+                {chain.name}
+              </Title>
+            </Group>
+          </Group>
+        }
+      />
+    </Link>
+  );
+}

src/components/element/functions/SearchBar.tsx

@@ -61,7 +61,7 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
                     switch (category) {
                       case "chain":
                         return (
-                          <Button to={`/chain/${results[i].name}`} size="lg" look="bold">
+                          <Button to={`/chains/${results[i].name}`} size="lg" look="bold">
                             <Icon src={results[i].icon} /> {results[i].name}
                           </Button>
                         );

src/components/element/opportunity/OpportunityTableRow.tsx

@@ -31,7 +31,6 @@ export default function OpportunityTableRow({ hideTags, opportunity, className,
             {tags
               ?.filter(({ type }) => !hideTags || hideTags.includes(type))
               .map(tag => {
-                console.table(tag);
                 return <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="lg" />;
               })}
           </Group>

src/routes/_merkl.chains.$id.tsx

@@ -17,18 +17,22 @@ export default function Index() {
   return (
     <Hero
       icons={[{ src: chain.icon }]}
+      breadcrumbs={[
+        { link: "/chains", name: "Chains" },
+        { link: "/", name: chain.name },
+      ]}
       navigation={{ label: "Back to opportunities", link: "/" }}
       title={chain.name}
       description={"Lorem ipsum something cool about the chain"}
       tabs={[
-        { label: "Opportunities", link: `/chain/${label?.toLowerCase()}` },
+        { label: "Opportunities", link: `/chains/${label?.toLowerCase()}` },
         {
           label: "Leaderboard",
-          link: `/chain/${label?.toLowerCase()}/leaderboard`,
+          link: `/chains/${label?.toLowerCase()}/leaderboard`,
         },
         {
           label: "Analytics",
-          link: `/chain/${label?.toLowerCase()}/analytics`,
+          link: `/chains/${label?.toLowerCase()}/analytics`,
         },
       ]}>
       <Outlet />

src/routes/_merkl.chains.(all).(chains).tsx

@@ -0,0 +1,22 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json, useLoaderData } from "@remix-run/react";
+import { Container, Space } from "packages/dappkit/src";
+import { ChainService } from "src/api/services/chain.service";
+import ChainLibrary from "src/components/element/chain/ChainLibrary";
+
+export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
+  const chains = await ChainService.getAll();
+
+  return json({ chains, count: chains.length });
+}
+
+export default function Index() {
+  const { chains, count } = useLoaderData<typeof loader>();
+
+  return (
+    <Container>
+      <Space size="xl" />
+      <ChainLibrary chains={chains} count={count} />
+    </Container>
+  );
+}

src/routes/_merkl.chains.(all).tsx

@@ -0,0 +1,14 @@
+import { Outlet } from "@remix-run/react";
+import Hero from "src/components/composite/Hero";
+
+export default function Index() {
+  return (
+    <Hero
+      icons={[{ remix: "RiExchange2Line" }]}
+      title={"Chains"}
+      breadcrumbs={[{ link: "/chains", name: "Chains" }]}
+      description={"Chains integrated by Merkl"}>
+      <Outlet />
+    </Hero>
+  );
+}