From d7fa8fe484b1bd61f74b175961ba8aa71b66d8a1 Mon Sep 17 00:00:00 2001
From: martinshub-tech <jambemail2003@gmail.com>
Date: Wed, 26 Aug 2026 13:47:36 +0100
Subject: [PATCH] feat: redesign WalletConnect visual states as HUD controls

---
 src/components/WalletConnect.test.tsx |  4 +-
 src/components/WalletConnect.tsx      | 99 +++++++++++++--------------
 2 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/src/components/WalletConnect.test.tsx b/src/components/WalletConnect.test.tsx
index d99fb97..1ca02be 100644
--- a/src/components/WalletConnect.test.tsx
+++ b/src/components/WalletConnect.test.tsx
@@ -125,7 +125,7 @@ describe('WalletConnect', () => {
       render(<WalletConnect />);
 
       const connectButton = screen.getByRole('button', { name: /connect wallet/i });
-      expect(connectButton).toHaveClass('bg-[#2C4BFD]', 'hover:bg-[#1a3bf0]', 'text-white');
+      expect(connectButton).toHaveClass('bg-white', 'hover:bg-gray-50', 'text-gray-700');
     });
   });
 
@@ -338,7 +338,7 @@ describe('WalletConnect', () => {
       render(<WalletConnect />);
 
       const container = screen.getByText('GTES...WXYZ').closest('.flex');
-      expect(container).toHaveClass('gap-1', 'sm:gap-2');
+      expect(container).toHaveClass('gap-2');
     });
   });
 
diff --git a/src/components/WalletConnect.tsx b/src/components/WalletConnect.tsx
index 166d91d..cac244c 100644
--- a/src/components/WalletConnect.tsx
+++ b/src/components/WalletConnect.tsx
@@ -68,19 +68,8 @@ const WalletConnect = () => {
           </div>
         )}
 
-        <div className="flex flex-col sm:flex-row items-stretch gap-3">
-          <div className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-gray-800 border border-[#BEC7FE] dark:border-gray-700 rounded-lg shadow-sm">
-            <span className="text-sm font-semibold text-gray-800 dark:text-gray-200">
-              {balance ? <span className="sr-only">Balance:</span> : <span className="sr-only">Balance unavailable</span>}
-              <MaskedBalance
-                value={balance || '—'}
-                className=""
-                maskedText="••••"
-              />
-            </span>
-          </div>
-
-          <div className="flex items-center gap-1 sm:gap-2 p-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg pr-2 sm:pr-3">
+        <div className="flex flex-col sm:flex-row items-start gap-3">
+          <div className="flex items-center gap-2 p-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full pr-2 shadow-sm w-fit">
             <div
               className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center text-white text-xs shrink-0"
               aria-hidden
@@ -110,7 +99,7 @@ const WalletConnect = () => {
               type="button"
               onClick={disconnect}
               className={clsx(
-                'shrink-0 p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20',
+                'shrink-0 p-1.5 rounded-full text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 ml-1',
                 focusRing
               )}
               aria-label="Disconnect wallet"
@@ -118,6 +107,16 @@ const WalletConnect = () => {
               <LogOut className="w-4 h-4" aria-hidden />
             </button>
           </div>
+          <div className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-gray-800 border border-[#BEC7FE] dark:border-gray-700 rounded-full shadow-sm">
+            <span className="text-sm font-semibold text-gray-800 dark:text-gray-200">
+              {balance ? <span className="sr-only">Balance:</span> : <span className="sr-only">Balance unavailable</span>}
+              <MaskedBalance
+                value={balance || '—'}
+                className=""
+                maskedText="••••"
+              />
+            </span>
+          </div>
         </div>
 
         <NetworkMismatchCard />
@@ -168,29 +167,28 @@ const WalletConnect = () => {
 
   if (status === 'error' && errorMessage) {
     return (
-      <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center sm:gap-3">
-        <p
-          className="text-xs sm:text-sm text-red-700 dark:text-red-300 max-w-[220px] sm:max-w-xs text-right sm:text-left"
-          role="alert"
-        >
+      <div className="flex items-center gap-2 p-1 pr-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-full text-red-600 dark:text-red-400 w-fit">
+        <div className="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/40 flex items-center justify-center shrink-0">
+          <AlertCircle className="w-4 h-4" aria-hidden />
+        </div>
+        <p className="text-xs sm:text-sm font-medium max-w-[12rem] sm:max-w-xs truncate" role="alert" title={errorMessage}>
           {errorMessage}
         </p>
-        <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={() => {
-              clearError();
-              void connect();
-            }}
-            className={clsx(
-              'flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-semibold bg-[#2C4BFD] text-white hover:bg-[#1a3bf0]',
-              focusRing
-            )}
-          >
-            <RefreshCw className="w-4 h-4" aria-hidden />
-            Retry
-          </button>
-        </div>
+        <button
+          type="button"
+          onClick={() => {
+            clearError();
+            void connect();
+          }}
+          className={clsx(
+            'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-red-100 dark:bg-red-900/40 hover:bg-red-200 dark:hover:bg-red-900/60 transition-colors ml-1',
+            focusRing
+          )}
+          aria-label="Retry"
+        >
+          <RefreshCw className="w-3.5 h-3.5" aria-hidden />
+          Retry
+        </button>
       </div>
     );
   }
@@ -202,29 +200,28 @@ const WalletConnect = () => {
         onClick={() => setIsPickerOpen(true)}
         disabled={status === 'connecting' || status === 'checking'}
         className={clsx(
-          'flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-all duration-200',
-          'bg-[#2C4BFD] hover:bg-[#1a3bf0] text-white shadow-lg shadow-blue-500/20',
+          'flex items-center gap-2 p-1 pr-4 rounded-full font-semibold transition-all duration-200 w-fit',
+          'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm',
+          'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200',
           'disabled:opacity-70 disabled:cursor-not-allowed',
           focusRing
         )}
         aria-busy={status === 'connecting' || status === 'checking'}
       >
-        {status === 'connecting' ? (
-          <>
+        <div className="w-8 h-8 rounded-full bg-[#2C4BFD] flex items-center justify-center text-white shrink-0">
+          {status === 'connecting' || status === 'checking' ? (
             <Loader2 className="w-4 h-4 animate-spin" aria-hidden />
-            <span>Connecting…</span>
-          </>
-        ) : status === 'checking' ? (
-          <>
-            <Loader2 className="w-4 h-4 animate-spin" aria-hidden />
-            <span>Checking wallet…</span>
-          </>
-        ) : (
-          <>
+          ) : (
             <Wallet className="w-4 h-4" aria-hidden />
-            <span>Connect Wallet</span>
-          </>
-        )}
+          )}
+        </div>
+        <span className="text-sm">
+          {status === 'connecting'
+            ? 'Connecting…'
+            : status === 'checking'
+            ? 'Checking wallet…'
+            : 'Connect Wallet'}
+        </span>
       </button>
 
       <WalletPicker