Adds ledger hash to the UI & warning (#44)

Author: manolisliolios

app/package.json

@@ -18,6 +18,7 @@
 		"@mysten/dapp-kit": "0.19.5",
 		"@mysten/sagat": "workspace:*",
 		"@mysten/sui": "^1.43.0",
+		"@noble/hashes": "^2.0.1",
 		"@radix-ui/react-accordion": "^1.2.12",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-slot": "^1.2.3",

app/src/components/ProposalSheet.tsx

@@ -237,6 +237,7 @@ export function ProposalSheet({
 							{isDryRunSuccessful ? (
 								<EffectsPreview
 									output={dryRunMutation.data}
+									bytes={transactionData}
 								/>
 							) : (
 								<p className="text-sm text-red-600">

app/src/components/preview-effects/EffectsPreview.tsx

@@ -1,9 +1,13 @@
 import { type DryRunTransactionBlockResponse } from '@mysten/sui/client';
-import { useState } from 'react';
+import { messageWithIntent } from '@mysten/sui/cryptography';
+import { fromBase64, toHex } from '@mysten/sui/utils';
+import { blake2b } from '@noble/hashes/blake2.js';
+import { useMemo, useState } from 'react';
 
 import { Label } from '@/components/ui/label';
 
 import { cn } from '../../lib/utils';
+import { Alert } from '../ui/Alert';
 import { Textarea } from '../ui/textarea';
 import { BalanceChanges } from './partials/BalanceChanges';
 import { Events } from './partials/Events';
@@ -13,15 +17,35 @@ import { Transactions } from './partials/Transactions';
 
 export function EffectsPreview({
 	output,
+	bytes,
 }: {
 	output: DryRunTransactionBlockResponse;
+	bytes?: string;
 }) {
 	const [activeTab, setActiveTab] = useState(
 		'balance-changes',
 	);
 
 	const { objectChanges, balanceChanges } = output;
 
+	// Compute the blake2b hash (ledger transaction hash)
+	const ledgerTransactionHash = useMemo(() => {
+		if (!bytes) return null;
+		// Decode the base64-encoded transaction bytes
+		const decodedBytes = fromBase64(bytes);
+		const intentMessage = messageWithIntent(
+			'TransactionData',
+			decodedBytes,
+		);
+		const intentMessageDigest = blake2b(intentMessage, {
+			dkLen: 32,
+		});
+		const intentMessageDigestHex = toHex(
+			intentMessageDigest,
+		);
+		return `0x${intentMessageDigestHex}`;
+	}, [bytes]);
+
 	const tabs = [
 		{
 			id: 'balance-changes',
@@ -79,6 +103,28 @@ export function EffectsPreview({
 		<div className="space-y-4">
 			<Overview output={output} />
 
+			{/* Ledger Hash */}
+			{ledgerTransactionHash && (
+				<div className="border rounded p-3 bg-gray-50">
+					<div className="flex items-center justify-between gap-2">
+						<span className="text-sm font-medium text-gray-700">
+							Ledger Hash:
+						</span>
+						<span className="font-mono text-xs break-all">
+							{ledgerTransactionHash}
+						</span>
+					</div>
+				</div>
+			)}
+
+			{/* Warning Alert */}
+			<Alert variant="warning">
+				<strong>Important:</strong> You should always
+				validate the transaction details in your wallet
+				before signing. Your wallet is the ultimate source
+				of truth for what you're approving.
+			</Alert>
+
 			{/* Tab Navigation */}
 			<div className="w-full">
 				<div className="flex overflow-x-auto border-b">

app/src/components/proposals/ProposalPreview.tsx

@@ -126,7 +126,10 @@ export function ProposalPreview({
 							: 'border-red-200 bg-white'
 					}`}
 				>
-					<EffectsPreview output={dryRunMutation.data} />
+					<EffectsPreview
+						output={dryRunMutation.data}
+						bytes={proposal.transactionBytes}
+					/>
 				</div>
 			)}
 

app/src/components/tools/SigningTool.tsx

@@ -58,11 +58,13 @@ function PreviewResult({
 	data,
 	error,
 	isLoading,
+	bytes,
 }: {
 	isSuccess: boolean;
 	data: DryRunTransactionBlockResponse | undefined;
 	error: Error | null;
 	isLoading: boolean;
+	bytes?: string;
 }) {
 	if (isLoading) {
 		return (
@@ -103,7 +105,7 @@ function PreviewResult({
 				)}
 			</div>
 			{isSuccess && data ? (
-				<EffectsPreview output={data} />
+				<EffectsPreview output={data} bytes={bytes} />
 			) : (
 				<div className="space-y-3">
 					<p className="text-sm text-red-600 whitespace-pre-wrap">
@@ -295,6 +297,7 @@ export default function SigningTool() {
 							data={dryRunMutation.data}
 							error={dryRunMutation.error}
 							isLoading={dryRunMutation.isPending}
+							bytes={transactionData}
 						/>
 					)}
 

bun.lock

@@ -39,6 +39,7 @@
         "@mysten/dapp-kit": "0.19.5",
         "@mysten/sagat": "workspace:*",
         "@mysten/sui": "^1.43.0",
+        "@noble/hashes": "^2.0.1",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-slot": "^1.2.3",
@@ -268,7 +269,7 @@
 
     "@noble/curves": ["@noble/[email protected]", "", { "dependencies": { "@noble/hashes": "1.8.0" } }, "sha512-2bKONnuM53lINoDrSmK8qP8W271ms7pygDhZt4SiLOoLwBtoHqeCFi6RG42V8zd3mLHuJFhU/Bmaqo4nX0/kBw=="],
 
-    "@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
+    "@noble/hashes": ["@noble/hashes@2.0.1", "", {}, "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw=="],
 
     "@nodelib/fs.scandir": ["@nodelib/[email protected]", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
@@ -1066,6 +1067,14 @@
 
     "@isaacs/cliui/wrap-ansi": ["[email protected]", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
 
+    "@mysten/sui/@noble/hashes": ["@noble/[email protected]", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
+
+    "@noble/curves/@noble/hashes": ["@noble/[email protected]", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
+
+    "@scure/bip32/@noble/hashes": ["@noble/[email protected]", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
+
+    "@scure/bip39/@noble/hashes": ["@noble/[email protected]", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/[email protected]", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/[email protected]", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA=="],