Merge branch 'main' into update-success-Modal

thesis · Oct 31, 2024 · 26b00b3 · 26b00b3
2 parents 38f31be + f05d840
commit 26b00b3
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 45 deletions.
diff --git a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx b/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>
+  )
+}
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
@@ -23,16 +23,6 @@ function StakeDetails({ currency }: { currency: CurrencyType }) {
 
   return (
     <List spacing={3} mt={10}>
-      <TransactionDetailsAmountItem
-        label="Amount to be deposited"
-        from={{
-          currency,
-          amount: details.amount,
-        }}
-        to={{
-          currency: "usd",
-        }}
-      />
       <FeesDetailsAmountItem
         label="Fees"
         // TODO: Add `Bitcoin Network fee` (funding transaction fee selected by
@@ -48,15 +38,13 @@ function StakeDetails({ currency }: { currency: CurrencyType }) {
           currency: "usd",
         }}
       />
+
       <TransactionDetailsAmountItem
-        label="Approximate staked tokens"
+        label="You will deposit"
         from={{
           currency,
           amount: details.estimatedAmount,
         }}
-        to={{
-          currency: "usd",
-        }}
       />
     </List>
   )

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/index.tsx b/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>
   )
 }

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
@@ -30,22 +30,11 @@ function UnstakeDetails({
   const { total, ...restFees } = details.transactionFee
 
   return (
-    <Flex flexDirection="column" gap={10} mt={4}>
+    <Flex flexDirection="column" gap={10} mt={10}>
       {featureFlags.GAMIFICATION_ENABLED && (
         <WithdrawWarning balance={balance} currency={currency} />
       )}
       <List spacing={3}>
-        <TransactionDetailsAmountItem
-          label="Withdraw from pool"
-          from={{
-            currency,
-            amount: details.amount,
-          }}
-          to={{
-            currency: "usd",
-          }}
-        />
-
         <FeesDetailsAmountItem
           label="Fees"
           // TODO: Add `Bitcoin Network fee` (funding transaction fee selected by
@@ -67,9 +56,6 @@ function UnstakeDetails({
             currency,
             amount: details.estimatedAmount,
           }}
-          to={{
-            currency: "usd",
-          }}
         />
       </List>
     </Flex>

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx b/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,
@@ -38,7 +39,8 @@ function UnstakeFormModal({
       defaultAmount={defaultAmount}
     >
       <UnstakeDetails balance={balance} currency="bitcoin" />
-      <FormSubmitButton mt={10}>Withdraw</FormSubmitButton>
+      <FormSubmitButton mt={8}>Withdraw</FormSubmitButton>
+      <ActionDurationEstimation type="withdraw" />
     </TokenAmountForm>
   )
 }

diff --git a/dapp/src/components/shared/TokenAmountForm/index.tsx b/dapp/src/components/shared/TokenAmountForm/index.tsx
@@ -36,7 +36,7 @@ const TokenAmountForm = withFormik<TokenAmountFormProps, TokenAmountFormValues>(
     handleSubmit: (values, { props }) => {
       props.onSubmitForm(values)
     },
-    validateOnBlur: false,
+    validateOnBlur: true,
     validateOnChange: false,
   },
 )(TokenAmountFormBase)

diff --git a/dapp/src/components/shared/TransactionDetails/AmountItem.tsx b/dapp/src/components/shared/TransactionDetails/AmountItem.tsx
@@ -1,10 +1,13 @@
 import React, { ComponentProps } from "react"
 import { Flex } from "@chakra-ui/react"
+import { Optional } from "#/types"
 import TransactionDetailsItem, { TransactionDetailsItemProps } from "."
 import { CurrencyBalanceWithConversion } from "../CurrencyBalanceWithConversion"
+import { CurrencyBalance } from "../CurrencyBalance"
 
-type TransactionDetailsAmountItemProps = ComponentProps<
-  typeof CurrencyBalanceWithConversion
+type TransactionDetailsAmountItemProps = Optional<
+  ComponentProps<typeof CurrencyBalanceWithConversion>,
+  "to"
 > &
   Pick<TransactionDetailsItemProps, "label">
 
@@ -13,21 +16,23 @@ function TransactionDetailsAmountItem({
   from,
   to,
 }: TransactionDetailsAmountItemProps) {
+  const fromProps: TransactionDetailsAmountItemProps["from"] = {
+    size: "md",
+    ...from,
+  }
+
+  const toProps: TransactionDetailsAmountItemProps["to"] = to
+    ? { size: "sm", fontWeight: "medium", color: "grey.500", ...to }
+    : undefined
+
   return (
     <TransactionDetailsItem label={label} alignItems="start">
       <Flex flexDirection="column" alignItems="end">
-        <CurrencyBalanceWithConversion
-          from={{
-            size: "md",
-            ...from,
-          }}
-          to={{
-            size: "sm",
-            fontWeight: "medium",
-            color: "grey.500",
-            ...to,
-          }}
-        />
+        {toProps ? (
+          <CurrencyBalanceWithConversion from={fromProps} to={toProps} />
+        ) : (
+          <CurrencyBalance {...fromProps} />
+        )}
       </Flex>
     </TransactionDetailsItem>
   )

diff --git a/dapp/src/types/core.ts b/dapp/src/types/core.ts
@@ -1,3 +1,5 @@
 export type Tuple<T> = [T, T]
 
 export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
+
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>