Prepare UI for displaying multiple signers

For now, we also want to be compatible with the previous versions of the API, so besides `tx.signers[]``, we will also look at `tx.sender_0` and `tx.sender_0_eth`.
oasisprotocol · Jan 18, 2025 · d8952fc · d8952fc
1 parent 6c8b582
commit d8952fc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/.changelog/1705.trivial.md b/.changelog/1705.trivial.md
@@ -0,0 +1 @@
+Add support for displaying multiple signers of runtime transactions
diff --git a/src/app/components/Account/ContractCreatorInfo.tsx b/src/app/components/Account/ContractCreatorInfo.tsx
@@ -25,7 +25,8 @@ const TxSender: FC<{ scope: SearchScope; txHash: string; alwaysTrim?: boolean }>
   }
   const query = useGetRuntimeTransactionsTxHash(scope.network, scope.layer, txHash)
   const tx = query.data?.data.transactions[0]
-  const senderAddress = tx?.sender_0_eth || tx?.sender_0
+  const senderAddress =
+    tx?.signers?.[0].address_eth ?? tx?.sender_0_eth ?? tx?.signers?.[0].address ?? tx?.sender_0
 
   return query.isLoading ? (
     <Skeleton

diff --git a/src/app/components/Transactions/RuntimeTransactions.tsx b/src/app/components/Transactions/RuntimeTransactions.tsx
@@ -126,10 +126,16 @@ export const RuntimeTransactions: FC<TransactionsProps> = ({
                     <AccountLink
                       labelOnly={
                         !!ownAddress &&
-                        (transaction.sender_0_eth === ownAddress || transaction.sender_0 === ownAddress)
+                        ((transaction.signers?.[0]?.address_eth ?? transaction.sender_0_eth) === ownAddress ||
+                          (transaction.signers?.[0]?.address ?? transaction.sender_0) === ownAddress)
                       }
                       scope={transaction}
-                      address={transaction.sender_0_eth || transaction.sender_0}
+                      address={
+                        transaction.signers?.[0]?.address_eth ??
+                        transaction.sender_0_eth ??
+                        transaction.signers?.[0]?.address ??
+                        transaction.sender_0
+                      }
                       alwaysTrim
                     />
                     {targetAddress && <TransferIcon />}

diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
@@ -72,7 +72,13 @@ export const RuntimeTransactionDetailPage: FC = () => {
           tokenPrices={tokenPrices}
         />
       </SubPageCard>
-      <DappBanner scope={scope} ethAddress={transaction?.sender_0_eth} />
+      {transaction?.signers ? (
+        (transaction?.signers ?? []).map((signer, index) => (
+          <DappBanner key={`signer-${index}`} scope={scope} ethAddress={signer.address_eth} />
+        ))
+      ) : (
+        <DappBanner scope={scope} ethAddress={transaction?.sender_0_eth} />
+      )}
       <DappBanner scope={scope} ethAddress={transaction?.to_eth} />
       {transaction && (
         <SubPageCard title={t('common.events')}>
@@ -161,16 +167,28 @@ export const RuntimeTransactionDetailView: FC<{
           <dt>{t('common.timestamp')}</dt>
           <dd>{formattedTimestamp}</dd>
 
-          {(transaction?.sender_0 || transaction?.sender_0_eth) && (
+          {(!!transaction?.signers?.length || !!transaction?.sender_0_eth || !!transaction?.sender_0) && (
             <>
               <dt>{t('common.from')}</dt>
-              <dd>
-                <AccountLink
-                  scope={transaction}
-                  address={(transaction?.sender_0_eth ?? transaction?.sender_0) as string}
-                />
-                <CopyToClipboard value={transaction?.sender_0_eth ?? transaction?.sender_0} />
-              </dd>
+              {transaction?.signers ? (
+                (transaction?.signers ?? []).map((signer, index) => (
+                  <dd key={`signer-${index}`}>
+                    <AccountLink
+                      scope={transaction}
+                      address={(signer.address_eth ?? signer.address) as string}
+                    />
+                    <CopyToClipboard value={signer.address_eth ?? signer.address} />
+                  </dd>
+                ))
+              ) : (
+                <dd>
+                  <AccountLink
+                    scope={transaction}
+                    address={(transaction?.sender_0_eth ?? transaction?.sender_0_eth) as string}
+                  />
+                  <CopyToClipboard value={transaction?.sender_0_eth ?? transaction?.sender_0} />
+                </dd>
+              )}
             </>
           )}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add support for displaying multiple signers of runtime transactions