Show package upgrade in transaction (MystenLabs#13318)

Show upgraded system packages in a transaction
[APPS-1465](https://mysten.atlassian.net/browse/APPS-1465)
 
<img width="614" alt="Screenshot 2023-08-07 at 4 21 29 PM"
src="https://github.com/MystenLabs/sui/assets/126525197/374688e3-60d8-4241-a17e-fe6af78eb9a2">

apps/core/src/hooks/useTransactionSummary.ts

@@ -60,6 +60,9 @@ export function useTransactionSummary({
 				objectSummary,
 				status: transaction.effects?.status.status,
 				timestamp: transaction.timestampMs,
+				upgradedSystemPackages: transaction.effects?.mutated?.filter(
+					({ owner }) => owner === 'Immutable',
+				),
 			};
 		} else {
 			// Dry run transaction:

apps/explorer/src/pages/transaction-result/transaction-summary/UpgradedSystemPackages.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Text } from '@mysten/ui';
+
+import { ObjectLink } from '~/ui/InternalLink';
+import { TransactionBlockCard, TransactionBlockCardSection } from '~/ui/TransactionBlockCard';
+
+import type { OwnedObjectRef } from '@mysten/sui.js/client';
+
+export function UpgradedSystemPackages({ data }: { data: OwnedObjectRef[] }) {
+	if (!data?.length) return null;
+
+	return (
+		<TransactionBlockCard title="Changes" size="sm" shadow>
+			<TransactionBlockCardSection
+				title={
+					<Text variant="body/semibold" color="success-dark">
+						Updated
+					</Text>
+				}
+			>
+				<div className="flex flex-col gap-2">
+					{data.map((object) => {
+						const { objectId } = object.reference;
+						return (
+							<div className="flex flex-wrap items-center justify-between" key={objectId}>
+								<div className="flex items-center gap-0.5">
+									<Text variant="pBody/medium" color="steel-dark">
+										Package
+									</Text>
+								</div>
+
+								<div className="flex items-center">
+									<ObjectLink objectId={objectId} />
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</TransactionBlockCardSection>
+		</TransactionBlockCard>
+	);
+}

apps/explorer/src/pages/transaction-result/transaction-summary/index.tsx

@@ -6,6 +6,7 @@ import { type SuiTransactionBlockResponse } from '@mysten/sui.js/client';
 
 import { BalanceChanges } from './BalanceChanges';
 import { ObjectChanges } from './ObjectChanges';
+import { UpgradedSystemPackages } from './UpgradedSystemPackages';
 import { useRecognizedPackages } from '~/hooks/useRecognizedPackages';
 
 interface TransactionSummaryProps {
@@ -23,12 +24,14 @@ export function TransactionSummary({ transaction }: TransactionSummaryProps) {
 
 	const balanceChanges = summary?.balanceChanges;
 	const objectSummary = summary?.objectSummary;
+	const upgradedSystemPackages = summary?.upgradedSystemPackages;
 
 	return (
 		<div className="flex flex-wrap gap-4 md:gap-8">
 			{balanceChanges && transactionKindName === 'ProgrammableTransaction' && (
 				<BalanceChanges changes={balanceChanges} />
 			)}
+			{upgradedSystemPackages && <UpgradedSystemPackages data={upgradedSystemPackages} />}
 			{objectSummary && <ObjectChanges objectSummary={objectSummary} />}
 		</div>
 	);