Separate activities from transactions

dapp/src/hooks/store/index.ts

@@ -5,4 +5,4 @@ export * from "./useSharesBalance"
 export * from "./useMinDepositAmount"
 // TODO: Rename when the old hook is deleted.
 export { useActivities as useActivitiesNEW } from "./useActivities"
-export * from "./useCompletedActivities"
+export * from "./useTransactions"

dapp/src/hooks/store/useTransactions.ts

@@ -0,0 +1,6 @@
+import { selectTransactions } from "#/store/wallet"
+import { useAppSelector } from "./useAppSelector"
+
+export function useTransactions() {
+  return useAppSelector(selectTransactions)
+}

dapp/src/hooks/subgraph/useFetchActivities.ts

@@ -1,24 +1,42 @@
-import { useCallback } from "react"
-import { subgraphAPI } from "#/utils"
-import { setActivities } from "#/store/wallet"
+import { useCallback, useEffect } from "react"
+import { logPromiseFailure, subgraphAPI } from "#/utils"
+import { setActivities, setTransactions } from "#/store/wallet"
+import { useInterval } from "@chakra-ui/react"
+import { ONE_MINUTE_IN_SECONDS, ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import { useAppDispatch } from "../store/useAppDispatch"
 import { useWalletContext } from "../useWalletContext"
 
+const INTERVAL_TIME = ONE_SEC_IN_MILLISECONDS * ONE_MINUTE_IN_SECONDS * 30
 // TODO: Use the correct function from SDK
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const calculateEthAddress = (btcAddress: string) =>
-  "0x4c9e39e5ff458a811708c03aea21b8327118cf13"
+  "0x45e2e415989477ea5450e440405f6ac858019e6b"
 
 export function useFetchActivities() {
   const dispatch = useAppDispatch()
   const { btcAccount } = useWalletContext()
 
-  return useCallback(async () => {
+  const fetchActivities = useCallback(async () => {
     if (!btcAccount) return
 
     const ethAddress = calculateEthAddress(btcAccount.address)
     const result = await subgraphAPI.fetchActivityData(ethAddress)
+    const activities = result.filter(({ status }) => status !== "completed")
 
-    dispatch(setActivities(result))
+    dispatch(setTransactions(result))
+    dispatch(setActivities(activities))
   }, [btcAccount, dispatch])
+
+  const handleFetchActivities = useCallback(
+    () => logPromiseFailure(fetchActivities()),
+    [fetchActivities],
+  )
+
+  useEffect(() => {
+    if (!btcAccount) return
+
+    handleFetchActivities()
+  }, [btcAccount, dispatch, handleFetchActivities])
+
+  useInterval(handleFetchActivities, INTERVAL_TIME)
 }

dapp/src/hooks/subgraph/useInitDataFromSubgraph.ts

@@ -1,15 +1,5 @@
-import { useEffect } from "react"
-import { logPromiseFailure } from "#/utils"
 import { useFetchActivities } from "./useFetchActivities"
-import { useWalletContext } from "../useWalletContext"
 
 export function useInitDataFromSubgraph() {
-  const { btcAccount } = useWalletContext()
-  const fetchActivities = useFetchActivities()
-
-  useEffect(() => {
-    if (btcAccount) {
-      logPromiseFailure(fetchActivities())
-    }
-  }, [btcAccount, fetchActivities])
+  useFetchActivities()
 }

dapp/src/store/wallet/walletSelector.ts

@@ -1,11 +1,8 @@
 import { Activity } from "#/types"
-import { createSelector } from "@reduxjs/toolkit"
 import { RootState } from ".."
 
 export const selectActivities = (state: RootState): Activity[] =>
-  state.wallet.activities
+  Object.values(state.wallet.activities)
 
-export const selectCompletedActivities = createSelector(
-  [selectActivities],
-  (activities) => activities.filter(({ status }) => status === "completed"),
-)
+export const selectTransactions = (state: RootState): Activity[] =>
+  state.wallet.transactions

dapp/src/store/wallet/walletSlice.ts

@@ -1,22 +1,46 @@
-import { Activity } from "#/types"
+import { ActivitiesByIds, Activity } from "#/types"
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 
 type WalletState = {
-  activities: Activity[]
+  activities: ActivitiesByIds
+  transactions: Activity[]
 }
 
 const initialState: WalletState = {
-  activities: [],
+  activities: {},
+  transactions: [],
 }
 
 export const walletSlice = createSlice({
   name: "wallet",
   initialState,
   reducers: {
+    setTransactions(state, action: PayloadAction<Activity[]>) {
+      state.transactions = action.payload
+    },
     setActivities(state, action: PayloadAction<Activity[]>) {
-      state.activities = action.payload
+      const newActivitiesByIds = Object.fromEntries(
+        action.payload.map((activity) => [activity.id, activity]),
+      )
+      const newActivitiesIds = new Set(Object.keys(newActivitiesByIds))
+
+      const updatedActivities = Object.values(
+        state.activities,
+      ).reduce<ActivitiesByIds>((acc, activity) => {
+        if (!newActivitiesIds.has(activity.id)) {
+          acc[activity.id] = { ...activity, status: "completed" }
+        }
+        return acc
+      }, {})
+
+      state.activities = Object.assign(updatedActivities, newActivitiesByIds)
+    },
+    deleteActivity(state, action: PayloadAction<string>) {
+      const activityId = action.payload
+      delete state.activities[activityId]
     },
   },
 })
 
-export const { setActivities } = walletSlice.actions
+export const { setTransactions, setActivities, deleteActivity } =
+  walletSlice.actions

dapp/src/types/activity.ts

@@ -21,3 +21,7 @@ export type Activity = {
   type: "deposit" | "withdraw"
   status: "completed" | "pending"
 }
+
+export type ActivitiesByIds = {
+  [id: string]: Activity
+}