Get Started

// Complete example showing both wallet provider setup AND widget usage
import { useEffect } from 'react';
import { useAccount } from '@wagmi/react';
import { useNexus, BridgeButton } from '@avail-project/nexus/ui';
 
function MyApp() {
  const { connector, isConnected } = useAccount();
  const { setProvider } = useNexus();
 
  // Forward wallet provider
  useEffect(() => {
    if (isConnected && connector?.getProvider) {
      connector.getProvider().then(setProvider);
    }
  }, [isConnected, connector, setProvider]);
 
  // Use UI widgets (initialization happens automatically)
  return (
    <BridgeButton prefill={{ chainId: 137, token: 'USDC', amount: '100' }}>
      {({ onClick, isLoading }) => (
        <button onClick={onClick} disabled={isLoading}>
          {isLoading ? 'Bridging…' : 'Bridge 100 USDC → Polygon'}
        </button>
      )}
    </BridgeButton>
  );
}

import { useNexus } from '@avail-project/nexus/ui';
 
function MyComponent() {
  const { initializeSdk, sdk, isSdkInitialized } = useNexus();
 
  const handleInitialize = async () => {
    const provider = await window.ethereum; // or get from your wallet library
    await initializeSdk(provider); // Initializes both SDK and UI state
 
    // Now you can use SDK methods directly
    const balances = await sdk.getUnifiedBalances();
    console.log('Balances:', balances);
 
    // UI components will already be initialized when used
  };
 
  return (
    <button onClick={handleInitialize} disabled={isSdkInitialized}>
      {isSdkInitialized ? 'SDK Ready' : 'Initialize SDK'}
    </button>
  );
}