fix(leaderboard): campaign select + address explorer

src/components/element/historicalClaimsLibrary/HistoricalClaimsLibrary.tsx

@@ -20,6 +20,7 @@ export default function HistoricalClaimsLibrary(props: HistoricalClaimsLibraryPr
     <Group className="flex-row w-full [&>*]:flex-grow">
       {rows?.length > 0 ? (
         <HistoricalClaimsTable
+          responsive
           dividerClassName={index => (index < 2 ? "bg-accent-8" : "bg-main-8")}
           header={
             <Title h={5} className="!text-main-11 w-full">

src/components/element/leaderboard/LeaderboardLibrary.tsx

@@ -45,6 +45,7 @@ export default function LeaderboardLibrary(props: LeaderboardLibraryProps) {
     <Group className="flex-row w-full [&>*]:flex-grow">
       {!!rows?.length ? (
         <Table
+          responsive
           dividerClassName={index => (index < 2 ? "bg-accent-8" : "bg-main-8")}
           header={
             <Title h={5} className="!text-main-11 w-full">

src/components/element/leaderboard/LeaderboardTable.tsx

@@ -19,7 +19,7 @@ export const [LeaderboardTable, LeaderboardRow, LeaderboardColumns] = createTabl
   },
   protocol: {
     name: "Via",
-    size: "minmax(100px,1fr)",
+    size: "minmax(200px,1fr)",
     className: "justify-end",
   },
 });

src/components/element/rewards/byOpportunity/ClaimRewardsByOpportunity.tsx

@@ -56,6 +56,7 @@ export default function ClaimRewardsByOpportunity({ from, rewards }: claimReward
 
   return (
     <ClaimRewardsTableByOpportunity
+      responsive
       className="[&>*]:bg-main-4"
       look="soft"
       dividerClassName={index => (index < 2 ? "bg-accent-8" : "bg-main-8")}

src/components/element/user/User.tsx

@@ -1,9 +1,9 @@
 import type { Chain } from "@merkl/api";
-import { Divider, Dropdown, Group, Hash, Icon, PrimitiveTag } from "dappkit";
+import { Button, Divider, Dropdown, Group, Hash, Icon, PrimitiveTag } from "dappkit";
 
 export type UserProps = { address: string; chain: Chain };
 
-export default function User({ address }: UserProps) {
+export default function User({ address, chain }: UserProps) {
   return (
     <Dropdown
       size="lg"
@@ -18,7 +18,7 @@ export default function User({ address }: UserProps) {
           </Group>
           <Divider className="border-main-6" horizontal />
           {/* <Text size="xs">{token?.description}</Text> */}
-          {/* <Group className="flex-col" size="md">
+          <Group className="flex-col" size="md">
             <Button to={`/users/${address}`} size="xs" look="soft">
               <Icon remix="RiArrowRightLine" />
               Check user claims
@@ -36,7 +36,7 @@ export default function User({ address }: UserProps) {
                 </Button>
               );
             })}
-          </Group> */}
+          </Group>
         </Group>
       }>
       <PrimitiveTag look="soft">

src/hooks/useTransaction.tsx

@@ -5,6 +5,7 @@ import type { api as clientApi } from "./../api";
 
 type Transaction = Awaited<ReturnType<typeof clientApi.v4.interaction.transaction.get>>["data"];
 
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 export default function useTransaction(chainId: number, payload: any, txFunctionName: "deposit" | "approve") {
   const { sponsorTransactions } = useWalletContext();
 

src/modules/interaction/components/Participate.tsx

@@ -7,7 +7,7 @@ import TokenSelect from "@core/modules/token/components/element/TokenSelect";
 import { TokenService } from "@core/modules/token/token.service";
 import type { Opportunity } from "@merkl/api";
 import { useLocation } from "@remix-run/react";
-import { Button, Group, Icon, Input, PrimitiveTag, Text, Value } from "dappkit";
+import { Button, Group, Icon, Input, PrimitiveTag, Space, Text, Value } from "dappkit";
 import { Box, Collapsible } from "dappkit";
 import { useWalletContext } from "dappkit";
 import { Fmt } from "dappkit";
@@ -187,30 +187,40 @@ export default function Participate({
 
   return (
     <>
-      {displayOpportunity && <OpportunityShortCard opportunity={opportunity} displayLinks={displayLinks} />}
+      {displayOpportunity && (
+        <>
+          <Space />
+          <OpportunityShortCard opportunity={opportunity} displayLinks={displayLinks} />
+        </>
+      )}
 
       {displayLinks && !isOnOpportunityPage && (
-        <Group className="w-full py-md">
-          <Button to={link} look="soft" size="sm">
+        <>
+          <Space />
+          <Button to={link} className="mt-sm" look="soft" size="sm">
             Opportunity overview <Icon remix="RiArrowRightLine" />
           </Button>
-        </Group>
+        </>
       )}
 
       {!loading && !!interactor && (
-        <Box look="soft" className="gap-xs bg-main-5">
-          <Group className="flex flex-nowrap">
-            <Icon coloring={"warn"} remix="RiErrorWarningFill" className="text-accent-11 flex-shrink-0" />
-            <Text size="sm">{I18n.trad.get.pages.home.depositInformation}</Text>
-          </Group>
-        </Box>
+        <>
+          <Space />
+          <Box look="soft" className="gap-xs bg-main-5">
+            <Group className="flex flex-nowrap">
+              <Icon coloring={"warn"} remix="RiErrorWarningFill" className="text-accent-11 flex-shrink-0" />
+              <Text size="sm">{I18n.trad.get.pages.home.depositInformation}</Text>
+            </Group>
+          </Box>
+        </>
       )}
       {loading && !!merklConfig.deposit && (
-        <Group className="w-full justify-center">
+        <Group className="w-full justify-center mt-md">
           <Icon remix="RiLoader2Line" className="animate-spin" />
         </Group>
       )}
       <Collapsible state={[!!interactor, () => {}]}>{interactor}</Collapsible>
+
       <Collapsible state={[success, () => {}]}>
         <Box look="soft" className="gap-xs bg-main-5">
           <Group>

src/modules/opportunity/components/element/OpportunityParticipateModal.tsx

@@ -1,5 +1,5 @@
 import type { Opportunity } from "@merkl/api";
-import { Button, Divider, Group, Image, Modal, Text, Title } from "dappkit";
+import { Button, Divider, Image, Modal, Text, Title } from "dappkit";
 import type { PropsWithChildren } from "react";
 import React from "react";
 
@@ -15,7 +15,7 @@ export default function OpportunityParticipateModal({ opportunity, children }: O
     <Modal
       title={<Title h={3}>SUPPLY</Title>}
       modal={
-        <Group className="flex-col">
+        <div>
           <Divider horizontal look="bold" className="mb-xl" />
           <Participate
             opportunity={opportunity}
@@ -25,7 +25,7 @@ export default function OpportunityParticipateModal({ opportunity, children }: O
             hideInteractor={!merklConfig?.deposit}
           />
           {merklConfig.deposit && !!merklConfig.supplyCredits && merklConfig.supplyCredits.length > 0 && (
-            <Text look="bold" className="flex gap-md items-center mx-auto">
+            <Text look="bold" className="flex mt-md gap-md items-center mx-auto">
               Powered by{" "}
               {merklConfig.supplyCredits.map(credit => (
                 <React.Fragment key={credit.id}>
@@ -37,7 +37,7 @@ export default function OpportunityParticipateModal({ opportunity, children }: O
               ))}
             </Text>
           )}
-        </Group>
+        </div>
       }>
       {children}
     </Modal>

src/modules/opportunity/components/library/OpportunityLibrary.tsx

@@ -71,6 +71,7 @@ export default function OpportunityLibrary({
       case "table":
         return (
           <OpportunityTable
+            responsive
             exclude={["tvl"]}
             opportunityHeader={
               <Title className="!text-main-11" h={5}>

src/modules/opportunity/routes/opportunity.$chain.$type.$id.leaderboard.tsx

@@ -94,15 +94,13 @@ export default function Index() {
             <Icon className={isActive ? "text-accent-10" : "text-main-10"} remix="RiCircleFill" />
           </OverrideTheme>
 
-          <PrimitiveTag look={isActive ? "bold" : "soft"}>
+          <PrimitiveTag size="sm" look={isActive ? "bold" : "soft"}>
             {isActive && <Icon remix="RiFlashlightFill" />}
             {"End "}
             <Time timestamp={Number(campaign.endTimestamp) * 1000} />
           </PrimitiveTag>
 
-          <Group>
-            <Token token={campaign.rewardToken} amount={dailyRewards(campaign)} format="amount_price" value />
-          </Group>
+          <Token token={campaign.rewardToken} amount={dailyRewards(campaign)} format="amount_price" value />
         </Group>
       );
       return options;
@@ -157,15 +155,15 @@ export default function Index() {
 
   return (
     <Container>
-      <Box content="xl" size="md">
-        <Select
-          size="xl"
-          look="bold"
-          options={campaignsOptions}
-          state={[campaignId, id => setCampaignIds(id as string)]}
-          placeholder={!!campaignId ? "Campaign Selected" : "Please select a campaign"}
-        />
-      </Box>
+      <Select
+        className="w-full"
+        size="xl"
+        look="tint"
+        options={campaignsOptions}
+        state={[campaignId, id => setCampaignIds(id as string)]}
+        placeholder={!!campaignId ? "Campaign Selected" : "Please select a campaign"}
+      />
+
       <Space size="lg" />
       <Group size="lg">{metrics}</Group>
       <Space size="lg" />