{"_id":"@abashoverse/agw-svelte","name":"@abashoverse/agw-svelte","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@abashoverse/agw-svelte","version":"0.1.0","description":"Svelte bindings for Abstract Global Wallet (AGW)","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"dev":"vite dev","build":"vite build && npm run package","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test":"vitest run","test:watch":"vitest","lint":"prettier --check . && eslint .","format":"prettier --write ."},"keywords":["svelte","abstract","agw","wallet","blockchain","web3","ethereum","zksync"],"license":"MIT","peerDependencies":{"svelte":"^4.0.0 || ^5.0.0"},"dependencies":{"@abstract-foundation/agw-client":"^1.10.0","@abstract-foundation/agw-react":"^1.10.0","@privy-io/cross-app-connect":"^0.2.2","@tanstack/react-query":"^5.0.0","@wagmi/core":"^2.22.1","viem":"^2.33.3"},"devDependencies":{"@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0","@testing-library/svelte":"^5.3.1","@types/node":"^20.0.0","@vitest/ui":"^1.6.1","happy-dom":"^20.3.7","jsdom":"^27.4.0","publint":"^0.2.0","svelte":"^5.48.0","svelte-check":"^3.6.0","tslib":"^2.6.0","typescript":"^5.0.0","vite":"^5.0.0","vitest":"^1.6.1"},"svelte":"./dist/index.js","repository":{"type":"git","url":"git+https://github.com/abashoverse/agw-svelte.git"},"homepage":"https://github.com/abashoverse/agw-svelte#readme","bugs":{"url":"https://github.com/abashoverse/agw-svelte/issues"},"gitHead":"4be6215fd2234dd53bfcf9bc8bc903f6a8b587e5","_id":"@abashoverse/agw-svelte@0.1.0","_nodeVersion":"25.2.1","_npmVersion":"11.6.4","dist":{"integrity":"sha512-ESsI9vy2La1E/1CMWtkAYY3f75D3RaTDxHx+bRnztS5t1DZrxUl66kol+AIFiCzBEh8XZZxO2+MT3tSo+flj6A==","shasum":"34505b400929674139e7df3cc552bef8c10603ab","tarball":"https://registry.npmjs.org/@abashoverse/agw-svelte/-/agw-svelte-0.1.0.tgz","fileCount":72,"unpackedSize":387022,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD92jZglqmo/t4EETYwCHgr4WxLk24w4UnM8r992HbXcgIgepCcUls6RJGLz30nPOSLWPzkLqrm2z3tssFTdF8HBc0="}]},"_npmUser":{"name":"nodestarq","email":"danisharbeit@gmail.com"},"directories":{},"maintainers":[{"name":"nodestarq","email":"danisharbeit@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/agw-svelte_0.1.0_1769210844654_0.21081702211720232"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-23T23:27:24.520Z","0.1.0":"2026-01-23T23:27:24.816Z","modified":"2026-01-23T23:27:25.083Z"},"maintainers":[{"name":"nodestarq","email":"danisharbeit@gmail.com"}],"description":"Svelte bindings for Abstract Global Wallet (AGW)","homepage":"https://github.com/abashoverse/agw-svelte#readme","keywords":["svelte","abstract","agw","wallet","blockchain","web3","ethereum","zksync"],"repository":{"type":"git","url":"git+https://github.com/abashoverse/agw-svelte.git"},"bugs":{"url":"https://github.com/abashoverse/agw-svelte/issues"},"license":"MIT","readme":"# @abashoverse/agw-svelte\n\n> Svelte bindings for Abstract Global Wallet (AGW)\n\nSvelte-native SDK for integrating the Abstract Global Wallet into your Svelte applications. Built on top of `@abstract-foundation/agw-client` with reactive Svelte stores and components.\n\n## Features\n\n- **Reactive Stores**: First-class Svelte store support for wallet state\n- **Svelte 5 Ready**: Built with Svelte 5 runes while maintaining Svelte 4 compatibility\n- **Type-Safe**: Full TypeScript support with comprehensive type definitions\n- **Gas Sponsorship**: Built-in support for sponsored transactions via paymasters\n- **Session Keys**: Manage session keys for delegated transaction signing\n- **SSR Compatible**: Safe to use in SvelteKit applications\n- **Lightweight**: Minimal bundle size leveraging framework-agnostic `agw-client`\n\n## Installation\n\nChoose your preferred package manager:\n\n**npm:**\n```bash\nnpm install @abashoverse/agw-svelte\n```\n\n**pnpm:**\n```bash\npnpm add @abashoverse/agw-svelte\n```\n\n**yarn:**\n```bash\nyarn add @abashoverse/agw-svelte\n```\n\n**bun:**\n```bash\nbun add @abashoverse/agw-svelte\n```\n\n### Peer Dependencies\n\nThe following peer dependencies are required:\n\n**npm:**\n```bash\nnpm install svelte viem @abstract-foundation/agw-client @wagmi/core\n```\n\n**pnpm:**\n```bash\npnpm add svelte viem @abstract-foundation/agw-client @wagmi/core\n```\n\n**yarn:**\n```bash\nyarn add svelte viem @abstract-foundation/agw-client @wagmi/core\n```\n\n**bun:**\n```bash\nbun add svelte viem @abstract-foundation/agw-client @wagmi/core\n```\n\n## Quick Start\n\n### 1. Wrap Your App with AbstractProvider\n\n```svelte\n<!-- +layout.svelte -->\n<script>\n  import { AbstractProvider } from '@abashoverse/agw-svelte';\n</script>\n\n<AbstractProvider config={{ testnet: true }}>\n  <slot />\n</AbstractProvider>\n```\n\n### 2. Use the ConnectButton Component\n\n```svelte\n<!-- +page.svelte -->\n<script>\n  import { ConnectButton, isConnected, address } from '@abashoverse/agw-svelte';\n</script>\n\n<ConnectButton />\n\n{#if $isConnected}\n  <p>Connected: {$address}</p>\n{/if}\n```\n\n### 3. Perform Sponsored Contract Writes\n\n```svelte\n<script>\n  import {\n    createWriteContractSponsored,\n    address,\n    isConnected,\n  } from '@abashoverse/agw-svelte';\n  \n  const { subscribe, writeContractSponsored } = createWriteContractSponsored();\n  \n  let writeState;\n  subscribe((s) => (writeState = s));\n  \n  const NFT_CONTRACT = '0xC4822AbB9F05646A9Ce44EFa6dDcda0Bf45595AA';\n  const NFT_ABI = [\n    {\n      inputs: [\n        { name: 'to', type: 'address' },\n        { name: 'amount', type: 'uint256' },\n      ],\n      name: 'mint',\n      outputs: [],\n      stateMutability: 'nonpayable',\n      type: 'function',\n    },\n  ];\n  \n  async function mintNFT() {\n    try {\n      const hash = await writeContractSponsored({\n        address: NFT_CONTRACT,\n        abi: NFT_ABI,\n        functionName: 'mint',\n        args: [$address, BigInt(1)],\n      });\n      \n      console.log('Transaction hash:', hash);\n    } catch (error) {\n      console.error('Mint failed:', error);\n    }\n  }\n</script>\n\n{#if $isConnected}\n  <button onclick={mintNFT} disabled={writeState?.isPending}>\n    {writeState?.isPending ? 'Minting...' : 'Mint NFT'}\n  </button>\n  \n  {#if writeState?.isSuccess}\n    <p>Success! Hash: {writeState.data.hash}</p>\n  {/if}\n  \n  {#if writeState?.error}\n    <p>Error: {writeState.error.message}</p>\n  {/if}\n{/if}\n```\n\n## API Reference\n\n### Components\n\n#### `<AbstractProvider>`\n\nContext provider that initializes AGW configuration.\n\n**Props:**\n- `config: AGWSvelteConfig` - Configuration object\n\n```svelte\n<AbstractProvider config={{ testnet: true }}>\n  <!-- Your app -->\n</AbstractProvider>\n```\n\n**Config Options:**\n```typescript\ninterface AGWSvelteConfig {\n  /** The blockchain chain to use (optional, defaults to abstract/abstractTestnet) */\n  chain?: Chain;\n  /** Transport to use (optional, defaults to http()) */\n  transport?: Transport;\n  /** Whether to use testnet (default: false) */\n  testnet?: boolean;\n}\n```\n\n#### `<ConnectButton>`\n\nPre-styled button component for connecting/disconnecting wallet.\n\n```svelte\n<ConnectButton />\n```\n\n### Stores\n\nAll stores follow the standard Svelte store contract and can be subscribed to with `$`.\n\n#### Account Stores\n\n```typescript\n// Connection state\n$isConnected: boolean\n$address: Address | undefined\n$chainId: number | undefined\n$isConnecting: boolean\n$isDisconnected: boolean\n$account: GetAccountReturnType\n```\n\n#### AbstractClient Stores\n\n```typescript\n// AGW client instance and state\n$abstractClient: AbstractClient | null\n$isAbstractClientLoading: boolean\n$abstractClientError: Error | null\n```\n\n#### Signer Stores\n\n```typescript\n// Signer account and client\n$signerAccount: Account | null\n$signerClient: WalletClient | null\n```\n\n#### Session Stores\n\n```typescript\n// Session key management\n$sessions: SessionConfig[]\n$isCreatingSession: boolean\n$isRevokingSession: boolean\n$sessionError: Error | null\n```\n\n### Actions\n\n#### `createLoginWithAbstract(wagmiConfig)`\n\nCreates login/logout handlers.\n\n```typescript\nconst { login, logout, isLoggingIn } = createLoginWithAbstract(wagmiConfig);\n\nawait login();  // Connect wallet\nawait logout(); // Disconnect wallet\n```\n\n#### `createWriteContractSponsored()`\n\nCreates a sponsored contract write handler.\n\n```typescript\nconst { subscribe, writeContractSponsored, reset } = createWriteContractSponsored();\n\nconst hash = await writeContractSponsored({\n  address: '0x...',\n  abi: [...],\n  functionName: 'transfer',\n  args: [recipient, amount],\n  paymaster: '0x...', // Optional, defaults to Abstract paymaster\n});\n```\n\n**Parameters:**\n```typescript\ninterface WriteContractSponsoredParams {\n  address: Address;              // Contract address\n  abi: Abi;                       // Contract ABI\n  functionName: string;           // Function to call\n  args?: unknown[];               // Function arguments\n  paymaster?: Address;            // Paymaster address\n  paymasterInput?: Hash;          // Paymaster input data\n  value?: bigint;                 // ETH value to send\n  gas?: bigint;                   // Gas limit\n}\n```\n\n#### `createSendTransaction()`\n\nCreates a transaction sender.\n\n```typescript\nconst { subscribe, sendTransaction, reset } = createSendTransaction();\n\nconst hash = await sendTransaction({\n  to: '0x...',\n  value: parseEther('0.1'),\n  data: '0x...',\n});\n```\n\n### Session Management\n\n```typescript\nimport { sessionStore } from '@abashoverse/agw-svelte';\n\n// Create a session\nawait sessionStore.create({\n  sessionKeyAddress: '0x...',\n  allowedContracts: ['0x...'],\n  expiresAt: BigInt(Date.now() + 86400000), // 24 hours\n});\n\n// Revoke sessions\nawait sessionStore.revoke(['0xsessionhash...']);\n```\n\n## TypeScript Support\n\nAll types are exported from the package:\n\n```typescript\nimport type {\n  AGWSvelteConfig,\n  WriteContractSponsoredParams,\n  SessionConfig,\n  // ... and more\n} from '@abashoverse/agw-svelte';\n```\n\n## Examples\n\n### Custom Login Button\n\n```svelte\n<script>\n  import { getAGWContext } from '@abashoverse/agw-svelte';\n  import { createLoginWithAbstract } from '@abashoverse/agw-svelte';\n  import { isConnected } from '@abashoverse/agw-svelte';\n  \n  const { wagmiConfig } = getAGWContext();\n  const { login, logout } = createLoginWithAbstract(wagmiConfig);\n</script>\n\n<button onclick={$isConnected ? logout : login}>\n  {$isConnected ? 'Disconnect' : 'Connect'}\n</button>\n```\n\n### Send Native Token Transfer\n\n```svelte\n<script>\n  import { createSendTransaction, address } from '@abashoverse/agw-svelte';\n  import { parseEther } from 'viem';\n  \n  const { subscribe, sendTransaction } = createSendTransaction();\n  let txState;\n  subscribe((s) => (txState = s));\n  \n  async function sendETH() {\n    await sendTransaction({\n      to: '0xRecipientAddress',\n      value: parseEther('0.01'),\n    });\n  }\n</script>\n```\n\n### Multiple Contract Interactions\n\n```svelte\n<script>\n  import { createWriteContractSponsored } from '@abashoverse/agw-svelte';\n  \n  const approve = createWriteContractSponsored();\n  const swap = createWriteContractSponsored();\n  \n  async function performSwap() {\n    // First approve\n    await approve.writeContractSponsored({\n      address: TOKEN_ADDRESS,\n      abi: ERC20_ABI,\n      functionName: 'approve',\n      args: [ROUTER_ADDRESS, amount],\n    });\n    \n    // Then swap\n    await swap.writeContractSponsored({\n      address: ROUTER_ADDRESS,\n      abi: ROUTER_ABI,\n      functionName: 'swap',\n      args: [tokenIn, tokenOut, amount],\n    });\n  }\n</script>\n```\n\n## SSR Considerations\n\nThis library is safe to use in SvelteKit with SSR. All browser-specific code is properly guarded.\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the library\nnpm run build\n\n# Run tests\nnpm test\n\n# Type check\nnpm run check\n```\n\n## Architecture\n\nThis package is built on top of:\n- `@abstract-foundation/agw-client` - Framework-agnostic AGW core\n- `@wagmi/core` - VanillaJS wallet utilities\n- `viem` - TypeScript Ethereum interface\n\nIt provides:\n- **Svelte Stores** for reactive state management\n- **Svelte Components** for common UI patterns\n- **Actions** for wallet interactions and transactions\n\n## Documentation\n\n- **[Architecture Guide](./docs/ARCHITECTURE.md)** - System design and architecture\n- **[API Reference](./docs/API.md)** - Complete API documentation\n- **[Examples](./docs/EXAMPLES.md)** - Working code examples\n- **[Migration Guide](./docs/MIGRATION.md)** - Migrating from `@abstract-foundation/agw-react`\n- **[Troubleshooting](./docs/TROUBLESHOOTING.md)** - Common issues and solutions\n\n## Testing\n\nThis library includes comprehensive test coverage (168 tests):\n- Error handling (44 tests)\n- Input validation (66 tests)\n- Configuration utilities (39 tests)\n- General utilities (19 tests)\n\n```bash\nnpm test           # Run all tests\nnpm run test:watch # Watch mode\n```\n\n## License\n\nMIT\n\n## Links\n\n- [Abstract Documentation](https://docs.abs.xyz)\n- [AGW Client Repository](https://github.com/Abstract-Foundation/agw-sdk)\n- [Abstract Testnet Faucet](https://faucet.testnet.abs.xyz)\n\n## Contributing\n\nContributions are welcome! Please open an issue or PR on GitHub.\n\n### Publishing (Maintainers Only)\n\nTo publish a new version to npm:\n\n1. Ensure you're authenticated with npm:\n   ```bash\n   npm whoami  # Verify you're logged in\n   npm login   # If not logged in\n   ```\n\n2. Update version in `package.json`:\n   ```bash\n   npm version patch  # or minor, or major\n   ```\n\n3. Build and publish:\n   ```bash\n   npm run package    # Build the package\n   npm publish        # Publish to npm (uses --access public from .npmrc)\n   ```\n\n4. Push the version tag:\n   ```bash\n   git push && git push --tags\n   ```\n\n## Support\n\nFor questions and support:\n- GitHub Issues: [Create an issue](https://github.com/abashoverse/agw-svelte/issues)\n- Abstract Discord: [Join the community](https://discord.gg/abstract)\n","readmeFilename":"README.md","_rev":"1-eaaeaeb43776ac562c9415a6d2c65336"}