{"_rev":"4-6d2dd4db34b1c0c1161aa7a52a40da1b","time":{"created":"2025-07-10T05:28:51.247Z","modified":"2025-07-10T05:28:51.865Z","0.0.73":"2025-06-23T03:21:05.601Z","0.0.1":"2025-06-23T03:24:31.943Z","0.0.2":"2025-07-10T05:28:51.587Z"},"_id":"@bitomni_tyche/lasereyes-react","name":"@bitomni_tyche/lasereyes-react","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@bitomni_tyche/lasereyes-react","private":false,"version":"0.0.2","type":"module","main":"./dist/index.umd.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","typings":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"}},"scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"dependencies":{"@nanostores/react":"^0.7.3","bootstrap":"^5.3.3","nanostores":"^0.11.3","vite-plugin-ssr":"^0.4.142"},"peerDependencies":{"react":">=17","react-dom":">=17"},"devDependencies":{"@eslint/js":"^9.9.0","@types/node":"^22.5.4","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@vitejs/plugin-react-swc":"^3.7.0","bip39":"^3.1.0","eslint":"^9.9.0","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.9","globals":"^15.9.0","react":"19.0.0-rc.1","react-dom":"19.0.0-rc.1","typescript":"^5.5.3","typescript-eslint":"^8.0.1","vite":"^5.4.1","vite-plugin-dts":"^4.2.1"},"publishConfig":{"access":"public"},"_id":"@bitomni_tyche/lasereyes-react@0.0.2","gitHead":"81fa18d5e044fb21cf84e899f3a6d944d9e9a0bb","description":"`@omnisat/lasereyes-react` is a React-specific package built on top of `lasereyes-core`. It provides React hooks, context providers, and wallet icon components to make it easy to integrate Bitcoin wallet support into React applications.","_nodeVersion":"20.12.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-z+9X2qBM+8A/Fln/tCOIYbrjcTdIs7iUwnJv5BFK1zQG1JNPnBCzXT7wRuFpsYUe6y7TljwhevEJpI6sih0ScA==","shasum":"43b00dccf4330ab0642d3ee4f9ae60e5823201df","tarball":"https://registry.npmjs.org/@bitomni_tyche/lasereyes-react/-/lasereyes-react-0.0.2.tgz","fileCount":45,"unpackedSize":4443008,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCuI9ln3aCluMY8yYROfUFYGT3sND6GrICdsGAkQu1xeQIhAJQ6jMcwP7P0IuF5lxhWtFUg71m3xMSe5rk+lai4/2vJ"}]},"_npmUser":{"name":"tyche_package","email":"zzq729h@gmail.com","actor":{"name":"tyche_package","email":"zzq729h@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"tyche_package","email":"zzq729h@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lasereyes-react_0.0.2_1752125331303_0.9392972572197615"},"_hasShrinkwrap":false}},"maintainers":[{"name":"tyche_package","email":"zzq729h@gmail.com"}],"description":"`@omnisat/lasereyes-react` is a React-specific package built on top of `lasereyes-core`. It provides React hooks, context providers, and wallet icon components to make it easy to integrate Bitcoin wallet support into React applications.","readme":"# lasereyes-react\n\n`@omnisat/lasereyes-react` is a React-specific package built on top of `lasereyes-core`. It provides React hooks, context providers, and wallet icon components to make it easy to integrate Bitcoin wallet support into React applications.\n\nThis package simplifies the interaction between your React app and various Bitcoin wallets, allowing you to focus on building dApps with a seamless user experience.\n\n## Key Concepts\n\n### Provider\n\nThe `@omnisat/lasereyes-react` package exports a `Provider` component that wraps your React application, providing access to wallet functionality throughout your app via React context.\n\nExample of setting up the provider:\n\n```typescript\nimport { LaserEyesProvider } from '@omnisat/lasereyes-react';\n\nfunction App() {\n  return (\n    <LaserEyesProvider network=\"mainnet\">\n      {/* Rest of your application */}\n    </LaserEyesProvider>\n  );\n}\n```\n\n### Hooks\n\n`@omnisat/lasereyes-react` provides hooks to interact with wallets within your React components. The most commonly used hook is `useLaserEyes`, which allows you to access the connected wallet and its state.\n\nExample of using the `useLaserEyes` hook:\n\n```typescript\n// must be a child of a component that is wrapped with LaserEyesProvider\n\nimport { useLaserEyes } from '@omnisat/lasereyes-react';\n\nfunction WalletInfo() {\n  const { address, connect } = useLaserEyes();\n\n  return (\n    <div>\n      {address ? (\n        <p>Connected: {address}</p>\n      ) : (\n        <button onClick={connect}>Connect Wallet</button>\n      )}\n    </div>\n  );\n}\n```\n\n### Icons\n\n`@omnisat/lasereyes-react` also exports SVG wallet icons as React components, making it easy to include visual wallet indicators in your app.\n\nExample of using a wallet icon:\n\n```typescript\nimport { UnisatLogo } from '@omnisat/lasereyes-react';\n\nfunction WalletDisplay() {\n  return <UnisatLogo size={size} className={className} variant={variant} />;\n}\n```\n\nor you could use the `WalletIcon` component to display a wallet icon based on the wallet's name:\n\n```jsx\nimport { WalletIcon, UNISAT, XVERSE } from '@omnisat/lasereyes-react';\n\nconst WalletConnectPage = () => {\n  return (\n    <div>\n      {[UNISAT, XVERSE].map((walletName) => (\n        <WalletIcon key={walletName} walletName={walletName} size={45} className={\"mx-4\"} />\n      ))\n    </div>\n  );\n};\n```\n\n## Features\n\n- **React Hooks**: Easily manage wallet connections and state in your components.\n- **Provider Component**: Wrap your app with the `LaserEyesProvider` to enable wallet access across your React tree with `useLaserEyes`.\n- **Wallet Icons**: Use pre-built wallet icons as React components for visual integration.\n\n## Usage\n\nSet up `@omnisat/lasereyes-react` by wrapping your app with the `LaserEyesProvider` and using the provided hooks (like `useWallet`) to interact with wallets.\n\n## Contributing\n\nContributions are welcome! Feel free to submit pull requests or open issues in the GitHub repository.\n\n## License\n\n`@omnisat/lasereyes-react` is MIT licensed.\n","readmeFilename":"README.md"}