deposit modal fixes (#124)

MorpheusAIs · Nov 18, 2024 · e4ca06b · e4ca06b
1 parent 15c99c8
commit e4ca06b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 22 deletions.
diff --git 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
@@ -14,7 +14,17 @@
       :error-message="getFieldErrorMessage('amount')"
       :disabled="isLoadFailed || !isLoaded"
       @blur="touchField('amount')"
-    />
+    >
+      <template #nodeRight>
+        <app-button
+          class="swap-step__input-btn"
+          scheme="link"
+          text="max"
+          :disabled="isLoadFailed || !isLoaded || !Number(userBalance)"
+          @click="inputMaxAmount"
+        />
+      </template>
+    </input-field>
     <div class="swap-step__desc-wrp">
       <div class="swap-step__desc">
         <span class="swap-step__desc-text">
@@ -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;
+}
 </style>
diff --git 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}"
   },