merge dev

src/common/modals/compositions/ChangeLockModal.vue

@@ -36,7 +36,7 @@
           color="secondary"
           :text="$t('change-lock-modal.cancel-btn')"
           :disabled="isSubmitting"
-          @click="modal.close()"
+          @click="cancel"
         />
         <app-button
           class="change-lock-modal__btn"
@@ -147,6 +147,7 @@ const submit = async () => {
     )
 
     emit('update:is-shown', false)
+    form.lockPeriod = ''
 
     await tx.wait()
 
@@ -172,6 +173,15 @@ watch(
   () => fetchExpectedMultiplier(form.lockPeriod),
   { immediate: true },
 )
+
+const cancel = () => {
+  clearFields()
+  emit('update:is-shown', false)
+}
+
+const clearFields = () => {
+  form.lockPeriod = ''
+}
 </script>
 
 <style lang="scss" scoped>

src/common/modals/compositions/ClaimModal.vue

@@ -20,12 +20,15 @@
       </i18n-t>
     </template>
     <template #default="{ modal }">
-      <claim-form
-        class="claim-modal__form"
-        :pool-id="poolId"
-        @cancel="modal.close"
-        @tx-sent="modal.close"
-      />
+      <transition name="fade">
+        <claim-form
+          v-if="isShown"
+          class="claim-modal__form"
+          :pool-id="poolId"
+          @cancel="modal.close"
+          @tx-sent="modal.close"
+        />
+      </transition>
     </template>
   </basic-modal>
 </template>

src/common/modals/compositions/DepositModal.vue

@@ -8,13 +8,16 @@
     @update:is-shown="emit('update:is-shown', $event)"
   >
     <template #default="{ modal }">
-      <deposit-form
-        class="deposit-modal__form"
-        :pool-id="poolId"
-        :min-stake="minStake"
-        @cancel="modal.close"
-        @stake-tx-sent="modal.close"
-      />
+      <transition name="fade">
+        <deposit-form
+          v-if="isShown"
+          class="deposit-modal__form"
+          :pool-id="poolId"
+          :min-stake="minStake"
+          @cancel="modal.close"
+          @stake-tx-sent="modal.close"
+        />
+      </transition>
     </template>
   </basic-modal>
 </template>

src/common/modals/compositions/WithdrawModal.vue

@@ -27,13 +27,16 @@
           </p>
         </div>
       </div>
-      <withdraw-form
-        class="withdraw-modal__form"
-        :pool-id="poolId"
-        :available-amount="availableAmount"
-        @cancel="modal.close"
-        @tx-sent="modal.close"
-      />
+      <transition name="fade">
+        <withdraw-form
+          v-if="isShown"
+          class="withdraw-modal__form"
+          :pool-id="poolId"
+          :available-amount="availableAmount"
+          @cancel="modal.close"
+          @tx-sent="modal.close"
+        />
+      </transition>
     </template>
   </basic-modal>
 </template>

src/forms/ClaimForm.vue

@@ -13,7 +13,7 @@
         class="claim-form__btn"
         color="secondary"
         :text="$t('claim-form.cancel-btn')"
-        @click="emit('cancel')"
+        @click="cancel"
       />
       <app-button
         class="claim-form__btn"
@@ -33,7 +33,7 @@ import { getEthExplorerTxUrl, bus, BUS_EVENTS, ErrorHandler } from '@/helpers'
 import { storeToRefs, useWeb3ProvidersStore } from '@/store'
 import { address, required } from '@/validators'
 import { config } from '@config'
-import { reactive, ref } from 'vue'
+import {reactive, ref, watch} from 'vue'
 
 const emit = defineEmits<{
   (e: 'cancel', v: void): void
@@ -95,6 +95,8 @@ const submit = async (): Promise<void> => {
 
     emit('tx-sent')
 
+    clearFields()
+
     await tx.wait()
 
     bus.emit(
@@ -109,6 +111,15 @@ const submit = async (): Promise<void> => {
 
   isSubmitting.value = false
 }
+
+const cancel = (): void => {
+  clearFields()
+  emit('cancel')
+}
+
+const clearFields = () => {
+  form.address = ''
+}
 </script>
 
 <style lang="scss" scoped>

src/forms/WithdrawForm.vue

@@ -23,7 +23,7 @@
         class="withdraw-form__btn"
         color="secondary"
         :text="$t('withdraw-form.cancel-btn')"
-        @click="emit('cancel')"
+        @click="cancel"
       />
       <app-button
         class="withdraw-form__btn"
@@ -98,6 +98,7 @@ const submit = async (): Promise<void> => {
     )
 
     emit('tx-sent')
+    clearFields()
 
     await tx.wait()
 
@@ -113,6 +114,15 @@ const submit = async (): Promise<void> => {
 
   isSubmitting.value = false
 }
+
+const cancel = () => {
+  clearFields()
+  emit('cancel')
+}
+
+const clearFields = () => {
+  form.amount = ''
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/HomePage/views/PublicPoolView.vue

@@ -85,7 +85,10 @@
       <p class="public-pool-view__dashboard-description">
         {{ $t(`home-page.public-pool-view.dashboard-description--${poolId}`) }}
       </p>
-      <p v-if="poolData" class="public-pool-view__dashboard-note">
+      <p
+        v-if="poolData?.withdrawLockPeriod"
+        class="public-pool-view__dashboard-note"
+      >
         {{
           $t(`home-page.public-pool-view.dashboard-note--${poolId}`, {
             daysCount: poolData.withdrawLockPeriod.div(24 * 60 * 60),
@@ -161,9 +164,10 @@ const web3ProvidersStore = useWeb3ProvidersStore()
 
 const claimLockTime = computed(() => {
   if (userPoolData.value?.claimLockEnd) {
-    return new Time(userPoolData.value?.claimLockEnd.toNumber()).format(
-      DEFAULT_TIME_FORMAT,
-    )
+    const lockEnd = new Time(userPoolData.value?.claimLockEnd.toNumber())
+    return new Time().isAfter(lockEnd)
+      ? '-'
+      : lockEnd.format(DEFAULT_TIME_FORMAT)
   }
   if (poolData.value) {
     const lockTime = new Time(
@@ -174,9 +178,10 @@ const claimLockTime = computed(() => {
         : poolData.value.payoutStart
             .add(poolData.value.withdrawLockPeriod)
             .toNumber(),
-    ).format(DEFAULT_TIME_FORMAT)
-
-    return new Time().isAfter(lockTime) ? '-' : lockTime
+    )
+    return new Time().isAfter(lockTime)
+      ? '-'
+      : lockTime.format(DEFAULT_TIME_FORMAT)
   }
   return ''
 })
@@ -191,8 +196,10 @@ const withdrawAtTime = computed(() => {
         : poolData.value.payoutStart
             .add(poolData.value.withdrawLockPeriod)
             .toNumber(),
-    ).format(DEFAULT_TIME_FORMAT)
-    return new Time().isAfter(withdrawTime) ? '-' : withdrawTime
+    )
+    return new Time().isAfter(withdrawTime)
+      ? '-'
+      : withdrawTime.format(DEFAULT_TIME_FORMAT)
   }
   return '-'
 })