Fees popover in transaction modal

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

@@ -1,9 +1,23 @@
 import React from "react"
 import { List } from "@chakra-ui/react"
 import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem"
+import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesItem"
 import { useTokenAmountFormValue } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { FeesTooltip } from "#/components/TransactionModal/FeesTooltip"
 import { useTransactionDetails } from "#/hooks"
-import { CurrencyType } from "#/types"
+import { CurrencyType, DepositFee } from "#/types"
+import { useTransactionFee } from "#/hooks/useTransactionFee"
+
+const mapDepositFeeToLabel = (feeId: keyof DepositFee) => {
+  switch (feeId) {
+    case "acre":
+      return "Acre protocol fees"
+    case "tbtc":
+      return "tBTC bridge fees"
+    default:
+      return ""
+  }
+}
 
 function StakeDetails({
   currency,
@@ -20,6 +34,7 @@ function StakeDetails({
   // Let's not calculate the details of the transaction when the value is not valid.
   const amount = !isMaximumValueExceeded && isMinimumValueFulfilled ? value : 0n
   const details = useTransactionDetails(amount)
+  const { total, ...restFees } = useTransactionFee(amount)
 
   return (
     <List spacing={3} mt={10}>
@@ -33,11 +48,17 @@ function StakeDetails({
           currency: "usd",
         }}
       />
-      <TransactionDetailsAmountItem
-        label="Protocol fee (0.01%)"
+      <FeesDetailsAmountItem
+        label="Fees"
+        sublabel="How are fees calculated?"
+        // TODO: Add `Bitcoin Network fee` (funding transaction fee selected by
+        // the user) and figure out how to estimate this fee.
+        tooltip={
+          <FeesTooltip fees={restFees} mapFeeToLabel={mapDepositFeeToLabel} />
+        }
         from={{
           currency,
-          amount: details?.protocolFee,
+          amount: total,
         }}
         to={{
           currency: "usd",

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

@@ -21,16 +21,19 @@ function UnstakeDetails({ currency }: { currency: CurrencyType }) {
           currency: "usd",
         }}
       />
-      <TransactionDetailsAmountItem
-        label="Protocol fee (0.01%)"
+      {/* TODO: Uncomment when unstaking fees are ready.  */}
+      {/* <FeesDetailsAmountItem
+        label="Fees"
+        sublabel="How are fees calculated?"
+        tooltip={<FeesTooltip fees={{}} />}
         from={{
           currency,
-          amount: details?.protocolFee,
+          amount: transactionFee.total,
         }}
         to={{
           currency: "usd",
         }}
-      />
+      /> */}
       <TransactionDetailsAmountItem
         label="Approximately unstaked tokens"
         from={{

dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { Info } from "#/assets/icons"
+import { Icon, Tooltip, List } from "@chakra-ui/react"
+import { FeesTooltipItem } from "./FeesTooltipItem"
+
+type Fee = { [key: string]: bigint }
+
+type Props<F extends Fee> = {
+  fees: F
+  mapFeeToLabel: (feeName: keyof F) => string
+}
+
+export function FeesTooltip<F extends Fee>({ fees, mapFeeToLabel }: Props<F>) {
+  return (
+    <Tooltip
+      placement="right"
+      label={
+        <List spacing={0.5} minW={60}>
+          {Object.entries(fees).map(([feeKey, feeValue]) => (
+            <FeesTooltipItem
+              key={feeKey}
+              label={mapFeeToLabel(feeKey)}
+              amount={feeValue}
+              currency="bitcoin"
+            />
+          ))}
+        </List>
+      }
+    >
+      <Icon as={Info} ml={2} boxSize={4} cursor="pointer" color="grey.400" />
+    </Tooltip>
+  )
+}

dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { ListItem } from "@chakra-ui/react"
+import {
+  CurrencyBalance,
+  CurrencyBalanceProps,
+} from "#/components/shared/CurrencyBalance"
+import { TextSm } from "#/components/shared/Typography"
+
+export type FeesItemType = CurrencyBalanceProps & {
+  label: string
+}
+
+export function FeesTooltipItem({ label, amount, ...props }: FeesItemType) {
+  return (
+    <ListItem display="flex" justifyContent="space-between">
+      <TextSm color="white">{label}</TextSm>
+      <CurrencyBalance
+        size="sm"
+        amount={amount}
+        color="gold.300"
+        balanceFontWeight="semibold"
+        symbolFontWeight="semibold"
+        {...props}
+      />
+    </ListItem>
+  )
+}

dapp/src/components/TransactionModal/FeesTooltip/index.ts

@@ -0,0 +1 @@
+export * from "./FeesTooltip"

dapp/src/components/shared/FeesDetails/FeesItem.tsx

@@ -0,0 +1,43 @@
+import React, { ComponentProps } from "react"
+import { Flex } from "@chakra-ui/react"
+import FeesDetailsItem, { FeesDetailsItemProps } from "."
+import { CurrencyBalanceWithConversion } from "../CurrencyBalanceWithConversion"
+
+type FeesDetailsItemAmountItemProps = ComponentProps<
+  typeof CurrencyBalanceWithConversion
+> &
+  Pick<FeesDetailsItemProps, "label" | "sublabel" | "tooltip">
+
+function FeesDetailsAmountItem({
+  label,
+  sublabel,
+  tooltip,
+  from,
+  to,
+}: FeesDetailsItemAmountItemProps) {
+  return (
+    <FeesDetailsItem
+      label={label}
+      sublabel={sublabel}
+      tooltip={tooltip}
+      alignItems="start"
+    >
+      <Flex flexDirection="column" alignItems="end">
+        <CurrencyBalanceWithConversion
+          from={{
+            size: "md",
+            ...from,
+          }}
+          to={{
+            size: "sm",
+            fontWeight: "medium",
+            color: "grey.500",
+            ...to,
+          }}
+        />
+      </Flex>
+    </FeesDetailsItem>
+  )
+}
+
+export default FeesDetailsAmountItem

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

@@ -0,0 +1,45 @@
+import React from "react"
+import { ListItem, ListItemProps, VStack } from "@chakra-ui/react"
+import { TextMd, TextSm } from "../Typography"
+
+export type FeesDetailsItemProps = {
+  label: string
+  sublabel: string
+  value?: string
+  tooltip: React.ReactElement
+  children?: React.ReactNode
+} & ListItemProps
+
+function FeesDetailsItem({
+  label,
+  sublabel,
+  tooltip,
+  value,
+  children,
+  ...listItemProps
+}: FeesDetailsItemProps) {
+  return (
+    <ListItem
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      {...listItemProps}
+    >
+      <VStack alignItems="start" gap={0}>
+        <TextMd
+          display="flex"
+          alignItems="center"
+          fontWeight="semibold"
+          color="grey.700"
+        >
+          {label}
+          {tooltip}
+        </TextMd>
+        {sublabel && <TextSm color="grey.400">{sublabel}</TextSm>}
+      </VStack>
+      {value ? <TextMd color="grey.700">{value}</TextMd> : children}
+    </ListItem>
+  )
+}
+
+export default FeesDetailsItem

dapp/src/hooks/index.ts

@@ -23,3 +23,4 @@ export * from "./useTimeout"
 export * from "./useCountdown"
 export * from "./useActivities"
 export * from "./useSize"
+export * from "./useTransactionFee"

dapp/src/hooks/useTransactionFee.ts

@@ -0,0 +1,33 @@
+import { useAcreContext } from "#/acre-react/hooks"
+import { logPromiseFailure } from "#/utils"
+import { useEffect, useState } from "react"
+import { DepositFee } from "#/types"
+import { useAppDispatch } from "./store"
+
+const initialDepositFee = {
+  tbtc: 0n,
+  acre: 0n,
+  total: 0n,
+}
+
+export function useTransactionFee(amount?: bigint) {
+  const [depositFee, setDepositFee] = useState<DepositFee>(initialDepositFee)
+  const { acre } = useAcreContext()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (!amount) {
+      setDepositFee(initialDepositFee)
+    } else {
+      const getEstimatedDepositFee = async () => {
+        if (!acre) return
+        const fee = await acre.staking.estimateDepositFee(amount)
+
+        setDepositFee(fee)
+      }
+      logPromiseFailure(getEstimatedDepositFee())
+    }
+  }, [acre, dispatch, amount])
+
+  return depositFee
+}

dapp/src/types/fee.ts

@@ -0,0 +1,5 @@
+export type DepositFee = {
+  tbtc: bigint
+  acre: bigint
+  total: bigint
+}

dapp/src/types/index.ts

@@ -13,3 +13,4 @@ export * from "./coingecko"
 export * from "./time"
 export * from "./size"
 export * from "./toast"
+export * from "./fee"