feat: Running balance in Transaction List

src/features/transactions/components/txn-list/txn-list-item/mint-burn-txn-list-item.tsx

@@ -1,14 +1,16 @@
 import { BurnEvent, MintEvent } from "@liftedinit/many-js"
-import { Flex, Text } from "@liftedinit/ui"
+import { amountFormatter, Box, Flex, Text } from "@liftedinit/ui"
 import { useMintBurnTxn } from "./hooks"
 import { BaseTxnListItem } from "./base-txn-list-item"
 
 export function MintBurnTxnListItem({
   txn,
   address,
+  balance,
 }: {
   txn: MintEvent | BurnEvent
   address: string
+  balance?: bigint
 }) {
   const time = txn.time
   const { TxnIcon, iconColor, title, displayAmount, symbol } = useMintBurnTxn({
@@ -22,12 +24,22 @@
       txnTypeName={title}
       txnTime={time}
       txnDetails={
-        <Flex gap={2} justifyContent="flex-end">
-          <Text fontWeight="medium" color={iconColor} justifySelf="flex-end">
-            {displayAmount}
-          </Text>
-          <Text>{symbol}</Text>
-        </Flex>
+        <Box>
+          <Flex gap={2} justifyContent="flex-end">
+            <Text fontWeight="medium" color={iconColor} justifySelf="flex-end">
+              {displayAmount}
+            </Text>
+            <Text>{symbol}</Text>
+          </Flex>
+          {balance && (
+            <Flex gap={2} justifyContent="flex-end">
+              <Text fontWeight="light" color="gray.300" justifySelf="flex-end">
+                {amountFormatter(balance)}
+              </Text>
+              <Text color="gray.300">{symbol}</Text>
+            </Flex>
+          )}
+        </Box>
       }
     />
   )

src/features/transactions/components/txn-list/txn-list-item/send-txn-list-item.tsx

@@ -1,14 +1,16 @@
 import { SendEvent } from "@liftedinit/many-js"
-import { Flex, Text } from "@liftedinit/ui"
+import { amountFormatter, Box, Flex, Text } from "@liftedinit/ui"
 import { useSendTxn } from "./hooks"
 import { BaseTxnListItem } from "./base-txn-list-item"
 
 export function SendTxnListItem({
   txn,
   address,
+  balance,
 }: {
   txn: SendEvent
   address: string
+  balance?: bigint
 }) {
   const time = txn.time
   const {
@@ -34,12 +36,22 @@ export function SendTxnListItem({
       actorName={contactName}
       actorAddress={toOrFromAddress}
       txnDetails={
-        <Flex gap={2} justifyContent="flex-end">
-          <Text fontWeight="medium" color={iconColor} justifySelf="flex-end">
-            {displayAmount}
-          </Text>
-          <Text>{symbol}</Text>
-        </Flex>
+        <Box>
+          <Flex gap={2} justifyContent="flex-end">
+            <Text fontWeight="medium" color={iconColor} justifySelf="flex-end">
+              {displayAmount}
+            </Text>
+            <Text>{symbol}</Text>
+          </Flex>
+          {balance && (
+            <Flex gap={2} justifyContent="flex-end">
+              <Text fontWeight="light" color="gray.300" justifySelf="flex-end">
+                {amountFormatter(balance)}
+              </Text>
+              <Text color="gray.300">{symbol}</Text>
+            </Flex>
+          )}
+        </Box>
       }
     />
   )

src/features/transactions/components/txn-list/txn-list-item/txn-list-item.tsx

@@ -26,13 +26,21 @@ type EditRolesEvent = AddRolesEvent | RemoveRolesEvent
 export function TxnListItem({
   transaction,
   address,
+  balance,
 }: {
   transaction: Event
   address: string
+  balance?: bigint
 }) {
   const txnTypeName = transaction.type as EventType
   if (txnTypeName === EventType.send) {
-    return <SendTxnListItem txn={transaction as SendEvent} address={address} />
+    return (
+      <SendTxnListItem
+        txn={transaction as SendEvent}
+        address={address}
+        balance={balance}
+      />
+    )
   } else if (txnTypeName === EventType.accountCreate) {
     return <CreateAccountTxnListItem txn={transaction as CreateAccountEvent} />
   } else if (txnTypeName === EventType.accountAddFeatures) {
@@ -48,7 +56,11 @@ export function TxnListItem({
     return <EditRolesTxnListItem txn={transaction as EditRolesEvent} />
   } else if (txnTypeName === EventType.mint || txnTypeName === EventType.burn) {
     return (
-      <MintBurnTxnListItem txn={transaction as MintEvent} address={address} />
+      <MintBurnTxnListItem
+        txn={transaction as MintEvent}
+        address={address}
+        balance={balance}
+      />
     )
   } else if (isMultisigTxnType(transaction.type)) {
     return <MultisigTxnListItem txn={transaction as MultisigEvent} />

src/features/transactions/components/txn-list/txn-list.tsx

@@ -11,9 +11,14 @@ import {
   TableContainer,
   Text,
 } from "@liftedinit/ui"
-import { useTransactionsList } from "features/transactions/queries"
+import {
+  calculateBalances,
+  useAllTransactionsList,
+  useTransactionsList,
+} from "features/transactions/queries"
 import { TxnListItem } from "./txn-list-item"
 import { TxnExport } from "./txn-export"
+import { useBalances } from "features/balances"
 
 export function TxnList({
   address,
@@ -38,6 +43,17 @@ export function TxnList({
   } = queryData
 
   const { count, transactions } = data
+  const { data: allTxns } = useAllTransactionsList({ accounts })
+  const { data: balances } = useBalances({ address })
+
+  let txnBalances = new Map()
+  if (allTxns && balances) {
+    txnBalances = calculateBalances(
+      allTxns.transactions,
+      balances.ownedAssetsWithBalance,
+      address,
+    )
+  }
 
   if (isError && error) {
     return (
@@ -71,6 +87,7 @@ export function TxnList({
                     transaction={t}
                     key={t._id + t.time}
                     address={address}
+                    balance={txnBalances.get(t._id)}
                   />
                 )
               })}

src/features/transactions/queries.ts

@@ -1,8 +1,17 @@
 import { useNetworkContext } from "features/network"
-import { BoundType, Event, ListOrderType, Network } from "@liftedinit/many-js"
+import {
+  BoundType,
+  BurnEvent,
+  Event,
+  ListOrderType,
+  MintEvent,
+  Network,
+  SendEvent,
+} from "@liftedinit/many-js"
 import { useMutation, useQuery, useQueryClient } from "react-query"
 import { useMemo, useState } from "react"
 import { arrayBufferToBase64 } from "@liftedinit/ui"
+import { Asset } from "features/balances"
 
 const PAGE_SIZE = 11
 const MAX_PAGE_SIZE = 100
@@ -304,3 +313,43 @@
     },
   }
 }
+
+export function calculateBalances(
+  transactions: ProcessedEvent[],
+  balances: Asset[],
+  address: string,
+): Map<string, bigint> {
+  const txnBalances = new Map()
+  const running = new Map()
+
+  balances.forEach(({ identity, balance }) => running.set(identity, balance))
+  transactions.forEach(txn => {
+    if (["send", "mint", "burn"].includes(txn.type)) {
+      const { id, symbolAddress } = txn as SendEvent
+      const balance = running.get(symbolAddress) ?? BigInt(0)
+      txnBalances.set(arrayBufferToBase64(id), balance)
+      let updated
+
+      switch (txn.type) {
+        case "send": {
+          const { amount, from } = txn as SendEvent
+          updated = from === address ? balance + amount : balance - amount
+          break
+        }
+        case "mint": {
+          const { amounts } = txn as MintEvent
+          updated = balance + amounts[address]
+          break
+        }
+        case "burn": {
+          const { amounts } = txn as BurnEvent
+          updated = balance - amounts[address]
+          break
+        }
+      }
+
+      running.set(symbolAddress, updated)
+    }
+  })
+  return txnBalances
+}

src/views/home/__tests__/home.test.tsx

@@ -72,7 +72,7 @@ const mockListData = {
 const mockBalanceData = {
   balances: new Map([
     ["mabc", BigInt(1000000)],
-    ["mghi", BigInt(5000000)],
+    ["mghi", BigInt(6000000)],
   ]),
 }
 
@@ -114,14 +114,14 @@ describe("home page", () => {
     expect(assetsTab).toBeInTheDocument()
     expect(activityTab).toBeInTheDocument()
   })
-  it("should list the balances of each token the account holds", async function () {
+  it("should list the balances of each token the account holds", async function() {
     setupHome()
 
-    expect(screen.getByText(/abc/i)).toBeInTheDocument()
+    expect(screen.getAllByText(/abc/i)[0]).toBeInTheDocument()
     expect(screen.getByText("0.001")).toBeInTheDocument()
 
-    expect(screen.getByText(/ghi/i)).toBeInTheDocument()
-    expect(screen.getByText("0.005")).toBeInTheDocument()
+    expect(screen.getAllByText(/ghi/i)[0]).toBeInTheDocument()
+    expect(screen.getByText("0.006")).toBeInTheDocument()
   })
   it("should display an error message", async () => {
     mockNetwork.ledger.balance = jest.fn().mockImplementation(async arg => {
@@ -164,14 +164,12 @@ describe("home page", () => {
     const assets = await screen.findAllByLabelText(/asset list item/i)
     userEvent.click(assets[0])
     expect(screen.getByText(/0.001 abc/i)).toBeInTheDocument()
-    await waitFor(() =>
-      expect(mockNetwork.events.list).toHaveBeenCalledTimes(1),
-    )
+    await waitFor(() => expect(mockNetwork.events.list).toHaveBeenCalled())
     const rows = await screen.findAllByRole("row")
     expect(rows.length).toBe(2)
 
     const firstTxn = within(rows[0])
-    expect(firstTxn.getByText(/abc/i)).toBeInTheDocument()
+    expect(firstTxn.getAllByText(/abc/i)[0]).toBeInTheDocument()
     expect(firstTxn.getByText(/send/i)).toBeInTheDocument()
     expect(firstTxn.getByText(/-0.000000001/i)).toBeInTheDocument()
     expect(firstTxn.getByText(/2023/i)).toBeInTheDocument()
@@ -180,7 +178,7 @@ describe("home page", () => {
     expect(firstTxn.getByText(/8:03:00/i)).toBeInTheDocument()
 
     const secondTxn = within(rows[1])
-    expect(secondTxn.getByText(/abc/i)).toBeInTheDocument()
+    expect(secondTxn.getAllByText(/abc/i)[0]).toBeInTheDocument()
     expect(secondTxn.getByText(/receive/i)).toBeInTheDocument()
     expect(secondTxn.getByText(/\+0.000000003/i)).toBeInTheDocument()
     expect(secondTxn.getByText(/2022/i)).toBeInTheDocument()
@@ -192,9 +190,7 @@ describe("home page", () => {
     const { activityTab } = setupHome()
     userEvent.click(activityTab)
 
-    await waitFor(() =>
-      expect(mockNetwork.events.list).toHaveBeenCalledTimes(1),
-    )
+    await waitFor(() => expect(mockNetwork.events.list).toHaveBeenCalled())
 
     const rows = screen.getAllByRole("row")
 
@@ -205,15 +201,15 @@ describe("home page", () => {
     expect(screen.getByText(/9/i)).toBeInTheDocument()
     expect(screen.getByText(/8:03:00/i)).toBeInTheDocument()
     expect(screen.getByText(/-0.000000001/i)).toBeInTheDocument()
-    expect(screen.getByText(/abc/i)).toBeInTheDocument()
+    expect(screen.getAllByText(/abc/i)[0]).toBeInTheDocument()
 
     expect(screen.getByText(/receive/i)).toBeInTheDocument()
     expect(screen.getByText(/2022/i)).toBeInTheDocument()
     expect(screen.getByText(/4/i)).toBeInTheDocument()
     expect(screen.getByText(/9/i)).toBeInTheDocument()
     expect(screen.getByText(/8:01:00/i)).toBeInTheDocument()
     expect(screen.getByText(/\+0.000000003/i)).toBeInTheDocument()
-    expect(screen.getByText(/ghi/i)).toBeInTheDocument()
+    expect(screen.getAllByText(/ghi/i)[0]).toBeInTheDocument()
   })
 })