useSignAndExecuteTransaction

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

Live Editor

function UseSignAndExecuteTransactionExample() {
    const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
    const [digest, setDigest] = useState('');
    const currentAccount = useCurrentAccount();

    return (
        <div style={{ padding: 20 }}>
            {currentAccount && (
                <>
                    <div>
                        <button
                            onClick={() => {
                                signAndExecuteTransaction(
                                    {
                                        transaction: new Transaction(),
                                    },
                                    {
                                        onSuccess: (result) => {
                                            console.log('executed transaction', result);
                                            setDigest(result.digest);
                                        },
                                    },
                                );
                            }}
                        >
                            Sign and execute transaction
                        </button>
                    </div>
                    <div>Digest: {digest}</div>
                </>
            )}
        </div>
    );
}

Result

Loading...

Return additional data, or execute 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,
    useIotaClient,
    useCurrentAccount,
    useSignAndExecuteTransaction,
} from '@iota/dapp-kit';
import { useState } from 'react';

function MyComponent() {
    const client = useIotaClient();
    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(),
                                    },
                                    {
                                        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 IotaClient.signAndExecuteTransaction method accepts.