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] 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}