### Install JAW.id SDK (Wagmi)

Source: https://docs.jaw.id/guides/quickstart

Installs the necessary packages for integrating JAW.id with Wagmi, including the JAW.id Wagmi connector, wagmi, viem, and react-query.

```bash
npm install @jaw.id/wagmi wagmi viem @tanstack/react-query
```

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

### Send Single and Batched Transactions with Wagmi

Source: https://docs.jaw.id/guides/quickstart

This example demonstrates sending single and batched transactions using the `useSendCalls` hook from Wagmi. It allows users to send ETH to specified addresses and bundle multiple transactions into a single approval for a better user experience. Dependencies include `viem` for `parseEther` and `encodeFunctionData`.

```javascript
import { useSendCalls } from 'wagmi';
import { parseEther, encodeFunctionData } from 'viem';

function SendTransaction() {
  const { sendCalls, isPending } = useSendCalls();

  // Single transaction
  const handleSend = () => {
    sendCalls({
      calls: [
        {
          to: '0xRecipientAddress...',
          value: parseEther('0.01'),
        },
      ],
    });
  };

  // Batch multiple transactions
  const handleBatchSend = () => {
    sendCalls({
      calls: [
        { to: '0xAlice...', value: parseEther('0.01') },
        { to: '0xBob...', value: parseEther('0.02') },
      ],
    });
  };

  return (
    <div>
      <button onClick={handleSend} disabled={isPending}>
        Send ETH
      </button>
      <button onClick={handleBatchSend} disabled={isPending}>
        Batch Send
      </button>
    </div>
  );
}
```

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

### Wallet Connect Request Example

Source: https://docs.jaw.id/api-reference/wallet_connect

This example demonstrates how to initiate a wallet connection request using the `wallet_connect` method. It shows a basic request with no specific parameters.

```javascript
const result = await jaw.provider.request({
  method: 'wallet_connect',
  params: [{}],
});
```

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

### Install Account Class (npm)

Source: https://docs.jaw.id/account

Installs the core JAW.id Account class and the viem library using npm. This is a prerequisite for using the Account class in your project.

```bash
npm install @jaw.id/core viem
```

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

### Setup JAW Provider Instance

Source: https://docs.jaw.id/api-reference

Initializes a new JAW SDK provider instance with an API key and application name. This setup is crucial for interacting with JAW services.

```typescript
import { JAW } from '@jaw.id/core';

const jaw = JAW.create({
  apiKey: 'YOUR_API_KEY',
  appName: 'My App',
});
```

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

### Install Core SDK and Dependencies

Source: https://docs.jaw.id/guides/embed-stablecoin-payments

Installs the necessary JAW.id core SDK and viem for interacting with the blockchain. This is a prerequisite for using JAW.id's payment functionalities.

```bash
npm install @jaw.id/core viem
```

```bash
yarn add @jaw.id/core viem
```

```bash
bun add @jaw.id/core viem
```

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

### Install JustaName SDK (npm)

Source: https://docs.jaw.id/guides/onchain-identity

Installs the JustaName SDK package using npm, which is necessary for resolving profile data from ENS names.

```bash
npm install @justaname.id/sdk
```

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

### Approval Response Example

Source: https://docs.jaw.id/advanced/custom-ui-handler

An example of how to construct a successful approval response. It requires matching the request ID, setting `approved` to true, and providing the relevant result data.

```typescript
return {
  id: request.id,
  approved: true,
  data: resultData,  // Type depends on request type
};
```

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

### eth_signTypedData_v4 Parameters Example

Source: https://docs.jaw.id/api-reference/eth_signTypedData_v4

This example shows the expected format for the parameters passed to the `eth_signTypedData_v4` method. It includes the address to sign with and the typed data.

```javascript
[
  "0x1234567890123456789012345678901234567890",
  "..."
]
```

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

### Configure JAW.id SDK with Wagmi

Source: https://docs.jaw.id/guides/quickstart

Initializes the Wagmi configuration for JAW.id, setting up chains, connectors with API key, app details, and default chain ID. This configuration is essential for connecting to JAW.id services.

```typescript
// config.ts
import { createConfig, http } from 'wagmi';
import { mainnet, base } from 'wagmi/chains';
import { jaw } from '@jaw.id/wagmi';

export const config = createConfig({
  chains: [mainnet, base],
  connectors: [
    jaw({
      apiKey: 'YOUR_API_KEY',
      appName: 'My App',
      appLogoUrl: 'https://myapp.com/logo.png',
      defaultChainId: 1, // Ethereum mainnet
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
  },
});
```

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

### Example Account Address Output

Source: https://docs.jaw.id/api-reference/eth_requestAccounts

This example shows the expected output format when the eth_requestAccounts method is successful. It returns a JSON array containing a single string, which represents the user's account address.

```json
["0x1234567890123456789012345678901234567890"]
```

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

### Display Wallet Capabilities (Basic Usage)

Source: https://docs.jaw.id/wagmi/useCapabilities

This example demonstrates the basic usage of `useCapabilities` to fetch and display wallet capabilities. It requires a connected wallet and shows loading states. The data is then iterated to display chain-specific capabilities.

```typescript
import { useAccount } from 'wagmi';
import { useCapabilities } from '@jaw.id/wagmi';

function CapabilitiesDisplay() {
  const { isConnected } = useAccount();
  const { data: capabilities, isLoading } = useCapabilities();

  if (!isConnected) return <p>Connect wallet to view capabilities</p>;
  if (isLoading) return <p>Loading capabilities...</p>;

  return (
    <div>
      {Object.entries(capabilities || {}).map(([chainId, caps]) => (
        <div key={chainId}>
          <h3>Chain {chainId}</h3>
          <ul>
            {Object.entries(caps).map(([name, value]) => (
              <li key={name}>
                {name}: {JSON.stringify(value)}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}
```

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

### Execute Calls with Granted Permissions (Delegated Execution)

Source: https://docs.jaw.id/api-reference/wallet_sendCalls

This example demonstrates how to execute smart contract calls using a pre-granted permission via `wallet_grantPermissions`. The `wallet_sendCalls` method is used with the `capabilities.permissions.id` field to specify which permission to use, enabling delegated execution within the permission's defined constraints. Requires prior setup with `wallet_grantPermissions`.

```javascript
import { encodeFunctionData } from 'viem';

// First, get the permission ID from a previous wallet_grantPermissions call
const permissionId = '0x1234...'; // The permission ID returned from grantPermissions

const transferData = encodeFunctionData({
  abi: erc20Abi, // Assuming erc20Abi is defined elsewhere
  functionName: 'transfer',
  args: ['0x5678...', 1000000n],
});

// Execute the transfer using the permission
const result = await jaw.provider.request({
  method: 'wallet_sendCalls',
  params: [{
    calls: [
      {
        to: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
        data: transferData,
      },
    ],
    capabilities: {
      permissions: {
        id: permissionId,
      },
    },
  }],
});

console.log('Batch ID:', result.id);
```

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

### Connect Wallet Button using Wagmi

Source: https://docs.jaw.id/guides/quickstart

This snippet shows how to create a connect button using Wagmi hooks. It displays the connected address or a connect button, handling both connection and disconnection logic. It relies on the `useAccount`, `useConnect`, and `useDisconnect` hooks from '@jaw.id/wagmi'.

```javascript
import { useAccount } from 'wagmi';
import { useConnect, useDisconnect } from '@jaw.id/wagmi';
import { config } from './config';

function ConnectButton() {
  const { address, isConnected } = useAccount();
  const { mutate: connect, isPending } = useConnect();
  const { mutate: disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnect({})}>
          Disconnect
        </button>
      </div>
    );
  }

  return (
    <button
      onClick={() => connect({ connector: config.connectors[0] })}
      disabled={isPending}
    >
      {isPending ? 'Connecting...' : 'Connect Wallet'}
    </button>
  );
}
```

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

### Basic useDisconnect Example

Source: https://docs.jaw.id/wagmi/useDisconnect

Demonstrates a basic implementation of the useDisconnect hook. It fetches connection status using useAccount and provides a button to trigger disconnection. The button's state (disabled, text) updates based on the disconnection progress.

```javascript
import { useAccount } from 'wagmi';
import { useDisconnect } from '@jaw.id/wagmi';

function DisconnectButton() {
  const { isConnected } = useAccount();
  const { mutate: disconnect, isPending } = useDisconnect();

  if (!isConnected) return null;

  return (
    <button onClick={() => disconnect({})} disabled={isPending}>
      {isPending ? 'Disconnecting...' : 'Disconnect'}
    </button>
  );
}
```

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

### Wallet Get Assets: Basic Request

Source: https://docs.jaw.id/api-reference/wallet_getAssets

This example demonstrates a basic request to the wallet_getAssets method, specifying the account and a list of chain IDs to filter by. It retrieves all supported assets for the given account on the specified chains.

```javascript
const assets = await jaw.provider.request({
  method: 'wallet_getAssets',
  params: [{
    account: '0x1234...',
  }],
});
```

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

### Wagmi Connector Configuration

Source: https://docs.jaw.id/configuration

Example of configuring the JAW SDK with the Wagmi connector.

```APIDOC
## Configuration - JAW SDK

### Description

This section details how to configure the JAW SDK, which can be used with the Wagmi connector or directly with the provider.

### Usage with Wagmi (Recommended)

```javascript
import { jaw } from '@jaw.id/wagmi';

const connector = jaw({
  apiKey: 'your-api-key',
  appName: 'My DApp',
  appLogoUrl: 'https://my-dapp.com/logo.png',
  defaultChainId: 1,
  ens: 'myapp.eth',
  preference: {
    showTestnets: true,
  },
  paymasters: {
    1: { url: 'https://paymaster.example.com/mainnet' },
  },
});
```

### Usage with Provider Directly

```javascript
import { JAW } from '@jaw.id/core';

const jawProvider = JAW.create({
  apiKey: 'your-api-key',
  appName: 'My DApp',
  appLogoUrl: 'https://my-dapp.com/logo.png',
  defaultChainId: 1,
  ens: 'myapp.eth',
  preference: {
    showTestnets: true,
  },
  paymasters: {
    1: { url: 'https://paymaster.example.com/mainnet' },
  },
});
```

### Configuration Options

#### Core Parameters

- **apiKey** (`string`) - Required - API key for JAW services authentication
- **appName** (`string`) - Optional - Application name displayed to users
- **appLogoUrl** (`string | null`) - Optional - URL to application logo image
- **ens** (`string`) - Optional - ENS domain for issuing subnames
- **defaultChainId** (`number`) - Optional - Default blockchain network

#### Preference Options

The `preference` object contains advanced configuration:

- **mode** (`Mode.CrossPlatform` | `Mode.AppSpecific`) - Optional, Default: `Mode.CrossPlatform` - Authentication mode
- **uiHandler** (`UIHandler`) - Optional - UI handler for rendering dialogs (required when mode is `Mode.AppSpecific`)
- **showTestnets** (`boolean`) - Optional, Default: `false` - Include testnet networks
- **authTTL** (`number`) - Optional, Default: `86400` - Session cache TTL in seconds. Set to `0` to disable caching.

#### Paymasters

- **paymasters** (`Record<number, { url: string; context?: Record<string, unknown> }>`) - Optional - Custom paymaster configuration per chain
```

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

### Wagmi Connector Setup

Source: https://docs.jaw.id/configuration

Integrate JAW with your wagmi configuration by creating a connector using the `jaw()` function.

```APIDOC
## POST /llmstxt/jaw_id_llms_txt

### Description
This endpoint is used to create a Wagmi connector for JAW integration. It requires an API key for authentication.

### Method
POST

### Endpoint
/llmstxt/jaw_id_llms_txt

### Parameters
#### Query Parameters
- **apiKey** (string) - Required - Your JAW API key.

### Request Example
```javascript
import { createConfig } from 'wagmi';
import { jaw } from '@jaw.id/wagmi';

const config = createConfig({
  connectors: [jaw({ apiKey: 'your-api-key' })],
  // ... other wagmi configuration
});
```

### Response
#### Success Response (200)
- **connector** (object) - A Wagmi connector instance configured with JAW.

#### Response Example
```json
{
  "connector": {}
}
```
```

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

### Retrieve Stored Accounts - JavaScript Example

Source: https://docs.jaw.id/account/getStoredAccounts

Demonstrates how to use the Account.getStoredAccounts() method to retrieve all locally stored passkey accounts. This method is synchronous and returns an array of PasskeyAccount objects, or an empty array if none are found. It's useful for account selection and management UIs.

```javascript
import { Account } from '@jaw.id/core';

const accounts = Account.getStoredAccounts('your-api-key');

console.log(`Found ${accounts.length} stored accounts:`);
accounts.forEach(acc => {
  console.log(`- ${acc.username}: ${acc.address}`);
});
```

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

### Personal Sign Example (JavaScript)

Source: https://docs.jaw.id/api-reference/personal_sign

Demonstrates how to use the 'personal_sign' method to sign a message. It requires the 'viem' library for hex encoding. The method takes the hex-encoded message and the user's account as parameters and returns a signature.

```javascript
import { toHex } from 'viem';

const message = 'Hello World';
const messageHex = toHex(message);
const account = '0x1234...';

const signature = await jaw.provider.request({
  method: 'personal_sign',
  params: [messageHex, account],
});

console.log('Signature:', signature);
```

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

### Install JAW.id Packages for React

Source: https://docs.jaw.id/configuration/mode/app-specific

Installs the necessary JAW.id packages for React applications, including Wagmi integration, UI components, and core functionalities. This is a prerequisite for using the `ReactUIHandler` in AppSpecific mode.

```bash
npm install @jaw.id/wagmi @jaw.id/ui @jaw.id/core
```

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

### Initialize JAW.id Account Instance

Source: https://docs.jaw.id/account/signMessage

Before using methods like signMessage, you need to create or restore an Account instance. This example shows various ways to initialize an account, including restoring existing sessions, creating new accounts with passkeys, importing from cloud backups, or using local accounts.

```javascript
import { Account } from '@jaw.id/core';

// Option 1: Restore existing session or login with passkey
// const account = await Account.get({ chainId: 1, apiKey: 'your-api-key' });

// Option 2: Create a new account with passkey
// const account = await Account.create(
//   { chainId: 1, apiKey: 'your-api-key' },
//   { username: 'alice' }
// );

// Option 3: Import from cloud backup
// const account = await Account.import({ chainId: 1, apiKey: 'your-api-key' });

// Option 4: From a local account (server-side / embedded wallets)
// const account = await Account.fromLocalAccount(
//   { chainId: 1, apiKey: 'your-api-key' },
//   localAccount
// );

// Placeholder for demonstration - replace with actual initialization
async function initializeAccount() {
  // Replace with your actual initialization logic
  console.log('Initializing account...');
  // Example: return await Account.get({ chainId: 1, apiKey: 'your-api-key' });
  return null; // Return a mock or actual account
}
```

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

### Wallet Get Assets: Filter by Specific Assets

Source: https://docs.jaw.id/api-reference/wallet_getAssets

This example demonstrates how to retrieve specific assets by providing a detailed `assetFilter`. The filter allows you to specify exact token addresses and their types for particular blockchain networks (e.g., Mainnet '0x1' and Base '0x2105').

```javascript
// Get only USDC on mainnet and Base
const usdc = await jaw.provider.request({
  method: 'wallet_getAssets',
  params: [{
    account: '0x1234...',
    assetFilter: {
      '0x1': [{ address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', type: 'erc20' }],
      '0x2105': [{ address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', type: 'erc20' }],
    },
  }],
});
```

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

### Full Wallet Component with useDisconnect and useConnect

Source: https://docs.jaw.id/wagmi/useDisconnect

This example shows a complete wallet component using `useAccount`, `useConnect`, and `useDisconnect` from wagmi and '@jaw.id/wagmi'. It handles displaying the connected address, disconnecting the wallet, or connecting a new wallet using the `jaw` connector. The component conditionally renders based on the connection status.

```javascript
import { useAccount } from 'wagmi';
import { useConnect, useDisconnect, jaw } from '@jaw.id/wagmi';

function WalletButton() {
  const { address, isConnected } = useAccount();
  const { mutate: connect, isPending: isConnecting } = useConnect();
  const { mutate: disconnect, isPending: isDisconnecting } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <span>{address?.slice(0, 6)}...{address?.slice(-4)}</span>
        <button onClick={() => disconnect({})} disabled={isDisconnecting}>
          {isDisconnecting ? '...' : 'Disconnect'}
        </button>
      </div>
    );
  }

  return (
    <button
      onClick={() => connect({ connector: jaw({ apiKey: '...' }) })}
      disabled={isConnecting}
    >
      {isConnecting ? 'Connecting...' : 'Connect'}
    </button>
  );
}
```

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

### eth_sendTransaction Response Example (String)

Source: https://docs.jaw.id/api-reference/eth_sendTransaction

Example of a successful response from the `eth_sendTransaction` method. The response is a string representing the transaction hash, which is returned after the transaction is successfully submitted to the network.

```string
"0xabc123def456..."
```

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

### WalletGetAssetsResponse Example

Source: https://docs.jaw.id/api-reference/wallet_getAssets

This is an example of the JSON response structure returned by the `wallet_getAssets` method. It shows assets for both Ethereum Mainnet ('0x1') and Polygon ('0x89'), including native tokens and an ERC-20 token (USDC).

```json
{
  "0x1": [
    {
      "address": null,
      "balance": "0x1bc16d674ec80000",
      "metadata": {
        "decimals": 18,
        "name": "Ether",
        "symbol": "ETH"
      },
      "type": "native"
    },
    {
      "address": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
      "balance": "0x5f5e100",
      "metadata": {
        "decimals": 6,
        "name": "USD Coin",
        "symbol": "USDC"
      },
      "type": "erc20"
    }
  ],
  "0x89": [
    {
      "address": null,
      "balance": "0x2b5e3af16b1880000",
      "metadata": {
        "decimals": 18,
        "name": "POL",
        "symbol": "POL"
      },
      "type": "native"
    }
  ]
}
```

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

### Example Signature Output for eth_signTypedData_v4

Source: https://docs.jaw.id/api-reference/eth_signTypedData_v4

This is an example of the expected output format for a signature generated by the eth_signTypedData_v4 method. The signature is a hexadecimal string.

```plaintext
"0xabcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890ab"
```

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

### Account Creation in Custom UI Handler (TypeScript)

Source: https://docs.jaw.id/account/create

Demonstrates how to integrate account creation within a custom UI handler. This example shows a UI handler that prompts the user for a username and then uses that to create an account with the provided chain ID and API key from the handler's configuration. It returns an approval object containing the newly created account's address.

```typescript
class MyUIHandler implements UIHandler {   private config?: UIHandlerConfig;     async handleConnect(request: ConnectUIRequest) {     // Show your custom onboarding UI     const username = await this.showUsernameInput();       const account = await Account.create(       {         chainId: request.data.chainId,         apiKey: this.config?.apiKey,       },       { username }     );       return {       id: request.id,       approved: true,       data: {         accounts: [{ address: account.address }],       },     };   } }
```

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

### Restore Existing Session with Account.get()

Source: https://docs.jaw.id/account/get

This example demonstrates how to use the Account.get() static method to restore an existing authenticated session. If no session is found and no credentialId is provided, it will throw an error. The method requires chainId and apiKey, and optionally accepts a paymasterUrl.

```typescript
import { Account } from '@jaw.id/core';

// Restore without WebAuthn prompt (if already authenticated)
try {
  const account = await Account.get({
    chainId: 1,
    apiKey: 'your-api-key',
  });
  console.log('Restored account:', account.address);
} catch (error) {
  console.log('Not authenticated');
}
```

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

### Example: Call Permission with Function Signature

Source: https://docs.jaw.id/wagmi/useGrantPermissions

Demonstrates how to define a call permission using a human-readable function signature. The SDK automatically computes the selector from the signature.

```javascript
// These are equivalent:
{ target: USDC, selector: '0xa9059cbb' }
{ target: USDC, functionSignature: 'transfer(address,uint256)' }
```

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

### JAW Connector Configuration

Source: https://docs.jaw.id/wagmi/jaw

This section provides an example of how to create a JAW connector using the `jaw` function and integrate it into your Wagmi configuration.

```APIDOC
## POST /wagmi/jaw

### Description
Create a JAW connector for your Wagmi Config. This allows seamless integration of JAW's authentication and account management features into your decentralized application.

### Method
POST

### Endpoint
/wagmi/jaw

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **apiKey** (string) - Required - Your JAW API key. Get one at [JAW Dashboard](https://dashboard.jaw.id/).
- **appName** (string) - Optional - Display name for your application. Shown in the authentication UI.
- **appLogoUrl** (string | null) - Optional - URL to your application's logo. Used in authentication UI.
- **defaultChainId** (number) - Optional - Default chain ID to use on first connection.
- **ens** (string) - Optional - ENS domain for issuing subnames (e.g., 'myapp.eth'). When configured, users can receive a subname during account creation.
- **preference** (JawProviderPreference) - Optional - Configuration for authentication behavior.
  - **mode** (Mode.CrossPlatform | Mode.AppSpecific) - Optional - Authentication mode (default: Mode.CrossPlatform).
  - **showTestnets** (boolean) - Optional - Whether to show testnet chains (default: false).
  - **uiHandler** (UIHandler) - Optional - UI handler for app-specific mode.

### Request Example
```json
{
  "apiKey": "YOUR_API_KEY",
  "appName": "My DApp",
  "appLogoUrl": "https://example.com/logo.png",
  "defaultChainId": 1,
  "ens": "mydapp.eth",
  "preference": {
    "mode": "CrossPlatform",
    "showTestnets": true
  }
}
```

### Response
#### Success Response (200)
- **connector** (Connector) - The configured JAW connector instance.

#### Response Example
```json
{
  "connector": "[Wagmi Connector Object]"
}
```
```

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

### useDisconnect with Callback Example

Source: https://docs.jaw.id/wagmi/useDisconnect

Illustrates how to use the useDisconnect hook with a callback function for handling the success of the disconnection. The 'onSuccess' callback logs a message and can be used for further actions like redirection or state cleanup.

```javascript
import { useDisconnect } from '@jaw.id/wagmi';

function DisconnectButton() {
  const { mutate: disconnect } = useDisconnect({
    mutation: {
      onSuccess: () => {
        console.log('Disconnected successfully');
        // Redirect to login page, clear local state, etc.
      },
    },
  });

  return <button onClick={() => disconnect({})}>Disconnect</button>;
}
```

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

### GET /wallet_getCapabilities

Source: https://docs.jaw.id/api-reference/wallet_getCapabilities

Fetches the capabilities of the wallet for supported chains. It can be filtered by chain IDs and whether to include testnets.

```APIDOC
## GET /wallet_getCapabilities

### Description
Retrieves the capabilities of the wallet, including supported features like atomic transactions, paymaster services, and fee tokens. This endpoint can be called without authentication and returns capabilities for all supported chains by default, or filters by `chainIds` if provided. The `showTestnets` parameter controls whether testnet chains are included in the response.

### Method
GET

### Endpoint
/wallet_getCapabilities

### Query Parameters
- **chainIds** (array[string]) - Optional - A list of chain IDs to filter the capabilities by.
- **showTestnets** (boolean) - Optional - If true, includes testnet chains in the response. Defaults to false.

### Response
#### Success Response (200)
- **object** - An object where keys are chain IDs and values are capability objects for each chain.
  - **atomicBatch** (object) - Indicates support for `wallet_sendCalls`.
    - **supported** (boolean) - True if atomic batch transactions are supported.
  - **atomic** (object) - Indicates support for atomic transaction execution.
    - **status** (string) - The status of atomic transaction support (e.g., "supported").
  - **paymasterService** (object) - Indicates support for ERC-7677 paymaster service.
    - **supported** (boolean) - True if paymaster service is supported.
  - **permissions** (object) - Indicates support for the permission system.
    - **supported** (boolean) - True if the permission system is supported.
  - **feeToken** (object) - Indicates supported fee tokens for gas payments.
    - **supported** (boolean) - True if fee token selection is supported.
    - **tokens** (array) - List of available fee tokens.
      - **uid** (string) - Unique identifier for the token.
      - **symbol** (string) - Token symbol (e.g., "ETH").
      - **address** (string) - Token contract address (zero address for native token).
      - **interop** (boolean) - Whether the token supports cross-chain interoperability.
      - **decimals** (number) - Token decimal places.
      - **feeToken** (boolean) - Whether this token can be used for gas fees.

#### Response Example
```json
{
  "0x1": {
    "atomicBatch": { "supported": true },
    "atomic": { "status": "supported" },
    "paymasterService": { "supported": true },
    "permissions": { "supported": true },
    "feeToken": {
      "supported": true,
      "tokens": [
        {
          "uid": "ethereum",
          "symbol": "ETH",
          "address": "0x0000000000000000000000000000000000000000",
          "interop": false,
          "decimals": 18,
          "feeToken": true
        }
      ]
    }
  },
  "0x2105": {
    "atomicBatch": { "supported": true },
    "atomic": { "status": "supported" },
    "paymasterService": { "supported": true },
    "permissions": { "supported": true },
    "feeToken": {
      "supported": true,
      "tokens": [
        {
          "uid": "ethereum",
          "symbol": "ETH",
          "address": "0x0000000000000000000000000000000000000000",
          "interop": true,
          "decimals": 18,
          "feeToken": true
        }
      ]
    }
  }
}
```

### Request Example
```javascript
const capabilities = await jaw.provider.request({
  method: 'wallet_getCapabilities',
});
```
```

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

### Revoke Permission Example (JavaScript)

Source: https://docs.jaw.id/wagmi/useRevokePermissions

Demonstrates how to use the useRevokePermissions hook to revoke a permission. It shows how to obtain a permission ID from either a grant response or a list of existing permissions and then calls the mutate function to revoke it. This example highlights the core functionality of disabling a previously granted permission.

```javascript
// Example of obtaining permissionId from grant response
// const { data } = useGrantPermissions();
// const permissionId = data.permissionId; // '0x1234...'

// Example of obtaining permissionId from permissions list
// const { data: permissions } = usePermissions();
// const permissionId = permissions[0].permissionId; // '0x1234...'

// Assuming permissionId is obtained and available
// const { mutate } = useRevokePermissions();
// mutate({ id: permissionId });
```

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

### Getting an Account Instance for JAW.id Operations

Source: https://docs.jaw.id/account/estimateGas

Demonstrates various methods to obtain an Account instance, which is necessary before calling instance methods like estimateGas(). Options include restoring existing sessions, creating new accounts with passkeys, importing from cloud backups, or using local account data.

```typescript
import { Account } from '@jaw.id/core';

// Option 1: Restore existing session or login with passkey
const account1 = await Account.get({ chainId: 1, apiKey: 'your-api-key' });

// Option 2: Create a new account with passkey
const account2 = await Account.create(
  { chainId: 1, apiKey: 'your-api-key' },
  { username: 'alice' }
);

// Option 3: Import from cloud backup
const account3 = await Account.import({ chainId: 1, apiKey: 'your-api-key' });

// Option 4: From a local account (server-side / embedded wallets)
// Assuming 'localAccount' is a valid local account object
// const account4 = await Account.fromLocalAccount(
//   { chainId: 1, apiKey: 'your-api-key' },
//   localAccount
// );
```

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

### eth_sendTransaction Request Parameters Example (JSON)

Source: https://docs.jaw.id/api-reference/eth_sendTransaction

An example of the parameters object for the `eth_sendTransaction` request. This JSON structure defines the transaction's destination address, optional value in wei (hexadecimal), and optional transaction data.

```json
[
  {
    "to": "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
    "value": "0x9184e72a000",
    "data": "0x"
  }
]
```

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

### Configure appLogoUrl with JAW Provider Directly

Source: https://docs.jaw.id/configuration/appLogoUrl

This snippet shows how to set the application logo URL when initializing the JAW provider directly. Similar to the Wagmi example, it requires an API key, application name, and the logo image URL. The `appLogoUrl` is passed within the configuration object to `JAW.create()`.

```javascript
import { JAW } from '@jaw.id/core';

const jaw = JAW.create({
  apiKey: 'your-api-key',
  appName: 'My DApp',
  appLogoUrl: 'https://my-dapp.com/logo.png',
});
```

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

### Getting an Account Instance

Source: https://docs.jaw.id/account/getCallStatus

Before calling instance methods, you need to create an account instance. The library provides several factory methods to achieve this, catering to different scenarios like restoring existing sessions, creating new accounts, importing from cloud backups, or using local accounts.

```APIDOC
## Getting an Account Instance

### Description
Create an account instance using one of the provided factory methods before calling instance methods.

### Method
Factory methods (e.g., `Account.get`, `Account.create`, `Account.import`, `Account.fromLocalAccount`)

### Endpoint
N/A (Library methods)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { Account } from '@jaw.id/core';

// Option 1: Restore existing session or login with passkey
const account = await Account.get({ chainId: 1, apiKey: 'your-api-key' });

// Option 2: Create a new account with passkey
const account = await Account.create(
  { chainId: 1, apiKey: 'your-api-key' },
  { username: 'alice' }
);

// Option 3: Import from cloud backup
const account = await Account.import({ chainId: 1, apiKey: 'your-api-key' });

// Option 4: From a local account (server-side / embedded wallets)
const account = await Account.fromLocalAccount(
  { chainId: 1, apiKey: 'your-api-key' },
  localAccount
);
```

### Response
#### Success Response (200)
- **account** (Account) - An instance of the Account class.

#### Response Example
```json
{
  "account": "Account instance object"
}
```
```

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

### Revoke Permissions - With Callbacks (TypeScript)

Source: https://docs.jaw.id/wagmi/useRevokePermissions

Shows how to handle the success and error states of the revocation process using callbacks. This example integrates with a toast notification library (`sonner`) to provide user feedback.

```typescript
import { useRevokePermissions } from '@jaw.id/wagmi';
import { toast } from 'sonner';

function RevokeWithCallbacks() {
  const { mutate: revoke } = useRevokePermissions({
    mutation: {
      onSuccess: () => {
        toast.success('Permission revoked successfully');
      },
      onError: (error) => {
        toast.error(`Failed to revoke: ${error.message}`);
      },
    },
  });

  // ... other component logic
}
```

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

### Check Specific Capability (Paymaster)

Source: https://docs.jaw.id/wagmi/useCapabilities

This example illustrates how to check for a specific capability, such as `paymasterService`, for a given chain ID. It accesses the capabilities data and performs a type assertion to safely check the `supported` status.

```typescript
import { useCapabilities } from '@jaw.id/wagmi';

function PaymasterSupport() {
  const { data: capabilities } = useCapabilities();

  const supportsPaymaster = (chainId: string) => {
    const chainCaps = capabilities?.[chainId as `0x${string}`];
    return (chainCaps?.paymasterService as { supported?: boolean })?.supported === true;
  };

  return (
    <div>
      <p>Ethereum paymaster: {supportsPaymaster('0x1') ? 'Yes' : 'No'}</p>
      <p>Base paymaster: {supportsPaymaster('0x2105') ? 'Yes' : 'No'}</p>
    </div>
  );
}
```

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

### Format Transaction Value in Wei using Viem

Source: https://docs.jaw.id/account

Demonstrates how to format the `value` field in a `TransactionCall` to be in wei, the smallest unit of ETH. It shows examples using BigInt, hex strings, and the `parseEther` utility from the viem library.

```typescript
import { parseEther } from 'viem';

// BigInt (wei)
{ to: '0x...', value: 1000000000000000000n } // 1 ETH in wei

// Hex string (wei)
{ to: '0x...', value: '0x0de0b6b3a7640000' } // 1 ETH in wei

// Using parseEther for convenience
{ to: '0x...', value: parseEther('1') } // 1 ETH
{ to: '0x...', value: parseEther('0.1') } // 0.1 ETH
```

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

### Initialize SDK with defaultChainId directly

Source: https://docs.jaw.id/configuration/defaultChainId

Initializes the JAW.id SDK directly using the core provider, specifying the default chain ID. This example uses Ethereum Mainnet (1) as the default.

```javascript
import { JAW } from '@jaw.id/core';

const jaw = JAW.create({
  apiKey: 'your-api-key',
  defaultChainId: 1, // Mainnet
});
```

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

### Wallet Get Assets: Filter by Asset Type (ERC-20)

Source: https://docs.jaw.id/api-reference/wallet_getAssets

This example shows how to filter the results to include only ERC-20 tokens. By setting the `assetTypeFilter` parameter to `['erc20']`, the API will return only the ERC-20 assets for the specified account.

```javascript
// Only get ERC-20 tokens
const tokens = await jaw.provider.request({
  method: 'wallet_getAssets',
  params: [{
    account: '0x1234...',
    assetTypeFilter: ['erc20'],
  }],
});
```

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

### Revoke Permissions Parameters Example (JSON)

Source: https://docs.jaw.id/api-reference/wallet_revokePermissions

This JSON snippet illustrates the structure of the parameters required for the `wallet_revokePermissions` method, specifically showing the permission ID.

```json
[
  {
    "id": "0xabc123456def789..."
  }
]
```

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

### Filtering Assets by Chain ID using useGetAssets

Source: https://docs.jaw.id/wagmi/useGetAssets

Shows how to filter the assets returned by useGetAssets to only include those from a specific chain. This example fetches assets only for the Ethereum Mainnet (chain ID '0x1').

```javascript
import { useGetAssets } from '@jaw.id/wagmi';

function MainnetAssets() {
  const { data: assets } = useGetAssets({
    chainFilter: ['0x1'], // Mainnet only
  });

  // ... component logic to display assets
}
```

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

### Disconnect Wallet Account using Wagmi

Source: https://docs.jaw.id/guides/quickstart

This snippet provides a simple button component to disconnect the user's wallet from the JAW application using the `useDisconnect` hook from '@jaw.id/wagmi'. Clicking the button initiates the disconnection process, ending the current session.

```javascript
import { useDisconnect } from '@jaw.id/wagmi';

function DisconnectButton() {
  const { mutate: disconnect } = useDisconnect();

  return (
    <button onClick={() => disconnect({})}>
      Disconnect
    </button>
  );
}
```

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

### Initialize SDK with testnet defaultChainId directly

Source: https://docs.jaw.id/configuration/defaultChainId

Initializes the JAW.id SDK directly using the core provider, setting a testnet as the default chain ID and enabling testnet visibility. This example uses Base Sepolia (84532).

```javascript
import { JAW } from '@jaw.id/core';

const jaw = JAW.create({
  apiKey: 'your-api-key',
  defaultChainId: 84532, // Base Sepolia
  preference: {
    showTestnets: true,
  },
});
```

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

### Handle Ethereum Chain Switch Errors

Source: https://docs.jaw.id/api-reference/wallet_switchEthereumChain

This example shows how to handle potential errors when attempting to switch Ethereum chains. It specifically catches the 'Chain not supported' error (code 4902) and logs a message indicating that the chain is not supported.

```javascript
try {
  await jaw.provider.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0x2105' }], // Base
  });
  console.log('Switched to Base');
} catch (error) {
  if (error.code === 4902) {
    console.error('Base is not supported');
  }
}
```

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

### Sponsored (Gasless) Revocation with useRevokePermissions

Source: https://docs.jaw.id/wagmi/useRevokePermissions

This example demonstrates how to perform a gasless revocation of a permission using the `useRevokePermissions` hook. It configures a `paymasterService` with a provided URL, allowing the transaction to be sponsored and eliminating the need for the user to pay gas fees.

```javascript
import { useRevokePermissions } from '@jaw.id/wagmi';

function SponsoredRevoke({ permissionId }) {
  const { mutate: revoke, isPending } = useRevokePermissions();

  const handleRevoke = () => {
    revoke({
      id: permissionId,
      capabilities: {
        paymasterService: {
          url: 'https://your-paymaster.com/api',
        },
      },
    });
  };

  return (
    <button onClick={handleRevoke} disabled={isPending}>
      Revoke (Gasless)
    </button>
  );
}
```

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

### Non-React Actions for JAW Wallet Operations

Source: https://docs.jaw.id/wagmi

Provides examples of using JAW wallet actions directly in vanilla JavaScript or other frameworks, outside of React components. These actions mirror the functionality of the hooks.

```javascript
import { connect, disconnect, grantPermissions } from '@jaw.id/wagmi';

// Use with your wagmi config
// await connect(config, { connector: jawConnector });
```

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

### Implement Custom UI Handler with Vanilla JavaScript

Source: https://docs.jaw.id/advanced/custom-ui-handler

This comprehensive example shows how to build a custom UI handler using vanilla JavaScript. It implements the UIHandler interface to manage wallet connections, message signing, and transaction requests through a modal interface.

```javascript
import {
  UIHandler,
  UIRequest,
  UIResponse,
  UIHandlerConfig,
  UIError,
  ConnectUIRequest,
  SignatureUIRequest,
  TypedDataUIRequest,
  TransactionUIRequest,
} from '@jaw.id/core';

export class VanillaUIHandler implements UIHandler {
  private config?: UIHandlerConfig;
  private modalContainer: HTMLElement | null = null;

  init(config: UIHandlerConfig): void {
    this.config = config;
    // Create modal container
    this.modalContainer = document.createElement('div');
    this.modalContainer.id = 'jaw-modal-container';
    document.body.appendChild(this.modalContainer);
  }

  async request<T>(request: UIRequest): Promise<UIResponse<T>> {
    switch (request.type) {
      case 'wallet_connect':
        return this.handleConnect(request as ConnectUIRequest) as Promise<UIResponse<T>>;
      case 'personal_sign':
        return this.handleSign(request as SignatureUIRequest) as Promise<UIResponse<T>>;
      case 'eth_signTypedData_v4':
        return this.handleTypedData(request as TypedDataUIRequest) as Promise<UIResponse<T>>;
      case 'wallet_sendCalls':
        return this.handleTransaction(request as TransactionUIRequest) as Promise<UIResponse<T>>;
      default:
        throw UIError.unsupportedRequest(request.type);
    }
  }

  private async handleConnect(request: ConnectUIRequest): Promise<UIResponse<unknown>> {
    return new Promise((resolve) => {
      const modal = this.createModal(
        `
        <h2>Connect to ${request.data.appName}</h2>
        <p>Origin: ${request.data.origin}</p>
        <p>Chain ID: ${request.data.chainId}</p>
        <div class="buttons">
          <button id="approve">Connect</button>
          <button id="reject">Cancel</button>
        </div>
      `
      );

      modal.querySelector('#approve')?.addEventListener('click', async () => {
        this.closeModal();
        // Here you would trigger passkey authentication
        // and return the account data
        resolve({
          id: request.id,
          approved: true,
          data: {
            accounts: [{ address: '0x...' }],
          },
        });
      });

      modal.querySelector('#reject')?.addEventListener('click', () => {
        this.closeModal();
        resolve({
          id: request.id,
          approved: false,
          error: UIError.userRejected(),
        });
      });
    });
  }

  private async handleSign(request: SignatureUIRequest): Promise<UIResponse<string>> {
    return new Promise((resolve) => {
      // Decode hex message for display
      const message = Buffer.from(request.data.message.slice(2), 'hex').toString();

      const modal = this.createModal(
        `
        <h2>Sign Message</h2>
        <p>Address: ${request.data.address}</p>
        <pre>${message}</pre>
        <div class="buttons">
          <button id="approve">Sign</button>
          <button id="reject">Cancel</button>
        </div>
      `
      );

      modal.querySelector('#approve')?.addEventListener('click', async () => {
        this.closeModal();
        // Here you would sign the message with the user's passkey
        const signature = '0x...'; // Your signing logic
        resolve({
          id: request.id,
          approved: true,
          data: signature,
        });
      });

      modal.querySelector('#reject')?.addEventListener('click', () => {
        this.closeModal();
        resolve({
          id: request.id,
          approved: false,
          error: UIError.userRejected(),
        });
      });
    });
  }

  private async handleTypedData(request: TypedDataUIRequest): Promise<UIResponse<string>> {
    // Similar to handleSign but parse and display typed data
    // ...
  }

  private async handleTransaction(request: TransactionUIRequest): Promise<UIResponse<{ id: string; chainId: number }>> {
    // Display transaction details and ge
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.