initial checkin

2025-10-12 19:17:51 -04:00
commit bb2f7c9ce8
44 changed files with 10741 additions and 0 deletions
--- a/src/components/swap-form.tsx
+++ b/src/components/swap-form.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { ArrowDownUp } from 'lucide-react';
+import { useAccount } from 'wagmi';
+
+export function SwapForm() {
+  const { t } = useTranslation();
+  const { isConnected } = useAccount();
+  const [fromAmount, setFromAmount] = useState('');
+  const [toAmount, setToAmount] = useState('');
+
+  const handleSwap = () => {
+    // Swap logic will be implemented later
+    console.log('Swap clicked');
+  };
+
+  const switchTokens = () => {
+    // Switch tokens logic
+    setFromAmount(toAmount);
+    setToAmount(fromAmount);
+  };
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle>{t('swap.title')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* From Token */}
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <label className="text-muted-foreground">{t('swap.youPay')}</label>
+            <span className="text-muted-foreground">{t('swap.balance')}: 0.00</span>
+          </div>
+          <div className="flex gap-2">
+            <Input
+              type="number"
+              placeholder="0.0"
+              value={fromAmount}
+              onChange={(e) => setFromAmount(e.target.value)}
+              className="text-2xl h-16"
+            />
+            <Button variant="secondary" className="min-w-[120px]">
+              {t('swap.selectToken')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Switch Button */}
+        <div className="flex justify-center">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={switchTokens}
+            className="rounded-full"
+          >
+            <ArrowDownUp className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* To Token */}
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <label className="text-muted-foreground">{t('swap.youReceive')}</label>
+            <span className="text-muted-foreground">{t('swap.balance')}: 0.00</span>
+          </div>
+          <div className="flex gap-2">
+            <Input
+              type="number"
+              placeholder="0.0"
+              value={toAmount}
+              onChange={(e) => setToAmount(e.target.value)}
+              className="text-2xl h-16"
+            />
+            <Button variant="secondary" className="min-w-[120px]">
+              {t('swap.selectToken')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Swap Button */}
+        <Button
+          className="w-full h-14 text-lg"
+          onClick={handleSwap}
+          disabled={!isConnected || !fromAmount || !toAmount}
+        >
+          {!isConnected ? t('swap.connectWalletToSwap') : t('swap.swapButton')}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}