Fix displaying activity items

thesis · May 15, 2024 · 99ae277 · 99ae277
1 parent d8caedb
commit 99ae277
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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,25 +26,27 @@ 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>
 
           <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
@@ -18,4 +18,5 @@ export type Activity = {
   txHash: string
   amount: bigint
   status: DepositStatus
+  type?: "deposit" | "withdraw"
 }