From 821ccfe06fd67e18592b24d31c7b23a725b697fa Mon Sep 17 00:00:00 2001
From: hugolxt <87241914+hugolxt@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:03:13 +0100
Subject: [PATCH] Fix/preprod (#30)

* fix: update fallback prop for Image component in WalletConnectors

* fix: update Tooltip component styles for improved layout and responsiveness

* Sort wallets and add icons for walletconnect and coinbase

* lint

---------

Signed-off-by: hugolxt <87241914+hugolxt@users.noreply.github.com>
---
 src/assets/walletCoinbase.svg            |  4 +++
 src/assets/walletConnect.svg             | 20 +++++++++++
 src/components/dapp/WalletConnectors.tsx | 45 ++++++++++++++++++++++--
 src/components/primitives/Tooltip.tsx    |  6 ++--
 4 files changed, 69 insertions(+), 6 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..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";
@@ -10,20 +14,44 @@ import Text from "../primitives/Text";
 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;
+  }
+};
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 />