JAW

https://jaw-docs.vercel.app
Admin
JAW SDK is a TypeScript library for integrating smart wallets with passkey authentication into...
Tokens:69,387
Snippets:447
Trust Score:7.8
Update:9 months ago
Show doc for...
Tokens:
Raw
### Usage Examples

Source: https://jaw-docs.vercel.app/configuration/paymasters

Examples demonstrating how to configure paymasters for different use cases, including basic setup, sponsorship policies, and multi-network configurations.

```APIDOC
## Examples

### Basic Configuration

```javascript
import { jaw } from '@jaw.id/wagmi';
 
const connector = jaw({
  apiKey: 'your-api-key',
  paymasters: {
    8453: { url: 'https://paymaster.etherspot.io/base' },
  },
});
```

### With Sponsorship Policy

```javascript
import { jaw } from '@jaw.id/wagmi';
 
const connector = jaw({
  apiKey: 'your-api-key',
  paymasters: {
    8453: {
      url: 'https://paymaster.etherspot.io/base',
      context: {
        sponsorshipPolicyId: 'sp_my_policy_id'
      }
    },
  },
});
```

### Multiple Networks

```javascript
import { jaw } from '@jaw.id/wagmi';
 
const connector = jaw({
  apiKey: 'your-api-key',
  paymasters: {
    1: { url: 'https://pm.etherspot.io/eth' },         // Ethereum Mainnet
    10: { url: 'https://pm.etherspot.io/op' },         // Optimism
    8453: { url: 'https://pm.etherspot.io/base' },     // Base
    42161: { url: 'https://pm.etherspot.io/arb' },     // Arbitrum
    84532: {
      url: 'https://pm.etherspot.io/base-sepolia',
      context: { sponsorshipPolicyId: 'sp_test_policy' }
    },
  },
});
```
```

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

### Install JAW Core SDK

Source: https://jaw-docs.vercel.app/guides/subscription

Installs the core JAW SDK along with viem for interacting with the blockchain. This is necessary for direct SDK integration.

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

```

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

```

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

```

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

```

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

### Connect Wallet and Send Transaction using Wagmi Hooks (React/TypeScript)

Source: https://jaw-docs.vercel.app/index

Demonstrates how to use wagmi hooks to manage wallet connections and send transactions. This example shows connecting/disconnecting, displaying the connected address, and initiating a simple ETH transaction. It utilizes 'useAccount', 'useConnect', 'useDisconnect', and 'useSendTransaction'.

```typescript
import { useAccount, useSendTransaction } from 'wagmi';
import { useConnect, useDisconnect } from '@jaw.id/wagmi';
import { parseEther } from 'viem';
 
function WalletButton() {
  const { address, isConnected } = useAccount();
  const { mutate: connect, isPending } = useConnect();
  const { mutate: disconnect } = useDisconnect();
  const { sendTransaction } = useSendTransaction();
 
  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => sendTransaction({
          to: '0x...',
          value: parseEther('0.01')
        })}>
          Send ETH
        </button>
        <button onClick={() => disconnect({})}>
          Disconnect
        </button>
      </div>
    );
  }
 
  return (
    <button
      onClick={() => connect({ connector: config.connectors[0] })}
      disabled={isPending}
    >
      {isPending ? 'Connecting...' : 'Connect Wallet'}
    </button>
  );
}
```

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

### Create JAW Provider Instance - JavaScript

Source: https://jaw-docs.vercel.app/index

Demonstrates how to create a JAW provider instance for non-React applications or advanced use cases. It initializes JAW with an API key and app name, then uses the provider to request wallet connection. Requires the '@jaw.id/core' package.

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

const jaw = JAW.create({
  apiKey: 'your-api-key',
  appName: 'My DApp',
});

// EIP-1193 compatible provider
const accounts = await jaw.provider.request({
  method: 'wallet_connect',
});
```

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

### Batch Transactions Example with useSendCalls (TypeScript)

Source: https://jaw-docs.vercel.app/index

Demonstrates how to execute multiple blockchain calls atomically using wagmi's `useSendCalls` hook. This is useful for complex operations requiring all sub-transactions to succeed or fail together. Ensure that `USDC_ADDRESS` and `erc20Abi` are defined and accessible in your scope.

```typescript
import { useSendCalls } from 'wagmi';
import { encodeFunctionData } from 'viem';
 
function BatchTransfer() {
  const { sendCalls, isPending } = useSendCalls();
 
  const handleBatchTransfer = () => {
    sendCalls({
      calls: [
        {
          to: USDC_ADDRESS,
          data: encodeFunctionData({
            abi: erc20Abi,
            functionName: 'transfer',
            args: ['0xAlice...', 1000000n],
          }),
        },
        {
          to: USDC_ADDRESS,
          data: encodeFunctionData({
            abi: erc20Abi,
            functionName: 'transfer',
            args: ['0xBob...', 2000000n],
          }),
        },
      ],
    });
  };
 
  return (
    <button onClick={handleBatchTransfer} disabled={isPending}>
      {isPending ? 'Sending...' : 'Send to Alice & Bob'}
    </button>
  );
}
```

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

### Configure Wagmi with JAW Connector (TypeScript)

Source: https://jaw-docs.vercel.app/index

Sets up the wagmi configuration by integrating the JAW connector. This involves importing necessary modules from 'wagmi' and '@jaw.id/wagmi', defining chains, and providing your API key and application details. Ensure you replace placeholder values with your actual credentials.

```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 DApp',
      appLogoUrl: 'https://my-dapp.com/logo.png',
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
  },
});
```

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

### wallet_getCapabilities Response Example

Source: https://jaw-docs.vercel.app/api-reference/wallet_getCapabilities

Provides an example of the JSON response structure returned by the `wallet_getCapabilities` method. The response is keyed by chain ID and details supported features and fee token information for each chain.

```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
        }
      ]
    }
  }
}
```

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

### Set Up Wagmi Providers in React App (TypeScript)

Source: https://jaw-docs.vercel.app/index

Wraps your application with the necessary providers for wagmi and react-query. This ensures that wagmi hooks and query functionalities are available throughout your component tree. Import 'WagmiProvider' and 'QueryClientProvider' and pass the configured wagmi config.

```typescript
// App.tsx
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { config } from './config';
 
const queryClient = new QueryClient();
 
function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

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

### Example Parameters for wallet_showCallsStatus

Source: https://jaw-docs.vercel.app/api-reference/wallet_showCallsStatus

Provides an example of the parameters expected by the wallet_showCallsStatus method. The parameter is a string representing the batch ID.

```json
["0x123abc456def..."]
```

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

### Sign-In With Ethereum (SIWE) Example

Source: https://jaw-docs.vercel.app/api-reference/wallet_sign

This example demonstrates signing a Sign-In With Ethereum (SIWE) message using `wallet_sign`. It formats the SIWE message as a UTF-8 string and sets `request.type` to '0x45' for personal message signing. The generated signature can be used for authentication.

```javascript
const siweMessage = `example.com wants you to sign in with your Ethereum account:
0x1234...
 
Sign in to Example DApp
 
URI: https://example.com
Version: 1
Chain ID: 1
Nonce: ${crypto.randomUUID()}
Issued At: ${new Date().toISOString()}`;
 
const signature = await jaw.provider.request({
  method: 'wallet_sign',
  params: [{
    request: {
      type: '0x45',
      data: {
        message: siweMessage, // UTF-8 message string
      },
    },
  }],
});
```

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

### Full Wallet Component Example

Source: https://jaw-docs.vercel.app/wagmi/useDisconnect

A comprehensive example of a WalletButton component that uses both useConnect and useDisconnect hooks to manage wallet connection and disconnection, displaying the user's address when connected.

```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>
  );
}
```

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

### Basic useGrantPermissions Example

Source: https://jaw-docs.vercel.app/wagmi/useGrantPermissions

Demonstrates the basic usage of the useGrantPermissions hook. It shows how to call the `grant` function with expiry, spender, and permissions details, and how to display the granted permission ID upon success.

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

function GrantPermissionButton() {
  const { mutate: grant, isPending, data } = useGrantPermissions();

  const handleGrant = () => {
    grant({
      expiry: Math.floor(Date.now() / 1000) + 86400 * 7, // 1 week
      spender: '0xAutomatedBot...',
      permissions: {
        calls: [
          {
            target: ROUTER_ADDRESS,
            selector: '0x38ed1739', // swapExactTokensForTokens
          },
        ],
        spends: [
          {
            token: USDC_ADDRESS,
            limit: '500000000', // 500 USDC
            period: 'week',
          },
        ],
      },
    });
  };

  return (
    <div>
      <button onClick={handleGrant} disabled={isPending}>
        {isPending ? 'Granting...' : 'Grant Permission'}
      </button>
      {data && <p>Permission ID: {data.permissionId}</p>}
    </div>
  );
}
```

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

### Install @jaw.id/wagmi and Dependencies

Source: https://jaw-docs.vercel.app/wagmi

Installs the necessary packages for JAW Wagmi integration, including wagmi, viem, and @tanstack/react-query. These are required for setting up the Wagmi configuration and using React hooks.

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

```shell
pnpm add @jaw.id/wagmi wagmi viem @tanstack/react-query
```

```shell
yarn add @jaw.id/wagmi wagmi viem @tanstack/react-query
```

```shell
bun add @jaw.id/wagmi wagmi viem @tanstack/react-query
```

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

### Example: Granting DeFi Swap Permissions - JavaScript

Source: https://jaw-docs.vercel.app/api-reference/wallet_grantPermissions

An extended JavaScript example demonstrating how to grant permissions for a DeFi protocol to perform swaps. It sets a one-year expiry, specifies the spender, allows calls to 'approve' and 'swap' functions on specific contract addresses, and sets a daily spending limit for a particular token.

```javascript
// Allow DeFi protocol to swap USDC with daily limit
const permission = await jaw.provider.request({
  method: 'wallet_grantPermissions',
  params: [{
    expiry: Math.floor(Date.now() / 1000) + (365 * 24 * 60 * 60), // 1 year
    spender: dexRouterAddress,
    permissions: {
      calls: [{
        target: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
        functionSignature: 'approve(address,uint256)',
      }, {
        target: dexRouterAddress,
        functionSignature: 'swap(address,address,uint256,uint256)',
      }],
      spends: [{
        token: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
        allowance: '0x' + (1000n * 10n**6n).toString(16),
        unit: 'day',
      }],
    },
    // chainId: '0x1', // Optional - defaults to connected chain
  }],
});
```

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

### Install WagmiCore SDK

Source: https://jaw-docs.vercel.app/guides/subscription

Installs the necessary packages for integrating JAW's WagmiCore SDK with your project. Dependencies include wagmi, viem, and @tanstack/react-query.

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

```

```bash
pnpm add @jaw.id/wagmi wagmi viem @tanstack/react-query

```

```bash
yarn add @jaw.id/wagmi wagmi viem @tanstack/react-query

```

```bash
bun add @jaw.id/wagmi wagmi viem @tanstack/react-query

```

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

### Example eth_requestAccounts Usage

Source: https://jaw-docs.vercel.app/api-reference/eth_requestAccounts

An example illustrating the usage of eth_requestAccounts within a broader application context, including importing the JAW library and creating an instance. It shows how to obtain the connected accounts.

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

const jaw = JAW.create({
  apiKey: 'your-api-key',
});

const accounts = await jaw.provider.request({
  method: 'eth_requestAccounts',
});
```

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

### Simple Wallet Connect Request - JavaScript

Source: https://jaw-docs.vercel.app/api-reference/wallet_connect

Provides an example of a basic `wallet_connect` request without specifying any advanced capabilities. This is useful for straightforward account connection scenarios.

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

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

### Configure appLogoUrl with Wagmi

Source: https://jaw-docs.vercel.app/configuration/appLogoUrl

This snippet demonstrates how to configure the `appLogoUrl` when using Wagmi. It shows the import statement and the initialization of the `jaw` connector with the `appLogoUrl` parameter. Ensure you have `@jaw.id/wagmi` installed.

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

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

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

### Setup WagmiCore SDK Configuration

Source: https://jaw-docs.vercel.app/guides/subscription

Configures the Wagmi SDK to include JAW as a connector. This setup involves specifying the Base chain and initializing the JAW connector with your application details and API key.

```typescript
import { createConfig, http } from 'wagmi';
import { base } from 'wagmi/chains';
import { jaw } from '@jaw.id/wagmi';
 
export const config = createConfig({
  chains: [base],
  connectors: [
    jaw({
      apiKey: 'YOUR_API_KEY',
      appName: 'My Streaming Service',
      appLogoUrl: 'https://myservice.com/logo.png',
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});

```

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

### Disconnect with Callback Example

Source: https://jaw-docs.vercel.app/wagmi/useDisconnect

This example shows how to use the useDisconnect hook with mutation callbacks, specifically the onSuccess callback to log a success message after disconnection.

```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>;
}
```

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

### Example Usage of wallet_showCallsStatus with Dynamic Batch ID

Source: https://jaw-docs.vercel.app/api-reference/wallet_showCallsStatus

Shows an example of how to use wallet_showCallsStatus with a dynamically obtained batch ID, likely from a previous operation like wallet_sendCalls. This requires the 'jaw' object and an authenticated provider.

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

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

### Example Response for wallet_revokePermissions (JSON)

Source: https://jaw-docs.vercel.app/api-reference/wallet_revokePermissions

This JSON object shows an example response from the `wallet_revokePermissions` RPC method. It indicates the success of the revocation operation. A `success` field with a boolean value is returned.

```json
{
  "success": true
}
```

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

### Request wallet_getCapabilities

Source: https://jaw-docs.vercel.app/api-reference/wallet_getCapabilities

Demonstrates how to call the `wallet_getCapabilities` method to retrieve wallet capabilities. It shows examples with and without specific chain ID filters. This method does not require authentication.

```javascript
await jaw.provider.request({
  method: 'wallet_getCapabilities',
  params: ['0x1234...', ['0x1', '0x2105']],
});
```

```javascript
await jaw.provider.request({
  method: 'wallet_getCapabilities',
});
```

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

### Basic Disconnect Button Example

Source: https://jaw-docs.vercel.app/wagmi/useDisconnect

A basic example demonstrating how to use the useDisconnect hook to create a button that disconnects the wallet. It utilizes useAccount to check connection status and disables the button while disconnecting.

```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>
  );
}
```

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

### Install JAW UI Packages

Source: https://jaw-docs.vercel.app/configuration/preference

Commands to install the necessary `@jaw/ui` and `@jaw.id/core` packages for integrating JAW SDK with React UI handlers. Supports npm, pnpm, yarn, and bun package managers.

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

```bash
pnpm add @jaw/ui @jaw.id/core
```

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

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

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

### useGrantPermissions with Callbacks Example

Source: https://jaw-docs.vercel.app/wagmi/useGrantPermissions

Illustrates how to use the `mutation` options with the useGrantPermissions hook to define `onSuccess` and `onError` callbacks. This allows for handling the results and errors of the permission granting process.

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

function GrantWithCallbacks() {
  const { mutate: grant } = useGrantPermissions({
    mutation: {
      onSuccess: (data) => {
        console.log('Permission granted:', data.permissionId);
        // Store permission ID for later revocation
      },
      onError: (error) => {
        console.error('Failed to grant permission:', error);
      },
    },
  });

  // ...
}
```

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

### Minimal JAW SDK Configuration

Source: https://jaw-docs.vercel.app/configuration

Illustrates the most basic configuration required for the JAW SDK. It highlights that the 'apiKey' is the sole mandatory parameter for both the Wagmi connector and the direct provider initialization, simplifying initial setup.

```javascript
// Wagmi
const connector = jaw({ apiKey: 'your-api-key' });

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

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

### Get Smart Account Address (JavaScript)

Source: https://jaw-docs.vercel.app/account/getAddress

This example demonstrates how to import the Account class, instantiate it, and then use the getAddress() method to retrieve the smart account's address. It logs the obtained address to the console. Ensure you have the '@jaw.id/core' library installed.

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

const account = await Account.get({
  chainId: 1,
  apiKey: 'your-api-key',
});

const address = await account.getAddress();
console.log('Address:', address);
```

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

### Basic Connection Example (React)

Source: https://jaw-docs.vercel.app/wagmi/useConnect

Demonstrates a basic implementation of the useConnect hook in a React component to connect a user's wallet. It uses the `jaw` connector and conditionally renders UI elements based on connection status.

```javascript
import { useAccount } from 'wagmi';
import { useConnect, jaw } from '@jaw.id/wagmi';
 
function ConnectButton() {
  const { isConnected } = useAccount();
  const { mutate: connect, isPending } = useConnect();
 
  if (isConnected) return <p>Connected!</p>;
 
  return (
    <button
      onClick={() => connect({ connector: jaw({ apiKey: '...' }) })}
      disabled={isPending}
    >
      {isPending ? 'Connecting...' : 'Connect'}
    </button>
  );
}
```

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

### Import JAW-Specific Hooks (TypeScript)

Source: https://jaw-docs.vercel.app/index

Imports hooks specifically provided by the JAW SDK for managing permissions and advanced connection options. These hooks are essential for leveraging JAW's unique features beyond standard wallet interactions. Ensure you have installed the JAW SDK.

```typescript
import {
  useConnect,
  useDisconnect,
  useGrantPermissions,
  usePermissions,
  useRevokePermissions
} from '@jaw.id/wagmi';
```

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

### Get Account Instance for Signing

Source: https://jaw-docs.vercel.app/account/signTypedData

Demonstrates how to obtain an Account instance, which is a prerequisite for calling methods like signTypedData(). It shows four common methods: restoring an existing session, creating a new account with a passkey, importing from cloud backup, and creating from a local account.

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

async function getAccountInstances() {
  // Option 1: Restore existing session or login with passkey
  const account1 = await Account.get({ chainId: 1, apiKey: 'your-api-key' });
  console.log('Account restored or logged in:', account1);

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

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

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

// getAccountInstances();

```

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

### Account Creation with Custom RP Settings

Source: https://jaw-docs.vercel.app/account/create

This example shows how to create an account with custom relying party (RP) settings, including rpId and rpName. These settings customize the passkey creation prompt presented to the user.

```javascript
const account = await Account.create(
  { chainId: 1, apiKey: 'your-api-key' },
  {
    username: 'alice',
    rpId: 'myapp.com',
    rpName: 'My Awesome App',
  }
);
```

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

### Get Account Instance and Call Status

Source: https://jaw-docs.vercel.app/account/getCallStatus

Demonstrates how to get an account instance using different methods and then retrieve the call status for a given batch ID. This requires the '@jaw.id/core' library and assumes prior setup of account instances.

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

// Assuming 'account' is an initialized Account instance

// Example: Sending calls and getting the batch ID
const { id } = await account.sendCalls([
  { to: '0x...', value: parseEther('0.1') }
]);

// Check status immediately
const status = account.getCallStatus(id);

console.log(status);
```

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

### Setup JAW Core SDK

Source: https://jaw-docs.vercel.app/guides/subscription

Initializes the JAW Core SDK with your application's name, logo, default chain ID, API key, and preference for app-specific mode. This provides a direct interface for JAW functionalities.

```typescript
import { JAW, Mode } from '@jaw.id/core';
 
const jaw = JAW.create({
  appName: 'My Streaming Service',
  appLogoUrl: 'https://myservice.com/logo.png',
  defaultChainId: 8453,
  apiKey: 'YOUR_API_KEY',
  preference: { mode: Mode.AppSpecific },
});

```

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

### Get Account Metadata - TypeScript Example

Source: https://jaw-docs.vercel.app/account/getMetadata

Demonstrates how to retrieve account metadata using account.getMetadata(). It shows how to instantiate an account, call the method, and handle the returned metadata or null value for local accounts. Requires the '@jaw.id/core' library.

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

const account = await Account.get({
  chainId: 1,
  apiKey: 'your-api-key',
});

const metadata = account.getMetadata();

if (metadata) {
  console.log('Username:', metadata.username);
  console.log('Created:', metadata.creationDate);
  console.log('Imported:', metadata.isImported);
} else {
  console.log('Local account - no metadata available');
}
```

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

### Enable Testnet Networks in Chain List (Wagmi & EIP-1193)

Source: https://jaw-docs.vercel.app/configuration/preference

This code shows how to configure the `showTestnets` option to include testnet networks in the list of available chains. This is useful for development and testing purposes. Examples are provided for both Wagmi and EIP-1193 provider setups.

```typescript
import { jaw } from '@jaw.id/wagmi';
 
const connector = jaw({
  apiKey: 'your-api-key',
  preference: {
    showTestnets: true,
  },
});
```

```typescript
import { JAW } from '@jaw.id/core';
 
const jaw = JAW.create({
  apiKey: 'your-api-key',
  preference: {
    showTestnets: true,
  },
});
```

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

### Basic Account Creation with Passkey

Source: https://jaw-docs.vercel.app/account/create

This example demonstrates the basic usage of Account.create() to create a new account using a passkey. It requires a chain ID, API key, and a username. It returns an Account instance, and logs the account address and username.

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

const account = await Account.create(
  { chainId: 1, apiKey: 'your-api-key' },
  { username: 'alice' }
);

console.log('Created account:', account.address);
console.log('Username:', account.getMetadata()?.username);
```

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

### Basic Portfolio Display with useGetAssets

Source: https://jaw-docs.vercel.app/wagmi/useGetAssets

A complete example demonstrating the basic usage of the `useGetAssets` hook within a React component to display a user's cryptocurrency portfolio. It includes handling connection status, loading states, and formatting asset data.

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

function Portfolio() {
  const { isConnected } = useAccount();
  const { data: assets, isLoading } = useGetAssets();

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

  return (
    <div>
      {Object.entries(assets || {}).map(([chainId, chainAssets]) => (
        <div key={chainId}>
          <h3>Chain {parseInt(chainId, 16)}</h3>
          <ul>
            {chainAssets.map((asset, i) => (
              <li key={i}>
                {asset.metadata?.symbol || 'Unknown'}: {' '}
                {formatUnits(
                  BigInt(asset.balance),
                  asset.metadata?.decimals || 18
                )}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}
```

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

### Grant Permissions Response - JSON

Source: https://jaw-docs.vercel.app/api-reference/wallet_grantPermissions

Example of a successful response from the wallet_grantPermissions RPC method. It includes details of the granted permissions such as the account, spender, start and end times, salt, call details (target and selector), spend limits, the generated permission ID, and the chain ID.

```json
{
  "account": "0x1234567890123456789012345678901234567890",
  "spender": "0x5678901234567890123456789012345678901234",
  "start": 1704067200,
  "end": 1735689600,
  "salt": "0x1a2b3c...",
  "calls": [{
    "target": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
    "selector": "0xa9059cbb"
  }],
  "spends": [{
    "token": "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
    "allowance": "0x16345785d8a0000",
    "unit": "day",
    "multiplier": 1
  }],
  "permissionId": "0xabc123...",
  "chainId": "0x1"
}
```

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

### Configure JAW SDK with CrossPlatform Mode (Wagmi & EIP-1193)

Source: https://jaw-docs.vercel.app/configuration/preference

Illustrates initializing the JAW SDK using the CrossPlatform mode for authentication. This mode redirects passkey operations to keys.jaw.id, enabling wallet reuse across applications. Examples are provided for Wagmi and EIP-1193 provider setups.

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

const connector = jaw({
  apiKey: 'your-api-key',
  preference: {
    mode: Mode.CrossPlatform,
  },
});
```

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

const jaw = JAW.create({
  apiKey: 'your-api-key',
  preference: {
    mode: Mode.CrossPlatform,
  },
});
```

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

### Wagmi Configuration with App-Specific Mode JAW Connector

Source: https://jaw-docs.vercel.app/wagmi/jaw

Illustrates configuring Wagmi with the JAW connector in 'App-Specific' mode. This example highlights setting the `mode` to `Mode.AppSpecific` and providing a `ReactUIHandler` for custom UI management within the application's origin. It also mentions the need to install `@jaw/ui` for React projects.

```javascript
import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { jaw } from '@jaw.id/wagmi';
import { Mode } from '@jaw.id/core';
import { ReactUIHandler } from '@jaw/ui';
 
const config = createConfig({
  chains: [mainnet],
  connectors: [
    jaw({
      apiKey: 'YOUR_API_KEY',
      appName: 'My App',
      preference: {
        mode: Mode.AppSpecific,
        uiHandler: new ReactUIHandler(),
      },
    }),
  ],
  transports: {
    [mainnet.id]: http(),
  },
});
```

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

### Configure JAW SDK with AppSpecific Mode and ReactUIHandler (Wagmi & EIP-1193)

Source: https://jaw-docs.vercel.app/configuration/preference

Shows how to configure the JAW SDK with AppSpecific mode and `ReactUIHandler` for seamless integration within React applications. This ensures passkey operations occur within the dApp's origin and provides a custom UI experience. Examples are provided for Wagmi and EIP-1193 provider setups.

```javascript
import { jaw } from '@jaw.id/wagmi';
import { Mode } from '@jaw.id/core';
import { ReactUIHandler } from '@jaw/ui';

const connector = jaw({
  apiKey: 'your-api-key',
  preference: {
    mode: Mode.AppSpecific,
    uiHandler: new ReactUIHandler(),
  },
});
```

```javascript
import { JAW, Mode } from '@jaw.id/core';
import { ReactUIHandler } from '@jaw/ui';

const jaw = JAW.create({
  apiKey: 'your-api-key',
  preference: {
    mode: Mode.AppSpecific,
    uiHandler: new ReactUIHandler(),
  },
});
```

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

### Disconnect Specific Connector Example

Source: https://jaw-docs.vercel.app/wagmi/useDisconnect

An example demonstrating how to disconnect a specific connector using the useDisconnect hook by passing the connector object in the mutation variables.

```javascript
import { useDisconnect, jaw } from '@jaw.id/wagmi';
 
function DisconnectButton() {
  const { mutate: disconnect } = useDisconnect();
  const connector = jaw({ apiKey: '...' });
 
  // Disconnect only this specific connector
  return (
    <button onClick={() => disconnect({ connector })}>
      Disconnect JAW
    </button>
  );
}
```

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

### Minimal Wagmi Configuration with JAW Connector

Source: https://jaw-docs.vercel.app/wagmi/jaw

Demonstrates a basic setup for Wagmi's `createConfig`. It includes importing necessary modules (`createConfig`, `http`, `mainnet`, `jaw`), and configuring the JAW connector with a required `apiKey`.

```javascript
import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { jaw } from '@jaw.id/wagmi';
 
const config = createConfig({
  chains: [mainnet],
  connectors: [
    jaw({ apiKey: 'YOUR_API_KEY' }),
  ],
  transports: {
    [mainnet.id]: http(),
  },
});
```

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

### Request Connection with Capabilities - JavaScript

Source: https://jaw-docs.vercel.app/api-reference/wallet_connect

Demonstrates how to request a wallet connection using the `wallet_connect` method, including optional capabilities such as `signInWithEthereum` and `subnameTextRecords`. This method triggers an authentication flow and returns connection details upon success.

```javascript
await jaw.provider.request({
  method: 'wallet_connect',
  params: [{
    capabilities: {
      signInWithEthereum: {
        nonce: 'abc123xyz789',
        chainId: '0x1',
        domain: 'my-dapp.com',
        uri: 'https://my-dapp.com',
        statement: 'Sign in to My DApp with your JAW account'
      },
      subnameTextRecords: [
        { key: 'avatar', value: 'https://my-dapp.com/avatars/1.png' },
        { key: 'description', value: 'Premium member' }
      ]
    }
  }],
});
```

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

### Account.import() API Documentation

Source: https://jaw-docs.vercel.app/account/import

Import a passkey from cloud backup to create a smart account. This method handles WebAuthn authentication and returns the imported Account instance.

```APIDOC
## Account.import()

### Description
Import a passkey from cloud backup. This method triggers WebAuthn authentication, allowing the user to select a passkey synced across their devices, and then creates a new smart account from it.

### Method
`static async`

### Endpoint
N/A (This is a client-side method)

### Parameters
#### Request Body
- **config** (`AccountConfig`) - Required - Configuration object for importing the account.
  - **chainId** (`number`) - Required - Chain ID for the account.
  - **apiKey** (`string`) - Required - API key for JAW services.
  - **paymasterUrl** (`string`) - Optional - Custom paymaster URL for gas sponsorship.

### Request Example
```json
{
  "config": {
    "chainId": 1,
    "apiKey": "your-api-key",
    "paymasterUrl": "optional-paymaster-url"
  }
}
```

### Response
#### Success Response (Account)
- **address** (`string`) - The address of the newly imported smart account.
- **metadata** (`object`) - Metadata associated with the account, including `isImported: true`.

#### Response Example
```json
{
  "address": "0x123...abc",
  "metadata": {
    "isImported": true
  }
}
```

### Errors
- **WebAuthn errors**: User cancelled the WebAuthn prompt or the browser does not support WebAuthn.
- **`Failed to retrieve imported passkey account`**: An error occurred during the backend lookup for the imported passkey account.
```

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

### Connection with SIWE (React)

Source: https://jaw-docs.vercel.app/wagmi/useConnect

Illustrates connecting a wallet and simultaneously requesting a Sign-In with Ethereum (SIWE) signature. This is useful for user authentication and verification.

```javascript
import { useConnect, jaw } from '@jaw.id/wagmi';
 
function ConnectWithSIWE() {
  const { mutate: connect, data, isPending } = useConnect();
 
  const handleConnect = () => {
    connect({
      connector: jaw({ apiKey: '...' }),
      capabilities: {
        signInWithEthereum: {
          nonce: crypto.randomUUID(),
          chainId: '0x1',
          domain: window.location.host,
          uri: window.location.origin,
          statement: 'Sign in to My DApp',
        },
      },
    });
  };
 
  return (
    <div>
      <button onClick={handleConnect} disabled={isPending}>
        Sign In with Ethereum
      </button>
      {data && (
        <div>
          <p>Connected: {data.accounts[0].address}</p>
          <p>SIWE Signature: {data.accounts[0].capabilities?.signInWithEthereum?.signature}</p>
        </div>
      )}
    </div>
  );
}
```

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

### Example Parameters for wallet_revokePermissions (JSON)

Source: https://jaw-docs.vercel.app/api-reference/wallet_revokePermissions

This JSON object represents the example parameters for the `wallet_revokePermissions` RPC method. It includes the `id` field, which is a string representing the permission ID to be revoked. This parameter is required for the method to execute correctly.

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

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

### Full Wagmi Configuration with JAW Connector

Source: https://jaw-docs.vercel.app/wagmi/jaw

Provides a comprehensive example of Wagmi's `createConfig` with the JAW connector. It showcases the use of multiple chains, detailed connector parameters like `appName`, `appLogoUrl`, `defaultChainId`, `ens`, `preference`, and `paymasters`.

```javascript
import { createConfig, http } from 'wagmi';
import { mainnet, base, baseSepolia } from 'wagmi/chains';
import { jaw } from '@jaw.id/wagmi';
 
const config = createConfig({
  chains: [mainnet, base, baseSepolia],
  connectors: [
    jaw({
      apiKey: 'YOUR_API_KEY',
      appName: 'My DApp',
      appLogoUrl: 'https://example.com/logo.png',
      defaultChainId: 8453, // Base
      ens: 'myapp.eth',
      preference: {
        showTestnets: true,
      },
      paymasters: {
        8453: { url: 'https://my-paymaster.com/base' },
        84532: { url: 'https://my-paymaster.com/base-sepolia' },
      },
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [baseSepolia.id]: http(),
  },
});
```

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

### Sign a Sign-In with Ethereum (SIWE) Message with account.signMessage()

Source: https://jaw-docs.vercel.app/account/signMessage

This example shows how to construct a SIWE message and then sign it using the account.signMessage() method. The generated signature, along with the original message and address, can then be sent to a backend for verification.

```javascript
// Construct SIWE message
const siweMessage = `myapp.com wants you to sign in with your Ethereum account:
${account.address}

Sign in to MyApp

URI: https://myapp.com
Version: 1
Chain ID: 1
Nonce: ${generateNonce()}
Issued At: ${new Date().toISOString()}`;

const signature = await account.signMessage(siweMessage);

// Send to backend for verification
await fetch('/api/verify-siwe', {
  method: 'POST',
  body: JSON.stringify({
    message: siweMessage,
    signature,
    address: account.address,
  }),
});
```

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

### Full Example Usage of wallet_revokePermissions (JavaScript)

Source: https://jaw-docs.vercel.app/api-reference/wallet_revokePermissions

This JavaScript code provides a complete example of how to use the `wallet_revokePermissions` RPC method. It defines a `permissionId` and then calls the `jaw.provider.request` method with the appropriate parameters to revoke the permission. The result of the operation is stored in the `result` variable.

```javascript
const permissionId = '0xabc123...';
 
const result = await jaw.provider.request({
  method: 'wallet_revokePermissions',
  params: [{
    id: permissionId,
  }],
});
```

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

### Get Chain Configuration using JavaScript

Source: https://jaw-docs.vercel.app/account/getChain

This snippet demonstrates how to retrieve the chain configuration from an account instance. It imports the Account class, initializes an account, calls getChain() to get the chain object, and then logs the chain's ID, RPC URL, and paymaster URL.

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

const account = await Account.get({
  chainId: 1,
  apiKey: 'your-api-key',
});

const chain = account.getChain();

console.log('Chain ID:', chain.id);
console.log('RPC URL:', chain.rpcUrl);
console.log('Paymaster URL:', chain.paymasterUrl);
```

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

### Setting Up Allowed Domains

Source: https://jaw-docs.vercel.app/configuration/apiKey

Guidance on configuring allowed domains for your API key to enhance security.

```APIDOC
## Setting Up Allowed Domains

### Description
Configure which domains are permitted to use your API key for security purposes. Requests from unlisted domains will be rejected.

### Method
N/A (Manual Process)

### Endpoint
N/A (Manual Process)

### Parameters

#### Request Body (Conceptual)
- **Allowed Domains** (Array<string>) - Required - A list of domains permitted to use the API key (e.g., `localhost`, `yourdomain.com`, `staging.yourdomain.com`).

### Request Example
N/A

### Response
N/A

### Steps
1. In the JAW Dashboard, navigate to your API key settings.
2. Find the **Allowed Domains** section.
3. Add the domains where your application will run.
```

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

### Account Instance Creation for estimateGas()

Source: https://jaw-docs.vercel.app/account/estimateGas

Before calling instance methods like estimateGas, you need to create an account instance. Several factory methods are available for restoring existing sessions, creating new accounts with passkeys, importing from cloud backups, or using local accounts.

```typescript
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
);
```

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

### Getting an API Key

Source: https://jaw-docs.vercel.app/configuration/apiKey

Instructions on how to obtain your JAW API key from the JAW Dashboard.

```APIDOC
## How to Get an API Key

### Description
Steps to generate a new API key from the JAW Dashboard.

### Method
N/A (Manual Process)

### Endpoint
N/A (Manual Process)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

### Steps
1. Visit the JAW Dashboard.
2. Create a new project or select an existing one.
3. Navigate to the API Keys section.
4. Generate a new API key.
```
Tokens:
Raw