fix: lint

src/components/composite/Hero.tsx

@@ -123,7 +123,10 @@ export default function Hero({ navigation, breadcrumbs, icons, title, descriptio
         {!!tabs && (
           <Box size="sm" look="base" className="flex-row mt-md w-min">
             {tabs?.map(tab => (
-              <Button look={location.pathname === tab.link ? "hype" : "base"} to={tab.link} key={tab.link}>
+              <Button
+                look={location.pathname === tab.link ? "hype" : "base"}
+                to={tab.link}
+                key={`${tab.label}-${tab.link}`}>
                 {tab.label}
               </Button>
             ))}

src/components/element/leaderboard/LeaderboardLibrary.tsx

@@ -1,6 +1,6 @@
 import { Text } from "dappkit";
 import { useMemo } from "react";
-import type { DummyLeaderboard } from "src/routes/_merkl.opportunity.$chain.$type.$id.leaderboard";
+import type { DummyLeaderboard } from "src/routes/_merkl.opportunities.$chain.$type.$id.leaderboard";
 import { LeaderboardTable } from "./LeaderboardTable";
 import LeaderboardTableRow from "./LeaderboardTableRow";
 

src/routes/_merkl.opportunities.$chain.$type.$id.tsx

@@ -20,8 +20,6 @@ export async function loader({ params: { id, type, chain: chainId } }: LoaderFun
     identifier: id,
   });
 
-  if (!opportunity) throw "DAZZ";
-
   return json({ opportunity });
 }
 

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

@@ -0,0 +1,89 @@
+import type { Opportunity } from "@angleprotocol/merkl-api";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
+import { Meta, Outlet, useLoaderData } from "@remix-run/react";
+import { useMemo } from "react";
+import { ChainService } from "src/api/services/chain.service";
+import { OpportunityService } from "src/api/services/opportunity.service";
+import Hero from "src/components/composite/Hero";
+import Tag from "src/components/element/Tag";
+import { ErrorHeading } from "src/components/layout/ErrorHeading";
+import useOpportunity from "src/hooks/resources/useOpportunity";
+
+export async function loader({ params: { id, type, chain: chainId } }: LoaderFunctionArgs) {
+  if (!chainId || !id || !type) throw "";
+
+  const chain = await ChainService.get({ search: chainId });
+
+  const opportunity = await OpportunityService.getCampaignsByParams({
+    chainId: chain.id,
+    type: type,
+    identifier: id,
+  });
+
+  return json({ opportunity });
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data, error }) => {
+  if (error) return [{ title: error }];
+  return [{ title: `${data?.name} on Merkl` }];
+};
+
+export type OutletContextOpportunity = {
+  opportunity: Opportunity;
+};
+
+export default function Index() {
+  const { opportunity } = useLoaderData<typeof loader>();
+  const { tags, description, link } = useOpportunity(opportunity);
+
+  const styleName = useMemo(() => {
+    const spaced = opportunity?.name.split(" ");
+
+    return spaced
+      .map(str => {
+        const key = str + crypto.randomUUID();
+        if (!str.match(/[\p{Letter}\p{Mark}]+/gu))
+          return [
+            <span key={key} className="text-main-11">
+              {str}
+            </span>,
+          ];
+        if (str.includes("-"))
+          return str
+            .split("-")
+            .flatMap((s, i, arr) => [s, i !== arr.length - 1 && <span className="text-main-11">-</span>]);
+        if (str.includes("/"))
+          return str
+            .split("/")
+            .flatMap((s, i, arr) => [s, i !== arr.length - 1 && <span className="text-main-11">/</span>]);
+        return [<span key={key}>{str}</span>];
+      })
+      .flatMap((str, index, arr) => [str, index !== arr.length - 1 && " "]);
+  }, [opportunity]);
+
+  return (
+    <>
+      <Meta />
+      <Hero
+        icons={opportunity.tokens.map(t => ({ src: t.icon }))}
+        breadcrumbs={[
+          { link: "/", name: "Opportunities" },
+          { link: "/", name: opportunity.name },
+        ]}
+        title={styleName}
+        description={description}
+        tabs={[
+          { label: "Overview", link },
+          { label: "Leaderboard", link: `${link}/leaderboard` },
+        ]}
+        tags={tags.map(tag => <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="md" />)}
+        opportunity={opportunity}>
+        <Outlet context={{ opportunity }} />
+      </Hero>
+    </>
+  );
+}
+
+export function ErrorBoundary() {
+  return <ErrorHeading />;
+}