A simplified wallet connection library for AO (Arweave/AO) applications. Similar API to ArweaveWalletKit with auto-prepared signers.
npm install ao-wallet-kitA simplified wallet connection library for AO (Arweave/AO) applications. Provides a clean, ArweaveWalletKit-like API with auto-prepared signers that work out of the box with @permaweb/aoconnect.
- 🔌 Multiple Wallet Support - Arweave (Wander), MetaMask, WAuth (GitHub, Google, Discord, X)
- ⚡ Auto-Prepared Signers - No more manual prepareAoSigner() calls
- 🔄 Auto-Reconnect - Seamlessly reconnects on page refresh
- 🎯 Simple Hooks API - useWallet(), useAoSigner(), useAddress()
- 🔇 Conditional Logging - Debug logs only when enabled
- 📦 Single Provider - One for everything
``bash`
npm install ao-wallet-kitor
yarn add ao-wallet-kitor
pnpm add ao-wallet-kit
Make sure you have React installed:
`bash`
npm install react react-dom
`tsx
import { AoWalletProvider } from 'ao-wallet-kit';
function App() {
return (
);
}
`
`tsx
import { useWallet, useAoSigner } from 'ao-wallet-kit';
import { spawn } from '@permaweb/aoconnect';
function ConnectButton() {
const { connected, address, connect, disconnect } = useWallet();
const { signer } = useAoSigner(); // Already prepared for AO operations!
const handleSpawn = async () => {
// signer is ready to use directly - no prepareAoSigner needed!
const processId = await spawn({
module: 'YOUR_MODULE_ID',
scheduler: 'YOUR_SCHEDULER_ID',
signer, // Just pass it directly!
});
console.log('Created process:', processId);
};
if (connected) {
return (
Connected: {address}
return ;
}
`
####
Wrap your app with this provider to enable wallet functionality.
`tsx`
autoConnect={boolean} // Auto-reconnect on mount (default: true)
permissions={string[]} // Default Arweave permissions
>
{children}
#### useWallet()
Main hook for wallet state and actions.
`tsx`
const {
connected, // boolean - Is wallet connected?
address, // string | null - Wallet address
publicKey, // string | null - Public key
strategy, // WalletStrategy | null - Current wallet strategy
connect, // (permissions?: string[]) => Promise
disconnect, // () => Promise
setStrategy, // (strategyId: string) => boolean
getStrategies, // () => WalletStrategy[]
} = useWallet();
#### useAoSigner()
Get an auto-prepared signer for AO operations.
`tsx
const { signer, isLoading } = useAoSigner();
// Use directly with @permaweb/aoconnect
await spawn({ module, scheduler, signer });
await message({ process, signer, data, tags });
`
#### useAddress()
Simple hook to get just the wallet address.
`tsx`
const address = useAddress(); // string | null
#### useWalletType()
Check the current wallet type.
`tsx`
const { isWAuth, isMetaMask, isArweaveNative } = useWalletType();
#### useWAuthData()
Get WAuth-specific user data (for OAuth wallets).
`tsx`
const { email, username } = useWAuthData();
For advanced use cases, you can access the wallet manager directly:
`tsx
import { walletManager } from 'ao-wallet-kit';
// Set a specific wallet strategy
walletManager.setStrategy('wauth-github');
walletManager.setStrategy('metamask');
walletManager.setStrategy('arweave-native');
// Connect
await walletManager.connect();
// Get state
const state = walletManager.getState();
`
| Wallet | Strategy ID | Description |
|--------|-------------|-------------|
| Wander | arweave-native | Native Arweave wallet (browser extension) |metamask
| MetaMask | | Ethereum wallet with Arweave bridge |wauth-github
| GitHub | | WAuth OAuth - GitHub login |wauth-google
| Google | | WAuth OAuth - Google login |wauth-discord
| Discord | | WAuth OAuth - Discord login |wauth-twitter
| X (Twitter) | | WAuth OAuth - X login |
Debug logs are disabled by default. Enable them via:
1. Provider prop: localStorage.setItem('wallet_debug', 'true')
2. localStorage: VITE_WALLET_DEBUG=true
3. Environment:
| Feature | ao-wallet-kit | ArweaveWalletKit |
|---------|---------------|------------------|
| Auto-prepared signer | ✅ Yes | ❌ No |
| WAuth support | ✅ Built-in | ❌ No |
| MetaMask support | ✅ Built-in | ❌ No |
| Debug logging | ✅ Conditional | ❌ Always on |
| Auto-reconnect | ✅ Built-in | ⚠️ Manual |
| Bundle size | ~15KB | ~25KB |
`tsx
// Before (ArweaveWalletKit)
import { ArweaveWalletKit, useConnection, useApi } from 'arweave-wallet-kit';
const { connected } = useConnection();
const api = useApi();
const signer = createDataItemSigner(api); // Manual!
// After (ao-wallet-kit)
import { AoWalletProvider, useWallet, useAoSigner } from 'ao-wallet-kit';
const { connected } = useWallet();
const { signer } = useAoSigner(); // Auto-prepared!
`
ao-wallet-kit is written in TypeScript and includes full type definitions.
`tsx``
import type {
WalletStrategy,
WalletConnectionState,
AoSignerFunction
} from 'ao-wallet-kit';
MIT © Arlink Labs
Contributions are welcome! Please read our contributing guide first.