Derive multisig ownership history based on past transactions and latest discovery output

packages/frontend/src/view/components/protocol/LayerZeroMultisig.tsx

@@ -11,6 +11,7 @@ import { PaginatedContainer, PaginationControls } from '../PaginatedContainer'
 import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { SafeMultisigTransaction } from '../safe/SafeMultisigTransaction'
+import { deriveMultisigOwnership } from '../safe/utils'
 import { Subsection } from '../Subsection'
 import { Warning } from '../Warning'
 import { GnosisSafeBadge } from './Badges'
@@ -94,90 +95,91 @@ export function LayerZeroMultisig({
     )
   }
 
-  if (!allTransactions || allTransactions.length === 0) {
+  if (!allTransactions || allTransactions.length === 0 || !hasData) {
     return (
       <ProtocolComponentCard title={<Title />} badge={<GnosisSafeBadge />}>
         <Info
           title="No transactions have been executed"
-          subtitle="The multisig contract has no transactions"
+          subtitle="The multisig contract has no transactions or the data is insufficient"
         />
       </ProtocolComponentCard>
     )
   }
 
+  const derivedOwnershipHistory = deriveMultisigOwnership(
+    allTransactions,
+    owners.length,
+  )
+
   return (
     <ProtocolComponentCard
       title={<Title />}
       badge={<GnosisSafeBadge />}
       subtitle={<BlockchainAddress address={multisigAddress} full />}
       description="Safe multi-signature contract managed by LayerZero. Owner of the Endpoint and the UltraLightNodeV2 contracts. Any configuration change must be made through the LayerZero multisig wallet. Transaction information is being fetched from the safe transaction service."
     >
-      {hasData && (
-        <>
-          <Subsection>
-            <Row
-              label={
-                <InfoTooltip text="A required threshold of signatures for a transaction to be executed.">
-                  Threshold
-                </InfoTooltip>
-              }
-              value={`${threshold}/${owners.length}`}
-            />
-            <Row
-              label={
-                <InfoTooltip text="The addresses allowed to sign the messages from the MultiSig contract.">
-                  Owners
-                </InfoTooltip>
-              }
-              value={
-                <div className="flex flex-col items-start gap-2 text-sm">
-                  {owners.map((owner, i) => (
-                    <BlockchainAddress key={i} address={owner} />
-                  ))}
-                </div>
-              }
-            />
-          </Subsection>
-          <Subsection>
-            <div className="flex flex-col py-3 text-md font-medium">
-              <div className="flex flex-col items-center justify-between gap-3 md:flex-row md:gap-0">
-                <h1>Multisig transactions</h1>
-                <PaginationControls
-                  amountOfPages={TOTAL_PAGES_AMOUNT}
-                  currentPage={page}
-                  setPage={setPage}
-                />
+      <>
+        <Subsection>
+          <Row
+            label={
+              <InfoTooltip text="A required threshold of signatures for a transaction to be executed.">
+                Threshold
+              </InfoTooltip>
+            }
+            value={`${threshold}/${owners.length}`}
+          />
+          <Row
+            label={
+              <InfoTooltip text="The addresses allowed to sign the messages from the MultiSig contract.">
+                Owners
+              </InfoTooltip>
+            }
+            value={
+              <div className="flex flex-col items-center gap-1 text-3xs md:items-start md:gap-2 md:text-left md:text-xs">
+                {owners.map((owner, i) => (
+                  <BlockchainAddress key={i} address={owner} />
+                ))}
               </div>
-              <span className="w-full pt-3 text-center text-xs text-gray-100 md:text-right">
-                {LOWER_PAGE_BOUND} - {UPPER_PAGE_BOUND} out of{' '}
-                {allTransactions.length} transactions
-              </span>
+            }
+          />
+        </Subsection>
+        <Subsection>
+          <div className="flex flex-col py-3 text-md font-medium">
+            <div className="flex flex-col items-center justify-between gap-3 md:flex-row md:gap-0">
+              <h1>Multisig transactions</h1>
+              <PaginationControls
+                amountOfPages={TOTAL_PAGES_AMOUNT}
+                currentPage={page}
+                setPage={setPage}
+              />
             </div>
+            <span className="w-full pt-3 text-center text-xs text-gray-100 md:text-right">
+              {LOWER_PAGE_BOUND} - {UPPER_PAGE_BOUND} out of{' '}
+              {allTransactions.length} transactions
+            </span>
+          </div>
 
-            <div className="overflow-x-auto">
-              <div className="col-span-5 grid grid-cols-multisig-small rounded bg-gray-600 py-3 text-left text-[13px] font-semibold text-gray-50 md:min-w-[800px] md:grid-cols-multisig">
-                <div className="px-4 md:px-6">TIME</div>
-                <div className="hidden md:block">METHOD</div>
-                <div>
-                  <span className="hidden md:inline">CONFIRMATIONS</span>
-                </div>
-                <div>STATUS</div>
-                <div />
-              </div>
-              <PaginatedContainer itemsPerPage={TXS_PER_PAGE} page={page}>
-                {allTransactions.map((transaction, i) => (
-                  <SafeMultisigTransaction
-                    amountOfOwners={owners.length}
-                    transaction={transaction}
-                    allTransactions={allTransactions}
-                    key={i}
-                  />
-                ))}
-              </PaginatedContainer>
+          <div className="mb-3 overflow-x-auto">
+            <div className="col-span-5 grid min-w-[800px] grid-cols-multisig rounded bg-gray-600 py-3 text-left text-[13px] font-semibold text-gray-50">
+              <div className="px-6">SUBMITTED</div>
+              <div>METHOD</div>
+              <div>CONFIRMATIONS</div>
+              <div>STATUS</div>
+              <div />
             </div>
-          </Subsection>
-        </>
-      )}
+            <PaginatedContainer itemsPerPage={TXS_PER_PAGE} page={page}>
+              {allTransactions.map((transaction, i) => (
+                <SafeMultisigTransaction
+                  transaction={transaction}
+                  allTransactions={allTransactions}
+                  derivedOwnershipHistory={derivedOwnershipHistory}
+                  key={i}
+                />
+              ))}
+            </PaginatedContainer>
+          </div>
+        </Subsection>
+      </>
     </ProtocolComponentCard>
   )
 }

packages/frontend/src/view/components/safe/SafeMultisigTransaction.tsx

@@ -1,8 +1,4 @@
-import {
-  EthereumAddress,
-  SafeMultisigTransaction,
-  SafeTransactionDecodedData,
-} from '@lz/libs'
+import { EthereumAddress, SafeMultisigTransaction } from '@lz/libs'
 import cx from 'classnames'
 import React from 'react'
 
@@ -13,16 +9,22 @@ import { BlockNumber } from '../BlockNumber'
 import { Code } from '../Code'
 import { ExecutionTimeline } from '../ExecutionTimeline'
 import { TransactionHash } from '../TransactionHash'
-import { decodeCall, paramToSummary, toUTC } from './utils'
+import {
+  getDecodedProperties,
+  getOwnershipForTransaction,
+  MultisigOwnershipHistory,
+  paramToSummary,
+  toUTC,
+} from './utils'
 
 export function SafeMultisigTransaction({
   transaction,
   allTransactions,
-  amountOfOwners,
+  derivedOwnershipHistory,
 }: {
   transaction: SafeMultisigTransaction
   allTransactions: SafeMultisigTransaction[]
-  amountOfOwners: number
+  derivedOwnershipHistory: MultisigOwnershipHistory
 }) {
   const [isExpanded, setIsExpanded] = React.useState(false)
   // Data obtained from transaction payload itself
@@ -34,7 +36,6 @@ export function SafeMultisigTransaction({
     ? toUTC(transaction.executionDate)
     : 'Not executed'
   const acquiredConfirmations = transaction.confirmations?.length ?? 0
-  const stringConfirmations = `${acquiredConfirmations}/${amountOfOwners}`
   const nonce = transaction.nonce
   const target = transaction.to
   const rawData = transaction.data ?? 'No Data'
@@ -50,6 +51,11 @@ export function SafeMultisigTransaction({
 
   const txStatus = getTransactionStatus(transaction, allTransactions)
 
+  const ownersAtSubmissionTime = getOwnershipForTransaction(
+    derivedOwnershipHistory,
+    submissionDate,
+  )
+
   return (
     <div
       className={cx(
@@ -66,7 +72,7 @@ export function SafeMultisigTransaction({
         </div>
         <div className="hidden items-center font-bold md:flex">{method}</div>
         <div className={cx('flex items-center', statusToTextColor(txStatus))}>
-          {stringConfirmations}
+          {`${acquiredConfirmations} / ${ownersAtSubmissionTime}`}
         </div>
         <StatusBadge status={txStatus} />
         <button className="brightness-100 filter transition-all duration-300 hover:brightness-[120%]">
@@ -151,27 +157,6 @@ export function SafeMultisigTransaction({
   )
 }
 
-function getDecodedProperties(tx: SafeMultisigTransaction) {
-  const parsingResult = SafeTransactionDecodedData.safeParse(tx.dataDecoded)
-
-  if (parsingResult.success && tx.dataDecoded) {
-    // SafeApi kit typings are wrong, string type applies only for transport layer
-    // string is later parsed into json object
-    const decodedCall = decodeCall(
-      tx.dataDecoded as unknown as NonNullable<SafeTransactionDecodedData>,
-    )
-
-    return {
-      method: decodedCall.method,
-      signature: decodedCall.signature,
-      callWithParams: decodedCall.functionCall,
-      params: decodedCall.params,
-    }
-  }
-
-  return null
-}
-
 function TransactionProperty({
   param,
   value,

packages/frontend/src/view/components/safe/utils.ts

@@ -1,4 +1,5 @@
 import {
+  SafeMultisigTransaction,
   SafeTransactionDecodedData,
   SafeTransactionDecodedParam,
 } from '@lz/libs'
@@ -113,3 +114,114 @@ export function toUTC(dateString: string): string {
   const date = new Date(dateString)
   return date.toUTCString()
 }
+
+export function getDecodedProperties(tx: SafeMultisigTransaction) {
+  const parsingResult = SafeTransactionDecodedData.safeParse(tx.dataDecoded)
+
+  if (parsingResult.success && tx.dataDecoded) {
+    // SafeApi kit typings are wrong, string type applies only for transport layer
+    // string is later parsed into json object
+    const decodedCall = decodeCall(
+      tx.dataDecoded as unknown as NonNullable<SafeTransactionDecodedData>,
+    )
+
+    return {
+      method: decodedCall.method,
+      signature: decodedCall.signature,
+      callWithParams: decodedCall.functionCall,
+      params: decodedCall.params,
+    }
+  }
+
+  return null
+}
+
+export type MultisigOwnershipHistory = ReturnType<
+  typeof deriveMultisigOwnership
+>
+
+export function deriveMultisigOwnership(
+  allTransactions: SafeMultisigTransaction[],
+  latestOwners: number,
+) {
+  const ownerChangingTransactions = allTransactions
+    .map((tx) => ({ raw: tx, decoded: getDecodedProperties(tx) }))
+    .filter(
+      (ownerModification) =>
+        (ownerModification.decoded?.method === 'addOwnerWithThreshold' ||
+          ownerModification.decoded?.method === 'removeOwner') &&
+        ownerModification.raw.isExecuted,
+    )
+
+  // We start with the latest data so we yet don't know
+  // how long it will be applicable for
+  const ownerUpdates = [
+    {
+      toBlock: Infinity,
+      toTimestamp: Infinity,
+      owners: latestOwners,
+    },
+  ]
+
+  let lastAmountOfOwners = latestOwners
+
+  for (const ownerModification of ownerChangingTransactions) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const toBlock = ownerModification.raw.blockNumber!
+    const toTimestamp = new Date(ownerModification.raw.submissionDate).valueOf()
+
+    // Inc/Dev reversed since we are descending down the line
+    if (ownerModification.decoded?.method === 'addOwnerWithThreshold') {
+      ownerUpdates.push({
+        toTimestamp,
+        toBlock,
+        owners: --lastAmountOfOwners,
+      })
+    }
+
+    if (ownerModification.decoded?.method === 'removeOwner') {
+      ownerUpdates.push({
+        toTimestamp,
+        toBlock,
+        owners: ++lastAmountOfOwners,
+      })
+    }
+  }
+
+  // Invert and reassign toBlock and toTimestamp
+  // to achieve ascending order thus easier usage
+  const reversed = [...ownerUpdates].reverse()
+
+  const updateHistory = [
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    { fromBlock: 0, fromTimestamp: 0, owners: reversed.at(0)!.owners },
+  ]
+
+  for (let i = 1; i < reversed.length; i++) {
+    const tx = reversed[i]
+    updateHistory.push({
+      /* eslint-disable @typescript-eslint/no-non-null-assertion */
+      fromTimestamp: reversed[i - 1]!.toTimestamp,
+      fromBlock: reversed[i - 1]!.toBlock,
+      owners: tx!.owners,
+      /* eslint-enable @typescript-eslint/no-non-null-assertion */
+    })
+  }
+
+  return updateHistory
+}
+
+export function getOwnershipForTransaction(
+  history: MultisigOwnershipHistory,
+  submissionDate: string,
+) {
+  const ownershipForTime = history
+    .sort((a, b) => b.fromTimestamp - a.fromTimestamp)
+    .find((update) => update.fromTimestamp < new Date(submissionDate).valueOf())
+
+  if (!ownershipForTime) {
+    throw new Error('Ownership for given time range not found')
+  }
+
+  return ownershipForTime.owners
+}