diff --git a/src/components/earnings/RedeemHoloFuelCard.vue b/src/components/earnings/RedeemHoloFuelCard.vue index f9fb799..458e568 100644 --- a/src/components/earnings/RedeemHoloFuelCard.vue +++ b/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 { return } + if (Number(amount.value) > kMaximumRedeemableHoloFuel) { + return + } + step.value = 2 } else { isBusy.value = true diff --git a/src/components/earnings/RedeemHoloFuelFormStepOne.vue b/src/components/earnings/RedeemHoloFuelFormStepOne.vue index c07785c..a6b8d09 100644 --- a/src/components/earnings/RedeemHoloFuelFormStepOne.vue +++ b/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)) diff --git a/src/constants/ui.ts b/src/constants/ui.ts index ab64315..3c7c6ab 100644 --- a/src/constants/ui.ts +++ b/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', diff --git a/src/locales/en.ts b/src/locales/en.ts index e75233e..fca73ef 100644 --- a/src/locales/en.ts +++ b/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',