feat: Mint & Burn activity

package.json

@@ -20,7 +20,7 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@fontsource/roboto": "^4.5.8",
-    "@liftedinit/many-js": "^0.1.0-alpha.9",
+    "@liftedinit/many-js": "^0.1.0-alpha.10",
     "@liftedinit/ui": "github:liftedinit/lifted-ui",
     "@web3auth/openlogin-adapter": "^2.1.3",
     "@web3auth/web3auth": "^2.1.3",

src/features/transactions/components/txn-list/txn-list-item/hooks.ts

@@ -10,17 +10,20 @@ import {
   MultisigExecuteEvent,
   MultisigWithdrawEvent,
   MultisigSetDefaultsEvent,
+  BurnEvent,
+  MintEvent,
 } from "@liftedinit/many-js"
 import {
   CheckCircleIcon,
-  MinusCircleIcon,
   LightningIcon,
   PendingIcon,
   ReceiveIcon,
   SendOutlineIcon,
   UndoIcon,
   SettingsOutlineIcon,
   amountFormatter,
+  MinusCircleIcon,
+  PlusCircleIcon,
 } from "@liftedinit/ui"
 import {
   approverRoles,
@@ -67,6 +70,34 @@ export function useSendTxn({
   }
 }
 
+export function useMintBurnTxn({
+  address,
+  txn,
+}: {
+  address: string
+  txn: MintEvent | BurnEvent
+}) {
+  const { data } = useLedgerInfo({ address })
+  const symbols = data!.symbols
+
+  const isMint = txn.type === EventType.mint
+  const { amounts, symbolAddress } = txn as MintEvent
+  const TxnIcon = isMint ? PlusCircleIcon : MinusCircleIcon
+  const iconColor = isMint ? "green.500" : "red"
+  const title = isMint ? "mint" : "burn"
+  const amount = BigInt(amounts[address])
+
+  const displayAmount = `${isMint ? "+" : "-"}${amountFormatter(amount)}`
+
+  return {
+    title,
+    TxnIcon,
+    iconColor,
+    displayAmount,
+    symbol: symbols.get(symbolAddress),
+  }
+}
+
 export function useMultisigTxn(txn: MultisigEvent) {
   let data: {
     actionLabel: string

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

@@ -0,0 +1,34 @@
+import { BurnEvent, MintEvent } from "@liftedinit/many-js"
+import { Flex, Text } from "@liftedinit/ui"
+import { useMintBurnTxn } from "./hooks"
+import { BaseTxnListItem } from "./base-txn-list-item"
+
+export function MintBurnTxnListItem({
+  txn,
+  address,
+}: {
+  txn: MintEvent | BurnEvent
+  address: string
+}) {
+  const time = txn.time
+  const { TxnIcon, iconColor, title, displayAmount, symbol } = useMintBurnTxn({
+    address,
+    txn,
+  })
+
+  return (
+    <BaseTxnListItem
+      icon={<TxnIcon />}
+      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>
+      }
+    />
+  )
+}

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

@@ -8,6 +8,7 @@ import {
   SetDescriptionEvent,
   AddRolesEvent,
   RemoveRolesEvent,
+  MintEvent,
 } from "@liftedinit/many-js"
 import { multisigTxnTypes } from "features/accounts"
 import { MultisigTxnListItem } from "./multisig-txn-list-item"
@@ -16,6 +17,7 @@ import { SendTxnListItem } from "./send-txn-list-item"
 import { AddFeaturesTxnListItem } from "./add-features-txn-list-item"
 import { SetDescriptionTxnListItem } from "./set-description-txn-list-item"
 import { EditRolesTxnListItem } from "./edit-roles-txn-list-item"
+import { MintBurnTxnListItem } from "./mint-burn-txn-list-item"
 
 type EditRolesEvent = AddRolesEvent | RemoveRolesEvent
 
@@ -42,6 +44,10 @@ export function TxnListItem({
     txnTypeName === EventType.accountRemoveRoles
   ) {
     return <EditRolesTxnListItem txn={transaction as EditRolesEvent} />
+  } else if (txnTypeName === EventType.mint || txnTypeName === EventType.burn) {
+    return (
+      <MintBurnTxnListItem txn={transaction as MintEvent} address={address} />
+    )
   } else if (isMultisigTxnType(transaction.type)) {
     return <MultisigTxnListItem txn={transaction as MultisigEvent} />
   }