fix demo so it uses transaction analysis

Author: hayes

packages/wallet-sdk/examples/demo-app/src/app/demos/counter/transactions.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Transaction } from '@mysten/sui/transactions';
-import { autoApproval } from '@mysten/wallet-sdk';
+import { operationType } from '@mysten/wallet-sdk';
 import * as counterContract from '../../contracts/counter/counter.js';
 
 interface CounterTransactionParams {
@@ -25,7 +25,7 @@ export function createCounterTransaction({ senderAddress }: CounterTransactionPa
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('counter-operations'));
+	tx.add(operationType('counter-operations'));
 
 	tx.setSenderIfNotSet(senderAddress);
 
@@ -45,7 +45,7 @@ export function incrementCounterTransaction({
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('counter-operations'));
+	tx.add(operationType('counter-operations'));
 
 	tx.setSenderIfNotSet(senderAddress);
 
@@ -72,7 +72,7 @@ export function resetCounterTransaction({
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('counter-operations'));
+	tx.add(operationType('counter-operations'));
 
 	tx.setSenderIfNotSet(senderAddress);
 

packages/wallet-sdk/examples/demo-app/src/app/demos/nft/transactions.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Transaction } from '@mysten/sui/transactions';
-import { autoApproval } from '@mysten/wallet-sdk';
+import { operationType } from '@mysten/wallet-sdk';
 import * as demoNftContract from '../../contracts/demo_nft/demo_nft.js';
 
 /**
@@ -17,7 +17,7 @@ export function createMintNFTTransaction(params: {
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('nft-creation'));
+	tx.add(operationType('nft-creation'));
 
 	// Set sender
 	tx.setSenderIfNotSet(params.senderAddress);

packages/wallet-sdk/examples/demo-app/src/app/demos/transfer/transactions.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Transaction } from '@mysten/sui/transactions';
-import { autoApproval } from '@mysten/wallet-sdk';
+import { operationType } from '@mysten/wallet-sdk';
 import type { SuiClient } from '@mysten/sui/client';
 
 interface TransferTransactionParams {
@@ -28,7 +28,7 @@ export function createTransferAllSuiTransaction({
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('basic-transfers'));
+	tx.add(operationType('basic-transfers'));
 
 	tx.setSenderIfNotSet(senderAddress);
 
@@ -49,7 +49,7 @@ export function createTransferSuiAmountTransaction({
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('basic-transfers'));
+	tx.add(operationType('basic-transfers'));
 
 	tx.setSenderIfNotSet(senderAddress);
 
@@ -72,7 +72,7 @@ export async function createTransferAllCoinsTransaction(
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('basic-transfers'));
+	tx.add(operationType('basic-transfers'));
 
 	tx.setSenderIfNotSet(senderAddress);
 
@@ -107,7 +107,7 @@ export async function createTransferCoinAmountTransaction(
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('basic-transfers'));
+	tx.add(operationType('basic-transfers'));
 
 	tx.setSenderIfNotSet(senderAddress);
 

packages/wallet-sdk/examples/demo-app/src/app/demos/walrus/transactions.ts

@@ -3,7 +3,7 @@
 
 import { Transaction, coinWithBalance } from '@mysten/sui/transactions';
 import { parseStructTag } from '@mysten/sui/utils';
-import { autoApproval } from '@mysten/wallet-sdk';
+import { operationType } from '@mysten/wallet-sdk';
 import { TESTNET_WALRUS_PACKAGE_CONFIG } from '@mysten/walrus';
 import type { SuiClient } from '@mysten/sui/client';
 
@@ -26,7 +26,7 @@ export async function createSwapSuiForWalTransaction(
 	const tx = new Transaction();
 
 	// Add auto-approval intent for rule set selection
-	tx.add(autoApproval('walrus-uploads'));
+	tx.add(operationType('walrus-uploads'));
 
 	tx.setSenderIfNotSet(senderAddress);
 

packages/wallet-sdk/examples/demo-app/src/wallet/components/core/DemoWalletUI.tsx

@@ -91,7 +91,7 @@ export function DemoWalletUI() {
 			</div>
 
 			{/* Transaction Approval Modal */}
-			{walletRequest && typeof walletRequest.data !== 'string' && (
+			{walletRequest && (
 				<TransactionApprovalModal
 					isOpen={!!walletRequest}
 					walletRequest={walletRequest}

packages/wallet-sdk/examples/demo-app/src/wallet/components/signing/SigningModal.tsx

@@ -1,23 +1,21 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-import type { Transaction } from '@mysten/sui/transactions';
 import type { ReadonlyWalletAccount } from '@mysten/wallet-standard';
 import { SigningHeader } from './SigningHeader.js';
 import { AccountDisplay } from './AccountDisplay.js';
 import { PolicyStatusMessage } from './PolicyStatusMessage.js';
 import { TransactionContent } from './TransactionContent.js';
 import { AutoApprovalCountdown } from './AutoApprovalCountdown.js';
 import { SigningActions } from './SigningActions.js';
-import type { TransactionAnalysis } from '@mysten/wallet-sdk';
+import type { AutoApprovalAnalysis } from '@mysten/wallet-sdk';
 
 interface SigningModalProps {
 	isOpen: boolean;
 	account: ReadonlyWalletAccount;
 	requestType: 'personalMessage' | 'transaction' | 'signAndExecute';
-	transaction: Transaction | null;
 	onApprove: () => void;
 	onReject: () => void;
-	analysis?: TransactionAnalysis | null; // null = still analyzing
+	analysis?: AutoApprovalAnalysis | null; // null = still analyzing
 	autoApprove?: {
 		enabled: boolean;
 		reason?: string;
@@ -48,7 +46,6 @@ export function SigningModal({
 	isOpen,
 	account,
 	requestType,
-	transaction,
 	onApprove,
 	onReject,
 	analysis,
@@ -112,11 +109,7 @@ export function SigningModal({
 									</div>
 								</div>
 							) : (
-								<TransactionContent
-									transaction={transaction}
-									analysis={analysis}
-									autoApprovalState={autoApprovalState}
-								/>
+								<TransactionContent analysis={analysis} autoApprovalState={autoApprovalState} />
 							)}
 						</div>
 					)}

packages/wallet-sdk/examples/demo-app/src/wallet/components/signing/TransactionApprovalModal.tsx

@@ -1,17 +1,17 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Transaction } from '@mysten/sui/transactions';
 import { useAutoApproval } from '../../hooks/useAutoApproval.js';
 import { SigningModal } from './SigningModal.js';
 import { PolicyApprovalScreen } from '../policy/PolicyApprovalScreen.js';
 import { getClientForNetwork } from '../../utils/suiClients.js';
 import { useCallback, useState } from 'react';
-import type { WalletRequest } from '../../core/DemoWalletImpl.js';
+import type { WalletRequest } from '../../core/DemoWallet.js';
+import { useAnalysis } from '../../hooks/useAnalysis.js';
 
 interface TransactionApprovalModalProps {
 	walletRequest: WalletRequest;
-	onApprove: (transaction: Transaction) => Promise<void>;
+	onApprove: (txBytes: Uint8Array) => Promise<void>;
 	onReject: (error: string) => void;
 	onClose: () => void;
 	isOpen: boolean;
@@ -24,39 +24,29 @@ export function TransactionApprovalModal({
 	onClose: _onClose,
 	isOpen,
 }: TransactionApprovalModalProps) {
-	// Extract data from walletRequest
-
-	// walletRequest.data is now always a proper Transaction instance (converted in wallet impl)
-	const transaction =
-		typeof walletRequest.data === 'string'
-			? null // Personal message case
-			: (walletRequest.data as Transaction);
 	const suiClient = getClientForNetwork(walletRequest.chain);
 	const origin = walletRequest.origin;
 
 	// UI state - which modal to show
 	const [showPolicyApproval, setShowPolicyApproval] = useState(false);
 
+	const analysis = useAnalysis(suiClient, walletRequest);
+
 	// Transaction auto-approval state - this drives the signing modal
-	const [autoApprovalState, autoApprovalActions] = useAutoApproval(
-		isOpen ? transaction : null,
-		suiClient,
-		origin,
-		undefined, // ruleSetId is now extracted by AutoApprovalManager
-	);
+	const [autoApprovalState, autoApprovalActions] = useAutoApproval(analysis, suiClient, origin);
 
 	const handleSignAndApprove = useCallback(async () => {
 		try {
-			if (autoApprovalState.transaction) {
-				await onApprove(autoApprovalState.transaction);
+			if (analysis) {
+				await onApprove(analysis.results.bytes);
 			} else {
 				throw new Error('No transaction to approve');
 			}
 		} catch (error) {
 			console.error('❌ Failed to approve transaction:', error);
 			onReject(`Transaction failed: ${error}`);
 		}
-	}, [autoApprovalState.transaction, onApprove, onReject]);
+	}, [analysis, onApprove, onReject]);
 
 	const handleReject = () => {
 		autoApprovalActions.rejectTransaction();
@@ -76,7 +66,7 @@ export function TransactionApprovalModal({
 	// Remove the separate analyzing state rendering
 
 	// Show analysis error - don't allow approval when transaction analysis fails
-	if (autoApprovalState.analysisError) {
+	if (analysis?.issues.length) {
 		return (
 			<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
 				<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
@@ -106,7 +96,7 @@ export function TransactionApprovalModal({
 
 					<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
 						<p className="text-sm text-red-800 font-medium">Error Details:</p>
-						<p className="text-sm text-red-700 mt-1">{autoApprovalState.analysisError}</p>
+						<p className="text-sm text-red-700 mt-1">{analysis.issues.join(', ')}</p>
 					</div>
 
 					<div className="flex justify-end space-x-3">
@@ -133,7 +123,7 @@ export function TransactionApprovalModal({
 	// Do NOT show when: policy is disabled, OR transaction is cancelled, OR already showing "Auto-Approval Cancelled" message
 	const hasAvailablePolicy =
 		autoApprovalState.policy &&
-		(autoApprovalState.analysis as any)?.autoApproved && // Transaction matches policy rules
+		autoApprovalState.canAutoApprove && // Transaction matches policy rules
 		!autoApprovalState.cancelled && // Not cancelled
 		(!autoApprovalState.hasExistingPolicy || // No policy exists yet, OR
 			(autoApprovalState.hasExistingPolicy &&
@@ -190,8 +180,7 @@ export function TransactionApprovalModal({
 			isOpen={isOpen}
 			account={walletRequest.account}
 			requestType="signAndExecute"
-			transaction={autoApprovalState.transaction ?? null}
-			analysis={autoApprovalState.isAnalyzing ? null : autoApprovalState.analysis}
+			analysis={analysis}
 			onApprove={handleSignAndApprove}
 			onReject={handleReject}
 			autoApprove={

packages/wallet-sdk/examples/demo-app/src/wallet/components/signing/TransactionContent.tsx

@@ -1,22 +1,16 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Transaction } from '@mysten/sui/transactions';
 import { TransactionDetails } from './transaction/TransactionDetails.js';
-import type { TransactionAnalysis } from '@mysten/wallet-sdk';
+import type { AutoApprovalAnalysis } from '@mysten/wallet-sdk';
 
 interface TransactionContentProps {
-	transaction: Transaction | null;
-	analysis?: TransactionAnalysis;
+	analysis?: AutoApprovalAnalysis;
 	autoApprovalState?: any;
 }
 
-export function TransactionContent({
-	transaction,
-	analysis,
-	autoApprovalState,
-}: TransactionContentProps) {
-	if (!transaction) {
+export function TransactionContent({ analysis, autoApprovalState }: TransactionContentProps) {
+	if (!analysis) {
 		return null;
 	}
 
@@ -29,11 +23,7 @@ export function TransactionContent({
 
 			<div className="bg-gray-50 rounded-xl border border-gray-200 overflow-hidden shadow-sm">
 				<div className="p-5">
-					<TransactionDetails
-						transaction={transaction}
-						analysis={analysis}
-						autoApprovalState={autoApprovalState}
-					/>
+					<TransactionDetails analysis={analysis} autoApprovalState={autoApprovalState} />
 				</div>
 			</div>
 		</div>

packages/wallet-sdk/examples/demo-app/src/wallet/components/signing/transaction/CoinFlowEntry.tsx

@@ -3,32 +3,26 @@
 
 export interface CoinFlowEntryProps {
 	coinType: string;
-	amount: string;
 	decimals: number;
-	symbol: string;
-	isRecognized: boolean;
+	price: number;
+	amount: bigint;
+	convertedAmount: number;
 }
 
-export function CoinFlowEntry({
-	coinType,
-	amount,
-	decimals,
-	symbol,
-	isRecognized,
-}: CoinFlowEntryProps) {
+export function CoinFlowEntry({ coinType, amount, decimals }: CoinFlowEntryProps) {
 	// Safely determine if amount is positive
 	let isPositive = false;
 	try {
-		if (amount && amount !== 'NaN' && amount !== 'undefined' && amount !== 'null') {
-			isPositive = BigInt(amount) > 0n;
+		if (amount) {
+			isPositive = amount > 0n;
 		}
 	} catch (error) {
 		// If BigInt conversion fails, default to false
 		isPositive = false;
 	}
 
 	// Format the amount for display using actual decimals
-	const formatAmount = (amount: string, decimals: number) => {
+	const formatAmount = (amount: string | bigint, decimals: number) => {
 		// Validate input
 		if (!amount || amount === 'NaN' || amount === 'undefined' || amount === 'null') {
 			return '0';
@@ -98,6 +92,7 @@ export function CoinFlowEntry({
 
 		return coinType;
 	};
+	const symbol = coinType.split('::')[2] || '??';
 
 	return (
 		<div className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg">
@@ -109,20 +104,12 @@ export function CoinFlowEntry({
 
 				<div className="flex-1">
 					<div className="flex items-center space-x-2">
-						<span className="font-medium text-sm text-gray-900">
-							{isRecognized ? symbol : symbol}
-						</span>
-						{!isRecognized && (
-							<span className="text-xs text-orange-700 bg-orange-100 px-2 py-0.5 rounded-full font-medium">
-								UNRECOGNIZED
-							</span>
-						)}
+						<span className="font-medium text-sm text-gray-900">{symbol}</span>
+					</div>
+
+					<div className="text-xs text-gray-500 mt-0.5 font-mono" title={coinType}>
+						{formatCoinType(coinType)}
 					</div>
-					{!isRecognized && (
-						<div className="text-xs text-gray-500 mt-0.5 font-mono" title={coinType}>
-							{formatCoinType(coinType)}
-						</div>
-					)}
 				</div>
 			</div>