dApp: Action duration estimation & validation

dapp/src/components/TransactionModal/ActionDurationEstimation.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { ActivityType } from "#/types"
+import { getEstimatedDuration } from "#/utils"
+import { useFormField } from "#/hooks"
+import { TextMd } from "../shared/Typography"
+import { TOKEN_AMOUNT_FIELD_NAME } from "../shared/TokenAmountForm/TokenAmountFormBase"
+
+export default function ActionDurationEstimation({
+  type,
+}: {
+  type: ActivityType
+}) {
+  const { value: amount = 0n } = useFormField<bigint | undefined>(
+    TOKEN_AMOUNT_FIELD_NAME,
+  )
+
+  return (
+    <TextMd mt={4} color="grey.400">
+      Estimated duration&nbsp;
+      <TextMd as="span" color="grey.500">
+        ~ {getEstimatedDuration(amount, type)}
+      </TextMd>
+    </TextMd>
+  )
+}

dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/index.tsx

@@ -8,6 +8,7 @@ import { fixedPointNumberToString, getCurrencyByType } from "#/utils"
 import { featureFlags } from "#/constants"
 import StakeDetails from "./StakeDetails"
 import AcrePointsRewardEstimation from "./AcrePointsRewardEstimation"
+import ActionDurationEstimation from "../../ActionDurationEstimation"
 
 function StakeFormModal({
   onSubmitForm,
@@ -35,6 +36,7 @@ function StakeFormModal({
       )}
       <StakeDetails currency="bitcoin" />
       <FormSubmitButton mt={10}>Deposit</FormSubmitButton>
+      <ActionDurationEstimation type="deposit" />
     </TokenAmountForm>
   )
 }

dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "#/hooks"
 import { fixedPointNumberToString, getCurrencyByType } from "#/utils"
 import UnstakeDetails from "./UnstakeDetails"
+import ActionDurationEstimation from "../../ActionDurationEstimation"
 
 function UnstakeFormModal({
   onSubmitForm,
@@ -39,6 +40,7 @@ function UnstakeFormModal({
     >
       <UnstakeDetails balance={balance} currency="bitcoin" />
       <FormSubmitButton mt={10}>Withdraw</FormSubmitButton>
+      <ActionDurationEstimation type="withdraw" />
     </TokenAmountForm>
   )
 }

dapp/src/components/shared/TokenAmountForm/index.tsx

@@ -37,7 +37,7 @@ const TokenAmountForm = withFormik<TokenAmountFormProps, TokenAmountFormValues>(
       props.onSubmitForm(values)
     },
     validateOnBlur: false,
-    validateOnChange: false,
+    validateOnChange: true,
   },
 )(TokenAmountFormBase)