Spaces:
Running
Running
File size: 5,824 Bytes
2acde71 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Plus, Trash2, Target, Activity, DollarSign } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
interface TargetWalletManagerProps {
wallets: string[];
setWallets: (wallets: string[]) => void;
}
export const TargetWalletManager: React.FC<TargetWalletManagerProps> = ({
wallets,
setWallets
}) => {
const [newWallet, setNewWallet] = useState('');
const { toast } = useToast();
const addWallet = () => {
if (!newWallet.trim()) {
toast({
title: "Invalid Address",
description: "Please enter a valid Solana wallet address",
variant: "destructive"
});
return;
}
// Basic validation for Solana address (should be 32-44 characters)
if (newWallet.length < 32 || newWallet.length > 44) {
toast({
title: "Invalid Address Format",
description: "Solana addresses should be 32-44 characters long",
variant: "destructive"
});
return;
}
if (wallets.includes(newWallet)) {
toast({
title: "Wallet Already Added",
description: "This wallet address is already in your target list",
variant: "destructive"
});
return;
}
setWallets([...wallets, newWallet]);
setNewWallet('');
toast({
title: "Wallet Added",
description: "Target wallet successfully added to monitoring list",
});
};
const removeWallet = (wallet: string) => {
setWallets(wallets.filter(w => w !== wallet));
toast({
title: "Wallet Removed",
description: "Target wallet removed from monitoring list",
});
};
// Mock data for demonstration
const walletStats = {
[wallets[0]]: {
totalTrades: 156,
profitLoss: 2341.56,
successRate: 72.4,
lastActive: '2 minutes ago'
}
};
return (
<Card className="bg-gradient-card border-border/50">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Target className="h-5 w-5 text-primary" />
Target Wallets
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="wallet-address">Add Target Wallet</Label>
<div className="flex gap-2">
<Input
id="wallet-address"
placeholder="Enter Solana wallet address..."
value={newWallet}
onChange={(e) => setNewWallet(e.target.value)}
className="flex-1"
/>
<Button onClick={addWallet} className="gap-2">
<Plus className="h-4 w-4" />
Add
</Button>
</div>
</div>
<div className="space-y-3">
{wallets.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<Target className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p>No target wallets added yet</p>
<p className="text-sm">Add wallet addresses to start copying trades</p>
</div>
) : (
wallets.map((wallet, index) => (
<div
key={wallet}
className="p-4 rounded-lg border bg-secondary/50 animate-fade-in"
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<Badge variant="outline" className="text-xs">
#{index + 1}
</Badge>
<Badge variant="secondary" className="text-xs">
Active
</Badge>
</div>
<p className="font-mono text-sm break-all">
{wallet.slice(0, 8)}...{wallet.slice(-8)}
</p>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => removeWallet(wallet)}
className="text-destructive hover:text-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
{/* Mock stats for demonstration */}
{walletStats[wallet] && (
<div className="grid grid-cols-2 gap-4 text-xs">
<div className="flex items-center gap-1">
<Activity className="h-3 w-3 text-info" />
<span>{walletStats[wallet].totalTrades} trades</span>
</div>
<div className="flex items-center gap-1">
<DollarSign className="h-3 w-3 text-profit" />
<span className="text-profit">
${walletStats[wallet].profitLoss.toFixed(2)}
</span>
</div>
<div className="text-muted-foreground col-span-2">
Last active: {walletStats[wallet].lastActive}
</div>
</div>
)}
</div>
))
)}
</div>
</CardContent>
</Card>
);
}; |