Skip to main content

useTransact

useTransact is a React hook that facilitates performing transactions on the Sui network, handling wallet interactions and transaction lifecycle events.

Usage

import { useTransact } from '@suiware/kit'
import { Transaction } from '@mysten/sui/transactions'

function MyComponent() {
const { transact } = useTransact({
onBeforeStart: () => console.log('Transaction starting...'),
onSuccess: (data) => console.log('Transaction succeeded:', data),
onError: (e) => console.error('Transaction failed:', e)
})

const handleTransaction = () => {
const tx = new Transaction()
// Configure transaction...
transact(tx)
}

return (
<button onClick={handleTransaction}>
Perform Transaction
</button>
)
}

Parameters

The hook accepts an options object with the following properties:

ParameterTypeDescription
onBeforeStart() => void(Optional) Callback executed when user triggers a transaction
onSuccess(data: SuiSignAndExecuteTransactionOutput) => void(Optional) Callback executed after successful transaction completion
onError(e: Error) => void(Optional) Callback executed if transaction fails

Return Value

The hook returns an object with:

PropertyTypeDescription
transact(tx: Transaction) => voidFunction to execute a transaction on the Sui network

Features

  • Handles wallet interaction for transaction signing

  • Automatic transaction confirmation tracking

  • Success/error notification management

  • Integration with Sui Explorer for transaction viewing

  • Complete transaction lifecycle management

Usage Examples

Basic Transaction

const { transact } = useTransact()

const handleTransaction = () => {
const tx = new Transaction()
tx.moveCall({
target: `${packageId}::module::function`,
arguments: [/* ... */],
})
transact(tx)
}

With Event Handlers

const { transact } = useTransact({
onBeforeStart: () => {
setLoading(true)
},
onSuccess: (data) => {
setLoading(false)
refreshData()
},
onError: (e) => {
setLoading(false)
showError(e.message)
}
})

Full Example with Move Call

import { useTransact } from '@suiware/kit'
import { Transaction } from '@mysten/sui/transactions'

function GreetingComponent() {
const { transact } = useTransact({
onSuccess: () => {
console.log('Greeting updated!')
}
})

const updateGreeting = (packageId: string, objectId: string, name: string) => {
const tx = new Transaction()
tx.moveCall({
arguments: [
tx.object(objectId),
tx.pure.string(name),
tx.object('0x8')
],
target: `${packageId}::greeting::set_greeting`,
})
transact(tx)
}

return (
<button onClick={() => updateGreeting(packageId, objectId, 'Hello')}>
Update Greeting
</button>
)
}