Send Transactions
This guide will teach you how to deploy new Safe accounts and create, sign, and execute Safe transactions using the Safe React Hooks.
For more detailed information, see the Safe React Hooks Reference.
Prerequisites
Install dependencies
First, you need to install some dependencies.
_10pnpm add @safe-global/safe-react-hooks
Steps
Imports
Here are all the necessary imports for this guide.
_10import {_10 SafeProvider,_10 createConfig,_10 useSafe,_10 useSendTransaction,_10 SendTransactionVariables,_10 useConfirmTransaction,_10 ConfirmTransactionVariables_10} from '@safe-global/safe-react-hooks'_10import { sepolia } from 'viem/chains'
Create a signer and provider
Firstly, you need to get a signer, which will be the owner of a Safe account after it's deployed.
This example uses a private key, but any way to get an EIP-1193 compatible signer can be used.
_10const SIGNER_ADDRESS = // ..._10const SIGNER_PRIVATE_KEY = // ..._10_10const RPC_URL = 'https://rpc.ankr.com/eth_sepolia'
Initialize the Safe React Hooks
You need to wrap your app with the SafeProvider to have access to the different Safe React Hooks like useSendTransaction(), useConfirmTransaction(), and usePendingTransactions() that will provide the functionality you need in this guide.
SafeProvider receives a config object with different properties to create the global configuration that you can get from the createConfig function.
When deploying a new Safe account for the connected signer, you need to pass the configuration of the Safe in the safeOptions property. In this case, the Safe account is configured with your signer as the only owner.
_10const config = createConfig({_10 chain: sepolia,_10 provider: RPC_URL,_10 signer: SIGNER_PRIVATE_KEY,_10 safeOptions: {_10 owners: [SIGNER_ADDRESS],_10 threshold: 1_10 }_10})
To apply the global configuration to your app, pass the created config to the SafeProvider.
_10<SafeProvider config={config}>_10 <App />_10</SafeProvider>
Create a Safe transaction
Create an array of Safe transactions to execute.
_10const transactions = [{_10 to: '0x...',_10 data: '0x',_10 value: '0'_10}]
Send the Safe transaction
Create a SendTransaction component in your application to create and send a transaction.
If you configured your Safe with threshold equal to 1, calling the sendTransaction function from the useSendTransaction hook will execute the Safe transaction. However, if the threshold is greater than 1 the other owners of the Safe will need to confirm the transaction until the required number of signatures are collected.
_15function SendTransaction() {_15 const { sendTransaction } = useSendTransaction()_15_15 const sendTransactionParams: SendTransactionVariables = {_15 transactions_15 }_15_15 return (_15 <button onClick={() => sendTransaction(sendTransactionParams)}>_15 Send Transaction_15 </button>_15 )_15}_15_15export default SendTransaction
Confirm the Safe transaction
Create a ConfirmPendingTransactions component in your application to check the transactions pending for confirmation in case the Safe transaction needs to be confirmed by other Safe owners.
Retrieve all the pending Safe transactions from the Safe Transaction Service by calling the getPendingTransaction function from the useSafe hook, and call the confirmTransaction function from the useConfirmTransaction hook to confirm them.
Notice that the SafeProvider configuration needs to be initialized with a different Safe owner as the signer when confirming a transaction.
_20function ConfirmPendingTransactions() {_20 const { getPendingTransactions } = useSafe()_20 const { data = [] } = getPendingTransactions()_20 const { confirmTransaction } = useConfirmTransaction()_20_20 return (_20 <>_20 {data.length > 0 && data.map(tx => (_20 <>_20 {tx.safeTxHash}_20 <button onClick={() => confirmTransaction({_20 safeTxHash: tx.safeTxHash_20 })} />_20 </>_20 ))}_20 </>_20 )_20}_20_20export default ConfirmPendingTransactions
Once the total number of confirmations reaches the threshold of the Safe, the confirmTransaction will automatically execute the transaction.
Recap and further reading
After following this guide, you are able to deploy new Safe accounts and create, sign, and execute Safe transactions using the Safe React Hooks.