From 413d3197d371d85b99ba6a3a64cd8b5707a6d5c0 Mon Sep 17 00:00:00 2001 From: Christine Date: Tue, 7 Oct 2025 12:59:37 -1000 Subject: [PATCH 1/3] rainbowkit tutorial options --- .../nexus-initialization-advanced/page.mdx | 499 +++++++++++++++++- .../nexus-rainbowkit-extension/page.mdx | 342 ++++++++++++ 2 files changed, 839 insertions(+), 2 deletions(-) create mode 100644 app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx diff --git a/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx b/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx index 20f9134d..4a3aa721 100644 --- a/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx +++ b/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx @@ -1,4 +1,5 @@ --- +title: "Initialize Nexus SDK using RainbowKit" description: "This tutorial will help you initialize the Nexus SDK using RainbowKit inside a Next JS app" keywords: - docs @@ -8,12 +9,506 @@ keywords: - Nexus SDK initialization - Unified balances - Fetch Balances using the Nexus SDK -title: Initialize Nexus SDK using RainbowKit --- import { Callout, Steps, Tabs } from 'nextra/components'; -# Initialize Nexus SDK using RainbowKit Inside a Next JS app +# Initialize Nexus SDK using RainbowKit + + +**WANT TO SKIP THE TUTORIAL?**
+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) +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 with RainbowKit. +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 with RainbowKit + +### 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 using RainbowKit. +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 basic 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 required packages: + +```bash filename="Terminal" +pnpm add @avail-project/nexus-core@0.0.3-beta.0 @rainbow-me/rainbowkit wagmi viem @tanstack/react-query +``` + +3. Update the `src/app/page.tsx` file to the following: + +```tsx filename="src/app/page.tsx" +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 RainbowKit + +1. Create a file at `src/lib/wagmi.ts` and add the following configuration: + +```tsx filename="src/lib/wagmi.ts" +import { getDefaultConfig } from '@rainbow-me/rainbowkit'; +import { mainnet, arbitrum, polygon, optimism, base, avalanche } from 'wagmi/chains'; + +export const config = getDefaultConfig({ + appName: 'Nexus SDK with RainbowKit', + projectId: 'YOUR_PROJECT_ID', // Get this from https://cloud.walletconnect.com/ + chains: [mainnet, arbitrum, polygon, optimism, base, avalanche], + ssr: true, // If your dApp uses server side rendering (SSR) +}); +``` + + +You need to get a Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/) for RainbowKit to work properly. This is free and only takes a few minutes to set up. + + +2. Create a file at `src/components/providers.tsx` and add the RainbowKit providers: + +```tsx filename="src/components/providers.tsx" +'use client'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; +import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import { config } from '@/lib/wagmi'; +import '@rainbow-me/rainbowkit/styles.css'; + +const queryClient = new QueryClient(); + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + +3. Update the `src/app/layout.tsx` file to wrap your app with the providers: + +```tsx filename="src/app/layout.tsx" +import { Providers } from '@/components/providers'; +import './globals.css'; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + + ); +} +``` + +### 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" + +// Thin wrapper that calls sdk.isInitialized() from the SDK +export function isInitialized() { + 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 wallet using RainbowKit. + +```tsx filename="src/components/connect-button.tsx" +'use client'; + +import { ConnectButton } from '@rainbow-me/rainbowkit'; + +export default function ConnectWalletButton({ className }: { className?: string }) { + return ( + + {({ + account, + chain, + openAccountModal, + openChainModal, + openConnectModal, + authenticationStatus, + mounted, + }) => { + const ready = mounted && authenticationStatus !== 'loading'; + const connected = + ready && + account && + chain && + (!authenticationStatus || + authenticationStatus === 'authenticated'); + + return ( +
+ {(() => { + if (!connected) { + return ( + + ); + } + + if (chain.unsupported) { + return ( + + ); + } + + 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 { useAccount } from 'wagmi'; +import { initializeWithProvider, isInitialized } from '../lib/nexus'; + +export default function InitButton({ + className, + onReady, +}: { className?: string; onReady?: () => void }) { + const { connector } = useAccount(); + + const onClick = async () => { + try { + // Get the provider from the connected wallet + const provider = await connector?.getProvider(); + if (!provider) throw new Error('No provider found'); + + // We're calling our wrapper function from the lib/nexus.ts file here. + await initializeWithProvider(provider); + 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 { useAccount } from 'wagmi'; +import ConnectWalletButton 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 { isConnected } = useAccount(); + 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); }} /> + +
+ Wallet Status: {isConnected ? 'Connected' : 'Not connected'} +
+
+ Nexus SDK Initialization Status: {initialized ? 'Initialized' : 'Not initialized'} +
+ + {balances && ( + 
{JSON.stringify(balances, null, 2)}
+ )} +
+
+ ); +} +``` + +`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. We use RainbowKit's `useAccount` hook to check wallet connection status. +3. Some basic CSS is applied to the buttons to arrange them in a column. +4. Some buttons are conditionally toggled based on the initialization status of the SDK. +5. 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!!! + +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! diff --git a/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx b/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx new file mode 100644 index 00000000..a5f10064 --- /dev/null +++ b/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx @@ -0,0 +1,342 @@ +--- +title: "Add RainbowKit to Your Nexus SDK Project" +description: "Learn how to enhance your existing Nexus SDK project with RainbowKit for better wallet connection experience" +keywords: + - docs + - Avail Nexus + - Next JS + - RainbowKit + - Nexus SDK enhancement + - Wallet connection +--- + +import { Callout, Steps, Tabs } from 'nextra/components'; + +# Add RainbowKit to Your Nexus SDK Project + + +**PREREQUISITE**
+This tutorial assumes you have already completed the [basic Nexus SDK tutorial](/nexus/nexus-examples/nexus-initialization-basic). +If you haven't, please go through that first to set up your base project. + + +## What You'll Learn + +By the end of this tutorial you will have: + +1. Enhanced your existing Nexus SDK project with RainbowKit +2. Improved the wallet connection experience with better UI +3. Added support for multiple wallet providers +4. Maintained all existing Nexus SDK functionality + +## Why Add RainbowKit? + +RainbowKit provides several advantages over the basic EIP-1193 approach: + +- **Better UX**: Professional wallet connection UI +- **Multiple Wallets**: Support for 20+ wallet providers +- **Chain Switching**: Easy network switching +- **Account Management**: Better account display and management +- **Mobile Support**: Works with mobile wallets + +## Install RainbowKit Dependencies + +Add the required packages to your existing project: + +```bash filename="Terminal" +pnpm add @rainbow-me/rainbowkit wagmi viem @tanstack/react-query +``` + +## Configure RainbowKit + +### 1. Create Wagmi Configuration + +Create a new file at `src/lib/wagmi.ts`: + +```tsx filename="src/lib/wagmi.ts" +import { getDefaultConfig } from '@rainbow-me/rainbowkit'; +import { mainnet, arbitrum, polygon, optimism, base, avalanche } from 'wagmi/chains'; + +export const config = getDefaultConfig({ + appName: 'Nexus SDK with RainbowKit', + projectId: 'YOUR_PROJECT_ID', // Get this from https://cloud.walletconnect.com/ + chains: [mainnet, arbitrum, polygon, optimism, base, avalanche], + ssr: true, // If your dApp uses server side rendering (SSR) +}); +``` + + +You need to get a Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/) for RainbowKit to work properly. This is free and only takes a few minutes to set up. + + +### 2. Create Providers Component + +Create a new file at `src/components/providers.tsx`: + +```tsx filename="src/components/providers.tsx" +'use client'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; +import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import { config } from '@/lib/wagmi'; +import '@rainbow-me/rainbowkit/styles.css'; + +const queryClient = new QueryClient(); + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + +### 3. Update Layout + +Update your `src/app/layout.tsx` to wrap your app with the providers: + +```tsx filename="src/app/layout.tsx" +import { Providers } from '@/components/providers'; +import './globals.css'; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + + ); +} +``` + +## Update Your Components + +### 1. Replace Connect Button + +Update your `src/components/connect-button.tsx` to use RainbowKit: + +```tsx filename="src/components/connect-button.tsx" +'use client'; + +import { ConnectButton } from '@rainbow-me/rainbowkit'; + +export default function ConnectWalletButton({ className }: { className?: string }) { + return ( + + {({ + account, + chain, + openAccountModal, + openChainModal, + openConnectModal, + authenticationStatus, + mounted, + }) => { + const ready = mounted && authenticationStatus !== 'loading'; + const connected = + ready && + account && + chain && + (!authenticationStatus || + authenticationStatus === 'authenticated'); + + return ( +
+ {(() => { + if (!connected) { + return ( + + ); + } + + if (chain.unsupported) { + return ( + + ); + } + + return ( +
+ + + +
+ ); + })()} +
+ ); + }} + + ); +} +``` + +### 2. Update Init Button + +Update your `src/components/init-button.tsx` to use Wagmi's connector: + +```tsx filename="src/components/init-button.tsx" +'use client'; + +import { useAccount } from 'wagmi'; +import { initializeWithProvider, isInitialized } from '../lib/nexus'; + +export default function InitButton({ + className, + onReady, +}: { className?: string; onReady?: () => void }) { + const { connector } = useAccount(); + + const onClick = async () => { + try { + // Get the provider from the connected wallet + const provider = await connector?.getProvider(); + if (!provider) throw new Error('No provider found'); + + // We're calling our wrapper function from the lib/nexus.ts file here. + await initializeWithProvider(provider); + onReady?.(); + alert('Nexus initialized'); + } catch (e: any) { + alert(e?.message ?? 'Init failed'); + } + }; + return ; +} +``` + +### 3. Update Main Page + +Update your `src/app/page.tsx` to show wallet connection status: + +```tsx filename="src/app/page.tsx" +'use client'; + +import { useState } from 'react'; +import { useAccount } from 'wagmi'; +import ConnectWalletButton 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 { isConnected } = useAccount(); + 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); }} /> + +
+ Wallet Status: {isConnected ? 'Connected' : 'Not connected'} +
+
+ Nexus SDK Initialization Status: {initialized ? 'Initialized' : 'Not initialized'} +
+ + {balances && ( + 
{JSON.stringify(balances, null, 2)}
+ )} +
+
+ ); +} +``` + +## What Changed? + +The only changes from your basic tutorial are: + +1. **Added RainbowKit packages** - 4 new dependencies +2. **Created Wagmi config** - Chain and app configuration +3. **Added providers** - RainbowKit and Wagmi providers +4. **Updated connect button** - Now uses RainbowKit's ConnectButton +5. **Updated init button** - Uses Wagmi's connector instead of window.ethereum +6. **Added wallet status** - Shows connection status + +**Everything else stays exactly the same!** Your Nexus SDK setup, balance fetching, and de-initialization all work identically. + +## Benefits You Now Have + +- **Professional UI**: Beautiful wallet connection interface +- **Multiple Wallets**: Support for MetaMask, WalletConnect, Coinbase, and more +- **Chain Switching**: Easy network switching with visual indicators +- **Account Management**: Better account display with balances +- **Mobile Support**: Works with mobile wallets + +## Next Steps + +Your Nexus SDK project now has a much better wallet connection experience while maintaining all the same functionality. You can continue building with the same Nexus SDK methods you learned in the basic tutorial! + + +**Want to learn more?**
+Check out the [RainbowKit documentation](https://www.rainbowkit.com/docs) for more customization options and advanced features. + From 5cbc0c977bfc76f6992a0fe6088e28caf7645c55 Mon Sep 17 00:00:00 2001 From: Christine Date: Wed, 8 Oct 2025 21:54:46 -1000 Subject: [PATCH 2/3] add porto wallet --- app/nexus/nexus-examples/_meta.ts | 3 +- .../nexus-initialization-advanced/page.mdx | 516 ------------------ .../nexus-porto-extension/page.mdx | 296 ++++++++++ 3 files changed, 298 insertions(+), 517 deletions(-) delete mode 100644 app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx create mode 100644 app/nexus/nexus-examples/nexus-porto-extension/page.mdx diff --git a/app/nexus/nexus-examples/_meta.ts b/app/nexus/nexus-examples/_meta.ts index c795e186..3d4e57df 100644 --- a/app/nexus/nexus-examples/_meta.ts +++ b/app/nexus/nexus-examples/_meta.ts @@ -1,5 +1,6 @@ export default { "nexus-initialization-basic": "Barebones initialization inside Next JS", - "nexus-initialization-advanced": " Initialize Nexus SDK using RainbowKit", + "nexus-porto-extension": "Add Porto Wallet to Your Nexus SDK Project", + "nexus-rainbowkit-extension": "Add RainbowKit to Your Nexus SDK Project", // "nexus-bridge": "Bridge tokens using the Nexus SDK", } \ No newline at end of file diff --git a/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx b/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx deleted file mode 100644 index 4a3aa721..00000000 --- a/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx +++ /dev/null @@ -1,516 +0,0 @@ ---- -title: "Initialize Nexus SDK using RainbowKit" -description: "This tutorial will help you initialize the Nexus SDK using RainbowKit inside a Next JS app" -keywords: - - docs - - Avail Nexus - - Next JS - - RainbowKit - - Nexus SDK initialization - - Unified balances - - Fetch Balances using the Nexus SDK ---- - -import { Callout, Steps, Tabs } from 'nextra/components'; - -# Initialize Nexus SDK using RainbowKit - - -**WANT TO SKIP THE TUTORIAL?**
-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) -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 with RainbowKit. -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 with RainbowKit - -### 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 using RainbowKit. -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 basic 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 required packages: - -```bash filename="Terminal" -pnpm add @avail-project/nexus-core@0.0.3-beta.0 @rainbow-me/rainbowkit wagmi viem @tanstack/react-query -``` - -3. Update the `src/app/page.tsx` file to the following: - -```tsx filename="src/app/page.tsx" -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 RainbowKit - -1. Create a file at `src/lib/wagmi.ts` and add the following configuration: - -```tsx filename="src/lib/wagmi.ts" -import { getDefaultConfig } from '@rainbow-me/rainbowkit'; -import { mainnet, arbitrum, polygon, optimism, base, avalanche } from 'wagmi/chains'; - -export const config = getDefaultConfig({ - appName: 'Nexus SDK with RainbowKit', - projectId: 'YOUR_PROJECT_ID', // Get this from https://cloud.walletconnect.com/ - chains: [mainnet, arbitrum, polygon, optimism, base, avalanche], - ssr: true, // If your dApp uses server side rendering (SSR) -}); -``` - - -You need to get a Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/) for RainbowKit to work properly. This is free and only takes a few minutes to set up. - - -2. Create a file at `src/components/providers.tsx` and add the RainbowKit providers: - -```tsx filename="src/components/providers.tsx" -'use client'; - -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { WagmiProvider } from 'wagmi'; -import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; -import { config } from '@/lib/wagmi'; -import '@rainbow-me/rainbowkit/styles.css'; - -const queryClient = new QueryClient(); - -export function Providers({ children }: { children: React.ReactNode }) { - return ( - - - - {children} - - - - ); -} -``` - -3. Update the `src/app/layout.tsx` file to wrap your app with the providers: - -```tsx filename="src/app/layout.tsx" -import { Providers } from '@/components/providers'; -import './globals.css'; - -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { - return ( - - - - {children} - - - - ); -} -``` - -### 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" - -// Thin wrapper that calls sdk.isInitialized() from the SDK -export function isInitialized() { - 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 wallet using RainbowKit. - -```tsx filename="src/components/connect-button.tsx" -'use client'; - -import { ConnectButton } from '@rainbow-me/rainbowkit'; - -export default function ConnectWalletButton({ className }: { className?: string }) { - return ( - - {({ - account, - chain, - openAccountModal, - openChainModal, - openConnectModal, - authenticationStatus, - mounted, - }) => { - const ready = mounted && authenticationStatus !== 'loading'; - const connected = - ready && - account && - chain && - (!authenticationStatus || - authenticationStatus === 'authenticated'); - - return ( -
- {(() => { - if (!connected) { - return ( - - ); - } - - if (chain.unsupported) { - return ( - - ); - } - - 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 { useAccount } from 'wagmi'; -import { initializeWithProvider, isInitialized } from '../lib/nexus'; - -export default function InitButton({ - className, - onReady, -}: { className?: string; onReady?: () => void }) { - const { connector } = useAccount(); - - const onClick = async () => { - try { - // Get the provider from the connected wallet - const provider = await connector?.getProvider(); - if (!provider) throw new Error('No provider found'); - - // We're calling our wrapper function from the lib/nexus.ts file here. - await initializeWithProvider(provider); - 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 { useAccount } from 'wagmi'; -import ConnectWalletButton 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 { isConnected } = useAccount(); - 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); }} /> - -
- Wallet Status: {isConnected ? 'Connected' : 'Not connected'} -
-
- Nexus SDK Initialization Status: {initialized ? 'Initialized' : 'Not initialized'} -
- - {balances && ( - 
{JSON.stringify(balances, null, 2)}
- )} -
-
- ); -} -``` - -`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. We use RainbowKit's `useAccount` hook to check wallet connection status. -3. Some basic CSS is applied to the buttons to arrange them in a column. -4. Some buttons are conditionally toggled based on the initialization status of the SDK. -5. 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!!! - -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! - - - - - diff --git a/app/nexus/nexus-examples/nexus-porto-extension/page.mdx b/app/nexus/nexus-examples/nexus-porto-extension/page.mdx new file mode 100644 index 00000000..2246ea76 --- /dev/null +++ b/app/nexus/nexus-examples/nexus-porto-extension/page.mdx @@ -0,0 +1,296 @@ +--- +title: "Add Porto Wallet to Your Nexus SDK Project" +description: "Learn how to enhance your existing Nexus SDK project with Porto Wallet for secure wallet connection" +keywords: + - docs + - Avail Nexus + - Next JS + - Porto Wallet + - Nexus SDK enhancement + - Wallet connection +--- + +import { Callout, Steps, Tabs } from 'nextra/components'; + +# Add Porto Wallet to Your Nexus SDK Project + + +**PREREQUISITE**
+This tutorial assumes you have already completed the [basic Nexus SDK tutorial](/nexus/nexus-examples/nexus-initialization-basic). +If you haven't, please go through that first to set up your base project. + + +## What You'll Learn + +By the end of this tutorial you will have: + +1. Enhanced your existing Nexus SDK project with Porto Wallet +2. Added secure wallet connection with iframe-based authentication +3. Integrated Porto with Wagmi for better wallet management +4. Maintained all existing Nexus SDK functionality + +## Why Add Porto Wallet? + +Porto Wallet provides several advantages over the basic EIP-1193 approach: + +- **Secure Authentication**: Iframe-based wallet connection for enhanced security +- **No Browser Extensions**: Works without requiring wallet browser extensions +- **Cross-Platform**: Works on desktop and mobile devices +- **User-Friendly**: Simple and intuitive wallet connection experience +- **Wagmi Integration**: Seamless integration with popular React wallet libraries + +## Install Porto Wallet Dependencies + +Add the required packages to your existing project: + +```bash filename="Terminal" +pnpm add porto wagmi viem @tanstack/react-query +``` + +## Configure Porto Wallet + +### 1. Create Wagmi Configuration + +Create a new file at `src/lib/wagmi.ts`: + +```tsx filename="src/lib/wagmi.ts" +import { http, createConfig, createStorage } from 'wagmi'; +import { mainnet, arbitrum, polygon, optimism, base, avalanche } from 'wagmi/chains'; +import { porto } from 'wagmi/connectors'; + +// Create a safe storage that works in both server and client environments +const safeStorage = typeof window !== 'undefined' ? localStorage : { + getItem: () => null, + setItem: () => {}, + removeItem: () => {}, +}; + +export const config = createConfig({ + chains: [mainnet, arbitrum, polygon, optimism, base, avalanche], + connectors: [porto()], + storage: createStorage({ storage: safeStorage }), + transports: { + [mainnet.id]: http(), + [arbitrum.id]: http(), + [polygon.id]: http(), + [optimism.id]: http(), + [base.id]: http(), + [avalanche.id]: http(), + }, +}); +``` + +### 2. Create Providers Component + +Create a new file at `src/components/providers.tsx`: + +```tsx filename="src/components/providers.tsx" +'use client'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; +import { config } from '@/lib/wagmi'; + +const queryClient = new QueryClient(); + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +### 3. Update Layout + +Update your `src/app/layout.tsx` to wrap your app with the providers: + +```tsx filename="src/app/layout.tsx" +import { Providers } from '@/components/providers'; +import './globals.css'; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + + ); +} +``` + +## Update Your Components + +### 1. Replace Connect Button + +Update your `src/components/connect-button.tsx` to use Porto Wallet: + +```tsx filename="src/components/connect-button.tsx" +'use client'; + +import { useConnect, useConnectors, useAccount } from 'wagmi'; + +export default function ConnectWalletButton({ className }: { className?: string }) { + const connect = useConnect(); + const connectors = useConnectors(); + const { isConnected, address } = useAccount(); + + const handleConnect = () => { + const portoConnector = connectors.find((connector: any) => connector.name === 'Porto'); + if (portoConnector) { + connect.connect({ connector: portoConnector }); + } + }; + + if (isConnected) { + return ( +
+ + Connected: {address?.slice(0, 6)}...{address?.slice(-4)} + +
+ ); + } + + return ( + + ); +} +``` + +### 2. Update Init Button + +Update your `src/components/init-button.tsx` to use Wagmi's connector: + +```tsx filename="src/components/init-button.tsx" +'use client'; + +import { useAccount } from 'wagmi'; +import { initializeWithProvider, isInitialized } from '../lib/nexus'; + +export default function InitButton({ + className, + onReady, +}: { className?: string; onReady?: () => void }) { + const { connector } = useAccount(); + + const onClick = async () => { + try { + // Get the provider from the connected wallet + const provider = await connector?.getProvider(); + if (!provider) throw new Error('No provider found'); + + // We're calling our wrapper function from the lib/nexus.ts file here. + await initializeWithProvider(provider); + onReady?.(); + alert('Nexus initialized'); + } catch (e: any) { + alert(e?.message ?? 'Init failed'); + } + }; + return ; +} +``` + +### 3. Update Main Page + +Update your `src/app/page.tsx` to show wallet connection status: + +```tsx filename="src/app/page.tsx" +'use client'; + +import { useState } from 'react'; +import { useAccount } from 'wagmi'; +import ConnectWalletButton 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 { isConnected } = useAccount(); + 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); }} /> + +
+ Wallet Status: {isConnected ? 'Connected' : 'Not connected'} +
+
+ Nexus SDK Initialization Status: {initialized ? 'Initialized' : 'Not initialized'} +
+ + {balances && ( + 
{JSON.stringify(balances, null, 2)}
+ )} +
+
+ ); +} +``` + +## Development Setup + + +**HTTPS Required**
+Porto Wallet requires a secure origin (HTTPS) to function correctly. In development, you can enable HTTPS in Next.js by using the `--experimental-https` flag: + +```bash +pnpm dev --experimental-https +``` + +Make sure your development environment supports HTTPS to avoid issues with Porto's iframe integration. + + +## What Changed? + +The only changes from your basic tutorial are: + +1. **Added Porto Wallet packages** - 4 new dependencies +2. **Created Wagmi config** - Chain and connector configuration +3. **Added providers** - Wagmi and React Query providers +4. **Updated connect button** - Now uses Porto Wallet connector +5. **Updated init button** - Uses Wagmi's connector instead of window.ethereum +6. **Added wallet status** - Shows connection status + +**Everything else stays exactly the same!** Your Nexus SDK setup, balance fetching, and de-initialization all work identically. + +## Benefits You Now Have + +- **Secure Authentication**: Iframe-based wallet connection for enhanced security +- **No Extensions Required**: Works without browser wallet extensions +- **Cross-Platform**: Works on desktop and mobile devices +- **Wagmi Integration**: Seamless integration with popular React wallet libraries +- **Better UX**: Professional wallet connection experience + +## Next Steps + +Your Nexus SDK project now has a secure wallet connection experience while maintaining all the same functionality. You can continue building with the same Nexus SDK methods you learned in the basic tutorial! + + +**Want to learn more?**
+Check out the [Porto Wallet documentation](https://porto.sh/sdk) for more customization options and advanced features. + From c9ca574a622403855607cdab085d7957f17d077b Mon Sep 17 00:00:00 2001 From: robin-rrt <66296664+robin-rrt@users.noreply.github.com> Date: Fri, 10 Oct 2025 19:39:06 +0530 Subject: [PATCH 3/3] add rainbowkit guide --- app/nexus/nexus-examples/_meta.ts | 4 +-- .../nexus-initialization-basic/page.mdx | 14 +++++--- .../nexus-rainbowkit-extension/page.mdx | 33 +++++++++---------- .../nexus-porto-extension/page.mdx | 13 +++----- 4 files changed, 32 insertions(+), 32 deletions(-) rename {app/nexus/nexus-examples => public/reserveDocs}/nexus-porto-extension/page.mdx (94%) diff --git a/app/nexus/nexus-examples/_meta.ts b/app/nexus/nexus-examples/_meta.ts index 3d4e57df..a3003f72 100644 --- a/app/nexus/nexus-examples/_meta.ts +++ b/app/nexus/nexus-examples/_meta.ts @@ -1,6 +1,6 @@ export default { "nexus-initialization-basic": "Barebones initialization inside Next JS", - "nexus-porto-extension": "Add Porto Wallet to Your Nexus SDK Project", "nexus-rainbowkit-extension": "Add RainbowKit to Your Nexus SDK Project", + // "nexus-porto-extension": "Add Porto Wallet to Your Nexus SDK Project", // "nexus-bridge": "Bridge tokens using the Nexus SDK", -} \ No newline at end of file +} diff --git a/app/nexus/nexus-examples/nexus-initialization-basic/page.mdx b/app/nexus/nexus-examples/nexus-initialization-basic/page.mdx index 5c4c0368..226a0f72 100644 --- a/app/nexus/nexus-examples/nexus-initialization-basic/page.mdx +++ b/app/nexus/nexus-examples/nexus-initialization-basic/page.mdx @@ -205,7 +205,13 @@ export default function ConnectButton({ className }: { className?: string }) { #### init-button.tsx -This component will be used to initialize the SDK using `nexus-core`. +This component will be used to initialize the SDK using `nexus-core`. + +This tutorial only covers the **default injected provider** (`window.ethereum`). If you are planning to use other wallets that utilize **Wagmi such as RainbowKit, Privy etc.**, check out our other articles that cover how to get a Web3 Provider from that wallet to initialize the SDK. + +- [RainbowKit](http://docs.availproject.org/nexus/nexus-examples/nexus-rainbowkit-extension) + + ```tsx filename="src/components/init-button.tsx" 'use client'; @@ -220,6 +226,7 @@ export default function InitButton({ const eth = (window as any)?.ethereum; try { // We're calling our wrapper function from the lib/nexus.ts file here. + // Essentially calls "sdk.initialize(provider)" - SDK method. await initializeWithProvider(eth); onReady?.(); alert('Nexus initialized'); @@ -333,12 +340,11 @@ We're rendering it out on the screen raw to keep the tutorial simple, but you ca 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! -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`. +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! \ No newline at end of file diff --git a/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx b/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx index a5f10064..1b521f9f 100644 --- a/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx +++ b/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx @@ -29,18 +29,15 @@ By the end of this tutorial you will have: 3. Added support for multiple wallet providers 4. Maintained all existing Nexus SDK functionality -## Why Add RainbowKit? - -RainbowKit provides several advantages over the basic EIP-1193 approach: - -- **Better UX**: Professional wallet connection UI -- **Multiple Wallets**: Support for 20+ wallet providers -- **Chain Switching**: Easy network switching -- **Account Management**: Better account display and management -- **Mobile Support**: Works with mobile wallets +--- + +Check out the [RainbowKit docs](https://rainbowkit.com/docs/introduction) for latest information on how to use and customize it. + ## Install RainbowKit Dependencies +Navigate to the root of your project that you created in the [basic Nexus SDK tutorial](/nexus/nexus-examples/nexus-initialization-basic#initialize-the-nexus-sdk-using-next-js-a-minimal-example-using-nexus-core). + Add the required packages to your existing project: ```bash filename="Terminal" @@ -262,6 +259,16 @@ export default function InitButton({ return ; } ``` +The lines of interest for us is majorly what's here below: +```ts +const provider = await connector?.getProvider(); + if (!provider) throw new Error('No provider found'); + // We're calling our wrapper function from the lib/nexus.ts file here. + await initializeWithProvider(provider); +``` +- Since RainbowKit uses `wagmi`, you can easily get the EIP-1193 Provider of your connected wallet with `useAccount` +- Here, we import `useAccount` hook from `wagmi`, and get the `connector` property from which we can call `getProvider()` which returns the EIP-1193 Provider for the connected wallet. This makes it very easy for any RainbowKit connected wallet to initialize the Nexus SDK and unlock crosschain features. +- Once we have the `provider`, we can pass it into our helper function to initialize Nexus. ### 3. Update Main Page @@ -324,14 +331,6 @@ The only changes from your basic tutorial are: **Everything else stays exactly the same!** Your Nexus SDK setup, balance fetching, and de-initialization all work identically. -## Benefits You Now Have - -- **Professional UI**: Beautiful wallet connection interface -- **Multiple Wallets**: Support for MetaMask, WalletConnect, Coinbase, and more -- **Chain Switching**: Easy network switching with visual indicators -- **Account Management**: Better account display with balances -- **Mobile Support**: Works with mobile wallets - ## Next Steps Your Nexus SDK project now has a much better wallet connection experience while maintaining all the same functionality. You can continue building with the same Nexus SDK methods you learned in the basic tutorial! diff --git a/app/nexus/nexus-examples/nexus-porto-extension/page.mdx b/public/reserveDocs/nexus-porto-extension/page.mdx similarity index 94% rename from app/nexus/nexus-examples/nexus-porto-extension/page.mdx rename to public/reserveDocs/nexus-porto-extension/page.mdx index 2246ea76..d4eccf3b 100644 --- a/app/nexus/nexus-examples/nexus-porto-extension/page.mdx +++ b/public/reserveDocs/nexus-porto-extension/page.mdx @@ -29,15 +29,10 @@ By the end of this tutorial you will have: 3. Integrated Porto with Wagmi for better wallet management 4. Maintained all existing Nexus SDK functionality -## Why Add Porto Wallet? - -Porto Wallet provides several advantages over the basic EIP-1193 approach: - -- **Secure Authentication**: Iframe-based wallet connection for enhanced security -- **No Browser Extensions**: Works without requiring wallet browser extensions -- **Cross-Platform**: Works on desktop and mobile devices -- **User-Friendly**: Simple and intuitive wallet connection experience -- **Wagmi Integration**: Seamless integration with popular React wallet libraries +--- + +Check out the [Porto docs](https://rainbowkit.com/docs/introduction) for latest information on how to use and customize it. + ## Install Porto Wallet Dependencies