Show estimated duration for new transactions (#697)

Closes #684

This PR adds the estimated duration for new transactions. All
transactions will be displayed in the history table. However,
notifications will only show completed ones and the list of activity
notifications will be shown at the top.

#### What has been done:

- Displayed the estimated duration in the staking and unstaking tiles.
- Implemented the UI changes in the middle column components (pending
transactions, position, transactions history).
- Fixed activity sorting in the history table. -
362c27e
- Added custom styles for a symbol in the `CurrencyBalance` component.
-32fe952
- Added additional dots for the `CurrencyBalance` component. -
d62c97d

During the implementation of the UI changes for the middle column, the
padding was changed. This change also affected the pagination buttons
for the activity table. These components should be separate and should
not affect each other. In addition, it was noted that when we add some
new element under the `PaginationPage` or `Pagination` tag, the list of
activities will overlap it when we switch pages. For this purpose, the
`PaginationFooter` component was created as a temporary solution. We
should resolve this in a separate PR. Created an issue -
#705

### UI


<img width="500" alt="Screenshot 2024-08-14 at 12 13 43"
src="https://github.com/user-attachments/assets/95033693-1580-4ac8-a948-2976973e40cb">

<img width="500" alt="Screenshot 2024-08-14 at 13 51 24"
src="https://github.com/user-attachments/assets/339189b6-6271-4177-bebc-43e84105e2b8">


### Testing

Make sure we display the correct estimated duration:
- Staking
 - [x] < 0.1 BTC               ~1 hour
 - [x] >= 0.1 BTC  < 1 BTC     ~2 hours
 - [x] >= 1 BTC                ~3 hours
- Unstaking
 - [ ] We display 6 hours, regardless of the amount.

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

@@ -19,8 +19,7 @@ export function FeesTooltipItem({ label, amount, ...props }: FeesItemType) {
         size="sm"
         amount={amount}
         color="gold.300"
-        balanceFontWeight="semibold"
-        symbolFontWeight="semibold"
+        fontWeight="semibold"
         desiredDecimals={DESIRED_DECIMALS_FOR_FEE}
         {...props}
       />

dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx

@@ -3,8 +3,8 @@ import { List, ListItem, ListProps } from "@chakra-ui/react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
 import {
   useAppDispatch,
+  useLatestCompletedActivities,
   useIsFetchedWalletData,
-  useLatestActivities,
 } from "#/hooks"
 import { deleteLatestActivity } from "#/store/wallet"
 import ActivitiesListItem from "./ActivitiesListItem"
@@ -19,19 +19,19 @@ const listItemVariants: Variants = {
 
 function ActivitiesList(props: ListProps) {
   const dispatch = useAppDispatch()
-  const latestActivities = useLatestActivities()
+  const activities = useLatestCompletedActivities()
   const isFetchedWalletData = useIsFetchedWalletData()
 
   const handleItemDismiss = (activityId: string) => {
     dispatch(deleteLatestActivity(activityId))
   }
 
-  if (!isFetchedWalletData || latestActivities.length === 0) return null
+  if (!isFetchedWalletData || activities.length === 0) return null
 
   return (
     <MotionList pos="relative" w="full" {...props}>
       <AnimatePresence mode="popLayout">
-        {latestActivities.map(({ id, amount, status, type, txHash }) => (
+        {activities.map(({ id, amount, status, type, txHash }) => (
           <MotionListItem
             key={id}
             layout="position"

dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { ArrowUpRight, LoadingSpinnerSuccessIcon } from "#/assets/icons"
 import { Activity as ActivityType } from "#/types"
+import { convertActivityTypeToLabel } from "#/utils"
 import { Button, HStack, VStack, VisuallyHidden } from "@chakra-ui/react"
 import { CurrencyBalance } from "../CurrencyBalance"
 import BlockExplorerLink from "../BlockExplorerLink"
@@ -35,8 +36,8 @@ function ActivitiesListItem(props: ActivitiesListItemProps) {
         <AlertTitle justify="space-between" as={HStack}>
           <TextMd fontWeight="bold">
             {isCompleted
-              ? `${type === "withdraw" ? "Unstaking" : "Staking"} completed`
-              : `${type === "withdraw" ? "Unstaking" : "Staking"}...`}
+              ? `${convertActivityTypeToLabel(type)} completed`
+              : `${convertActivityTypeToLabel(type)}...`}
           </TextMd>
 
           <CurrencyBalance amount={amount} currency="bitcoin" />

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

@@ -24,9 +24,10 @@ export type CurrencyBalanceProps = {
     | "greater-balance-xxl"
     | "unstyled"
   >
-  balanceFontWeight?: string
-  symbolFontWeight?: string
   symbolPosition?: "prefix" | "suffix"
+  withDots?: boolean
+  balanceTextProps?: TextProps
+  symbolTextProps?: TextProps
 } & TextProps
 
 export function CurrencyBalance({
@@ -36,10 +37,11 @@ export function CurrencyBalance({
   desiredDecimals: customDesiredDecimals,
   size,
   variant,
-  balanceFontWeight = "bold",
-  symbolFontWeight = "bold",
   symbolPosition = "suffix",
+  withDots = false,
   as,
+  balanceTextProps,
+  symbolTextProps,
   ...textProps
 }: CurrencyBalanceProps) {
   const styles = useMultiStyleConfig("CurrencyBalance", {
@@ -67,18 +69,14 @@ export function CurrencyBalance({
     <Box as={as} __css={styles.container}>
       <Box
         as="span"
-        fontWeight={balanceFontWeight}
         __css={styles.balance}
         {...textProps}
+        {...balanceTextProps}
       >
         {balance}
+        {withDots && ".."}
       </Box>
-      <Box
-        as="span"
-        fontWeight={symbolFontWeight}
-        __css={styles.symbol}
-        {...textProps}
-      >
+      <Box as="span" __css={styles.symbol} {...textProps} {...symbolTextProps}>
         {symbol}
       </Box>
     </Box>

dapp/src/components/shared/Pagination/Pagination.tsx

@@ -33,7 +33,7 @@ function Pagination<T>(props: PaginationProps<T>) {
 
   return (
     <PaginationContext.Provider value={contextValue}>
-      <VStack spacing={6} align="stretch" w="full" {...restProps}>
+      <VStack align="stretch" w="full" {...restProps}>
         {children}
       </VStack>
     </PaginationContext.Provider>

dapp/src/components/shared/Pagination/PaginationFooter.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { HStack, StackProps } from "@chakra-ui/react"
+
+const TOP_SPACE = 6
+
+type PaginationFooterProps = StackProps & { containerPadding: number }
+
+function PaginationFooter(props: PaginationFooterProps) {
+  const { children, containerPadding, ...restProps } = props
+
+  return (
+    <HStack
+      mx={-containerPadding}
+      mb={-containerPadding}
+      px={containerPadding}
+      pb={containerPadding}
+      mt={-TOP_SPACE}
+      pt={TOP_SPACE}
+      bgGradient="linear(to-b, transparent, gold.200 20%)"
+      zIndex={2}
+      {...restProps}
+    >
+      {children}
+    </HStack>
+  )
+}
+
+export default PaginationFooter

dapp/src/components/shared/Pagination/index.ts

@@ -2,3 +2,4 @@ export { default as Pagination } from "./Pagination"
 export { default as PaginationStatus } from "./PaginationStatus"
 export { default as PaginationPage } from "./PaginationPage"
 export { default as PaginationButton } from "./PaginationButton"
+export { default as PaginationFooter } from "./PaginationFooter"

dapp/src/hooks/store/index.ts

@@ -6,9 +6,9 @@ export * from "./useActionFlowStatus"
 export * from "./useActionFlowActiveStep"
 export * from "./useActionFlowTokenAmount"
 export * from "./useActionFlowTxHash"
-export * from "./useCompletedActivities"
-export * from "./useLatestActivities"
 export * from "./useAllActivitiesCount"
 export * from "./useActionFlowPause"
 export * from "./useIsSignedMessage"
 export { default as useHasFetchedActivities } from "./useHasFetchedActivities"
+export { default as useActivities } from "./useActivities"
+export { default as useLatestCompletedActivities } from "./useLatestCompletedActivities"

dapp/src/hooks/store/useActivities.ts

@@ -0,0 +1,6 @@
+import { selectActivities } from "#/store/wallet"
+import { useAppSelector } from "./useAppSelector"
+
+export default function useActivities() {
+  return useAppSelector(selectActivities)
+}

dapp/src/hooks/store/useLatestCompletedActivities.ts

@@ -0,0 +1,6 @@
+import { selectLatestCompletedActivities } from "#/store/wallet"
+import { useAppSelector } from "./useAppSelector"
+
+export default function useLatestCompletedActivities() {
+  return useAppSelector(selectLatestCompletedActivities)
+}

dapp/src/pages/DashboardPage/DashboardCard.tsx

@@ -1,117 +1,15 @@
 import React from "react"
-import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
-import { TextMd } from "#/components/shared/Typography"
-import { useBitcoinPosition, useTransactionModal } from "#/hooks"
-import { ACTION_FLOW_TYPES } from "#/types"
-import {
-  Button,
-  ButtonProps,
-  Card,
-  CardBody,
-  CardHeader,
-  CardProps,
-  HStack,
-  // Tag,
-  VStack,
-} from "@chakra-ui/react"
+import { Card, CardBody, CardProps, VStack } from "@chakra-ui/react"
 import { ActivitiesList } from "#/components/shared/ActivitiesList"
-import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
-import { featureFlags } from "#/constants"
-import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import TransactionHistory from "./TransactionHistory"
+import PositionDetails from "./PositionDetails"
 
-const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
-
-const buttonStyles: ButtonProps = {
-  size: "lg",
-  flex: 1,
-  maxW: "12.5rem", // 200px
-  fontWeight: "bold",
-  lineHeight: 6,
-  px: 7,
-  h: "auto",
-}
-
-type DashboardCardProps = CardProps
-
-export default function DashboardCard(props: DashboardCardProps) {
-  const { data } = useBitcoinPosition()
-  const bitcoinAmount = data?.estimatedBitcoinBalance ?? 0n
-
-  const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
-  const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
-
+export default function DashboardCard(props: CardProps) {
   return (
-    <Card px={5} py={10} gap={10} overflow="hidden" {...props}>
-      <CardHeader p={0} textAlign="center">
-        <TextMd fontWeight="bold">
-          My position
-          {/* TODO: Uncomment when position will be implemented */}
-          {/* {positionPercentage && (
-            <Tag
-              px={3}
-              py={1}
-              ml={2}
-              borderWidth={0}
-              color="gold.100"
-              bg="gold.700"
-              fontWeight="bold"
-              lineHeight={5}
-              verticalAlign="baseline"
-            >
-              Top {positionPercentage}%
-            </Tag>
-          )} */}
-        </TextMd>
-      </CardHeader>
-      <CardBody as={VStack} p={0} spacing={10}>
-        <VStack justify="center" spacing={6}>
-          <UserDataSkeleton>
-            <VStack justify="center" spacing={0}>
-              <CurrencyBalanceWithConversion
-                from={{
-                  amount: bitcoinAmount,
-                  currency: "bitcoin",
-                  fontSize: "6xl",
-                  lineHeight: 1.2,
-                  letterSpacing: "-0.075rem", // -1.2px
-                  fontWeight: "bold",
-                  color: "grey.700",
-                }}
-                to={{
-                  currency: "usd",
-                  shouldBeFormatted: false,
-                  color: "grey.500",
-                  fontWeight: "medium",
-                }}
-              />
-            </VStack>
-          </UserDataSkeleton>
-        </VStack>
-
-        <HStack w="full" justify="center" spacing={2}>
-          <UserDataSkeleton>
-            <Button {...buttonStyles} onClick={openDepositModal}>
-              Deposit more
-            </Button>
-          </UserDataSkeleton>
-          <UserDataSkeleton>
-            <ArrivingSoonTooltip
-              shouldDisplayTooltip={!isWithdrawalFlowEnabled}
-            >
-              <Button
-                variant="outline"
-                {...buttonStyles}
-                onClick={openWithdrawModal}
-                isDisabled={!isWithdrawalFlowEnabled}
-              >
-                Withdraw
-              </Button>
-            </ArrivingSoonTooltip>
-          </UserDataSkeleton>
-        </HStack>
-
+    <Card p="dashboard_card_padding" overflow="hidden" {...props}>
+      <CardBody as={VStack} spacing={10} p={0}>
         <ActivitiesList />
+        <PositionDetails />
         <TransactionHistory />
       </CardBody>
     </Card>