{"_id":"@bootnodedev/dme-onboarding-modal","_rev":"4-4ccde17d8401a4f845f4d4a09c27ade5","name":"@bootnodedev/dme-onboarding-modal","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@bootnodedev/dme-onboarding-modal","version":"0.0.1","author":{"name":"BootNode"},"license":"MIT","_id":"@bootnodedev/dme-onboarding-modal@0.0.1","maintainers":[{"name":"pablofullana","email":"pablofullana@gmail.com"},{"name":"luchobonatti.bn","email":"luciano@bootnode.dev"},{"name":"gabitoesmiapodo","email":"exepotes@gmail.com"},{"name":"fernandomg","email":"fernando.greco@gmail.com"},{"name":"lmcorbalan","email":"lmcorbalan@gmail.com"},{"name":"fzavalia","email":"zavaliafernando+npmjs@gmail.com"}],"dist":{"shasum":"f5d90b2e13c8f37dd9b30bfa363198e5de8e0873","tarball":"https://registry.npmjs.org/@bootnodedev/dme-onboarding-modal/-/dme-onboarding-modal-0.0.1.tgz","fileCount":7,"integrity":"sha512-OFFJILUYWu9suEQcCZLHXMMuf01+gvP5CLKHKyGZDutVYOQNrc2mBii4i1jYoIBsTx/jdci1HZWlZCkBFZFdQg==","signatures":[{"sig":"MEUCIQDVB/rC7rK7mWT4ccruUKCQrsX89T3Z9bqVupU9MqWRtgIgGV/Tik7ySkAliewZ1kuVQXTCnAK5D29doCOLonw1un0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132279},"main":"./dist/index.umd.cjs","type":"module","_from":"file:bootnodedev-dme-onboarding-modal-0.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./dist/index.css":"./dist/index.css"},"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier . --check","preview":"vite preview","lint:fix":"eslint . --fix","format:fix":"prettier . --write"},"_npmUser":{"name":"fzavalia","email":"zavaliafernando+npmjs@gmail.com"},"prettier":{"tabWidth":2,"printWidth":100},"_resolved":"/private/var/folders/kw/84yv7v091tz2n9gds9g38vyc0000gn/T/d2ad3d54b22ad1661e419b0dcc0f202e/bootnodedev-dme-onboarding-modal-0.0.1.tgz","_integrity":"sha512-OFFJILUYWu9suEQcCZLHXMMuf01+gvP5CLKHKyGZDutVYOQNrc2mBii4i1jYoIBsTx/jdci1HZWlZCkBFZFdQg==","_npmVersion":"10.9.3","description":"A React component for seamless user onboarding to Telegram bot notifications, part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo). This component provides a user-friendly interface that allows users to subscribe to wallet notification","directories":{},"_nodeVersion":"22.19.0","dependencies":{"react-qr-code":"^2.0.18"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","globals":"^16.4.0","prettier":"^3.6.2","@eslint/js":"^9.36.0","typescript":"~5.9.3","@types/node":"^24.6.0","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.0.0","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","eslint-config-prettier":"^10.1.8","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dme-onboarding-modal_0.0.1_1760553121516_0.00394875568411357","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@bootnodedev/dme-onboarding-modal","version":"0.0.2","author":{"name":"BootNode"},"license":"MIT","_id":"@bootnodedev/dme-onboarding-modal@0.0.2","maintainers":[{"name":"pablofullana","email":"pablofullana@gmail.com"},{"name":"luchobonatti.bn","email":"luciano@bootnode.dev"},{"name":"gabitoesmiapodo","email":"exepotes@gmail.com"},{"name":"fernandomg","email":"fernando.greco@gmail.com"},{"name":"lmcorbalan","email":"lmcorbalan@gmail.com"},{"name":"fzavalia","email":"zavaliafernando+npmjs@gmail.com"}],"dist":{"shasum":"79fc9d9dbf62750fe2ebd8a17c2e0de8171b2ec0","tarball":"https://registry.npmjs.org/@bootnodedev/dme-onboarding-modal/-/dme-onboarding-modal-0.0.2.tgz","fileCount":7,"integrity":"sha512-B22gYQmYNBtr9vuVEdkXM8h2/FwRiQjYtokYNS3yRuogu38CADbZ0CNxOYPvYftxKKMEALE7tyW5CReTp5WQjQ==","signatures":[{"sig":"MEQCIEfqBkIqkF68UjxMLWg+c/wxOLnixbaitoT8j1KiMwn6AiA3NkHm38qGkjyCJ+1kjRrBh/VO55NGks78CVKHWCRhBw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132359},"main":"./dist/index.umd.cjs","type":"module","_from":"file:bootnodedev-dme-onboarding-modal-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./dist/index.css":"./dist/index.css"},"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier . --check","preview":"vite preview","lint:fix":"eslint . --fix","format:fix":"prettier . --write"},"_npmUser":{"name":"fzavalia","email":"zavaliafernando+npmjs@gmail.com"},"prettier":{"tabWidth":2,"printWidth":100},"_resolved":"/private/var/folders/kw/84yv7v091tz2n9gds9g38vyc0000gn/T/d6d7c590fe97ae26f2c8de8efcc34c15/bootnodedev-dme-onboarding-modal-0.0.2.tgz","_integrity":"sha512-B22gYQmYNBtr9vuVEdkXM8h2/FwRiQjYtokYNS3yRuogu38CADbZ0CNxOYPvYftxKKMEALE7tyW5CReTp5WQjQ==","_npmVersion":"10.9.3","description":"A React component for seamless user onboarding to Telegram bot notifications, part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo). This component provides a user-friendly interface that allows users to subscribe to wallet notification","directories":{},"_nodeVersion":"22.19.0","dependencies":{"react-qr-code":"^2.0.18"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","globals":"^16.4.0","prettier":"^3.6.2","@eslint/js":"^9.36.0","typescript":"~5.9.3","@types/node":"^24.6.0","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.0.0","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","eslint-config-prettier":"^10.1.8","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dme-onboarding-modal_0.0.2_1760556794231_0.6573779796678363","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@bootnodedev/dme-onboarding-modal","version":"0.0.3","author":{"name":"BootNode"},"license":"MIT","_id":"@bootnodedev/dme-onboarding-modal@0.0.3","maintainers":[{"name":"pablofullana","email":"pablofullana@gmail.com"},{"name":"luchobonatti.bn","email":"luciano@bootnode.dev"},{"name":"gabitoesmiapodo","email":"exepotes@gmail.com"},{"name":"fernandomg","email":"fernando.greco@gmail.com"},{"name":"lmcorbalan","email":"lmcorbalan@gmail.com"},{"name":"fzavalia","email":"zavaliafernando+npmjs@gmail.com"}],"dist":{"shasum":"97445af4bd6606db175eb4d59f24fb9f4302d89d","tarball":"https://registry.npmjs.org/@bootnodedev/dme-onboarding-modal/-/dme-onboarding-modal-0.0.3.tgz","fileCount":7,"integrity":"sha512-gQgTij58JfCK1s+mv8bXloQba7GUWKxm2lATxtStmYYHqwi7xwAASuDiShE6eqL/AtQD0l3GY737xcyOpTtTHA==","signatures":[{"sig":"MEUCIQDeppyy0DuYzWP/tbfz90egaK8QMvto++/mDk+3Hdh3ZAIgPmC+uQlMNWyZ17yDXVJEn5r/7tKQGMxQRWOeHkOiGdw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":127865},"main":"./dist/index.umd.cjs","type":"module","_from":"file:bootnodedev-dme-onboarding-modal-0.0.3.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./dist/index.css":"./dist/index.css"},"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -p tsconfig.lib.json && vite build","format":"prettier . --check","preview":"vite preview","lint:fix":"eslint . --fix","format:fix":"prettier . --write"},"_npmUser":{"name":"fzavalia","email":"zavaliafernando+npmjs@gmail.com"},"prettier":{"tabWidth":2,"printWidth":100},"_resolved":"/private/var/folders/kw/84yv7v091tz2n9gds9g38vyc0000gn/T/4900262ab6b076bbefe1d0332121da05/bootnodedev-dme-onboarding-modal-0.0.3.tgz","_integrity":"sha512-gQgTij58JfCK1s+mv8bXloQba7GUWKxm2lATxtStmYYHqwi7xwAASuDiShE6eqL/AtQD0l3GY737xcyOpTtTHA==","_npmVersion":"10.9.3","description":"A React component for seamless user onboarding to Telegram bot notifications, part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo). This component provides a user-friendly interface that allows users to subscribe to wallet notification","directories":{},"_nodeVersion":"22.19.0","dependencies":{"react-qr-code":"^2.0.18"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","globals":"^16.4.0","prettier":"^3.6.2","@eslint/js":"^9.36.0","typescript":"~5.9.3","@types/node":"^24.6.0","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.0.0","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","eslint-config-prettier":"^10.1.8","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dme-onboarding-modal_0.0.3_1760624686500_0.5559347021885024","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-15T18:32:01.448Z","modified":"2026-07-28T18:22:21.556Z","0.0.1":"2025-10-15T18:32:01.698Z","0.0.2":"2025-10-15T19:33:14.418Z","0.0.3":"2025-10-16T14:24:46.690Z"},"author":{"name":"BootNode"},"license":"MIT","description":"A React component for seamless user onboarding to Telegram bot notifications, part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo). This component provides a user-friendly interface that allows users to subscribe to wallet notification","maintainers":[{"email":"pablofullana@gmail.com","name":"pablofullana"},{"email":"luciano@bootnode.dev","name":"luchobonatti.bn"},{"email":"exepotes@gmail.com","name":"gabitoesmiapodo"},{"email":"fernando.greco@gmail.com","name":"fernandomg"},{"email":"lmcorbalan@gmail.com","name":"lmcorbalan"},{"email":"nicolas@bootnode.dev","name":"nico_bn"},{"email":"zavaliafernando+npmjs@gmail.com","name":"fzavalia"}],"readme":"# DMe Onboarding Modal Component\n\nA React component for seamless user onboarding to Telegram bot notifications, part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo). This component provides a user-friendly interface that allows users to subscribe to wallet notifications on Telegram with a single click or QR scan, without requiring wallet connection.\n\n## Installation\n\n```bash\nnpm install @bootnodedev/dme-onboarding-modal\n```\n\n## Usage\n\n### 1. Import the Component and Styles\n\nIn your main app file (e.g., `App.tsx` or `index.tsx`), import the component's styles:\n\n```tsx\nimport \"@bootnodedev/dme-onboarding-modal/lib/index.css\";\n```\n\n### 2. Use the Component in Your React App\n\n```tsx\nimport { Button } from \"@bootnodedev/dme-onboarding-modal\";\n\nfunction Navbar() {\n  return (\n    <nav>\n      <Button\n        modal={{\n          bot: \"MyBot\",\n          address: \"0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045\",\n          title: \"Stay Updated\",\n          description: \"Scan the QR code or click the button below to get started.\",\n          cta: \"Open Telegram\",\n        }}\n      />\n    </nav>\n  );\n}\n```\n\n### 3. Get the Wallet Address\n\nThe wallet address can be obtained from your dApp's Web3 provider, such as **MetaMask** or **WalletConnect**:\n\n```tsx\nimport { Button } from \"@bootnodedev/dme-onboarding-modal\";\nimport { useAccount } from \"wagmi\"; // or your Web3 library\n\nfunction Navbar() {\n  const { address } = useAccount();\n\n  return (\n    <nav>\n      {address && (\n        <Button\n          modal={{\n            bot: \"MyBot\",\n            address,\n            title: \"Stay Updated\",\n            description: \"Scan the QR code or click the button below to get started.\",\n            cta: \"Open Telegram\",\n          }}\n        />\n      )}\n    </nav>\n  );\n}\n```\n\n## How It Works\n\nWhen clicked, the component opens a modal dialog that displays:\n\n1. **QR Code**: Users can scan with their mobile device to instantly open the Telegram bot and link their wallet\n2. **Direct Link**: Alternative option to open Telegram directly in the browser\n\nThe modal generates a deep link to your Telegram bot with the wallet address as a start parameter, enabling seamless onboarding in a single action.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/BootNodeDev/dme-monorepo/blob/main/LICENSE) file for details.\n\n## Part of DMe Framework\n\nThis component is part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo), a complete solution for building Telegram bot notification systems for Web3 applications.\n","readmeFilename":"README.md"}