fix #1562 + add max value button

symbol · Sep 25, 2021 · afe6d26 · afe6d26
1 parent bfc0f88
commit afe6d26
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 34 deletions.
diff --git a/src/components/AmountInput/AmountInput.less b/src/components/AmountInput/AmountInput.less
@@ -16,12 +16,13 @@
 .amount-input-size {
     width: 60%;
     height: 100%;
+    float: left;
 }
 .total-amount-input-size {
     width: 40%;
     height: 100%;
     color: #515a6e;
-    padding-left: 0.3rem;
+    float: right;
 }
 .warning-label {
     color: red;

diff --git a/src/components/AmountInput/AmountInput.vue b/src/components/AmountInput/AmountInput.vue
@@ -4,14 +4,23 @@
         mode="lazy"
         vid="amount"
         :name="$t('amount')"
-        :rules="validationRules.amount"
+        :rules="`${validationRules.amount}|amountBalanceChecker:${[totalAvailableAmount, isOffline]}`"
         tag="div"
         class="inputs-container"
     >
         <ErrorTooltip :errors="errors">
             <input v-model="relativeValue" class="input-style amount-input-size" type="text" />
-            <input v-if="!isOffline" v-model="totalAvailableAmount" class="input-style total-amount-input-size" :disabled="true" />
-            <p v-if="isAmountGreaterThanBalance && !isOffline" class="warning-label">{{ $t('not_enough_balance') }}</p>
+            <Button
+                v-if="!isOffline"
+                type="text"
+                :title="$t('use_max_value')"
+                class="input-style total-amount-input-size"
+                :disabled="false"
+                @click="useMaximumBalance()"
+            >
+                <Icon type="ios-information-circle-outline" />
+                {{ totalAvailableAmount }}
+            </Button>
         </ErrorTooltip>
     </ValidationProvider>
 </template>

diff --git a/src/components/AmountInput/AmountInputTs.ts b/src/components/AmountInput/AmountInputTs.ts
@@ -88,10 +88,13 @@ export class AmountInputTs extends Vue {
         const selectedMosaic = this.balanceMosaics.find((m) => m.mosaicIdHex === this.mosaicHex);
         return selectedMosaic.balance / Math.pow(10, selectedMosaic.divisibility);
     }
+    private useMaximumBalance() {
+        const roundedValue = this.round(this.totalAvailableAmount).toString();
+        this.relativeValue = roundedValue;
+        this.$emit('input', roundedValue);
+    }
 
-    // Checks if the entered amount is greater than the current balance
-    public get isAmountGreaterThanBalance() {
-        this.$emit('enough-balance', this.totalAvailableAmount > Number(this.relativeValue));
-        return this.totalAvailableAmount < Number(this.relativeValue);
+    private round(num) {
+        return Math.floor(num * 100) / 100;
     }
 }
diff --git a/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue b/src/components/MosaicAttachmentInput/MosaicAttachmentInput.vue
@@ -13,7 +13,6 @@
                     class="ml-2"
                     :is-offline="isOffline"
                     @input="onChangeAmount"
-                    @enough-balance="onCheckBalance"
                 />
                 <div v-show="isShowDelete" class="delete-mosaic-container">
                     <span class="delete-mosaic-icon" @click="$emit('input-deleted', uid)" />

diff --git a/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts b/src/components/MosaicAttachmentInput/MosaicAttachmentInputTs.ts
@@ -165,11 +165,4 @@ export class MosaicAttachmentInputTs extends Vue {
     public onMosaicAttachmentChange(mosaicAttachment: { mosaicHex: string; amount: string }) {
         this.relativeAmount = mosaicAttachment.amount;
     }
-
-    /**
-     * Emits balance checker event (`enough-balance`)
-     */
-    onCheckBalance(flag: boolean): void {
-        this.$emit('enough-balance', flag);
-    }
 }
diff --git a/src/core/validation/CustomValidationRules.ts b/src/core/validation/CustomValidationRules.ts
@@ -68,6 +68,13 @@ export class CustomValidationRules {
                 })}`,
             params: ['maxMosaicAtomicUnits', 'maxMosaicDivisibility'],
         });
+        extend('amountBalanceChecker', {
+            validate: (value, args: any) => {
+                console.log(Number(value), Number(args[0]), JSON.parse(args[1]));
+                return Number(value) <= Number(args[0]) && !JSON.parse(args[1]);
+            },
+            message: () => `${i18n.t('not_enough_balance')}`,
+        });
 
         extend('maxMessage', {
             validate: (value, args: any) => {

diff --git a/src/language/en-US.json b/src/language/en-US.json
@@ -1127,5 +1127,6 @@
     "word": "Word",
     "ws_connection_failed": "The wallet cannot monitor the activities of your account on the Symbol chain. Please try selecting a different node.",
     "x_seconds": "{seconds}s.",
-    "not_enough_balance": "Not enough balance"
+    "not_enough_balance": "Not enough balance",
+    "use_max_value": "Use maximum value"
 }
diff --git a/src/language/ja-JP.json b/src/language/ja-JP.json
@@ -1127,5 +1127,6 @@
     "word": "文字",
     "ws_connection_failed": "ウォレットはSymbolチェーン上のアカウントに関するアクティビティを監視できません。別のノードを選択してみてください。",
     "x_seconds": "{seconds} 秒",
-    "not_enough_balance": "バランスが悪い"
+    "not_enough_balance": "バランスが悪い",
+    "use_max_value": "最大値を使用"
 }
diff --git a/src/language/ru-RU.json b/src/language/ru-RU.json
@@ -1127,5 +1127,6 @@
     "word": "Слово",
     "ws_connection_failed": "Кошелек не может отслеживать действия вашего аккаунта в цепочке Symbol. Пожалуйста, попробуйте выбрать другую ноду.",
     "x_seconds": "{seconds}s.",
-    "not_enough_balance": "не хватает баланса"
+    "not_enough_balance": "не хватает баланса",
+    "use_max_value": "Используйте максимальное значение"
 }
diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json
@@ -1127,5 +1127,6 @@
     "word": "字",
     "ws_connection_failed": "钱包无法监视您在Symbol链上的帐户活动。请尝试选择其他节点。",
     "x_seconds": "{seconds}秒",
-    "not_enough_balance": "余额不足"
+    "not_enough_balance": "余额不足",
+    "use_maximum_value": "使用最大值"
 }
diff --git a/src/views/forms/FormTransferTransaction/FormTransferTransaction.vue b/src/views/forms/FormTransferTransaction/FormTransferTransaction.vue
@@ -32,7 +32,6 @@
                             :is-show-delete="index > 0 && index === formItems.attachedMosaics.length - 1"
                             :is-first-item="index === 0"
                             :is-offline="isOfflineMode"
-                            @enough-balance="onCheckBalance"
                             @input-changed="onMosaicInputChange"
                             @input-deleted="onDeleteMosaicInput"
                         />
@@ -73,7 +72,7 @@
                         :hide-submit="hideSubmit"
                         :submit-button-text="submitButtonText"
                         :calculated-recommended-fee="calculatedRecommendedFee"
-                        :disable-submit="currentAccount.isMultisig || (!isBalanceEnough && !isOfflineMode)"
+                        :disable-submit="currentAccount.isMultisig"
                         :size="transactionSize"
                         @button-clicked="handleSubmit(onSubmit)"
                         @input="onChangeMaxFee"
@@ -82,7 +81,7 @@
                         <button
                             type="submit"
                             class="save-button centered-button button-style inverted-button"
-                            :disabled="currentAccount.isMultisig || !isBalanceEnough"
+                            :disabled="currentAccount.isMultisig"
                             @click="emitToAggregate"
                         >
                             {{ $t('save') }}

diff --git a/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts b/src/views/forms/FormTransferTransaction/FormTransferTransactionTs.ts
@@ -250,10 +250,6 @@ export class FormTransferTransactionTs extends FormTransactionBase {
         free: number;
     };
     private transactionSize: number = 0;
-    /**
-     * Defines whether the user has enough balnance
-     */
-    private isBalanceEnough: boolean = false;
     /**
      * Reset the form with properties
      * @return {void}
@@ -793,13 +789,6 @@ export class FormTransferTransactionTs extends FormTransactionBase {
         this.isMounted = true;
     }
 
-    /**
-     * Called when balance needs to be checked to check if a user is able to make a transaction
-     */
-    onCheckBalance(enoughBalance: boolean): void {
-        this.isBalanceEnough = enoughBalance;
-    }
-
     /**
      * watch title to change form items on select different transactions
      */