From 2c0eb7eed2e61d5f3d1c917c7eac4b2616755879 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 28 Oct 2024 16:21:24 +0100
Subject: [PATCH 1/3] Update action details

---
 .../StakeFormModal/StakeDetails.tsx           | 18 ++--------
 .../UnstakeFormModal/UnstakeDetails.tsx       | 14 --------
 .../shared/TransactionDetails/AmountItem.tsx  | 33 +++++++++++--------
 dapp/src/types/core.ts                        |  2 ++
 4 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
index fa3dd3878..9a980107f 100644
--- 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,14 +38,12 @@ function StakeDetails({ currency }: { currency: CurrencyType }) {
           currency: "usd",
         }}
       />
+
       <TransactionDetailsAmountItem
-        label="Approximate staked tokens"
+        label="You will deposit"
         from={{
           currency,
-          amount: details.estimatedAmount,
-        }}
-        to={{
-          currency: "usd",
+          amount: details.amount,
         }}
       />
     </List>
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
index 9c17991d6..dcbe16876 100644
--- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
+++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
@@ -35,17 +35,6 @@ function UnstakeDetails({
         <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/shared/TransactionDetails/AmountItem.tsx b/dapp/src/components/shared/TransactionDetails/AmountItem.tsx
index cf0c29045..c40c35c59 100644
--- 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
index 735e7f372..2fce09a01 100644
--- 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>

From d6fe64c269023c4ebb4ae861b192c47465aaf145 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 28 Oct 2024 16:29:32 +0100
Subject: [PATCH 2/3] Update unstake form spacing

---
 .../ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx     | 2 +-
 .../ActiveUnstakingStep/UnstakeFormModal/index.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
index dcbe16876..b457f1347 100644
--- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
+++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
@@ -30,7 +30,7 @@ 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} />
       )}
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx
index 6aad91f7f..b58d97800 100644
--- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx
+++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx
@@ -38,7 +38,7 @@ function UnstakeFormModal({
       }
     >
       <UnstakeDetails balance={balance} currency="bitcoin" />
-      <FormSubmitButton mt={10}>Withdraw</FormSubmitButton>
+      <FormSubmitButton mt={8}>Withdraw</FormSubmitButton>
     </TokenAmountForm>
   )
 }

From 11bc83b727d8272bb8a54bf4dfad4543346a03a5 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Tue, 29 Oct 2024 13:16:10 +0100
Subject: [PATCH 3/3] Update displayed value

---
 .../ActiveStakingStep/StakeFormModal/StakeDetails.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
index 9a980107f..ac51f54cd 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
@@ -43,7 +43,7 @@ function StakeDetails({ currency }: { currency: CurrencyType }) {
         label="You will deposit"
         from={{
           currency,
-          amount: details.amount,
+          amount: details.estimatedAmount,
         }}
       />
     </List>