[explorer] show more readable signature information for transactions (M…

…ystenLabs#8749)

## Description 
This PR makes transaction signature data more digestible, so instead of
showing a long concatenated base64 string, we'll actually show the
encryption scheme, public key, and "real" signature for a given
transaction signature. As part of this, we're renaming "Transaction
Signature" -> "Account Signature" and adding a section for sponsored
signatures as well.

I'll note that this isn't totally up to spec because there are some
design clarifications needed and @mystie711 is out today - I'll address
those pieces of feedback in a follow-up depending on when this gets
approval. There are also some other pieces here that are out of scope
for sponsored transaction support like displaying multi-sig signatures
(TS SDK doesn't support this yet).

Before:
<img width="1589" alt="image"
src="https://user-images.githubusercontent.com/7453188/222190435-86838335-abe0-4ba5-b5bb-b2cb6b30d323.png">

After:
<img width="1497" alt="image"
src="https://user-images.githubusercontent.com/7453188/222192252-065321b5-2983-46d1-8a66-acfaedb1166b.png">
<img width="1481" alt="image"
src="https://user-images.githubusercontent.com/7453188/222190274-6c9a0ed1-b4d9-4807-811f-28770120a75d.png">

## Test Plan 
- Manual testing (👁️)
- I can't actually create a sponsored transaction yet, so some of the
logic is based on how this _should_ work in practice. Trying to make
progress here, so I'll ideally test this with some real transaction data
before merging
---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes
N/A

apps/explorer/src/pages/transaction-result/TransactionView.tsx

@@ -17,6 +17,10 @@ import {
     type SuiTransactionResponse,
     getGasData,
     getTransactionDigest,
+    fromSerializedSignature,
+    toB64,
+    type SignaturePubkeyPair,
+    type SuiAddress,
 } from '@mysten/sui.js';
 import clsx from 'clsx';
 import { useMemo, useState } from 'react';
@@ -163,6 +167,15 @@ function formatByTransactionKind(
     }
 }
 
+function getSignatureFromAddress(
+    signatures: SignaturePubkeyPair[],
+    suiAddress: SuiAddress
+) {
+    return signatures.find(
+        (signature) => `0x${signature.pubKey.toSuiAddress()}` === suiAddress
+    );
+}
+
 type TxItemView = {
     title: string;
     titleStyle?: string;
@@ -353,17 +366,6 @@ function TransactionView({
         </div>
     ));
 
-    const transactionSignatureData = {
-        title: 'Transaction Signatures',
-        content: [
-            {
-                label: 'Signature',
-                value: getTransactionSignature(transaction),
-                monotypeClass: true,
-            },
-        ],
-    };
-
     const createdMutateData = generateMutatedCreated(transaction);
 
     const typearguments =
@@ -421,13 +423,24 @@ function TransactionView({
     const txError = getExecutionStatusError(transaction);
 
     const gasData = getGasData(transaction);
-
     const gasPrice = gasData.price || 1;
     const gasPayment = gasData.payment;
     const gasBudget = gasData.budget;
     const gasOwner = gasData.owner;
     const isSponsoredTransaction = gasOwner !== sender;
 
+    const transactionSignatures = getTransactionSignature(transaction);
+    const deserializedTransactionSignatures = transactionSignatures.map(
+        (signature) => fromSerializedSignature(signature)
+    );
+    const accountSignature = getSignatureFromAddress(
+        deserializedTransactionSignatures,
+        sender
+    );
+    const sponsorSignature = isSponsoredTransaction
+        ? getSignatureFromAddress(deserializedTransactionSignatures, gasOwner)
+        : null;
+
     const timestamp = transaction.timestamp_ms || transaction.timestampMs;
 
     return (
@@ -661,7 +674,54 @@ function TransactionView({
                     )}
                     <TabPanel>
                         <div className={styles.txgridcomponent}>
-                            <ItemView data={transactionSignatureData} />
+                            {accountSignature && (
+                                <ItemView
+                                    data={{
+                                        title: 'Account Signature',
+                                        content: [
+                                            {
+                                                label: 'Scheme',
+                                                value: accountSignature.signatureScheme,
+                                            },
+                                            {
+                                                label: 'PubKey',
+                                                value: `0x${accountSignature.pubKey.toSuiAddress()}`,
+                                                monotypeClass: true,
+                                            },
+                                            {
+                                                label: 'Signature',
+                                                value: toB64(
+                                                    accountSignature.signature
+                                                ),
+                                            },
+                                        ],
+                                    }}
+                                />
+                            )}
+                            {sponsorSignature && (
+                                <ItemView
+                                    data={{
+                                        title: 'Sponsor Signature',
+                                        content: [
+                                            {
+                                                label: 'Scheme',
+                                                value: sponsorSignature.signatureScheme,
+                                            },
+                                            {
+                                                label: 'PubKey',
+                                                value: `0x${sponsorSignature.pubKey.toSuiAddress()}`,
+                                                monotypeClass: true,
+                                            },
+                                            {
+                                                label: 'Signature',
+                                                value: toB64(
+                                                    sponsorSignature.signature
+                                                ),
+                                            },
+                                        ],
+                                    }}
+                                />
+                            )}
                         </div>
                     </TabPanel>
                 </TabPanels>