From 3b13de8c638385be70ec170efbe1b8e6e3ac3c27 Mon Sep 17 00:00:00 2001 From: LeoFranklin015 Date: Mon, 2 Mar 2026 18:48:59 +0530 Subject: [PATCH 1/3] docs: add JAW to tooling --- docs.json | 9 + tooling/libraries-sdks/celo-sdks.mdx | 1 + tooling/libraries-sdks/jaw/index.mdx | 362 +++++++++++++++++++++++++++ tooling/wallets/index.mdx | 10 + 4 files changed, 382 insertions(+) create mode 100644 tooling/libraries-sdks/jaw/index.mdx diff --git a/docs.json b/docs.json index 1066642c9..25f4fbad0 100644 --- a/docs.json +++ b/docs.json @@ -321,6 +321,7 @@ "tooling/libraries-sdks/reown/index", "tooling/libraries-sdks/dynamic/index", "tooling/libraries-sdks/portal/index", + "tooling/libraries-sdks/jaw/index", { "group": "ContractKit", "pages": [ @@ -2595,6 +2596,10 @@ "source": "/developer/portal/:slug*", "destination": "/tooling/libraries-sdks/portal/:slug*" }, + { + "source": "/developer/jaw/:slug*", + "destination": "/tooling/libraries-sdks/jaw/:slug*" + }, { "source": "/developer/rainbowkit-celo/:slug*", "destination": "/tooling/libraries-sdks/rainbowkit-celo/:slug*" @@ -2955,6 +2960,10 @@ "source": "/developer/portal", "destination": "/tooling/libraries-sdks/portal" }, + { + "source": "/developer/jaw", + "destination": "/tooling/libraries-sdks/jaw" + }, { "source": "/developer/rainbowkit-celo", "destination": "/tooling/libraries-sdks/rainbowkit-celo" diff --git a/tooling/libraries-sdks/celo-sdks.mdx b/tooling/libraries-sdks/celo-sdks.mdx index 238236ec0..da7bc39e2 100644 --- a/tooling/libraries-sdks/celo-sdks.mdx +++ b/tooling/libraries-sdks/celo-sdks.mdx @@ -22,3 +22,4 @@ Because Celo is compatible with Ethereum any ethereum package can be used with C - [Reown](/developer/reown) - [Portal](/developer/portal) +- [JAW](/developer/jaw) diff --git a/tooling/libraries-sdks/jaw/index.mdx b/tooling/libraries-sdks/jaw/index.mdx new file mode 100644 index 000000000..9be061ec5 --- /dev/null +++ b/tooling/libraries-sdks/jaw/index.mdx @@ -0,0 +1,362 @@ +--- +title: Build with JAW +og:description: Smart account infrastructure for Celo with passkey authentication, ENS identity, gasless transactions, and programmable permissions. +sidebarTitle: "JAW" +--- + +[JAW](https://jaw.id/) provides smart account infrastructure for Celo applications. Give users passkey-secured accounts with ENS identity, sponsor their gas, and enable programmable permissions for subscriptions and delegated agent execution. + +## Key Features + +- **Passkey authentication**: phishing-resistant, synced across devices via iCloud/Google (works as transport layer) +- **ERC-4337 smart accounts**: gasless, batchable, and programmable +- **EIP-1193 compatible**: drop-in replacement for MetaMask or any injected wallet +- **Delegated permissions**: let contracts or agents perform scoped actions (ERC-7715) +- **ENS subname issuance**: assign human-readable identities on onboarding +- **Headless/server-side support**: AI agent wallets or backend-triggered transactions + +## Getting Started + +Get an API key from the [JAW Dashboard](https://dashboard.jaw.id) and add your domain to the allowed list. Use `localhost` for local development, your production domain for production. + +**`@jaw.id/wagmi`**: React connector with wagmi hooks. Use this for React and Next.js apps. +**`@jaw.id/core`**: Framework-agnostic EIP-1193 provider. Use this for vanilla JS, server-side, or headless environments. + + + + +**Installation** + +```bash +npm install @jaw.id/wagmi wagmi @tanstack/react-query +``` + +**Configure** + +Create your wagmi config with the JAW connector, then wrap your app with `WagmiProvider` and `QueryClientProvider`. Both are required. + +```typescript +// config.ts +import { createConfig, http } from 'wagmi'; +import { celo } from 'wagmi/chains'; +import { jaw } from '@jaw.id/wagmi'; + +export const config = createConfig({ + chains: [celo], + connectors: [ + jaw({ + apiKey: process.env.NEXT_PUBLIC_JAW_API_KEY!, + appName: 'My Celo App', + defaultChainId: celo.id, // 42220 + }), + ], + transports: { + [celo.id]: http(), + }, +}); +``` + +```tsx +// App.tsx +import { WagmiProvider } from 'wagmi'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { config } from './config'; + +const queryClient = new QueryClient(); + +export function App({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +For testnet (Celo Sepolia), enable `showTestnets` in the connector: + +```typescript +jaw({ + apiKey: process.env.NEXT_PUBLIC_JAW_API_KEY!, + defaultChainId: 11142220, // Celo Sepolia Testnet + preference: { showTestnets: true }, +}) +``` + +**Connect a Wallet** + +Use `useConnect` from `@jaw.id/wagmi` (not from `wagmi`) to support JAW-specific capabilities like SIWE and subname issuance during connection. + +```tsx +import { useConnect } from '@jaw.id/wagmi'; +import { useAccount } from 'wagmi'; + +export function ConnectButton() { + const { connect, connectors } = useConnect(); + const { address, isConnected } = useAccount(); + + if (isConnected) return

Connected: {address}

; + + return ( + + ); +} +``` + +In CrossPlatform mode, clicking the button opens a `keys.jaw.id` popup where the user registers or authenticates with their passkey. In AppSpecific mode, the `uiHandler` renders the UI inside your app instead. + +**Send a Transaction** + +```tsx +import { useSendCalls } from 'wagmi'; +import { parseEther } from 'viem'; + +export function SendCelo() { + const { sendCalls } = useSendCalls(); + + return ( + + ); +} +``` + +**Enable Gasless Transactions** + +Add a paymaster to your config to sponsor gas fees so users never need to hold CELO. JAW requires an ERC-7677 compatible paymaster using EntryPoint v0.8. + +```typescript +// config.ts +import { createConfig, http } from 'wagmi'; +import { celo } from 'wagmi/chains'; +import { jaw } from '@jaw.id/wagmi'; + +export const config = createConfig({ + chains: [celo], + connectors: [ + jaw({ + apiKey: process.env.NEXT_PUBLIC_JAW_API_KEY!, + appName: 'My Celo App', + defaultChainId: celo.id, + paymasters: { + [celo.id]: { url: 'https://your-paymaster-url/rpc' }, + }, + }), + ], + transports: { + [celo.id]: http(), + }, +}); +``` + +Once configured, transactions via `useSendCalls` and `useWriteContract` are automatically sponsored. No changes to your transaction code needed. + +**Delegated Permissions** + +Permissions (ERC-7715) let you grant a spender (a backend wallet, contract, or AI agent) the ability to perform scoped actions on behalf of the user. Permissions define exactly which contracts can be called, how much can be spent, and for how long. Use them for subscription payments, recurring charges, and autonomous agent wallets. + +```tsx +import { useGrantPermissions } from '@jaw.id/wagmi'; +import { parseUnits } from 'viem'; + +const CELO_NATIVE = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'; + +function GrantPermission() { + const { mutate: grant, isPending } = useGrantPermissions(); + + return ( + + ); +} +``` + +Use `usePermissions` to query active permissions and `useRevokePermissions` to revoke them, both from `@jaw.id/wagmi`. + + + + +**Installation** + +```bash +npm install @jaw.id/core +``` + +**Configure** + +Initialize once in a dedicated file and import the instance wherever needed. No provider wrapping required. + +```typescript +// jaw.ts +import { JAW } from '@jaw.id/core'; + +export const provider = JAW.create({ + apiKey: process.env.JAW_API_KEY!, // set in your .env file + appName: 'My Celo App', + defaultChainId: 42220, // Celo Mainnet +}); +``` + +For testnet (Celo Sepolia), enable `showTestnets`: + +```typescript +export const provider = JAW.create({ + apiKey: process.env.JAW_API_KEY!, + defaultChainId: 11142220, // Celo Sepolia Testnet + preference: { showTestnets: true }, +}); +``` + +**Connect a Wallet** + +```typescript +import { provider } from './jaw'; + +const accounts = await provider.request({ method: 'eth_requestAccounts' }); +console.log('Connected:', accounts[0]); +``` + +**Send a Transaction** + +```typescript +import { provider } from './jaw'; +import { numberToHex, parseEther } from 'viem'; + +const result = await provider.request({ + method: 'wallet_sendCalls', + params: [{ + calls: [{ + to: '0xRecipientAddress', + value: numberToHex(parseEther('0.01')), + }], + }], +}); +console.log('Call ID:', result.id); +``` + +**Enable Gasless Transactions** + +Add a paymaster to sponsor gas fees. JAW requires an ERC-7677 compatible paymaster using EntryPoint v0.8. + +```typescript +// jaw.ts +import { JAW } from '@jaw.id/core'; + +export const provider = JAW.create({ + apiKey: process.env.JAW_API_KEY!, + defaultChainId: 42220, + paymasters: { + 42220: { url: 'https://your-paymaster-url/rpc' }, + }, +}); +``` + +**Delegated Permissions** + +Permissions (ERC-7715) let you grant a spender (a backend wallet, contract, or AI agent) the ability to perform scoped actions on behalf of the user. Permissions define exactly which contracts can be called, how much can be spent, and for how long. Use them for subscription payments, recurring charges, and autonomous agent wallets. + +```typescript +import { provider } from './jaw'; +import { parseUnits } from 'viem'; + +const CELO_NATIVE = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'; + +const result = await provider.request({ + method: 'wallet_grantPermissions', + params: [{ + expiry: Math.floor(Date.now() / 1000) + 86400 * 30, // 30 days + spender: '0xYourAgentOrBackendWallet', + permissions: { + calls: [{ + target: '0xSomeContract', + functionSignature: 'execute(address,uint256)', + }], + spends: [{ + token: CELO_NATIVE, + allowance: parseUnits('1', 18).toString(), + unit: 'day', + }], + }, + }], +}); + +// Store result.permissionId, needed to execute delegated calls and to revoke +console.log('Permission granted:', result.permissionId); +``` + +Once a permission is granted, a server-side spender can execute calls against it using `Account.fromLocalAccount()` from `@jaw.id/core`. See [Subscription Payments](https://docs.jaw.id/guides/subscription-payments) and [Account API](https://docs.jaw.id/account) for full details. + + + + +## Authentication Modes + +- **CrossPlatform** (default): passkey operations run on `keys.jaw.id` via a popup, giving users a portable wallet that works across any JAW-powered app. +- **AppSpecific**: passkey operations run inside your app via a `uiHandler`, giving you full UI control at the cost of wallet portability. + +See the [JAW configuration docs](https://docs.jaw.id/configuration) for setup details and UIHandler implementation. + +## Common Setup Issues + +| Symptom | Likely cause | +|---|---| +| Passkey popup doesn't open | Your domain isn't in the allowed list on the JAW Dashboard | +| Testnet chain not available | Set `preference: { showTestnets: true }` when using a testnet `defaultChainId` | +| AppSpecific mode throws on init | `uiHandler` is missing, required when using `Mode.AppSpecific` | + +## Next Steps + +- [Quickstart guide](https://docs.jaw.id/guides/quickstart): full end-to-end walkthrough +- [Account API](https://docs.jaw.id/account): headless smart accounts for agents and server-side use +- [Gas Sponsoring](https://docs.jaw.id/guides/gas-sponsoring): paymaster setup and sponsorship policies +- [Sign-In With Ethereum](https://docs.jaw.id/guides/sign-in-with-ethereum): SIWE during connection +- [Subscription Payments](https://docs.jaw.id/guides/subscription-payments): recurring charges with delegated permissions +- [Onchain Identity](https://docs.jaw.id/guides/onchain-identity): ENS subname issuance on onboarding +- [Configuration reference](https://docs.jaw.id/configuration): all config options + +## Resources + +- [JAW Documentation](https://docs.jaw.id/) +- [JAW Website](https://jaw.id/) +- [JAW Dashboard](https://dashboard.jaw.id/) +- [Source Code](https://github.com/JustaName-id/jaw-mono) +- [Example Integrations](https://github.com/JustaName-id/jaw-examples) diff --git a/tooling/wallets/index.mdx b/tooling/wallets/index.mdx index 6bbef2427..96a370d1e 100644 --- a/tooling/wallets/index.mdx +++ b/tooling/wallets/index.mdx @@ -149,3 +149,13 @@ Portal is an MPC wallet provider and web3 developer platform. You can use Portal - Platforms: [iOS](https://docs.portalhq.io/guides/ios), [Android](https://docs.portalhq.io/guides/android), [Browser](https://docs.portalhq.io/guides/web), [Flutter](https://docs.portalhq.io/resources/flutter), [API](https://docs.portalhq.io/guides/enclave-mpc-api), [React Native](https://docs.portalhq.io/guides/react-native) - Maintainers: [Portal](https://portalhq.io/) - [Documentation](https://docs.portalhq.io/) + +--- + +### [JAW](https://jaw.id/) + +JAW provides smart account infrastructure for Celo applications. Give users passkey-secured accounts with ENS identity, sponsor their gas, and enable programmable permissions for subscriptions and delegated agent execution through a TypeScript SDK. +- Homepage: [jaw.id](https://jaw.id/) +- [Docs](https://docs.jaw.id/) +- [Source Code](https://github.com/JustaName-id/jaw-mono) +- [Dashboard](https://dashboard.jaw.id/) From eace08ac8535e2c66bbdadc6d54a39f9bef7bacd Mon Sep 17 00:00:00 2001 From: LeoFranklin015 Date: Mon, 9 Mar 2026 13:27:14 +0530 Subject: [PATCH 2/3] docs: remove unnecessary jaw redirects --- docs.json | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs.json b/docs.json index 25f4fbad0..fca89d2e9 100644 --- a/docs.json +++ b/docs.json @@ -2596,10 +2596,6 @@ "source": "/developer/portal/:slug*", "destination": "/tooling/libraries-sdks/portal/:slug*" }, - { - "source": "/developer/jaw/:slug*", - "destination": "/tooling/libraries-sdks/jaw/:slug*" - }, { "source": "/developer/rainbowkit-celo/:slug*", "destination": "/tooling/libraries-sdks/rainbowkit-celo/:slug*" @@ -2960,10 +2956,6 @@ "source": "/developer/portal", "destination": "/tooling/libraries-sdks/portal" }, - { - "source": "/developer/jaw", - "destination": "/tooling/libraries-sdks/jaw" - }, { "source": "/developer/rainbowkit-celo", "destination": "/tooling/libraries-sdks/rainbowkit-celo" From 43847f8e5bfcece0bd6a83d0b403115ca17e89f4 Mon Sep 17 00:00:00 2001 From: LeoFranklin015 Date: Mon, 9 Mar 2026 16:08:05 +0530 Subject: [PATCH 3/3] fix: broken link --- tooling/libraries-sdks/celo-sdks.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tooling/libraries-sdks/celo-sdks.mdx b/tooling/libraries-sdks/celo-sdks.mdx index da7bc39e2..c4cfec6c6 100644 --- a/tooling/libraries-sdks/celo-sdks.mdx +++ b/tooling/libraries-sdks/celo-sdks.mdx @@ -22,4 +22,4 @@ Because Celo is compatible with Ethereum any ethereum package can be used with C - [Reown](/developer/reown) - [Portal](/developer/portal) -- [JAW](/developer/jaw) +- [JAW](/tooling/libraries-sdks/jaw)