Liquidity.Party/web
2
0
Fork 0
Code Issues 18 Pull Requests Packages Projects Releases Wiki Activity

final touches on the swpa-from

Browse Source
This commit is contained in:
surbhi
2025-10-20 19:16:30 -04:00
parent caf6bff469
commit b5da8ce080
9 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/swap-form.tsx
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 ? (