Show multiple signers, if they are present

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`.

.changelog/1705.trivial.md

@@ -0,0 +1 @@
+Add support for displaying multiple signers of runtime transactions

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

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 />}

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,15 +167,35 @@ 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
+                style={{
+                  display: 'block',
+                }}
+              >
+                {transaction?.signers ? (
+                  (transaction?.signers ?? []).map((signer, index) => (
+                    <>
+                      <AccountLink
+                        key={`signer-${index}`}
+                        scope={transaction}
+                        address={(signer.address_eth ?? signer.address) as string}
+                      />
+                      <CopyToClipboard value={signer.address_eth ?? signer.address} />
+                      <br />
+                    </>
+                  ))
+                ) : (
+                  <>
+                    <AccountLink
+                      scope={transaction}
+                      address={(transaction?.sender_0_eth ?? transaction?.sender_0_eth) as string}
+                    />
+                    <CopyToClipboard value={transaction?.sender_0_eth ?? transaction?.sender_0} />
+                  </>
+                )}
               </dd>
             </>
           )}