{"_id":"@dakshie/avail-wallet-sdk-test","name":"@dakshie/avail-wallet-sdk-test","dist-tags":{"test":"1.0.8-test.0","latest":"1.0.8-test.0"},"versions":{"1.0.8-test.0":{"name":"@dakshie/avail-wallet-sdk-test","version":"1.0.8-test.0","type":"module","main":"./dist/avail-wallet-sdk.cjs","module":"./dist/avail-wallet-sdk.js","sideEffects":false,"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/avail-wallet-sdk.css"},"scripts":{"dev":"vite","build":"tsc -b && vite build","prebuild":"rm -rf dist","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepublish":"npm run build"},"keywords":["avail","wallet","connect","react"],"dependencies":{"@metamask/providers":"^22.1.0","@polkadot/api":"^15.10.2","@radix-ui/react-dialog":"^1.1.13","@radix-ui/react-slot":"^1.2.2","@tailwindcss/vite":"^4.1.7","@talismn/connect-wallets":"^1.2.8","avail-js-sdk":"^0.4.2","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.511.0","path":"^0.12.7","react":"^19.1.0","react-dom":"^19.1.0","react-icons":"^5.5.0","tailwind-merge":"^3.3.0","tailwindcss":"^4.1.7","vite-plugin-dts":"^4.5.4","vite-tsconfig-paths":"^5.1.4","zustand":"^5.0.4"},"devDependencies":{"@eslint/js":"^9.25.0","@types/node":"^22.15.19","@types/react":"^19.1.2","@types/react-dom":"^19.1.2","@vitejs/plugin-react":"^4.4.1","eslint":"^9.25.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.19","globals":"^16.0.0","tw-animate-css":"^1.3.0","typescript":"~5.8.3","typescript-eslint":"^8.30.1","vite":"^6.3.5"},"_id":"@dakshie/avail-wallet-sdk-test@1.0.8-test.0","gitHead":"7658dd3ff046543f946ffa0969f153a4db188035","types":"./dist/avail-wallet-sdk.d.ts","description":"![Avail Wallet SDK](https://files.availproject.org/avail-wallet-sdk/meta.svg)","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-KyLmVVTWAx660Jz77LV2lE2/2yfC0jNnniwjzrmhvQbjzHxBVclsXCKn4wTCPG+wACO+qvdDiZy1qiw35T2gFQ==","shasum":"919cb1f9aac5f2cf7a72b8aedb431293386e0217","tarball":"https://registry.npmjs.org/@dakshie/avail-wallet-sdk-test/-/avail-wallet-sdk-test-1.0.8-test.0.tgz","fileCount":14,"unpackedSize":3454711,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD+A2KifG/K9qOwTyljKmRkj1iqK7hvzPVaXCgHKZN+0wIgezasd+hirBnCEINzjuu3JEG4KD8+8GoGHck0+/DHzIc="}]},"_npmUser":{"name":"dakshie","email":"dakshiegoel@gmail.com"},"directories":{},"maintainers":[{"name":"dakshie","email":"dakshiegoel@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/avail-wallet-sdk-test_1.0.8-test.0_1753713348555_0.050397782182725726"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-28T14:35:48.405Z","1.0.8-test.0":"2025-07-28T14:35:48.846Z","modified":"2025-07-28T14:35:49.118Z"},"maintainers":[{"name":"dakshie","email":"dakshiegoel@gmail.com"}],"description":"![Avail Wallet SDK](https://files.availproject.org/avail-wallet-sdk/meta.svg)","keywords":["avail","wallet","connect","react"],"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","_rev":"1-725ffb074f9c8a80337e77f13abc5627"}