{"_id":"@avail-project/wallet-sdk","_rev":"5-7b28fe30720ed01cf3c8bf3bf1e4ba86","name":"@avail-project/wallet-sdk","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.8":{"name":"@avail-project/wallet-sdk","version":"1.0.8","keywords":["avail","wallet","connect","react"],"_id":"@avail-project/wallet-sdk@1.0.8","maintainers":[{"name":"leouarz","email":"leouarzv2@gmail.com"},{"name":"markopoloparadox","email":"petrlic.marko@gmail.com"},{"name":"devops-avail","email":"devops@availproject.org"},{"name":"rishabhagrawalzra","email":"rishabhagrawalzra@gmail.com"},{"name":"dakshie","email":"dakshiegoel@gmail.com"},{"name":"abheektripathy","email":"abheek.tripathy@gmail.com"},{"name":"decocereus","email":"amartyasinghkings07@gmail.com"},{"name":"rachit2501","email":"rac.sri25@gmail.com"}],"dist":{"shasum":"4fea0959676ae28556c7b4d4a4fee8b86f47d646","tarball":"https://registry.npmjs.org/@avail-project/wallet-sdk/-/wallet-sdk-1.0.8.tgz","fileCount":14,"integrity":"sha512-nKHkt+9DTU6TJRubijXYJibyxyJEIaLDnduCnvR+1YXHTkuTxqyWYXULslka5v1kqRoHy+VJK3zw0q3fNGLFqg==","signatures":[{"sig":"MEUCIGuquSDkuLRz0eDlZXdratXVVooi6YfAJw1/HpjQ0JnVAiEA9T4gF3p4+K8FphC+Sf+1zqpLmTmoZqA8g78/H013BF4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3451199},"main":"./dist/avail-wallet-sdk.cjs","type":"module","types":"./dist/avail-wallet-sdk.d.ts","module":"./dist/avail-wallet-sdk.js","exports":{".":{"import":"./dist/avail-wallet-sdk.js","require":"./dist/avail-wallet-sdk.cjs"},"./utils":{"import":"./dist/utils.js","require":"./dist/utils.cjs"},"./index.css":"./dist/wallet-sdk.css"},"gitHead":"54321a53fb5db13e0204dd3539a24fb934c01f0c","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc -b && vite build","preview":"vite preview","prebuild":"rm -rf dist","prepublish":"npm run build"},"_npmUser":{"name":"rachit2501","email":"rac.sri25@gmail.com"},"_npmVersion":"10.8.2","description":"![Avail Wallet SDK](https://files.availproject.org/avail-wallet-sdk/meta.svg)","directories":{},"sideEffects":false,"_nodeVersion":"20.18.1","dependencies":{"clsx":"^2.1.1","path":"^0.12.7","react":"^19.1.0","zustand":"^5.0.4","react-dom":"^19.1.0","react-icons":"^5.5.0","tailwindcss":"^4.1.7","avail-js-sdk":"^0.4.2","lucide-react":"^0.511.0","@polkadot/api":"^15.10.2","tailwind-merge":"^3.3.0","vite-plugin-dts":"^4.5.4","@tailwindcss/vite":"^4.1.7","@metamask/providers":"^22.1.0","vite-tsconfig-paths":"^5.1.4","@radix-ui/react-slot":"^1.2.2","@radix-ui/react-dialog":"^1.1.13","@talismn/connect-wallets":"^1.2.8","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.3.5","eslint":"^9.25.0","globals":"^16.0.0","@eslint/js":"^9.25.0","typescript":"~5.8.3","@types/node":"^22.15.19","@types/react":"^19.1.2","tw-animate-css":"^1.3.0","@types/react-dom":"^19.1.2","typescript-eslint":"^8.30.1","@vitejs/plugin-react":"^4.4.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.19"},"_npmOperationalInternal":{"tmp":"tmp/wallet-sdk_1.0.8_1753440988307_0.7543746765326624","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-25T10:56:28.188Z","modified":"2026-07-06T10:47:37.639Z","1.0.8":"2025-07-25T10:56:28.519Z"},"keywords":["avail","wallet","connect","react"],"description":"![Avail Wallet SDK](https://files.availproject.org/avail-wallet-sdk/meta.svg)","maintainers":[{"email":"leouarzv2@gmail.com","name":"leouarz"},{"email":"shrinathprabhu.123@gmail.com","name":"shrinathprabhu"},{"email":"devops@availproject.org","name":"devops-avail"},{"email":"dakshiegoel@gmail.com","name":"dakshie"},{"email":"abheek.tripathy@gmail.com","name":"abheektripathy"},{"email":"amartyasinghkings07@gmail.com","name":"decocereus"},{"email":"rac.sri25@gmail.com","name":"rachit2501"},{"email":"abhishek@availproject.org","name":"abc-avail"}],"readme":"# Avail Wallet SDK\n\n![Avail Wallet SDK](https://files.availproject.org/avail-wallet-sdk/meta.svg)\n\nA React library for integrating Avail blockchain wallets into your application. Supports multiple wallet providers including SubWallet, Talisman, and MetaMask Snap with built-in UI components and persistent connections.\n\n## Installation\n\n```bash\nnpm install avail-wallet-sdk\n# or\npnpm install avail-wallet-sdk\n# or\nyarn add avail-wallet-sdk\n```\n\n## Quick Start\n\n### Basic Setup\n\n```tsx\nimport { AvailWalletProvider, AvailWalletConnect } from 'avail-wallet-sdk';\nimport 'avail-wallet-sdk/index.css'; // Import styles\n\nfunction App() {\n  return (\n    <AvailWalletProvider>\n      <AvailWalletConnect />\n    </AvailWalletProvider>\n  );\n}\n```\n\n### Next.js Setup\n\n#### App Router\n```tsx\n// app/providers.tsx\n\"use client\";\nimport { AvailWalletProvider } from 'avail-wallet-sdk';\nimport 'avail-wallet-sdk/index.css';\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  return (\n    <AvailWalletProvider>\n      {children}\n    </AvailWalletProvider>\n  );\n}\n\n// app/layout.tsx\nimport { Providers } from './providers';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <Providers>\n          {children}\n        </Providers>\n      </body>\n    </html>\n  );\n}\n```\n\n#### Pages Router\n```tsx\n// _app.tsx\nimport { AvailWalletProvider } from 'avail-wallet-sdk';\nimport 'avail-wallet-sdk/index.css';\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <AvailWalletProvider>\n      <Component {...pageProps} />\n    </AvailWalletProvider>\n  );\n}\n```\n\n## Components\n\n### Wallet Components\n\n#### `AvailWalletProvider`\nThe root provider that manages wallet state and API connections.\n\n```tsx\nimport { AvailWalletProvider } from 'avail-wallet-sdk';\n\n<AvailWalletProvider\n  rpcUrl=\"wss://turing-rpc.avail.so/ws\" // Optional: custom RPC URL\n  api={externalApi} // Optional: provide your own API instance\n>\n  {children}\n</AvailWalletProvider>\n```\n\n#### `AvailWalletConnect`\nMain wallet connection component with built-in UI.\n\n```tsx\nimport { AvailWalletConnect, Button } from 'avail-wallet-sdk';\n\n// Default UI\n<AvailWalletConnect />\n\n// With custom trigger button\n<AvailWalletConnect>\n  <Button variant=\"primary\" size=\"lg\">\n    Connect Your Wallet\n  </Button>\n</AvailWalletConnect>\n\n// With custom connected state\n<AvailWalletConnect\n  connectedChildren={\n    <div className=\"flex items-center gap-2\">\n      <span>✓ Connected</span>\n      <DisconnectWallet />\n    </div>\n  }\n/>\n```\n\n## Hooks\n\n### Core Hooks\n\n#### `useAvailWallet`\nAccess wallet connection state and API.\n\n```tsx\nimport { useAvailWallet } from 'avail-wallet-sdk';\n\nfunction MyComponent() {\n  const { api, isConnected, rpcUrl, setRpcUrl, open, setOpen } = useAvailWallet();\n\n  return (\n    <div>\n      {isConnected ? 'Connected to Avail' : 'Not connected'}\n      <button onClick={() => setOpen(true)}>Open Wallet</button>\n    </div>\n  );\n}\n```\n\n#### `useAvailAccount`\nManage selected account and wallet.\n\n```tsx\nimport { useAvailAccount } from 'avail-wallet-sdk';\n\nfunction AccountInfo() {\n  const {\n    selected,\n    selectedWallet,\n    setSelected,\n    setSelectedWallet,\n    metadataUpdated,\n    clearWalletState\n  } = useAvailAccount();\n\n  return (\n    <div>\n      {selected && (\n        <p>Connected: {selected.name} ({selected.address})</p>\n      )}\n      <button onClick={clearWalletState}>Disconnect</button>\n    </div>\n  );\n}\n```\n\n#### `useApi`\nDirect access to the Avail API instance.\n\n```tsx\nimport { useApi } from 'avail-wallet-sdk';\n\nfunction ApiComponent() {\n  const { api, isReady, setApi, ensureConnection } = useApi();\n\n  useEffect(() => {\n    if (isReady) {\n      // Use the API\n      console.log('Chain:', api?.runtimeChain.toString());\n    }\n  }, [isReady, api]);\n}\n```\n\n### MetaMask Snap Hooks\n\n#### `useMetaMask`\nAccess MetaMask state and Snap information.\n\n```tsx\nimport { useMetaMask } from 'avail-wallet-sdk';\n\nfunction MetaMaskInfo() {\n  const { installedSnap, metamaskInstalled } = useMetaMask();\n\n  return (\n    <div>\n      MetaMask: {metamaskInstalled ? 'Installed' : 'Not found'}\n      Snap: {installedSnap ? 'Connected' : 'Not connected'}\n    </div>\n  );\n}\n```\n\n#### `useRequestSnap`\nRequest installation of Avail Snap.\n\n```tsx\nimport { useRequestSnap } from 'avail-wallet-sdk';\n\nfunction SnapInstaller() {\n  const requestSnap = useRequestSnap();\n\n  const handleInstall = async () => {\n    try {\n      await requestSnap();\n      console.log('Snap installed successfully');\n    } catch (error) {\n      console.error('Failed to install snap:', error);\n    }\n  };\n\n  return <button onClick={handleInstall}>Install Avail Snap</button>;\n}\n```\n\n#### `useInvokeSnap`\nCall methods on the installed Snap.\n\n```tsx\nimport { useInvokeSnap } from 'avail-wallet-sdk';\n\nfunction SnapMethods() {\n  const invokeSnap = useInvokeSnap();\n\n  const getAddress = async () => {\n    try {\n      const address = await invokeSnap({ method: 'getAddress' });\n      console.log('Address:', address);\n    } catch (error) {\n      console.error('Failed to get address:', error);\n    }\n  };\n\n  return <button onClick={getAddress}>Get Address</button>;\n}\n```\n\n## Advanced Usage\n\n### Custom RPC Endpoint\n\n```tsx\nimport { AvailWalletProvider } from 'avail-wallet-sdk';\n\n<AvailWalletProvider rpcUrl=\"wss://your-custom-rpc.com/ws\">\n  <App />\n</AvailWalletProvider>\n```\n\n### External API Instance\n\n```tsx\nimport { AvailWalletProvider } from 'avail-wallet-sdk';\nimport { initApi } from 'avail-wallet-sdk/utils';\n\nfunction App() {\n  const [api, setApi] = useState();\n\n  useEffect(() => {\n    initApi('wss://turing-rpc.avail.so/ws').then(setApi);\n  }, []);\n\n  return (\n    <AvailWalletProvider api={api}>\n      <MyApp />\n    </AvailWalletProvider>\n  );\n}\n```\n\n### Custom Wallet Connection Button\n\n```tsx\nimport { AvailWalletConnect, useAvailAccount } from 'avail-wallet-sdk';\n\nfunction CustomWalletButton() {\n  const { selected } = useAvailAccount();\n\n  return (\n    <AvailWalletConnect>\n      <button className=\"my-custom-button\">\n        {selected ? `Connected: ${selected.name}` : 'Connect Wallet'}\n      </button>\n    </AvailWalletConnect>\n  );\n}\n```\n\n### Metadata Management\n\n```tsx\nimport { updateMetadata, getInjectorMetadata } from 'avail-wallet-sdk/utils';\n\n// Update wallet metadata\nawait updateMetadata({\n  api,\n  account: selectedAccount,\n  metadataCookie: metadataState,\n  selectedWallet: wallet,\n  setCookie: (name, value) => {\n    // Handle metadata cookie storage\n  }\n});\n\n// Get injector metadata\nconst metadata = getInjectorMetadata(api);\n```\n\n## Styling & Customization\n\n### CSS Import\nThe SDK includes all necessary styles and fonts. Simply import the CSS:\n\n```tsx\nimport 'avail-wallet-sdk/index.css';\n```\n\n### Font Classes\nUse built-in font utilities in your custom components:\n\n```css\n.font-ppmori          /* PP Mori Regular */\n.font-ppmorisemibold  /* PP Mori SemiBold */\n.font-thicccboiregular    /* THICCCBOI Regular */\n.font-thicccboisemibold   /* THICCCBOI SemiBold */\n.font-thicccboibold       /* THICCCBOI Bold */\n```\n\n### Custom Button Styling\nOverride button styles with CSS:\n\n```css\n/* Custom primary button */\n.my-wallet-button {\n  @apply bg-gradient-to-r from-purple-500 to-blue-500 text-white font-bold py-2 px-4 rounded-full;\n}\n```\n\n### Tailwind Configuration\nIf using Tailwind CSS, include the SDK in your config:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/avail-wallet-sdk/**/*.{js,ts,jsx,tsx}'\n  ],\n  // ... rest of config\n}\n```\n\n## TypeScript Support\n\nThe SDK is fully typed. Import types as needed:\n\n```tsx\nimport type {\n  AvailWalletProviderProps,\n  AvailWalletConnectProps,\n  ExtendedWalletAccount,\n  UpdateMetadataParams,\n  WalletSelectionProps,\n  AccountSelectionProps,\n  DisconnectWalletProps\n} from 'avail-wallet-sdk';\n```\n\n## State Persistence\n\nWallet connections are automatically persisted in localStorage. Users will remain connected between browser sessions without needing to reconnect.\n\n## Supported Wallets\n\n- **SubWallet** - Recommended Avail wallet\n- **Talisman** - Multi-chain wallet\n- **PolkadotJS** - Official Polkadot wallet\n- **MetaMask Snap** - Avail integration for MetaMask\n- Other Polkadot ecosystem wallets\n\n## Exports Reference\n\n### Main Entry Point\n```tsx\n// Components\nexport { AvailWalletProvider, AvailWalletConnect, WalletSelector, AccountSelector, DisconnectWallet }\nexport { Button, Badge, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter }\n\n// Hooks\nexport { useAvailWallet, useAvailAccount, useApi }\nexport { useMetaMask, useMetaMaskContext, useRequestSnap, useInvokeSnap, MetaMaskProvider }\n\n// Types\nexport type { AvailWalletProviderProps, AvailWalletConnectProps, ExtendedWalletAccount, ... }\n```\n\n### Utils Entry Point\n```tsx\nimport { updateMetadata, getInjectorMetadata, initApi, cn } from 'avail-wallet-sdk/utils';\n```\n\n## License\n\nThis project is licensed under the MIT License.\n","readmeFilename":"README.md"}