Get Started
This page will help you get started with nexus as well as nexus-widgets.
Nexus (headless)
We also made a demo app for the headless package to make it easier for devs to get on-boarded with the Avail Nexus SDK. You can visit the Nexus (headless) demo app here: avail-headless-nexus-demo.avail.so
Getting started with the headless Nexus SDK is simple.
Make sure to have a wallet provider
The Nexus SDK requires an injected wallet provider (e.g. RainbowKit, ConnectKit, etc.)
Initialize the SDK
Choose the network type you want to use and initialize the SDK with the wallet provider.
import type { NexusNetwork } from '@avail-project/nexus';
// Mainnet (default)
const sdk = new NexusSDK();
// Testnet
const sdk = new NexusSDK({ network: 'testnet' as NexusNetwork });
// Initialize with provider (required)
await sdk.initialize(window.ethereum); // Returns: Promise<void>
Nexus-Widgets (React)
We also made a demo app for the widgets package to make it easier for devs to get on-boarded with the Avail Nexus SDK. You can visit the Nexus (widgets) demo app here: nexus-ui-components-demo.avail.so
The nexus-widgets package is a set of React components that make it easier to integrate the Nexus SDK into your React app.
Wrap your app with NexusProvider
import { NexusProvider } from '@avail-project/nexus-widgets';
export default function App() {
return (
<NexusProvider
config={{
debug: false, // true to view debug logs
network: 'testnet', // "mainnet" (default) or "testnet"
}}
>
<YourApp />
</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.
Use UI Components
Forward the wallet provider
import { useEffect } from 'react';
import { useAccount } from '@wagmi/react'; // any wallet lib works
import { useNexus } from '@avail-project/nexus-widgets';
export function WalletBridge() {
const { connector, isConnected } = useAccount();
const { setProvider } = useNexus();
useEffect(() => {
if (isConnected && connector?.getProvider) {
connector.getProvider().then(setProvider);
}
}, [isConnected, connector, setProvider]);
return null;
}