From 99ae27755c21ef51421c4598cad7c89a020a8322 Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@thesis.co>
Date: Wed, 15 May 2024 19:03:21 +0200
Subject: [PATCH] Fix displaying activity items

---
 .../components/shared/ActivitiesList/ActivitiesList.tsx  | 2 +-
 .../shared/ActivitiesList/ActivitiesListItem.tsx         | 9 ++++++---
 dapp/src/types/activity.ts                               | 1 +
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
index 755d2857f..79b2ef852 100644
--- a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
+++ b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
@@ -26,7 +26,7 @@ function ActivitiesList(props: ListProps) {
   return activities.length > 0 ? (
     <MotionList pos="relative" {...props}>
       {activities.map((item) => (
-        <AnimatePresence mode="popLayout">
+        <AnimatePresence mode="popLayout" key={item.txHash}>
           {!dismissedActivities.includes(item.txHash) && (
             <MotionListItem
               layout="position"
diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
index 73403a4ed..31696755e 100644
--- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
+++ b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
@@ -13,6 +13,7 @@ import {
   VStack,
   VisuallyHidden,
 } from "@chakra-ui/react"
+import { DepositStatus } from "@acre-btc/sdk"
 import { CurrencyBalance } from "../CurrencyBalance"
 import Spinner from "../Spinner"
 import BlockExplorerLink from "../BlockExplorerLink"
@@ -25,17 +26,19 @@ type ActivitiesListItemProps = Omit<AlertProps, "status"> &
 function ActivitiesListItem(props: ActivitiesListItemProps) {
   const { amount, status, txHash, type, handleDismiss, ...restProps } = props
 
+  const isCompleted = status === DepositStatus.Finalized
+
   return (
     <Alert as={HStack} variant="process" {...restProps}>
       <AlertIcon
         color="brand.400"
-        as={status === "completed" ? LoadingSpinnerSuccessIcon : Spinner}
+        as={isCompleted ? LoadingSpinnerSuccessIcon : Spinner}
       />
 
       <VStack flex={1} spacing={0} align="stretch">
         <HStack justify="space-between" as={AlertTitle}>
           <Text as="span">
-            {status === "completed"
+            {isCompleted
               ? `${type === "withdraw" ? "Unstaking" : "Staking"} completed`
               : `${type === "withdraw" ? "Unstaking" : "Staking"}...`}
           </Text>
@@ -43,7 +46,7 @@ function ActivitiesListItem(props: ActivitiesListItemProps) {
           <CurrencyBalance amount={amount} currency="bitcoin" />
         </HStack>
         <HStack justify="space-between" as={AlertDescription}>
-          {status === "completed" ? (
+          {isCompleted ? (
             <Button
               variant="link"
               fontSize="sm"
diff --git a/dapp/src/types/activity.ts b/dapp/src/types/activity.ts
index e6fc1b8c9..38a62d08c 100644
--- a/dapp/src/types/activity.ts
+++ b/dapp/src/types/activity.ts
@@ -18,4 +18,5 @@ export type Activity = {
   txHash: string
   amount: bigint
   status: DepositStatus
+  type?: "deposit" | "withdraw"
 }