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 <[email protected]>
AngleProtocol · Dec 16, 2024 · 821ccfe · 821ccfe
1 parent cfe2001
commit 821ccfe
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 6 deletions.
diff --git a/src/assets/walletCoinbase.svg b/src/assets/walletCoinbase.svg
diff --git a/src/assets/walletConnect.svg b/src/assets/walletConnect.svg
diff --git 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
@@ -16,17 +16,17 @@ 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>
         </RadixTooltip.Trigger>
         <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 />