cleanup: unsued files

app/routes/_merkl.action.$action.(opportunities).tsx

@@ -1,7 +1,7 @@
-import { Opportunity } from "@angleprotocol/merkl-api";
 import { type LoaderFunctionArgs, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Space } from "dappkit";
+import { api } from "src/api";
 import { fetchOpportunities } from "src/api/opportunity/opportunity";
 import OpportunityLibrary from "src/components/element/opportunity/OpportunityLibrary";
 import { getAction } from "src/config/actions";
@@ -12,19 +12,20 @@ export async function loader({ params: { action: _action }, request }: LoaderFun
   if (!action) throw new Error("Unknown action");
 
   const { data: opportunities, ...res } = await fetchOpportunities(request, { action });
+  const { data: chains } = await api.v4.chain.get({ query: {}});
 
-  if (!opportunities) throw new Error("Unknown opportunity");
+  if (!opportunities || !chains) throw new Error("Unknown opportunity");
 
-  return json({ opportunities });
+  return json({ opportunities, chains});
 }
 
 export default function Index() {
-  const { opportunities } = useLoaderData<typeof loader>();
+  const { opportunities, chains } = useLoaderData<typeof loader>();
 
   return (
     <>
       <Space size="md" />
-      <OpportunityLibrary exclude={["action"]} opportunities={opportunities.filter(o => o)} />
+      <OpportunityLibrary exclude={["action"]} opportunities={opportunities.filter(o => o)} chains={chains}/>
     </>
   );
 }

app/routes/_merkl.chain.$id.(opportunities).tsx

@@ -1,16 +1,19 @@
 import { type LoaderFunctionArgs, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Space } from "dappkit";
+import { api } from "src/api";
 import { fetchOpportunities } from "src/api/opportunity/opportunity";
 import OpportunityLibrary from "src/components/element/opportunity/OpportunityLibrary";
-import { getChainId } from "src/config/chains";
-
-export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
-  const chainId = getChainId(id ?? "");
 
+export async function loader({ params: { id: chainId }, request }: LoaderFunctionArgs) {
   if (!chainId) throw new Error("Unsupported Chain");
+
+  const { data: chains } = await api.v4.chain.get({ query: { search: chainId } });
+  const chain = chains?.[0];
+
+  if (!chain) throw "";
 
-  const { data: opportunities, ...res } = await fetchOpportunities(request, { chainId: chainId?.toString() });
+  const { data: opportunities, ...res } = await fetchOpportunities(request, { chainId: chain.id.toString() });
 
   return json({ opportunities });
 }

app/routes/_merkl.chain.$id.tsx

@@ -1,11 +1,9 @@
 import { type LoaderFunctionArgs, json } from "@remix-run/node";
 import { Outlet, useLoaderData, useNavigate, useRouteError } from "@remix-run/react";
-import { Group, Icon, Select, Title } from "dappkit";
+import { Group, Title } from "dappkit";
 import { Container } from "dappkit";
-import { type ReactNode, useMemo } from "react";
 import { api } from "src/api";
 import Heading from "src/components/composite/Heading";
-import { type ChainId, chains } from "src/config/chains";
 
 export async function loader({ params: { id } }: LoaderFunctionArgs) {
   const { data: chains } = await api.v4.chain.get({ query: { search: id } });
@@ -43,33 +41,13 @@ export function ErrorBoundary() {
   const error = useRouteError();
   const navigate = useNavigate();
 
-  const networks = useMemo(() => {
-    const a = Object.keys(chains);
-    return Object.entries(chains).reduce(
-      (supported, [chainId, chain]) => {
-        supported[chainId] = (
-          <Group>
-            <Icon size="sm" chain={chainId} />
-            {chain.label}
-          </Group>
-        );
-        return supported;
-      },
-      {} as { [C in ChainId]?: ReactNode },
-    );
-  }, []);
-
   return (
     <>
       <Group className="mx-auto my-auto flex-col p-xl*2 [&>*]:text-center max-w-fit justify-center">
         <Title h={3}>{error?.message ?? "Error"}</Title>
         {/* <Text h={3}>We don't support this chain</Text> */}
         <div>
-          <Select
-            state={[undefined, c => navigate(`/chain/${chains?.[c]?.label}`)]}
-            placeholder="Supported Chains"
-            options={networks}
-          />
+
         </div>
       </Group>
     </>

app/routes/_merkl.opportunity.$chain.$type.$id.(overview).tsx

@@ -6,16 +6,18 @@ import { Space } from "packages/dappkit/src";
 import { api } from "src/api";
 import CampaignLibrary from "src/components/element/campaign/CampaignLibrary";
 import Participate from "src/components/element/participate/Participate";
-import { getChainId } from "src/config/chains";
 import useOpportunity from "src/hooks/resources/useOpportunity";
 
-export async function loader({ params: { id, type, chain } }: LoaderFunctionArgs) {
-  const chainId = getChainId(chain ?? "");
-
+export async function loader({ params: { id, type, chain: chainId } }: LoaderFunctionArgs) {
   if (!chainId || !id || !type) throw "";
+
+  const { data: chains } = await api.v4.chain.get({ query: { search: id } });
+  const chain = chains?.[0];
+
+  if (!chain) throw "";
 
-  const { data: opportunity, ...res } = await api.v4.opportunity({ chainId })({ type })({ id }).get();
-  const { data: campaigns } = await api.v4.campaign.opportunity({ chainId })({ type })({ id }).get();
+  const { data: opportunity, ...res } = await api.v4.opportunity({ chainId: chain.id })({ type })({ id }).get();
+  const { data: campaigns } = await api.v4.campaign.opportunity({ chainId: chain.id })({ type })({ id }).get();
 
   if (!opportunity || !campaigns) throw "";
 

app/routes/_merkl.opportunity.$chain.$type.$id.tsx

@@ -6,15 +6,18 @@ import Heading from "src/components/composite/Heading";
 
 import { Container } from "dappkit";
 import Tag from "src/components/element/Tag";
-import { getChainId } from "src/config/chains";
 import useOpportunity from "src/hooks/resources/useOpportunity";
 
-export async function loader({ params: { id, type, chain } }: LoaderFunctionArgs) {
-  const chainId = getChainId(chain ?? "");
-
+export async function loader({ params: { id, type, chain: chainId } }: LoaderFunctionArgs) {
+
   if (!chainId || !id || !type) throw "";
+
+  const { data: chains } = await api.v4.chain.get({ query: { search: id } });
+  const chain = chains?.[0];
 
-  const { data: opportunity, ...res } = await api.v4.opportunity({ chainId })({ type })({ id }).get();
+  if (!chain) throw "";
+
+  const { data: opportunity, ...res } = await api.v4.opportunity({ chainId: chain.id })({ type })({ id }).get();
 
   if (!opportunity) throw "";
 
@@ -30,7 +33,7 @@ export default function Index() {
   const opportunity = useLoaderData<typeof loader>();
   const { chain, id } = useParams();
 
-  const { tags, description, link } = useOpportunity(opportunity as Opportunity);
+  const { tags, description, link } = useOpportunity(opportunity);
 
   return (
     <Container>

app/routes/_merkl.protocol.$id.(opportunities).tsx

@@ -11,17 +11,20 @@ export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
   if (!protocol) throw new Error("Unsupported Protocol");
 
   const { data: opportunities, ...res } = await fetchOpportunities(request, { mainProtocolType: protocol.type });
+  const { data: chains } = await api.v4.chain.get({ query: {}});
 
-  return json({ opportunities });
+  if (!opportunities || !chains) throw new Error("");
+
+  return json({ opportunities, chains });
 }
 
 export default function Index() {
-  const { opportunities } = useLoaderData<typeof loader>();
+  const { opportunities, chains } = useLoaderData<typeof loader>();
 
   return (
     <>
       <Space size="md" />
-      <OpportunityLibrary opportunities={opportunities} />
+      <OpportunityLibrary opportunities={opportunities} chains={chains}/>
     </>
   );
 }

app/routes/_merkl.status.$status.(opportunities).tsx

@@ -1,6 +1,7 @@
 import { type LoaderFunctionArgs, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Space } from "dappkit";
+import { api } from "src/api";
 import { fetchOpportunities } from "src/api/opportunity/opportunity";
 import OpportunityLibrary from "src/components/element/opportunity/OpportunityLibrary";
 import { getStatus } from "src/config/status";
@@ -11,17 +12,20 @@ export async function loader({ params: { status: _status }, request }: LoaderFun
   if (!status) throw new Error("Unknown status");
 
   const { data: opportunities, ...res } = await fetchOpportunities(request, { status });
+  const { data: chains } = await api.v4.chain.get({ query: {}});
 
-  return json({ opportunities });
+  if (!opportunities || !chains) throw new Error("Unknown opportunity");
+
+  return json({ opportunities, chains });
 }
 
 export default function Index() {
-  const { opportunities } = useLoaderData<typeof loader>();
+  const { opportunities, chains} = useLoaderData<typeof loader>();
 
   return (
     <>
       <Space size="md" />
-      <OpportunityLibrary exclude={["status"]} opportunities={opportunities} />
+      <OpportunityLibrary exclude={["status"]} opportunities={opportunities} chains={chains} />
     </>
   );
 }

app/routes/_merkl.token.$symbol.(opportunities).tsx

@@ -1,24 +1,26 @@
 import { type LoaderFunctionArgs, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Space } from "dappkit";
+import { api } from "src/api";
 import { fetchOpportunities } from "src/api/opportunity/opportunity";
 import OpportunityLibrary from "src/components/element/opportunity/OpportunityLibrary";
 
 export async function loader({ params: { symbol }, request }: LoaderFunctionArgs) {
   const { data: opportunities, ...res } = await fetchOpportunities(request, { tokens: [symbol] });
+  const { data: chains } = await api.v4.chain.get({ query: {}});
 
-  if (!opportunities?.length) throw new Error("Unknown token");
+  if (!opportunities?.length || !chains) throw new Error("Unknown token");
 
-  return json({ opportunities });
+  return json({ opportunities, chains });
 }
 
 export default function Index() {
-  const { opportunities } = useLoaderData<typeof loader>();
+  const { opportunities, chains } = useLoaderData<typeof loader>();
 
   return (
     <>
       <Space size="md" />
-      <OpportunityLibrary opportunities={opportunities} />
+      <OpportunityLibrary opportunities={opportunities} chains={chains}/>
     </>
   );
 }

src/components/element/Tag.tsx

@@ -2,7 +2,6 @@ import type { Opportunity, Token } from "@angleprotocol/merkl-api";
 import { Button, Divider, Dropdown, Group, Hash, Icon, Text, Title } from "dappkit";
 import type { ButtonProps } from "dappkit";
 import { type Action, actions } from "src/config/actions";
-import { chains } from "src/config/chains";
 import type { Protocol } from "src/config/protocols";
 import { statuses } from "src/config/status";
 
@@ -189,7 +188,7 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
           }>
           <Button key={value} {...props}>
             <Icon size={props?.size} src={token.chain.icon} />
-            {chains[token.chainId]?.label}
+            {token.chain.name}
           </Button>
         </Dropdown>
       );