final touches on the swpa-from

This commit is contained in:
2025-10-20 19:16:30 -04:00
parent caf6bff469
commit b5da8ce080
9 changed files with 38 additions and 32 deletions

View File

@@ -8,7 +8,7 @@ export default function HomePage() {
const { t } = useTranslation();
return (
<div className="max-w-2xl mx-auto">
<div className="w-full max-w-md mx-auto">
<Tabs defaultValue="swap" className="w-full">
<TabsList className="grid w-full grid-cols-2 mb-8">
<TabsTrigger value="swap">{t('nav.swap')}</TabsTrigger>

View File

@@ -152,9 +152,14 @@ export function SwapForm() {
};
const switchTokens = () => {
// Switch tokens logic
// Switch both tokens and amounts
const tempFromAmount = fromAmount;
const tempFromToken = selectedFromToken;
setFromAmount(toAmount);
setToAmount(fromAmount);
setToAmount(tempFromAmount);
setSelectedFromToken(selectedToToken);
setSelectedToToken(tempFromToken);
};
// Estimate gas when swap parameters change
@@ -175,7 +180,7 @@ export function SwapForm() {
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle>{t('swap.title')}</CardTitle>
<CardTitle>Swap</CardTitle>
<Button
variant="ghost"
size="icon"
@@ -189,11 +194,8 @@ export function SwapForm() {
<CardContent className="space-y-4">
{/* From Token */}
<div className="space-y-2">
<div className="flex justify-between text-sm">
<div className="text-sm">
<label className="text-muted-foreground">{t('swap.youPay')}</label>
<span className="text-muted-foreground">
{t('swap.balance')}: {selectedFromToken ? formatUnits(selectedFromToken.balance, selectedFromToken.decimals) : '0.00'}
</span>
</div>
<div className="flex gap-2">
<Input
@@ -203,7 +205,7 @@ export function SwapForm() {
onChange={(e) => setFromAmount(e.target.value)}
className="text-2xl h-16"
/>
<div className="relative min-w-[160px]" ref={fromDropdownRef}>
<div className="relative min-w-[160px] space-y-1" ref={fromDropdownRef}>
<Button
variant="secondary"
className="w-full h-16 justify-between"
@@ -216,6 +218,9 @@ export function SwapForm() {
)}
<ChevronDown className="h-4 w-4 ml-2" />
</Button>
<div className="text-xs text-muted-foreground text-right">
{t('swap.balance')}: {selectedFromToken ? formatUnits(selectedFromToken.balance, selectedFromToken.decimals) : '0.00'}
</div>
{isFromDropdownOpen && (
<div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
{tokenDetails && tokenDetails.length > 0 ? (
@@ -256,11 +261,8 @@ export function SwapForm() {
{/* To Token */}
<div className="space-y-2">
<div className="flex justify-between text-sm">
<div className="text-sm">
<label className="text-muted-foreground">{t('swap.youReceive')}</label>
<span className="text-muted-foreground">
{t('swap.balance')}: {selectedToToken ? formatUnits(selectedToToken.balance, selectedToToken.decimals) : '0.00'}
</span>
</div>
<div className="flex gap-2">
<Input
@@ -271,7 +273,7 @@ export function SwapForm() {
className="text-2xl h-16"
disabled={!selectedFromToken}
/>
<div className="relative min-w-[160px]" ref={toDropdownRef}>
<div className="relative min-w-[160px] space-y-1" ref={toDropdownRef}>
<Button
variant="secondary"
className="w-full h-16 justify-between"
@@ -285,6 +287,9 @@ export function SwapForm() {
)}
<ChevronDown className="h-4 w-4 ml-2" />
</Button>
<div className="text-xs text-muted-foreground text-right">
{t('swap.balance')}: {selectedToToken ? formatUnits(selectedToToken.balance, selectedToToken.decimals) : '0.00'}
</div>
{isToDropdownOpen && (
<div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
{availableTokens && availableTokens.length > 0 && tokenDetails ? (

View File

@@ -3,6 +3,7 @@
import { useState, useEffect, useCallback } from 'react';
import { usePublicClient, useWalletClient } from 'wagmi';
import IPartyPoolABI from '@/contracts/IPartyPoolABI';
import chainInfo from '../../../lmsr-amm/liqp-deployments.json';
import type { AvailableToken } from './usePartyPlanner';
// Q96 constant for price calculations

View File

@@ -8,11 +8,11 @@
"stake": "Staken"
},
"swap": {
"title": "Tauschen",
"title": "",
"from": "Von",
"to": "Zu",
"youPay": "Sie zahlen",
"youReceive": "Sie erhalten",
"youPay": "Verkaufen",
"youReceive": "Kaufen",
"balance": "Guthaben",
"selectToken": "Token auswählen",
"swapButton": "Tauschen",

View File

@@ -8,11 +8,11 @@
"stake": "Stake"
},
"swap": {
"title": "Swap",
"title": "",
"from": "From",
"to": "To",
"youPay": "You pay",
"youReceive": "You receive",
"youPay": "Sell",
"youReceive": "Buy",
"balance": "Balance",
"selectToken": "Select token",
"swapButton": "Swap",

View File

@@ -8,11 +8,11 @@
"stake": "Apostar"
},
"swap": {
"title": "Intercambiar",
"title": "",
"from": "Desde",
"to": "Hasta",
"youPay": "Pagas",
"youReceive": "Recibes",
"youPay": "Vender",
"youReceive": "Comprar",
"balance": "Saldo",
"selectToken": "Seleccionar token",
"swapButton": "Intercambiar",

View File

@@ -8,11 +8,11 @@
"stake": "Staker"
},
"swap": {
"title": "Échanger",
"title": "",
"from": "De",
"to": "À",
"youPay": "Vous payez",
"youReceive": "Vous recevez",
"youPay": "Vendre",
"youReceive": "Acheter",
"balance": "Solde",
"selectToken": "Sélectionner un token",
"swapButton": "Échanger",

View File

@@ -8,11 +8,11 @@
"stake": "ステーキング"
},
"swap": {
"title": "スワップ",
"title": "",
"from": "から",
"to": "へ",
"youPay": "支払い",
"youReceive": "受取り",
"youPay": "売却",
"youReceive": "購入",
"balance": "残高",
"selectToken": "トークンを選択",
"swapButton": "スワップ",

View File

@@ -8,11 +8,11 @@
"stake": "质押"
},
"swap": {
"title": "兑换",
"title": "",
"from": "从",
"to": "到",
"youPay": "您支付",
"youReceive": "您收到",
"youPay": "卖出",
"youReceive": "买入",
"balance": "余额",
"selectToken": "选择代币",
"swapButton": "兑换",