Spaces:
Running
Running
File size: 4,601 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 | import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Badge } from '@/components/ui/badge';
import { TrendingUp, DollarSign, Shield, Zap } from 'lucide-react';
interface CopyStrategyProps {
selectedStrategy: string;
setSelectedStrategy: (strategy: string) => void;
}
const strategies = [
{
id: 'proportional',
name: 'Proportional Allocation',
description: 'Copy trades proportionally based on your wallet size vs target wallet',
icon: TrendingUp,
badge: 'Recommended',
badgeVariant: 'default' as const,
example: 'Target trades $100, you have $1000 (10x), you trade $10'
},
{
id: 'fixed',
name: 'Fixed Amount',
description: 'Trade a fixed amount for every copied trade regardless of target size',
icon: DollarSign,
badge: 'Simple',
badgeVariant: 'secondary' as const,
example: 'Every trade executes with your preset amount (e.g., $50)'
},
{
id: 'risk-adjusted',
name: 'Risk-Adjusted Copying',
description: 'Adjust trade size based on target wallet performance and risk metrics',
icon: Shield,
badge: 'Advanced',
badgeVariant: 'outline' as const,
example: 'Higher performing wallets get larger allocations'
},
{
id: 'momentum',
name: 'Momentum Based',
description: 'Increase allocation size during winning streaks, decrease during losses',
icon: Zap,
badge: 'Dynamic',
badgeVariant: 'outline' as const,
example: 'Trade size adjusts based on recent performance trends'
}
];
export const CopyStrategySelector: React.FC<CopyStrategyProps> = ({
selectedStrategy,
setSelectedStrategy
}) => {
return (
<Card className="bg-gradient-card border-border/50">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="h-5 w-5 text-primary" />
Copy Strategy
</CardTitle>
</CardHeader>
<CardContent>
<RadioGroup
value={selectedStrategy}
onValueChange={setSelectedStrategy}
className="space-y-4"
>
{strategies.map((strategy, index) => {
const IconComponent = strategy.icon;
return (
<div
key={strategy.id}
className={`p-4 rounded-lg border cursor-pointer transition-all duration-300 animate-fade-in ${
selectedStrategy === strategy.id
? 'border-primary bg-primary/5 shadow-lg'
: 'border-border bg-secondary/50 hover:border-primary/50'
}`}
style={{ animationDelay: `${index * 0.1}s` }}
onClick={() => setSelectedStrategy(strategy.id)}
>
<div className="flex items-start space-x-3">
<RadioGroupItem
value={strategy.id}
id={strategy.id}
className="mt-1"
/>
<div className="flex-1 space-y-2">
<div className="flex items-center gap-2">
<IconComponent className="h-4 w-4 text-primary" />
<Label
htmlFor={strategy.id}
className="font-medium cursor-pointer"
>
{strategy.name}
</Label>
<Badge variant={strategy.badgeVariant}>
{strategy.badge}
</Badge>
</div>
<p className="text-sm text-muted-foreground">
{strategy.description}
</p>
<div className="bg-muted/50 p-2 rounded text-xs">
<span className="font-medium">Example: </span>
{strategy.example}
</div>
</div>
</div>
</div>
);
})}
</RadioGroup>
{!selectedStrategy && (
<div className="mt-4 p-3 bg-warning/10 border border-warning/20 rounded-lg">
<p className="text-sm text-warning-foreground">
Please select a copy strategy to continue
</p>
</div>
)}
</CardContent>
</Card>
);
}; |