Show estimated duration for new transactions

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>