useSignTransactionBlock
Use the useSignTransactionBlock hook to prompt the user to sign a transaction block with their
wallet.
import {
ConnectButton,
useCurrentAccount,
useSignTransactionBlock,
useSuiClient,
} from '@mysten/dapp-kit';
import { toB64 } from '@mysten/sui/utils';
import { useState } from 'react';
function MyComponent() {
const { mutateAsync: signTransactionBlock } = useSignTransactionBlock();
const [signature, setSignature] = useState('');
const client = useSuiClient();
const currentAccount = useCurrentAccount();
return (
<div style={{ padding: 20 }}>
<ConnectButton />
{currentAccount && (
<>
<div>
<button
onClick={async () => {
const { bytes, signature, reportTransactionEffects } = await signTransactionBlock({
transactionBlock: new TransactionBlock(),
chain: 'sui:devnet',
});
const executeResult = await client.executeTransactionBlock({
transactionBlock: bytes,
signature,
options: {
showRawEffects: true,
},
});
// Always report transaction effects to the wallet after execution
reportTransactionEffects(result.rawEffects!);
console.log(executeResult);
}}
>
Sign empty transaction block
</button>
</div>
<div>Signature: {signature}</div>
</>
)}
</div>
);
}Example
Arguments
transactionBlock: The transaction block to sign.chain: (optional) The chain identifier the transaction block should be signed for.
Result
signature: The signature of the message, as a Base64-encodedstring.transactionBlockBytes: The serialized transaction bytes, as a a Base64-encodedstring.reportTransactionEffects: A function to report the transaction effects to the wallet. This callback should always be invoked after executing the signed transaction. This function accepts therawEffectsreturned from JSON-RPCexecuteTransactionBlockmethod, or theeffects.bcswhen executing with the GraphQL API.