diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
index fa3dd3878..ac51f54cd 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 (
-
+
)
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
index 9c17991d6..b457f1347 100644
--- 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 (
-
+
{featureFlags.GAMIFICATION_ENABLED && (
)}
-
-
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx
index 252239214..afab79189 100644
--- 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}
>
- Withdraw
+ Withdraw
)
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,
+ "to"
> &
Pick
@@ -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 (
-
+ {toProps ? (
+
+ ) : (
+
+ )}
)
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]
export type WithRequired = T & { [P in K]-?: T[P] }
+
+export type Optional = Pick, K> & Omit