Nexus Widgets
This page will help you quickly get started with nexus-widgets.
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:
- For more docs on
nexus-widgets, you can refer to the Nexus SDK reference. - Also refer to the API reference for a complete feature list.
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>
);
}Using Nexus-widgets, initialization can be done in two ways:
- Auto: The UI components initialize the SDK automatically when invoked, provided a provider is set.
- Manual: You call
initializeSdk(provider)yourself.
In both cases, hooks are mandatory for bridge/transfer/execute flows; events are optional.
FOR EXAMPLE:
The demo app sets up the NexusProvider in the __root.tsx file,
wrapping the entire application with both wallet authentication and the Nexus provider.
Auto Initialization (via 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;
}WHAT ABOUT THE HOOKS?
-
It is mandatory to set up some hooks to use the SDK effectively. Without these hooks, the flow will not progress at all. You can read more about them in the Nexus Core Quickstart page.
-
The widgets provided under the
nexus-widgetsset up the hooks for you when you use them. This means that you don’t need to set up the hooks manually when you use the widgets.
Prefill behavior for the widgets
prefill lets you lock specific inputs as read-only to enforce a flow (e.g., restrict destination chain or token). Values passed in prefill appear as read-only fields.
Examples (supported keys):
BridgeButton:chainId,token,amountTransferButton:chainId,token,amount,recipientBridgeAndExecuteButton:toChainId,token,amountSwapButton:fromChainID,toChainID,fromTokenAddress,toTokenAddress,fromAmount,toAmount