Skip to content

Commit 5d1c906

Browse files
0xAlunara0xAlunara
authored
Merge pull request #1499 from curvefi/feat/large-input-new-layout
feat: large input new layout
2 parents fd8bebe + 39909fb commit 5d1c906

File tree

7 files changed

+213
-104
lines changed

7 files changed

+213
-104
lines changed

‎apps/main/src/dex/components/PagePool/Swap/index.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import FieldHelperUsdRate from '@/dex/components/FieldHelperUsdRate'
1111
import DetailInfoSlippageTolerance from '@/dex/components/PagePool/components/DetailInfoSlippageTolerance'
1212
import TransferActions from '@/dex/components/PagePool/components/TransferActions'
1313
import WarningModal from '@/dex/components/PagePool/components/WarningModal'
14-
import { FieldsWrapper } from '@/dex/components/PagePool/styles'
1514
import type { ExchangeOutput, FormStatus, FormValues, StepKey } from '@/dex/components/PagePool/Swap/types'
1615
import { DEFAULT_EST_GAS, DEFAULT_EXCHANGE_OUTPUT, getSwapTokens } from '@/dex/components/PagePool/Swap/utils'
1716
import type { PageTransferProps, Seed } from '@/dex/components/PagePool/types'
@@ -346,7 +345,7 @@ const Swap = ({
346345
return (
347346
<>
348347
{/* input fields */}
349-
<FieldsWrapper>
348+
<Box grid gridRowGap="1">
350349
<div>
351350
{releaseChannel !== ReleaseChannel.Beta ? (
352351
<Box grid gridGap={1}>
@@ -419,10 +418,14 @@ const Swap = ({
419418
</Box>
420419
) : (
421420
<LargeTokenInput
421+
label={t`Sell`}
422422
dataType="decimal"
423423
name="fromAmount"
424424
onBalance={setFromAmount}
425425
balance={decimal(formValues.fromAmount)}
426+
inputBalanceUsd={
427+
fromUsdRate != null && decimal(formValues.fromAmount) ? `${fromUsdRate * +formValues.fromAmount}` : '0'
428+
}
426429
tokenSelector={
427430
<TokenSelector
428431
selectedToken={fromToken}
@@ -458,6 +461,7 @@ const Swap = ({
458461
loading: userPoolBalancesLoading || isMaxLoading,
459462
symbol: fromToken?.symbol,
460463
showSlider: false,
464+
showChips: true,
461465
...(toUsdRate != null &&
462466
userFromBalance != null && { notionalValueUsd: Number(userFromBalance) * Number(fromUsdRate) }),
463467
...(formValues.fromAddress.toLowerCase() === ethAddress && {
@@ -466,29 +470,29 @@ const Swap = ({
466470
}}
467471
/>
468472
)}
469-
470-
<Box flex flexJustifyContent="center">
471-
<IconButton
472-
disabled={isDisabled}
473-
onClick={() => {
474-
const cFormValues = cloneDeep(formValues)
475-
cFormValues.isFrom = true
476-
cFormValues.fromAmount = formValues.toAmount
477-
cFormValues.fromToken = formValues.toToken
478-
cFormValues.fromAddress = formValues.toAddress
479-
cFormValues.toToken = formValues.fromToken
480-
cFormValues.toAddress = formValues.fromAddress
481-
cFormValues.toAmount = ''
482-
483-
updateFormValues(cFormValues, null, '')
484-
}}
485-
size="medium"
486-
>
487-
<Icon name="ArrowsVertical" size={24} aria-label="icon arrow vertical" />
488-
</IconButton>
489-
</Box>
490473
</div>
491474

475+
<Box flex flexJustifyContent="center">
476+
<IconButton
477+
disabled={isDisabled}
478+
onClick={() => {
479+
const cFormValues = cloneDeep(formValues)
480+
cFormValues.isFrom = true
481+
cFormValues.fromAmount = formValues.toAmount
482+
cFormValues.fromToken = formValues.toToken
483+
cFormValues.fromAddress = formValues.toAddress
484+
cFormValues.toToken = formValues.fromToken
485+
cFormValues.toAddress = formValues.fromAddress
486+
cFormValues.toAmount = ''
487+
488+
updateFormValues(cFormValues, null, '')
489+
}}
490+
size="medium"
491+
>
492+
<Icon name="ArrowsVertical" size={24} aria-label="icon arrow vertical" />
493+
</IconButton>
494+
</Box>
495+
492496
{/* if hasRouter value is false, it means entering toAmount is not ready */}
493497
{releaseChannel !== ReleaseChannel.Beta ? (
494498
<div>
@@ -545,9 +549,13 @@ const Swap = ({
545549
</div>
546550
) : (
547551
<LargeTokenInput
552+
label={t`Buy`}
548553
dataType="decimal"
549554
name="toAmount"
550555
onBalance={setToAmount}
556+
inputBalanceUsd={
557+
toUsdRate != null && decimal(formValues.toAmount) ? `${toUsdRate * +formValues.toAmount}` : '0'
558+
}
551559
balance={decimal(formValues.toAmount)}
552560
disabled={isUndefined(hasRouter) || (!isUndefined(hasRouter) && !hasRouter) || isDisabled}
553561
tokenSelector={
@@ -619,7 +627,7 @@ const Swap = ({
619627
</Checkbox>
620628
</div>
621629
)}
622-
</FieldsWrapper>
630+
</Box>
623631

624632
<Box>
625633
<DetailInfoExchangeRate exchangeRates={exchangeOutput.exchangeRates} loading={exchangeOutput.loading} />

‎apps/main/src/dex/components/PageRouterSwap/index.tsx‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ const QuickSwap = ({
378378
return (
379379
<>
380380
{/* inputs */}
381-
<Box grid gridRowGap="narrow" margin="var(--spacing-3) 0 var(--spacing-3) 0">
381+
<Box grid gridRowGap="1" margin="var(--spacing-3) 0 var(--spacing-3) 0">
382382
<div>
383383
{releaseChannel !== ReleaseChannel.Beta ? (
384384
<Box grid gridGap={1}>
@@ -435,9 +435,13 @@ const QuickSwap = ({
435435
</Box>
436436
) : (
437437
<LargeTokenInput
438+
label={t`Sell`}
438439
dataType="decimal"
439440
onBalance={setFromAmount}
440441
name="fromAmount"
442+
inputBalanceUsd={
443+
fromUsdRate != null && decimal(formValues.fromAmount) ? `${fromUsdRate * +formValues.fromAmount}` : '0'
444+
}
441445
maxBalance={{
442446
loading: userBalancesLoading || isMaxLoading,
443447
balance: decimal(userFromBalance),
@@ -448,6 +452,7 @@ const QuickSwap = ({
448452
tooltip: t`'Balance minus estimated gas'`,
449453
}),
450454
showSlider: false,
455+
showChips: true,
451456
}}
452457
isError={!!formValues.fromError}
453458
disabled={isDisable}
@@ -468,29 +473,23 @@ const QuickSwap = ({
468473
}}
469474
/>
470475
}
471-
message={
472-
formValues.fromError ? (
473-
t`Amount > wallet balance ${formatNumber(userFromBalance)}`
474-
) : (
475-
<FieldHelperUsdRate amount={formValues.fromAmount} usdRate={fromUsdRate} />
476-
)
477-
}
476+
message={formValues.fromError && t`Amount > wallet balance ${formatNumber(userFromBalance)}`}
478477
/>
479478
)}
480-
481-
{/* SWAP ICON */}
482-
<Box flex flexJustifyContent="center">
483-
<IconButton
484-
disabled={isDisable}
485-
onClick={() => redirect(searchedParams.fromAddress, searchedParams.toAddress)}
486-
size="medium"
487-
testId="swap-tokens"
488-
>
489-
<Icon name="ArrowsVertical" size={24} />
490-
</IconButton>
491-
</Box>
492479
</div>
493480

481+
{/* SWAP ICON */}
482+
<Box flex flexJustifyContent="center">
483+
<IconButton
484+
disabled={isDisable}
485+
onClick={() => redirect(searchedParams.fromAddress, searchedParams.toAddress)}
486+
size="medium"
487+
testId="swap-tokens"
488+
>
489+
<Icon name="ArrowsVertical" size={24} />
490+
</IconButton>
491+
</Box>
492+
494493
{/* SWAP TO */}
495494
{releaseChannel !== ReleaseChannel.Beta ? (
496495
<div>
@@ -529,14 +528,24 @@ const QuickSwap = ({
529528
</div>
530529
) : (
531530
<LargeTokenInput
531+
label={t`Buy`}
532532
dataType="decimal"
533533
balance={decimal(formValues.toAmount)}
534+
inputBalanceUsd={
535+
toUsdRate != null && decimal(formValues.toAmount) ? `${toUsdRate * +formValues.toAmount}` : '0'
536+
}
534537
onBalance={setToAmount}
535538
name="toAmount"
536-
{...(userToBalance != null && {
537-
label: `Avail. ${formatNumber(userToBalance)} ${toToken?.symbol || ''}`,
538-
})}
539-
message={<FieldHelperUsdRate amount={formValues.toAmount} usdRate={toUsdRate} />}
539+
maxBalance={{
540+
loading: userBalancesLoading,
541+
balance: decimal(userToBalance),
542+
symbol: toToken?.symbol || '',
543+
...(toUsdRate != null && userToBalance != null && { notionalValueUsd: toUsdRate * +userToBalance }),
544+
...(searchedParams.fromAddress === ethAddress && {
545+
tooltip: t`'Balance'`,
546+
}),
547+
showSlider: false,
548+
}}
540549
disabled={isDisable}
541550
testId="to-amount"
542551
tokenSelector={

‎packages/curve-ui-kit/src/features/select-token/ui/TokenSelectButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const TokenSelectButton = ({ token, disabled, onClick, sx }: Props) => (
4545
}
4646
IconComponent={KeyboardArrowDownIcon}
4747
sx={{
48-
minHeight: ButtonSize.sm,
48+
maxHeight: ButtonSize.sm,
4949
minWidth: MinWidth.select,
5050
backgroundColor: (t) => t.design.Layer[1].Fill,
5151
border: 'none',

‎packages/curve-ui-kit/src/shared/ui/Balance.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,14 @@ const BalanceText = <T extends Amount>({ symbol, balance, loading = false }: Bal
6464
<Stack direction="row" gap={Spacing.xs} alignItems="center">
6565
<Typography
6666
className="balance"
67-
variant="highlightS"
67+
variant="highlightXs"
6868
color={balance != null ? 'textPrimary' : 'textTertiary'}
6969
data-testid="balance-value"
7070
>
71-
{balance == null ? '-' : formatNumber(balance, { abbreviate: true, highPrecision: true })}
71+
{balance == null ? '-' : formatNumber(balance, { abbreviate: true })}
7272
</Typography>
7373

74-
<Typography variant="highlightS" color="textPrimary">
74+
<Typography variant="highlightXs" color="textPrimary">
7575
{symbol}
7676
</Typography>
7777
</Stack>
@@ -124,7 +124,7 @@ export const Balance = <T extends Amount>({
124124
maxTestId,
125125
}: Props<T>) => (
126126
<Stack direction="row" gap={Spacing.xs} alignItems="center" sx={sx}>
127-
{!hideIcon && <AccountBalanceWalletOutlinedIcon sx={{ width: IconSize.sm, height: IconSize.sm }} />}
127+
{!hideIcon && <AccountBalanceWalletOutlinedIcon sx={{ width: IconSize.xs, height: IconSize.xs }} />}
128128

129129
{max === 'balance' && balance != null ? (
130130
<MaxButton underline onClick={onMax} loading={loading} testId={maxTestId}>
@@ -135,7 +135,7 @@ export const Balance = <T extends Amount>({
135135
)}
136136

137137
{notionalValueUsd != null && !loading && (
138-
<Typography variant="bodySRegular" color="textTertiary">
138+
<Typography variant="bodyXsRegular" color="textTertiary">
139139
{formatNumber(notionalValueUsd, { unit: 'dollar', abbreviate: true })}
140140
</Typography>
141141
)}

0 commit comments

Comments
 (0)