From 9e7166c480bdc8f01765a68e32f148d3cb523088 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@gmail.com>
Date: Fri, 13 Dec 2024 16:49:32 +0100
Subject: [PATCH 1/4] fix: update fallback prop for Image component in
 WalletConnectors

---
 src/components/dapp/WalletConnectors.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dapp/WalletConnectors.tsx b/src/components/dapp/WalletConnectors.tsx
index b907431d0..634666555 100644
--- a/src/components/dapp/WalletConnectors.tsx
+++ b/src/components/dapp/WalletConnectors.tsx
@@ -23,7 +23,7 @@ export default function WalletConnectors() {
               bold
               className="gap-sm*2"
               key={connector.id}>
-              <Image className="h-lg*2 w-lg*2 rounded-md" alt={connector.name} src={connector.icon} fallback="WC" />
+              <Image className="h-lg*2 w-lg*2 rounded-md" alt={connector.name} src={connector.icon} fallback="" />
               {connector.name}
               <Icon remix="RiArrowRightUpLine" />
             </Button>

From 597f14bc254f767fcf7453c591d7c0fc7417c565 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@gmail.com>
Date: Mon, 16 Dec 2024 12:04:48 +0100
Subject: [PATCH 2/4] fix: update Tooltip component styles for improved layout
 and responsiveness

---
 src/components/primitives/Tooltip.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/primitives/Tooltip.tsx b/src/components/primitives/Tooltip.tsx
index 5e3995f1a..2f4a1ada0 100644
--- a/src/components/primitives/Tooltip.tsx
+++ b/src/components/primitives/Tooltip.tsx
@@ -16,7 +16,7 @@ export default function Tooltip({ helper, children, icon = true }: TooltipProps)
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root>
         <RadixTooltip.Trigger asChild>
-          <span className="inline-flex items-center">
+          <span className="flex items-center gap-sm">
             <div>{children}</div>
             {!!icon && <Icon remix="RiQuestionLine" alt="Tooltip" />}
           </span>
@@ -24,9 +24,9 @@ export default function Tooltip({ helper, children, icon = true }: TooltipProps)
         <RadixTooltip.Portal>
           <RadixTooltip.Content
             style={vars}
-            className="select-none rounded bg-main-1 rounded-full px-lg py-md z-30 leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+            className="select-none rounded-md bg-main-1 rounded-full px-lg py-md z-30 leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade max-w-[90vw] md:max-w-[70vw] lg:max-w-[40vw] xl:max-w-[30vw]"
             sideOffset={5}>
-            <Text size="sm" className="text-main-12">
+            <Text size="sm" className="text-main-12 ">
               {helper}
             </Text>
             <RadixTooltip.Arrow />

From f3d8de72144a7fe3b5eb4885bc64336e418c8aa2 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@gmail.com>
Date: Mon, 16 Dec 2024 12:54:46 +0100
Subject: [PATCH 3/4] Sort wallets and add icons for walletconnect and coinbase

---
 src/assets/walletCoinbase.svg            |  4 +++
 src/assets/walletConnect.svg             | 20 +++++++++++
 src/components/dapp/WalletConnectors.tsx | 45 ++++++++++++++++++++++--
 3 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/walletCoinbase.svg
 create mode 100644 src/assets/walletConnect.svg

diff --git a/src/assets/walletCoinbase.svg b/src/assets/walletCoinbase.svg
new file mode 100644
index 000000000..c47fdf94b
--- /dev/null
+++ b/src/assets/walletCoinbase.svg
@@ -0,0 +1,4 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1024" height="1024" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z" fill="white"/>
+</svg>
diff --git a/src/assets/walletConnect.svg b/src/assets/walletConnect.svg
new file mode 100644
index 000000000..64b078c4f
--- /dev/null
+++ b/src/assets/walletConnect.svg
@@ -0,0 +1,20 @@
+<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="156 53 512 512" xml:space="preserve">
+<style type="text/css">
+    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
+    .st1{fill:#FFFFFF;}
+</style>
+<g>
+    <radialGradient id="SVGID_1_" cx="13.2793" cy="609.416" r="1" gradientTransform="matrix(512 0 0 -512 -6643 312330)" gradientUnits="userSpaceOnUse">
+        <stop offset="0" style="stop-color:#5D9DF6"/>
+        <stop offset="1" style="stop-color:#006FFF"/>
+    </radialGradient>
+    <path class="st0" d="M412,53c141.4,0,256,114.6,256,256S553.4,565,412,565S156,450.4,156,309S270.6,53,412,53z"/>
+    <path class="st1" d="M318.7,250.7c51.5-50.3,135.1-50.3,186.6,0l6.2,6.1c2.6,2.5,2.6,6.6,0,9.1l-21.2,20.7c-1.3,1.3-3.4,1.3-4.7,0
+        l-8.5-8.3c-36-35.1-94.2-35.1-130.2,0l-9.1,8.9c-1.3,1.3-3.4,1.3-4.7,0l-21.2-20.7c-2.6-2.5-2.6-6.6,0-9.1L318.7,250.7z
+         M549.2,293.5l18.9,18.4c2.6,2.5,2.6,6.6,0,9.1l-85.1,83.1c-2.6,2.5-6.8,2.5-9.3,0c0,0,0,0,0,0l-60.4-59c-0.6-0.6-1.7-0.6-2.3,0
+        c0,0,0,0,0,0l-60.4,59c-2.6,2.5-6.8,2.5-9.3,0c0,0,0,0,0,0L255.9,321c-2.6-2.5-2.6-6.6,0-9.1l18.9-18.4c2.6-2.5,6.8-2.5,9.3,0
+        l60.4,59c0.6,0.6,1.7,0.6,2.3,0c0,0,0,0,0,0l60.4-59c2.6-2.5,6.8-2.5,9.3,0c0,0,0,0,0,0l60.4,59c0.6,0.6,1.7,0.6,2.3,0l60.4-59
+        C542.4,291,546.6,291,549.2,293.5L549.2,293.5z"/>
+</g>
+</svg>
diff --git a/src/components/dapp/WalletConnectors.tsx b/src/components/dapp/WalletConnectors.tsx
index 634666555..8f0625e67 100644
--- a/src/components/dapp/WalletConnectors.tsx
+++ b/src/components/dapp/WalletConnectors.tsx
@@ -6,24 +6,52 @@ import Icon from "../primitives/Icon";
 import Image from "../primitives/Image";
 import Input from "../primitives/Input";
 import Text from "../primitives/Text";
+import type { Connector } from "wagmi";
+import walletConnectIcon from "../../assets/walletConnect.svg";
+import walletCoinbaseIcon from "../../assets/walletCoinbase.svg";
+import { useMemo } from "react";
 
 export default function WalletConnectors() {
   const { config, connect, connector: _connected } = useWalletContext();
 
+  const sortedConnectors = useMemo(
+    () =>
+      [...config.connectors].sort((a, b) => {
+        const priority = (connector: Connector) => {
+          switch (connector.name.toLowerCase()) {
+            case "metamask":
+              return 0;
+            case "rabby wallet":
+              return 1;
+            case "walletconnect":
+              return 2;
+            default:
+              return 3;
+          }
+        };
+        return priority(a) - priority(b);
+      }),
+    [config.connectors],
+  );
+
   return (
     <Group className="flex-col w-full">
       <div className="grid grid-flow-row gap-lg">
-        {config.connectors.map(connector => {
+        {sortedConnectors.map(connector => {
           return (
             <Button
               look="base"
-              // look={connected?.id === connector.id ? "hype" : "bold"}
               onClick={() => connect(connector.id)}
               size="xl"
               bold
               className="gap-sm*2"
               key={connector.id}>
-              <Image className="h-lg*2 w-lg*2 rounded-md" alt={connector.name} src={connector.icon} fallback="" />
+              <Image
+                className="h-lg*2 w-lg*2 rounded-full overflow-hidden"
+                alt={connector.name}
+                src={overrideIcons(connector)}
+                fallback=""
+              />
               {connector.name}
               <Icon remix="RiArrowRightUpLine" />
             </Button>
@@ -38,3 +66,14 @@ export default function WalletConnectors() {
     </Group>
   );
 }
+
+const overrideIcons = (connector: Connector) => {
+  switch (connector.name.toLowerCase()) {
+    case "coinbase wallet":
+      return walletCoinbaseIcon;
+    case "walletconnect":
+      return walletConnectIcon;
+    default:
+      return connector.icon;
+  }
+};

From abd702875d06097e19e30ce92c77db395b897559 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@gmail.com>
Date: Mon, 16 Dec 2024 12:58:08 +0100
Subject: [PATCH 4/4] lint

---
 src/components/dapp/WalletConnectors.tsx | 8 ++++----
 src/components/extenders/Select.tsx      | 3 ++-
 src/utils/types.ts                       | 1 -
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/dapp/WalletConnectors.tsx b/src/components/dapp/WalletConnectors.tsx
index 8f0625e67..05d009926 100644
--- a/src/components/dapp/WalletConnectors.tsx
+++ b/src/components/dapp/WalletConnectors.tsx
@@ -1,3 +1,7 @@
+import { useMemo } from "react";
+import type { Connector } from "wagmi";
+import walletCoinbaseIcon from "../../assets/walletCoinbase.svg";
+import walletConnectIcon from "../../assets/walletConnect.svg";
 import { useWalletContext } from "../../context/Wallet.context";
 import Group from "../extenders/Group";
 import Button from "../primitives/Button";
@@ -6,10 +10,6 @@ import Icon from "../primitives/Icon";
 import Image from "../primitives/Image";
 import Input from "../primitives/Input";
 import Text from "../primitives/Text";
-import type { Connector } from "wagmi";
-import walletConnectIcon from "../../assets/walletConnect.svg";
-import walletCoinbaseIcon from "../../assets/walletCoinbase.svg";
-import { useMemo } from "react";
 
 export default function WalletConnectors() {
   const { config, connect, connector: _connected } = useWalletContext();
diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx
index e32560b7b..2c896899b 100644
--- a/src/components/extenders/Select.tsx
+++ b/src/components/extenders/Select.tsx
@@ -236,7 +236,8 @@ export default function Select<
       // resetValueOnHide
       setValue={value => {
         setSearch(value);
-      }}>
+      }}
+    >
       <Ariakit.SelectProvider
         setValue={v => setValue(v as Value)}
         value={value as string}
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 67b117fb9..16104e3e8 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,4 +1,3 @@
-import type { Dispatch, SetStateAction } from "react";
 import type { Coloring, Mode, State } from "../theming/variables";
 
 /**