Skip to content

feat: redesign WalletConnect visual states as HUD controls #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
martinshub-tech wants to merge 1 commit into
base: main
Choose a base branch
from
+50 −53
Open

feat: redesign WalletConnect visual states as HUD controls #495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/WalletConnect.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});

Expand Down Expand Up @@ -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');
});
});

Expand Down
99 changes: 48 additions & 51 deletions src/components/WalletConnect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -110,14 +99,24 @@ 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"
>
<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 />
Expand Down Expand Up @@ -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>
);
}
Expand All @@ -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
Expand Down