Get Started
This page will help you get started with nexus-core as well as nexus-widgets.
Nexus Core
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:
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.)
To be clear, even a basic injected provider using the window.ethereum object will work, but we recommend using a dedicated wallet provider.
Initialize the SDK
A more complete example of getting started with nexus-core can be found in this page of our docs.
Choose the network type you want to use and initialize the SDK with the wallet provider.
import { NexusSDK } from '@avail-project/nexus';
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:
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;
}