From e4ca06bdd546995a2f9dff2c0fe404c3353f03d7 Mon Sep 17 00:00:00 2001 From: Stas Leshchina <66851165+Sorizen@users.noreply.github.com> Date: Mon, 18 Nov 2024 14:59:31 +0200 Subject: [PATCH] deposit modal fixes (#124) --- .../MainnetDepositModalContent.vue | 3 +- .../compositions/DepositModal/SwapStep.vue | 64 +++++++++++++------ src/localization/resources/en.json | 2 +- 3 files changed, 47 insertions(+), 22 deletions(-) diff --git a/src/common/modals/compositions/DepositModal/MainnetDepositModalContent.vue b/src/common/modals/compositions/DepositModal/MainnetDepositModalContent.vue index eab7a0a0..d06b9992 100644 --- a/src/common/modals/compositions/DepositModal/MainnetDepositModalContent.vue +++ b/src/common/modals/compositions/DepositModal/MainnetDepositModalContent.vue @@ -82,7 +82,8 @@ const lblText = computed(() => : { lbl: t('mainnet-deposit-modal-content.swap-lbl'), text: t('mainnet-deposit-modal-content.swap-txt', { - asset: chosenAsset.value, + input: chosenAsset.value, + output: SWAP_ASSETS_NAMES.STETH, }), }, ) diff --git a/src/common/modals/compositions/DepositModal/SwapStep.vue b/src/common/modals/compositions/DepositModal/SwapStep.vue index c7899402..11c8aea7 100644 --- a/src/common/modals/compositions/DepositModal/SwapStep.vue +++ b/src/common/modals/compositions/DepositModal/SwapStep.vue @@ -14,7 +14,17 @@ :error-message="getFieldErrorMessage('amount')" :disabled="isLoadFailed || !isLoaded" @blur="touchField('amount')" - /> + > + +
@@ -62,7 +72,9 @@ import { ErrorHandler } from '@/helpers' import { utils } from 'ethers' import { AppButton } from '@/common' import { config } from '@config' +import { parseUnits } from '@/utils' +const MIN_SWAP_AMOUNT = '0.001' const PRECISION = 5 const emit = defineEmits<{ @@ -106,7 +118,7 @@ const { estimatedTokenOutAmount, estimatedGasCost, executeTrade } = useSwap( const validationRules = computed(() => ({ amount: { required, - minEther: minEther(0), + minEther: minEther(parseUnits(MIN_SWAP_AMOUNT, 'ether')), ...(userBalance.value && { maxEther: maxEther(userBalance.value), }), @@ -147,33 +159,41 @@ const humanizeEtherValue = (number: string, symbol: string) => `${parseFloat(Number(number).toFixed(PRECISION))} ${symbol}` const getUserBalance = async () => { + await web3ProvidersStore.provider.switchChain(ETHEREUM_CHAIN_IDS.ethereum) + const balance = await erc20Contract.value.providerBased.value.balanceOf( + web3ProvidersStore.address, + ) + const tokenDecimals = await erc20Contract.value.providerBased.value.decimals() + + userBalance.value = utils.formatUnits( + balance.toString(), + Number(tokenDecimals.toString()), + ) +} + +const inputMaxAmount = () => { + form.amount = userBalance.value +} + +const submit = async () => { isLoaded.value = false - isLoadFailed.value = false try { - await web3ProvidersStore.provider.switchChain(ETHEREUM_CHAIN_IDS.ethereum) - const balance = await erc20Contract.value.providerBased.value.balanceOf( - web3ProvidersStore.address, - ) - const tokenDecimals = - await erc20Contract.value.providerBased.value.decimals() - userBalance.value = utils.formatUnits( - balance.toString(), - Number(tokenDecimals.toString()), - ) + await executeTrade() + emit('swap-success') } catch (e) { - isLoadFailed.value = true - ErrorHandler.processWithoutFeedback(e) + ErrorHandler.process(e) } isLoaded.value = true } -const submit = async () => { +const init = async () => { isLoaded.value = false + isLoadFailed.value = false try { - await executeTrade() - emit('swap-success') + await getUserBalance() } catch (e) { - ErrorHandler.process(e) + isLoadFailed.value = true + ErrorHandler.processWithoutFeedback(e) } isLoaded.value = true } @@ -183,7 +203,7 @@ watch( () => web3ProvidersStore.provider.chainId, () => web3ProvidersStore.provider.selectedAddress, ], - getUserBalance, + init, { immediate: true, }, @@ -249,4 +269,8 @@ watch( .swap-step__button { width: toRem(200); } + +.swap-step__input-btn { + @include body-3-semi-bold; +} diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json index 080353f3..a2cb6094 100644 --- a/src/localization/resources/en.json +++ b/src/localization/resources/en.json @@ -643,7 +643,7 @@ }, "mainnet-deposit-modal-content": { "swap-lbl": "Step 1/2:", - "swap-txt": "Swap for {asset}", + "swap-txt": "Swap {input} for {output}", "deposit-lbl": "Step 2/2", "deposit-txt": "Deposit {asset}" },