[explorer]: add suins domain name to txn page

MystenLabs · Jun 28, 2023 · fba7e18 · fba7e18
1 parent 048cf7c
commit fba7e18
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 43 deletions.
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/ObjectChanges.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/ObjectChanges.tsx
@@ -7,6 +7,8 @@ import {
 	type ObjectChangesByOwner,
 	type ObjectChangeSummary,
 	type SuiObjectChangeTypes,
+	useResolveSuiNSName,
+	type ObjectChanges,
 } from '@mysten/core';
 import { ChevronRight12 } from '@mysten/icons';
 import {
@@ -164,7 +166,7 @@ function ObjectChangeEntries({ changeEntries, type, isDisplay }: ObjectChangeEnt
 					panelContent={
 						<div className="mt-2 flex flex-col gap-2">
 							<Item label={ItemLabels.package} packageId={packageId} />
-							{modules.map((moduleName, index) => (
+							{modules.map((moduleName: string, index: number) => (
 								<Item
 									key={index}
 									label={ItemLabels.module}
@@ -229,6 +231,56 @@ function ObjectChangeEntries({ changeEntries, type, isDisplay }: ObjectChangeEnt
 	);
 }
 
+function ObjectChangeEntryCard({
+	ownerAddress,
+	changes,
+	type,
+}: {
+	ownerAddress: string;
+	changes: ObjectChanges;
+	type: SuiObjectChangeTypes;
+}) {
+	const { data: domainName } = useResolveSuiNSName(ownerAddress);
+	const renderFooter = ['AddressOwner', 'ObjectOwner', 'Shared'].includes(changes.ownerType);
+
+	return (
+		<TransactionBlockCard
+			key={ownerAddress}
+			title="Changes"
+			size="sm"
+			shadow
+			footer={
+				renderFooter && (
+					<div className="flex flex-wrap items-center justify-between">
+						<Text variant="pBody/medium" color="steel-dark">
+							Owner
+						</Text>
+
+						{changes.ownerType === 'AddressOwner' && (
+							<AddressLink label={domainName ?? undefined} address={ownerAddress} />
+						)}
+
+						{changes.ownerType === 'ObjectOwner' && <ObjectLink objectId={ownerAddress} />}
+
+						{changes.ownerType === 'Shared' && (
+							<ObjectLink objectId={ownerAddress} label="Shared" />
+						)}
+					</div>
+				)
+			}
+		>
+			<div className="flex flex-col gap-4">
+				{!!changes.changesWithDisplay.length && (
+					<ObjectChangeEntries changeEntries={changes.changesWithDisplay} type={type} isDisplay />
+				)}
+				{!!changes.changes.length && (
+					<ObjectChangeEntries changeEntries={changes.changes} type={type} />
+				)}
+			</div>
+		</TransactionBlockCard>
+	);
+}
+
 interface ObjectChangeEntriesCardsProps {
 	data: ObjectChangesByOwner;
 	type: SuiObjectChangeTypes;
@@ -239,47 +291,14 @@ export function ObjectChangeEntriesCards({ data, type }: ObjectChangeEntriesCard
 
 	return (
 		<>
-			{Object.entries(data).map(([ownerAddress, changes]) => {
-				const renderFooter = ['AddressOwner', 'ObjectOwner', 'Shared'].includes(changes.ownerType);
-				return (
-					<TransactionBlockCard
-						key={ownerAddress}
-						title="Changes"
-						size="sm"
-						shadow
-						footer={
-							renderFooter && (
-								<div className="flex flex-wrap items-center justify-between">
-									<Text variant="pBody/medium" color="steel-dark">
-										Owner
-									</Text>
-
-									{changes.ownerType === 'AddressOwner' && <AddressLink address={ownerAddress} />}
-
-									{changes.ownerType === 'ObjectOwner' && <ObjectLink objectId={ownerAddress} />}
-
-									{changes.ownerType === 'Shared' && (
-										<ObjectLink objectId={ownerAddress} label="Shared" />
-									)}
-								</div>
-							)
-						}
-					>
-						<div className="flex flex-col gap-4">
-							{!!changes.changesWithDisplay.length && (
-								<ObjectChangeEntries
-									changeEntries={changes.changesWithDisplay}
-									type={type}
-									isDisplay
-								/>
-							)}
-							{!!changes.changes.length && (
-								<ObjectChangeEntries changeEntries={changes.changes} type={type} />
-							)}
-						</div>
-					</TransactionBlockCard>
-				);
-			})}
+			{Object.entries(data).map(([ownerAddress, changes]) => (
+				<ObjectChangeEntryCard
+					key={ownerAddress}
+					ownerAddress={ownerAddress}
+					changes={changes}
+					type={type}
+				/>
+			))}
 		</>
 	);
 }

diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx
@@ -51,7 +51,7 @@ export function TransactionDetailCard({
 						{sender && (
 							<TransactionDetail
 								label="Sender"
-								value={<AddressLink address={domainName ?? sender} />}
+								value={<AddressLink label={domainName ?? undefined} address={sender} />}
 							/>
 						)}
 						{checkpoint && (