dApp: Action details update (#792)

Closes: #791 ### Changes: - Removed _You will deposit/receive_ USD conversions - Removed _Amount to be deposited/Withdraw from pool_ entries - Made `AmountItem`'s component conversion optional - Added `Optional` generic type definition
thesis · Oct 29, 2024 · f05d840 · f05d840
2 parents e27b651 + c3521ce
commit f05d840
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 44 deletions.
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/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
@@ -39,7 +39,7 @@ 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/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>