Merge pull request #155 from Holo-Host/feature/redemption-limit

Feature/implement maximum HF redemption limit

src/components/earnings/RedeemHoloFuelCard.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import RedeemHoloFuelFormStepOne from './RedeemHoloFuelFormStepOne.vue'
 import RedeemHoloFuelFormStepTwo from './RedeemHoloFuelFormStepTwo.vue'
+import { kMinimumRedeemableHoloFuel, kMaximumRedeemableHoloFuel } from '@/constants/ui'
 import { RedemptionTransaction, useHposInterface } from '@/interfaces/HposInterface'
 import { kRoutes } from '@/router'
 import { useDashboardStore } from '@/store/dashboard'
@@ -34,8 +35,6 @@ const isBusy = ref(false)
 const isStepOneValid = ref(false)
 const wasStepOneSubmitted = ref(false)
 
-const kMinimumRedeemableHoloFuel = 10
-
 const canSubmit = computed((): boolean => {
   if (step.value === 1) {
     return isStepOneValid.value
@@ -71,6 +70,10 @@ async function handleSubmit(): Promise<void> {
       return
     }
 
+    if (Number(amount.value) > kMaximumRedeemableHoloFuel) {
+      return
+    }
+
     step.value = 2
   } else {
     isBusy.value = true

src/components/earnings/RedeemHoloFuelFormStepOne.vue

@@ -3,6 +3,7 @@ import BaseInput from '@uicommon/components/BaseInput.vue'
 import { EInputType } from '@uicommon/types/ui'
 import { formatCurrency } from '@uicommon/utils/numbers'
 import { ref, computed, watch } from 'vue'
+import { kMinimumRedeemableHoloFuel, kMaximumRedeemableHoloFuel } from '@/constants/ui'
 
 const props = defineProps<{
   redeemableAmount: string
@@ -13,24 +14,36 @@ const props = defineProps<{
 
 const emit = defineEmits(['update', 'update:is-valid'])
 
-const kMinimumRedeemableHoloFuel = 10
-
 const amount = ref(`${props.amount}` || '')
 const hotAddress = ref(`${props.hotAddress}` || '')
 const hotAddressValidationIsActive = ref(false)
 
+const amountIsWithinAllowedRange = computed(
+  () =>
+    Number(amount.value) >= kMinimumRedeemableHoloFuel &&
+    Number(amount.value) <= kMaximumRedeemableHoloFuel
+)
+
 const isAmountValid = computed(
   () =>
-    (!props.wasSubmitted || Number(amount.value) >= kMinimumRedeemableHoloFuel) &&
+    (!props.wasSubmitted || amountIsWithinAllowedRange.value) &&
     Number(amount.value) <= Number(props.redeemableAmount)
 )
 
 const amountErrorMessage = computed(() => {
-  if (Number(amount.value) >= Number(props.redeemableAmount)) {
+  if (Number(amount.value) > Number(props.redeemableAmount)) {
     return 'redemption.redeem_holofuel.amount_input_error'
   }
 
-  return 'redemption.redeem_holofuel.amount_input_error_minimum_value'
+  if (Number(amount.value) < kMinimumRedeemableHoloFuel) {
+    return 'redemption.redeem_holofuel.amount_input_error_minimum_value'
+  }
+
+  if (Number(amount.value) > kMaximumRedeemableHoloFuel) {
+    return 'redemption.redeem_holofuel.amount_input_error_maximum_value'
+  }
+
+  return ''
 })
 
 const isHotAddressValid = computed(() => /^0x[a-fA-F0-9]{40}$/.test(hotAddress.value))

src/constants/ui.ts

@@ -1,6 +1,9 @@
 import type { MappedHApp } from '@/types/types'
 import { Error } from '@/types/types'
 
+export const kMinimumRedeemableHoloFuel = 10
+export const kMaximumRedeemableHoloFuel = 1000
+
 export const kSortOptions = {
   alphabetical: {
     label: 'Alphabetical',

src/locales/en.ts

@@ -263,6 +263,7 @@ export default {
       amount_input_label: 'Redemption Amount',
       amount_input_placeholder: 'Enter HF amount',
       amount_input_error: 'Amount exceeds redeemable balance.',
+      amount_input_error_maximum_value: 'Maximum redeemable amount is 1000 HF',
       amount_input_error_minimum_value: 'Minimum redeemable amount is 10 HF',
       amount_input_tip: '*Note: HoloFuel and HOT are currently 1:1',
       confirm_and_redeem: 'Confirm & Redeem',