Skip to content

Update docs to incorporate the latest widget changes #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anirudhvenu merged 1 commit into from
Aug 6, 2026
Merged

Update docs to incorporate the latest widget changes #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 96 additions & 1 deletion content/docs/nexus/widgets/components/deposit.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ links:
doc: /docs/nexus/nexus-sdk/reference/bridge-methods/bridge-and-execute
---

import { SquareArrowUpRight } from "lucide-react";

<ComponentPreview
name="nexus-deposit"
description="Deposit mode locked to a configured protocol action."
Expand All @@ -15,18 +17,107 @@ links:

> **Network support:** Mainnet only. Testnet is not supported at the moment.

## Configurator

Generate the exact basic configuration for Deposit mode using the <a href="https://configurator.availproject.org/" target="_blank" rel="noopener noreferrer" className="font-medium underline underline-offset-4">Widget Configurator <SquareArrowUpRight className="inline size-4" /></a>.

## Installation

<Tabs defaultValue="npm">
<TabsList>
<TabsTrigger value="npm">NPM (Recommended)</TabsTrigger>
<TabsTrigger value="shadcn">shadcn/ui (Power Users)</TabsTrigger>
</TabsList>

<TabsContent value="npm" className="mt-4">
```bash
npm install @avail-project/widgets
```
</TabsContent>

<TabsContent value="shadcn" className="mt-4">
```bash
npx shadcn@latest add availproject/widgets/nexus
```
</TabsContent>
</Tabs>

## Usage

Wrap your app with the Nexus provider first. See [NexusProvider Setup](/docs/nexus/widgets/get-started/nexus-provider-setup) for provider setup.

Deposit requires a fixed destination chain, at least one destination token, a deposit contract address, and an `executeDeposit` builder describing the app call to run after Nexus delivers funds. The user picks the amount and pay-with sources; Nexus routes funds cross-chain and executes your contract call on the destination.

<Tabs defaultValue="npm-usage">
<TabsList>
<TabsTrigger value="npm-usage">NPM (Recommended)</TabsTrigger>
<TabsTrigger value="shadcn-usage">shadcn/ui (Power Users)</TabsTrigger>
</TabsList>

<TabsContent value="npm-usage" className="mt-4">

```tsx showLineNumbers
import { NexusWidget } from "@avail-project/widgets";
import { encodeFunctionData } from "viem";

const AAVE_POOL_ARBITRUM = "0x794a61358D6845594F94dc1DB02A252b5b4814aD";
const USDT_ARBITRUM = "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9";

const AAVE_ABI = [
{
inputs: [
{ internalType: "address", name: "asset", type: "address" },
{ internalType: "uint256", name: "amount", type: "uint256" },
{ internalType: "address", name: "onBehalfOf", type: "address" },
{ internalType: "uint16", name: "referralCode", type: "uint16" },
],
name: "supply",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
] as const;

export function DepositExample({ address }: { address?: `0x${string}` }) {
return (
<NexusWidget
connectedAddress={address}
config={{
mode: "deposit",
destination: {
chain: 42161,
tokens: [{ address: USDT_ARBITRUM, symbol: "USDT", decimals: 6 }],
},
depositAddress: AAVE_POOL_ARBITRUM,
executeDeposit: (tokenSymbol, tokenAddress, amount, chainId, user) => ({
to: AAVE_POOL_ARBITRUM,
data: encodeFunctionData({
abi: AAVE_ABI,
functionName: "supply",
args: [tokenAddress, amount, user, 0],
}),
gas: 400_000n,
tokenApproval: {
toTokenAddress: tokenAddress,
amount,
spender: AAVE_POOL_ARBITRUM,
},
}),
appearance: {
appName: "Aave",
heading: "Deposit into Aave",
mode: "system",
},
}}
/>
);
}
```

</TabsContent>

<TabsContent value="shadcn-usage" className="mt-4">

```tsx showLineNumbers
import { NexusWidget } from "@/components/nexus/nexus";
import { encodeFunctionData } from "viem";
Expand Down Expand Up @@ -67,6 +158,7 @@ export function DepositExample({ address }: { address?: `0x${string}` }) {
functionName: "supply",
args: [tokenAddress, amount, user, 0],
}),
gas: 400_000n,
tokenApproval: {
toTokenAddress: tokenAddress,
amount,
Expand All @@ -84,6 +176,9 @@ export function DepositExample({ address }: { address?: `0x${string}` }) {
}
```

</TabsContent>
</Tabs>

## Configuration

Deposit uses `mode: "deposit"`. Unlike send and swap, the destination is required and locked: the user only chooses the amount and the sources to pay with.
Expand Down Expand Up @@ -180,7 +275,7 @@ Render the deposit flow as a modal instead of an embedded card:

```tsx showLineNumbers
import { useState } from "react";
import { NexusWidget } from "@/components/nexus/nexus";
import { NexusWidget } from "@avail-project/widgets";

export function DepositModal({
config,
Expand Down
61 changes: 61 additions & 0 deletions content/docs/nexus/widgets/components/swaps.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ links:
doc: /docs/nexus/nexus-sdk/reference/swap-methods/swap-exact-in
---

import { SquareArrowUpRight } from "lucide-react";

<ComponentPreview
name="nexus-swap"
description="Swap mode with USDC on Base configured as the receive asset."
Expand All @@ -15,16 +17,72 @@ links:

> **Network support:** Mainnet only. Testnet is not supported at the moment.

## Configurator

Generate the exact basic configuration for Swap mode using the <a href="https://configurator.availproject.org/" target="_blank" rel="noopener noreferrer" className="font-medium underline underline-offset-4">Widget Configurator <SquareArrowUpRight className="inline size-4" /></a>.

## Installation

<Tabs defaultValue="npm">
<TabsList>
<TabsTrigger value="npm">NPM (Recommended)</TabsTrigger>
<TabsTrigger value="shadcn">shadcn/ui (Power Users)</TabsTrigger>
</TabsList>

<TabsContent value="npm" className="mt-4">
```bash
npm install @avail-project/widgets
```
</TabsContent>

<TabsContent value="shadcn" className="mt-4">
```bash
npx shadcn@latest add availproject/widgets/nexus
```
</TabsContent>
</Tabs>

## Usage

Wrap your app with the Nexus provider first. See [NexusProvider Setup](/docs/nexus/widgets/get-started/nexus-provider-setup) for provider setup.

<Tabs defaultValue="npm-usage">
<TabsList>
<TabsTrigger value="npm-usage">NPM (Recommended)</TabsTrigger>
<TabsTrigger value="shadcn-usage">shadcn/ui (Power Users)</TabsTrigger>
</TabsList>

<TabsContent value="npm-usage" className="mt-4">

```tsx showLineNumbers
import { NexusWidget } from "@avail-project/widgets";

const USDC_BASE = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";

export function SwapAndBridgeExample({
address,
}: {
address?: `0x${string}`;
}) {
return (
<NexusWidget
connectedAddress={address}
config={{
mode: "swap",
destination: {
chain: 8453,
tokens: [{ address: USDC_BASE, symbol: "USDC", decimals: 6 }],
},
}}
/>
);
}
```

</TabsContent>

<TabsContent value="shadcn-usage" className="mt-4">

```tsx showLineNumbers
import { NexusWidget } from "@/components/nexus/nexus";

Expand All @@ -50,6 +108,9 @@ export function SwapAndBridgeExample({
}
```

</TabsContent>
</Tabs>

## Configuration

Swap and Bridge uses `mode: "swap"`. Users pick a source asset, the quote determines the receive amount, and the flow submits through the Nexus swap execution path.
Expand Down
60 changes: 60 additions & 0 deletions content/docs/nexus/widgets/components/transfer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ links:
doc: /docs/nexus/nexus-sdk/reference/bridge-methods/transfer
---

import { SquareArrowUpRight } from "lucide-react";

<ComponentPreview
name="nexus-send"
description="Send mode with USDC on Base configured, an amount prefilled, and a recipient set."
Expand All @@ -15,16 +17,71 @@ links:

> **Network support:** Mainnet only. Testnet is not supported at the moment.

## Configurator

Generate the exact basic configuration for Send mode using the <a href="https://configurator.availproject.org/" target="_blank" rel="noopener noreferrer" className="font-medium underline underline-offset-4">Widget Configurator <SquareArrowUpRight className="inline size-4" /></a>.

## Installation

<Tabs defaultValue="npm">
<TabsList>
<TabsTrigger value="npm">NPM (Recommended)</TabsTrigger>
<TabsTrigger value="shadcn">shadcn/ui (Power Users)</TabsTrigger>
</TabsList>

<TabsContent value="npm" className="mt-4">
```bash
npm install @avail-project/widgets
```
</TabsContent>

<TabsContent value="shadcn" className="mt-4">
```bash
npx shadcn@latest add availproject/widgets/nexus
```
</TabsContent>
</Tabs>

## Usage

Wrap your app with the Nexus provider first. See [NexusProvider Setup](/docs/nexus/widgets/get-started/nexus-provider-setup) for provider setup.

<Tabs defaultValue="npm-usage">
<TabsList>
<TabsTrigger value="npm-usage">NPM (Recommended)</TabsTrigger>
<TabsTrigger value="shadcn-usage">shadcn/ui (Power Users)</TabsTrigger>
</TabsList>

<TabsContent value="npm-usage" className="mt-4">

```tsx showLineNumbers
import { NexusWidget } from "@avail-project/widgets";

const USDC_BASE = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
const RECIPIENT = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";

export function SendExample({ address }: { address?: `0x${string}` }) {
return (
<NexusWidget
connectedAddress={address}
config={{
mode: "send",
destination: {
chain: 8453,
tokens: [{ address: USDC_BASE, symbol: "USDC", decimals: 6 }],
},
recipientAddress: RECIPIENT,
prefill: { amount: "0.1" },
}}
/>
);
}
```

</TabsContent>

<TabsContent value="shadcn-usage" className="mt-4">

```tsx showLineNumbers
import { NexusWidget } from "@/components/nexus/nexus";

Expand All @@ -49,6 +106,9 @@ export function SendExample({ address }: { address?: `0x${string}` }) {
}
```

</TabsContent>
</Tabs>

## Configuration

Send uses `mode: "send"`. This mode is exact-out: users enter the token amount to send, pay-with sources are selected, and the flow submits through the Nexus transfer execution path.
Expand Down
Loading