Update Wallet and SingleAsset to show current account activity

To do this, WalletActivityList now takes an array of activities to display from its caller rather than selecting it directly. The Wallet and SingleAsset components use selectCurrentAccountActivitiesWithTimestamps to pull current activity, and SingleAsset further filters to the asset it is displaying.
0xDaedalus · Dec 3, 2021 · ae1b61c · ae1b61c
1 parent 4492979
commit ae1b61c
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 91 deletions.
diff --git a/background/redux-slices/accounts.ts b/background/redux-slices/accounts.ts
@@ -1,4 +1,4 @@
-import { createSlice, createSelector, current } from "@reduxjs/toolkit"
+import { createSlice } from "@reduxjs/toolkit"
 import Emittery from "emittery"
 import { createBackgroundAsyncThunk } from "./utils"
 import { AccountBalance, AddressNetwork } from "../accounts"
@@ -9,14 +9,9 @@ import {
   Network,
 } from "../networks"
 import { AnyAssetAmount } from "../assets"
-import { AssetsState, selectAssetPricePoint } from "./assets"
-import { selectHideDust, UIState } from "./ui"
 import {
   AssetMainCurrencyAmount,
   AssetDecimalAmount,
-  formatCurrencyAmount,
-  enrichAssetAmountWithDecimalValues,
-  enrichAssetAmountWithMainCurrencyValues,
 } from "./utils/asset-utils"
 import { DomainName, HexString, URI } from "../types"
 
@@ -49,7 +44,6 @@ export type AccountState = {
 export type CombinedAccountData = {
   totalMainCurrencyValue?: string
   assets: AnyAssetAmount[]
-  activity: AnyEVMTransaction[]
 }
 
 /**
@@ -60,38 +54,11 @@ export type CompleteAssetAmount = AnyAssetAmount &
   AssetMainCurrencyAmount &
   AssetDecimalAmount
 
-// Comparator for two transactions by block height. Can be used to sort in
-// descending order of block height, with unspecified block heights (i.e.,
-// unconfirmed transactions) at the front of the list in stable order.
-function transactionBlockComparator(
-  transactionA: AnyEVMTransaction,
-  transactionB: AnyEVMTransaction
-) {
-  // If both transactions are confirmed, go in descending order of block height.
-  if (transactionA.blockHeight !== null && transactionB.blockHeight !== null) {
-    return transactionB.blockHeight - transactionA.blockHeight
-  }
-
-  // If both are unconfirmed, they are equal.
-  if (transactionA.blockHeight === transactionB.blockHeight) {
-    return 0
-  }
-
-  // If transaction B is unconfirmed, it goes before transaction A.
-  if (transactionA.blockHeight !== null) {
-    return 1
-  }
-
-  // If transaction A is unconfirmed, it goes before transaction B.
-  return -1
-}
-
 export const initialState = {
   accountsData: {},
   combinedData: {
     totalMainCurrencyValue: "",
     assets: [],
-    activity: [],
   },
   blocks: {},
 } as AccountState
@@ -270,20 +237,6 @@ const accountSlice = createSlice({
           ),
         ]
       })
-
-      immerState.combinedData.activity = Array.from(
-        // Use a Map to drop any duplicate transaction entries, e.g. a send
-        // between two tracked accounts.
-        new Map(
-          Object.values(current(immerState.accountsData))
-            .flatMap((ad) =>
-              ad === "loading"
-                ? []
-                : ad.unconfirmedTransactions.concat(ad.confirmedTransactions)
-            )
-            .map((t) => [t.hash, t])
-        ).values()
-      ).sort(transactionBlockComparator)
     },
     transactionConfirmed: (
       immerState,
@@ -308,20 +261,6 @@ const accountSlice = createSlice({
           ),
         ]
       })
-
-      immerState.combinedData.activity = Array.from(
-        // Use a Map to drop any duplicate transaction entries, e.g. a send
-        // between two tracked accounts.
-        new Map(
-          Object.values(current(immerState.accountsData))
-            .flatMap((ad) =>
-              ad === "loading"
-                ? []
-                : ad.unconfirmedTransactions.concat(ad.confirmedTransactions)
-            )
-            .map((t) => [t.hash, t])
-        ).values()
-      ).sort(transactionBlockComparator)
     },
   },
 })

diff --git a/background/redux-slices/selectors/accountsSelectors.ts b/background/redux-slices/selectors/accountsSelectors.ts
@@ -32,21 +32,6 @@ export const selectAccountAndTimestampedActivities = createSelector(
   getAssetsState,
   selectHideDust,
   (account, assets, hideDust) => {
-    // Derive activities with timestamps included
-    const activity = account.combinedData.activity.map((activityItem) => {
-      const isSent =
-        activityItem.from.toLowerCase() ===
-        Object.keys(account.accountsData)[0].toLowerCase()
-
-      return {
-        ...activityItem,
-        ...(activityItem.blockHeight && {
-          timestamp: account?.blocks[activityItem.blockHeight]?.timestamp,
-        }),
-        isSent,
-      }
-    })
-
     // Keep a tally of the total user value; undefined if no main currency data
     // is available.
     let totalMainCurrencyAmount: number | undefined
@@ -102,10 +87,8 @@ export const selectAccountAndTimestampedActivities = createSelector(
               desiredDecimals
             )
           : undefined,
-        activity: account.combinedData.activity,
       },
       accountData: account.accountsData,
-      activity,
     }
   }
 )

diff --git a/src/background-ui.ts b/src/background-ui.ts
@@ -1,4 +1,5 @@
-import { browser, newProxyStore } from "@tallyho/tally-background"
+// TODO This is meant to do UI notifications, but is incomplete.
+/* import { browser, newProxyStore } from "@tallyho/tally-background"
 
 newProxyStore().then((backgroundStore) => {
   // undefined if no account has been resolved, string array with the latest
@@ -39,4 +40,4 @@ newProxyStore().then((backgroundStore) => {
       latestActivityHashes = undefined
     }
   })
-})
+}) */
diff --git a/ui/components/Wallet/WalletActivityList.tsx b/ui/components/Wallet/WalletActivityList.tsx
@@ -1,22 +1,24 @@
 import React, { ReactElement, useCallback } from "react"
 import { setShowingActivityDetail } from "@tallyho/tally-background/redux-slices/ui"
-import { selectCurrentAccountActivitiesWithTimestamps } from "@tallyho/tally-background/redux-slices/selectors"
+import { ActivityItem } from "@tallyho/tally-background/redux-slices/activities"
 import { useBackgroundDispatch, useBackgroundSelector } from "../../hooks"
 import SharedSlideUpMenu from "../Shared/SharedSlideUpMenu"
 import SharedLoadingSpinner from "../Shared/SharedLoadingSpinner"
 import WalletActivityDetails from "./WalletActivityDetails"
 import WalletActivityListItem from "./WalletActivityListItem"
 
-export default function WalletActivityList(): ReactElement {
+type Props = {
+  activities: ActivityItem[]
+}
+
+export default function WalletActivityList({
+  activities,
+}: Props): ReactElement {
   const dispatch = useBackgroundDispatch()
   const { showingActivityDetail } = useBackgroundSelector(
     (background) => background.ui
   )
 
-  const activities = useBackgroundSelector(
-    selectCurrentAccountActivitiesWithTimestamps
-  )
-
   const handleOpen = useCallback(
     (activityItem) => {
       dispatch(setShowingActivityDetail(activityItem))

diff --git a/ui/pages/SingleAsset.tsx b/ui/pages/SingleAsset.tsx
@@ -1,6 +1,9 @@
 import React, { ReactElement } from "react"
 import { useLocation } from "react-router-dom"
-import { selectCurrentAccountBalances } from "@tallyho/tally-background/redux-slices/selectors"
+import {
+  selectCurrentAccountActivitiesWithTimestamps,
+  selectCurrentAccountBalances,
+} from "@tallyho/tally-background/redux-slices/selectors"
 import { useBackgroundSelector } from "../hooks"
 import CorePage from "../components/Core/CorePage"
 import SharedAssetIcon from "../components/Shared/SharedAssetIcon"
@@ -12,6 +15,12 @@ export default function SingleAsset(): ReactElement {
   const location = useLocation<{ symbol: string }>()
   const { symbol } = location.state
 
+  const filteredActivities = useBackgroundSelector((state) =>
+    selectCurrentAccountActivitiesWithTimestamps(state).filter(
+      ({ token }) => token.symbol === symbol
+    )
+  )
+
   const { asset, localizedMainCurrencyAmount, localizedDecimalAmount } =
     useBackgroundSelector((state) => {
       const balances = selectCurrentAccountBalances(state)
@@ -75,7 +84,7 @@ export default function SingleAsset(): ReactElement {
           <div className="right">Move to Ethereum</div>
         </div>
         <div className="label_light standard_width_padded">Activity</div>
-        <WalletActivityList />
+        <WalletActivityList activities={filteredActivities} />
       </CorePage>
       <style jsx>
         {`

diff --git a/ui/pages/Wallet.tsx b/ui/pages/Wallet.tsx
@@ -1,6 +1,9 @@
 import React, { ReactElement, useState } from "react"
 import { Redirect } from "react-router-dom"
-import { selectCurrentAccountBalances } from "@tallyho/tally-background/redux-slices/selectors"
+import {
+  selectCurrentAccountActivitiesWithTimestamps,
+  selectCurrentAccountBalances,
+} from "@tallyho/tally-background/redux-slices/selectors"
 import { useBackgroundSelector } from "../hooks"
 import CorePage from "../components/Core/CorePage"
 import SharedPanelSwitcher from "../components/Shared/SharedPanelSwitcher"
@@ -18,6 +21,9 @@ export default function Wallet(): ReactElement {
     assetAmounts: [],
     totalMainCurrencyValue: undefined,
   }
+  const currentAccountActivities = useBackgroundSelector(
+    selectCurrentAccountActivitiesWithTimestamps
+  )
 
   const initializationLoadingTimeExpired = useBackgroundSelector(
     (background) => background.ui?.initializationLoadingTimeExpired
@@ -55,7 +61,7 @@ export default function Wallet(): ReactElement {
                   }
                 />
               ) : (
-                <WalletActivityList />
+                <WalletActivityList activities={currentAccountActivities} />
               )}
             </div>
           </div>