diff --git a/app/nexus/nexus-examples/_meta.ts b/app/nexus/nexus-examples/_meta.ts index c795e186..a3003f72 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-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-advanced/page.mdx b/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx deleted file mode 100644 index 20f9134d..00000000 --- a/app/nexus/nexus-examples/nexus-initialization-advanced/page.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -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 -title: Initialize Nexus SDK using RainbowKit ---- - -import { Callout, Steps, Tabs } from 'nextra/components'; - -# Initialize Nexus SDK using RainbowKit Inside a Next JS app - - - - - 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 new file mode 100644 index 00000000..1b521f9f --- /dev/null +++ b/app/nexus/nexus-examples/nexus-rainbowkit-extension/page.mdx @@ -0,0 +1,341 @@ +--- +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 + +--- + +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" +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 ; +} +``` +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 + +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. + +## 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. + diff --git a/public/reserveDocs/nexus-porto-extension/page.mdx b/public/reserveDocs/nexus-porto-extension/page.mdx new file mode 100644 index 00000000..d4eccf3b --- /dev/null +++ b/public/reserveDocs/nexus-porto-extension/page.mdx @@ -0,0 +1,291 @@ +--- +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 + +--- + +Check out the [Porto docs](https://rainbowkit.com/docs/introduction) for latest information on how to use and customize it. + + +## 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. +