feat(front): apr modal, layermenu, issues !!! (#32)

* redesign APR

* responsive

* layermenu

* lint

* change title

* remove comment

* lint

merkl.config.ts

@@ -100,6 +100,22 @@ export default createConfig({
     //   route: "/protocols",
     //   key: crypto.randomUUID(),
     // },
+    // bridge: {
+    //   icon: "RiCompassesLine",
+    //   route: "/bridge",
+    //   key: crypto.randomUUID(),
+    // },
+    docs: {
+      icon: "RiFile4Fill",
+      external: true,
+      route: "https://docs.merkl.xyz/",
+      key: crypto.randomUUID(),
+    },
+    faq: {
+      icon: "RiQuestionFill",
+      route: "/faq",
+      key: crypto.randomUUID(),
+    },
     // terms: {
     //   icon: "RiCompassesLine",
     //   route: "/terms",
@@ -118,6 +134,7 @@ export default createConfig({
     github: "",
   },
   links: {
+    docs: "https://docs.merkl.xyz/",
     merkl: "https://merkl.xyz/",
     merklTermsConditions: "https://app.merkl.xyz/merklTerms.pdf",
     merklPrivacy: "https://privacy.angle.money",

src/components/element/apr/AprModal.tsx

@@ -1,5 +1,5 @@
 import type { Opportunity } from "@merkl/api";
-import { Group, PrimitiveTag, Title, Value } from "packages/dappkit/src";
+import { Divider, Group, PrimitiveTag, Title, Value } from "packages/dappkit/src";
 import TvlRowAllocation from "../tvl/TvlRowAllocation";
 import TvlSection from "../tvl/TvlSection";
 import AprSection from "./AprSection";
@@ -12,22 +12,23 @@ export default function AprModal(props: IProps) {
   const { opportunity } = props;
 
   return (
-    <>
-      <Group className="flex-col -my-md">
-        <Group className="justify-between items-center">
-          <Title look="soft" h={5}>
-            AVERAGE APR
-          </Title>
-          <PrimitiveTag noClick look="bold" size="lg">
-            <Value value format="0a%">
-              {opportunity.apr / 100}
-            </Value>
-          </PrimitiveTag>
-        </Group>
+    <Group className="flex-col -my-md">
+      <Group className="justify-between items-center">
+        <Title look="soft" h={5}>
+          AVERAGE APR
+        </Title>
+        <PrimitiveTag noClick look="tint" size="lg">
+          <Value value format="0a%">
+            {opportunity.apr / 100}
+          </Value>
+        </PrimitiveTag>
+      </Group>
+      <Divider look="hype" className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
+      <Group className="flex-col" size="lg">
         <TvlRowAllocation opportunity={opportunity} />
         <AprSection opportunity={opportunity} />
         <TvlSection opportunity={opportunity} />
       </Group>
-    </>
+    </Group>
   );
 }

src/components/element/apr/AprSection.tsx

@@ -1,6 +1,6 @@
 import type { Opportunity } from "@merkl/api";
-import { Divider, Group, Hash, PrimitiveTag, Text, Value } from "packages/dappkit/src";
-import { Fragment, useMemo } from "react";
+import { Divider, Group, Hash, Icon, PrimitiveTag, Text, Value } from "packages/dappkit/src";
+import { useMemo } from "react";
 
 type AprSectionProps = {
   opportunity: Opportunity;
@@ -17,10 +17,10 @@ export default function AprSection({ opportunity }: AprSectionProps) {
     switch (breakdown?.type) {
       case "CAMPAIGN":
         return (
-          <Group>
+          <Group className="items-center">
             Campaign
             <PrimitiveTag look="soft" size="xs">
-              <Hash size="sm" format="short" copy className="text-main-12">
+              <Hash size="xs" format="short" copy className="text-main-12">
                 {breakdown.identifier}
               </Hash>
             </PrimitiveTag>
@@ -30,7 +30,7 @@ export default function AprSection({ opportunity }: AprSectionProps) {
         return (
           <Group>
             {breakdown.identifier.split(" ")[0]}
-            <Hash format="short" copy>
+            <Hash format="short" copy size="xs">
               {breakdown.identifier.split(" ")[1]}
             </Hash>
           </Group>
@@ -39,35 +39,37 @@ export default function AprSection({ opportunity }: AprSectionProps) {
         return breakdown.identifier;
       default:
         return (
-          <Hash format="short" copy>
+          <Hash format="short" size="xs" copy>
             {breakdown.identifier}
           </Hash>
         );
     }
   };
 
   return (
-    <>
-      <Divider className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
-      <Text size="sm">APR details</Text>
-      <Divider className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
+    <Group className="flex-col mt-md">
+      <Group className="items-center" size="sm">
+        <Icon className="text-main-11" remix="RiFileList3Line" />
+        <Text size="sm" bold>
+          APR details
+        </Text>
+      </Group>
+
+      <Divider />
       <Group className="flex-col">
         {breakdowns.map(breakdown => (
-          <Fragment key={breakdown.id}>
-            <Group className="items-center justify-between" size="sm">
-              <Text size="sm" look="bold">
-                {getAprName(breakdown)}
-              </Text>
-              <PrimitiveTag noClick look="bold" size="sm">
-                <Value value format="0a%">
-                  {breakdown.value / 100}
-                </Value>
-              </PrimitiveTag>
-            </Group>
-            <Divider className="last:hidden" look="tint" />
-          </Fragment>
+          <Group key={breakdown.id} className="items-center justify-between" size="sm">
+            <Text size="sm" look="bold">
+              {getAprName(breakdown)}
+            </Text>
+            <PrimitiveTag noClick look="bold" size="sm">
+              <Value value format="0a%">
+                {breakdown.value / 100}
+              </Value>
+            </PrimitiveTag>
+          </Group>
         ))}
       </Group>
-    </>
+    </Group>
   );
 }

src/components/element/opportunity/OpportunityFilters.tsx

@@ -293,13 +293,13 @@ export default function OpportunityFilters({ only, protocols, exclude, chains }:
       )}
       {((canApply && !clearing && navigation.state === "idle") ||
         (applying && !clearing && navigation.state === "loading")) && (
-        <Button onClick={onApplyFilters} look="hype">
+        <Button onClick={onApplyFilters} look="bold">
+          Apply
           {navigation.state === "loading" ? (
             <Icon className="animate-spin" remix="RiLoader2Line" />
           ) : (
-            <Icon remix="RiArrowRightUpLine" />
+            <Icon remix="RiArrowRightLine" />
           )}
-          Apply
         </Button>
       )}
       <Button onClick={onClearFilters} look="soft">

src/components/element/opportunity/OpportunityTable.tsx

@@ -16,18 +16,18 @@ export const [OpportunityTable, OpportunityRow, opportunityColumns] = createTabl
     name: "APR",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,1fr)",
-    className: "justify-center",
+    className: "md:justify-center",
   },
   tvl: {
     name: "TVL",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,1fr)",
-    className: "justify-center",
+    className: "md:justify-center",
   },
   rewards: {
     name: "Daily rewards",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,1fr)",
-    className: "justify-center",
+    className: "md:justify-center",
   },
 });

src/components/element/opportunity/OpportunityTableRow.tsx

@@ -25,7 +25,7 @@ export default function OpportunityTableRow({ hideTags, opportunity, className,
       <OpportunityRow
         size="lg"
         content="sm"
-        className={mergeClass("dim", className)}
+        className={mergeClass("cursor-pointer", className)}
         {...props}
         aprColumn={
           <Dropdown size="xl" content={<AprModal opportunity={opportunity} />}>

src/components/element/participate/Participate.client.tsx

@@ -15,11 +15,8 @@ export default function Participate({ opportunity }: ParticipateProps) {
   const [amount, setAmount] = useState<bigint>(0n);
   const {
     target,
-    targets,
     balance,
     token: inputToken,
-    approve,
-    deposit,
     transaction,
   } = useParticipate(opportunity.chainId, opportunity.protocol?.id, opportunity.identifier, tokenAddress, amount);
 

src/components/element/tvl/TvlRowAllocation.tsx

@@ -19,10 +19,12 @@ export default function TvlRowAllocation({ opportunity }: IProps) {
         <Group className="flex-col" size="sm">
           <Group className="items-center" size="sm">
             <Icon src={opportunity.tokens[0].icon} />
-            <Value value format="0.0a">
-              {tvlBreakdownToken0?.value}
-            </Value>
-            <Text size="sm" look="bold">
+            <Text size="sm" look="bold" bold>
+              <Value value format="0.0a">
+                {tvlBreakdownToken0?.value}
+              </Value>
+            </Text>
+            <Text size="sm" look="bold" bold>
               {token0.name}
             </Text>
 
@@ -41,10 +43,12 @@ export default function TvlRowAllocation({ opportunity }: IProps) {
           </Group>
           <Group className="items-center" size="sm">
             <Icon src={opportunity.tokens[1].icon} />
-            <Value value format="0.0a">
-              {tvlBreakdownToken1?.value}
-            </Value>
-            <Text size="sm" look="bold">
+            <Text size="sm" look="bold" bold>
+              <Value value format="0.0a">
+                {tvlBreakdownToken1?.value}
+              </Value>
+            </Text>
+            <Text size="sm" look="bold" bold>
               {token1.name}
             </Text>
 
@@ -70,11 +74,16 @@ export default function TvlRowAllocation({ opportunity }: IProps) {
   }
   if (!content) return null;
   return (
-    <>
-      <Divider className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
-      <Text size="sm">TVL allocation</Text>
-      <Divider className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
+    <Group className="flex-col">
+      <Group className="items-center" size="sm">
+        <Icon className="text-main-11" remix="RiContractRightFill" />
+        <Text size="sm" bold>
+          TVL allocation
+        </Text>
+      </Group>
+
+      <Divider />
       {content}
-    </>
+    </Group>
   );
 }

src/components/element/tvl/TvlSection.tsx

@@ -32,16 +32,20 @@ export default function TvlSection({ opportunity }: TvlSectionProps) {
             <Text look="bold" size="sm">
               {breakdown.identifier.split(" ")[0]}
             </Text>
-            <Hash format="short" copy size="sm">
-              {breakdown.identifier.split(" ")[1]}
-            </Hash>
+            <PrimitiveTag look="soft" size="xs">
+              <Hash format="short" look="bold" copy size="xs">
+                {breakdown.identifier.split(" ")[1]}
+              </Hash>
+            </PrimitiveTag>
           </Group>
         );
       default:
         return (
-          <Hash format="short" copy>
-            {breakdown.identifier}
-          </Hash>
+          <PrimitiveTag look="soft" size="xs">
+            <Hash format="short" look="bold" copy>
+              {breakdown.identifier}
+            </Hash>
+          </PrimitiveTag>
         );
     }
   };
@@ -52,21 +56,25 @@ export default function TvlSection({ opportunity }: TvlSectionProps) {
     <>
       {hasForwarders && (
         <>
-          <Divider className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
           <Group
-            className="grid"
+            className="grid mt-md"
             style={{
               gridTemplateColumns: "minmax(350px, 1fr) minmax(min-content, 100px) minmax(min-content, 100px)",
             }}>
-            <Text size="sm">Forwarder details</Text>
+            <Group className="items-center" size="sm">
+              <Icon className="text-main-11" remix="RiForwardEndFill" />
+              <Text size="sm" bold>
+                Forwarder details
+              </Text>
+            </Group>
             <Text size="sm" className="inline-flex justify-end">
               APR
             </Text>
             <Text size="sm" className="inline-flex justify-end">
               TVL
             </Text>
           </Group>
-          <Divider className="-mx-xl w-[calc(100%+2*var(--spacing-xl))]" />
+          <Divider />
         </>
       )}
       <Group className="flex-col" size="sm">
@@ -97,17 +105,19 @@ export default function TvlSection({ opportunity }: TvlSectionProps) {
                   </Value>
                 </Text>
               </Group>
-              <Divider className="last:hidden" look="tint" />
             </Fragment>
           );
         })}
       </Group>
 
       {tvlFiltered.length >= DEFAULT_ARRAY_SIZE && (
-        <Button size="sm" className="mx-auto my-sm" look="soft" onClick={() => setIsShowingMore(!isShowingMore)}>
-          Show {isShowingMore ? "Less" : "More"}
-          <Icon remix={isShowingMore ? "RiArrowUpLine" : "RiArrowDownLine"} />
-        </Button>
+        <>
+          <Divider look="soft" />
+          <Button size="sm" className="mx-auto my-sm" look="soft" onClick={() => setIsShowingMore(!isShowingMore)}>
+            Show {isShowingMore ? "Less" : "More"}
+            <Icon remix={isShowingMore ? "RiArrowUpLine" : "RiArrowDownLine"} />
+          </Button>
+        </>
       )}
     </>
   );