Wallet UI

https://wallet-ui.dev
Admin
Wallet UI is the wallet layer for Solana apps on web and mobile, built on Wallet Standard and Mobile...
Tokens:30,598
Snippets:283
Trust Score:5.3
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies with bun

Source: https://wallet-ui.dev/react/guides/next

Install the Wallet UI React and core packages using bun.

```bash
bun add @wallet-ui/react @wallet-ui/core
```

--------------------------------

### Install dependencies with npm

Source: https://wallet-ui.dev/react/guides/next

Install the Wallet UI React and core packages using npm.

```bash
npm install @wallet-ui/react @wallet-ui/core
```

--------------------------------

### Install @wallet-ui/react and @wallet-ui/tailwind

Source: https://wallet-ui.dev/react/guides/vite

Install the required Wallet UI packages using npm, pnpm, or bun.

```bash
npm install @wallet-ui/react @wallet-ui/tailwind
```

```bash
pnpm add @wallet-ui/react @wallet-ui/tailwind
```

```bash
bun add @wallet-ui/react @wallet-ui/tailwind
```

--------------------------------

### Install dependencies with pnpm

Source: https://wallet-ui.dev/react/guides/next

Install the Wallet UI React and core packages using pnpm.

```bash
pnpm add @wallet-ui/react @wallet-ui/core
```

--------------------------------

### Install @solana/kit-plugins (npm, pnpm, bun)

Source: https://wallet-ui.dev/react-native/providers

Install @solana/kit-plugins with npm, pnpm, or bun. Choose the command matching your package manager.

```bash
npm install @solana/kit-plugins
```

```bash
pnpm add @solana/kit-plugins
```

```bash
bun add @solana/kit-plugins
```

--------------------------------

### Install @wallet-ui/css with bun

Source: https://wallet-ui.dev/react/styling/css

Install the @wallet-ui/css package using bun. Use this command if your project uses bun as the package manager.

```bash
bun add @wallet-ui/css
```

--------------------------------

### Baseline Wallet UI provider and dropdown

Source: https://wallet-ui.dev/react/guides/sign-in-with-solana

Baseline setup for Wallet UI: create a config with a Solana devnet cluster and wrap the app in a WalletUi provider, then render the WalletUiDropdown for wallet connection. This is the starting point before adding sign-in.

```tsx
import { createSolanaDevnet, createWalletUiConfig, WalletUi } from '@wallet-ui/react';
import type { ReactNode } from 'react';


const config = createWalletUiConfig({
    clusters: [createSolanaDevnet()],
});


export function SolanaProvider({ children }: { children: ReactNode }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}

```

```tsx
import { WalletUiDropdown } from '@wallet-ui/react';


export function WalletConnect() {
    return <WalletUiDropdown />;
}

```

--------------------------------

### Install @wallet-ui/css with pnpm

Source: https://wallet-ui.dev/react/styling/css

Install the @wallet-ui/css package using pnpm. Use this command if your project uses pnpm as the package manager.

```bash
pnpm add @wallet-ui/css
```

--------------------------------

### Install @wallet-ui/css with npm

Source: https://wallet-ui.dev/react/styling/css

Install the @wallet-ui/css package using npm. Run this command in your project directory to add the package as a dependency.

```bash
npm install @wallet-ui/css
```

--------------------------------

### Install expo-dev-client

Source: https://wallet-ui.dev/react-native/guides/expo

Install expo-dev-client, required for Expo development builds. Use the command matching your package manager.

```bash
npx expo install expo-dev-client
```

```bash
pnpm dlx expo install expo-dev-client
```

```bash
bunx expo install expo-dev-client
```

--------------------------------

### Use WalletUiContext to get current account

Source: https://wallet-ui.dev/react/providers/wallet-ui-context

Shows how to use the WalletUiContext to access the current account. The example imports useContext and WalletUiContext, then destructures the account property. If no account is selected, it returns a message; otherwise it displays the account address.

```typescript
import { useContext } from 'react';
import { WalletUiContext } from '@wallet-ui/react';


function AccountDetails() {
    const { account } = useContext(WalletUiContext);


    if (!account) {
        return <p>No account selected.</p>;
    }


    return (
        <div>
            <p>Account: {account.address}</p>
        </div>
    );
}
```

--------------------------------

### Install @wallet-ui/tailwind with npm, pnpm, or bun

Source: https://wallet-ui.dev/react/styling/tailwind

Install the @wallet-ui/tailwind package using npm, pnpm, or bun. Choose the command that matches your package manager.

```bash
npm install @wallet-ui/tailwind
```

```bash
pnpm add @wallet-ui/tailwind
```

```bash
bun add @wallet-ui/tailwind
```

--------------------------------

### useWalletUi hook example: WalletStatus component

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui

Use this component to display the wallet connection status and a disconnect button. It calls useWalletUi() to get connected, account, and disconnect, and shows 'Not connected' when no wallet is connected.

```tsx
import { useWalletUi } from '@wallet-ui/react';


function WalletStatus() {
    const { connected, account, disconnect } = useWalletUi();


    if (!connected) {
        return <p>Not connected</p>;
    }


    return (
        <div>
            <p>Connected to {account?.address}</p>
            <button onClick={disconnect}>Disconnect</button>
        </div>
    );
}

```

--------------------------------

### Custom Connect Button with useWalletUiWallet

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui-wallet

Use this hook to build a custom UI for a single wallet, such as a dedicated 'Connect to Phantom' button. The example finds a wallet by name and passes it to a component that uses useWalletUiWallet to get connect and connecting. The button is disabled while connecting and shows 'Connecting...'.

```jsx
import { useWalletUiWallet, useWalletUiWallets } from '@wallet-ui/react';


function ConnectPhantom() {
    const { wallets } = useWalletUiWallets();
    const phantomWallet = wallets.find(wallet => wallet.name === 'Phantom');


    if (!phantomWallet) {
        return <p>Phantom wallet not found.</p>;
    }


    return <ConnectWallet wallet={phantomWallet} />;
}


function ConnectWallet({ wallet }) {
    const { connect, connecting } = useWalletUiWallet({ wallet });


    return (
        <button onClick={() => connect()} disabled={connecting}>
            {connecting ? 'Connecting...' : `Connect to ${wallet.name}`}
        </button>
    );
}
```

--------------------------------

### Install @wallet-ui/react-native-web3js with npm, pnpm, or bun

Source: https://wallet-ui.dev/react-native/getting-started

Install the @wallet-ui/react-native-web3js package using npm, pnpm, or bun. Choose this package if your app already uses @solana/web3.js, Connection, PublicKey, and the web3.js transaction model.

```bash
npm install @wallet-ui/react-native-web3js
```

```bash
pnpm add @wallet-ui/react-native-web3js
```

```bash
bun add @wallet-ui/react-native-web3js
```

--------------------------------

### Install Tailwind CSS and @tailwindcss/vite

Source: https://wallet-ui.dev/react/guides/vite

Install Tailwind CSS and its Vite plugin as dev dependencies using npm, pnpm, or bun.

```bash
npm install -D tailwindcss @tailwindcss/vite
```

```bash
pnpm add -D tailwindcss @tailwindcss/vite
```

```bash
bun add --dev tailwindcss @tailwindcss/vite
```

--------------------------------

### useAuthorization example with createAsyncStorageCache and createAuthorizationStore

Source: https://wallet-ui.dev/react-native/hooks/use-authorization

Example of using useAuthorization with a cache and store. It authorizes a session on button press and displays the selected account address. Requires @wallet-ui/react-native-kit and react-native components.

```tsx
import { createAsyncStorageCache, createAuthorizationStore, useAuthorization } from '@wallet-ui/react-native-kit';
import { useCallback } from 'react';
import { Button, Text, View } from 'react-native';


const cache = createAsyncStorageCache();
const store = createAuthorizationStore({ cache });


function MyComponent() {
    const { authorizeSession, selectedAccount } = useAuthorization({
        chain: 'solana:mainnet',
        identity: { name: 'My App' },
        store,
        cache,
    });


    const handleConnect = useCallback(async () => {
        const wallet = getWallet();
        await authorizeSession(wallet);
    }, [authorizeSession]);


    return (
        <View>
            {selectedAccount ? (
                <Text>Connected to {selectedAccount.address}</Text>
            ) : (
                <Button title="Connect" onPress={handleConnect} />
            )}
        </View>
    );
}
```

--------------------------------

### Install @wallet-ui/react-native-kit with npm, pnpm, or bun

Source: https://wallet-ui.dev/react-native/getting-started

Install the @wallet-ui/react-native-kit package using npm, pnpm, or bun. Choose this package if your app is built around @solana/kit and you want the Kit-native RPC client, Address types, and transaction helpers.

```bash
npm install @wallet-ui/react-native-kit
```

```bash
pnpm add @wallet-ui/react-native-kit
```

```bash
bun add @wallet-ui/react-native-kit
```

--------------------------------

### Create a Wallet UI template with npm

Source: https://wallet-ui.dev/react/getting-started

Use npm to scaffold a new project from one of the Wallet UI templates. Choose bun-react-vite-solana-kit for a basic app, or quasar-react-counter or quasar-react-escrow for an app with an example Quasar program.

```bash
npx create-seed@latest -t bun-react-vite-solana-kit
npx create-seed@latest -t quasar-react-counter
npx create-seed@latest -t quasar-react-escrow
```

--------------------------------

### Configure WalletUi with Solana clusters

Source: https://wallet-ui.dev/core/clusters

Shows how to configure the WalletUi provider with a list of Solana clusters, including a custom RPC URL for mainnet and the default devnet. Use this as the typical setup for most applications.

```javascript
import { createWalletUiConfig, WalletUi } from '@wallet-ui/react';
import { createSolanaDevnet, createSolanaMainnet } from '@wallet-ui/core';


const config = createWalletUiConfig({
    clusters: [createSolanaMainnet('https://your-custom-rpc.com'), createSolanaDevnet()],
});


function App({ children }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}
```

--------------------------------

### useWalletUi

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui

Documentation for the useWalletUi hook, including its return value and an example usage.

```APIDOC
## useWalletUi

### Description
Returns an object with properties to access the connected wallet, account, cluster information, and functions to connect, disconnect, and copy the address.

### Return Value

| Name | Type | Description |
|------|------|-------------|
| `account` | `UiWalletAccount` | The currently selected wallet account. |
| `wallet` | `UiWallet` | The wallet that the current account belongs to. |
| `connected` | `boolean` | A boolean indicating if a wallet is connected. |
| `wallets` | `UiWallet[]` | An array of all detected wallets. |
| `cluster` | `SolanaCluster` | The currently selected Solana cluster. |
| `connect` | `(account: UiWalletAccount) => void` | A function to set the active wallet account. |
| `disconnect` | `() => void` | A function to disconnect the current wallet. |
| `copy` | `() => void` | A function to copy the current account address to the clipboard. |

### Example

```tsx
import { useWalletUi } from '@wallet-ui/react';

function WalletStatus() {
    const { connected, account, disconnect } = useWalletUi();

    if (!connected) {
        return <p>Not connected</p>;
    }

    return (
        <div>
            <p>Connected to {account?.address}</p>
            <button onClick={disconnect}>Disconnect</button>
        </div>
    );
}
```
```

--------------------------------

### useWalletUiWallet

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui-wallet

Documentation for the useWalletUiWallet hook, including usage example and return value.

```APIDOC
## useWalletUiWallet

### Description
Provides `connect` and `disconnect` functions for a specific wallet instance. This hook is for advanced use cases where you need to interact with a specific wallet that is not the currently active one.

### Usage

```jsx
import { useWalletUiWallet, useWalletUiWallets } from '@wallet-ui/react';

function ConnectPhantom() {
    const { wallets } = useWalletUiWallets();
    const phantomWallet = wallets.find(wallet => wallet.name === 'Phantom');

    if (!phantomWallet) {
        return <p>Phantom wallet not found.</p>;
    }

    return <ConnectWallet wallet={phantomWallet} />;
}

function ConnectWallet({ wallet }) {
    const { connect, connecting } = useWalletUiWallet({ wallet });

    return (
        <button onClick={() => connect()} disabled={connecting}>
            {connecting ? 'Connecting...' : `Connect to ${wallet.name}`}
        </button>
    );
}
```

### Parameters

- `wallet` (UiWallet) - Required - The wallet instance to interact with.

### Return Value

The hook returns an object with the following properties:

| Name | Type | Description |
|------|------|-------------|
| `connect` | `() => Promise<void>` | A function to connect to the specified wallet. |
| `connecting` | `boolean` | A boolean indicating if the connection is in progress. |
| `disconnect` | `() => Promise<void>` | A function to disconnect from the specified wallet. |
| `wallet` | `UiWallet` | The wallet instance that the hook is interacting with. |
```

--------------------------------

### Create a Wallet UI template with bun

Source: https://wallet-ui.dev/react/getting-started

Use bun to scaffold a new project from one of the Wallet UI templates. Choose bun-react-vite-solana-kit for a basic app, or quasar-react-counter or quasar-react-escrow for an app with an example Quasar program.

```bash
bunx create-seed@latest -t bun-react-vite-solana-kit
bunx create-seed@latest -t quasar-react-counter
bunx create-seed@latest -t quasar-react-escrow
```

--------------------------------

### Create a Wallet UI template with pnpm

Source: https://wallet-ui.dev/react/getting-started

Use pnpm to scaffold a new project from one of the Wallet UI templates. Choose bun-react-vite-solana-kit for a basic app, or quasar-react-counter or quasar-react-escrow for an app with an example Quasar program.

```bash
pnpm dlx create-seed@latest -t bun-react-vite-solana-kit
pnpm dlx create-seed@latest -t quasar-react-counter
pnpm dlx create-seed@latest -t quasar-react-escrow
```

--------------------------------

### useMobileWallet example: connect, disconnect, and signAndSendTransaction

Source: https://wallet-ui.dev/react-native/hooks/use-mobile-wallet

Example component using useMobileWallet to connect, disconnect, and send a dummy transaction. Requires @wallet-ui/react-native-web3js and @solana/web3.js. The transaction uses SystemProgram.transfer with a placeholder public key and 1000 lamports.

```tsx
import { useMobileWallet } from '@wallet-ui/react-native-web3js';
import { useCallback } from 'react';
import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js';
import { Button, Text, View } from 'react-native';


function WalletConnector() {
    const { account, connect, disconnect, signAndSendTransaction } = useMobileWallet();


    const handleConnect = useCallback(async () => {
        await connect();
    }, [connect]);


    const handleDisconnect = useCallback(async () => {
        await disconnect();
    }, [disconnect]);


    const handleSendTransaction = useCallback(async () => {
        if (!account) return;


        const transaction = new Transaction().add(
            SystemProgram.transfer({
                fromPubkey: account.publicKey,
                toPubkey: new PublicKey('SOME_OTHER_PUBLIC_KEY'),
                lamports: 1000,
            }),
        );


        await signAndSendTransaction(transaction, 0);
    }, [account, signAndSendTransaction]);


    return (
        <View>
            {account ? (
                <>
                    <Text>Connected to: {account.address}</Text>
                    <Button title="Disconnect" onPress={handleDisconnect} />
                    <Button title="Send Dummy Transaction" onPress={handleSendTransaction} />
                </>
            ) : (
                <Button title="Connect Wallet" onPress={handleConnect} />
            )}
        </View>
    );
}
```

--------------------------------

### Install Mobile Wallet Adapter native dependencies

Source: https://wallet-ui.dev/react-native/guides/expo

Install the native dependencies required by Mobile Wallet Adapter: expo-linking, expo-secure-store, react-native-get-random-values, and react-native-url-polyfill. Use the command matching your package manager.

```bash
npx expo install expo-linking expo-secure-store react-native-get-random-values react-native-url-polyfill
```

```bash
pnpm dlx expo install expo-linking expo-secure-store react-native-get-random-values react-native-url-polyfill
```

```bash
bunx expo install expo-linking expo-secure-store react-native-get-random-values react-native-url-polyfill
```

--------------------------------

### WalletUiAccountContextProvider usage example

Source: https://wallet-ui.dev/react/providers/wallet-ui-account-context-provider

Shows how to wrap your app with WalletUiAccountContextProvider, passing children as the content to render. The provider manages the selected wallet account state and persists it to local storage.

```tsx
import { WalletUiAccountContextProvider } from '@wallet-ui/react';


function MyApp({ children }) {
    return <WalletUiAccountContextProvider>{children}</WalletUiAccountContextProvider>;
}

```

--------------------------------

### useAuthorization (Kit)

Source: https://wallet-ui.dev/react-native/hooks/use-authorization

Documentation for the useAuthorization hook in the Kit package, including parameters, return values, and an example.

```APIDOC
## useAuthorization

### Description
A low-level hook for managing wallet authorization. It is used internally by `useMobileWallet` and is mainly useful when you need direct control over authorization state.

### Parameters

| Name | Type | Description |
|------|------|-------------|
| `cache` | `WalletAuthorizationCache` | Optional. A cache instance for storing authorization data. |
| `chain` | `Chain` | The blockchain chain to connect to. |
| `identity` | `AppIdentity` | The identity of the app connecting to the wallet. |
| `store` | `AuthorizationStore` | The authorization store instance. |

These parameters are provided automatically when `useAuthorization` is used inside `MobileWalletProvider`.

### Return value

| Name | Type | Description |
|------|------|-------------|
| `accounts` | `Account[] \| null` | An array of all authorized accounts. |
| `authorizeSession` | `(wallet: AuthorizeAPI) => Promise<Account>` | A function to authorize a new session. |
| `authorizeSessionWithSignIn` | `(wallet: AuthorizeAPI, signInPayload: SignInPayload) => Promise<Account>` | A function to authorize a new session with sign-in. |
| `deauthorizeSession` | `(wallet: DeauthorizeAPI) => Promise<void>` | A function to deauthorize the current session. |
| `deauthorizeSessions` | `() => Promise<void>` | A function to deauthorize all sessions. |
| `selectedAccount` | `Account \| null` | The currently selected wallet account. |

### Account object

| Name | Type | Description |
|------|------|-------------|
| `address` | `Address` | The wallet address as an `Address` type from `@solana/kit`. |
| `addressBase64` | `Base64EncodedAddress` | The base64-encoded address. |
| `icon` | `WalletIcon` | Optional. The wallet icon. |
| `label` | `string \| undefined` | An optional, user-defined label for the account. |

### Example

```tsx
import { createAsyncStorageCache, createAuthorizationStore, useAuthorization } from '@wallet-ui/react-native-kit';
import { useCallback } from 'react';
import { Button, Text, View } from 'react-native';

const cache = createAsyncStorageCache();
const store = createAuthorizationStore({ cache });

function MyComponent() {
    const { authorizeSession, selectedAccount } = useAuthorization({
        chain: 'solana:mainnet',
        identity: { name: 'My App' },
        store,
        cache,
    });

    const handleConnect = useCallback(async () => {
        const wallet = getWallet();
        await authorizeSession(wallet);
    }, [authorizeSession]);

    return (
        <View>
            {selectedAccount ? (
                <Text>Connected to {selectedAccount.address}</Text>
            ) : (
                <Button title="Connect" onPress={handleConnect} />
            )}
        </View>
    );
}
```
```

--------------------------------

### WalletUiClusterContextProvider usage example

Source: https://wallet-ui.dev/react/providers/wallet-ui-cluster-context-provider

Shows how to wrap your app with WalletUiClusterContextProvider, passing an empty clusters array and a render function that displays the current cluster label. The provider manages the selected Solana cluster state and persists it to local storage.

```jsx
import { WalletUiClusterContextProvider } from '@wallet-ui/react';


function MyApp({ children }) {
    return (
        <WalletUiClusterContextProvider
            clusters={[]}
            render={props => (
                <div>
                    <p>Current Cluster: {props.cluster.label}</p>
                    {children}
                </div>
            )}
        />
    );
}
```

--------------------------------

### Custom RPC client with @solana/kit-plugins

Source: https://wallet-ui.dev/react-native/providers

Custom RPC client using @solana/kit-plugins. Builds a client with createEmptyClient().use(rpc(...)) and passes it to MobileWalletProvider. Requires installing @solana/kit-plugins first.

```tsx
import { createEmptyClient } from '@solana/kit';
import { rpc } from '@solana/kit-plugins';
import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';


const cluster = createSolanaDevnet();


async function createMyClient(cluster: { url: string; urlWs?: string }) {
    const urlWs = cluster.urlWs ?? cluster.url.replace(/^http/, 'ws');
    const client = await createEmptyClient().use(rpc(cluster.url, { url: urlWs }));
    return { rpc: client.rpc, rpcSubscriptions: client.rpcSubscriptions };
}


function Root() {
    return (
        <MobileWalletProvider cluster={cluster} createClient={createMyClient} identity={{ name: 'My App' }}>
            <App />
        </MobileWalletProvider>
    );
}
```

--------------------------------

### Use WalletUiClusterContext to get current cluster

Source: https://wallet-ui.dev/react/providers/wallet-ui-cluster-context

This example shows how to use the WalletUiClusterContext to access the current cluster and display its label. It imports the context from '@wallet-ui/react' and uses the useContext hook.

```tsx
import { useContext } from 'react';
import { WalletUiClusterContext } from '@wallet-ui/react';


function ClusterDetails() {
    const { cluster } = useContext(WalletUiClusterContext);


    return (
        <div>
            <p>Current Cluster: {cluster.label}</p>
        </div>
    );
}
```

--------------------------------

### Create Web3.js starter templates with solana-mobile CLI

Source: https://wallet-ui.dev/react-native/getting-started

Create a starter template for the Web3.js package using npx, pnpm dlx, or bunx. Available templates: expo-web3js-anchor, expo-web3js-minimal, and expo-web3js-uniwind.

```bash
npx solana-mobile@latest create -t expo-web3js-anchor
npx solana-mobile@latest create -t expo-web3js-minimal
npx solana-mobile@latest create -t expo-web3js-uniwind
```

```bash
pnpm dlx solana-mobile@latest create -t expo-web3js-anchor
pnpm dlx solana-mobile@latest create -t expo-web3js-minimal
pnpm dlx solana-mobile@latest create -t expo-web3js-uniwind
```

```bash
bunx solana-mobile@latest create -t expo-web3js-anchor
bunx solana-mobile@latest create -t expo-web3js-minimal
bunx solana-mobile@latest create -t expo-web3js-uniwind
```

--------------------------------

### Create Kit starter templates with solana-mobile CLI

Source: https://wallet-ui.dev/react-native/getting-started

Create a starter template for the Kit package using npx, pnpm dlx, or bunx. Available templates: expo-kit-anchor, expo-kit-minimal, and expo-kit-uniwind.

```bash
npx solana-mobile@latest create -t expo-kit-anchor
npx solana-mobile@latest create -t expo-kit-minimal
npx solana-mobile@latest create -t expo-kit-uniwind
```

```bash
pnpm dlx solana-mobile@latest create -t expo-kit-anchor
pnpm dlx solana-mobile@latest create -t expo-kit-minimal
pnpm dlx solana-mobile@latest create -t expo-kit-uniwind
```

```bash
bunx solana-mobile@latest create -t expo-kit-anchor
bunx solana-mobile@latest create -t expo-kit-minimal
bunx solana-mobile@latest create -t expo-kit-uniwind
```

--------------------------------

### Sign in with useWalletUiAuth and verify the result

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui-auth

Use this example to build a sign-in button that calls useWalletUiAuth with the selected wallet. It constructs a SolanaSignInInput with domain, nonce, statement, uri, and version, then verifies the result by POSTing the input, method, signature, signedMessage, and walletAddress to /api/auth/verify. The button disables while signing in or when canSignIn is false, and shows 'Connect wallet' when a reason is present.

```jsx
import { WalletUiAuthError, useWalletUi, useWalletUiAuth } from '@wallet-ui/react';


function AuthButton() {
    const { wallet } = useWalletUi();


    if (!wallet) {
        return <button disabled>Connect wallet</button>;
    }


    return <ConnectedAuthButton key={wallet.name} wallet={wallet} />;
}


function ConnectedAuthButton({ wallet }) {
    const { canSignIn, isSigningIn, reason, signIn } = useWalletUiAuth({ wallet });


    async function handleClick() {
        try {
            const result = await signIn({
                input: {
                    domain: window.location.host,
                    nonce: await fetch('/api/auth/nonce').then(res => res.text()),
                    statement: 'Sign in to Example App.',
                    uri: window.location.origin,
                    version: '1',
                },
            });


            await fetch('/api/auth/verify', {
                body: JSON.stringify({
                    input: result.input,
                    method: result.method,
                    signature: Array.from(result.signature),
                    signedMessage: Array.from(result.signedMessage),
                    walletAddress: result.account.address,
                }),
                headers: { 'content-type': 'application/json' },
                method: 'POST',
            });
        } catch (e) {
            if (e instanceof WalletUiAuthError) {
                console.error(e.reason);
                return;
            }
            throw e;
        }
    }


    return (
        <button disabled={!canSignIn || isSigningIn} onClick={handleClick}>
            {isSigningIn ? 'Signing in...' : reason ? 'Connect wallet' : 'Sign in'}
        </button>
    );
}

```

--------------------------------

### useWalletUiDropdown

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui-dropdown

Documentation for the useWalletUiDropdown hook, including its return value and a usage example.

```APIDOC
## useWalletUiDropdown

### Description
Provides all necessary logic and props to build a wallet dropdown component. Handles the list of wallets, connection/disconnection actions, and the underlying menu state.

### Return Value
Returns an object with the following properties:

| Name | Type | Description |
|------|------|-------------|
| `buttonProps` | `BaseButtonProps` | Props to be spread onto a trigger button. |
| `connected` | `boolean` | A boolean indicating if a wallet is connected. |
| `dropdown` | `BaseDropdownControl` | The underlying menu control from Zag.js, containing the state machine API. |
| `items` | `BaseDropdownItem[]` | An array of items to be rendered inside the dropdown menu. |

### Example
```tsx
import { useWalletUiDropdown, BaseDropdown } from '@wallet-ui/react';

function CustomWalletDropdown() {
    const { buttonProps, items, dropdown } = useWalletUiDropdown();

    return <BaseDropdown buttonProps={buttonProps} dropdown={dropdown} items={items} />;
}
```
```

--------------------------------

### WalletUiClusterContext

Source: https://wallet-ui.dev/react/providers/wallet-ui-cluster-context

Documentation for the WalletUiClusterContext React context, including its value properties and an example usage.

```APIDOC
## WalletUiClusterContext

### Description
Provides information about the currently selected Solana cluster.

### Properties
- **cluster** (`SolanaCluster`) - The currently selected Solana cluster object.
- **clusters** (`SolanaCluster[]`) - An array of all available cluster objects.
- **setCluster** (`(clusterId: SolanaClusterId) => void`) - A function to set the active cluster by its ID.

### Example
```tsx
import { useContext } from 'react';
import { WalletUiClusterContext } from '@wallet-ui/react';

function ClusterDetails() {
    const { cluster } = useContext(WalletUiClusterContext);

    return (
        <div>
            <p>Current Cluster: {cluster.label}</p>
        </div>
    );
}
```
```

--------------------------------

### Create app providers with Web3.js

Source: https://wallet-ui.dev/react-native/guides/expo

Configure MobileWalletProvider with chain and endpoint from @wallet-ui/react-native-web3js. Uses 'solana:devnet' chain and the Solana devnet endpoint.

```tsx
import { ReactNode } from 'react';
import { MobileWalletProvider } from '@wallet-ui/react-native-web3js';


const chain = 'solana:devnet';
const endpoint = 'https://api.devnet.solana.com';


export function AppProviders({ children }: { children: ReactNode }) {
    return (
        <MobileWalletProvider chain={chain} endpoint={endpoint} identity={{ name: 'Wallet UI Example Expo' }}>
            {children}
        </MobileWalletProvider>
    );
}
```

--------------------------------

### WalletUiAuth Component

Source: https://wallet-ui.dev/react/components/auth

Documentation for the WalletUiAuth React component, including its props, render state, result type, examples, and unavailable reasons.

```APIDOC
## WalletUiAuth Component

### Description
Wraps the headless `useWalletUiAuth` hook for one wallet. It prefers native `solana:signIn` and falls back to connected-account `solana:signMessage` when native SIWS is unavailable.

### Props
- **children** (`(auth: WalletUiAuthState) => JSX`) - Required - Render function for auth state.
- **wallet** (`UiWallet`) - Required - Wallet to use for the auth attempt.

### Render State
- **canSignIn** (`boolean`) - Whether this wallet can attempt auth.
- **isSigningIn** (`boolean`) - Whether a sign-in request is in progress.
- **messageSigningAvailable** (`boolean`) - Whether the target account supports `solana:signMessage`.
- **nativeSignInAvailable** (`boolean`) - Whether the wallet supports `solana:signIn`.
- **reason** (`WalletUiAuthUnavailableReason | undefined`) - Why auth is unavailable for this wallet/account.
- **signIn** (`(options?: WalletUiAuthSignInOptions) => Promise<WalletUiAuthResult>`) - Starts the native or fallback auth flow for the wallet.

### Result
`signIn()` resolves to:
- **account** (`UiWalletAccount`) - Account that signed in.
- **input** (`SolanaSignInInput`) - SIWS input used for native SIWS or fallback message construction.
- **method** (`'solana:signIn' | 'solana:signMessage'`) - Auth method used.
- **signedMessage** (`Uint8Array`) - Exact bytes signed by the wallet.
- **signature** (`Uint8Array`) - Ed25519 signature returned by the wallet.

### Example
```jsx
import { WalletUiAuth, WalletUiAuthError, useWalletUi } from '@wallet-ui/react';

function AuthButton() {
    const { wallet } = useWalletUi();

    if (!wallet) {
        return <button disabled>Connect wallet</button>;
    }

    return (
        <WalletUiAuth wallet={wallet}>
            {({ canSignIn, isSigningIn, reason, signIn }) => {
                async function handleClick() {
                    try {
                        const result = await signIn({
                            input: {
                                domain: window.location.host,
                                nonce: await fetch('/api/auth/nonce').then(res => res.text()),
                                statement: 'Sign in to Example App.',
                                uri: window.location.origin,
                                version: '1',
                            },
                        });

                        await fetch('/api/auth/verify', {
                            body: JSON.stringify({
                                input: result.input,
                                method: result.method,
                                signature: Array.from(result.signature),
                                signedMessage: Array.from(result.signedMessage),
                                walletAddress: result.account.address,
                            }),
                            headers: { 'content-type': 'application/json' },
                            method: 'POST',
                        });
                    } catch (e) {
                        if (e instanceof WalletUiAuthError) {
                            console.error(e.reason);
                            return;
                        }
                        throw e;
                    }
                }

                return (
                    <button disabled={!canSignIn || isSigningIn} onClick={handleClick}>
                        {isSigningIn ? 'Signing in...' : reason ? 'Connect wallet' : 'Sign in'}
                    </button>
                );
            }}
        </WalletUiAuth>
    );
}
```

### Wallet Picker Flow
If you render your own wallet list, wrap each wallet row with `WalletUiAuth`. The component can connect that wallet first when no account is connected, then use native SIWS or message signing.

```jsx
import { WalletUiAuth, useWalletUiWallets } from '@wallet-ui/react';

function WalletAuthList() {
    const wallets = useWalletUiWallets();

    return wallets.map(wallet => (
        <WalletUiAuth key={wallet.name} wallet={wallet}>
            {({ isSigningIn, signIn }) => (
                <button disabled={isSigningIn} onClick={() => signIn()}>
                    {wallet.name}
                </button>
            )}
        </WalletUiAuth>
    ));
}
```

### Unavailable Reasons
- **auth-unsupported** - The wallet has neither native SIWS nor message-signing fallback.
- **message-signing-unavailable** - The wallet reported no output from `solana:signMessage`.
- **missing-domain** - Fallback SIWS message construction needs `input.domain` or `location.host`.
- **wallet-not-connected** - Fallback auth tried to connect the wallet but received no account.
```

--------------------------------

### MobileWalletProvider (Web3.js)

Source: https://wallet-ui.dev/react-native/providers

Documentation for the MobileWalletProvider component in the React Native Web3.js package, including its props, network configuration, and usage example.

```APIDOC
## MobileWalletProvider (Web3.js)

### Description
Provides wallet connection state and app identity to child components in the React Native Web3.js package. It accepts `chain` and `endpoint` props for network configuration, which map directly to the chain identifier and `Connection` endpoint URL used by `@solana/web3.js`.

### Props
- `cache` (Cache<WalletAuthorization> | undefined) - Optional. A cache instance for storing authorization data.
- `chain` (Chain) - The blockchain chain to connect to, for example `'solana:devnet'`.
- `children` (ReactNode) - Child components that should receive the mobile wallet context.
- `commitmentOrConfig` (Commitment | ConnectionConfig) - Optional commitment level or connection configuration. Default: `{ commitment: 'confirmed' }`.
- `endpoint` (string) - The Solana RPC endpoint URL.
- `identity` (AppIdentity) - The application identity shown to the wallet.

### Network Configuration
- `chain` (Chain) - The blockchain chain identifier.
- `endpoint` (string) - The Solana RPC endpoint URL.

### Example
```tsx
import { MobileWalletProvider } from '@wallet-ui/react-native-web3js';
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';

const chain = 'solana:devnet';
const endpoint = 'https://api.devnet.solana.com';
const appIdentity = {
    name: 'My Wallet App',
    uri: 'https://mywalletapp.com',
    icon: 'https://mywalletapp.com/icon.png',
};

function Root() {
    return (
        <MobileWalletProvider chain={chain} endpoint={endpoint} identity={appIdentity}>
            <App />
        </MobileWalletProvider>
    );
}

AppRegistry.registerComponent('MyWalletApp', () => Root);
```
```

--------------------------------

### Create Next.js app with npm

Source: https://wallet-ui.dev/react/guides/next

Use create-next-app with npm to scaffold a new Next.js application with the App Router, src directory, TypeScript, and Tailwind CSS.

```bash
npx create-next-app@latest --app --src-dir --typescript --tailwind
```

--------------------------------

### MobileWalletProvider (Kit)

Source: https://wallet-ui.dev/react-native/providers

Documentation for the MobileWalletProvider component in the React Native Kit package, including its props, network configuration, and usage example.

```APIDOC
## MobileWalletProvider (Kit)

### Description
Provides wallet connection state and app identity to child components in the React Native Kit package. It accepts a `cluster` object for network configuration and creates a Solana RPC client by default.

### Props
- `cache` (WalletAuthorizationCache) - Optional. A cache instance for storing authorization data. Defaults to a cache that uses `AsyncStorage`.
- `children` (ReactNode) - Child components that should receive the mobile wallet context.
- `cluster` (Pick<SolanaCluster, 'id' | 'url' | 'urlWs'>) - Cluster configuration. Helpers like `createSolanaDevnet()` create the expected shape.
- `createClient` ((cluster: Pick<SolanaCluster, 'url' | 'urlWs'>) => Client) - Optional. A function to create a custom RPC client. By default the provider creates one with `createSolanaRpc()` and `createSolanaRpcSubscriptions()`.
- `identity` (AppIdentity) - The application identity shown to the wallet.

### Network Configuration
- `id` (SolanaClusterId) - The cluster identifier, for example `'solana:devnet'`.
- `url` (string) - The Solana RPC endpoint.
- `urlWs` (string) - Optional WebSocket endpoint for subscriptions.

### Example
```tsx
import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';

const cluster = createSolanaDevnet();
const appIdentity = {
    name: 'My Wallet App',
    uri: 'https://mywalletapp.com',
    icon: 'https://mywalletapp.com/icon.png',
};

function Root() {
    return (
        <MobileWalletProvider cluster={cluster} identity={appIdentity}>
            <App />
        </MobileWalletProvider>
    );
}

AppRegistry.registerComponent('MyWalletApp', () => Root);
```
```

--------------------------------

### Customize localStorage keys with createStorageAccount and createStorageCluster

Source: https://wallet-ui.dev/core/storage

Configures Wallet UI with custom localStorage keys for the selected wallet account and cluster. Use this when you need to avoid collisions across multiple apps on the same domain, use environment-specific keys, or match existing storage keys during migration. The example sets keys 'my-app-wallet-account' and 'my-app-wallet-cluster' and passes the resulting config to the WalletUi component.

```javascript
import { createWalletUiConfig, WalletUi } from '@wallet-ui/react';
import { createStorageAccount, createStorageCluster, createSolanaDevnet } from '@wallet-ui/core';


const config = createWalletUiConfig({
    clusters: [createSolanaDevnet()],
    accountStorage: createStorageAccount({ key: 'my-app-wallet-account' }),
    clusterStorage: createStorageCluster({ key: 'my-app-wallet-cluster' }),
});


function App({ children }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}
```

--------------------------------

### MobileWalletProvider with @wallet-ui/react-native-kit

Source: https://wallet-ui.dev/react-native/providers

Use with @wallet-ui/react-native-kit. The provider takes a cluster object (created by createSolanaDevnet) and an app identity. The example registers the root component with AppRegistry.

```jsx
import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';


const cluster = createSolanaDevnet();
const appIdentity = {
    name: 'My Wallet App',
    uri: 'https://mywalletapp.com',
    icon: 'https://mywalletapp.com/icon.png',
};


function Root() {
    return (
        <MobileWalletProvider cluster={cluster} identity={appIdentity}>
            <App />
        </MobileWalletProvider>
    );
}


AppRegistry.registerComponent('MyWalletApp', () => Root);
```

--------------------------------

### Create app providers with Kit

Source: https://wallet-ui.dev/react-native/guides/expo

Configure MobileWalletProvider with createSolanaDevnet from @wallet-ui/react-native-kit. Sets the cluster to Solana devnet and identity name to 'Wallet UI Example Expo'.

```tsx
import { ReactNode } from 'react';
import { MobileWalletProvider, createSolanaDevnet } from '@wallet-ui/react-native-kit';


const cluster = createSolanaDevnet();


export function AppProviders({ children }: { children: ReactNode }) {
    return (
        <MobileWalletProvider cluster={cluster} identity={{ name: 'Wallet UI Example Expo' }}>
            {children}
        </MobileWalletProvider>
    );
}
```

--------------------------------

### Get signer with useWalletUiSigner

Source: https://wallet-ui.dev/react/hooks/use-wallet-ui-signer

Use this hook to obtain a TransactionSendingSigner for the connected wallet. Returns undefined when no wallet is connected, so guard with a conditional check before using the signer.

```jsx
import { useWalletUiSigner } from '@wallet-ui/react';


function SignerInfo() {
    const signer = useWalletUiSigner();


    if (!signer) {
        return <p>Please connect a wallet to get a signer.</p>;
    }


    return <p>Signer for {signer.address} is available.</p>;
}
```
Tokens:
Raw