Fees popover in transaction modal

thesis · Mar 17, 2024 · 6f64499 · 6f64499
1 parent 5dcfc76
commit 6f64499
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 9 deletions.
diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles/index.tsx
@@ -41,6 +41,9 @@ export default function GlobalStyles() {
           font-weight: 900;
           font-style: normal;
         }
+        .chakra-popover__content:focus-visible {
+          box-shadow: none !important;
+        }
       `}
     />
   )

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { List } from "@chakra-ui/react"
 import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem"
 import { useTokenAmountFormValue } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { FeesPopover } from "#/components/TransactionModal/FeesPopover"
 import { useTransactionDetails } from "#/hooks"
 import { CurrencyType } from "#/types"
 
@@ -34,7 +35,9 @@ function StakeDetails({
         }}
       />
       <TransactionDetailsAmountItem
-        label="Protocol fee (0.01%)"
+        label="Fees"
+        sublabel="How are fees calculated?"
+        popover={<FeesPopover />}
         from={{
           currency,
           amount: details?.protocolFee,

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { List } from "@chakra-ui/react"
 import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem"
 import { useTokenAmountFormValue } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { FeesPopover } from "#/components/TransactionModal/FeesPopover"
 import { useTransactionDetails } from "#/hooks"
 import { CurrencyType } from "#/types"
 
@@ -22,7 +23,9 @@ function UnstakeDetails({ currency }: { currency: CurrencyType }) {
         }}
       />
       <TransactionDetailsAmountItem
-        label="Protocol fee (0.01%)"
+        label="Fees"
+        sublabel="How are fees calculated?"
+        popover={<FeesPopover />}
         from={{
           currency,
           amount: details?.protocolFee,

diff --git a/dapp/src/components/TransactionModal/FeesPopover/FeesPopover.tsx b/dapp/src/components/TransactionModal/FeesPopover/FeesPopover.tsx
@@ -0,0 +1,54 @@
+import React from "react"
+import { Info } from "#/assets/icons"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+  Icon,
+  VStack,
+} from "@chakra-ui/react"
+import { FeesItemType, FeesPopoverItem } from "./FeesPopoverItem"
+
+const fees: Array<FeesItemType> = [
+  {
+    label: "Acre protocol fees",
+    amount: "100000",
+    currency: "bitcoin",
+  },
+  {
+    label: "tBTC bridge fees",
+    amount: "240000",
+    currency: "bitcoin",
+  },
+  {
+    label: "Bitcoin network fees",
+    amount: "200000",
+    currency: "bitcoin",
+  },
+]
+
+export function FeesPopover() {
+  return (
+    <Popover isLazy placement="right">
+      <PopoverTrigger>
+        <Icon as={Info} ml={2} boxSize={5} cursor="pointer" color="grey.400" />
+      </PopoverTrigger>
+      <PopoverContent color="white" bg="grey.700" p={3} borderRadius="xl">
+        <PopoverArrow bg="grey.700" />
+        <PopoverBody>
+          <VStack gap={0.5}>
+            {fees.map((fee) => (
+              <FeesPopoverItem
+                label={fee.label}
+                amount={fee.amount}
+                currency={fee.currency}
+              />
+            ))}
+          </VStack>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/dapp/src/components/TransactionModal/FeesPopover/FeesPopoverItem.tsx b/dapp/src/components/TransactionModal/FeesPopover/FeesPopoverItem.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import { HStack } 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 FeesPopoverItem({ label, amount, ...props }: FeesItemType) {
+  return (
+    <HStack w="100%" justifyContent="space-between">
+      <TextSm color="white">{label}</TextSm>
+      <CurrencyBalance
+        size="sm"
+        amount={amount}
+        color="gold.400"
+        balanceFontWeight="semibold"
+        symbolFontWeight="semibold"
+        {...props}
+      />
+    </HStack>
+  )
+}
diff --git a/dapp/src/components/TransactionModal/FeesPopover/index.ts b/dapp/src/components/TransactionModal/FeesPopover/index.ts
@@ -0,0 +1 @@
+export * from "./FeesPopover"
diff --git a/dapp/src/components/shared/TransactionDetails/AmountItem.tsx b/dapp/src/components/shared/TransactionDetails/AmountItem.tsx
@@ -6,15 +6,22 @@ import { CurrencyBalanceWithConversion } from "../CurrencyBalanceWithConversion"
 type TransactionDetailsAmountItemProps = ComponentProps<
   typeof CurrencyBalanceWithConversion
 > &
-  Pick<TransactionDetailsItemProps, "label">
+  Pick<TransactionDetailsItemProps, "label" | "sublabel" | "popover">
 
 function TransactionDetailsAmountItem({
   label,
+  sublabel,
+  popover,
   from,
   to,
 }: TransactionDetailsAmountItemProps) {
   return (
-    <TransactionDetailsItem label={label} alignItems="start">
+    <TransactionDetailsItem
+      label={label}
+      sublabel={sublabel}
+      popover={popover}
+      alignItems="start"
+    >
       <Flex flexDirection="column" alignItems="end">
         <CurrencyBalanceWithConversion
           from={{

diff --git a/dapp/src/components/shared/TransactionDetails/index.tsx b/dapp/src/components/shared/TransactionDetails/index.tsx
@@ -1,15 +1,19 @@
 import React from "react"
-import { ListItem, ListItemProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { ListItem, ListItemProps, VStack } from "@chakra-ui/react"
+import { TextMd, TextSm } from "../Typography"
 
 export type TransactionDetailsItemProps = {
   label: string
+  sublabel?: string
   value?: string
+  popover?: React.ReactElement
   children?: React.ReactNode
 } & ListItemProps
 
 function TransactionDetailsItem({
   label,
+  sublabel,
+  popover,
   value,
   children,
   ...listItemProps
@@ -21,9 +25,13 @@ function TransactionDetailsItem({
       alignItems="center"
       {...listItemProps}
     >
-      <TextMd fontWeight="semibold" color="grey.700">
-        {label}
-      </TextMd>
+      <VStack alignItems="start" gap={0}>
+        <TextMd fontWeight="semibold" color="grey.700">
+          {label}
+          {popover}
+        </TextMd>
+        {sublabel && <TextSm color="grey.400">{sublabel}</TextSm>}
+      </VStack>
       {value ? <TextMd color="grey.700">{value}</TextMd> : children}
     </ListItem>
   )