final touches on the swpa-from
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
"stake": "ステーキング"
|
||||
},
|
||||
"swap": {
|
||||
"title": "スワップ",
|
||||
"title": "",
|
||||
"from": "から",
|
||||
"to": "へ",
|
||||
"youPay": "支払い",
|
||||
"youReceive": "受取り",
|
||||
"youPay": "売却",
|
||||
"youReceive": "購入",
|
||||
"balance": "残高",
|
||||
"selectToken": "トークンを選択",
|
||||
"swapButton": "スワップ",
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
"stake": "质押"
|
||||
},
|
||||
"swap": {
|
||||
"title": "兑换",
|
||||
"title": "",
|
||||
"from": "从",
|
||||
"to": "到",
|
||||
"youPay": "您支付",
|
||||
"youReceive": "您收到",
|
||||
"youPay": "卖出",
|
||||
"youReceive": "买入",
|
||||
"balance": "余额",
|
||||
"selectToken": "选择代币",
|
||||
"swapButton": "兑换",
|
||||
|
||||
Reference in New Issue
Block a user