From 4f447468ccad2e360ed5fb30431934659a86b26b Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@gmail.com>
Date: Wed, 19 Mar 2025 15:44:38 +0100
Subject: [PATCH 1/2] feat: enhance WalletButton with connected chain display
 and button size adjustments

---
 src/components/dapp/WalletButton.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx
index 377b1c1a4..e6e343d24 100644
--- a/src/components/dapp/WalletButton.tsx
+++ b/src/components/dapp/WalletButton.tsx
@@ -55,6 +55,11 @@ export default function WalletButton({ select, connect, status, hideSpyMode = fa
     );
   }, [chains]);
 
+  const connectedChain = useMemo(() => {
+    if (!chainId) return null;
+    return chains.find(chain => chain.id === chainId);
+  }, [chainId, chains]);
+
   if (!connected)
     return (
       <Modal
@@ -62,7 +67,7 @@ export default function WalletButton({ select, connect, status, hideSpyMode = fa
         className="mx-auto w-full max-w-[500px]"
         modal={<WalletConnectors hideSpyMode={hideSpyMode} />}>
         {connect || (
-          <Button look="hype" size="md" {...props}>
+          <Button look="hype" size="lg" {...props}>
             Connect
           </Button>
         )}
@@ -71,9 +76,6 @@ export default function WalletButton({ select, connect, status, hideSpyMode = fa
 
   return (
     <>
-      {select || (
-        <Select state={[chainId, c => switchChain(+c)]} searchOptions={chainSearchOptions} options={chainOptions} />
-      )}
       <Dropdown
         size="lg"
         padding="xs"
@@ -82,8 +84,7 @@ export default function WalletButton({ select, connect, status, hideSpyMode = fa
             <Group className="items-center justify-between" size="xl">
               <Group className="items-center">
                 {/* TODO: Show the account icon by default if there is no ENS icon */}
-                <Icon className="text-main-11 !w-xl*2 !h-xl*2" remix="RiAccountCircleFill" />
-                <Image className="h-lg*2 w-lg*2" src={connector?.icon} />
+                <Icon className="text-main-11 h-lg*2 w-lg*2 " src={connectedChain?.icon} />
                 <Hash size="lg" bold copy format="short">
                   {address}
                 </Hash>
@@ -101,7 +102,8 @@ export default function WalletButton({ select, connect, status, hideSpyMode = fa
           </>
         }>
         {status || (
-          <Button look="hype" size="md" className="w-full justify-center">
+          <Button look="hype" size="lg" className="w-full justify-center">
+            <Icon className="text-main-11 h-md*2 w-md*2" src={connectedChain?.icon} />
             {Fmt.address(address, "short")}
           </Button>
         )}

From 94a817e5b06a8a9be9b632b253abd41beffcfa1b Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@gmail.com>
Date: Wed, 19 Mar 2025 15:48:49 +0100
Subject: [PATCH 2/2] refactor: simplify WalletButton by removing unused chain
 options logic

---
 src/components/dapp/WalletButton.tsx | 35 +---------------------------
 1 file changed, 1 insertion(+), 34 deletions(-)

diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx
index e6e343d24..39e644ec4 100644
--- a/src/components/dapp/WalletButton.tsx
+++ b/src/components/dapp/WalletButton.tsx
@@ -4,7 +4,6 @@ import { Fmt } from "../../utils/formatter.service";
 import Dropdown from "../extenders/Dropdown";
 import Group from "../extenders/Group";
 import Modal from "../extenders/Modal";
-import Select from "../extenders/Select";
 import Button, { type ButtonProps } from "../primitives/Button";
 import Divider from "../primitives/Divider";
 import Hash from "../primitives/Hash";
@@ -21,39 +20,7 @@ export type WalletButtonProps = ButtonProps & {
 };
 
 export default function WalletButton({ select, connect, status, hideSpyMode = false, ...props }: WalletButtonProps) {
-  const { address, disconnect, connected, connector, chainId, switchChain, chains } = useWalletContext();
-
-  const chainOptions = useMemo(() => {
-    if (!chains) return [];
-    return chains.reduce(
-      (obj, chain) => {
-        obj[chain.id] = (
-          <Group>
-            <Icon src={chain?.icon} />
-            {chain.name}
-          </Group>
-        );
-        return obj;
-      },
-      {} as { [chainId: number]: ReactNode },
-    );
-  }, [chains]);
-
-  const chainSearchOptions = useMemo(() => {
-    if (!chains) return {};
-    return chains.reduce(
-      (obj, chain) => {
-        obj[chain.id] = (
-          <Group>
-            <Icon src={chain?.icon} />
-            {chain.name}
-          </Group>
-        );
-        return obj;
-      },
-      {} as { [chainId: number]: ReactNode },
-    );
-  }, [chains]);
+  const { address, disconnect, connected, connector, chainId, chains } = useWalletContext();
 
   const connectedChain = useMemo(() => {
     if (!chainId) return null;