dApp Kit
Wallet Hooks
useSignAndExecuteTransaction

useSignAndExecuteTransaction

Use the useSignAndExecuteTransaction hook to prompt the user to sign and execute a transaction block with their wallet.

import { ConnectButton, useCurrentAccount, useSignAndExecuteTransaction } from '@mysten/dapp-kit';
import { useState } from 'react';
 
function MyComponent() {
	const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
	const [digest, setDigest] = useState('');
	const currentAccount = useCurrentAccount();
 
	return (
		<div style={{ padding: 20 }}>
			<ConnectButton />
			{currentAccount && (
				<>
					<div>
						<button
							onClick={() => {
								signAndExecuteTransaction(
									{
										transaction: new Transaction(),
										chain: 'sui:devnet',
									},
									{
										onSuccess: (result) => {
											console.log('executed transaction', result);
											setDigest(result.digest);
										},
									},
								);
							}}
						>
							Sign and execute transaction
						</button>
					</div>
					<div>Digest: {digest}</div>
				</>
			)}
		</div>
	);
}

Example

Return additional data, or executing through GraphQL

To customize how transactions are executed, and what data is returned when executing a transaction, you can pass a custom execute function.

import {
	ConnectButton,
	useSuiClient,
	useCurrentAccount,
	useSignAndExecuteTransaction,
} from '@mysten/dapp-kit';
import { useState } from 'react';
 
function MyComponent() {
	const client = useSuiClient();
	const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction({
		execute: async ({ bytes, signature }) =>
			await client.executeTransactionBlock({
				transactionBlock: bytes,
				signature,
				options: {
					// Raw effects are required so the effects can be reported back to the wallet
					showRawEffects: true,
					// Select additional data to return
					showObjectChanges: true,
				},
			}),
	});
 
	const [digest, setDigest] = useState('');
	const currentAccount = useCurrentAccount();
 
	return (
		<div style={{ padding: 20 }}>
			<ConnectButton />
			{currentAccount && (
				<>
					<div>
						<button
							onClick={() => {
								signAndExecuteTransaction(
									{
										transaction: new Transaction(),
										chain: 'sui:devnet',
									},
									{
										onSuccess: (result) => {
											console.log('object changes', result.objectChanges);
											setDigest(result.digest);
										},
									},
								);
							}}
						>
							Sign and execute transaction
						</button>
					</div>
					<div>Digest: {digest}</div>
				</>
			)}
		</div>
	);
}

Arguments

  • transaction: The transaction to sign and execute.
  • chain: (optional) The chain identifier the transaction should be signed for.
  • execute: (optional) A custom function to execute the transaction

In addition to these options, you can also pass any options that the SuiClient.signAndExecuteTransaction method accepts.