Creates a new Vana SDK instance configured for browser environments.
Configuration object containing wallet, storage, and relayer settings
A fully configured Vana SDK instance for browser use
This is the primary entry point for browser applications using the Vana SDK. The function automatically detects your configuration type and provides compile-time type safety:
The SDK supports multiple wallet configurations (direct WalletClient or chain config), various storage providers (IPFS, Pinata, Google Drive), and gasless transactions via relayers. All operations are optimized for browser environments with proper bundle size optimization.
import { Vana } from '@opendatalabs/vana-sdk/browser';
import { createWalletClient, custom } from 'viem';
import { IPFSStorage } from '@opendatalabs/vana-sdk/browser';
// Complete setup with storage and wallet
const walletClient = createWalletClient({
chain: mokshaTestnet,
transport: custom(window.ethereum)
});
const vana = Vana({
walletClient,
storage: {
providers: {
ipfs: new IPFSStorage({ gateway: 'https://gateway.pinata.cloud' }),
pinata: new PinataStorage({ apiKey: process.env.PINATA_KEY })
},
defaultProvider: 'ipfs'
},
relayerCallbacks: {
async submitPermissionGrant(typedData, signature) {
const response = await fetch('/api/relay/grant', {
method: 'POST',
body: JSON.stringify({ typedData, signature })
});
return (await response.json()).transactionHash;
}
}
});
// All operations now available
const files = await vana.data.getUserFiles();
const permissions = await vana.permissions.getUserPermissions();
await vana.data.upload({ content: 'My data', filename: 'data.txt' });
// Minimal setup without storage (read-only operations)
const vanaReadOnly = Vana({ walletClient });
// These work without storage
const files = await vanaReadOnly.data.getUserFiles();
const permissions = await vanaReadOnly.permissions.getUserPermissions();
// This would throw a runtime error
// await vanaReadOnly.data.upload(params); // ❌ InvalidConfigurationError
// Safe runtime check
if (vanaReadOnly.isStorageEnabled()) {
await vanaReadOnly.data.upload(params); // ✅ TypeScript allows this
} else {
console.log('Storage not configured - upload unavailable');
}
// Using chain configuration instead of wallet client
const vana = Vana({
chainId: 14800, // Moksha testnet
account: '0x742d35Cc6558Fd4D9e9E0E888F0462ef6919Bd36',
rpcUrl: 'https://rpc.moksha.vana.org',
storage: {
providers: { ipfs: new IPFSStorage() },
defaultProvider: 'ipfs'
}
});
Creates a new Vana SDK instance configured for browser environments.
Configuration object containing wallet, storage, and relayer settings
A fully configured Vana SDK instance for browser use
This is the primary entry point for browser applications using the Vana SDK. The function automatically detects your configuration type and provides compile-time type safety:
The SDK supports multiple wallet configurations (direct WalletClient or chain config), various storage providers (IPFS, Pinata, Google Drive), and gasless transactions via relayers. All operations are optimized for browser environments with proper bundle size optimization.
import { Vana } from '@opendatalabs/vana-sdk/browser';
import { createWalletClient, custom } from 'viem';
import { IPFSStorage } from '@opendatalabs/vana-sdk/browser';
// Complete setup with storage and wallet
const walletClient = createWalletClient({
chain: mokshaTestnet,
transport: custom(window.ethereum)
});
const vana = Vana({
walletClient,
storage: {
providers: {
ipfs: new IPFSStorage({ gateway: 'https://gateway.pinata.cloud' }),
pinata: new PinataStorage({ apiKey: process.env.PINATA_KEY })
},
defaultProvider: 'ipfs'
},
relayerCallbacks: {
async submitPermissionGrant(typedData, signature) {
const response = await fetch('/api/relay/grant', {
method: 'POST',
body: JSON.stringify({ typedData, signature })
});
return (await response.json()).transactionHash;
}
}
});
// All operations now available
const files = await vana.data.getUserFiles();
const permissions = await vana.permissions.getUserPermissions();
await vana.data.upload({ content: 'My data', filename: 'data.txt' });
// Minimal setup without storage (read-only operations)
const vanaReadOnly = Vana({ walletClient });
// These work without storage
const files = await vanaReadOnly.data.getUserFiles();
const permissions = await vanaReadOnly.permissions.getUserPermissions();
// This would throw a runtime error
// await vanaReadOnly.data.upload(params); // ❌ InvalidConfigurationError
// Safe runtime check
if (vanaReadOnly.isStorageEnabled()) {
await vanaReadOnly.data.upload(params); // ✅ TypeScript allows this
} else {
console.log('Storage not configured - upload unavailable');
}
// Using chain configuration instead of wallet client
const vana = Vana({
chainId: 14800, // Moksha testnet
account: '0x742d35Cc6558Fd4D9e9E0E888F0462ef6919Bd36',
rpcUrl: 'https://rpc.moksha.vana.org',
storage: {
providers: { ipfs: new IPFSStorage() },
defaultProvider: 'ipfs'
}
});
Creates a new Vana SDK instance.
Param: config
The configuration for the Vana SDK
Returns
A new Vana SDK instance