refactor: account layout and fix error toasts (#60)

* change layout and fix error toasts

* auto navigate on connect

Signed-off-by: JaeBrian <[email protected]>

---------

Signed-off-by: JaeBrian <[email protected]>

Author: JaeBrian

src/components/WalletConnection.tsx

@@ -1,4 +1,5 @@
 import { useWalletStore } from '../stores/walletStore'
+import { useNavigate } from 'react-router'
 
 interface WalletConnectionProps {
   variant?: 'default' | 'white'
@@ -12,19 +13,26 @@ const WalletConnection = ({
   showDescription = false
 }: WalletConnectionProps) => {
   const { isConnected, connect, disconnect } = useWalletStore()
+  const navigate = useNavigate()
 
   const handleConnect = async () => {
     try {
       const walletNames = ['nami', 'eternl', 'flint', 'yoroi', 'gerowallet']
+      let connected = false
+      
       for (const walletName of walletNames) {
-        try {
-          await connect(walletName)
+        const success = await connect(walletName)
+        if (success) {
           console.log(`Connected to ${walletName}`)
+          connected = true
+          navigate('/account')
           break
-        } catch (error) {
-          console.log(`Failed to connect to ${walletName}:`, error)
         }
       }
+      
+      if (!connected) {
+        console.warn('No compatible wallets found. Please install a supported Cardano wallet.')
+      }
     } catch (error) {
       console.error('Failed to connect wallet:', error)
     }

src/components/WalletModal.tsx

@@ -6,44 +6,92 @@ interface WalletModalProps {
 }
 
 const WalletModal = ({ isOpen, onDisconnect }: WalletModalProps) => {
-  const { balance, enabledWallet, walletAddress } = useWalletStore()
+  const { balance, enabledWallet, walletAddress, isConnected, connect } = useWalletStore()
 
   if (!isOpen) return null
 
+  const handleConnect = async () => {
+    try {
+      const walletNames = ['nami', 'eternl', 'flint', 'yoroi', 'gerowallet']
+      let connected = false
+      
+      for (const walletName of walletNames) {
+        const success = await connect(walletName)
+        if (success) {
+          connected = true
+          break
+        }
+      }
+      
+      if (!connected) {
+        console.warn('No compatible wallets found. Please install a supported Cardano wallet.')
+      }
+    } catch (error) {
+      console.error('Failed to connect wallet:', error)
+    }
+  }
+
   return (
     <div className="w-full bg-transparent flex justify-end">
       <div className="min-w-full sm:min-w-[37.8125rem] px-4 py-8">
         <div className="border-1 border-white rounded-md bg-transparent p-6">
-          <div className="flex justify-between items-start">
-            {/* Left side */}
-            <div className="flex flex-col gap-4">
+          {!isConnected ? (
+            // Wallet not connected - show connection prompt
+            <div className="flex flex-col items-start gap-2">
               <div className="flex items-center gap-3">
                 <img
                   src="/wallet-icon-white.svg"
                   alt="Wallet"
                   className="w-8 h-8"
                 />
                 <div className="flex flex-col">
-                  <h3 className="text-white font-medium text-lg">Your Wallet</h3>
-                  <p className="text-white/70 text-sm max-w-[10rem] truncate">{enabledWallet}: {walletAddress}</p>
+                  <h3 className="text-white font-medium text-lg">Connect Wallet</h3>
+                  <p className="text-white/70 text-sm">Connect your wallet to purchase VPN access</p>
                 </div>
               </div>
+              <div className="text-center">
+                <p className="text-white text-lg font-bold">0.00 <span className="text-sm font-normal">ADA</span></p>
+              </div>
               <button
-                onClick={onDisconnect}
-                className="bg-white text-black px-6 py-2 rounded-lg font-medium w-fit self-start"
+                onClick={handleConnect}
+                className="bg-white text-black px-6 py-2 rounded-lg font-medium w-fit"
               >
-                Disconnect
+                Connect Wallet
               </button>
             </div>
+          ) : (
+            // Wallet connected - show wallet info
+            <div className="flex justify-between items-start">
+              {/* Left side */}
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-3">
+                  <img
+                    src="/wallet-icon-white.svg"
+                    alt="Wallet"
+                    className="w-8 h-8"
+                  />
+                  <div className="flex flex-col">
+                    <h3 className="text-white font-medium text-lg">Your Wallet</h3>
+                    <p className="text-white/70 text-sm max-w-[10rem] truncate">{enabledWallet}: {walletAddress}</p>
+                  </div>
+                </div>
+                <button
+                  onClick={onDisconnect}
+                  className="bg-white text-black px-6 py-2 rounded-lg font-medium w-fit self-start"
+                >
+                  Disconnect
+                </button>
+              </div>
 
-            {/* Right side */}
-            <div className="text-right">
-              <p className="text-white/70 text-sm mb-2 font-normal">Wallet Balance</p>
-              <p className="text-white text-2xl font-bold">
-                {balance || "0.00"} <span className="text-sm font-normal">ADA</span>
-              </p>
+              {/* Right side */}
+              <div className="text-right">
+                <p className="text-white/70 text-sm mb-2 font-normal">Wallet Balance</p>
+                <p className="text-white text-2xl font-bold">
+                  {balance || "0.00"} <span className="text-sm font-normal">ADA</span>
+                </p>
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     </div>