Select + Connect wallet modal

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

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}

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

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,49 +99,46 @@ 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"
           />
         </Form>
       )}
       {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"
         />