Skip to content

Send Transactions

Package: @decent.xyz/box-hooks
Hook: useBoxAction

Decent's Hooks take an action configuration and return a transaction object that can be sent onchain using your preferred web3 library. Hooks streamline the process of building transaction calldata and take all of the guesswork out of handling multiple chains and tokens.

Common actions might include: sending a cross-chain swap, minting an NFT, or depositing into a vault contract. Please see the ActionType definition for all available action types.

Sample Request & Implementation

Please be sure to view the Getting Started section before progressing through these steps.

Step one: Import recommended libraries

The example below uses wagmi; however, you can use whatever your preferred web3 library is to send Decent transactions. You can find the BoxActionRequest type here.

import {
  useBoxAction,
  useDecentScan,
  UseBoxActionArgs
} from '@decent.xyz/box-hooks';
import { sendTransaction, waitForTransactionReceipt } from '@wagmi/core';
import { wagmiConfig } from '../your_wagmi_config_path';
 
// wagmi a required prop in v2.1.0 and higher.
// Create a config for your project following these docs:
// https://wagmi.sh/react/api/createConfig

Step two: Configure the transaction request

Build the transaction configuration based on the required parameters for your selected ActionType. Use UseBoxActionArgs for type safety. For assistance with this configuration, please visit the Playground page of Decent's Developer Console. The Playground will help parse ABI's for any verified smart contract and provide a no-code interface to configure transaction requests.

The example shown below executes a swap of 1 ETH on Optimism for USDC on Arbitrum and transfers funds to a target wallet address.

import {
  useBoxAction,
  useDecentScan,
  UseBoxActionArgs
} from '@decent.xyz/box-hooks';
import { ChainId } from '@decent.xyz/box-common';
import { sendTransaction, waitForTransactionReceipt } from '@wagmi/core';
import { wagmiConfig } from '../your_wagmi_config_path';
 
const txConfig: UseBoxActionArgs = {  
  actionType: ActionType.SwapAction,  
  sender: "Connected Wallet", 
  srcToken: '0x0000000000000000000000000000000000000000',  
  dstToken: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',  
  slippage: 1, // 1%, Note: cannot be 0
  srcChainId: "Connected Chain",  
  dstChainId: ChainId.ARBITRUM,  
  actionConfig: {  
    amount: 1000000000000000000n,  
    swapDirection: 'exact-amount-in',  
    receiverAddress: '0xAcCC1fe6537eb8EB56b31CcFC48Eb9363e8dd32E',  
  },  
};

Step three: Build the transaction

Decent's useBoxAction hook functions similarly to the prepareTransactionRequest of other web3 libraries, like wagmi. Given your configuration from step two, this hook will return a transaction object that you can send onchain for execution.

import {
  useBoxAction,
  useDecentScan,
  UseBoxActionArgs
} from '@decent.xyz/box-hooks';
import { sendTransaction, waitForTransactionReceipt } from '@wagmi/core';
import { wagmiConfig } from '../your_wagmi_config_path';
 
const txConfig: UseBoxActionArgs = {
  actionType: ActionType.SwapAction,
  sender: "Connected Wallet",
  srcToken: '0x0000000000000000000000000000000000000000',
  dstToken: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
  slippage: 1n,
  srcChainId: 10,
  dstChainId: 42161,
  actionConfig: {
    amount: 1000000000000000000n,
    swapDirection: 'exact-amount-in',
    receiverAddress: '0xAcCC1fe6537eb8EB56b31CcFC48Eb9363e8dd32E',
  },
};
 
export async function sendDecentTransaction({ 
  txConfig, 
}: { 
  txConfig: UseBoxActionArgs; 
}) { 
  const { actionResponse, isLoading, error } = useBoxAction(txConfig); 
 
  const account = getAccount(wagmiConfig); 
  const publicClient = getPublicClient(wagmiConfig); 
 
  const tx = actionResponse?.tx as EvmTransaction; 
}

useBoxAction response schema follows BoxActionResponse.

Step four: Send & track your transaction

Use your preferred web3 library to actually send the transaction returned from step three. You can pair Decent's useDecentScan hook with wagmi's (or another web3 library) waitForTransactionReceipt to track both the source and destination chain transaction confirmations.

import {
  useBoxAction,
  useDecentScan,
  UseBoxActionArgs
} from '@decent.xyz/box-hooks';
import { sendTransaction, waitForTransactionReceipt } from '@wagmi/core';
import { wagmiConfig } from '../your_wagmi_config_path';
 
const txConfig: BoxActionRequest = {
  actionType: ActionType.SwapAction,
  sender: "Connected Wallet",
  srcToken: '0x0000000000000000000000000000000000000000',
  dstToken: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
  slippage: 1n,
  srcChainId: 10,
  dstChainId: 42161,
  actionConfig: {
    amount: 1000000000000000000n,
    swapDirection: 'exact-amount-in',
    receiverAddress: '0xAcCC1fe6537eb8EB56b31CcFC48Eb9363e8dd32E',
  },
};
 
export async function sendDecentTransaction({
  txConfig,
}: {
  txConfig: UseBoxActionArgs;
}) {
  const { actionResponse, isLoading, error } = useBoxAction(txConfig);
 
  const account = getAccount(wagmiConfig);
  const publicClient = getPublicClient(wagmiConfig);
 
  const tx = actionResponse?.tx as EvmTransaction;
  const gas = await publicClient?.estimateGas({ 
    account,
    ...tx,
  });
 
  const hash = await sendTransaction(wagmiConfig, { 
    ...tx, 
    gas, 
  }); 
  return hash; 
 
  const { data, isLoading } = useDecentScan({ 
    srcTxHash: hash, 
    srcChainId: txConfig.srcChainId, 
  }); 
}