Simplify the animation for the activity list

thesis · May 17, 2024 · b3e00ed · b3e00ed
1 parent dfe40ad
commit b3e00ed
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 46 deletions.
diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
@@ -1,10 +1,8 @@
-import React, { useEffect } from "react"
+import React from "react"
 import { List, ListItem, ListProps } from "@chakra-ui/react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
 import { useActivitiesNEW as useActivities, useAppDispatch } from "#/hooks"
 import { deleteActivity } from "#/store/wallet"
-import { useActivitiesIds } from "#/hooks/store"
-import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import ActivitiesListItem from "./ActivitiesListItem"
 
 const MotionList = motion(List)
@@ -18,45 +16,34 @@ const listItemVariants: Variants = {
 function ActivitiesList(props: ListProps) {
   const dispatch = useAppDispatch()
   const activities = useActivities()
-  const activitiesIds = useActivitiesIds()
-
-  const [allActivities, setAllActivities] = React.useState(activities)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setAllActivities(activities)
-    }, ONE_SEC_IN_MILLISECONDS)
-  }, [activities])
 
   const handleItemDismiss = (activityId: string) => {
     dispatch(deleteActivity(activityId))
   }
 
-  if (allActivities.length === 0) return null
+  if (activities.length === 0) return null
 
   return (
     <MotionList pos="relative" {...props}>
-      {allActivities.map((item) => (
-        <AnimatePresence mode="popLayout" key={item.id}>
-          {activitiesIds.includes(item.id) && (
-            <MotionListItem
-              layout="position"
-              key={item.txHash}
-              variants={listItemVariants}
-              initial={false}
-              animate="mounted"
-              exit="dismissed"
-              pb={2}
-              _last={{ pb: 0 }}
-            >
-              <ActivitiesListItem
-                {...item}
-                handleDismiss={() => handleItemDismiss(item.id)}
-              />
-            </MotionListItem>
-          )}
-        </AnimatePresence>
-      ))}
+      <AnimatePresence mode="popLayout">
+        {activities.map((item) => (
+          <MotionListItem
+            key={item.id}
+            layout="position"
+            variants={listItemVariants}
+            initial={false}
+            animate="mounted"
+            exit="dismissed"
+            pb={2}
+            _last={{ pb: 0 }}
+          >
+            <ActivitiesListItem
+              {...item}
+              handleDismiss={() => handleItemDismiss(item.id)}
+            />
+          </MotionListItem>
+        ))}
+      </AnimatePresence>
     </MotionList>
   )
 }

diff --git a/dapp/src/hooks/store/index.ts b/dapp/src/hooks/store/index.ts
@@ -10,4 +10,3 @@ export * from "./useActionFlowTokenAmount"
 // TODO: Rename when the old hook is deleted.
 export { useActivities as useActivitiesNEW } from "./useActivities"
 export * from "./useTransactions"
-export * from "./useActivitiesIds"
diff --git a/dapp/src/hooks/store/useActivitiesIds.ts b/dapp/src/hooks/store/useActivitiesIds.ts
diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts
@@ -7,10 +7,5 @@ export const selectActivities = createSelector(
   (activities) => Object.values(activities),
 )
 
-export const selectActivitiesIds = createSelector(
-  (state: RootState) => state.wallet.activities,
-  (activities) => Object.keys(activities),
-)
-
 export const selectTransactions = (state: RootState): Activity[] =>
   state.wallet.transactions