Get Started

We built a React demo app that uses the Avail Nexus SDK UI components to implement a unified Web3 experience.

You can use the app here: nexus-ui-components-demo.vercel.app
You can find the code for the app here: availproject/nexus-ui-components-demo

The Avail Nexus SDK provides both headless functionality and pre-built React UI components. This guide covers the React UI components which offer the fastest way to integrate chain abstraction into your React app.

The SDK provides BridgeButton, TransferButton, and BridgeAndExecuteButton components. Each widget is covered in detail in the following pages.

Get `NexusProvider`

Wrap your app with the NexusProvider.

Enable the Nexus SDK functionality by adding the NexusProvider to your app’s root component. (For e.g.,layout.tsx in Next.js or App.tsx in Remix, etc.):

__root.tsx


import { NexusProvider } from '@avail-project/nexus';
 
export default function Root() {
  return (
    <NexusProvider
      config={{
        network: 'testnet', // "mainnet" (default) or "testnet"
      }}
    >
      <App />
    </NexusProvider>
  );
}

FOR EXAMPLE:

The demo app sets up the NexusProvider in the __root.tsx file, wrapping the entire application with both wallet authentication (Privy) and the Nexus provider.

Set Wallet Provider

Forward the user’s wallet provider.

Connect your wallet library to the Nexus SDK by forwarding the provider:

WalletBridge.tsx


import { useEffect } from 'react';
import { useAccount } from '@wagmi/react'; // any wallet lib works
import { useNexus } from '@avail-project/nexus';
 
export function WalletBridge() {
  const { connector, isConnected } = useAccount();
  const { setProvider } = useNexus();
 
  useEffect(() => {
    if (isConnected && connector?.getProvider) {
      connector.getProvider().then(setProvider);
    }
  }, [isConnected, connector, setProvider]);
 
  return null;
}

💡

Any wallet library works: The example shows Wagmi, but you can use Privy, RainbowKit, ConnectKit, or any library that provides an EIP-1193 provider.

The demo app uses Privy and forwards the provider in connect-wallet.tsx .

Use UI Widget

Drop a widget into your UI.

Use the pre-built UI components for common chain abstraction operations. The following example shows how you would use the bridge, but other widgets are covered in the following pages:

App.tsx


import {
  BridgeButton,
} from '@avail-project/nexus';
 
/*  Bridge ----------------------------------------------------------- */
<BridgeButton prefill={{ chainId: 137, token: 'USDC', amount: '100' }}>
  {({ onClick, isLoading }) => (
    <button onClick={onClick} disabled={isLoading}>
      {isLoading ? 'Bridging…' : 'Bridge 100 USDC → Polygon'}
    </button>
  )}
</BridgeButton>

Access Unified Balance

Fetch the unified balance for a user.

You can access the SDK directly through the useNexus hook to call any headless SDK methods, including balance fetching:

BalanceComponent.tsx


import { useNexus } from '@avail-project/nexus';
import { useEffect, useState } from 'react';
 
function BalanceComponent() {
  const { sdk } = useNexus();
  const [balances, setBalances] = useState([]);
 
  useEffect(() => {
    async function fetchBalances() {
      if (sdk) {
        // Get all balances across chains
        const allBalances = await sdk.getUnifiedBalances();
        setBalances(allBalances);
 
        // Or get balance for specific token
        const usdcBalance = await sdk.getUnifiedBalance('USDC');
        console.log('USDC balance:', usdcBalance);
      }
    }
 
    fetchBalances();
  }, [sdk]);
 
  return (
    <div>
      {balances.map((asset) => (
        <div key={asset.symbol}>
          {asset.symbol}: {asset.balance}
        </div>
      ))}
    </div>
  );
}

💡

No manual initialization needed: The useNexus hook gives you direct access to the initialized SDK instance. You don’t need to call initialize() manually - the NexusProvider handles this automatically when a wallet provider is connected.

What do we mean by “unified balance”?

Unified balance shows all the liquidity in a user’s EOA account across multiple chains in one view. It lets users transact seamlessly on any chain without needing bridges or pre-provisioning gas for token swaps. Chain abstraction handles all the complexity involved in a cross-chain transaction while enabling better UX through a single intent approval.

For instance, let us take the case where a user intends to spend 18 USDC on Scroll and does not have any balance on Scroll.

Optimism: 0.1 ETH, O USDT, 0 USDC
Arbitrum: 0 ETH, 12 USDT, 0 USDC
Base: 0 ETH, 10 USDT, 0 USDC
Scroll: 0 ETH, 0 USDT, 0 USDC

To spend 18 USDC on Scroll (destination chain) with the given liquidity fragmentation, it would typically require multiple clicks and steps for swapping or bridging different assets available on the source chains, so that user can convert the assets to the desired token balance on Scroll.

Through chain abstraction and ability to swap cross-chain, users have the convenience to view the consolidated token balance across supported tokens and chains. This simplifies the process of sending 18 USDC on Optimism, as users can sign the intent without the need for bridging, swapping, or considering the optimal routes.

The cross-chain swap enables users to:

Spend assets on any destination chain without prior liquidity.
Collate payable amount by combining multiple supported assets across source chains to address liquidity fragmentation.