From 74512e4f608bb825e180c73aa259ac352b32756d Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 9 Aug 2024 11:20:29 +0200
Subject: [PATCH 01/18] Show estimated duration for pending transaction in
 table

---
 dapp/src/hooks/store/index.ts                 |  1 +
 dapp/src/hooks/store/useActivities.ts         |  6 ++
 .../TransactionHistory/TransactionTable.tsx   | 78 ++++++++++++++-----
 .../TransactionHistory/index.tsx              |  6 +-
 dapp/src/store/wallet/walletSelector.ts       |  5 ++
 dapp/src/theme/Tag.ts                         |  3 +-
 dapp/src/utils/activities.ts                  |  2 +-
 dapp/src/utils/index.ts                       |  1 +
 dapp/src/utils/staking.ts                     | 26 +++++++
 9 files changed, 105 insertions(+), 23 deletions(-)
 create mode 100644 dapp/src/hooks/store/useActivities.ts
 create mode 100644 dapp/src/utils/staking.ts

diff --git a/dapp/src/hooks/store/index.ts b/dapp/src/hooks/store/index.ts
index 1e6b74506..5e62e037a 100644
--- a/dapp/src/hooks/store/index.ts
+++ b/dapp/src/hooks/store/index.ts
@@ -12,3 +12,4 @@ export * from "./useAllActivitiesCount"
 export * from "./useActionFlowPause"
 export * from "./useIsSignedMessage"
 export { default as useHasFetchedActivities } from "./useHasFetchedActivities"
+export { default as useActivities } from "./useActivities"
diff --git a/dapp/src/hooks/store/useActivities.ts b/dapp/src/hooks/store/useActivities.ts
new file mode 100644
index 000000000..b9f022b29
--- /dev/null
+++ b/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)
+}
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index d19d9113d..e52673c1c 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -1,5 +1,14 @@
 import React from "react"
-import { HStack, Card, CardBody, Box, VisuallyHidden } from "@chakra-ui/react"
+import {
+  HStack,
+  Card,
+  CardBody,
+  Box,
+  VisuallyHidden,
+  Flex,
+  Tag,
+  TagLabel,
+} from "@chakra-ui/react"
 import {
   Pagination,
   PaginationButton,
@@ -8,25 +17,33 @@ import {
 } from "#/components/shared/Pagination"
 import { TextSm } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
-import { displayBlockTimestamp } from "#/utils"
+import { displayBlockTimestamp, isActivityCompleted, staking } from "#/utils"
 import { Activity } from "#/types"
 import BlockExplorerLink from "#/components/shared/BlockExplorerLink"
 import { IconArrowUpRight } from "@tabler/icons-react"
-import { useCompletedActivities } from "#/hooks"
+import { useActivities } from "#/hooks"
+import Spinner from "#/components/shared/Spinner"
 
 export default function TransactionTable() {
-  const completedActivities = useCompletedActivities()
+  const activities = useActivities()
 
   return (
-    <Pagination data={completedActivities} pageSize={10}>
+    <Pagination data={activities} pageSize={10}>
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
         {(pageData: Activity[]) =>
-          pageData.map(
-            ({ id, initializedAt, finalizedAt, type, txHash, amount }) => (
-              <Card key={id} role="group" variant="elevated" colorScheme="gold">
-                <CardBody as={HStack} spacing={3} p={4}>
+          pageData.map((activity) => (
+            <Card
+              key={activity.id}
+              role="group"
+              variant="elevated"
+              colorScheme="gold"
+            >
+              <CardBody as={Flex} flexDirection="column" gap={4} p={4}>
+                <HStack spacing={3}>
                   <TextSm color="grey.500" flex={1} fontWeight="medium">
-                    {displayBlockTimestamp(finalizedAt ?? initializedAt)}
+                    {displayBlockTimestamp(
+                      activity?.finalizedAt ?? activity.initializedAt,
+                    )}
                   </TextSm>
 
                   <HStack flexBasis="60%">
@@ -36,7 +53,7 @@ export default function TransactionTable() {
                       fontWeight="semibold"
                       textTransform="capitalize"
                     >
-                      {type}
+                      {activity.type}
                     </TextSm>
 
                     <Box flex={1}>
@@ -44,14 +61,14 @@ export default function TransactionTable() {
                         color="grey.700"
                         size="sm"
                         fontWeight="bold"
-                        amount={amount}
+                        amount={activity.amount}
                         currency="bitcoin"
                       />
                     </Box>
                   </HStack>
-                  {txHash && (
+                  {activity.txHash && (
                     <BlockExplorerLink
-                      id={txHash}
+                      id={activity.txHash}
                       chain="bitcoin"
                       type="transaction"
                       variant="ghost"
@@ -67,10 +84,35 @@ export default function TransactionTable() {
                       <VisuallyHidden>View transaction details</VisuallyHidden>
                     </BlockExplorerLink>
                   )}
-                </CardBody>
-              </Card>
-            ),
-          )
+                </HStack>
+                {!isActivityCompleted(activity) && (
+                  <HStack spacing={3}>
+                    <Tag variant="solid">
+                      <Spinner
+                        borderWidth={3}
+                        boxSize={6}
+                        mr={2}
+                        color="gold.400"
+                        emptyColor="brand.400"
+                      />
+                      <TagLabel>{`${staking.convertTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
+                    </Tag>
+                    <Tag variant="solid">
+                      <TagLabel display="flex" gap={1}>
+                        Est. duration
+                        <Box as="span" color="brand.400">
+                          {staking.getEstimatedDuration(
+                            activity.amount,
+                            activity.type,
+                          )}
+                        </Box>
+                      </TagLabel>
+                    </Tag>
+                  </HStack>
+                )}
+              </CardBody>
+            </Card>
+          ))
         }
       </PaginationPage>
 
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
index b54500462..2f0b668e1 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
@@ -1,13 +1,13 @@
 import React from "react"
 import { StackProps, VStack, Image } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
-import { useCompletedActivities, useIsFetchedWalletData } from "#/hooks"
+import { useAllActivitiesCount, useIsFetchedWalletData } from "#/hooks"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import emptyStateIllustration from "#/assets/images/empty-state.svg"
 import TransactionTable from "./TransactionTable"
 
 function TransactionHistoryContent() {
-  const completedActivities = useCompletedActivities()
+  const activitiesCount = useAllActivitiesCount()
   const isFetchedWalletData = useIsFetchedWalletData()
 
   if (!isFetchedWalletData)
@@ -19,7 +19,7 @@ function TransactionHistoryContent() {
       </VStack>
     )
 
-  if (completedActivities.length === 0)
+  if (activitiesCount === 0)
     return (
       <VStack w="100%">
         <Image
diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts
index addf3c38c..0a727ba2f 100644
--- a/dapp/src/store/wallet/walletSelector.ts
+++ b/dapp/src/store/wallet/walletSelector.ts
@@ -14,6 +14,11 @@ export const selectLatestActivities = createSelector(
     sortActivitiesByTimestamp(Object.values(latestActivities)),
 )
 
+export const selectActivities = createSelector(
+  (state: RootState) => state.wallet.activities,
+  (activities) => sortActivitiesByTimestamp(activities),
+)
+
 export const selectCompletedActivities = createSelector(
   (state: RootState) => state.wallet.activities,
   (activities) =>
diff --git a/dapp/src/theme/Tag.ts b/dapp/src/theme/Tag.ts
index 1ff607434..1c1169fe4 100644
--- a/dapp/src/theme/Tag.ts
+++ b/dapp/src/theme/Tag.ts
@@ -6,7 +6,8 @@ const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
 const baseStyleContainer = defineStyle({
   borderRadius: "full",
   w: "fit-content",
-  bg: "gold.100",
+  color: "grey.700",
+  bg: "gold.200",
   paddingX: 4,
   paddingY: 2.5,
   shadow: "none",
diff --git a/dapp/src/utils/activities.ts b/dapp/src/utils/activities.ts
index c97b1467c..40a367a7a 100644
--- a/dapp/src/utils/activities.ts
+++ b/dapp/src/utils/activities.ts
@@ -4,6 +4,6 @@ export const isActivityCompleted = (activity: Activity): boolean =>
   activity.status === "completed"
 
 export const sortActivitiesByTimestamp = (activities: Activity[]): Activity[] =>
-  activities.sort(
+  [...activities].sort(
     (activity1, activity2) => activity2.initializedAt - activity1.initializedAt,
   )
diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts
index d4b7fce95..290117e93 100644
--- a/dapp/src/utils/index.ts
+++ b/dapp/src/utils/index.ts
@@ -14,3 +14,4 @@ export * from "./type-check"
 export { default as eip1193 } from "./eip1193"
 export { default as orangeKit } from "./orangeKit"
 export { default as userAgent } from "./userAgent"
+export { default as staking } from "./staking"
diff --git a/dapp/src/utils/staking.ts b/dapp/src/utils/staking.ts
new file mode 100644
index 000000000..0c8eaeef0
--- /dev/null
+++ b/dapp/src/utils/staking.ts
@@ -0,0 +1,26 @@
+const MIN_LIMIT_VALUE = BigInt(String(1e7)) // 0.1 BTC
+const MAX_LIMIT_VALUE = BigInt(String(1e8)) // 1 BTC
+
+function getEstimatedDuration(
+  amount: bigint,
+  type: "deposit" | "withdraw",
+): string {
+  if (type === "withdraw") return "6 hours"
+
+  if (amount < MIN_LIMIT_VALUE) return "1 hours"
+
+  if (amount >= MIN_LIMIT_VALUE && amount < MAX_LIMIT_VALUE) return "2 hours"
+
+  return "3 hours"
+}
+
+function convertTypeToLabel(type: "deposit" | "withdraw"): string {
+  if (type === "withdraw") return "Unstaking"
+
+  return "Staking"
+}
+
+export default {
+  getEstimatedDuration,
+  convertTypeToLabel,
+}

From 2024148d49ea5b2c746b8f87ed3040624618f4fd Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 9 Aug 2024 11:37:09 +0200
Subject: [PATCH 02/18] Updates for activity notifications

- show only the latest completed activities
- show notifications top of the card
---
 .../components/shared/ActivitiesList/ActivitiesList.tsx   | 8 ++++----
 dapp/src/hooks/store/index.ts                             | 1 +
 dapp/src/hooks/store/useLatestCompletedActivities.ts      | 6 ++++++
 dapp/src/pages/DashboardPage/DashboardCard.tsx            | 3 +--
 dapp/src/store/wallet/walletSelector.ts                   | 6 ++++++
 5 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 dapp/src/hooks/store/useLatestCompletedActivities.ts

diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
index c864ea9e4..962073c93 100644
--- a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
+++ b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { List, ListItem, ListProps } from "@chakra-ui/react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
-import { useAppDispatch, useLatestActivities } from "#/hooks"
+import { useAppDispatch, useLatestCompletedActivities } from "#/hooks"
 import { deleteLatestActivity } from "#/store/wallet"
 import ActivitiesListItem from "./ActivitiesListItem"
 
@@ -15,18 +15,18 @@ const listItemVariants: Variants = {
 
 function ActivitiesList(props: ListProps) {
   const dispatch = useAppDispatch()
-  const latestActivities = useLatestActivities()
+  const activities = useLatestCompletedActivities()
 
   const handleItemDismiss = (activityId: string) => {
     dispatch(deleteLatestActivity(activityId))
   }
 
-  if (latestActivities.length === 0) return null
+  if (activities.length === 0) return null
 
   return (
     <MotionList pos="relative" w="full" {...props}>
       <AnimatePresence mode="popLayout">
-        {latestActivities.map((item) => (
+        {activities.map((item) => (
           <MotionListItem
             key={item.id}
             layout="position"
diff --git a/dapp/src/hooks/store/index.ts b/dapp/src/hooks/store/index.ts
index 5e62e037a..f86bfe5ae 100644
--- a/dapp/src/hooks/store/index.ts
+++ b/dapp/src/hooks/store/index.ts
@@ -13,3 +13,4 @@ export * from "./useActionFlowPause"
 export * from "./useIsSignedMessage"
 export { default as useHasFetchedActivities } from "./useHasFetchedActivities"
 export { default as useActivities } from "./useActivities"
+export { default as useLatestCompletedActivities } from "./useLatestCompletedActivities"
diff --git a/dapp/src/hooks/store/useLatestCompletedActivities.ts b/dapp/src/hooks/store/useLatestCompletedActivities.ts
new file mode 100644
index 000000000..1fc1178f8
--- /dev/null
+++ b/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)
+}
diff --git a/dapp/src/pages/DashboardPage/DashboardCard.tsx b/dapp/src/pages/DashboardPage/DashboardCard.tsx
index a4102e8ed..fc0848a36 100644
--- a/dapp/src/pages/DashboardPage/DashboardCard.tsx
+++ b/dapp/src/pages/DashboardPage/DashboardCard.tsx
@@ -44,6 +44,7 @@ export default function DashboardCard(props: DashboardCardProps) {
   return (
     <Card px={5} py={10} gap={10} overflow="hidden" {...props}>
       <CardHeader p={0} textAlign="center">
+        <ActivitiesList />
         <TextMd fontWeight="bold">
           My position
           {/* TODO: Uncomment when position will be implemented */}
@@ -110,8 +111,6 @@ export default function DashboardCard(props: DashboardCardProps) {
             </ArrivingSoonTooltip>
           </UserDataSkeleton>
         </HStack>
-
-        <ActivitiesList />
         <TransactionHistory />
       </CardBody>
     </Card>
diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts
index 0a727ba2f..edb4959b9 100644
--- a/dapp/src/store/wallet/walletSelector.ts
+++ b/dapp/src/store/wallet/walletSelector.ts
@@ -14,6 +14,12 @@ export const selectLatestActivities = createSelector(
     sortActivitiesByTimestamp(Object.values(latestActivities)),
 )
 
+export const selectLatestCompletedActivities = createSelector(
+  selectLatestActivities,
+  (latestActivities) =>
+    latestActivities.filter((activity) => isActivityCompleted(activity)),
+)
+
 export const selectActivities = createSelector(
   (state: RootState) => state.wallet.activities,
   (activities) => sortActivitiesByTimestamp(activities),

From 91e5098ff561b341cb4d494480f31f3d07019bc0 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 9 Aug 2024 12:04:10 +0200
Subject: [PATCH 03/18] Refactor for activities slice and selectors

---
 dapp/src/store/wallet/walletSelector.ts | 32 +++++++++++--------------
 dapp/src/store/wallet/walletSlice.ts    |  2 +-
 dapp/src/utils/activities.ts            |  3 +++
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts
index edb4959b9..ec32f66da 100644
--- a/dapp/src/store/wallet/walletSelector.ts
+++ b/dapp/src/store/wallet/walletSelector.ts
@@ -1,5 +1,5 @@
 import { createSelector } from "@reduxjs/toolkit"
-import { isActivityCompleted, sortActivitiesByTimestamp } from "#/utils"
+import { filterCompletedActivities, sortActivitiesByTimestamp } from "#/utils"
 import { RootState } from ".."
 
 export const selectEstimatedBtcBalance = (state: RootState): bigint =>
@@ -8,6 +8,16 @@ export const selectEstimatedBtcBalance = (state: RootState): bigint =>
 export const selectSharesBalance = (state: RootState): bigint =>
   state.wallet.sharesBalance
 
+export const selectActivities = createSelector(
+  (state: RootState) => state.wallet.activities,
+  (activities) => sortActivitiesByTimestamp(activities),
+)
+
+export const selectAllActivitiesCount = createSelector(
+  (state: RootState) => state.wallet.activities,
+  (activities) => activities.length,
+)
+
 export const selectLatestActivities = createSelector(
   (state: RootState) => state.wallet.latestActivities,
   (latestActivities) =>
@@ -16,26 +26,12 @@ export const selectLatestActivities = createSelector(
 
 export const selectLatestCompletedActivities = createSelector(
   selectLatestActivities,
-  (latestActivities) =>
-    latestActivities.filter((activity) => isActivityCompleted(activity)),
-)
-
-export const selectActivities = createSelector(
-  (state: RootState) => state.wallet.activities,
-  (activities) => sortActivitiesByTimestamp(activities),
+  (latestActivities) => filterCompletedActivities(latestActivities),
 )
 
 export const selectCompletedActivities = createSelector(
-  (state: RootState) => state.wallet.activities,
-  (activities) =>
-    sortActivitiesByTimestamp(
-      activities.filter((activity) => isActivityCompleted(activity)),
-    ),
-)
-
-export const selectAllActivitiesCount = createSelector(
-  (state: RootState) => state.wallet.activities,
-  (activities) => activities.length,
+  selectActivities,
+  (activities) => filterCompletedActivities(activities),
 )
 
 export const selectIsSignedMessage = (state: RootState): boolean =>
diff --git a/dapp/src/store/wallet/walletSlice.ts b/dapp/src/store/wallet/walletSlice.ts
index 4d2958ab3..0e86956b3 100644
--- a/dapp/src/store/wallet/walletSlice.ts
+++ b/dapp/src/store/wallet/walletSlice.ts
@@ -67,7 +67,7 @@ export const walletSlice = createSlice({
           .filter(
             (activity) =>
               activity.id.includes(latestActivity.id) &&
-              activity.status === "completed",
+              isActivityCompleted(activity),
           )
           .sort((first, second) => {
             // The withdraw id is: `<redemptionKey>-<count>`
diff --git a/dapp/src/utils/activities.ts b/dapp/src/utils/activities.ts
index 40a367a7a..4680c461e 100644
--- a/dapp/src/utils/activities.ts
+++ b/dapp/src/utils/activities.ts
@@ -7,3 +7,6 @@ export const sortActivitiesByTimestamp = (activities: Activity[]): Activity[] =>
   [...activities].sort(
     (activity1, activity2) => activity2.initializedAt - activity1.initializedAt,
   )
+
+export const filterCompletedActivities = (activities: Activity[]): Activity[] =>
+  activities.filter((activity) => isActivityCompleted(activity))

From c32030555ba56b1eda21a287198042542f5140b5 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 9 Aug 2024 15:32:31 +0200
Subject: [PATCH 04/18] Refactor for staking utils

---
 .../ActivitiesList/ActivitiesListItem.tsx       |  5 +++--
 .../TransactionHistory/TransactionTable.tsx     |  2 +-
 dapp/src/types/activity.ts                      |  2 ++
 dapp/src/utils/staking.ts                       | 17 +++++++++--------
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
index f6c36bfb5..02ee00945 100644
--- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
+++ b/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 { staking } 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"}...`}
+              ? `${staking.convertActivityTypeToLabel(type)} completed`
+              : `${staking.convertActivityTypeToLabel(type)}...`}
           </TextMd>
 
           <CurrencyBalance amount={amount} currency="bitcoin" />
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index e52673c1c..491f8192e 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -95,7 +95,7 @@ export default function TransactionTable() {
                         color="gold.400"
                         emptyColor="brand.400"
                       />
-                      <TagLabel>{`${staking.convertTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
+                      <TagLabel>{`${staking.convertActivityTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
                     </Tag>
                     <Tag variant="solid">
                       <TagLabel display="flex" gap={1}>
diff --git a/dapp/src/types/activity.ts b/dapp/src/types/activity.ts
index 2cec46c5c..7d92168f1 100644
--- a/dapp/src/types/activity.ts
+++ b/dapp/src/types/activity.ts
@@ -16,6 +16,8 @@ type ConditionalActivityData =
       txHash?: string
     }
 
+export type ActivityType = ConditionalActivityData["type"]
+
 export type Activity = CommonActivityData & ConditionalActivityData
 
 export type ActivitiesByIds = {
diff --git a/dapp/src/utils/staking.ts b/dapp/src/utils/staking.ts
index 0c8eaeef0..7b5b1b6eb 100644
--- a/dapp/src/utils/staking.ts
+++ b/dapp/src/utils/staking.ts
@@ -1,11 +1,12 @@
+import { ActivityType } from "#/types"
+
 const MIN_LIMIT_VALUE = BigInt(String(1e7)) // 0.1 BTC
 const MAX_LIMIT_VALUE = BigInt(String(1e8)) // 1 BTC
 
-function getEstimatedDuration(
-  amount: bigint,
-  type: "deposit" | "withdraw",
-): string {
-  if (type === "withdraw") return "6 hours"
+const isWithdraw = (type: ActivityType) => type === "withdraw"
+
+function getEstimatedDuration(amount: bigint, type: ActivityType): string {
+  if (isWithdraw(type)) return "6 hours"
 
   if (amount < MIN_LIMIT_VALUE) return "1 hours"
 
@@ -14,13 +15,13 @@ function getEstimatedDuration(
   return "3 hours"
 }
 
-function convertTypeToLabel(type: "deposit" | "withdraw"): string {
-  if (type === "withdraw") return "Unstaking"
+function convertActivityTypeToLabel(type: ActivityType): string {
+  if (isWithdraw(type)) return "Unstaking"
 
   return "Staking"
 }
 
 export default {
   getEstimatedDuration,
-  convertTypeToLabel,
+  convertActivityTypeToLabel,
 }

From 886522e3e01cc67b02cca495ae96b307a04f01f0 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 12 Aug 2024 09:30:08 +0200
Subject: [PATCH 05/18] Remove unnecessary hooks/selectors

---
 dapp/src/hooks/store/index.ts                  | 2 --
 dapp/src/hooks/store/useCompletedActivities.ts | 6 ------
 dapp/src/hooks/store/useLatestActivities.ts    | 6 ------
 dapp/src/store/wallet/walletSelector.ts        | 5 -----
 4 files changed, 19 deletions(-)
 delete mode 100644 dapp/src/hooks/store/useCompletedActivities.ts
 delete mode 100644 dapp/src/hooks/store/useLatestActivities.ts

diff --git a/dapp/src/hooks/store/index.ts b/dapp/src/hooks/store/index.ts
index f86bfe5ae..aafdf9918 100644
--- a/dapp/src/hooks/store/index.ts
+++ b/dapp/src/hooks/store/index.ts
@@ -6,8 +6,6 @@ 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"
diff --git a/dapp/src/hooks/store/useCompletedActivities.ts b/dapp/src/hooks/store/useCompletedActivities.ts
deleted file mode 100644
index 604309422..000000000
--- a/dapp/src/hooks/store/useCompletedActivities.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { selectCompletedActivities } from "#/store/wallet"
-import { useAppSelector } from "./useAppSelector"
-
-export function useCompletedActivities() {
-  return useAppSelector(selectCompletedActivities)
-}
diff --git a/dapp/src/hooks/store/useLatestActivities.ts b/dapp/src/hooks/store/useLatestActivities.ts
deleted file mode 100644
index f9dcbf7a3..000000000
--- a/dapp/src/hooks/store/useLatestActivities.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { selectLatestActivities } from "#/store/wallet"
-import { useAppSelector } from "./useAppSelector"
-
-export function useLatestActivities() {
-  return useAppSelector(selectLatestActivities)
-}
diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts
index ec32f66da..3909ec540 100644
--- a/dapp/src/store/wallet/walletSelector.ts
+++ b/dapp/src/store/wallet/walletSelector.ts
@@ -29,11 +29,6 @@ export const selectLatestCompletedActivities = createSelector(
   (latestActivities) => filterCompletedActivities(latestActivities),
 )
 
-export const selectCompletedActivities = createSelector(
-  selectActivities,
-  (activities) => filterCompletedActivities(activities),
-)
-
 export const selectIsSignedMessage = (state: RootState): boolean =>
   state.wallet.isSignedMessage
 

From d62c97d875a8b884f9790ce0d9fc7c7c04f8316a Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 12 Aug 2024 11:47:33 +0200
Subject: [PATCH 06/18] Add additional dots for the CurrencyBalance component

---
 dapp/src/components/shared/CurrencyBalance/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx
index 0be487b6a..4b03241c0 100644
--- a/dapp/src/components/shared/CurrencyBalance/index.tsx
+++ b/dapp/src/components/shared/CurrencyBalance/index.tsx
@@ -27,6 +27,7 @@ export type CurrencyBalanceProps = {
   balanceFontWeight?: string
   symbolFontWeight?: string
   symbolPosition?: "prefix" | "suffix"
+  withDots?: boolean
 } & TextProps
 
 export function CurrencyBalance({
@@ -39,6 +40,7 @@ export function CurrencyBalance({
   balanceFontWeight = "bold",
   symbolFontWeight = "bold",
   symbolPosition = "suffix",
+  withDots = false,
   as,
   ...textProps
 }: CurrencyBalanceProps) {
@@ -72,6 +74,7 @@ export function CurrencyBalance({
         {...textProps}
       >
         {balance}
+        {withDots && ".."}
       </Box>
       <Box
         as="span"

From ff9d730f5efccc80bd452d641c45d5ba8c83957a Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 12 Aug 2024 12:14:15 +0200
Subject: [PATCH 07/18] Update rows for `TransactionTable`

---
 .../TransactionHistory/EstimatedDuration.tsx  | 36 ++++++++++
 .../TransactionHistory/TransactionTable.tsx   | 65 +++++--------------
 2 files changed, 54 insertions(+), 47 deletions(-)
 create mode 100644 dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx

diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
new file mode 100644
index 000000000..db4e038c8
--- /dev/null
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import { HStack, Box, Tag, TagLabel } from "@chakra-ui/react"
+import Spinner from "#/components/shared/Spinner"
+import { isActivityCompleted, staking } from "#/utils"
+import { Activity } from "#/types"
+
+export default function EstimatedDuration({
+  activity,
+}: {
+  activity: Activity
+}) {
+  if (isActivityCompleted(activity)) return null
+
+  return (
+    <HStack spacing={3}>
+      <Tag variant="solid">
+        <Spinner
+          borderWidth={3}
+          boxSize={6}
+          mr={2}
+          color="gold.400"
+          emptyColor="brand.400"
+        />
+        <TagLabel>{`${staking.convertActivityTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
+      </Tag>
+      <Tag variant="solid">
+        <TagLabel display="flex" gap={1}>
+          Est. duration
+          <Box as="span" color="brand.400">
+            {staking.getEstimatedDuration(activity.amount, activity.type)}
+          </Box>
+        </TagLabel>
+      </Tag>
+    </HStack>
+  )
+}
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index 491f8192e..c9c28d75f 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -1,14 +1,5 @@
 import React from "react"
-import {
-  HStack,
-  Card,
-  CardBody,
-  Box,
-  VisuallyHidden,
-  Flex,
-  Tag,
-  TagLabel,
-} from "@chakra-ui/react"
+import { HStack, Card, CardBody, Box, Flex, Icon } from "@chakra-ui/react"
 import {
   Pagination,
   PaginationButton,
@@ -17,12 +8,12 @@ import {
 } from "#/components/shared/Pagination"
 import { TextSm } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
-import { displayBlockTimestamp, isActivityCompleted, staking } from "#/utils"
+import { displayBlockTimestamp } from "#/utils"
 import { Activity } from "#/types"
 import BlockExplorerLink from "#/components/shared/BlockExplorerLink"
 import { IconArrowUpRight } from "@tabler/icons-react"
 import { useActivities } from "#/hooks"
-import Spinner from "#/components/shared/Spinner"
+import EstimatedDuration from "./EstimatedDuration"
 
 export default function TransactionTable() {
   const activities = useActivities()
@@ -63,6 +54,7 @@ export default function TransactionTable() {
                         fontWeight="bold"
                         amount={activity.amount}
                         currency="bitcoin"
+                        withDots
                       />
                     </Box>
                   </HStack>
@@ -71,45 +63,24 @@ export default function TransactionTable() {
                       id={activity.txHash}
                       chain="bitcoin"
                       type="transaction"
-                      variant="ghost"
-                      color="grey.300"
-                      _groupHover={{ color: "brand.400" }}
-                      pl={6}
-                      pr={4}
-                      py={5}
-                      mx={-4}
-                      my={-5}
+                      color="grey.600"
+                      _groupHover={{
+                        color: "brand.400",
+                        textDecoration: "none",
+                      }}
                     >
-                      <IconArrowUpRight size={16} />
-                      <VisuallyHidden>View transaction details</VisuallyHidden>
+                      <HStack spacing={1}>
+                        <TextSm>Details</TextSm>
+                        <Icon
+                          as={IconArrowUpRight}
+                          color="brand.400"
+                          boxSize={4}
+                        />
+                      </HStack>
                     </BlockExplorerLink>
                   )}
                 </HStack>
-                {!isActivityCompleted(activity) && (
-                  <HStack spacing={3}>
-                    <Tag variant="solid">
-                      <Spinner
-                        borderWidth={3}
-                        boxSize={6}
-                        mr={2}
-                        color="gold.400"
-                        emptyColor="brand.400"
-                      />
-                      <TagLabel>{`${staking.convertActivityTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
-                    </Tag>
-                    <Tag variant="solid">
-                      <TagLabel display="flex" gap={1}>
-                        Est. duration
-                        <Box as="span" color="brand.400">
-                          {staking.getEstimatedDuration(
-                            activity.amount,
-                            activity.type,
-                          )}
-                        </Box>
-                      </TagLabel>
-                    </Tag>
-                  </HStack>
-                )}
+                <EstimatedDuration activity={activity} />
               </CardBody>
             </Card>
           ))

From 4bc4267f801cdd61f10b3b2e0d483174e2c2eeb0 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 12 Aug 2024 12:56:41 +0200
Subject: [PATCH 08/18] Create a separate component for position details

---
 .../src/pages/DashboardPage/DashboardCard.tsx | 113 +-----------------
 .../pages/DashboardPage/PositionDetails.tsx   | 103 ++++++++++++++++
 2 files changed, 109 insertions(+), 107 deletions(-)
 create mode 100644 dapp/src/pages/DashboardPage/PositionDetails.tsx

diff --git a/dapp/src/pages/DashboardPage/DashboardCard.tsx b/dapp/src/pages/DashboardPage/DashboardCard.tsx
index fc0848a36..047f4a15c 100644
--- a/dapp/src/pages/DashboardPage/DashboardCard.tsx
+++ b/dapp/src/pages/DashboardPage/DashboardCard.tsx
@@ -1,116 +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">
+    <Card p={5} overflow="hidden" {...props}>
+      <CardBody as={VStack} spacing={10} p={0}>
         <ActivitiesList />
-        <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>
+        <PositionDetails />
         <TransactionHistory />
       </CardBody>
     </Card>
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
new file mode 100644
index 000000000..a59a81657
--- /dev/null
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -0,0 +1,103 @@
+import React from "react"
+import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
+import { useBitcoinPosition, useTransactionModal } from "#/hooks"
+import { ACTION_FLOW_TYPES } from "#/types"
+import {
+  Button,
+  ButtonProps,
+  Flex,
+  HStack,
+  // Tag,
+  VStack,
+} from "@chakra-ui/react"
+import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
+import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
+import { featureFlags } from "#/constants"
+import { TextMd } from "#/components/shared/Typography"
+
+const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
+
+const buttonStyles: ButtonProps = {
+  size: "lg",
+  flex: 1,
+  maxW: "12.5rem", // 200px
+  fontWeight: "bold",
+  lineHeight: 6,
+  px: 7,
+  h: "auto",
+}
+
+export default function PositionDetails() {
+  const { data } = useBitcoinPosition()
+  const bitcoinAmount = data?.estimatedBitcoinBalance ?? 0n
+
+  const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
+  const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
+
+  return (
+    <Flex flexDirection="column" gap={5}>
+      <VStack justify="center" spacing={0}>
+        <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>
+        <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>
+    </Flex>
+  )
+}

From 86a5106ef8d1d501831d9e4971a7cc9f8d8ad6f8 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 13 Aug 2024 12:57:37 +0200
Subject: [PATCH 09/18] Fix the problem of overlapping activity list on
 pagination footer

This is a temporary solution. It should be fixed by updating the animations or Pagination component.
---
 .../shared/Pagination/Pagination.tsx          |  2 +-
 .../shared/Pagination/PaginationFooter.tsx    | 25 +++++++++++++++++++
 .../src/components/shared/Pagination/index.ts |  1 +
 .../src/pages/DashboardPage/DashboardCard.tsx |  2 +-
 .../TransactionHistory/TransactionTable.tsx   | 23 +++++++++--------
 dapp/src/theme/utils/semanticTokens.ts        |  1 +
 6 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 dapp/src/components/shared/Pagination/PaginationFooter.tsx

diff --git a/dapp/src/components/shared/Pagination/Pagination.tsx b/dapp/src/components/shared/Pagination/Pagination.tsx
index 969d2eda5..493e8b9b8 100644
--- a/dapp/src/components/shared/Pagination/Pagination.tsx
+++ b/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>
diff --git a/dapp/src/components/shared/Pagination/PaginationFooter.tsx b/dapp/src/components/shared/Pagination/PaginationFooter.tsx
new file mode 100644
index 000000000..e0bfa5fcc
--- /dev/null
+++ b/dapp/src/components/shared/Pagination/PaginationFooter.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import { HStack, StackProps } from "@chakra-ui/react"
+
+type PaginationFooterProps = StackProps & { containerPadding: number }
+
+function PaginationFooter(props: PaginationFooterProps) {
+  const { children, containerPadding, ...restProps } = props
+
+  return (
+    <HStack
+      mx={-containerPadding}
+      mt={-containerPadding + 1}
+      mb={-containerPadding}
+      p={containerPadding}
+      pt={containerPadding + 1}
+      bgGradient="linear(to-b, transparent, gold.200 20%)"
+      zIndex={2}
+      {...restProps}
+    >
+      {children}
+    </HStack>
+  )
+}
+
+export default PaginationFooter
diff --git a/dapp/src/components/shared/Pagination/index.ts b/dapp/src/components/shared/Pagination/index.ts
index 84337122b..ea1f4777a 100644
--- a/dapp/src/components/shared/Pagination/index.ts
+++ b/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"
diff --git a/dapp/src/pages/DashboardPage/DashboardCard.tsx b/dapp/src/pages/DashboardPage/DashboardCard.tsx
index 047f4a15c..2c676c020 100644
--- a/dapp/src/pages/DashboardPage/DashboardCard.tsx
+++ b/dapp/src/pages/DashboardPage/DashboardCard.tsx
@@ -6,7 +6,7 @@ import PositionDetails from "./PositionDetails"
 
 export default function DashboardCard(props: CardProps) {
   return (
-    <Card p={5} overflow="hidden" {...props}>
+    <Card p="dashboard_card_padding" overflow="hidden" {...props}>
       <CardBody as={VStack} spacing={10} p={0}>
         <ActivitiesList />
         <PositionDetails />
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index c9c28d75f..97e32a730 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -3,6 +3,7 @@ import { HStack, Card, CardBody, Box, Flex, Icon } from "@chakra-ui/react"
 import {
   Pagination,
   PaginationButton,
+  PaginationFooter,
   PaginationPage,
   PaginationStatus,
 } from "#/components/shared/Pagination"
@@ -13,13 +14,14 @@ import { Activity } from "#/types"
 import BlockExplorerLink from "#/components/shared/BlockExplorerLink"
 import { IconArrowUpRight } from "@tabler/icons-react"
 import { useActivities } from "#/hooks"
+import { semanticTokens } from "#/theme/utils"
 import EstimatedDuration from "./EstimatedDuration"
 
 export default function TransactionTable() {
   const activities = useActivities()
 
   return (
-    <Pagination data={activities} pageSize={10}>
+    <Pagination data={activities} pageSize={10} spacing={6}>
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
         {(pageData: Activity[]) =>
           pageData.map((activity) => (
@@ -87,15 +89,16 @@ export default function TransactionTable() {
         }
       </PaginationPage>
 
-      <HStack
+      <PaginationFooter
         spacing={2}
-        mx={-5}
-        mt={-6}
-        mb={-10}
-        p={5}
-        pt={6}
-        bgGradient="linear(to-b, transparent, gold.200 20%)"
-        zIndex={2}
+        // TODO: Temporary solution - Animation should be fixed in such a way
+        // that it does not affect other elements. Currently, when we add some
+        // new element under the `PaginationPage` or `Pagination` tag,
+        // the list of activities will overlap it when we switch pages.
+        //
+        // The `containerPadding` property does not solve the problem
+        // but hides it for the `PaginationFooter` component.
+        containerPadding={semanticTokens.space.dashboard_card_padding}
       >
         <HStack spacing={2}>
           <PaginationButton mode="previous" />
@@ -103,7 +106,7 @@ export default function TransactionTable() {
         </HStack>
 
         <PaginationStatus dataLabel="transactions" color="grey.500" />
-      </HStack>
+      </PaginationFooter>
     </Pagination>
   )
 }
diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts
index 699328ebe..da48ade6e 100644
--- a/dapp/src/theme/utils/semanticTokens.ts
+++ b/dapp/src/theme/utils/semanticTokens.ts
@@ -2,6 +2,7 @@ export const semanticTokens = {
   space: {
     header_height: 24,
     modal_shift: "9.75rem", // 156px
+    dashboard_card_padding: 5,
   },
   sizes: {
     sidebar_width: 80,

From 1af2feec53fec35fc73498ac0e0f1db22ceb90dd Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 13 Aug 2024 15:50:39 +0200
Subject: [PATCH 10/18] Fix for displaying transaction history when txHash is
 undefined

---
 .../DashboardPage/TransactionHistory/TransactionTable.tsx  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index 97e32a730..fa610241e 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -17,6 +17,8 @@ import { useActivities } from "#/hooks"
 import { semanticTokens } from "#/theme/utils"
 import EstimatedDuration from "./EstimatedDuration"
 
+const BLOCK_EXPLORER_CELL_MIN_WIDTH = 16
+
 export default function TransactionTable() {
   const activities = useActivities()
 
@@ -60,7 +62,7 @@ export default function TransactionTable() {
                       />
                     </Box>
                   </HStack>
-                  {activity.txHash && (
+                  {activity.txHash ? (
                     <BlockExplorerLink
                       id={activity.txHash}
                       chain="bitcoin"
@@ -70,6 +72,7 @@ export default function TransactionTable() {
                         color: "brand.400",
                         textDecoration: "none",
                       }}
+                      minW={BLOCK_EXPLORER_CELL_MIN_WIDTH}
                     >
                       <HStack spacing={1}>
                         <TextSm>Details</TextSm>
@@ -80,6 +83,8 @@ export default function TransactionTable() {
                         />
                       </HStack>
                     </BlockExplorerLink>
+                  ) : (
+                    <Box minW={BLOCK_EXPLORER_CELL_MIN_WIDTH} />
                   )}
                 </HStack>
                 <EstimatedDuration activity={activity} />

From 362c27ef9617324a2bfaa4b91540943b31e9d3c2 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 13 Aug 2024 16:07:00 +0200
Subject: [PATCH 11/18] Fix sorting activity by timestamp

---
 .../DashboardPage/TransactionHistory/TransactionTable.tsx   | 6 ++----
 dapp/src/utils/activities.ts                                | 6 +++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index fa610241e..888778d9e 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -9,7 +9,7 @@ import {
 } from "#/components/shared/Pagination"
 import { TextSm } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
-import { displayBlockTimestamp } from "#/utils"
+import { displayBlockTimestamp, getActivityTimestamp } from "#/utils"
 import { Activity } from "#/types"
 import BlockExplorerLink from "#/components/shared/BlockExplorerLink"
 import { IconArrowUpRight } from "@tabler/icons-react"
@@ -36,9 +36,7 @@ export default function TransactionTable() {
               <CardBody as={Flex} flexDirection="column" gap={4} p={4}>
                 <HStack spacing={3}>
                   <TextSm color="grey.500" flex={1} fontWeight="medium">
-                    {displayBlockTimestamp(
-                      activity?.finalizedAt ?? activity.initializedAt,
-                    )}
+                    {displayBlockTimestamp(getActivityTimestamp(activity))}
                   </TextSm>
 
                   <HStack flexBasis="60%">
diff --git a/dapp/src/utils/activities.ts b/dapp/src/utils/activities.ts
index 4680c461e..a4e0d93fe 100644
--- a/dapp/src/utils/activities.ts
+++ b/dapp/src/utils/activities.ts
@@ -3,9 +3,13 @@ import { Activity } from "#/types"
 export const isActivityCompleted = (activity: Activity): boolean =>
   activity.status === "completed"
 
+export const getActivityTimestamp = (activity: Activity): number =>
+  activity?.finalizedAt ?? activity.initializedAt
+
 export const sortActivitiesByTimestamp = (activities: Activity[]): Activity[] =>
   [...activities].sort(
-    (activity1, activity2) => activity2.initializedAt - activity1.initializedAt,
+    (activity1, activity2) =>
+      getActivityTimestamp(activity2) - getActivityTimestamp(activity1),
   )
 
 export const filterCompletedActivities = (activities: Activity[]): Activity[] =>

From 486c20c57d772df443b30664320ac57d0d90d271 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 13 Aug 2024 16:17:45 +0200
Subject: [PATCH 12/18] Remove unnecessary properties

---
 dapp/src/pages/DashboardPage/PositionDetails.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index a59a81657..52ac8eef9 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -62,15 +62,12 @@ export default function PositionDetails() {
               from={{
                 amount: bitcoinAmount,
                 currency: "bitcoin",
-                fontSize: "6xl",
-                lineHeight: 1.2,
+                size: "6xl",
                 letterSpacing: "-0.075rem", // -1.2px
-                fontWeight: "bold",
                 color: "grey.700",
               }}
               to={{
                 currency: "usd",
-                shouldBeFormatted: false,
                 color: "grey.500",
                 fontWeight: "medium",
               }}

From 32fe9524642dfa33f302312d453c686e7085a0a9 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 14 Aug 2024 10:29:08 +0200
Subject: [PATCH 13/18] Add custom styles for a symbol in the `CurrencyBalance`
 component

---
 .../FeesTooltip/FeesTooltipItem.tsx             |  3 +--
 .../components/shared/CurrencyBalance/index.tsx | 17 ++++++-----------
 .../src/pages/DashboardPage/PositionDetails.tsx |  3 +++
 dapp/src/theme/CurrencyBalance.ts               |  1 +
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
index efa995f0d..3662ec8a6 100644
--- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
+++ b/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}
       />
diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx
index 4b03241c0..3ff7973e7 100644
--- a/dapp/src/components/shared/CurrencyBalance/index.tsx
+++ b/dapp/src/components/shared/CurrencyBalance/index.tsx
@@ -24,10 +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({
@@ -37,11 +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", {
@@ -69,19 +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>
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 52ac8eef9..a0e8305da 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -65,6 +65,9 @@ export default function PositionDetails() {
                 size: "6xl",
                 letterSpacing: "-0.075rem", // -1.2px
                 color: "grey.700",
+                symbolTextProps: {
+                  color: "gold.500",
+                },
               }}
               to={{
                 currency: "usd",
diff --git a/dapp/src/theme/CurrencyBalance.ts b/dapp/src/theme/CurrencyBalance.ts
index dda72ff61..8f4586daf 100644
--- a/dapp/src/theme/CurrencyBalance.ts
+++ b/dapp/src/theme/CurrencyBalance.ts
@@ -16,6 +16,7 @@ const baseStyleBalance = defineStyle(({ symbolPosition }) => ({
 }))
 
 const baseStyleSymbol = defineStyle({
+  fontWeight: "bold",
   fontSize: "md",
   lineHeight: "md",
 })

From 4263debe8c47283336707c3fbfb4d636110c7383 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 14 Aug 2024 12:48:02 +0200
Subject: [PATCH 14/18] Move all utils functions for activities to one file

---
 .../ActivitiesList/ActivitiesListItem.tsx     |  6 ++---
 .../TransactionHistory/EstimatedDuration.tsx  | 10 ++++---
 dapp/src/utils/activities.ts                  | 27 ++++++++++++++++++-
 dapp/src/utils/index.ts                       |  1 -
 dapp/src/utils/staking.ts                     | 27 -------------------
 5 files changed, 36 insertions(+), 35 deletions(-)
 delete mode 100644 dapp/src/utils/staking.ts

diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
index 02ee00945..ddfc07f2b 100644
--- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
+++ b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { ArrowUpRight, LoadingSpinnerSuccessIcon } from "#/assets/icons"
 import { Activity as ActivityType } from "#/types"
-import { staking } from "#/utils"
+import { convertActivityTypeToLabel } from "#/utils"
 import { Button, HStack, VStack, VisuallyHidden } from "@chakra-ui/react"
 import { CurrencyBalance } from "../CurrencyBalance"
 import BlockExplorerLink from "../BlockExplorerLink"
@@ -36,8 +36,8 @@ function ActivitiesListItem(props: ActivitiesListItemProps) {
         <AlertTitle justify="space-between" as={HStack}>
           <TextMd fontWeight="bold">
             {isCompleted
-              ? `${staking.convertActivityTypeToLabel(type)} completed`
-              : `${staking.convertActivityTypeToLabel(type)}...`}
+              ? `${convertActivityTypeToLabel(type)} completed`
+              : `${convertActivityTypeToLabel(type)}...`}
           </TextMd>
 
           <CurrencyBalance amount={amount} currency="bitcoin" />
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
index db4e038c8..e13eaedf1 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
@@ -1,7 +1,11 @@
 import React from "react"
 import { HStack, Box, Tag, TagLabel } from "@chakra-ui/react"
 import Spinner from "#/components/shared/Spinner"
-import { isActivityCompleted, staking } from "#/utils"
+import {
+  convertActivityTypeToLabel,
+  getEstimatedDuration,
+  isActivityCompleted,
+} from "#/utils"
 import { Activity } from "#/types"
 
 export default function EstimatedDuration({
@@ -21,13 +25,13 @@ export default function EstimatedDuration({
           color="gold.400"
           emptyColor="brand.400"
         />
-        <TagLabel>{`${staking.convertActivityTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
+        <TagLabel>{`${convertActivityTypeToLabel(activity.type)} transaction pending...`}</TagLabel>
       </Tag>
       <Tag variant="solid">
         <TagLabel display="flex" gap={1}>
           Est. duration
           <Box as="span" color="brand.400">
-            {staking.getEstimatedDuration(activity.amount, activity.type)}
+            {getEstimatedDuration(activity.amount, activity.type)}
           </Box>
         </TagLabel>
       </Tag>
diff --git a/dapp/src/utils/activities.ts b/dapp/src/utils/activities.ts
index a4e0d93fe..94c47f472 100644
--- a/dapp/src/utils/activities.ts
+++ b/dapp/src/utils/activities.ts
@@ -1,4 +1,7 @@
-import { Activity } from "#/types"
+import { Activity, ActivityType } from "#/types"
+
+const MIN_LIMIT_VALUE_DURATION = BigInt(String(1e7)) // 0.1 BTC
+const MAX_LIMIT_VALUE_DURATION = BigInt(String(1e8)) // 1 BTC
 
 export const isActivityCompleted = (activity: Activity): boolean =>
   activity.status === "completed"
@@ -14,3 +17,25 @@ export const sortActivitiesByTimestamp = (activities: Activity[]): Activity[] =>
 
 export const filterCompletedActivities = (activities: Activity[]): Activity[] =>
   activities.filter((activity) => isActivityCompleted(activity))
+
+export const isWithdrawType = (type: ActivityType) => type === "withdraw"
+
+export function getEstimatedDuration(
+  amount: bigint,
+  type: ActivityType,
+): string {
+  if (isWithdrawType(type)) return "6 hours"
+
+  if (amount < MIN_LIMIT_VALUE_DURATION) return "1 hours"
+
+  if (amount >= MIN_LIMIT_VALUE_DURATION && amount < MAX_LIMIT_VALUE_DURATION)
+    return "2 hours"
+
+  return "3 hours"
+}
+
+export function convertActivityTypeToLabel(type: ActivityType): string {
+  if (isWithdrawType(type)) return "Unstaking"
+
+  return "Staking"
+}
diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts
index 10f0c3bd2..0509cbbf7 100644
--- a/dapp/src/utils/index.ts
+++ b/dapp/src/utils/index.ts
@@ -14,5 +14,4 @@ export * from "./type-check"
 export { default as eip1193 } from "./eip1193"
 export { default as orangeKit } from "./orangeKit"
 export { default as userAgent } from "./userAgent"
-export { default as staking } from "./staking"
 export { default as mezoPortalAPI } from "./mezoPortalApi"
diff --git a/dapp/src/utils/staking.ts b/dapp/src/utils/staking.ts
deleted file mode 100644
index 7b5b1b6eb..000000000
--- a/dapp/src/utils/staking.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ActivityType } from "#/types"
-
-const MIN_LIMIT_VALUE = BigInt(String(1e7)) // 0.1 BTC
-const MAX_LIMIT_VALUE = BigInt(String(1e8)) // 1 BTC
-
-const isWithdraw = (type: ActivityType) => type === "withdraw"
-
-function getEstimatedDuration(amount: bigint, type: ActivityType): string {
-  if (isWithdraw(type)) return "6 hours"
-
-  if (amount < MIN_LIMIT_VALUE) return "1 hours"
-
-  if (amount >= MIN_LIMIT_VALUE && amount < MAX_LIMIT_VALUE) return "2 hours"
-
-  return "3 hours"
-}
-
-function convertActivityTypeToLabel(type: ActivityType): string {
-  if (isWithdraw(type)) return "Unstaking"
-
-  return "Staking"
-}
-
-export default {
-  getEstimatedDuration,
-  convertActivityTypeToLabel,
-}

From 072e7ec03db48b61381c3b8af06e97d8a4a2dd50 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 14 Aug 2024 13:40:06 +0200
Subject: [PATCH 15/18] Set correct top spacing for pagination footer

---
 .../components/shared/Pagination/PaginationFooter.tsx    | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/dapp/src/components/shared/Pagination/PaginationFooter.tsx b/dapp/src/components/shared/Pagination/PaginationFooter.tsx
index e0bfa5fcc..580023482 100644
--- a/dapp/src/components/shared/Pagination/PaginationFooter.tsx
+++ b/dapp/src/components/shared/Pagination/PaginationFooter.tsx
@@ -1,6 +1,8 @@
 import React from "react"
 import { HStack, StackProps } from "@chakra-ui/react"
 
+const TOP_SPACE = 6
+
 type PaginationFooterProps = StackProps & { containerPadding: number }
 
 function PaginationFooter(props: PaginationFooterProps) {
@@ -9,10 +11,11 @@ function PaginationFooter(props: PaginationFooterProps) {
   return (
     <HStack
       mx={-containerPadding}
-      mt={-containerPadding + 1}
       mb={-containerPadding}
-      p={containerPadding}
-      pt={containerPadding + 1}
+      px={containerPadding}
+      pb={containerPadding}
+      mt={-TOP_SPACE}
+      pt={TOP_SPACE}
       bgGradient="linear(to-b, transparent, gold.200 20%)"
       zIndex={2}
       {...restProps}

From 0b57f3040e910335ab6a62b076342bdb5605e97b Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 16 Aug 2024 09:08:29 +0200
Subject: [PATCH 16/18] Fixed flex properties for a transaction table

---
 .../pages/DashboardPage/TransactionHistory/TransactionTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index 888778d9e..7c2547ea9 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -39,7 +39,7 @@ export default function TransactionTable() {
                     {displayBlockTimestamp(getActivityTimestamp(activity))}
                   </TextSm>
 
-                  <HStack flexBasis="60%">
+                  <HStack flexBasis="55%">
                     <TextSm
                       color="grey.700"
                       flex={1}

From 90447f508249dbecbcbfab54143083f85537fc2d Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 16 Aug 2024 09:22:11 +0200
Subject: [PATCH 17/18] Fix for initializing the activity

After the latest changes, pending transactions are also displayed in the main activity table. Therefore, the withdrawal activity should also be initialized in `activities` state.
---
 dapp/src/store/wallet/walletSlice.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dapp/src/store/wallet/walletSlice.ts b/dapp/src/store/wallet/walletSlice.ts
index 0e86956b3..ba89834f0 100644
--- a/dapp/src/store/wallet/walletSlice.ts
+++ b/dapp/src/store/wallet/walletSlice.ts
@@ -108,6 +108,7 @@ export const walletSlice = createSlice({
         ...state.latestActivities,
         [activity.id]: activity,
       }
+      state.activities = [...state.activities, activity]
     },
   },
 })

From 561eaf962450b4d7cc817c1daa008f06be97d157 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 20 Aug 2024 08:31:01 +0200
Subject: [PATCH 18/18] Fix a typo

Co-authored-by: Jakub Nowakowski <jakub.nowakowski@thesis.co>
---
 dapp/src/utils/activities.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/utils/activities.ts b/dapp/src/utils/activities.ts
index 94c47f472..44812948e 100644
--- a/dapp/src/utils/activities.ts
+++ b/dapp/src/utils/activities.ts
@@ -26,7 +26,7 @@ export function getEstimatedDuration(
 ): string {
   if (isWithdrawType(type)) return "6 hours"
 
-  if (amount < MIN_LIMIT_VALUE_DURATION) return "1 hours"
+  if (amount < MIN_LIMIT_VALUE_DURATION) return "1 hour"
 
   if (amount >= MIN_LIMIT_VALUE_DURATION && amount < MAX_LIMIT_VALUE_DURATION)
     return "2 hours"