Tabs sync (#5)

* tabs, capitalize, socials

* fix lint

* change links to terms & priuvacy

* lint

* move edit address to breadcrumbs

* user edit in component

* footer issue ok

* show bg-main color instead of banner outside of home and opportunities

* add link to protocol header

* implement zkSync colors/fonts as default

* commit hash

* lint

* remove comments

* lint

merkl.config.ts

@@ -52,7 +52,7 @@ export default createConfig({
       harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
     },
     merkl: {
-      base: createColoring(["#1F2333", "#B8AAFD", "#131620"], ["#FCF8F5", "#B8AAFD", "white"]),
+      base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
       info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
@@ -97,16 +97,16 @@ export default createConfig({
     //   route: "/protocols",
     //   key: crypto.randomUUID(),
     // },
-    terms: {
-      icon: "RiCompassesLine",
-      route: "/terms",
-      key: crypto.randomUUID(),
-    },
-    privacy: {
-      icon: "RiInformationFill",
-      route: "/privacy",
-      key: crypto.randomUUID(),
-    },
+    // terms: {
+    //   icon: "RiCompassesLine",
+    //   route: "/terms",
+    //   key: crypto.randomUUID(),
+    // },
+    // privacy: {
+    //   icon: "RiInformationFill",
+    //   route: "/privacy",
+    //   key: crypto.randomUUID(),
+    // },
   },
   socials: {
     discord: "",
@@ -116,6 +116,8 @@ export default createConfig({
   },
   links: {
     merkl: "https://merkl.xyz/",
+    merklTermsConditions: "https://app.merkl.xyz/merklTerms.pdf",
+    merklPrivacy: "https://privacy.angle.money",
   },
   wagmi: {
     chains: [
@@ -154,7 +156,10 @@ export default createConfig({
     ],
     client({ chain }) {
       if (chain.id === zksync.id)
-        return createClient({ chain, transport: custom(window.ethereum!) }).extend(eip712WalletActions());
+        return createClient({
+          chain,
+          transport: custom(window.ethereum!),
+        }).extend(eip712WalletActions());
       return createClient({ chain, transport: http() });
     },
     ssr: true,

src/components/composite/Hero.tsx

@@ -1,5 +1,5 @@
 import { useLocation } from "@remix-run/react";
-import { Box, Container, Divider, Group, Icon, type IconProps, Icons, Text, Title } from "dappkit";
+import { Container, Divider, Group, Icon, type IconProps, Icons, Tabs, Text, Title } from "dappkit";
 import { Button } from "dappkit";
 import config from "merkl.config";
 import type { PropsWithChildren, ReactNode } from "react";
@@ -8,28 +8,46 @@ import type { Opportunity } from "src/api/services/opportunity/opportunity.model
 export type HeroProps = PropsWithChildren<{
   icons?: IconProps[];
   title: ReactNode;
-  breadcrumbs?: { name: string; link: string; component?: ReactNode }[];
+  breadcrumbs?: { name?: string; link: string; component?: ReactNode }[];
   navigation?: { label: ReactNode; link: string };
   description: ReactNode;
   tags?: ReactNode[];
-  tabs?: { label: ReactNode; link: string }[];
+  sideDatas?: { data: ReactNode; label: string; key: string }[];
+  tabs?: { label: ReactNode; link: string; key: string }[];
   opportunity?: Opportunity;
 }>;
 
-export default function Hero({ navigation, breadcrumbs, icons, title, description, tags, tabs, children }: HeroProps) {
+export default function Hero({
+  navigation,
+  breadcrumbs,
+  icons,
+  title,
+  description,
+  tags,
+  sideDatas,
+  tabs,
+  children,
+}: HeroProps) {
   const location = useLocation();
-
   return (
     <>
+      {/* TODO: Align lines & descriptions on all pages  */}
+      {/* TODO: On sub-pages (all pages except Opportunities): Replace the banner by a color  */}
       <Group
-        className="flex-row justify-between aspect-[1440/440] bg-cover bg-no-repeat xl:aspect-auto xl:min-h-[400px]"
-        style={{ backgroundImage: `url('${config.images.hero}')` }}>
+        className={`${
+          location?.pathname === "/" || location?.pathname.includes("opportunities") ? "bg-cover" : "bg-main-6"
+        } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/350]`}
+        style={{
+          backgroundImage:
+            location?.pathname === "/" || location?.pathname.includes("opportunities")
+              ? `url('${config.images.hero}')`
+              : "none",
+        }}>
         <Container>
           <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
-            <Group className="items-center">
+            <Group className="items-center" size="sm">
               {/* TODO: Build dynamic breadcrumbs */}
-              {/** Disabled and set invisible when undefined to preserve layout height */}
-              <Button to={navigation?.link} look="soft" size="xs">
+              <Button to={navigation?.link} look="soft" bold size="xs">
                 Home
               </Button>
               {breadcrumbs?.map(breadcrumb => {
@@ -69,68 +87,37 @@ export default function Hero({ navigation, breadcrumbs, icons, title, descriptio
                       {title}
                     </Title>
                   </Group>
-                  {tags && (
-                    <Text size="xl" bold>
-                      {description}
-                    </Text>
-                  )}
                 </Group>
                 <Divider look="base" />
-                {tags && <Group className="mb-lg">{tags}</Group>}
-                {!tags && (
+                {!!description && (
                   <Text size="xl" bold>
                     {description}
                   </Text>
                 )}
+                {!!tags && <Group className="mb-lg">{tags}</Group>}
               </Group>
-              {/* TODO: Move this outside the Hero component */}
-              {/* {!location?.pathname.includes("user") && (
+              {!!sideDatas && (
                 <Group className="w-full lg:w-auto lg:flex-col mr-xl*2" size="xl">
-                  <Group className="flex-col">
-                    <Text size={3}>
-                      <Value look={totalRewards === "0" ? "soft" : "base"} format="$0,0" size={"md"}>
-                        {totalRewards}
-                      </Value>
-                    </Text>
+                  {sideDatas.map(data => (
+                    <Group key={data.key} className="flex-col">
+                      <Text size={3}>{data.data}</Text>
 
-                    <Text size="xl" className="font-bold">
-                      Daily rewards
-                    </Text>
-                  </Group>
-                  <Group className="flex-col">
-                    <Text size={3}>
-                      <Value value format="0a%">
-                        {(opportunity?.apr ?? 0) / 100}
-                      </Value>
-                    </Text>
-                    <Text size={"xl"} className="font-bold">
-                      APR
-                    </Text>
-                  </Group>
-                  <Group className="flex-col">
-                    <Text size={3}>{filteredCampaigns?.length}</Text>
-                    <Text size={"xl"} className="font-bold">
-                      Active campaigns
-                    </Text>
-                  </Group>
+                      <Text size="xl" className="font-bold not-italic">
+                        {data.label}
+                      </Text>
+                    </Group>
+                  ))}
                 </Group>
-              )} */}
+              )}
             </Group>
           </Group>
         </Container>
       </Group>
       <Container>
         {!!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.label}-${tab.link}`}>
-                {tab.label}
-              </Button>
-            ))}
-          </Box>
+          <Group size="xl" className="my-lg">
+            <Tabs tabs={tabs} look="base" size="lg" />
+          </Group>
         )}
       </Container>
       <div>{children}</div>

src/components/element/AddressEdit.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from "@remix-run/react";
+import { Button, Group, Icon, Input } from "packages/dappkit/src";
+import { useState } from "react";
+
+export default function AddressEdit() {
+  const navigate = useNavigate();
+  const [inputAddress, setInputAddress] = useState<string>();
+  const [_isEditingAddress, setIsEditingAddress] = useState(false);
+
+  return (
+    <Group size="sm">
+      <Input state={[inputAddress, setInputAddress]} look="bold" aria-label="Enter address" size="xs" />
+      <Button
+        onClick={() => (inputAddress ? navigate(`/users/${inputAddress}`) : setIsEditingAddress(false))}
+        size="sm"
+        look="soft"
+        aria-label="Submit address">
+        <Icon remix="RiCornerDownRightLine" />
+      </Button>
+    </Group>
+  );
+}

src/components/element/Socials.tsx

@@ -24,6 +24,11 @@ export default function Socials() {
           <Icon remix="RiDiscordFill" />
         </Button>
       )}
+      {!!config.socials.medium && (
+        <Button look="base" size="lg" external to={config.socials.medium}>
+          <Icon remix="RiMediumFill" />
+        </Button>
+      )}
     </Group>
   );
 }

src/components/element/Tag.tsx

@@ -270,7 +270,7 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
               </Group>
             </Group>
           }>
-          <PrimitiveTag look="tint" key={value} {...props}>
+          <PrimitiveTag look="bold" key={value} {...props}>
             <Icon src={protocol?.icon} />
             {value?.name}
           </PrimitiveTag>

src/components/element/chain/ChainTable.tsx

@@ -2,7 +2,7 @@ import { createTable } from "dappkit";
 
 export const [ChainTable, ChainRow, chainColumns] = createTable({
   chain: {
-    name: "CHAIN",
+    name: "Chain",
     size: "minmax(350px,1fr)",
     compact: "1fr",
     className: "justify-start",

src/components/element/opportunity/OpportunityTable.tsx

@@ -15,7 +15,7 @@ export const [OpportunityTable, OpportunityRow, opportunityColumns] = createTabl
     className: "justify-center",
   },
   apy: {
-    name: "APR",
+    name: "APY",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,1fr)",
     className: "justify-center",

src/components/element/opportunity/OpportunityTableRow.tsx

@@ -37,7 +37,8 @@ export default function OpportunityTableRow({ hideTags, opportunity, className,
         }
         apyColumn={
           <Group className="py-xl">
-            <Button look={(opportunity?.aprRecord?.cummulated ?? 0) > 0 ? "hype" : "soft"} className="font-mono">
+            {/* TODO: Transform in Button so we can show an APY modal */}
+            <Button look="tint" size="lg" className="font-mono">
               <Value value format="0a%">
                 {opportunity.apr / 100}
               </Value>

src/components/element/protocol/ProtocolTable.tsx

@@ -2,7 +2,7 @@ import { createTable } from "dappkit";
 
 export const [ProtocolTable, ProtocolRow, protocolColumns] = createTable({
   protocol: {
-    name: "PROTOCOL",
+    name: "Protocol",
     size: "minmax(350px,1fr)",
     compact: "1fr",
     className: "justify-start",

src/components/element/rewards/ClaimRewardsChainTable.tsx

@@ -2,20 +2,20 @@ import { createTable } from "dappkit";
 
 export const [ClaimRewardsChainTable, ClaimRewardsChainRow, claimRewardsChainColumns] = createTable({
   chain: {
-    name: "CHAIN",
+    name: "Chain",
     size: "minmax(180px,1fr)",
     compact: "1fr",
     className: "justify-start",
     main: true,
   },
   unclaimed: {
-    name: "UNCLAIMED",
+    name: "Unclaimed",
     size: "minmax(100px,150px)",
     compactSize: "minmax(min-content,1fr)",
     className: "justify-end",
   },
   claimed: {
-    name: "CLAIMED",
+    name: "Claimed",
     size: "minmax(100px,150px)",
     compactSize: "minmax(min-content,1fr)",
     className: "justify-end",

src/components/element/rewards/ClaimRewardsChainTableRow.tsx

@@ -132,7 +132,7 @@ export default function ClaimRewardsChainTableRow({
         <ClaimRewardsTokenTable
           tokenHeader={
             <Text size="xs" className="pl-md">
-              TOKEN
+              Token
             </Text>
           }
           size="sm"

src/components/element/rewards/ClaimRewardsTokenTable.tsx

@@ -2,26 +2,26 @@ import { createTable } from "dappkit";
 
 export const [ClaimRewardsTokenTable, ClaimRewardsTokenRow, claimRewardsTokenColumns] = createTable({
   token: {
-    name: "TOKEN",
+    name: "Token",
     size: "minmax(100px,1fr)",
     compact: "1fr",
     className: "justify-start",
     main: true,
   },
   pending: {
-    name: "PENDING",
+    name: "Pending",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,200px)",
     className: "justify-end",
   },
   amount: {
-    name: "UNCLAIMED",
+    name: "Unclaimed",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,200px)",
     className: "justify-end",
   },
   claimed: {
-    name: "CLAIMED",
+    name: "Claimed",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,200px)",
     className: "justify-end",

src/components/element/rewards/ClaimRewardsTokenTablePrice.tsx

@@ -12,20 +12,20 @@ export default function ClaimRewardsTokenTablePrice({ amount, price, decimals }:
   const value = formatUnits(amount, decimals);
 
   return (
-    <Group size="sm">
+    <Group size="xs" className="flex-col items-end">
       <Value
-        fallback={v => (v as string).includes("0.000") && "<0.001"}
-        className="text-right"
+        fallback={v => (v as string).includes("0.000") && "< 0.001"}
+        className="text-right items-center flex"
         look={"bold"}
         format="0,0.###">
         {value}
       </Value>
       <Value
         fallback={v => {
           if (price === 0) return "-";
-          return (v.toString() as string).includes("0.0") && "$<0.1";
+          return (v.toString() as string).includes("0.0") && "< $0.1";
         }}
-        className="text-right"
+        className="text-right items-center flex"
         look={"soft"}
         format="$0,0.#">
         {Number.parseFloat(value) * (price ?? 0)}

src/components/element/token/TokenTable.tsx

@@ -2,14 +2,14 @@ import { createTable } from "dappkit";
 
 export const [TokenTable, TokenRow, tokenColumns] = createTable({
   token: {
-    name: "TOKEN",
+    name: "Token",
     size: "minmax(350px,1fr)",
     compact: "1fr",
     className: "justify-start",
     main: true,
   },
   price: {
-    name: "PRICE",
+    name: "Price",
     size: "minmax(min-content,150px)",
     compactSize: "minmax(min-content,1fr)",
     className: "justify-end",