From a0d8ee76a23ed0730ce92673fa3b28d691e8dd6f Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Tue, 3 Dec 2024 15:07:44 +0100
Subject: [PATCH 1/4] wip

---
 .../element/functions/SearchBar.tsx           | 91 +++++++++++++++----
 src/customer/assets/style/shorthands.css      |  4 +-
 2 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/components/element/functions/SearchBar.tsx b/src/components/element/functions/SearchBar.tsx
index 9ed747d8..f797b302 100644
--- a/src/components/element/functions/SearchBar.tsx
+++ b/src/components/element/functions/SearchBar.tsx
@@ -1,11 +1,24 @@
 import type { Opportunity } from "@merkl/api";
 import { Form, useLocation } from "@remix-run/react";
-import { Group, Icon, Icons, Input, Modal, Title, useShortcut } from "dappkit";
+import {
+  Divider,
+  Group,
+  Icon,
+  Icons,
+  Input,
+  Modal,
+  Title,
+  useShortcut,
+} from "dappkit";
 import { Button } from "dappkit";
 import Scroll from "packages/dappkit/src/components/primitives/Scroll";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import useOpportunity from "src/hooks/resources/useOpportunity";
-import { type Results, type Searchable, useMerklSearch } from "src/hooks/useMerklSearch";
+import {
+  type Results,
+  type Searchable,
+  useMerklSearch,
+} from "src/hooks/useMerklSearch";
 
 const titles: { [S in Searchable]: ReactNode } = {
   chain: "Chains",
@@ -18,9 +31,13 @@ function OpportunityResult({ opportunity }: { opportunity: Opportunity }) {
   const { link, icons } = useOpportunity(opportunity);
 
   return (
-    <Button to={link} size="lg" look="bold">
-      <Icons>{icons}</Icons> {opportunity.name}
-    </Button>
+    <>
+      <Button to={link} look="soft" className="gap-lg">
+        <Icons>{icons}</Icons> {opportunity.name}{" "}
+        <Icon remix="RiArrowRightLine" />
+      </Button>
+      <Divider look="bold" />
+    </>
   );
 }
 
@@ -50,34 +67,61 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
 
     return (
       <Group className="flex-col flex-nowrap overflow-hidden">
-        <Scroll className="min-h-[70vh] w-full gap-xl z-10" vertical>
+        <Scroll
+          className="min-h-[70vh] w-full [&>*]:flex [&>*]:flex-col [&>*]:gap-xl*2 z-10"
+          vertical
+        >
           {entries
             .filter(([_, res]) => res?.length)
             .map(([category, results]) => (
-              <Group key={category} className="flex-col">
+              <Group key={category} className="flex-col" size="xl">
                 <Title h={4}>{titles[category]}</Title>
-                <Group size="sm" className="flex-col">
+                <Group className="flex-col">
                   {results.map((_, i) => {
                     switch (category) {
                       case "chain":
                         return (
-                          <Button to={`/chains/${results[i].name}`} size="lg" look="bold">
-                            <Icon src={results[i].icon} /> {results[i].name}
-                          </Button>
+                          <>
+                            <Button
+                              to={`/chain/${results[i].name}`}
+                              look="soft"
+                              className="gap-lg"
+                            >
+                              <Icon src={results[i].icon} /> {results[i].name}
+                              <Icon remix="RiArrowRightLine" />
+                            </Button>
+                            <Divider look="bold" />
+                          </>
                         );
                       case "opportunity":
                         return <OpportunityResult opportunity={results[i]} />;
                       case "token":
                         return (
-                          <Button to={`/token/${results[i].symbol}`} size="lg" look="bold">
-                            <Icon src={results[i].icon} /> {results[i].symbol}
-                          </Button>
+                          <>
+                            <Button
+                              to={`/token/${results[i].symbol}`}
+                              look="soft"
+                              className="gap-lg"
+                            >
+                              <Icon src={results[i].icon} /> {results[i].symbol}{" "}
+                              <Icon remix="RiArrowRightLine" />
+                            </Button>
+                            <Divider look="bold" />
+                          </>
                         );
                       case "protocol":
                         return (
-                          <Button to={`/protocols/${results[i].name}`} size="lg" look="bold">
-                            <Icon src={results[i].icon} /> {results[i].name}
-                          </Button>
+                          <>
+                            <Button
+                              to={`/protocol/${results[i].name}`}
+                              look="soft"
+                              className="gap-lg"
+                            >
+                              <Icon src={results[i].icon} /> {results[i].name}
+                              <Icon remix="RiArrowRightLine" />
+                            </Button>
+                            <Divider look="bold" />
+                          </>
                         );
                       default:
                         break;
@@ -93,14 +137,21 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
 
   return (
     <Modal
-      className="h-full py-xl*2 w-[90vw] md:w-[70vw] lg:w-[50vw] xl:w-[500px] z-20 [&>*]:max-h-full [&>*]:animate-drop [&>*]:origin-top"
+      size="xl"
+      className="h-full p-xl*2 w-[90vw] md:w-[70vw] lg:w-[50vw] xl:w-[500px] z-20 [&>*]:max-h-full [&>*]:animate-drop [&>*]:origin-top"
       state={[opened, setOpened]}
       modal={
         <>
-          <Input look="bold" size="md" state={[searchInput, setSearchInput]} placeholder="Search Merkl..." />
+          <Input
+            look="base"
+            size="md"
+            state={[searchInput, setSearchInput]}
+            placeholder="Search Merkl..."
+          />
           {Results}
         </>
-      }>
+      }
+    >
       <Form>
         {icon ? (
           <Button look="base">
diff --git a/src/customer/assets/style/shorthands.css b/src/customer/assets/style/shorthands.css
index 0a0de72b..8ba2bc16 100644
--- a/src/customer/assets/style/shorthands.css
+++ b/src/customer/assets/style/shorthands.css
@@ -12,13 +12,13 @@
     @apply opacity-100;
   }
   .dim:hover {
-    @apply opacity-70;
+    @apply opacity-60;
   }
 }
 
 :disabled,
 .disabled {
-  @apply opacity-40 pointer-events-none;
+  @apply opacity-60 pointer-events-none;
 }
 
 .faq-item__trigger[data-state="open"] > * {

From 6fe297b33e405aa56dcf56d65ab16eb5dbf16d7a Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Tue, 3 Dec 2024 15:21:00 +0100
Subject: [PATCH 2/4] header ok

---
 packages/dappkit                 |  2 +-
 src/components/layout/Header.tsx | 63 ++++++++++++++++++++++----------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/packages/dappkit b/packages/dappkit
index 6802c581..d1e09d70 160000
--- a/packages/dappkit
+++ b/packages/dappkit
@@ -1 +1 @@
-Subproject commit 6802c5810216f8637a904753511f8c1fb226f42a
+Subproject commit d1e09d700ad9a8efa892a2e4fa1841f30ec78c32
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 4898ce24..4818fe08 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,4 +1,12 @@
-import { Button, Container, Dropdown, Group, Icon, WalletButton, useTheme } from "dappkit";
+import {
+  Button,
+  Container,
+  Dropdown,
+  Group,
+  Icon,
+  WalletButton,
+  useTheme,
+} from "dappkit";
 import { Image } from "dappkit";
 import customerDarkLogo from "src/customer/assets/images/customer-dark-logo.svg";
 import customerLogo from "src/customer/assets/images/customer-logo.svg";
@@ -10,6 +18,8 @@ import { useMemo, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import SCREENS from "../../../packages/dappkit/src/constants/SCREENS.json";
 import { LayerMenu } from "./LayerMenu";
+import SwitchMode from "../element/SwitchMode";
+import SearchBar from "../element/functions/SearchBar";
 
 const container = {
   hidden: { opacity: 0, y: 0 },
@@ -36,7 +46,10 @@ export default function Header() {
   const mdScreens = useMediaQuery({ maxWidth: SCREENS.lg });
 
   const smScreens = useMediaQuery({ maxWidth: SCREENS.md });
-  const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
+  const canSwitchModes = useMemo(
+    () => !(!config.modes || config.modes?.length === 1),
+    []
+  );
 
   const routes = useMemo(() => {
     const { homepage, ...rest } = config.routes;
@@ -50,7 +63,7 @@ export default function Header() {
           key: crypto.randomUUID(),
         },
       },
-      rest,
+      rest
     );
   }, [user]);
 
@@ -59,7 +72,8 @@ export default function Header() {
       variants={container}
       initial="hidden"
       whileInView="visible"
-      className="w-full sticky left-0 top-0 z-10 backdrop-blur">
+      className="w-full sticky left-0 top-0 z-10 backdrop-blur"
+    >
       <Container className="py-xl">
         <Group className="justify-between items-center">
           <motion.div variants={item}>
@@ -69,7 +83,8 @@ export default function Header() {
                 padding="xs"
                 open={open}
                 content={<LayerMenu nav={routes} setOpen={setOpen} />}
-                className="flex gap-sm md:gap-lg items-center">
+                className="flex gap-sm md:gap-lg items-center"
+              >
                 <Image
                   className="w-[140px] md:w-[200px]"
                   alt={`${config.appName} logo`}
@@ -90,20 +105,30 @@ export default function Header() {
 
           <motion.div variants={item}>
             <Group className="gap-xl items-center">
-              {!mdScreens &&
-                Object.entries(routes)
-                  .filter(([key]) => !["homepage", "privacy", "terms"].includes(key))
-                  .map(([key, { route }]) => {
-                    return (
-                      <Button className="capitalize" look="soft" size="lg" key={`${key}-link`} to={route}>
-                        {key}
-                      </Button>
-                    );
-                  })}
-              {canSwitchModes && (
-                <Button size="lg" look="base" onClick={toggleMode}>
-                  <Icon size="sm" remix={mode === "dark" ? "RiMoonClearLine" : "RiSunLine"} />
-                </Button>
+              {!mdScreens && (
+                <>
+                  {Object.entries(config.routes)
+                    .filter(
+                      ([key]) => !["homepage", "privacy", "terms"].includes(key)
+                    )
+                    .map(([key, { route }]) => {
+                      return (
+                        <Button
+                          look="soft"
+                          size="lg"
+                          key={`${key}-link`}
+                          to={route}
+                        >
+                          {key}
+                        </Button>
+                      );
+                    })}
+                  <Group className="items-center">
+                    {canSwitchModes && <SwitchMode />}
+
+                    <SearchBar icon={true} />
+                  </Group>
+                </>
               )}
               {!smScreens && <WalletButton />}
             </Group>

From 1bc7bb4c3333ff0d24229bc36b0346f67bcdca88 Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Tue, 3 Dec 2024 18:09:49 +0100
Subject: [PATCH 3/4] Select + Connect wallet modal

---
 packages/dappkit                              |   2 +-
 src/components/element/SwitchMode.tsx         |   6 +-
 src/components/element/Tag.tsx                |  48 ++++++--
 .../element/functions/SearchBar.tsx           |   8 +-
 .../opportunity/OpportunityFilters.tsx        |  43 +++----
 src/components/layout/Header.tsx              | 115 +++++++++---------
 src/components/layout/LayerMenu.tsx           |  26 ++--
 7 files changed, 138 insertions(+), 110 deletions(-)

diff --git a/packages/dappkit b/packages/dappkit
index d1e09d70..49cb1b4e 160000
--- a/packages/dappkit
+++ b/packages/dappkit
@@ -1 +1 @@
-Subproject commit d1e09d700ad9a8efa892a2e4fa1841f30ec78c32
+Subproject commit 49cb1b4e4696c5688d18a287728ea0a8fc6b4811
diff --git a/src/components/element/SwitchMode.tsx b/src/components/element/SwitchMode.tsx
index 1ebe8951..b21d2495 100644
--- a/src/components/element/SwitchMode.tsx
+++ b/src/components/element/SwitchMode.tsx
@@ -4,7 +4,11 @@ import { useMemo } from "react";
 
 export default function SwitchMode() {
   const { mode, toggleMode } = useTheme();
-  const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
+  const canSwitchModes = useMemo(
+    () => !(!config.modes || config.modes?.length === 1),
+    []
+  );
+
   return (
     canSwitchModes && (
       <Button look="base" onClick={toggleMode}>
diff --git a/src/components/element/Tag.tsx b/src/components/element/Tag.tsx
index 275bd353..55927187 100644
--- a/src/components/element/Tag.tsx
+++ b/src/components/element/Tag.tsx
@@ -1,6 +1,15 @@
 import type { Opportunity, Token } from "@angleprotocol/merkl-api";
 import type { Chain } from "@merkl/api";
-import { Button, Divider, Dropdown, Group, Hash, Icon, PrimitiveTag, Text } from "dappkit";
+import {
+  Button,
+  Divider,
+  Dropdown,
+  Group,
+  Hash,
+  Icon,
+  PrimitiveTag,
+  Text,
+} from "dappkit";
 import type { ButtonProps } from "dappkit";
 import { type Action, actions } from "src/config/actions";
 import type { Protocol } from "src/config/protocols";
@@ -24,7 +33,11 @@ export type TagProps<T extends keyof TagTypes> = ButtonProps & {
   value: TagTypes[T];
 };
 
-export default function Tag<T extends keyof TagTypes>({ type, value, ...props }: TagProps<T>) {
+export default function Tag<T extends keyof TagTypes>({
+  type,
+  value,
+  ...props
+}: TagProps<T>) {
   switch (type) {
     case "status": {
       const status = statuses[value as TagTypes["status"]] ?? statuses.LIVE;
@@ -51,7 +64,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                 </Button>
               </Group>
             </Group>
-          }>
+          }
+        >
           <PrimitiveTag look="soft" key={value} {...props}>
             <Icon size={props?.size} {...status.icon} />
             {status?.label}
@@ -84,7 +98,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                 </Button>
               </Group>
             </Group>
-          }>
+          }
+        >
           <PrimitiveTag look="base" key={value} {...props}>
             <Icon size={props?.size} src={chain?.icon} />
             {chain?.name}
@@ -116,7 +131,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                 Open
               </Button>
             </Group>
-          }>
+          }
+        >
           <PrimitiveTag look="bold" key={value} {...props}>
             <Icon size={props?.size} {...action.icon} />
             {action?.label}
@@ -159,7 +175,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                 </Button>
               </Group>
             </Group>
-          }>
+          }
+        >
           <PrimitiveTag look="base" key={value} {...props}>
             <Icon size={props?.size} src={token.icon} />
             {token?.symbol}
@@ -193,7 +210,11 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
               <Divider look="soft" horizontal />
               <Group className="flex-col" size="md">
                 {/* <Text size="xs">{token?.description}</Text> */}
-                <Button to={`/chains/${token.chain?.name}`} size="sm" look="bold">
+                <Button
+                  to={`/chains/${token.chain?.name}`}
+                  size="sm"
+                  look="bold"
+                >
                   <Icon size="sm" src={token.chain?.icon} />
                   {token.chain?.name}
                 </Button>
@@ -207,7 +228,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                 </Button>
               </Group>
             </Group>
-          }>
+          }
+        >
           <PrimitiveTag look="base" key={value} {...props}>
             <Icon size={props?.size} src={token.chain.icon} />
             {token.chain.name}
@@ -233,7 +255,12 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
               <Divider className="border-main-6" horizontal />
               {/* <Text size="xs">{token?.description}</Text> */}
               <Group className="flex-col" size="md">
-                <Button to={`/protocols/${protocol?.name}`} size="sm" look="bold">
+                <Button
+                  to={`/protocols/${protocol?.name}`}
+                  size="xs"
+                  look="soft"
+                >
+                  <Icon remix="RiArrowRightLine" />
                   {protocol?.name} on Merkl
                 </Button>
                 <Button size="xs" look="soft">
@@ -242,7 +269,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
                 </Button>
               </Group>
             </Group>
-          }>
+          }
+        >
           <PrimitiveTag look="tint" key={value} {...props}>
             <Icon src={protocol?.icon} />
             {value?.name}
diff --git a/src/components/element/functions/SearchBar.tsx b/src/components/element/functions/SearchBar.tsx
index f797b302..e1cef143 100644
--- a/src/components/element/functions/SearchBar.tsx
+++ b/src/components/element/functions/SearchBar.tsx
@@ -32,7 +32,7 @@ function OpportunityResult({ opportunity }: { opportunity: Opportunity }) {
 
   return (
     <>
-      <Button to={link} look="soft" className="gap-lg">
+      <Button to={link} look="soft">
         <Icons>{icons}</Icons> {opportunity.name}{" "}
         <Icon remix="RiArrowRightLine" />
       </Button>
@@ -101,7 +101,6 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
                             <Button
                               to={`/token/${results[i].symbol}`}
                               look="soft"
-                              className="gap-lg"
                             >
                               <Icon src={results[i].icon} /> {results[i].symbol}{" "}
                               <Icon remix="RiArrowRightLine" />
@@ -115,7 +114,6 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
                             <Button
                               to={`/protocol/${results[i].name}`}
                               look="soft"
-                              className="gap-lg"
                             >
                               <Icon src={results[i].icon} /> {results[i].name}
                               <Icon remix="RiArrowRightLine" />
@@ -144,9 +142,9 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
         <>
           <Input
             look="base"
-            size="md"
             state={[searchInput, setSearchInput]}
-            placeholder="Search Merkl..."
+            placeholder="Search"
+            suffix={<Icon className="text-main-12" remix="RiSearchLine" />}
           />
           {Results}
         </>
diff --git a/src/components/element/opportunity/OpportunityFilters.tsx b/src/components/element/opportunity/OpportunityFilters.tsx
index a7f826c8..681316b3 100644
--- a/src/components/element/opportunity/OpportunityFilters.tsx
+++ b/src/components/element/opportunity/OpportunityFilters.tsx
@@ -14,7 +14,11 @@ export type OpportunityFilterProps = {
   exclude?: OpportunityFilter[];
 };
 
-export default function OpportunityFilters({ only, exclude, chains }: OpportunityFilterProps) {
+export default function OpportunityFilters({
+  only,
+  exclude,
+  chains,
+}: OpportunityFilterProps) {
   //TODO: componentify theses
   const actionOptions = Object.entries(actions).reduce(
     (obj, [action, { icon, label }]) =>
@@ -26,7 +30,7 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
           </>
         ),
       }),
-    {},
+    {}
   );
   const statusOptions = {
     LIVE: (
@@ -56,35 +60,35 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
             </>
           ),
         }),
-      {},
+      {}
     ) ?? [];
 
   const [actionsFilter, setActions] = useSearchParamState<string[]>(
     "action",
-    v => v?.join(","),
-    v => v?.split(","),
+    (v) => v?.join(","),
+    (v) => v?.split(",")
   );
   const [statusFilter, setStatus] = useSearchParamState<string[]>(
     "status",
-    v => v?.join(","),
-    v => v?.split(","),
+    (v) => v?.join(","),
+    (v) => v?.split(",")
   );
   const [chainIdsFilter, setChainIds] = useSearchParamState<string[]>(
     "chain",
-    v => v?.join(","),
-    v => v?.split(","),
+    (v) => v?.join(","),
+    (v) => v?.split(",")
   );
 
   const [search, setSearch] = useSearchParamState<string>(
     "search",
-    v => v,
-    v => v,
+    (v) => v,
+    (v) => v
   );
   const [innerSearch, setInnerSearch] = useState<string>(search ?? "");
 
   const fields = useMemo(() => {
-    if (only) return filters.filter(f => only.includes(f));
-    if (exclude) return filters.filter(f => !exclude.includes(f));
+    if (only) return filters.filter((f) => only.includes(f));
+    if (exclude) return filters.filter((f) => !exclude.includes(f));
     return filters;
   }, [only, exclude]);
 
@@ -95,14 +99,14 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
   }
 
   return (
-    <Group>
+    <Group className="items-center">
       {fields.includes("search") && (
         <Form>
           <Input
             name="search"
             value={innerSearch}
             state={[innerSearch, setInnerSearch]}
-            suffix={<Icon size="sm" remix="RiSearchLine" />}
+            suffix={<Icon remix="RiSearchLine" />}
             onClick={onSearchSubmit}
             placeholder="Search"
           />
@@ -110,34 +114,31 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
       )}
       {fields.includes("action") && (
         <Select
-          state={[actionsFilter, a => setActions(a as string[])]}
+          state={[actionsFilter, (a) => setActions(a as string[])]}
           allOption={"All actions"}
           multiple
           options={actionOptions}
-          size="sm"
           look="bold"
           placeholder="Actions"
         />
       )}
       {fields.includes("status") && (
         <Select
-          state={[statusFilter, s => setStatus(s as string[])]}
+          state={[statusFilter, (s) => setStatus(s as string[])]}
           allOption={"All status"}
           multiple
           options={statusOptions}
-          size="sm"
           look="bold"
           placeholder="Status"
         />
       )}
       {fields.includes("chain") && (
         <Select
-          state={[chainIdsFilter, c => setChainIds(c as string[])]}
+          state={[chainIdsFilter, (c) => setChainIds(c as string[])]}
           allOption={"All chains"}
           multiple
           search
           options={chainOptions}
-          size="sm"
           look="bold"
           placeholder="Chains"
         />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 4818fe08..152c6e76 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -15,8 +15,6 @@ import { motion } from "framer-motion";
 import config from "merkl.config";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo, useState } from "react";
-import { useMediaQuery } from "react-responsive";
-import SCREENS from "../../../packages/dappkit/src/constants/SCREENS.json";
 import { LayerMenu } from "./LayerMenu";
 import SwitchMode from "../element/SwitchMode";
 import SearchBar from "../element/functions/SearchBar";
@@ -40,16 +38,9 @@ const item = {
 };
 
 export default function Header() {
-  const { mode, toggleMode } = useTheme();
+  const { mode } = useTheme();
   const { address: user } = useWalletContext();
   const [open, setOpen] = useState<boolean>(false);
-  const mdScreens = useMediaQuery({ maxWidth: SCREENS.lg });
-
-  const smScreens = useMediaQuery({ maxWidth: SCREENS.md });
-  const canSwitchModes = useMemo(
-    () => !(!config.modes || config.modes?.length === 1),
-    []
-  );
 
   const routes = useMemo(() => {
     const { homepage, ...rest } = config.routes;
@@ -77,60 +68,64 @@ export default function Header() {
       <Container className="py-xl">
         <Group className="justify-between items-center">
           <motion.div variants={item}>
-            {mdScreens ? (
-              <Dropdown
-                size="lg"
-                padding="xs"
-                open={open}
-                content={<LayerMenu nav={routes} setOpen={setOpen} />}
-                className="flex gap-sm md:gap-lg items-center"
-              >
-                <Image
-                  className="w-[140px] md:w-[200px]"
-                  alt={`${config.appName} logo`}
-                  src={mode !== "dark" ? customerDarkLogo : customerLogo}
-                />
-                <Icon className="text-main-12" remix="RiArrowDownSLine" />
-              </Dropdown>
-            ) : (
-              <Button size="lg" to={routes.homepage.route} look="soft">
-                <Image
-                  className="w-[200px]"
-                  alt={`${config.appName} logo`}
-                  src={mode !== "dark" ? customerDarkLogo : customerLogo}
-                />
-              </Button>
-            )}
+            <Dropdown
+              size="lg"
+              padding="xs"
+              open={open}
+              content={<LayerMenu nav={routes} setOpen={setOpen} />}
+              className="lg:hidden flex gap-sm md:gap-lg items-center"
+            >
+              <Image
+                className="w-[140px] md:w-[200px]"
+                alt={`${config.appName} logo`}
+                src={mode !== "dark" ? customerDarkLogo : customerLogo}
+              />
+              <Icon className="text-main-12" remix="RiArrowDownSLine" />
+            </Dropdown>
+
+            <Button
+              className="hidden lg:flex"
+              size="lg"
+              to={routes.homepage.route}
+              look="soft"
+            >
+              <Image
+                className="w-[200px]"
+                alt={`${config.appName} logo`}
+                src={mode !== "dark" ? customerDarkLogo : customerLogo}
+              />
+            </Button>
           </motion.div>
 
           <motion.div variants={item}>
-            <Group className="gap-xl items-center">
-              {!mdScreens && (
-                <>
-                  {Object.entries(config.routes)
-                    .filter(
-                      ([key]) => !["homepage", "privacy", "terms"].includes(key)
-                    )
-                    .map(([key, { route }]) => {
-                      return (
-                        <Button
-                          look="soft"
-                          size="lg"
-                          key={`${key}-link`}
-                          to={route}
-                        >
-                          {key}
-                        </Button>
-                      );
-                    })}
-                  <Group className="items-center">
-                    {canSwitchModes && <SwitchMode />}
+            <Group className="items-center" size="xl">
+              <Group className="hidden lg:flex items-center" size="xl">
+                {Object.entries(config.routes)
+                  .filter(
+                    ([key]) => !["homepage", "privacy", "terms"].includes(key)
+                  )
+                  .map(([key, { route }]) => {
+                    return (
+                      <Button
+                        look="soft"
+                        size="lg"
+                        key={`${key}-link`}
+                        to={route}
+                      >
+                        {key}
+                      </Button>
+                    );
+                  })}
+                <Group className="items-center">
+                  <SwitchMode />
+
+                  <SearchBar icon={true} />
+                </Group>
+              </Group>
 
-                    <SearchBar icon={true} />
-                  </Group>
-                </>
-              )}
-              {!smScreens && <WalletButton />}
+              <Group className="hidden md:flex">
+                <WalletButton />
+              </Group>
             </Group>
           </motion.div>
         </Group>
diff --git a/src/components/layout/LayerMenu.tsx b/src/components/layout/LayerMenu.tsx
index 4731d06e..ce04ac42 100644
--- a/src/components/layout/LayerMenu.tsx
+++ b/src/components/layout/LayerMenu.tsx
@@ -2,9 +2,7 @@ import { NavLink } from "@remix-run/react";
 import { Divider, Group, Text, WalletButton } from "dappkit";
 import { Icon } from "packages/dappkit/src";
 import type { FC } from "react";
-import { useMediaQuery } from "react-responsive";
 import type { routesType } from "src/config/type";
-import SCREENS from "../../../packages/dappkit/src/constants/SCREENS.json";
 import SwitchMode from "../element/SwitchMode";
 import SearchBar from "../element/functions/SearchBar";
 
@@ -12,7 +10,6 @@ export const LayerMenu: FC<{
   nav: routesType;
   setOpen: (open: boolean) => void;
 }> = ({ nav, setOpen }) => {
-  const smScreens = useMediaQuery({ maxWidth: SCREENS.md });
   return (
     <div className="layermenu z-50 min-w-64 bg-main-2 flex flex-col">
       <main className="flex-1 overflow-y-scroll w-full">
@@ -20,11 +17,15 @@ export const LayerMenu: FC<{
           {Object.entries(nav)
             .filter(([key]) => !["privacy", "terms"].includes(key))
             .map(([key, value]) => (
-              <li key={value.key} className="border-b-1 first:pt-0 py-lg border-main-11">
+              <li
+                key={value.key}
+                className="border-b-1 first:pt-0 py-lg border-main-11"
+              >
                 <NavLink
                   onClick={() => setOpen(false)}
                   to={value.route}
-                  className="flex items-center gap-md capitalize">
+                  className="flex items-center gap-md capitalize"
+                >
                   <Icon remix={value.icon} className="text-xl text-main-11" />
                   <Text size="lg" bold className="text-main-12">
                     {key}
@@ -37,15 +38,16 @@ export const LayerMenu: FC<{
       <footer className="mt-lg">
         <Group className="flex-col items-stretch">
           <Group className="items-center">
-            <SearchBar />
+            <div className="flex-1">
+              <SearchBar />
+            </div>
             <SwitchMode />
           </Group>
-          {!!smScreens && (
-            <>
-              <Divider look="soft" />
-              <WalletButton />
-            </>
-          )}
+
+          <Group className="md:hidden">
+            <Divider look="soft" />
+            <WalletButton />
+          </Group>
         </Group>
       </footer>
     </div>

From 415db6f3bef90ac78ebbe21c14b3d0da1eae4329 Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Tue, 3 Dec 2024 18:11:56 +0100
Subject: [PATCH 4/4] lint

---
 src/components/element/SwitchMode.tsx         |  5 +-
 src/components/element/Tag.tsx                | 47 ++++---------------
 .../element/functions/SearchBar.tsx           | 47 ++++---------------
 .../opportunity/OpportunityFilters.tsx        | 36 +++++++-------
 src/components/layout/Header.tsx              | 38 ++++-----------
 src/components/layout/LayerMenu.tsx           |  8 +---
 6 files changed, 46 insertions(+), 135 deletions(-)

diff --git a/src/components/element/SwitchMode.tsx b/src/components/element/SwitchMode.tsx
index b21d2495..1379ae9d 100644
--- a/src/components/element/SwitchMode.tsx
+++ b/src/components/element/SwitchMode.tsx
@@ -4,10 +4,7 @@ import { useMemo } from "react";
 
 export default function SwitchMode() {
   const { mode, toggleMode } = useTheme();
-  const canSwitchModes = useMemo(
-    () => !(!config.modes || config.modes?.length === 1),
-    []
-  );
+  const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
 
   return (
     canSwitchModes && (
diff --git a/src/components/element/Tag.tsx b/src/components/element/Tag.tsx
index 55927187..8a3da624 100644
--- a/src/components/element/Tag.tsx
+++ b/src/components/element/Tag.tsx
@@ -1,15 +1,6 @@
 import type { Opportunity, Token } from "@angleprotocol/merkl-api";
 import type { Chain } from "@merkl/api";
-import {
-  Button,
-  Divider,
-  Dropdown,
-  Group,
-  Hash,
-  Icon,
-  PrimitiveTag,
-  Text,
-} from "dappkit";
+import { Button, Divider, Dropdown, Group, Hash, Icon, PrimitiveTag, Text } from "dappkit";
 import type { ButtonProps } from "dappkit";
 import { type Action, actions } from "src/config/actions";
 import type { Protocol } from "src/config/protocols";
@@ -33,11 +24,7 @@ export type TagProps<T extends keyof TagTypes> = ButtonProps & {
   value: TagTypes[T];
 };
 
-export default function Tag<T extends keyof TagTypes>({
-  type,
-  value,
-  ...props
-}: TagProps<T>) {
+export default function Tag<T extends keyof TagTypes>({ type, value, ...props }: TagProps<T>) {
   switch (type) {
     case "status": {
       const status = statuses[value as TagTypes["status"]] ?? statuses.LIVE;
@@ -64,8 +51,7 @@ export default function Tag<T extends keyof TagTypes>({
                 </Button>
               </Group>
             </Group>
-          }
-        >
+          }>
           <PrimitiveTag look="soft" key={value} {...props}>
             <Icon size={props?.size} {...status.icon} />
             {status?.label}
@@ -98,8 +84,7 @@ export default function Tag<T extends keyof TagTypes>({
                 </Button>
               </Group>
             </Group>
-          }
-        >
+          }>
           <PrimitiveTag look="base" key={value} {...props}>
             <Icon size={props?.size} src={chain?.icon} />
             {chain?.name}
@@ -131,8 +116,7 @@ export default function Tag<T extends keyof TagTypes>({
                 Open
               </Button>
             </Group>
-          }
-        >
+          }>
           <PrimitiveTag look="bold" key={value} {...props}>
             <Icon size={props?.size} {...action.icon} />
             {action?.label}
@@ -175,8 +159,7 @@ export default function Tag<T extends keyof TagTypes>({
                 </Button>
               </Group>
             </Group>
-          }
-        >
+          }>
           <PrimitiveTag look="base" key={value} {...props}>
             <Icon size={props?.size} src={token.icon} />
             {token?.symbol}
@@ -210,11 +193,7 @@ export default function Tag<T extends keyof TagTypes>({
               <Divider look="soft" horizontal />
               <Group className="flex-col" size="md">
                 {/* <Text size="xs">{token?.description}</Text> */}
-                <Button
-                  to={`/chains/${token.chain?.name}`}
-                  size="sm"
-                  look="bold"
-                >
+                <Button to={`/chains/${token.chain?.name}`} size="sm" look="bold">
                   <Icon size="sm" src={token.chain?.icon} />
                   {token.chain?.name}
                 </Button>
@@ -228,8 +207,7 @@ export default function Tag<T extends keyof TagTypes>({
                 </Button>
               </Group>
             </Group>
-          }
-        >
+          }>
           <PrimitiveTag look="base" key={value} {...props}>
             <Icon size={props?.size} src={token.chain.icon} />
             {token.chain.name}
@@ -255,11 +233,7 @@ export default function Tag<T extends keyof TagTypes>({
               <Divider className="border-main-6" horizontal />
               {/* <Text size="xs">{token?.description}</Text> */}
               <Group className="flex-col" size="md">
-                <Button
-                  to={`/protocols/${protocol?.name}`}
-                  size="xs"
-                  look="soft"
-                >
+                <Button to={`/protocols/${protocol?.name}`} size="xs" look="soft">
                   <Icon remix="RiArrowRightLine" />
                   {protocol?.name} on Merkl
                 </Button>
@@ -269,8 +243,7 @@ export default function Tag<T extends keyof TagTypes>({
                 </Button>
               </Group>
             </Group>
-          }
-        >
+          }>
           <PrimitiveTag look="tint" key={value} {...props}>
             <Icon src={protocol?.icon} />
             {value?.name}
diff --git a/src/components/element/functions/SearchBar.tsx b/src/components/element/functions/SearchBar.tsx
index e1cef143..ba46f7e2 100644
--- a/src/components/element/functions/SearchBar.tsx
+++ b/src/components/element/functions/SearchBar.tsx
@@ -1,24 +1,11 @@
 import type { Opportunity } from "@merkl/api";
 import { Form, useLocation } from "@remix-run/react";
-import {
-  Divider,
-  Group,
-  Icon,
-  Icons,
-  Input,
-  Modal,
-  Title,
-  useShortcut,
-} from "dappkit";
+import { Divider, Group, Icon, Icons, Input, Modal, Title, useShortcut } from "dappkit";
 import { Button } from "dappkit";
 import Scroll from "packages/dappkit/src/components/primitives/Scroll";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import useOpportunity from "src/hooks/resources/useOpportunity";
-import {
-  type Results,
-  type Searchable,
-  useMerklSearch,
-} from "src/hooks/useMerklSearch";
+import { type Results, type Searchable, useMerklSearch } from "src/hooks/useMerklSearch";
 
 const titles: { [S in Searchable]: ReactNode } = {
   chain: "Chains",
@@ -33,8 +20,7 @@ function OpportunityResult({ opportunity }: { opportunity: Opportunity }) {
   return (
     <>
       <Button to={link} look="soft">
-        <Icons>{icons}</Icons> {opportunity.name}{" "}
-        <Icon remix="RiArrowRightLine" />
+        <Icons>{icons}</Icons> {opportunity.name} <Icon remix="RiArrowRightLine" />
       </Button>
       <Divider look="bold" />
     </>
@@ -67,10 +53,7 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
 
     return (
       <Group className="flex-col flex-nowrap overflow-hidden">
-        <Scroll
-          className="min-h-[70vh] w-full [&>*]:flex [&>*]:flex-col [&>*]:gap-xl*2 z-10"
-          vertical
-        >
+        <Scroll className="min-h-[70vh] w-full [&>*]:flex [&>*]:flex-col [&>*]:gap-xl*2 z-10" vertical>
           {entries
             .filter(([_, res]) => res?.length)
             .map(([category, results]) => (
@@ -82,11 +65,7 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
                       case "chain":
                         return (
                           <>
-                            <Button
-                              to={`/chain/${results[i].name}`}
-                              look="soft"
-                              className="gap-lg"
-                            >
+                            <Button to={`/chain/${results[i].name}`} look="soft" className="gap-lg">
                               <Icon src={results[i].icon} /> {results[i].name}
                               <Icon remix="RiArrowRightLine" />
                             </Button>
@@ -98,12 +77,8 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
                       case "token":
                         return (
                           <>
-                            <Button
-                              to={`/token/${results[i].symbol}`}
-                              look="soft"
-                            >
-                              <Icon src={results[i].icon} /> {results[i].symbol}{" "}
-                              <Icon remix="RiArrowRightLine" />
+                            <Button to={`/token/${results[i].symbol}`} look="soft">
+                              <Icon src={results[i].icon} /> {results[i].symbol} <Icon remix="RiArrowRightLine" />
                             </Button>
                             <Divider look="bold" />
                           </>
@@ -111,10 +86,7 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
                       case "protocol":
                         return (
                           <>
-                            <Button
-                              to={`/protocol/${results[i].name}`}
-                              look="soft"
-                            >
+                            <Button to={`/protocol/${results[i].name}`} look="soft">
                               <Icon src={results[i].icon} /> {results[i].name}
                               <Icon remix="RiArrowRightLine" />
                             </Button>
@@ -148,8 +120,7 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
           />
           {Results}
         </>
-      }
-    >
+      }>
       <Form>
         {icon ? (
           <Button look="base">
diff --git a/src/components/element/opportunity/OpportunityFilters.tsx b/src/components/element/opportunity/OpportunityFilters.tsx
index 681316b3..82e38c2f 100644
--- a/src/components/element/opportunity/OpportunityFilters.tsx
+++ b/src/components/element/opportunity/OpportunityFilters.tsx
@@ -14,11 +14,7 @@ export type OpportunityFilterProps = {
   exclude?: OpportunityFilter[];
 };
 
-export default function OpportunityFilters({
-  only,
-  exclude,
-  chains,
-}: OpportunityFilterProps) {
+export default function OpportunityFilters({ only, exclude, chains }: OpportunityFilterProps) {
   //TODO: componentify theses
   const actionOptions = Object.entries(actions).reduce(
     (obj, [action, { icon, label }]) =>
@@ -30,7 +26,7 @@ export default function OpportunityFilters({
           </>
         ),
       }),
-    {}
+    {},
   );
   const statusOptions = {
     LIVE: (
@@ -60,35 +56,35 @@ export default function OpportunityFilters({
             </>
           ),
         }),
-      {}
+      {},
     ) ?? [];
 
   const [actionsFilter, setActions] = useSearchParamState<string[]>(
     "action",
-    (v) => v?.join(","),
-    (v) => v?.split(",")
+    v => v?.join(","),
+    v => v?.split(","),
   );
   const [statusFilter, setStatus] = useSearchParamState<string[]>(
     "status",
-    (v) => v?.join(","),
-    (v) => v?.split(",")
+    v => v?.join(","),
+    v => v?.split(","),
   );
   const [chainIdsFilter, setChainIds] = useSearchParamState<string[]>(
     "chain",
-    (v) => v?.join(","),
-    (v) => v?.split(",")
+    v => v?.join(","),
+    v => v?.split(","),
   );
 
   const [search, setSearch] = useSearchParamState<string>(
     "search",
-    (v) => v,
-    (v) => v
+    v => v,
+    v => v,
   );
   const [innerSearch, setInnerSearch] = useState<string>(search ?? "");
 
   const fields = useMemo(() => {
-    if (only) return filters.filter((f) => only.includes(f));
-    if (exclude) return filters.filter((f) => !exclude.includes(f));
+    if (only) return filters.filter(f => only.includes(f));
+    if (exclude) return filters.filter(f => !exclude.includes(f));
     return filters;
   }, [only, exclude]);
 
@@ -114,7 +110,7 @@ export default function OpportunityFilters({
       )}
       {fields.includes("action") && (
         <Select
-          state={[actionsFilter, (a) => setActions(a as string[])]}
+          state={[actionsFilter, a => setActions(a as string[])]}
           allOption={"All actions"}
           multiple
           options={actionOptions}
@@ -124,7 +120,7 @@ export default function OpportunityFilters({
       )}
       {fields.includes("status") && (
         <Select
-          state={[statusFilter, (s) => setStatus(s as string[])]}
+          state={[statusFilter, s => setStatus(s as string[])]}
           allOption={"All status"}
           multiple
           options={statusOptions}
@@ -134,7 +130,7 @@ export default function OpportunityFilters({
       )}
       {fields.includes("chain") && (
         <Select
-          state={[chainIdsFilter, (c) => setChainIds(c as string[])]}
+          state={[chainIdsFilter, c => setChainIds(c as string[])]}
           allOption={"All chains"}
           multiple
           search
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 152c6e76..12423c6b 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,12 +1,4 @@
-import {
-  Button,
-  Container,
-  Dropdown,
-  Group,
-  Icon,
-  WalletButton,
-  useTheme,
-} from "dappkit";
+import { Button, Container, Dropdown, Group, Icon, WalletButton, useTheme } from "dappkit";
 import { Image } from "dappkit";
 import customerDarkLogo from "src/customer/assets/images/customer-dark-logo.svg";
 import customerLogo from "src/customer/assets/images/customer-logo.svg";
@@ -15,9 +7,9 @@ import { motion } from "framer-motion";
 import config from "merkl.config";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo, useState } from "react";
-import { LayerMenu } from "./LayerMenu";
 import SwitchMode from "../element/SwitchMode";
 import SearchBar from "../element/functions/SearchBar";
+import { LayerMenu } from "./LayerMenu";
 
 const container = {
   hidden: { opacity: 0, y: 0 },
@@ -54,7 +46,7 @@ export default function Header() {
           key: crypto.randomUUID(),
         },
       },
-      rest
+      rest,
     );
   }, [user]);
 
@@ -63,8 +55,7 @@ export default function Header() {
       variants={container}
       initial="hidden"
       whileInView="visible"
-      className="w-full sticky left-0 top-0 z-10 backdrop-blur"
-    >
+      className="w-full sticky left-0 top-0 z-10 backdrop-blur">
       <Container className="py-xl">
         <Group className="justify-between items-center">
           <motion.div variants={item}>
@@ -73,8 +64,7 @@ export default function Header() {
               padding="xs"
               open={open}
               content={<LayerMenu nav={routes} setOpen={setOpen} />}
-              className="lg:hidden flex gap-sm md:gap-lg items-center"
-            >
+              className="lg:hidden flex gap-sm md:gap-lg items-center">
               <Image
                 className="w-[140px] md:w-[200px]"
                 alt={`${config.appName} logo`}
@@ -83,12 +73,7 @@ export default function Header() {
               <Icon className="text-main-12" remix="RiArrowDownSLine" />
             </Dropdown>
 
-            <Button
-              className="hidden lg:flex"
-              size="lg"
-              to={routes.homepage.route}
-              look="soft"
-            >
+            <Button className="hidden lg:flex" size="lg" to={routes.homepage.route} look="soft">
               <Image
                 className="w-[200px]"
                 alt={`${config.appName} logo`}
@@ -101,17 +86,10 @@ export default function Header() {
             <Group className="items-center" size="xl">
               <Group className="hidden lg:flex items-center" size="xl">
                 {Object.entries(config.routes)
-                  .filter(
-                    ([key]) => !["homepage", "privacy", "terms"].includes(key)
-                  )
+                  .filter(([key]) => !["homepage", "privacy", "terms"].includes(key))
                   .map(([key, { route }]) => {
                     return (
-                      <Button
-                        look="soft"
-                        size="lg"
-                        key={`${key}-link`}
-                        to={route}
-                      >
+                      <Button look="soft" size="lg" key={`${key}-link`} to={route}>
                         {key}
                       </Button>
                     );
diff --git a/src/components/layout/LayerMenu.tsx b/src/components/layout/LayerMenu.tsx
index ce04ac42..9d2581ac 100644
--- a/src/components/layout/LayerMenu.tsx
+++ b/src/components/layout/LayerMenu.tsx
@@ -17,15 +17,11 @@ export const LayerMenu: FC<{
           {Object.entries(nav)
             .filter(([key]) => !["privacy", "terms"].includes(key))
             .map(([key, value]) => (
-              <li
-                key={value.key}
-                className="border-b-1 first:pt-0 py-lg border-main-11"
-              >
+              <li key={value.key} className="border-b-1 first:pt-0 py-lg border-main-11">
                 <NavLink
                   onClick={() => setOpen(false)}
                   to={value.route}
-                  className="flex items-center gap-md capitalize"
-                >
+                  className="flex items-center gap-md capitalize">
                   <Icon remix={value.icon} className="text-xl text-main-11" />
                   <Text size="lg" bold className="text-main-12">
                     {key}