fix: eth max button should stay on

superhero-com · Apr 12, 2024 · 27c1fb8 · 27c1fb8
1 parent e2a95c6
commit 27c1fb8
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 37 deletions.
diff --git a/src/popup/components/InputAmount.vue b/src/popup/components/InputAmount.vue
@@ -7,6 +7,7 @@
     :model-value="modelValue"
     :label="label"
     :message="$attrs.message"
+    :blink-on-change="blinkOnChange"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template
@@ -88,9 +89,10 @@ export default defineComponent({
     modelValue: { type: [String, Number], default: '' },
     label: { type: String, default: null },
     selectedAsset: { type: Object as PropType<IAsset | null>, default: null },
+    protocol: { type: String as PropType<Protocol>, required: true },
     readonly: Boolean,
     showTokensWithBalance: Boolean,
-    protocol: { type: String as PropType<Protocol>, required: true },
+    blinkOnChange: Boolean,
   },
   emits: ['update:modelValue', 'asset-selected'],
   setup(props, { emit }) {

diff --git a/src/popup/components/InputField.vue b/src/popup/components/InputField.vue
@@ -54,7 +54,9 @@
           <input
             v-bind="$attrs"
             :id="inputId"
+            ref="inputEl"
             class="input"
+            :class="{ 'blink-hidden': isBlinking, blink: blinkOnChange }"
             autocomplete="off"
             step="any"
             data-cy="input"
@@ -143,6 +145,7 @@ export default defineComponent({
     readonly: Boolean,
     showHelp: Boolean,
     showMessageHelp: Boolean,
+    blinkOnChange: Boolean,
     code: Boolean,
     thin: Boolean,
     textLimit: {
@@ -161,6 +164,8 @@ export default defineComponent({
     const inputId = `input-${uid}`;
 
     const focused = ref(false);
+    const inputEl = ref<HTMLInputElement | null>(null);
+    const isBlinking = ref(false);
 
     const inputMode = computed(() => props.type === 'number' ? 'decimal' : 'text');
     const messageAsObject = computed(
@@ -206,7 +211,21 @@ export default defineComponent({
       (val) => emit('focus-change', val),
     );
 
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.blinkOnChange) {
+          isBlinking.value = true;
+          setTimeout(() => {
+            isBlinking.value = false;
+          }, 500);
+        }
+      },
+    );
+
     return {
+      isBlinking,
+      inputEl,
       focused,
       uid,
       inputId,

diff --git a/src/popup/components/TokenAmount.vue b/src/popup/components/TokenAmount.vue
@@ -1,7 +1,14 @@
 <template>
   <span
+    ref="tokenAmountEl"
     class="token-amount"
-    :class="[{ large, small, vertical }]"
+    :class="[{
+      large,
+      small,
+      vertical,
+      'blink-hidden': isBlinking,
+      blink: blinkOnChange,
+    }]"
   >
     <span
       class="amount"
@@ -30,12 +37,12 @@ import {
   computed,
   defineComponent,
   PropType,
+  ref,
+  watch,
+  onMounted,
 } from 'vue';
 import type { Protocol } from '@/types';
-import {
-  calculateFontSize,
-  formatNumber,
-} from '@/utils';
+import { calculateFontSize, formatNumber } from '@/utils';
 import { useCurrencies } from '@/composables';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 
@@ -51,13 +58,21 @@ export default defineComponent({
     dynamicSizing: Boolean,
     large: Boolean,
     small: Boolean,
+    blinkOnChange: Boolean,
   },
   setup(props) {
+    const tokenAmountEl = ref<HTMLElement>();
+    const amountRounded = ref<string | number>(0);
+    const amountFiat = ref<string>('');
+    const isBlinking = ref(false);
+
     const adapter = ProtocolAdapterFactory.getAdapter(props.protocol);
 
     const { getFormattedAndRoundedFiat } = useCurrencies();
 
-    const amountRounded = computed(() => {
+    const symbolComputed = computed(() => props.symbol || adapter.coinSymbol);
+
+    function getAmountRounded() {
       if (Number.isInteger(props.amount) || props.amount === 0) {
         return props.amount;
       }
@@ -71,15 +86,38 @@ export default defineComponent({
           }),
         },
       );
-    });
+    }
 
-    const amountFiat = computed(
-      (): string => (props.hideFiat) ? '' : getFormattedAndRoundedFiat(props.amount, props.protocol),
+    function getAmountFiat() {
+      return (props.hideFiat) ? '' : getFormattedAndRoundedFiat(props.amount, props.protocol);
+    }
+
+    function updateAmountValues() {
+      amountRounded.value = getAmountRounded();
+      amountFiat.value = getAmountFiat();
+    }
+
+    watch(
+      () => props.amount,
+      () => {
+        if (!props.blinkOnChange) {
+          updateAmountValues();
+        }
+        isBlinking.value = true;
+        setTimeout(() => {
+          updateAmountValues();
+          isBlinking.value = false;
+        }, 500);
+      },
     );
 
-    const symbolComputed = computed(() => props.symbol || adapter.coinSymbol);
+    onMounted(() => {
+      updateAmountValues();
+    });
 
     return {
+      isBlinking,
+      tokenAmountEl,
       amountRounded,
       amountFiat,
       symbolComputed,

diff --git a/src/popup/components/TransferSend/TransferSendAmount.vue b/src/popup/components/TransferSend/TransferSendAmount.vue
@@ -29,6 +29,7 @@
         :message="amountMessage"
         :protocol="protocol"
         :readonly="readonly"
+        :blink-on-change="blinkOnChange"
         :selected-asset="(selectedAsset as IAsset)"
         @update:modelValue="$emit('update:modelValue', $event)"
         @asset-selected="(asset) => $emit('asset-selected', asset)"
@@ -66,9 +67,10 @@ export default defineComponent({
     selectedAsset: { type: Object as PropType<IAsset>, default: () => {} },
     errors: { type: Object, required: true },
     customLabel: { type: String, default: '' },
+    protocol: { type: String as PropType<Protocol>, required: true },
     readonly: Boolean,
     withoutMargin: Boolean,
-    protocol: { type: String as PropType<Protocol>, required: true },
+    blinkOnChange: Boolean,
   },
   emits: ['update:modelValue', 'asset-selected'],
   setup(props) {

diff --git a/src/popup/components/TransferSendFormBase.vue b/src/popup/components/TransferSendFormBase.vue
@@ -29,6 +29,7 @@
           :amount="fee"
           :symbol="feeSymbol"
           :protocol="protocol"
+          blink-on-change
           data-cy="review-fee"
         />
       </template>

diff --git a/src/protocols/aeternity/components/TransferSendForm.vue b/src/protocols/aeternity/components/TransferSendForm.vue
@@ -86,6 +86,7 @@
         :selected-asset="formModel.selectedAsset"
         :readonly="isMultisig"
         :protocol="PROTOCOLS.aeternity"
+        :blink-on-change="shouldUseMaxAmount"
         :validation-rules="{
           ...+balance.minus(fee) > 0 && !isMultisig ? { max_value: max } : {},
           ...isMultisig ? { enough_ae_signer: fee.toString() } : { enough_coin: fee.toString() },
@@ -94,13 +95,14 @@
             : {},
           ae_min_tip_amount: isTipUrl,
         }"
+        @update:model-value="shouldUseMaxAmount = false"
         @asset-selected="handleAssetChange"
       >
         <template #label-after>
           <BtnMaxAmount
             v-if="!isMultisig"
-            :is-max="isMaxValue"
-            @click="setMaxValue"
+            :is-max="shouldUseMaxAmount"
+            @click="toggleMaxAmount"
           />
         </template>
       </TransferSendAmount>
@@ -245,6 +247,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const route = useRoute();
 
+    const shouldUseMaxAmount = ref(false);
     const hasMultisigTokenWarning = ref(false);
     const isUrlTippingEnabled = ref(false);
     const amountField = ref<InstanceType<typeof Field> | null>(null);
@@ -310,11 +313,6 @@ export default defineComponent({
       && !isAensNameValid(formModel.value.address)
     ));
 
-    const isMaxValue = computed((): boolean => {
-      const amountInt = +(formModel.value?.amount || 0);
-      return amountInt > 0 && amountInt === +max.value;
-    });
-
     const mySignerAccounts = accounts.value.filter(
       ({ address }) => activeMultisigAccount.value?.signers.includes(address),
     );
@@ -348,17 +346,11 @@ export default defineComponent({
       }
     }
 
-    function setMaxValue() {
-      const _fee = fee.value;
-      formModel.value.amount = max.value;
-      setTimeout(
-        () => {
-          if (_fee !== fee.value) {
-            formModel.value.amount = max.value;
-          }
-        },
-        100,
-      );
+    function toggleMaxAmount() {
+      shouldUseMaxAmount.value = !shouldUseMaxAmount.value;
+      if (shouldUseMaxAmount.value) {
+        formModel.value.amount = max.value;
+      }
     }
 
     function emitCurrentFormModelState() {
@@ -395,6 +387,15 @@ export default defineComponent({
       { deep: true },
     );
 
+    watch(
+      max,
+      (newMax) => {
+        if (shouldUseMaxAmount.value) {
+          formModel.value.amount = newMax;
+        }
+      },
+    );
+
     watch(
       activeAccount,
       () => {
@@ -423,6 +424,7 @@ export default defineComponent({
       AE_SYMBOL,
       PROTOCOLS,
       isAe,
+      shouldUseMaxAmount,
       hasMultisigTokenWarning,
       multisigVaultAddress,
       activeMultisigAccount,
@@ -435,14 +437,13 @@ export default defineComponent({
       errors,
       balance,
       isTipUrl,
-      isMaxValue,
       activeAccount,
       editPayload,
       clearPayload,
       openScanQrModal,
       handleAssetChange,
+      toggleMaxAmount,
       selectAccount,
-      setMaxValue,
       submit,
       EditIcon,
       DeleteIcon,

diff --git a/src/protocols/ethereum/components/TransferSendForm.vue b/src/protocols/ethereum/components/TransferSendForm.vue
@@ -25,18 +25,20 @@
         :errors="errors"
         :selected-asset="formModel.selectedAsset"
         :protocol="PROTOCOLS.ethereum"
+        :blink-on-change="shouldUseMaxAmount"
         :validation-rules="{
           ...+balance.minus(fee) > 0
             ? { max_value: max }
             : {},
           enough_coin: [fee.toString(), ETH_COIN_SYMBOL],
         }"
+        @update:model-value="shouldUseMaxAmount = false"
         @asset-selected="handleAssetChange"
       >
         <template #label-after>
           <BtnMaxAmount
-            :is-max="formModel?.amount?.toString() === max"
-            @click="setMaxAmount"
+            :is-max="shouldUseMaxAmount"
+            @click="toggleMaxAmount"
           />
         </template>
       </TransferSendAmount>
@@ -66,6 +68,7 @@ import {
   onMounted,
   onUnmounted,
   PropType,
+  ref,
   watch,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -161,6 +164,8 @@ export default defineComponent({
       getSelectedAssetValue,
     });
 
+    const shouldUseMaxAmount = ref(false);
+
     const maxFee = computed(() => maxFeePerGas.value!.multipliedBy(ETH_GAS_LIMIT));
 
     const { max } = useEthMaxAmount({ formModel, fee: maxFee });
@@ -191,8 +196,11 @@ export default defineComponent({
       }
     }
 
-    function setMaxAmount() {
-      formModel.value.amount = max.value;
+    function toggleMaxAmount() {
+      shouldUseMaxAmount.value = !shouldUseMaxAmount.value;
+      if (shouldUseMaxAmount.value) {
+        formModel.value.amount = max.value;
+      }
     }
 
     let polling: NodeJS.Timer | null = null;
@@ -215,6 +223,15 @@ export default defineComponent({
       }
     });
 
+    watch(
+      max,
+      (newMax) => {
+        if (shouldUseMaxAmount.value) {
+          formModel.value.amount = newMax;
+        }
+      },
+    );
+
     watch(
       hasError,
       (val) => emit('error', val),
@@ -244,10 +261,11 @@ export default defineComponent({
       errors,
       balance,
       max,
+      shouldUseMaxAmount,
       openScanQrModal,
       handleAssetChange,
       submit,
-      setMaxAmount,
+      toggleMaxAmount,
     };
   },
 });

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -319,3 +319,11 @@ hr {
     }
   }
 }
+
+.blink {
+  transition: opacity 0.5s ease-in-out;
+
+  &-hidden {
+    opacity: 0;
+  }
+}