From 77cf1703bd97b5ae89fde8e41c652404e5dadbfc Mon Sep 17 00:00:00 2001
From: Mario Sarcevic <mario.sarcevic@iota.org>
Date: Tue, 16 Apr 2024 12:35:30 +0200
Subject: [PATCH 1/2] feat: Display account bech32 address instead of account
 Id in Block/Transaction page and Transaction metadata section

---
 .../app/components/nova/ContextInputView.tsx   |  2 +-
 .../section/TransactionMetadataSection.tsx     |  5 +----
 client/src/app/routes/nova/Block.tsx           | 12 +++++++-----
 client/src/app/routes/nova/TransactionPage.tsx | 18 +++++++++---------
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/client/src/app/components/nova/ContextInputView.tsx b/client/src/app/components/nova/ContextInputView.tsx
index e9e5f1022..c4e94c553 100644
--- a/client/src/app/components/nova/ContextInputView.tsx
+++ b/client/src/app/components/nova/ContextInputView.tsx
@@ -35,7 +35,7 @@ const ContextInputView: React.FC<IContextInputViewProps> = ({ contextInput }) =>
             <div className="section--data">
                 <div className="label">Account</div>
                 <div className="value code highlight">
-                    <TruncatedId id={input.accountId} link={`/${network}/account/${bech32Address}`} showCopyButton />
+                    <TruncatedId id={bech32Address} link={`/${network}/account/${bech32Address}`} showCopyButton />
                 </div>
             </div>
         );
diff --git a/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx b/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx
index 790401523..46628bd3f 100644
--- a/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx
+++ b/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx
@@ -84,10 +84,7 @@ const TransactionMetadataSection: React.FC<TransactionMetadataSectionProps> = ({
                                                 return (
                                                     <div className="allotment-item" key={`allotment-${idx}`}>
                                                         <div className="allotment-item__address value truncate highlight">
-                                                            <TruncatedId
-                                                                id={allotment.accountId}
-                                                                link={`/${network}/addr/${accountBech32}`}
-                                                            />
+                                                            <TruncatedId id={accountBech32} link={`/${network}/addr/${accountBech32}`} />
                                                         </div>
                                                         <div className="allotment-item__amount value">
                                                             <span
diff --git a/client/src/app/routes/nova/Block.tsx b/client/src/app/routes/nova/Block.tsx
index 02fe2db7e..78c54963b 100644
--- a/client/src/app/routes/nova/Block.tsx
+++ b/client/src/app/routes/nova/Block.tsx
@@ -154,12 +154,14 @@ const Block: React.FC<RouteComponentProps<BlockProps>> = ({
                 <div className="label">Latest Finalized Slot</div>
                 <div className="value code">{block.header.latestFinalizedSlot}</div>
             </div>
-            <div className="section--data">
-                <div className="label">Issuer</div>
-                <div className="value code highlight">
-                    <TruncatedId id={block.header.issuerId} link={`/${network}/addr/${issuerAddress}`} showCopyButton={true} />
+            {issuerAddress && (
+                <div className="section--data">
+                    <div className="label">Issuer</div>
+                    <div className="value code highlight">
+                        <TruncatedId id={issuerAddress} link={`/${network}/addr/${issuerAddress}`} showCopyButton={true} />
+                    </div>
                 </div>
-            </div>
+            )}
             <div className="section--data row row--tablet-responsive">
                 {blockBody?.strongParents && (
                     <div className="truncate margin-b-s margin-r-m">
diff --git a/client/src/app/routes/nova/TransactionPage.tsx b/client/src/app/routes/nova/TransactionPage.tsx
index 2742e54f3..ea742eb53 100644
--- a/client/src/app/routes/nova/TransactionPage.tsx
+++ b/client/src/app/routes/nova/TransactionPage.tsx
@@ -95,6 +95,8 @@ const TransactionPage: React.FC<RouteComponentProps<TransactionPageProps>> = ({
         );
     }
 
+    const issuerAddress = block?.header.issuerId ? Utils.addressToBech32(new AccountAddress(block.header.issuerId), bech32Hrp) : null;
+
     const transactionContent = block ? (
         <React.Fragment>
             <div className="section--header row row--tablet-responsive middle space-between">
@@ -126,16 +128,14 @@ const TransactionPage: React.FC<RouteComponentProps<TransactionPageProps>> = ({
                     <TruncatedId id={block.header.slotCommitmentId} />
                 </div>
             </div>
-            <div className="section--data">
-                <div className="label">Issuer</div>
-                <div className="value code highlight">
-                    <TruncatedId
-                        id={block.header.issuerId}
-                        link={`/${network}/addr/${Utils.addressToBech32(new AccountAddress(block.header.issuerId), bech32Hrp)}`}
-                        showCopyButton={true}
-                    />
+            {issuerAddress && (
+                <div className="section--data">
+                    <div className="label">Issuer</div>
+                    <div className="value code highlight">
+                        <TruncatedId id={issuerAddress} link={`/${network}/addr/${issuerAddress}`} showCopyButton={true} />
+                    </div>
                 </div>
-            </div>
+            )}
             {transferTotal !== null && (
                 <div className="section--data">
                     <div className="label">Amount Transacted</div>

From faaea95870f9374be31a0ba63cd3d90632de4f14 Mon Sep 17 00:00:00 2001
From: Mario Sarcevic <mario.sarcevic@iota.org>
Date: Fri, 19 Apr 2024 14:19:43 +0200
Subject: [PATCH 2/2] feat: Switch from accountId to account address also on
 FoundryPage

---
 client/src/app/routes/nova/FoundryPage.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/app/routes/nova/FoundryPage.tsx b/client/src/app/routes/nova/FoundryPage.tsx
index 2d2d412a4..5d60232dc 100644
--- a/client/src/app/routes/nova/FoundryPage.tsx
+++ b/client/src/app/routes/nova/FoundryPage.tsx
@@ -1,5 +1,4 @@
 import {
-    AccountAddress,
     FeatureType,
     FoundryOutput,
     MetadataFeature,
@@ -59,7 +58,6 @@ const FoundryPage: React.FC<RouteComponentProps<FoundryPageProps>> = ({
     const [isFormattedBalance, setIsFormattedBalance] = useState<boolean>(true);
     const [foundryDetails, isFoundryDetailsLoading, foundryError] = useFoundryDetails(network, foundryId);
     const [foundryOutput, setFoundryOutput] = useState<FoundryOutput>();
-    const [controllerAccountId, setControllerAccountId] = useState<string>();
     const [controllerAccountBech32, setControllerAccountBech32] = useState<Bech32Address>();
     const [tokenMetadata, setTokenMetadata] = useState<ITokenMetadata | null>();
     const [tokensCount, setTokensCount] = useState<number>(0);
@@ -68,7 +66,6 @@ const FoundryPage: React.FC<RouteComponentProps<FoundryPageProps>> = ({
         if (foundryDetails) {
             const output = foundryDetails?.output as FoundryOutput;
             const immutableAccountUnlockCondition = output.unlockConditions[0] as ImmutableAccountAddressUnlockCondition;
-            const accountId = (immutableAccountUnlockCondition.address as AccountAddress).accountId;
             const bech32 = Utils.addressToBech32(immutableAccountUnlockCondition.address, bech32Hrp);
 
             const immutableFeatures = (foundryDetails?.output as FoundryOutput).immutableFeatures;
@@ -81,9 +78,9 @@ const FoundryPage: React.FC<RouteComponentProps<FoundryPageProps>> = ({
                 );
                 setTokenMetadata(parsedMetadata);
             }
+
             if (isMounted) {
                 setFoundryOutput(output);
-                setControllerAccountId(accountId);
                 setControllerAccountBech32(bech32);
             }
         }
@@ -109,11 +106,15 @@ const FoundryPage: React.FC<RouteComponentProps<FoundryPageProps>> = ({
                             <span className="margin-r-t">{serialNumber}</span>
                         </div>
                     </div>
-                    {controllerAccountId && controllerAccountBech32 && (
+                    {controllerAccountBech32 && (
                         <div className="section--data">
                             <div className="label">Controller Account</div>
                             <div className="value code highlight">
-                                <TruncatedId id={controllerAccountId} link={`/${network}/addr/${controllerAccountBech32}`} showCopyButton />
+                                <TruncatedId
+                                    id={controllerAccountBech32}
+                                    link={`/${network}/addr/${controllerAccountBech32}`}
+                                    showCopyButton
+                                />
                             </div>
                         </div>
                     )}