Update withdrawal UX

src/components/gateway/WithdrawForm.vue

@@ -33,11 +33,21 @@
       </div>
       <div>
         <h6>{{ $t('components.gateway.withdraw_form_modal.balance') }} {{ balance | tokenAmount(tokenInfo.decimals)}} {{ token }}</h6>
-        <h6 v-if="isWithdrawalLimitEnabled && isCheckDailyRemainingWithdrawAmount()">
+        <h6 v-if="isWithdrawalLimitReached">
+          {{
+            $t('components.gateway.withdraw_form_modal.daily_withdrawal_limit_reached', {
+              amount: formattedMaxPerAccountDailyWithdrawalAmount,
+              token
+            })
+          }}
+        </h6>
+        <h6 v-else-if="isWithdrawalLimitEnabled && dailyRemainingWithdrawAmount !== null">
           {{ $t('components.gateway.withdraw_form_modal.daily_remaining_withdraw_amount') }}
-          {{ dailyRemainingWithdrawAmount | tokenAmount(tokenInfo.decimals) }} {{ token }}
+          {{ dailyRemainingWithdrawAmount | tokenAmount(tokenInfo.decimals) }} /
+          {{ maxPerAccountDailyWithdrawalAmount | tokenAmount(tokenInfo.decimals) }} {{ token }}
         </h6>
         <amount-input
+          v-if="!isWithdrawalLimitReached"
           :min="min"
           :max="max"
           :symbol="transferRequest.token"
@@ -64,7 +74,7 @@
         class="ml-2"
         @click="requestWithdrawal"
         variant="primary"
-        :disabled="validInput === false || max <= 0"
+        :disabled="validInput === false || max <= 0 || isWithdrawalLimitReached"
       >{{ $t('components.gateway.withdraw_form_modal.withdraw') }}</b-btn>
     </template>
   </b-modal>
@@ -86,6 +96,9 @@ import { LocalAddress, Address } from "loom-js"
 
 import * as plasmaGateways from "@/store/gateway/plasma"
 import { tokenService, TokenData } from "@/services/TokenService"
+import { formatTokenAmount } from "@/filters"
+
+const ONE_DAY_MSECS = 86400000 // 24hrs in milliseconds
 
 @Component({
   components: {
@@ -103,7 +116,8 @@ export default class WithdrawForm extends Vue {
   amountIsValid: boolean = false
   isValidAddress: boolean = false
   recepient = ""
-  dailyRemainingWithdrawAmount: BN = ZERO
+  dailyRemainingWithdrawAmount: BN | null = null
+  maxPerAccountDailyWithdrawalAmount: BN = ZERO
 
   tokenInfo: TokenData | null = null
 
@@ -138,6 +152,13 @@ export default class WithdrawForm extends Vue {
 
   get isWithdrawalLimitEnabled() {
     return this.state.gateway.withdrawalLimit
+      && (this.transferRequest.token === "ETH" || this.transferRequest.token === "LOOM")
+  }
+
+  get formattedMaxPerAccountDailyWithdrawalAmount(): string {
+    return formatTokenAmount(
+      this.maxPerAccountDailyWithdrawalAmount, this.tokenInfo ? this.tokenInfo.decimals : 18,
+    )
   }
 
   get visible() {
@@ -159,20 +180,23 @@ export default class WithdrawForm extends Vue {
     this.isValidAddress = false
     this.weiAmount = ZERO
     this.recepient = ""
+    this.dailyRemainingWithdrawAmount = null
   }
 
   isValidAddressFormat(isValid) {
     return this.isValidAddress = isValid
   }
 
-  isCheckDailyRemainingWithdrawAmount() {
-    return this.transferRequest.token === "ETH" || this.transferRequest.token === "LOOM"
-  }
-
   close() {
     this.visible = false
   }
 
+  get isWithdrawalLimitReached() {
+    return this.isWithdrawalLimitEnabled
+      && this.dailyRemainingWithdrawAmount !== null
+      && this.dailyRemainingWithdrawAmount.lte(new BN(0))
+  }
+
   setAmountIsError(isError: boolean) {
     this.amountIsValid = !isError
   }
@@ -195,38 +219,31 @@ export default class WithdrawForm extends Vue {
     return true
   }
 
-  async remainWithdrawAmount() {
+  async fetchRemainingWithdrawalAmount() {
     const { chain, token } = this.transferRequest
     const gateway = plasmaGateways.service().get(chain, token)
 
     const ownerAddress = Address.fromString(`${this.state.plasma.chainId}:${this.state.plasma.address}`)
-    const plasmaAccountInfo =  await gateway.getLocalAccountInfo(ownerAddress)
-    let totalWithdrawalAmount: BN =  plasmaAccountInfo!.totalWithdrawalAmount
-
-    const lastWithdrawalLimitResetTime: number = plasmaAccountInfo!.lastWithdrawalLimitResetTime
-    const lastWithdrawalLimitResetDate: Date = new Date(lastWithdrawalLimitResetTime * 1000)
-    const todayDate: Date = new Date()
-
-    // if lastWithdrawalLimitResetDate is not today then set total withdraw amount of this account to 0
-    if (lastWithdrawalLimitResetDate.toDateString() !== todayDate.toDateString()) {
+    const plasmaAccountInfo = await gateway.getLocalAccountInfo(ownerAddress)
+    let totalWithdrawalAmount =  plasmaAccountInfo.totalWithdrawalAmount
+    const lastWithdrawalLimitResetTime = plasmaAccountInfo.lastWithdrawalLimitResetTime * 1000
+    const elapsedMSecs = Date.now() - lastWithdrawalLimitResetTime
+    // daily withdrawal limit is reset every 24 hours
+    if (elapsedMSecs > ONE_DAY_MSECS) {
       totalWithdrawalAmount = new BN(0)
     }
-
     const gatewayState = await gateway.getGatewayState()
-    const maxPerAccountDailyWithdrawalAmount: BN = gatewayState!.maxPerAccountDailyWithdrawalAmount
-    const remainingWithdrawAmount = maxPerAccountDailyWithdrawalAmount.sub(totalWithdrawalAmount)
-
-    console.log("remainingWithdrawAmount: ", remainingWithdrawAmount.toString())
-    return remainingWithdrawAmount
+    this.maxPerAccountDailyWithdrawalAmount = gatewayState.maxPerAccountDailyWithdrawalAmount
+    return this.maxPerAccountDailyWithdrawalAmount.sub(totalWithdrawalAmount)
   }
 
   @Watch("visible")
   async refreshData(visible: boolean) {
     if (!visible) return
     const { chain, token } = this.transferRequest
     const fee = plasmaGateways.service().get(chain, token).fee
-    if (this.isWithdrawalLimitEnabled && this.isCheckDailyRemainingWithdrawAmount()) {
-      this.dailyRemainingWithdrawAmount = await this.remainWithdrawAmount()
+    if (this.isWithdrawalLimitEnabled) {
+      this.dailyRemainingWithdrawAmount = await this.fetchRemainingWithdrawalAmount()
       this.max = this.balance.lt(this.dailyRemainingWithdrawAmount) ? this.balance : this.dailyRemainingWithdrawAmount
     } else {
       this.max = this.balance
@@ -242,9 +259,6 @@ export default class WithdrawForm extends Vue {
       this.fee = {}
     }
     this.tokenInfo = tokenService.getTokenbySymbol(this.transferRequest.token)
-    if (this.isWithdrawalLimitEnabled) {
-      this.dailyRemainingWithdrawAmount = await this.remainWithdrawAmount()
-    }
   }
 
   async requestWithdrawal(e) {

src/locales/en.json

@@ -32,8 +32,8 @@
     "receiver_addr_err_tx": "Invalid receiver address",
     "invalid_amount": "Invalid amount",
     "invalid_addr": "Invalid receiver address",
-    "amount_input_should_less": "Amount should be less than {amount}",
-    "amount_input_should_more": "Amount should be more than {amount}",
+    "amount_input_should_less": "Amount should not exceed {amount}",
+    "amount_input_should_more": "Amount should be at least {amount}",
     "amount_input_invalid_amount": "Please enter a valid amount",
     "amount_input_only_round_amount": "Only round amounts allowed",
     "awaiting_transaction": "Awaiting transaction confirmation",
@@ -576,8 +576,9 @@
       "withdraw_form_modal": {
         "title": "Withdraw {token} to {chain}",
         "transfer_fee": "Transfer to {chain} requires a fee of ",
-        "balance": "Your balance : ",
-        "daily_remaining_withdraw_amount": "Daily remaining withdraw amount: ",
+        "balance": "Your balance: ",
+        "daily_remaining_withdraw_amount": "Daily remaining withdrawal amount: ",
+        "daily_withdrawal_limit_reached": "You've reached your daily withdrawal limit of {amount} {token}, please try again later.",
         "recipient": "Recipient on {chain}",
         "withdraw": "Withdraw"
       }
@@ -884,6 +885,8 @@
       "could_not_deposit_eth": "Could not deposit ETH, please make sure you pay enough gas for the transaction.",
       "deposit_approval_failed": "Deposit approval failed.",
       "withdraw_failed": "Withdraw failed, please try again or contact support.",
+      "withdraw_failed_total_limit_reached": "Total daily withdrawal limit has been reached, please try again tomorrow.",
+      "withdraw_failed_account_limit_reached": "Account daily withdrawal limit has been reached, please try again tomorrow.",
       "supplied_key_already_mapped": "The supplied key is already mapped.",
       "unexpected_error_while_add_account": "Unexpected error while adding account mapping.",
       "balance_not_enough": "Your balance isn't enough. Please deposit first.",

src/locales/es.json

@@ -32,8 +32,8 @@
     "receiver_addr_err_tx": "Invalid receiver address",
     "invalid_amount": "Invalid amount",
     "invalid_addr": "Invalid receiver address",
-    "amount_input_should_less": "Amount should be less than {amount}",
-    "amount_input_should_more": "Amount should be more than {amount}",
+    "amount_input_should_less": "Amount should not exceed {amount}",
+    "amount_input_should_more": "Amount should be at least {amount}",
     "amount_input_invalid_amount": "Please enter a valid amount",
     "amount_input_only_round_amount": "Only round amounts allowed",
     "awaiting_transaction": "Awaiting transaction confirmation",
@@ -521,8 +521,9 @@
       "withdraw_form_modal": {
         "title": "Withdraw {token} to {chain}",
         "transfer_fee": "Transfer to {chain} requires a fee of ",
-        "balance": "Your balance : ",
-        "daily_remaining_withdraw_amount": "Daily remaining withdraw amount: ",
+        "balance": "Your balance: ",
+        "daily_remaining_withdraw_amount": "Daily remaining withdrawal amount: ",
+        "daily_withdrawal_limit_reached": "You've reached your daily withdrawal limit of {amount} {token}, please try again later.",
         "recipient": "Recipient on {chain}",
         "withdraw": "Withdraw"
       }
@@ -829,6 +830,8 @@
       "could_not_deposit_eth": "Could not deposit ETH, please make sure you pay enough gas for the transaction.",
       "deposit_approval_failed": "Deposit approval failed.",
       "withdraw_failed": "Withdraw failed, please try again or contact support.",
+      "withdraw_failed_total_limit_reached": "Total daily withdrawal limit has been reached, please try again tomorrow.",
+      "withdraw_failed_account_limit_reached": "Account daily withdrawal limit has been reached, please try again tomorrow.",
       "supplied_key_already_mapped": "The supplied key is already mapped.",
       "unexpected_error_while_add_account": "Unexpected error while adding account mapping.",
       "balance_not_enough": "Your balance isn't enough. Please deposit first.",

src/locales/ja.json

@@ -32,8 +32,8 @@
     "receiver_addr_err_tx": "無効な受け取りアドレスです",
     "invalid_amount": "無効な数量です",
     "invalid_addr": "無効な受け取りアドレスです",
-    "amount_input_should_less": "Amount should be less than {amount}",
-    "amount_input_should_more": "Amount should be more than {amount}",
+    "amount_input_should_less": "Amount should not exceed {amount}",
+    "amount_input_should_more": "Amount should be at least {amount}",
     "amount_input_invalid_amount": "Please enter a valid amount",
     "amount_input_only_round_amount": "Only round amounts allowed",
     "awaiting_transaction": "トランザクションの承認待ちです",
@@ -521,8 +521,9 @@
       "withdraw_form_modal": {
         "title": "Withdraw {token} to {chain}",
         "transfer_fee": "Transfer to {chain} requires a fee of ",
-        "balance": "Your balance : ",
-        "daily_remaining_withdraw_amount": "Daily remaining withdraw amount: ",
+        "balance": "Your balance: ",
+        "daily_remaining_withdraw_amount": "Daily remaining withdrawal amount: ",
+        "daily_withdrawal_limit_reached": "You've reached your daily withdrawal limit of {amount} {token}, please try again later.",
         "recipient": "Recipient on {chain}",
         "withdraw": "Withdraw"
       }
@@ -829,6 +830,8 @@
       "could_not_deposit_eth": "Could not deposit ETH, please make sure you pay enough gas for the transaction.",
       "deposit_approval_failed": "Deposit approval failed.",
       "withdraw_failed": "Withdraw failed, please try again or contact support.",
+      "withdraw_failed_total_limit_reached": "Total daily withdrawal limit has been reached, please try again tomorrow.",
+      "withdraw_failed_account_limit_reached": "Account daily withdrawal limit has been reached, please try again tomorrow.",
       "supplied_key_already_mapped": "The supplied key is already mapped.",
       "unexpected_error_while_add_account": "Unexpected error while adding account mapping.",
       "balance_not_enough": "Your balance isn't enough. Please deposit first.",

src/locales/ko.json

@@ -32,8 +32,8 @@
     "receiver_addr_err_tx": "유효하지 않은 수신자 주소입니다.",
     "invalid_amount": "유효하지 않은 숫자입니다.",
     "invalid_addr": "유효하지 않은 수신자 주소입니다.",
-    "amount_input_should_less": "{amount} 보다 적어야 합니다.",
-    "amount_input_should_more": "{amount} 보다 많아야 합니다.",
+    "amount_input_should_less": "Amount should not exceed {amount}",
+    "amount_input_should_more": "Amount should be at least {amount}",
     "amount_input_invalid_amount": "유효한 금액을 입력해주세요",
     "amount_input_only_round_amount": "소수점 없는 정수 금액만 가능합니다.",
     "awaiting_transaction": "트랜잭션 확인을 기다리는 중입니다.",
@@ -521,8 +521,9 @@
       "withdraw_form_modal": {
         "title": "{chain}으로 {token} 출금",
         "transfer_fee": "{chain}으로 전송하려면 수수료가 필요합니다.",
-        "balance": "당신의 잔액 : ",
-        "daily_remaining_withdraw_amount": "Daily remaining withdraw amount: ",
+        "balance": "Your balance: ",
+        "daily_remaining_withdraw_amount": "Daily remaining withdrawal amount: ",
+        "daily_withdrawal_limit_reached": "You've reached your daily withdrawal limit of {amount} {token}, please try again later.",
         "recipient": "{chain} 상의 수신자",
         "withdraw": "출금"
       }
@@ -829,6 +830,8 @@
       "could_not_deposit_eth": "ETH를 입금할 수 없습니다. 트랜잭션 처리에 충분한 가스 수수료를 지불했는지 확인하세요.",
       "deposit_approval_failed": "입금 승인 실패",
       "withdraw_failed": "출금에 실패하였습니다. 다시 시도하거나 고객센터에 문의하세요.",
+      "withdraw_failed_total_limit_reached": "Total daily withdrawal limit has been reached, please try again tomorrow.",
+      "withdraw_failed_account_limit_reached": "Account daily withdrawal limit has been reached, please try again tomorrow.",
       "supplied_key_already_mapped": "제공된 키가 이미 매핑되었습니다.",
       "unexpected_error_while_add_account": "계정 매핑을 추가하던 중 예상치 못한 오류가 발생했습니다.",
       "balance_not_enough": "잔액이 충분하지 않습니다. 먼저 자금을 입금하세요.",

src/locales/th.json

@@ -32,8 +32,8 @@
     "receiver_addr_err_tx": "Invalid receiver address",
     "invalid_amount": "Invalid amount",
     "invalid_addr": "Invalid receiver address",
-    "amount_input_should_less": "Amount should be less than {amount}",
-    "amount_input_should_more": "Amount should be more than {amount}",
+    "amount_input_should_less": "Amount should not exceed {amount}",
+    "amount_input_should_more": "Amount should be at least {amount}",
     "amount_input_invalid_amount": "Please enter a valid amount",
     "amount_input_only_round_amount": "Only round amounts allowed",
     "awaiting_transaction": "Awaiting transaction confirmation",
@@ -521,8 +521,9 @@
       "withdraw_form_modal": {
         "title": "Withdraw {token} to {chain}",
         "transfer_fee": "Transfer to {chain} requires a fee of ",
-        "balance": "Your balance : ",
-        "daily_remaining_withdraw_amount": "Daily remaining withdraw amount: ",
+        "balance": "Your balance: ",
+        "daily_remaining_withdraw_amount": "Daily remaining withdrawal amount: ",
+        "daily_withdrawal_limit_reached": "You've reached your daily withdrawal limit of {amount} {token}, please try again later.",
         "recipient": "Recipient on {chain}",
         "withdraw": "Withdraw"
       }
@@ -829,6 +830,8 @@
       "could_not_deposit_eth": "Could not deposit ETH, please make sure you pay enough gas for the transaction.",
       "deposit_approval_failed": "Deposit approval failed.",
       "withdraw_failed": "Withdraw failed, please try again or contact support.",
+      "withdraw_failed_total_limit_reached": "Total daily withdrawal limit has been reached, please try again tomorrow.",
+      "withdraw_failed_account_limit_reached": "Account daily withdrawal limit has been reached, please try again tomorrow.",
       "supplied_key_already_mapped": "The supplied key is already mapped.",
       "unexpected_error_while_add_account": "Unexpected error while adding account mapping.",
       "balance_not_enough": "Your balance isn't enough. Please deposit first.",

src/locales/zh.json

@@ -32,8 +32,8 @@
     "receiver_addr_err_tx": "无效的接收者地址",
     "invalid_amount": "无效的数量",
     "invalid_addr": "无效的接收者地址",
-    "amount_input_should_less": "数量应少于 {amount}",
-    "amount_input_should_more": "数量应多于 {amount}",
+    "amount_input_should_less": "Amount should not exceed {amount}",
+    "amount_input_should_more": "Amount should be at least {amount}",
     "amount_input_invalid_amount": "请输入一个有效的数量",
     "amount_input_only_round_amount": "只接受整数",
     "awaiting_transaction": "正在等待交易确认",
@@ -521,8 +521,9 @@
       "withdraw_form_modal": {
         "title": "提取 {token} 到 {chain}",
         "transfer_fee": "转移到 {chain} 需要手续费 ",
-        "balance": "你的余额： ",
-        "daily_remaining_withdraw_amount": "Daily remaining withdraw amount: ",
+        "balance": "Your balance: ",
+        "daily_remaining_withdraw_amount": "Daily remaining withdrawal amount: ",
+        "daily_withdrawal_limit_reached": "You've reached your daily withdrawal limit of {amount} {token}, please try again later.",
         "recipient": "{chain} 上的接受者",
         "withdraw": "提取"
       }
@@ -829,6 +830,8 @@
       "could_not_deposit_eth": "不能存入 ETH，请确认为此事务支付足够的 gas 费。",
       "deposit_approval_failed": "存入批准失败。",
       "withdraw_failed": "提取出错，请重试或联系客服。",
+      "withdraw_failed_total_limit_reached": "Total daily withdrawal limit has been reached, please try again tomorrow.",
+      "withdraw_failed_account_limit_reached": "Account daily withdrawal limit has been reached, please try again tomorrow.",
       "supplied_key_already_mapped": "提供的密钥已映射。",
       "unexpected_error_while_add_account": "添加账户映射时出现意外错误。",
       "balance_not_enough": "你的余额不足。请先存入一些。",

src/store/gateway/plasma.ts

@@ -334,7 +334,13 @@ export async function plasmaWithdraw(context: ActionContext, funds: Funds) {
       return
     }
     feedback.endTask()
-    feedback.showError(i18n.t("feedback_msg.error.withdraw_failed").toString())
+    if (error.message.includes("TG024")) {
+      feedback.showError(i18n.t("feedback_msg.error.withdraw_failed_total_limit_reached").toString())
+    } else if (error.message.includes("TG025")) {
+      feedback.showError(i18n.t("feedback_msg.error.withdraw_failed_account_limit_reached").toString())
+    } else {
+      feedback.showError(i18n.t("feedback_msg.error.withdraw_failed").toString())
+    }
     Sentry.withScope((scope) => {
       scope.setExtra("plasmaWithdraw", {
         withdraw: JSON.stringify({