From 74f9c59d4714ddbac26b15afd6d1aced588485a8 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Fri, 19 Sep 2025 00:17:39 +0530 Subject: [PATCH 01/13] chore: added barbeones tutorial top-level --- app/_meta.ts | 6 ++++++ app/tutorials/_meta.ts | 7 +++++++ app/tutorials/tut-1/page.mdx | 0 app/tutorials/tut-2/page.mdx | 0 app/tutorials/tut-3/page.mdx | 0 app/tutorials/tut-4/page.mdx | 0 app/tutorials/tut-5/page.mdx | 0 7 files changed, 13 insertions(+) create mode 100644 app/tutorials/_meta.ts create mode 100644 app/tutorials/tut-1/page.mdx create mode 100644 app/tutorials/tut-2/page.mdx create mode 100644 app/tutorials/tut-3/page.mdx create mode 100644 app/tutorials/tut-4/page.mdx create mode 100644 app/tutorials/tut-5/page.mdx diff --git a/app/_meta.ts b/app/_meta.ts index fb056e2fd..65c2f5bf5 100644 --- a/app/_meta.ts +++ b/app/_meta.ts @@ -14,6 +14,12 @@ export default { type: "page", title: "Data Availability", }, + + 'tutorials': { + type: "page", + title: "Tutorials", + }, + 'user-guides': { type: 'page', title: 'User Guides', diff --git a/app/tutorials/_meta.ts b/app/tutorials/_meta.ts new file mode 100644 index 000000000..a3fff71d8 --- /dev/null +++ b/app/tutorials/_meta.ts @@ -0,0 +1,7 @@ +export default { + "tut-1": "Tutorial-1", + "tut-2": "Tutorial-2", + "tut-3": "Tutorial-3", + "tut-4": "Tutorial-4", + "tut-5": "Tutorial-5", +} \ No newline at end of file diff --git a/app/tutorials/tut-1/page.mdx b/app/tutorials/tut-1/page.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/app/tutorials/tut-2/page.mdx b/app/tutorials/tut-2/page.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/app/tutorials/tut-3/page.mdx b/app/tutorials/tut-3/page.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/app/tutorials/tut-4/page.mdx b/app/tutorials/tut-4/page.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/app/tutorials/tut-5/page.mdx b/app/tutorials/tut-5/page.mdx new file mode 100644 index 000000000..e69de29bb From 654efc92aad133220a5ec43c921115384b049097 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Fri, 19 Sep 2025 00:23:45 +0530 Subject: [PATCH 02/13] chore: added Tutorials top-level to frontend --- static/introductionData.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/static/introductionData.ts b/static/introductionData.ts index 05ceacf71..0b0c14fa3 100644 --- a/static/introductionData.ts +++ b/static/introductionData.ts @@ -36,6 +36,24 @@ export const IntroData = [ }, ] }, + + { + title: "Tutorials", + description: + "Hands-on tutorials to help you build with Avail", + links: [ + { + topic: "Read more", + links: [{ link: "/tutorials/tut-1", textcolor: "3CA3FC", placeholder: "Tutorial 1"}, + {link: "/tutorials/tut-2", textcolor: "3CA3FC", placeholder: "Tutorial 2"}, + {link: "/tutorials/tut-3", textcolor: "3CA3FC", placeholder: "Tutorial 3"}, + {link: "/tutorials/tut-4", textcolor: "3CA3FC", placeholder: "Tutorial 4"}, + {link: "/tutorials/tut-5", textcolor: "3CA3FC", placeholder: "Tutorial 5"}, + ], + textcolor: "9C3D3D" + }, + ] + }, { title: "User guides", description: From 67169259afcb2e362ee4121504252a0c5e899508 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Tue, 30 Sep 2025 23:38:53 +0530 Subject: [PATCH 03/13] chore: first part of initialization tutorial done --- app/tutorials/_meta.ts | 6 + app/tutorials/tut-1/page.mdx | 336 +++++++++++++++++++++++++++++++++++ 2 files changed, 342 insertions(+) diff --git a/app/tutorials/_meta.ts b/app/tutorials/_meta.ts index a3fff71d8..2bc9bcdc5 100644 --- a/app/tutorials/_meta.ts +++ b/app/tutorials/_meta.ts @@ -1,4 +1,10 @@ export default { + + "Nexus Tutorials": { + type: "separator", + title: "Nexus Tutorials", + }, + "tut-1": "Tutorial-1", "tut-2": "Tutorial-2", "tut-3": "Tutorial-3", diff --git a/app/tutorials/tut-1/page.mdx b/app/tutorials/tut-1/page.mdx index e69de29bb..55f335b7c 100644 --- a/app/tutorials/tut-1/page.mdx +++ b/app/tutorials/tut-1/page.mdx @@ -0,0 +1,336 @@ +--- +title: "Get Started with the Nexus SDK using Next JS and Vite" +description: "This tutorial will help you get started with the Nexus SDK using Next JS and Vite" +keywords: + - docs + - Avail Nexus + - Next JS + - Vite + - Nexus SDK initialization + - Unified balances + - Fetch Balances using the Nexus SDK +--- + +import { Callout, Steps, Tabs } from 'nextra/components'; + +# Get Started with the Nexus SDK using Next JS and Vite + + +**WANT TO SKIP THE TUTORIAL?**
+We also created two template repos for devs to easily get started with the Nexus SDK using Next JS and Vite. +We recommend going through the tutorial first, but to each their own: + +1. [availproject/nexus-nextjs-template](https://github.com/availproject/nexus-nextjs-template) +2. [availproject/nexus-vite-template](https://github.com/availproject/nexus-vite-template) + + +## Prerequisites + + +The following tutorial uses `pnpm` as the package manager, adjust the commands +if you're using a different one. + + +1. Make sure [Node.js](https://nodejs.org/en) is installed on your system. We recommend +version `20.x.x` or higher. + +2. Set up a package manager of your choice. We use [pnpm](https://pnpm.io/) for this tutorial, +but alternatives like [npm](https://www.npmjs.com/) and [yarn](https://yarnpkg.com/) work just fine. + +3. Make sure you have an [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) compatible wallet provider (for example, MetaMask) installed in your browser to follow along with the tutorial. + +## Objectives + +By the end of this tutorial you will have: + +1. Understood how to initialize the Nexus SDK inside a frontend environment. +2. Implemented said initialization using Next JS and Vite. +3. Fetched unified balances using the Nexus SDK. + + +**WHAT IS A 'UNIFIED BALANCE'?**
+You can refer to this [page in our docs](/nexus/concepts/unified-balance) for more details. + + +## What Does 'Initialization' Mean Here? + +- The Nexus SDK allows you to seamlessly transfer tokens across-chains using the `.transfer()` +and `.bridge()` functions *(We'll go through them in the following tutorials)*. You can also fetch unified balances using the `.getUnifiedBalances()` function. + +- To do any of that though, the SDK needs access to a wallet. You can do this on the frontend +by using an injected wallet provider that follows the [`EIP-1193`](https://eips.ethereum.org/EIPS/eip-1193) standard. + +- And to do that, you need to call the `.initialize()` function of the SDK while passing +the wallet provider to it. + +- The flows to do this differ between the headless and the widgets SDK. +We will go over both of them in this tutorial. + + +The `.initialize()` function must be called **AFTER** a wallet has been connected. +Otherwise, the SDK will throw an error. + + +## Initialize the Nexus SDK using Next JS (A minimal example using nexus-core) + +### Objective + +In this section we will create a minimal Next JS page with 4 buttons: + +1. The first button will be used to connect a wallet to the app. +2. The second button will be used to initialize the SDK using `nexus-core`. +3. The third button will be used to fetch the unified balances using the Nexus SDK. +4. The fourth button will de-initialize the SDK using the `deinit()` function. + +### Set up a Next JS project + +1. Navigate into a directory of your choice and create a new Next JS project at it's root: + +```bash filename="Terminal" +pnpm create next-app@latest . --ts --eslint --app --src-dir +``` + +2. Install the `nexus-core` package: + +```bash filename="Terminal" +pnpm add @avail-project/nexus-core@0.0.3-beta.0 +``` + +3. Update the `src/app/page.tsx` file to the following: + +```tsx filename="src/app/page.tsx" +import { useNexus } from "@avail-project/nexus-core"; + +export default function Home() { + return
Hello Nexus!
; +} +``` + +4. Run a dev server using: + +```bash filename="Terminal" +pnpm dev +``` + +You should now have a bare bones Next JS project running in your browser. \ +Let us now get down to business!!! + +### Set up an instance of the Nexus SDK + +We will set up a single instance of the Nexus SDK and use it across the app. +This will help keep the code clean and make it easier to understand the flow of the app. + +1. Create a file at `src/lib/nexus.ts` and add the following code: + +```tsx filename="src/lib/nexus.ts" +import { NexusSDK } from '@avail-project/nexus-core'; + +export const sdk = new NexusSDK({ network: 'testnet'}); +``` + +This initializes the Nexus SDK with the `testnet` chains. +If this param is not provided, the SDK will default to `mainnet`. + + +You can check out a complete list of the supported networks [here](/nexus/avail-nexus-sdk/examples/nexus-core/api-reference#supported-chains). + + +2. Now fill the page with the following helper functions: + +```tsx filename="src/lib/nexus.ts" +export function isInitialized() { +//Helper function from the SDK to check if the SDK is initialized + return sdk.isInitialized(); +} + +export async function initializeWithProvider(provider: any) { + if (!provider) throw new Error('No EIP-1193 provider (e.g., MetaMask) found'); + + //If the SDK is already initialized, return + if (sdk.isInitialized()) return; + + //If the SDK is not initialized, initialize it with the provider passed as a parameter + await sdk.initialize(provider); +} + +export async function deinit() { + + //If the SDK is not initialized, return + if (!sdk.isInitialized()) return; + + //If the SDK is initialized, de-initialize it + await sdk.deinit(); +} + +export async function getUnifiedBalances() { + + //Get the unified balances from the SDK + return await sdk.getUnifiedBalances(); +} +``` + +Let's quickly go over the role of each function: + +1. `isInitialized()`: This thin wrapper calls `sdk.isInitialized()` from the Nexus SDK to query and return the initialization status of the SDK. +2. `initializeWithProvider(provider: any)`: This function checks if the SDK is already initialized and if not, it initializes it with the provider passed as a parameter. + +This function must be called **AFTER** a wallet has been connected. +Otherwise, the SDK will throw an error. + +3. `deinit()`: This function checks if the SDK is initialized and if so, it de-initializes it. +4. `getUnifiedBalances()`: This function calls `sdk.getUnifiedBalances()` from the Nexus SDK to fetch the unified balance of the user. + +### Set up the buttons + +Create four new files in the `src/components` directory: + + + +#### connect-button.tsx + +This component will be used to connect a `EIP-1193` compatible wallet to the app. + +```tsx filename="src/components/connect-button.tsx" +'use client'; + +export default function ConnectButton({ className }: { className?: string }) { + const onClick = async () => { + const eth = (window as any)?.ethereum; + if (!eth) return alert('Install an EIP-1193 wallet (e.g., MetaMask)'); + await eth.request?.({ method: 'eth_requestAccounts' }); + alert('Wallet already connected'); + }; + return ; +} +``` + +#### init-button.tsx + +This component will be used to initialize the SDK using `nexus-core`. + +```tsx filename="src/components/init-button.tsx" +'use client'; + +import { initializeWithProvider, isInitialized } from '../lib/nexus'; + +export default function InitButton({ + className, + onReady, +}: { className?: string; onReady?: () => void }) { + const onClick = async () => { + const eth = (window as any)?.ethereum; + try { + // We're calling our wrapper function from the lib/nexus.ts file here. + await initializeWithProvider(eth); + onReady?.(); + alert('Nexus initialized'); + } catch (e: any) { + alert(e?.message ?? 'Init failed'); + } + }; + return ; +} +``` + +#### fetch-unified-balance-button.tsx + +This component will be used to fetch the unified balances using the Nexus SDK. + +```tsx filename="src/components/fetch-unified-balance-button.tsx" +'use client'; + +import { getUnifiedBalances, isInitialized } from '../lib/nexus'; + +export default function FetchUnifiedBalanceButton({ + className, + onResult, +}: { className?: string; onResult?: (r: any) => void }) { + const onClick = async () => { + if (!isInitialized()) return alert('Initialize first'); + const res = await getUnifiedBalances(); + onResult?.(res); + console.log(res); + }; + return ; +} +``` + +#### de-init-button.tsx + +This component will be used to de-initialize the SDK using the `deinit()` function. + +```tsx filename="src/components/de-init-button.tsx" +'use client'; + +import { deinit, isInitialized } from '../lib/nexus'; + +export default function DeinitButton({ + className, + onDone, +}: { className?: string; onDone?: () => void }) { + const onClick = async () => { + await deinit(); + onDone?.(); + alert('Nexus de-initialized'); + }; + return ; +} +``` + + + +### Set up the Landing Page + +Update the `src/app/page.tsx` file to the following: + +```tsx filename="src/app/page.tsx" +'use client'; + +import { useState } from 'react'; +import ConnectButton from '@/components/connect-button'; +import InitButton from '@/components/init-button'; +import FetchUnifiedBalanceButton from '@/components/fetch-unified-balance-button'; +import DeinitButton from '@/components/de-init-button'; +import { isInitialized } from '@/lib/nexus'; + +export default function Page() { + const [initialized, setInitialized] = useState(isInitialized()); + const [balances, setBalances] = useState(null); + + const btn = + 'px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 ' + + 'disabled:opacity-50 disabled:cursor-not-allowed'; + + return ( +
+
+ + setInitialized(true)} /> + setBalances(r)} /> + { setInitialized(false); setBalances(null); }} /> + +
+ Nexus SDK Initialization Status: {initialized ? 'Initialized' : 'Not initialized'} +
+ + {balances && ( + 
{JSON.stringify(balances, null, 2)}
+ )} +
+
+ ); +} +``` + +**What's Happening Here?** + +1. We use the `useState` hook to manage the initialization status and balances of the SDK. +2. Some basic CSS is applied to the buttons to arrange them in a grid. +3. Some buttons are conditionally rendered based on the initialization status of the SDK. +4. All in all, clicking through the buttons will allow you to initialize the SDK, fetch balances for a user, and de-initialize the SDK. + + +`sdk.fetchUnifiedBalances()` returns a JSON object with the balances of the user on each of the supported chains. +We're rendering it out on the screen raw to keep the tutorial simple, but you can always format it as you please. + + From 6233254e4e049489dcc6300667503d09fc8195f5 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Tue, 30 Sep 2025 23:47:07 +0530 Subject: [PATCH 04/13] chore: attached a name to tut-1 --- app/tutorials/_meta.ts | 2 +- .../{tut-1 => nexus-initialization}/page.mdx | 31 ++++++++++++++++--- 2 files changed, 28 insertions(+), 5 deletions(-) rename app/tutorials/{tut-1 => nexus-initialization}/page.mdx (90%) diff --git a/app/tutorials/_meta.ts b/app/tutorials/_meta.ts index 2bc9bcdc5..13d843727 100644 --- a/app/tutorials/_meta.ts +++ b/app/tutorials/_meta.ts @@ -5,7 +5,7 @@ export default { title: "Nexus Tutorials", }, - "tut-1": "Tutorial-1", + "nexus-initialization": "Initialize the Nexus SDK using Next JS and Vite", "tut-2": "Tutorial-2", "tut-3": "Tutorial-3", "tut-4": "Tutorial-4", diff --git a/app/tutorials/tut-1/page.mdx b/app/tutorials/nexus-initialization/page.mdx similarity index 90% rename from app/tutorials/tut-1/page.mdx rename to app/tutorials/nexus-initialization/page.mdx index 55f335b7c..7d3cc5c07 100644 --- a/app/tutorials/tut-1/page.mdx +++ b/app/tutorials/nexus-initialization/page.mdx @@ -321,6 +321,10 @@ export default function Page() { ); } ``` + +`sdk.fetchUnifiedBalances()` returns a JSON object with the balances of the user on each of the supported chains. +We're rendering it out on the screen raw to keep the tutorial simple, but you can always format it as you please. + **What's Happening Here?** @@ -329,8 +333,27 @@ export default function Page() { 3. Some buttons are conditionally rendered based on the initialization status of the SDK. 4. All in all, clicking through the buttons will allow you to initialize the SDK, fetch balances for a user, and de-initialize the SDK. - -`sdk.fetchUnifiedBalances()` returns a JSON object with the balances of the user on each of the supported chains. -We're rendering it out on the screen raw to keep the tutorial simple, but you can always format it as you please. - +## Think About What You Just Did Here + +In just a few lines of code, you leveraged the power of the Nexus SDK to fetch a list of tokens that the user holds across several different chains. +You can now move around those tokens as you please, the possibilities are endless! + +You might want to bridge one of the tokens across chains, or maybe you want to swap all existing tokens of your user spread across +different chains into `ETH` on `Arbitrum`. + +Once you have a wallet connected and the SDK initialized, you can do all of this and more! + +Let us now move over to the final section of the tutorial where you will learn how to accomplish the same result using the +`nexus-widgets` package inside a `Vite` project. + +## Initialize the Nexus SDK using Vite (A minimal example using nexus-widgets) + +### Objective + +In this section we will create a minimal Vite project with 4 buttons: + +1. The first button will be used to connect a wallet to the app. +2. The second button will be used to initialize the SDK using `nexus-widgets`. +3. The third button will be used to fetch the unified balances using the Nexus SDK. +4. The fourth button will de-initialize the SDK using the `deinit()` function. From e9992e8e6b941693baffc9768cdbb954c1352075 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Wed, 1 Oct 2025 03:57:40 +0530 Subject: [PATCH 05/13] chore: completed nexus-core initialization tutorial --- app/tutorials/nexus-initialization/page.mdx | 30 ++++++--------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/app/tutorials/nexus-initialization/page.mdx b/app/tutorials/nexus-initialization/page.mdx index 7d3cc5c07..76c8f1155 100644 --- a/app/tutorials/nexus-initialization/page.mdx +++ b/app/tutorials/nexus-initialization/page.mdx @@ -17,7 +17,7 @@ import { Callout, Steps, Tabs } from 'nextra/components'; **WANT TO SKIP THE TUTORIAL?**
-We also created two template repos for devs to easily get started with the Nexus SDK using Next JS and Vite. +We created two template repos for devs to easily get started with the Nexus SDK using Next JS and Vite. We recommend going through the tutorial first, but to each their own: 1. [availproject/nexus-nextjs-template](https://github.com/availproject/nexus-nextjs-template) @@ -82,7 +82,7 @@ In this section we will create a minimal Next JS page with 4 buttons: 3. The third button will be used to fetch the unified balances using the Nexus SDK. 4. The fourth button will de-initialize the SDK using the `deinit()` function. -### Set up a Next JS project +### Set up a basic Next JS project 1. Navigate into a directory of your choice and create a new Next JS project at it's root: @@ -99,8 +99,6 @@ pnpm add @avail-project/nexus-core@0.0.3-beta.0 3. Update the `src/app/page.tsx` file to the following: ```tsx filename="src/app/page.tsx" -import { useNexus } from "@avail-project/nexus-core"; - export default function Home() { return
Hello Nexus!
; } @@ -138,8 +136,9 @@ You can check out a complete list of the supported networks [here](/nexus/avail- 2. Now fill the page with the following helper functions: ```tsx filename="src/lib/nexus.ts" + +// Thin wrapper that calls sdk.isInitialized() from the SDK export function isInitialized() { -//Helper function from the SDK to check if the SDK is initialized return sdk.isInitialized(); } @@ -322,19 +321,19 @@ export default function Page() { } ``` -`sdk.fetchUnifiedBalances()` returns a JSON object with the balances of the user on each of the supported chains. +`sdk.getUnifiedBalances()` returns a JSON object with the balances of the user on each of the supported chains. We're rendering it out on the screen raw to keep the tutorial simple, but you can always format it as you please. **What's Happening Here?** 1. We use the `useState` hook to manage the initialization status and balances of the SDK. -2. Some basic CSS is applied to the buttons to arrange them in a grid. -3. Some buttons are conditionally rendered based on the initialization status of the SDK. +2. Some basic CSS is applied to the buttons to arrange them in a column. +3. Some buttons are conditionally toggled based on the initialization status of the SDK. 4. All in all, clicking through the buttons will allow you to initialize the SDK, fetch balances for a user, and de-initialize the SDK. -## Think About What You Just Did Here +## Think About What You Just Did Here!!! In just a few lines of code, you leveraged the power of the Nexus SDK to fetch a list of tokens that the user holds across several different chains. You can now move around those tokens as you please, the possibilities are endless! @@ -344,16 +343,3 @@ different chains into `ETH` on `Arbitrum`. Once you have a wallet connected and the SDK initialized, you can do all of this and more! -Let us now move over to the final section of the tutorial where you will learn how to accomplish the same result using the -`nexus-widgets` package inside a `Vite` project. - -## Initialize the Nexus SDK using Vite (A minimal example using nexus-widgets) - -### Objective - -In this section we will create a minimal Vite project with 4 buttons: - -1. The first button will be used to connect a wallet to the app. -2. The second button will be used to initialize the SDK using `nexus-widgets`. -3. The third button will be used to fetch the unified balances using the Nexus SDK. -4. The fourth button will de-initialize the SDK using the `deinit()` function. From b2e486a6bdedc7dbb0180b565182736b5a563391 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Wed, 1 Oct 2025 04:02:27 +0530 Subject: [PATCH 06/13] chore: added tut-1 to landing page --- static/introductionData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/introductionData.ts b/static/introductionData.ts index 0b0c14fa3..48aa3fb43 100644 --- a/static/introductionData.ts +++ b/static/introductionData.ts @@ -44,7 +44,7 @@ export const IntroData = [ links: [ { topic: "Read more", - links: [{ link: "/tutorials/tut-1", textcolor: "3CA3FC", placeholder: "Tutorial 1"}, + links: [{ link: "/tutorials/nexus-initialization", textcolor: "3CA3FC", placeholder: "Use Nexus SDK with Next JS & Vite"}, {link: "/tutorials/tut-2", textcolor: "3CA3FC", placeholder: "Tutorial 2"}, {link: "/tutorials/tut-3", textcolor: "3CA3FC", placeholder: "Tutorial 3"}, {link: "/tutorials/tut-4", textcolor: "3CA3FC", placeholder: "Tutorial 4"}, From fc93fa16a7953e32f9d4e4a953ee8c1d1da0f4ed Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Sat, 4 Oct 2025 23:44:43 +0530 Subject: [PATCH 07/13] chore: added tutorials top-level markdown dump to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 13c21d25b..2c964b252 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,5 @@ public/sitemap-0.xml public/nexus public/da public/user-guides +public/tutorials public/llms-full.txt \ No newline at end of file From dea3d37e7da66b9892f1270dd2caa91e9f8e2243 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Sun, 5 Oct 2025 03:02:07 +0530 Subject: [PATCH 08/13] chore: progressed on the first tutorial --- app/tutorials/nexus-initialization/page.mdx | 122 +++++++++++++++++++- 1 file changed, 120 insertions(+), 2 deletions(-) diff --git a/app/tutorials/nexus-initialization/page.mdx b/app/tutorials/nexus-initialization/page.mdx index 76c8f1155..2e757590c 100644 --- a/app/tutorials/nexus-initialization/page.mdx +++ b/app/tutorials/nexus-initialization/page.mdx @@ -13,7 +13,7 @@ keywords: import { Callout, Steps, Tabs } from 'nextra/components'; -# Get Started with the Nexus SDK using Next JS and Vite +# Get Started with the Nexus SDK using Next JS **WANT TO SKIP THE TUTORIAL?**
@@ -44,7 +44,7 @@ but alternatives like [npm](https://www.npmjs.com/) and [yarn](https://yarnpkg.c By the end of this tutorial you will have: 1. Understood how to initialize the Nexus SDK inside a frontend environment. -2. Implemented said initialization using Next JS and Vite. +2. Implemented said initialization using Next JS. 3. Fetched unified balances using the Nexus SDK. @@ -343,3 +343,121 @@ different chains into `ETH` on `Arbitrum`. Once you have a wallet connected and the SDK initialized, you can do all of this and more! +Let us now move over to the final section of the tutorial where you will learn how to accomplish the same result using the +`nexus-widgets` package inside a `Vite` project. + +## Initialize the Nexus SDK using Vite (A minimal example using nexus-widgets) + +### Objective + +In this section we will create a minimal Vite project that uses wagmi to connect a wallet to the app and initialize the Nexus SDK using `nexus-widgets`. + +### Set up a basic Vite project + +1. Navigate into a directory of your choice and create a new Vite project at it's root: + +```bash filename="Terminal" +pnpm create vite@latest . --template react-ts +``` + +2. Add the following dependencies to your `package.json`, including `nexus-widgets` and `wagmi`: + +```json filename="package.json" +{ + "name": "nexus-vite-template", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@avail-project/nexus-widgets": "0.1.11-beta.0", + "@tanstack/react-query": "^5.90.2", + "connectkit": "^1.9.1", + "react": "^19.1.1", + "react-dom": "^19.1.1", + "viem": "^2.37.7", + "wagmi": "^2.17.2" + }, + "devDependencies": { + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^5.0.0", + "typescript": "^5.8.0", + "vite": "^7.1.0", + "vite-plugin-node-polyfills": "^0.24.0" + } + } +``` + +3. Install the dependencies: + +```bash filename="Terminal" +pnpm install +``` + +4. Update the `src/App.tsx` file to the following: + +```tsx filename="src/App.tsx" +import './App.css' + +function App() { + + return ( + <> +
+ Hello Nexus! +
+ + ) +} + +export default App +``` + +5. Run a dev server using: + +```bash filename="Terminal" +pnpm dev +``` + +You should now have a bare bones Vite project running in your browser. + +### Configure Vite polyfills + +Update the `vite.config.ts` file to the following: + +```ts filename="vite.config.ts" +import path from "path"; +import tailwindcss from "@tailwindcss/vite"; +import { nodePolyfills } from "vite-plugin-node-polyfills"; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + react(), + tailwindcss(), + nodePolyfills({ + exclude: ["fs"], + protocolImports: true, + }), + ], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + buffer: "vite-plugin-node-polyfills/shims/buffer", + global: "vite-plugin-node-polyfills/shims/global", + process: "vite-plugin-node-polyfills/shims/process", + }, + }, + envPrefix: ["VITE_"], +}); +``` + +### Set up your wallet provider + From 35326cb530af3690a8b8fbdf4164cb28bcb28e94 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Sun, 5 Oct 2025 03:03:01 +0530 Subject: [PATCH 09/13] chore: removed vite js for now --- app/tutorials/_meta.ts | 2 +- app/tutorials/nexus-initialization/page.mdx | 125 +------------------- 2 files changed, 4 insertions(+), 123 deletions(-) diff --git a/app/tutorials/_meta.ts b/app/tutorials/_meta.ts index 13d843727..b27174cf9 100644 --- a/app/tutorials/_meta.ts +++ b/app/tutorials/_meta.ts @@ -5,7 +5,7 @@ export default { title: "Nexus Tutorials", }, - "nexus-initialization": "Initialize the Nexus SDK using Next JS and Vite", + "nexus-initialization": "Initialize the Nexus SDK using Next JS", "tut-2": "Tutorial-2", "tut-3": "Tutorial-3", "tut-4": "Tutorial-4", diff --git a/app/tutorials/nexus-initialization/page.mdx b/app/tutorials/nexus-initialization/page.mdx index 2e757590c..5c4c0368d 100644 --- a/app/tutorials/nexus-initialization/page.mdx +++ b/app/tutorials/nexus-initialization/page.mdx @@ -1,6 +1,6 @@ --- -title: "Get Started with the Nexus SDK using Next JS and Vite" -description: "This tutorial will help you get started with the Nexus SDK using Next JS and Vite" +title: "Get Started with the Nexus SDK using Next JS" +description: "This tutorial will help you get started with the Nexus SDK using Next JS" keywords: - docs - Avail Nexus @@ -341,123 +341,4 @@ You can now move around those tokens as you please, the possibilities are endles You might want to bridge one of the tokens across chains, or maybe you want to swap all existing tokens of your user spread across different chains into `ETH` on `Arbitrum`. -Once you have a wallet connected and the SDK initialized, you can do all of this and more! - -Let us now move over to the final section of the tutorial where you will learn how to accomplish the same result using the -`nexus-widgets` package inside a `Vite` project. - -## Initialize the Nexus SDK using Vite (A minimal example using nexus-widgets) - -### Objective - -In this section we will create a minimal Vite project that uses wagmi to connect a wallet to the app and initialize the Nexus SDK using `nexus-widgets`. - -### Set up a basic Vite project - -1. Navigate into a directory of your choice and create a new Vite project at it's root: - -```bash filename="Terminal" -pnpm create vite@latest . --template react-ts -``` - -2. Add the following dependencies to your `package.json`, including `nexus-widgets` and `wagmi`: - -```json filename="package.json" -{ - "name": "nexus-vite-template", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc -b && vite build", - "preview": "vite preview" - }, - "dependencies": { - "@avail-project/nexus-widgets": "0.1.11-beta.0", - "@tanstack/react-query": "^5.90.2", - "connectkit": "^1.9.1", - "react": "^19.1.1", - "react-dom": "^19.1.1", - "viem": "^2.37.7", - "wagmi": "^2.17.2" - }, - "devDependencies": { - "@types/react": "^19.0.0", - "@types/react-dom": "^19.0.0", - "@vitejs/plugin-react": "^5.0.0", - "typescript": "^5.8.0", - "vite": "^7.1.0", - "vite-plugin-node-polyfills": "^0.24.0" - } - } -``` - -3. Install the dependencies: - -```bash filename="Terminal" -pnpm install -``` - -4. Update the `src/App.tsx` file to the following: - -```tsx filename="src/App.tsx" -import './App.css' - -function App() { - - return ( - <> -
- Hello Nexus! -
- - ) -} - -export default App -``` - -5. Run a dev server using: - -```bash filename="Terminal" -pnpm dev -``` - -You should now have a bare bones Vite project running in your browser. - -### Configure Vite polyfills - -Update the `vite.config.ts` file to the following: - -```ts filename="vite.config.ts" -import path from "path"; -import tailwindcss from "@tailwindcss/vite"; -import { nodePolyfills } from "vite-plugin-node-polyfills"; -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; - -// https://vite.dev/config/ -export default defineConfig({ - plugins: [ - react(), - tailwindcss(), - nodePolyfills({ - exclude: ["fs"], - protocolImports: true, - }), - ], - resolve: { - alias: { - "@": path.resolve(__dirname, "./src"), - buffer: "vite-plugin-node-polyfills/shims/buffer", - global: "vite-plugin-node-polyfills/shims/global", - process: "vite-plugin-node-polyfills/shims/process", - }, - }, - envPrefix: ["VITE_"], -}); -``` - -### Set up your wallet provider - +Once you have a wallet connected and the SDK initialized, you can do all of this and more! \ No newline at end of file From 833763c1395777fc2d4322266c73c17b12121d87 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Sun, 5 Oct 2025 03:05:44 +0530 Subject: [PATCH 10/13] chore: removed vite js from landing page --- static/introductionData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/introductionData.ts b/static/introductionData.ts index 48aa3fb43..a7d7d6763 100644 --- a/static/introductionData.ts +++ b/static/introductionData.ts @@ -44,7 +44,7 @@ export const IntroData = [ links: [ { topic: "Read more", - links: [{ link: "/tutorials/nexus-initialization", textcolor: "3CA3FC", placeholder: "Use Nexus SDK with Next JS & Vite"}, + links: [{ link: "/tutorials/nexus-initialization", textcolor: "3CA3FC", placeholder: "Initialize Nexus SDK with Next JS"}, {link: "/tutorials/tut-2", textcolor: "3CA3FC", placeholder: "Tutorial 2"}, {link: "/tutorials/tut-3", textcolor: "3CA3FC", placeholder: "Tutorial 3"}, {link: "/tutorials/tut-4", textcolor: "3CA3FC", placeholder: "Tutorial 4"}, From af6355406795fe06a6b06ec1ae759d25494b8874 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Mon, 6 Oct 2025 08:46:47 +0530 Subject: [PATCH 11/13] chore: adding some more content --- app/tutorials/_meta.ts | 2 +- app/tutorials/nexus-bridge/page.mdx | 51 +++++++++++++++++++++++++++++ app/tutorials/tut-2/page.mdx | 0 static/introductionData.ts | 2 +- 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 app/tutorials/nexus-bridge/page.mdx delete mode 100644 app/tutorials/tut-2/page.mdx diff --git a/app/tutorials/_meta.ts b/app/tutorials/_meta.ts index b27174cf9..e85bde8a0 100644 --- a/app/tutorials/_meta.ts +++ b/app/tutorials/_meta.ts @@ -6,7 +6,7 @@ export default { }, "nexus-initialization": "Initialize the Nexus SDK using Next JS", - "tut-2": "Tutorial-2", + "nexus-bridge": "Bridge tokens using the Nexus SDK", "tut-3": "Tutorial-3", "tut-4": "Tutorial-4", "tut-5": "Tutorial-5", diff --git a/app/tutorials/nexus-bridge/page.mdx b/app/tutorials/nexus-bridge/page.mdx new file mode 100644 index 000000000..3fbbe9982 --- /dev/null +++ b/app/tutorials/nexus-bridge/page.mdx @@ -0,0 +1,51 @@ +--- +title: "Bridge tokens using the Nexus SDK" +description: "This tutorial will teach you about the .bridge() function of the Nexus SDK" +keywords: + - docs + - Avail Nexus + - Nexus SDK + - bridge +--- + +import { Callout, Steps, Tabs } from 'nextra/components'; + +# Bridge tokens using the Nexus SDK + +This tutorial will cover the bridging functionality of the Nexus SDK, +covered under the `bridge()` function. + +We will use the [Nexus Next JS template repo](https://github.com/availproject/nexus-nextjs-template) to +make the setup process easier. + +## Start the template locally + +1. Clone the template repo: + +```bash filename="Terminal" +git clone https://github.com/availproject/nexus-nextjs-template.git +``` + +2. Install the dependencies: + +```bash filename="Terminal" +cd nexus-nextjs-template +pnpm install +``` + +3. Set up the `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` environment variable by creating a `.env.local` file: + +```dotenv filename=".env" +NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_PROJECT_ID +``` + + +**Note:**
+Log in to your [WalletConnect](https://walletconnect.network/) account and create a project to get your project ID. + + +4. Run the dev server: + +```bash filename="Terminal" +pnpm dev +``` \ No newline at end of file diff --git a/app/tutorials/tut-2/page.mdx b/app/tutorials/tut-2/page.mdx deleted file mode 100644 index e69de29bb..000000000 diff --git a/static/introductionData.ts b/static/introductionData.ts index a7d7d6763..9eaad88c2 100644 --- a/static/introductionData.ts +++ b/static/introductionData.ts @@ -45,7 +45,7 @@ export const IntroData = [ { topic: "Read more", links: [{ link: "/tutorials/nexus-initialization", textcolor: "3CA3FC", placeholder: "Initialize Nexus SDK with Next JS"}, - {link: "/tutorials/tut-2", textcolor: "3CA3FC", placeholder: "Tutorial 2"}, + {link: "/tutorials/nexus-bridge", textcolor: "3CA3FC", placeholder: "Bridge tokens using the Nexus SDK"}, {link: "/tutorials/tut-3", textcolor: "3CA3FC", placeholder: "Tutorial 3"}, {link: "/tutorials/tut-4", textcolor: "3CA3FC", placeholder: "Tutorial 4"}, {link: "/tutorials/tut-5", textcolor: "3CA3FC", placeholder: "Tutorial 5"}, From 9acf33a17bf7e2d09012e3e9f87f2d552702481e Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Mon, 6 Oct 2025 11:02:01 +0530 Subject: [PATCH 12/13] chore: added custom github svg icon --- components/icons/github-24.svg | 1 + components/icons/index.ts | 1 + 2 files changed, 2 insertions(+) create mode 100644 components/icons/github-24.svg diff --git a/components/icons/github-24.svg b/components/icons/github-24.svg new file mode 100644 index 000000000..830f00462 --- /dev/null +++ b/components/icons/github-24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/icons/index.ts b/components/icons/index.ts index 2324bcb7a..973d6f7d9 100644 --- a/components/icons/index.ts +++ b/components/icons/index.ts @@ -27,3 +27,4 @@ export { default as TerminalIcon } from './terminal.svg' export { default as DiagramIcon } from './diagram.svg' export { default as FolderTreeIcon } from './folder-tree.svg' export { default as IdCardIcon } from './id-card.svg' +export { default as GithubIcon24 } from './github-24.svg' From 17cb999da6744b277edf8b21fb28a9ff05ae0e81 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Mon, 6 Oct 2025 11:03:18 +0530 Subject: [PATCH 13/13] chore: added a cheatsheet page for easier access to all links nexus --- app/nexus/nexus-cheatsheet/page.mdx | 67 +++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 app/nexus/nexus-cheatsheet/page.mdx diff --git a/app/nexus/nexus-cheatsheet/page.mdx b/app/nexus/nexus-cheatsheet/page.mdx new file mode 100644 index 000000000..2dace16ac --- /dev/null +++ b/app/nexus/nexus-cheatsheet/page.mdx @@ -0,0 +1,67 @@ +--- +image: "/img/docs-link-preview.png" +title: Nexus cheat sheet +description: "A single page to find all external links and resources to help you get started with Avail Nexus" +--- + +import { Callout, Steps, Tabs, Cards } from 'nextra/components'; +import { FileIcon, FilesIcon, LinkIcon, GithubIcon24 } from '@components/icons' + + +# Nexus cheat sheet + +We created this page to make it easier for devs to navigate between all the links and resources related to Avail Nexus. +Feel free to suggest any additions you think are missing. + +## Nexus SDK + +The most convenient way to interact with the decentralized solver network powering Avail Nexus is through the Nexus SDK. + +Link to the Nexus SDK Github repo: + + +} arrow /> + + +The overall Nexus SDK is split into two main packages: + +### Nexus-core + +The headless version , for fine-grained control over the Nexus SDK. + + + } href="https://github.com/availproject/nexus-sdk/tree/main/packages/core" target="_blank" rel="noopener noreferrer" arrow /> + } href="https://www.npmjs.com/package/@avail-project/nexus-core?activeTab=code" target="_blank" rel="noopener noreferrer" arrow /> + + +We also built a demo app with `nexus-core` to provide more reference code: + + + } href="https://avail-nexus-demo-five.vercel.app/" target="_blank" rel="noopener noreferrer" arrow /> + } href="https://github.com/availproject/avail-nexus-demo" target="_blank" rel="noopener noreferrer" arrow /> + + +### Nexus-widgets + +Comes with built-in UI components to make it easier to integrate the Nexus SDK into your React app. + + + } href="https://github.com/availproject/nexus-sdk/tree/main/packages/widgets" target="_blank" rel="noopener noreferrer" arrow /> + } href="https://www.npmjs.com/package/@avail-project/nexus-widgets?activeTab=code" target="_blank" rel="noopener noreferrer" arrow /> + + +We also built a demo app with `nexus-widgets` to provide more reference code: + + + } href="https://nexus-demo.availproject.org/" target="_blank" rel="noopener noreferrer" arrow /> + } href="https://github.com/availproject/nexus-ui-components-demo" target="_blank" rel="noopener noreferrer" arrow /> + + +## Nexus SDK templates + +Clone these repos to quickly get started with the Nexus SDK using `Next JS` or `Vite`. + + + } href="https://github.com/availproject/nexus-nextjs-template" target="_blank" rel="noopener noreferrer" arrow /> + } href="https://github.com/availproject/nexus-vite-template" target="_blank" rel="noopener noreferrer" arrow /> + \ No newline at end of file