[FEAT] Wallet connect ux improvements

CLAUDE.md

@@ -0,0 +1,82 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+ZeroXBridge is a Next.js-based blockchain bridge application that facilitates cross-chain transfers between Ethereum and Starknet networks. The application uses TypeScript and Tailwind CSS for styling.
+
+## Development Commands
+
+- **Start development server**: `npm run dev` (uses Next.js with Turbopack)
+- **Build for production**: `npm run build`
+- **Start production server**: `npm start`
+- **Lint code**: `npm run lint`
+
+The project uses pnpm as the package manager (evidenced by pnpm-lock.yaml).
+
+## Architecture Overview
+
+### Multi-Chain Wallet Integration
+The application supports dual blockchain connectivity:
+- **Ethereum**: Via Wagmi with connectors for MetaMask, WalletConnect, and Safe
+- **Starknet**: Via @starknet-react/core with Argent and Braavos wallet support
+
+Wallet state is managed through a unified hook (`useWalletState`) that handles both chains simultaneously.
+
+### Provider Hierarchy
+The app uses a nested provider structure in `app/layout.tsx`:
+```
+WagmiProvider → QueryClientProvider → StarknetProvider → ThemeProvider → LayoutContent
+```
+
+### Theme System
+- Uses a custom React Context (`ThemeContext.tsx`) for theme management
+- Supports dark/light mode with localStorage persistence
+- Tailwind configured with class-based dark mode
+- Custom color variables and extensive responsive breakpoints
+
+### Routing Structure
+- **Landing pages**: Root (`/`) and about (`/about`)
+- **Dashboard**: Main dashboard (`/dashboard`) with nested routes:
+  - Analytics (`/dashboard/analytics`)
+  - Swap (`/dashboard/swap`) 
+  - Lock Liquidity (`/dashboard/lock-liquidity`)
+  - Claim & Burn (`/dashboard/claim-burn`)
+- **Governance**: Voting proposals (`/governance/voting-proposals`)
+
+### Component Organization
+- **UI Components**: Reusable components in `app/components/ui/`
+- **Feature Components**: Domain-specific components for wallet connection, trading, analytics
+- **Layout Components**: Sidebar, Navbar, mobile navigation
+
+### Styling System
+- Tailwind CSS with extensive custom configuration
+- Custom breakpoints for various laptop sizes (MacBook, Windows laptops, 4K displays)
+- Custom animations and color schemes
+- CSS variables for theming
+
+### Database Integration
+- Uses Vercel Postgres (`@vercel/postgres`)
+- Schema defined in `app/db/schema.sql`
+- API routes in `app/api/`
+
+## Key Technical Patterns
+
+### Wallet Management
+The `useWalletState` hook provides unified access to both Ethereum and Starknet wallet states, including connection status, addresses, and disconnect functionality.
+
+### Conditional Layout Rendering
+The sidebar and navigation are conditionally rendered based on the current route - they only appear on dashboard pages.
+
+### TypeScript Configuration
+- Uses path mapping with `@/*` for root-level imports
+- Strict TypeScript configuration enabled
+- Next.js plugin integration
+
+## Development Notes
+
+- The project uses Next.js 15+ with the App Router
+- Turbopack is enabled for faster development builds
+- ESLint configured with Next.js and TypeScript rules
+- No additional testing framework is currently configured

app/components/WalletConnectionProgress.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { ConnectionStep } from '@/app/hooks/useWalletConnection';
+import { Loader2, CheckCircle, AlertCircle, Wallet } from 'lucide-react';
+
+interface WalletConnectionProgressProps {
+  step: ConnectionStep;
+  walletName?: string;
+  className?: string;
+}
+
+const WalletConnectionProgress: React.FC<WalletConnectionProgressProps> = ({
+  step,
+  walletName,
+  className = ''
+}) => {
+  const getStepIcon = () => {
+    switch (step) {
+      case 'connecting':
+        return <Loader2 className="w-5 h-5 text-[#A26DFF] animate-spin" />;
+      case 'success':
+      case 'connected':
+        return <CheckCircle className="w-5 h-5 text-green-400" />;
+      case 'failed':
+        return <AlertCircle className="w-5 h-5 text-red-400" />;
+      default:
+        return <Wallet className="w-5 h-5 text-gray-400" />;
+    }
+  };
+
+  const getStepMessage = () => {
+    switch (step) {
+      case 'connecting':
+        return `Connecting to ${walletName || 'wallet'}...`;
+      case 'success':
+        return `Successfully connected to ${walletName || 'wallet'}!`;
+      case 'connected':
+        return `Connected to ${walletName || 'wallet'}`;
+      case 'failed':
+        return `Failed to connect to ${walletName || 'wallet'}`;
+      default:
+        return 'Ready to connect';
+    }
+  };
+
+  const getStepColor = () => {
+    switch (step) {
+      case 'connecting':
+        return 'text-[#A26DFF]';
+      case 'success':
+      case 'connected':
+        return 'text-green-400';
+      case 'failed':
+        return 'text-red-400';
+      default:
+        return 'text-gray-400';
+    }
+  };
+
+  const getProgressWidth = () => {
+    switch (step) {
+      case 'idle':
+        return '0%';
+      case 'connecting':
+        return '50%';
+      case 'success':
+      case 'connected':
+        return '100%';
+      case 'failed':
+        return '30%';
+      default:
+        return '0%';
+    }
+  };
+
+  return (
+    <div className={`${className}`}>
+      {/* Progress Bar */}
+      <div className="w-full bg-gray-700 rounded-full h-1 mb-3 overflow-hidden">
+        <div 
+          className={`
+            h-full transition-all duration-500 ease-out
+            ${step === 'success' || step === 'connected' 
+              ? 'bg-green-400' 
+              : step === 'failed' 
+                ? 'bg-red-400' 
+                : 'bg-[#A26DFF]'
+            }
+          `}
+          style={{ width: getProgressWidth() }}
+        />
+      </div>
+
+      {/* Status */}
+      <div className="flex items-center gap-3">
+        <div className="flex-shrink-0">
+          {getStepIcon()}
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className={`text-sm font-medium ${getStepColor()}`}>
+            {getStepMessage()}
+          </p>
+          {step === 'connecting' && (
+            <p className="text-xs text-gray-500 mt-1">
+              Please check your wallet and approve the connection
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WalletConnectionProgress;

app/components/WalletEmptyState.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Wallet, Download, ExternalLink } from 'lucide-react';
+import { WalletInfo } from '@/app/utils/walletDetection';
+
+interface WalletEmptyStateProps {
+  category: 'ethereum' | 'starknet';
+  availableWallets: WalletInfo[];
+  onRefresh: () => void;
+  className?: string;
+}
+
+const WalletEmptyState: React.FC<WalletEmptyStateProps> = ({
+  category,
+  availableWallets,
+  onRefresh,
+  className = ''
+}) => {
+  const categoryName = category === 'ethereum' ? 'Ethereum' : 'Starknet';
+  const primaryWallet = availableWallets[0];
+
+  return (
+    <div className={`text-center py-8 px-4 ${className}`}>
+      {/* Icon */}
+      <div className="mb-4 flex justify-center">
+        <div className="w-16 h-16 rounded-full bg-[#291A43]/30 flex items-center justify-center">
+          <Wallet className="w-8 h-8 text-gray-400" />
+        </div>
+      </div>
+
+      {/* Title */}
+      <h3 className="text-white text-lg font-semibold mb-2">
+        No {categoryName} Wallets Found
+      </h3>
+
+      {/* Description */}
+      <p className="text-gray-400 text-sm mb-6 max-w-sm mx-auto">
+        To connect to {categoryName}, you'll need to install a compatible wallet extension.
+      </p>
+
+      {/* Primary Action - Install main wallet */}
+      {primaryWallet && (
+        <div className="mb-6">
+          <a
+            href={primaryWallet.downloadUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="
+              inline-flex items-center gap-3 px-6 py-3 
+              bg-[#A26DFF] hover:bg-[#A26DFF]/90 
+              text-white font-medium rounded-lg 
+              transition-colors duration-200
+            "
+          >
+            <Download size={18} />
+            Install {primaryWallet.name}
+          </a>
+          <p className="text-xs text-gray-500 mt-2">
+            {primaryWallet.description}
+          </p>
+        </div>
+      )}
+
+      {/* Alternative Wallets */}
+      {availableWallets.length > 1 && (
+        <div className="mb-6">
+          <p className="text-sm text-gray-400 mb-3">Or choose an alternative:</p>
+          <div className="space-y-2">
+            {availableWallets.slice(1).map((wallet) => (
+              <a
+                key={wallet.id}
+                href={wallet.downloadUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="
+                  inline-flex items-center gap-2 px-4 py-2 
+                  bg-[#291A43] hover:bg-[#342251] 
+                  text-white text-sm rounded-lg 
+                  transition-colors duration-200
+                  mr-2 mb-2
+                "
+              >
+                <ExternalLink size={14} />
+                {wallet.name}
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Refresh Action */}
+      <div className="border-t border-gray-700 pt-4 mt-6">
+        <p className="text-xs text-gray-500 mb-3">
+          Already installed a wallet?
+        </p>
+        <button
+          onClick={onRefresh}
+          className="
+            inline-flex items-center gap-2 px-4 py-2 
+            bg-[#291A43] hover:bg-[#342251] 
+            text-white text-sm rounded-lg 
+            transition-colors duration-200
+            border border-gray-600 hover:border-gray-500
+          "
+        >
+          <Wallet size={14} />
+          Check Again
+        </button>
+      </div>
+
+      {/* Help Text */}
+      <p className="text-xs text-gray-500 mt-4">
+        Need help? Check our{' '}
+        <a
+          href={category === 'ethereum' ? 'https://ethereum.org/wallets' : 'https://starknet.io/wallets'}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-[#A26DFF] hover:text-[#A26DFF]/80 underline"
+        >
+          wallet setup guide
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default WalletEmptyState;