feat: Add wallet dashboard with balance and transfer functionality

New Components: - AccountBalance: Real-time balance display with free/reserved breakdown - TransferModal: Token transfer interface with transaction signing - WalletDashboard: Complete wallet management page Features: - Live balance fetching from blockchain - Balance subscription for real-time updates - Transfer modal with recipient and amount input - Transaction signing via Polkadot.js extension - Transaction status tracking (signing, pending, success, error) - Account switching support - Responsive dashboard layout - Quick action buttons (Send, Receive, History) Technical: - Integration with PolkadotContext - web3FromAddress for transaction signing - signAndSend for blockchain transactions - Balance conversion (plancks to tokens) - Error handling and user feedback - Toast notifications for transaction status Navigation: - Added /wallet route with ProtectedRoute - Added Wallet link to navigation menu
2026-04-22 02:07:55 +00:00 · 2025-10-28 00:28:20 +03:00
parent 8482663c1b
commit 2d1a2cf3ba
5 changed files with 526 additions and 1 deletions
@@ -7,7 +7,7 @@ import EmailVerification from '@/pages/EmailVerification';
 import PasswordReset from '@/pages/PasswordReset';
 import ProfileSettings from '@/pages/ProfileSettings';
 import AdminPanel from '@/pages/AdminPanel';
-
+import WalletDashboard from './pages/WalletDashboard';
 import { AppProvider } from '@/contexts/AppContext';
 import { WalletProvider } from '@/contexts/WalletContext';
 import { WebSocketProvider } from '@/contexts/WebSocketContext';
@@ -49,6 +49,11 @@ function App() {
                        <AdminPanel />
                      </ProtectedRoute>
                    } />
+                    <Route path="/wallet" element={
+                      <ProtectedRoute>
+                        <WalletDashboard />
+                      </ProtectedRoute>
+                    } />
                    <Route path="*" element={<NotFound />} />
                  </Routes>
                </Router>
@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from 'react';
+import { usePolkadot } from '@/contexts/PolkadotContext';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Wallet, TrendingUp, ArrowUpRight, ArrowDownRight, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export const AccountBalance: React.FC = () => {
+  const { api, isApiReady, selectedAccount } = usePolkadot();
+  const [balance, setBalance] = useState<{
+    free: string;
+    reserved: string;
+    total: string;
+  }>({
+    free: '0',
+    reserved: '0',
+    total: '0',
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchBalance = async () => {
+    if (!api || !isApiReady || !selectedAccount) return;
+
+    setIsLoading(true);
+    try {
+      const { data: balanceData } = await api.query.system.account(selectedAccount.address);
+      
+      const free = balanceData.free.toString();
+      const reserved = balanceData.reserved.toString();
+      
+      // Convert from plancks to tokens (assuming 12 decimals like DOT)
+      const decimals = 12;
+      const divisor = Math.pow(10, decimals);
+      
+      const freeTokens = (parseInt(free) / divisor).toFixed(4);
+      const reservedTokens = (parseInt(reserved) / divisor).toFixed(4);
+      const totalTokens = ((parseInt(free) + parseInt(reserved)) / divisor).toFixed(4);
+
+      setBalance({
+        free: freeTokens,
+        reserved: reservedTokens,
+        total: totalTokens,
+      });
+    } catch (error) {
+      console.error('Failed to fetch balance:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchBalance();
+
+    // Subscribe to balance updates
+    let unsubscribe: () => void;
+
+    const subscribeBalance = async () => {
+      if (!api || !isApiReady || !selectedAccount) return;
+
+      unsubscribe = await api.query.system.account(
+        selectedAccount.address,
+        ({ data: balanceData }) => {
+          const free = balanceData.free.toString();
+          const reserved = balanceData.reserved.toString();
+          
+          const decimals = 12;
+          const divisor = Math.pow(10, decimals);
+          
+          const freeTokens = (parseInt(free) / divisor).toFixed(4);
+          const reservedTokens = (parseInt(reserved) / divisor).toFixed(4);
+          const totalTokens = ((parseInt(free) + parseInt(reserved)) / divisor).toFixed(4);
+
+          setBalance({
+            free: freeTokens,
+            reserved: reservedTokens,
+            total: totalTokens,
+          });
+        }
+      );
+    };
+
+    subscribeBalance();
+
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [api, isApiReady, selectedAccount]);
+
+  if (!selectedAccount) {
+    return (
+      <Card className="bg-gray-900 border-gray-800">
+        <CardContent className="pt-6">
+          <div className="text-center text-gray-400">
+            <Wallet className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p>Connect your wallet to view balance</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Total Balance Card */}
+      <Card className="bg-gradient-to-br from-green-900/30 to-yellow-900/30 border-green-500/30">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg font-medium text-gray-300">
+              Total Balance
+            </CardTitle>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={fetchBalance}
+              disabled={isLoading}
+              className="text-gray-400 hover:text-white"
+            >
+              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div>
+              <div className="text-4xl font-bold text-white mb-1">
+                {isLoading ? '...' : balance.total}
+                <span className="text-2xl text-gray-400 ml-2">HEZ</span>
+              </div>
+              <div className="text-sm text-gray-400">
+                ≈ ${(parseFloat(balance.total) * 0.5).toFixed(2)} USD
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="bg-gray-800/50 rounded-lg p-3">
+                <div className="flex items-center gap-2 mb-1">
+                  <TrendingUp className="w-4 h-4 text-green-400" />
+                  <span className="text-xs text-gray-400">Transferable</span>
+                </div>
+                <div className="text-lg font-semibold text-white">
+                  {balance.free} HEZ
+                </div>
+              </div>
+
+              <div className="bg-gray-800/50 rounded-lg p-3">
+                <div className="flex items-center gap-2 mb-1">
+                  <ArrowDownRight className="w-4 h-4 text-yellow-400" />
+                  <span className="text-xs text-gray-400">Reserved</span>
+                </div>
+                <div className="text-lg font-semibold text-white">
+                  {balance.reserved} HEZ
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Account Info */}
+      <Card className="bg-gray-900 border-gray-800">
+        <CardContent className="pt-6">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-gray-400">Account</span>
+              <span className="text-white font-mono">
+                {selectedAccount.meta.name || 'Unnamed'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-gray-400">Address</span>
+              <span className="text-white font-mono text-xs">
+                {selectedAccount.address.slice(0, 8)}...{selectedAccount.address.slice(-8)}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
@@ -90,6 +90,13 @@ const AppLayout: React.FC = () => {

                    {t('nav.dashboard', 'Dashboard')}
                  </button>
+                  <button
+                    onClick={() => navigate('/wallet')}
+                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
+                  >
+                    <Wallet className="w-4 h-4" />
+                    {t('nav.wallet', 'Wallet')}
+                  </button>
                  <button 
                    onClick={() => navigate('/profile-settings')}
                    className="text-gray-300 hover:text-white transition-colors flex items-center gap-1"
@@ -0,0 +1,243 @@
+import React, { useState } from 'react';
+import { usePolkadot } from '@/contexts/PolkadotContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ArrowRight, Loader2, CheckCircle, XCircle } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+interface TransferModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const TransferModal: React.FC<TransferModalProps> = ({ isOpen, onClose }) => {
+  const { api, isApiReady, selectedAccount } = usePolkadot();
+  const { toast } = useToast();
+  
+  const [recipient, setRecipient] = useState('');
+  const [amount, setAmount] = useState('');
+  const [isTransferring, setIsTransferring] = useState(false);
+  const [txStatus, setTxStatus] = useState<'idle' | 'signing' | 'pending' | 'success' | 'error'>('idle');
+  const [txHash, setTxHash] = useState('');
+
+  const handleTransfer = async () => {
+    if (!api || !isApiReady || !selectedAccount) {
+      toast({
+        title: "Error",
+        description: "Wallet not connected",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!recipient || !amount) {
+      toast({
+        title: "Error",
+        description: "Please fill in all fields",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsTransferring(true);
+    setTxStatus('signing');
+
+    try {
+      // Import web3FromAddress to get the injector
+      const { web3FromAddress } = await import('@polkadot/extension-dapp');
+      const injector = await web3FromAddress(selectedAccount.address);
+
+      // Convert amount to plancks (12 decimals)
+      const decimals = 12;
+      const amountInPlancks = BigInt(parseFloat(amount) * Math.pow(10, decimals));
+
+      // Create transfer transaction
+      const transfer = api.tx.balances.transferKeepAlive(recipient, amountInPlancks.toString());
+
+      setTxStatus('pending');
+
+      // Sign and send transaction
+      const unsub = await transfer.signAndSend(
+        selectedAccount.address,
+        { signer: injector.signer },
+        ({ status, events, dispatchError }) => {
+          if (status.isInBlock) {
+            console.log(`Transaction included in block: ${status.asInBlock}`);
+            setTxHash(status.asInBlock.toHex());
+          }
+
+          if (status.isFinalized) {
+            console.log(`Transaction finalized: ${status.asFinalized}`);
+            
+            // Check for errors
+            if (dispatchError) {
+              let errorMessage = 'Transaction failed';
+              
+              if (dispatchError.isModule) {
+                const decoded = api.registry.findMetaError(dispatchError.asModule);
+                errorMessage = `${decoded.section}.${decoded.name}: ${decoded.docs}`;
+              }
+
+              setTxStatus('error');
+              toast({
+                title: "Transfer Failed",
+                description: errorMessage,
+                variant: "destructive",
+              });
+            } else {
+              setTxStatus('success');
+              toast({
+                title: "Transfer Successful!",
+                description: `Sent ${amount} HEZ to ${recipient.slice(0, 8)}...${recipient.slice(-6)}`,
+              });
+
+              // Reset form after 2 seconds
+              setTimeout(() => {
+                setRecipient('');
+                setAmount('');
+                setTxStatus('idle');
+                setTxHash('');
+                onClose();
+              }, 2000);
+            }
+
+            setIsTransferring(false);
+            unsub();
+          }
+        }
+      );
+    } catch (error: any) {
+      console.error('Transfer error:', error);
+      setTxStatus('error');
+      setIsTransferring(false);
+      
+      toast({
+        title: "Transfer Failed",
+        description: error.message || "An error occurred during transfer",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleClose = () => {
+    if (!isTransferring) {
+      setRecipient('');
+      setAmount('');
+      setTxStatus('idle');
+      setTxHash('');
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="bg-gray-900 border-gray-800">
+        <DialogHeader>
+          <DialogTitle className="text-white">Send HEZ</DialogTitle>
+          <DialogDescription className="text-gray-400">
+            Transfer HEZ tokens to another account
+          </DialogDescription>
+        </DialogHeader>
+
+        {txStatus === 'success' ? (
+          <div className="py-8 text-center">
+            <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-white mb-2">Transfer Successful!</h3>
+            <p className="text-gray-400 mb-4">Your transaction has been finalized</p>
+            {txHash && (
+              <div className="bg-gray-800/50 rounded-lg p-3">
+                <div className="text-xs text-gray-400 mb-1">Transaction Hash</div>
+                <div className="text-white font-mono text-xs break-all">
+                  {txHash}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : txStatus === 'error' ? (
+          <div className="py-8 text-center">
+            <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-white mb-2">Transfer Failed</h3>
+            <p className="text-gray-400">Please try again</p>
+            <Button
+              onClick={() => setTxStatus('idle')}
+              className="mt-4 bg-gray-800 hover:bg-gray-700"
+            >
+              Try Again
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="recipient" className="text-white">Recipient Address</Label>
+              <Input
+                id="recipient"
+                value={recipient}
+                onChange={(e) => setRecipient(e.target.value)}
+                placeholder="5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY"
+                className="bg-gray-800 border-gray-700 text-white mt-2"
+                disabled={isTransferring}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="amount" className="text-white">Amount (HEZ)</Label>
+              <Input
+                id="amount"
+                type="number"
+                step="0.0001"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                placeholder="0.0000"
+                className="bg-gray-800 border-gray-700 text-white mt-2"
+                disabled={isTransferring}
+              />
+            </div>
+
+            {txStatus === 'signing' && (
+              <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-3">
+                <p className="text-yellow-400 text-sm">
+                  Please sign the transaction in your Polkadot.js extension
+                </p>
+              </div>
+            )}
+
+            {txStatus === 'pending' && (
+              <div className="bg-blue-500/10 border border-blue-500/30 rounded-lg p-3">
+                <p className="text-blue-400 text-sm flex items-center gap-2">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Transaction pending... Waiting for finalization
+                </p>
+              </div>
+            )}
+
+            <Button
+              onClick={handleTransfer}
+              disabled={isTransferring || !recipient || !amount}
+              className="w-full bg-gradient-to-r from-green-600 to-yellow-400 hover:from-green-700 hover:to-yellow-500"
+            >
+              {isTransferring ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  {txStatus === 'signing' ? 'Waiting for signature...' : 'Processing...'}
+                </>
+              ) : (
+                <>
+                  Send
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { usePolkadot } from '@/contexts/PolkadotContext';
+import { AccountBalance } from '@/components/AccountBalance';
+import { TransferModal } from '@/components/TransferModal';
+import { Button } from '@/components/ui/button';
+import { ArrowUpRight, ArrowDownRight, History } from 'lucide-react';
+
+const WalletDashboard: React.FC = () => {
+  const { selectedAccount } = usePolkadot();
+  const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
+
+  if (!selectedAccount) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-white mb-4">Wallet Not Connected</h2>
+          <p className="text-gray-400 mb-6">Please connect your wallet to view your dashboard</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 pt-24 pb-12">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-white mb-2">Wallet Dashboard</h1>
+          <p className="text-gray-400">Manage your HEZ and PEZ tokens</p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column - Balance */}
+          <div className="lg:col-span-1">
+            <AccountBalance />
+          </div>
+
+          {/* Right Column - Actions */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Quick Actions */}
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <Button
+                onClick={() => setIsTransferModalOpen(true)}
+                className="bg-gradient-to-r from-green-600 to-yellow-400 hover:from-green-700 hover:to-yellow-500 h-24 flex flex-col items-center justify-center"
+              >
+                <ArrowUpRight className="w-6 h-6 mb-2" />
+                <span>Send</span>
+              </Button>
+
+              <Button
+                variant="outline"
+                className="border-gray-700 hover:bg-gray-800 h-24 flex flex-col items-center justify-center"
+                disabled
+              >
+                <ArrowDownRight className="w-6 h-6 mb-2" />
+                <span>Receive</span>
+              </Button>
+
+              <Button
+                variant="outline"
+                className="border-gray-700 hover:bg-gray-800 h-24 flex flex-col items-center justify-center"
+                disabled
+              >
+                <History className="w-6 h-6 mb-2" />
+                <span>History</span>
+              </Button>
+            </div>
+
+            {/* Recent Activity Placeholder */}
+            <div className="bg-gray-900 border border-gray-800 rounded-lg p-6">
+              <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
+              <div className="text-center py-12">
+                <History className="w-12 h-12 text-gray-600 mx-auto mb-3" />
+                <p className="text-gray-500">No recent transactions</p>
+                <p className="text-gray-600 text-sm mt-1">
+                  Your transaction history will appear here
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <TransferModal
+        isOpen={isTransferModalOpen}
+        onClose={() => setIsTransferModalOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default WalletDashboard;