`<BridgeAndExecuteButton>`

SET UP THE SDK BEFORE YOU START:

You can find the SDK setup instructions in the Overview page.

Use the BridgeAndExecuteButton component to provide a pre-built interface that handles bridging tokens to a destination chain and then executing a smart contract function on that chain in a single flow.

The widget automatically manages the bridge + execute flow, UI modals, transaction state, and token approvals.
Useful for flows like “bridge 500 USDC to Base and stake it in a lending pool in a single click.”

Props

Typescript


type DynamicParamBuilder = (
  token: SUPPORTED_TOKENS,
  amount: string,
  chainId: SUPPORTED_CHAINS_IDS,
  userAddress: `0x${string}`,
) => {
  functionParams: readonly unknown[];
  value?: string; // wei; defaults to "0"
};
 
interface BridgeAndExecuteButtonProps {
  title?: string; // Will appear once intialization is completed
  contractAddress: `0x${string}`; // REQUIRED
  contractAbi: Abi; // REQUIRED
  functionName: string; // REQUIRED
  buildFunctionParams: DynamicParamBuilder; // REQUIRED
  prefill?: { toChainId?: number; token?: SUPPORTED_TOKENS; amount?: string };
  className?: string;
  children(props: { onClick(): void; isLoading: boolean; disabled: boolean }): React.ReactNode;
}

Example

Note:
Refer to the API reference for a full list of supported tokens and chains, as well as more examples of how to use the BridgeAndExecuteButton widget.

Here are examples of how to use the BridgeAndExecuteButton widget:

Basic Bridge & Execute Button

App.tsx


<BridgeAndExecuteButton
  contractAddress="0x794a61358D6845594F94dc1DB02A252b5b4814aD" // Aave Pool
  contractAbi={
    [
      {
        name: 'supply',
        type: 'function',
        stateMutability: 'nonpayable',
        inputs: [
          { name: 'asset', type: 'address' },
          { name: 'amount', type: 'uint256' },
          { name: 'onBehalfOf', type: 'address' },
          { name: 'referralCode', type: 'uint16' },
        ],
        outputs: [],
      },
    ] as const
  }
  functionName="supply"
  buildFunctionParams={(token, amount, chainId, userAddress) => {
    const decimals = TOKEN_METADATA[token].decimals;
    const amountWei = parseUnits(amount, decimals);
    const tokenAddress = TOKEN_CONTRACT_ADDRESSES[token][chainId];
    return {
      functionParams: [tokenAddress, amountWei, userAddress, 0],
    };
  }}
  prefill={{ toChainId: 1, token: 'USDC' }}
>
  {({ onClick, isLoading, disabled }) => (
    <button onClick={onClick} disabled={isLoading || disabled}>
      {isLoading ? 'Processing…' : 'Bridge & Supply to Aave'}
    </button>
  )}
</BridgeAndExecuteButton>

buildFunctionParams receives the validated UX input (token, amount, destination chainId) plus the connected wallet address and must return the encoded functionParams (and optional ETH value) used in the destination call.

The library then:

Bridges the asset to toChainId.
Sets ERC-20 allowance if required.
Executes contractAddress.functionName(functionParams, { value }).

Pre-filled Bridge & Execute

App.tsx


import { NexusProvider  BridgeAndExecuteButton, TOKEN_METADATA, TOKEN_CONTRACT_ADDRESSES } from '@avail-project/nexus/ui';
import { parseUnits } from 'viem';
 
function App() {
  return (
    <BridgeAndExecuteButton
      contractAddress="0x794a61358D6845594F94dc1DB02A252b5b4814aD"
      contractAbi={[
        {
          name: 'supply',
          type: 'function',
          stateMutability: 'nonpayable',
          inputs: [
            { name: 'asset', type: 'address' },
            { name: 'amount', type: 'uint256' },
            { name: 'onBehalfOf', type: 'address' },
            { name: 'referralCode', type: 'uint16' },
          ],
          outputs: [],
        },
      ]}
      functionName="supply"
      buildFunctionParams={(token, amount, chainId, userAddress) => {
        const decimals = TOKEN_METADATA[token].decimals;
        const amountWei = parseUnits(amount, decimals);
        const tokenAddr = TOKEN_CONTRACT_ADDRESSES[token][chainId];
        return { 
          functionParams: [tokenAddr, amountWei, userAddress, 0]
        };
      }}
      prefill={{
        toChainId: 42161,    // Arbitrum
        token: 'USDT',
        amount: '100'
      }}
    >
      {({ onClick, isLoading, disabled }) => (
        <button onClick={onClick} disabled={disabled || isLoading}>
          {isLoading ? 'Processing…' : 'Bridge 100 USDT to Arbitrum & Supply to AAVE'}
        </button>
      )}
    </BridgeAndExecuteButton>
  );
}