Fixes on protocol, chain, token and campaign pages (#30)

* Fixes on protocol, chain, token and campaign pages

* lint

* fix tooltip

src/components/composite/Hero.tsx

@@ -126,9 +126,9 @@ export default function Hero({
   );
 }
 
-export function heroBuildSideDatas(count: number, maxApr: number, dailyRewards: number) {
+export function defaultHeroSideDatas(count: number, maxApr: number, dailyRewards: number) {
   return [
-    {
+    !!count && {
       data: (
         <Value format="0" size={4} className="!text-main-12">
           {count}
@@ -137,23 +137,23 @@ export function heroBuildSideDatas(count: number, maxApr: number, dailyRewards:
       label: "Live opportunities",
       key: crypto.randomUUID(),
     },
-    {
+    !!dailyRewards && {
       data: (
-        <Value format="0a%" size={4} className="!text-main-12">
-          {maxApr / 100}
+        <Value format="$0.00a" size={4} className="!text-main-12">
+          {dailyRewards}
         </Value>
       ),
-      label: "APR",
+      label: "Daily rewards",
       key: crypto.randomUUID(),
     },
-    {
+    !!maxApr && {
       data: (
-        <Value format="$0.00a" size={4} className="!text-main-12">
-          {dailyRewards}
+        <Value format="0a%" size={4} className="!text-main-12">
+          {maxApr / 100}
         </Value>
       ),
-      label: "Daily rewards",
+      label: "Max APR",
       key: crypto.randomUUID(),
     },
-  ];
+  ].filter(data => !!data);
 }

src/components/element/Tag.tsx

@@ -179,7 +179,7 @@ export default function Tag<T extends keyof TagTypes>({ type, filter, value, ...
               <Group size="xs" className="flex-col">
                 <Group className="justify-between" size="xl">
                   <Text size="xs">Token</Text>
-                  <Hash format="short" size="xs">
+                  <Hash format="short" size="xs" copy>
                     {token.address}
                   </Hash>
                 </Group>
@@ -192,10 +192,6 @@ export default function Tag<T extends keyof TagTypes>({ type, filter, value, ...
               </Group>
               <Divider look="soft" horizontal />
               <Group className="flex-col" size="md">
-                <Button to={`/tokens/${token?.symbol}`} size="xs" look="soft">
-                  <Icon remix="RiArrowRightLine" />
-                  Check opportunities with {token?.symbol}
-                </Button>
                 <Button to={`/chains/${token.chain?.name}`} size="xs" look="soft">
                   <Icon remix="RiArrowRightLine" /> Check opportunities on {token.chain?.name}
                 </Button>

src/components/element/campaign/CampaignTable.tsx

@@ -3,16 +3,10 @@ import { createTable } from "dappkit";
 export const [CampaignTable, CampaignRow, CampaignColumns] = createTable({
   dailyRewards: {
     name: "Daily rewards",
-    size: "minmax(200px,250px)",
-    compact: "1fr",
-    className: "justify-start",
-    main: true,
-  },
-  restrictions: {
-    name: "",
     size: "minmax(170px,1fr)",
     compactSize: "1fr",
-    className: "justify-end",
+    className: "justify-start",
+    main: true,
   },
   chain: {
     name: "Chain",

src/components/element/campaign/CampaignTableRow.tsx

@@ -16,6 +16,7 @@ import {
 import moment from "moment";
 import Collapsible from "packages/dappkit/src/components/primitives/Collapsible";
 import Time from "packages/dappkit/src/components/primitives/Time";
+import Tooltip from "packages/dappkit/src/components/primitives/Tooltip";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import type { Opportunity } from "src/api/services/opportunity/opportunity.model";
 import useCampaign from "src/hooks/resources/useCampaign";
@@ -48,7 +49,7 @@ export default function CampaignTableRow({
   const campaignInformation = useMemo(() => {
     const columns = [
       [
-        "Total distributed",
+        "Total Distributed",
         <Token
           key="token"
           symbol={false}
@@ -81,14 +82,20 @@ export default function CampaignTableRow({
         </Hash>,
       ],
       [
-        "Last snapshot",
-        <Text key="computedUntil">
-          {campaign?.campaignStatus?.computedUntil ? (
-            <Time timestamp={Number(campaign?.campaignStatus?.computedUntil) * 1000} />
-          ) : (
-            "not computed yet"
-          )}
-        </Text>,
+        "Last Snapshot",
+        <Tooltip
+          helper={
+            "Indicates when the campaign has last been processed by the Merkl engine. Once a campaign is processed, its rewards can then be included in the following distribution of the associated chain. Distributions on a chain may easily be delayed, for example by disputers, or by instabilities in Merkl dependencies"
+          }
+          key="computedUntil">
+          <Text>
+            {campaign?.campaignStatus?.computedUntil ? (
+              <Time timestamp={Number(campaign?.campaignStatus?.computedUntil) * 1000} />
+            ) : (
+              "Never"
+            )}
+          </Text>
+        </Tooltip>,
       ],
     ] as const satisfies [string, ReactNode][];
 
@@ -112,15 +119,6 @@ export default function CampaignTableRow({
       className={mergeClass("cursor-pointer py-4", className)}
       onClick={toggleIsOpen}
       chainColumn={<Chain chain={campaign.chain} />}
-      restrictionsColumn={
-        <Group className="justify-end">
-          {rules
-            ?.filter(({ type }) => type === "address")
-            .map(rule => (
-              <Rule size="sm" key={crypto.randomUUID()} type={rule.type} value={rule.value} />
-            ))}
-        </Group>
-      }
       dailyRewardsColumn={
         <Group className="align-middle items-center flex-nowrap">
           <OverrideTheme accent={"good"}>

src/components/element/token/TokenTooltip.tsx

@@ -28,7 +28,7 @@ export default function TokenTooltip({ token, size, chain }: TokenTooltipProps)
         <Group className="flex-col" size="md">
           <Button to={`/tokens/${token?.symbol}`} size="xs" look="soft">
             <Icon remix="RiArrowRightLine" />
-            {token?.symbol} on Merkl
+            Check opportunities with {token?.symbol}
           </Button>
           {chain?.explorers?.map(explorer => {
             return (
@@ -39,7 +39,7 @@ export default function TokenTooltip({ token, size, chain }: TokenTooltipProps)
                 size="xs"
                 look="soft">
                 <Icon remix="RiArrowRightLine" />
-                {token?.symbol} on Etherscan
+                Visit explorer
               </Button>
             );
           })}

src/hooks/resources/useOpportunity.tsx

@@ -65,10 +65,11 @@ export default function useOpportunity(opportunity: Opportunity) {
   }, [opportunity]);
 
   const herosData = useMemo(() => {
-    switch (opportunity.type) {
-      case "CLAMM":
-        return [
-          {
+    let data = [];
+    switch (opportunity.action) {
+      default:
+        data = [
+          !!opportunity.dailyRewards && {
             label: "Daily rewards",
             data: (
               <Value format="$0.00a" size={4} className="!text-main-12">
@@ -77,7 +78,7 @@ export default function useOpportunity(opportunity: Opportunity) {
             ),
             key: crypto.randomUUID(),
           },
-          {
+          !!opportunity.apr && {
             label: "APR",
             data: (
               <Value format="0.00%" size={4} className="!text-main-12">
@@ -86,7 +87,7 @@ export default function useOpportunity(opportunity: Opportunity) {
             ),
             key: crypto.randomUUID(),
           },
-          {
+          !!opportunity.tvl && {
             label: "Total value locked",
             data: (
               <Value format="$0.00a" size={4} className="!text-main-12">
@@ -96,9 +97,8 @@ export default function useOpportunity(opportunity: Opportunity) {
             key: crypto.randomUUID(),
           },
         ];
-      default:
-        return;
     }
+    return data.filter(data => !!data);
   }, [opportunity]);
 
   const rewardsBreakdown = useMemo(() => {

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

@@ -3,7 +3,7 @@ import { Outlet, useLoaderData } from "@remix-run/react";
 import { Cache } from "src/api/services/cache.service";
 import { ChainService } from "src/api/services/chain.service";
 import { OpportunityService } from "src/api/services/opportunity/opportunity.service";
-import Hero, { heroBuildSideDatas } from "src/components/composite/Hero";
+import Hero, { defaultHeroSideDatas } from "src/components/composite/Hero";
 
 export async function loader({ params: { id } }: LoaderFunctionArgs) {
   const chain = await ChainService.get({ search: id });
@@ -28,7 +28,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 
 export default function Index() {
   const { chain, count, dailyRewards, maxApr } = useLoaderData<typeof loader>();
-  const label = chain.name.toLowerCase();
 
   return (
     <Hero
@@ -40,24 +39,7 @@ export default function Index() {
       navigation={{ label: "Back to opportunities", link: "/" }}
       title={chain.name}
       description={`Earn rewards by supplying liquidity on ${chain.name}`}
-      tabs={[
-        {
-          label: "Opportunities",
-          link: `/chains/${label?.toLowerCase()}`,
-          key: crypto.randomUUID(),
-        },
-        {
-          label: "Leaderboard",
-          link: `/chains/${label?.toLowerCase()}/leaderboard`,
-          key: crypto.randomUUID(),
-        },
-        {
-          label: "Analytics",
-          link: `/chains/${label?.toLowerCase()}/analytics`,
-          key: crypto.randomUUID(),
-        },
-      ]}
-      sideDatas={heroBuildSideDatas(count, maxApr, dailyRewards)}>
+      sideDatas={defaultHeroSideDatas(count, maxApr, dailyRewards)}>
       <Outlet />
     </Hero>
   );

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

@@ -1,11 +1,11 @@
 import type { Opportunity } from "@merkl/api";
 import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
-import { Group, Value } from "dappkit";
+import { Group } from "dappkit";
 import { Cache } from "src/api/services/cache.service";
 import { OpportunityService } from "src/api/services/opportunity/opportunity.service";
 import { ProtocolService } from "src/api/services/protocol.service";
-import Hero from "src/components/composite/Hero";
+import Hero, { defaultHeroSideDatas } from "src/components/composite/Hero";
 
 export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
   const protocol = (await ProtocolService.get({ id: id ?? undefined }))?.[0];
@@ -26,7 +26,7 @@ export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
     protocol,
     liveOpportunityCount: liveCount,
     maxApr: opportunitiesByApr?.[0]?.apr,
-    sumDailyRewards: sum,
+    dailyRewards: sum,
   });
 }
 
@@ -38,53 +38,21 @@ export type OutletContextProtocol = {
 };
 
 export default function Index() {
-  const { opportunities, count, protocol, liveOpportunityCount, maxApr, sumDailyRewards } =
-    useLoaderData<typeof loader>();
-
-  const herosData = [
-    {
-      label: "Live opportunities",
-      data: (
-        <Value format="0" size={4} className="!text-main-12">
-          {liveOpportunityCount}
-        </Value>
-      ),
-      key: crypto.randomUUID(),
-    },
-    {
-      // need a call api here
-      label: "Daily rewards",
-      data: (
-        <Value format="$0.00a" size={4} className="!text-main-12">
-          {sumDailyRewards}
-        </Value>
-      ),
-      key: crypto.randomUUID(),
-    },
-    {
-      label: "Max",
-      data: (
-        <Value format="0a%" size={4} className="!text-main-12">
-          {maxApr / 100}
-        </Value>
-      ),
-      key: crypto.randomUUID(),
-    },
-  ];
+  const { opportunities, count, protocol, liveOpportunityCount, maxApr, dailyRewards } = useLoaderData<typeof loader>();
 
   return (
     <Hero
       icons={[{ src: protocol?.icon }]}
       title={<Group className="items-center">{protocol?.name}</Group>}
       breadcrumbs={[
         { link: "/protocols", name: "Protocols" },
-        { link: `/protocols/${protocol.id}`, name: protocol.name },
+        { link: `/protocols/${protocol?.id}`, name: protocol?.name },
       ]}
       description={
-        (protocol.description !== "" && protocol.description) ||
-        `Earn rewards by supplying liquidity on ${protocol.name}`
+        (protocol?.description !== "" && protocol?.description) ||
+        `Earn rewards by supplying liquidity on ${protocol?.name}`
       }
-      sideDatas={herosData}>
+      sideDatas={defaultHeroSideDatas(liveOpportunityCount, maxApr, dailyRewards)}>
       <Outlet context={{ opportunities, count }} />
     </Hero>
   );

src/routes/_merkl.tokens.$symbol.(opportunities).tsx

@@ -6,8 +6,8 @@ import { ChainService } from "src/api/services/chain.service";
 import { OpportunityService } from "src/api/services/opportunity/opportunity.service";
 import OpportunityLibrary from "src/components/element/opportunity/OpportunityLibrary";
 
-export async function loader({ params: { symbol } }: LoaderFunctionArgs) {
-  const { opportunities, count } = await OpportunityService.getMany({ tokens: symbol });
+export async function loader({ params: { symbol }, request }: LoaderFunctionArgs) {
+  const { opportunities, count } = await OpportunityService.getManyFromRequest(request, { tokens: symbol });
   const chains = await ChainService.getAll();
 
   return json({ opportunities, chains, count });

src/routes/_merkl.tokens.$symbol.tsx

@@ -5,7 +5,7 @@ import { Cache } from "src/api/services/cache.service";
 import { ChainService } from "src/api/services/chain.service";
 import { OpportunityService } from "src/api/services/opportunity/opportunity.service";
 import { TokenService } from "src/api/services/token.service";
-import Hero, { heroBuildSideDatas } from "src/components/composite/Hero";
+import Hero, { defaultHeroSideDatas } from "src/components/composite/Hero";
 import Tag, { type TagType } from "src/components/element/Tag";
 import { chainIdOrder } from "src/constants/chain";
 
@@ -72,15 +72,7 @@ export default function Index() {
         </>
       }
       description={`Earn rewards by using ${token.symbol} as liquidity, or directly earn ${token.symbol} as rewards`}
-      tabs={[
-        {
-          label: "Opportunities",
-          link: `/tokens/${token.symbol?.toLowerCase()}`,
-          key: crypto.randomUUID(),
-        },
-      ]}
-      // TODO: Make this dynamic
-      sideDatas={heroBuildSideDatas(count, maxApr, dailyRewards)}
+      sideDatas={defaultHeroSideDatas(count, maxApr, dailyRewards)}
       tags={tags.map(tag => <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="lg" />)}>
       <Outlet />
     </Hero>