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(); const { t } = useTranslation();
return ( return (
<div className="max-w-2xl mx-auto"> <div className="w-full max-w-md mx-auto">
<Tabs defaultValue="swap" className="w-full"> <Tabs defaultValue="swap" className="w-full">
<TabsList className="grid w-full grid-cols-2 mb-8"> <TabsList className="grid w-full grid-cols-2 mb-8">
<TabsTrigger value="swap">{t('nav.swap')}</TabsTrigger> <TabsTrigger value="swap">{t('nav.swap')}</TabsTrigger>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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