Merge pull request #111 from Holo-Host/feature/add-minimum-redeemable…

…-holofuel-message

Feat(redeem-holofuel): add minimum redeemable amount error

package.json

@@ -1,6 +1,6 @@
 {
   "name": "host-console",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "private": true,
   "homepage": "https://holo-host.github.io/host-console-ui/",
   "scripts": {

src/components/earnings/RedeemHoloFuelCard.vue

@@ -32,6 +32,9 @@ const partialRedemptionTermsAccepted = ref(false)
 const step = ref(1)
 const isBusy = ref(false)
 const isStepOneValid = ref(false)
+const wasStepOneSubmitted = ref(false)
+
+const kMinimumRedeemableHoloFuel = 10
 
 const canSubmit = computed((): boolean => {
   if (step.value === 1) {
@@ -62,6 +65,12 @@ interface StepTwoProps {
 
 async function handleSubmit(): Promise<void> {
   if (step.value === 1) {
+    wasStepOneSubmitted.value = true
+
+    if (Number(amount.value) < kMinimumRedeemableHoloFuel) {
+      return
+    }
+
     step.value = 2
   } else {
     isBusy.value = true
@@ -128,6 +137,7 @@ function updateData(updateProps: StepOneProps & StepTwoProps): void {
           :redeemable-amount="redeemableHoloFuel"
           :amount="amount"
           :hot-address="hotAddress"
+          :was-submitted="wasStepOneSubmitted"
           @update="updateData"
           @update:is-valid="isStepOneValid = $event"
         />

src/components/earnings/RedeemHoloFuelFormStepOne.vue

@@ -8,15 +8,31 @@ const props = defineProps<{
   redeemableAmount: string
   amount: string
   hotAddress: string
+  wasSubmitted: boolean
 }>()
 
 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 isAmountValid = computed(() => Number(amount.value) <= Number(props.redeemableAmount))
+const isAmountValid = computed(
+  () =>
+    (!props.wasSubmitted || Number(amount.value) >= kMinimumRedeemableHoloFuel) &&
+    Number(amount.value) <= Number(props.redeemableAmount)
+)
+
+const amountErrorMessage = computed(() => {
+  if (Number(amount.value) >= Number(props.redeemableAmount)) {
+    return 'redemption.redeem_holofuel.amount_input_error'
+  }
+
+  return 'redemption.redeem_holofuel.amount_input_error_minimum_value'
+})
+
 const isHotAddressValid = computed(() => /^0x[a-fA-F0-9]{40}$/.test(hotAddress.value))
 
 const canSubmit = computed(
@@ -67,7 +83,7 @@ function activateHotAddressValidation(): void {
           :decimal-places="18"
           :is-valid="isAmountValid"
           has-errors
-          :message="isAmountValid ? '' : $t('redemption.redeem_holofuel.amount_input_error')"
+          :message="isAmountValid ? '' : $t(amountErrorMessage)"
           :tip="$t('redemption.redeem_holofuel.amount_input_tip')"
           name="amount"
           :input-type="EInputType.number"

src/locales/en.ts

@@ -139,6 +139,7 @@ export default {
       amount_input_label: 'Redemption Amount',
       amount_input_placeholder: 'Enter HF amount',
       amount_input_error: 'Amount exceeds redeemable balance.',
+      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',
       errors: {