{"_id":"@0xkey-io/react-wallet-kit","_rev":"4-7bfb8ab7060d674770a9e710e3e4946b","name":"@0xkey-io/react-wallet-kit","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@0xkey-io/react-wallet-kit","version":"0.1.0","keywords":["0xkey"],"author":{"url":"https://0xkey.com/","name":"0xkey"},"license":"MIT","_id":"@0xkey-io/react-wallet-kit@0.1.0","maintainers":[{"name":"0xkey-developer","email":"developer@0xkey.io"}],"homepage":"https://github.com/0xkey-io/sdk-js/tree/main/packages/react-wallet-kit","bugs":{"url":"https://github.com/0xkey-io/sdk-js/issues"},"dist":{"shasum":"b9a64448f6b185defce4d023ef27ddbd6acf52bb","tarball":"https://registry.npmjs.org/@0xkey-io/react-wallet-kit/-/react-wallet-kit-0.1.0.tgz","fileCount":326,"integrity":"sha512-TDWJC6Yy5Tk0dBccDfjch5yKEpSJRKBuMJhghV+8BZbxsB/AmsFWp9nAk5D1O5P3zLOp6ADl++RN8XFfkSF5Ug==","signatures":[{"sig":"MEUCIEiFEAAzG3/GzVnaiPhILlT2A8mciFhvTUw4uPQSClHNAiEAyKwfwlN0dqEc8x70hl/oropdxEI/Rh9URadIr+io/7E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4010358},"main":"./dist/index.js","_from":"file:0xkey-io-react-wallet-kit-0.1.0.tgz","types":"dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"jest","build":"rollup -c","clean":"rimraf ./dist ./.cache","typecheck":"tsc -p tsconfig.typecheck.json"},"_npmUser":{"name":"0xkey-developer","email":"developer@0xkey.io"},"_resolved":"/private/var/folders/lf/b69416ms3zvccf0ght6bq02r0000gn/T/ee52265f5bbb2e8ba38899f79d28593a/0xkey-io-react-wallet-kit-0.1.0.tgz","_integrity":"sha512-TDWJC6Yy5Tk0dBccDfjch5yKEpSJRKBuMJhghV+8BZbxsB/AmsFWp9nAk5D1O5P3zLOp6ADl++RN8XFfkSF5Ug==","repository":{"url":"git+https://github.com/0xkey-io/sdk-js.git","type":"git","directory":"packages/react-wallet-kit"},"_npmVersion":"11.4.2","description":"The easiest and most powerful way to integrate 0xkey's Embedded Wallets into your React applications.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"clsx":"^2.1.1","viem":"^2.40.2","buffer":"^6.0.3","qrcode.react":"^4.2.0","@noble/hashes":"^1.8.0","@0xkey-io/core":"0.1.0","@headlessui/react":"^2.2.6","libphonenumber-js":"^1.11.14","@0xkey-io/sdk-types":"0.1.0","@0xkey-io/iframe-stamper":"^0.1.0","react-international-phone":"^4.3.0","@fortawesome/react-fontawesome":"^0.2.2","@lottiefiles/react-lottie-player":"^3.6.0","@fortawesome/fontawesome-svg-core":"^6.7.2","@fortawesome/free-solid-svg-icons":"^6.7.2","@fortawesome/free-brands-svg-icons":"^6.7.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^8.0.3","react":"^18.2.0","postcss":"^8.4.38","react-dom":"^18.2.0","typescript":"5.4.3","tailwindcss":"^4.1.10","@types/react":"^18.2.75","autoprefixer":"^10.0.1","@types/react-dom":"^18.2.7","@rollup/plugin-babel":"5.3.0","@rollup/plugin-strip":"^3.0.4","@tailwindcss/postcss":"^4.1.10","@rollup/plugin-node-resolve":"16.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-wallet-kit_0.1.0_1779443597603_0.3839840071252756","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@0xkey-io/react-wallet-kit","version":"0.1.1","keywords":["0xkey"],"author":{"url":"https://0xkey.com/","name":"0xkey"},"license":"MIT","_id":"@0xkey-io/react-wallet-kit@0.1.1","maintainers":[{"name":"0xkey-developer","email":"developer@0xkey.io"}],"homepage":"https://github.com/0xkey-io/sdk-js/tree/main/packages/react-wallet-kit","bugs":{"url":"https://github.com/0xkey-io/sdk-js/issues"},"dist":{"shasum":"8487d844835ff971eb600c56ca7c93940d770bef","tarball":"https://registry.npmjs.org/@0xkey-io/react-wallet-kit/-/react-wallet-kit-0.1.1.tgz","fileCount":326,"integrity":"sha512-uEw4NGRCALo1p3AC+jpt1AnysJsKZZ11vqWx3V1FXI9oGdsfa+ozSlFZKXDZ9iORcJPJTgovR1Wz9EmlwG1ENQ==","signatures":[{"sig":"MEQCIBIFEb/GrBmBZ+NAkim1nFiqtOnpB3bHns1qpyU9Pk73AiBTLD4TdRM1IeSnASQej43r9k3fiGe9nNnmrhb8D0r8yw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4010358},"main":"./dist/index.js","_from":"file:0xkey-io-react-wallet-kit-0.1.1.tgz","types":"dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"jest","build":"rollup -c","clean":"rimraf ./dist ./.cache","typecheck":"tsc -p tsconfig.typecheck.json"},"_npmUser":{"name":"0xkey-developer","email":"developer@0xkey.io"},"_resolved":"/private/var/folders/lf/b69416ms3zvccf0ght6bq02r0000gn/T/56ff0676369c245c843075670b385837/0xkey-io-react-wallet-kit-0.1.1.tgz","_integrity":"sha512-uEw4NGRCALo1p3AC+jpt1AnysJsKZZ11vqWx3V1FXI9oGdsfa+ozSlFZKXDZ9iORcJPJTgovR1Wz9EmlwG1ENQ==","repository":{"url":"git+https://github.com/0xkey-io/sdk-js.git","type":"git","directory":"packages/react-wallet-kit"},"_npmVersion":"11.4.2","description":"The easiest and most powerful way to integrate 0xkey's Embedded Wallets into your React applications.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"clsx":"^2.1.1","viem":"^2.40.2","buffer":"^6.0.3","qrcode.react":"^4.2.0","@noble/hashes":"^1.8.0","@0xkey-io/core":"0.1.1","@headlessui/react":"^2.2.6","libphonenumber-js":"^1.11.14","@0xkey-io/sdk-types":"0.1.0","@0xkey-io/iframe-stamper":"^0.1.0","react-international-phone":"^4.3.0","@fortawesome/react-fontawesome":"^0.2.2","@lottiefiles/react-lottie-player":"^3.6.0","@fortawesome/fontawesome-svg-core":"^6.7.2","@fortawesome/free-solid-svg-icons":"^6.7.2","@fortawesome/free-brands-svg-icons":"^6.7.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^8.0.3","react":"^18.2.0","postcss":"^8.4.38","react-dom":"^18.2.0","typescript":"5.4.3","tailwindcss":"^4.1.10","@types/react":"^18.2.75","autoprefixer":"^10.0.1","@types/react-dom":"^18.2.7","@rollup/plugin-babel":"5.3.0","@rollup/plugin-strip":"^3.0.4","@tailwindcss/postcss":"^4.1.10","@rollup/plugin-node-resolve":"16.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-wallet-kit_0.1.1_1779452055114_0.672111216136841","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@0xkey-io/react-wallet-kit","version":"0.2.0","keywords":["0xkey"],"author":{"url":"https://0xkey.com/","name":"0xkey"},"license":"MIT","_id":"@0xkey-io/react-wallet-kit@0.2.0","maintainers":[{"name":"0xkey-developer","email":"developer@0xkey.io"}],"homepage":"https://github.com/0xkey-io/sdk-js/tree/main/packages/react-wallet-kit","bugs":{"url":"https://github.com/0xkey-io/sdk-js/issues"},"dist":{"shasum":"03ea53d511021e255d659c4c65872d877be9b718","tarball":"https://registry.npmjs.org/@0xkey-io/react-wallet-kit/-/react-wallet-kit-0.2.0.tgz","fileCount":326,"integrity":"sha512-aBYgmP5puvU/wAxJbbe5grWkCJuqE3jC/1uDeke/6AyRWn99KlxbK8BPeZ5HN+Kv9t2qhgaMi5Umq9OyYStcPw==","signatures":[{"sig":"MEUCIDwWdlpsamGZg06PFcoPNzsl2+ycTcM/du/xkpxXJLckAiEAuAnMqoaFl3tgkA2KXaZKtPSHYWxFa+o4v9Qz49B9aCw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4007864},"main":"./dist/index.js","_from":"file:0xkey-io-react-wallet-kit-0.2.0.tgz","types":"dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"jest","build":"rollup -c","clean":"rimraf ./dist ./.cache","typecheck":"tsc -p tsconfig.typecheck.json"},"_npmUser":{"name":"0xkey-developer","email":"developer@0xkey.io"},"_resolved":"/tmp/0d4ee24ea1a71aac9fb24f502f08c1f3/0xkey-io-react-wallet-kit-0.2.0.tgz","_integrity":"sha512-aBYgmP5puvU/wAxJbbe5grWkCJuqE3jC/1uDeke/6AyRWn99KlxbK8BPeZ5HN+Kv9t2qhgaMi5Umq9OyYStcPw==","repository":{"url":"git+https://github.com/0xkey-io/sdk-js.git","type":"git","directory":"packages/react-wallet-kit"},"_npmVersion":"11.5.1","description":"The easiest and most powerful way to integrate 0xkey's Embedded Wallets into your React applications.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"clsx":"^2.1.1","viem":"^2.40.2","buffer":"^6.0.3","qrcode.react":"^4.2.0","@noble/hashes":"^1.8.0","@0xkey-io/core":"0.2.0","@headlessui/react":"^2.2.6","libphonenumber-js":"^1.11.14","@0xkey-io/sdk-types":"0.1.0","@0xkey-io/iframe-stamper":"^0.1.0","react-international-phone":"^4.3.0","@fortawesome/react-fontawesome":"^0.2.2","@lottiefiles/react-lottie-player":"^3.6.0","@fortawesome/fontawesome-svg-core":"^6.7.2","@fortawesome/free-solid-svg-icons":"^6.7.2","@fortawesome/free-brands-svg-icons":"^6.7.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^8.0.3","react":"^18.2.0","postcss":"^8.4.38","react-dom":"^18.2.0","typescript":"5.4.3","tailwindcss":"^4.1.10","@types/react":"^18.2.75","autoprefixer":"^10.0.1","@types/react-dom":"^18.2.7","@rollup/plugin-babel":"5.3.0","@rollup/plugin-strip":"^3.0.4","@tailwindcss/postcss":"^4.1.10","@rollup/plugin-node-resolve":"16.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-wallet-kit_0.2.0_1782244224436_0.18007708735456052","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@0xkey-io/react-wallet-kit","version":"0.3.0","description":"The easiest and most powerful way to integrate 0xkey's Embedded Wallets into your React applications.","main":"./dist/index.js","module":"./dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/styles.css"},"author":{"name":"0xkey","url":"https://0xkey.com/"},"homepage":"https://github.com/0xkey-io/sdk-js/tree/main/packages/react-wallet-kit","bugs":{"url":"https://github.com/0xkey-io/sdk-js/issues"},"repository":{"type":"git","url":"git+https://github.com/0xkey-io/sdk-js.git","directory":"packages/react-wallet-kit"},"keywords":["0xkey"],"license":"MIT","dependencies":{"@fortawesome/fontawesome-svg-core":"^6.7.2","@fortawesome/free-brands-svg-icons":"^6.7.2","@fortawesome/free-solid-svg-icons":"^6.7.2","@fortawesome/react-fontawesome":"^0.2.2","@headlessui/react":"^2.2.6","@lottiefiles/react-lottie-player":"^3.6.0","@noble/hashes":"^1.8.0","buffer":"^6.0.3","clsx":"^2.1.1","libphonenumber-js":"^1.11.14","qrcode.react":"^4.2.0","react-international-phone":"^4.3.0","viem":"^2.40.2","@0xkey-io/core":"0.2.0","@0xkey-io/crypto":"0.3.0","@0xkey-io/sdk-types":"0.1.1","@0xkey-io/iframe-stamper":"^0.1.0"},"devDependencies":{"@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"16.0.0","@rollup/plugin-strip":"^3.0.4","@tailwindcss/postcss":"^4.1.10","@types/react":"^18.2.75","@types/react-dom":"^18.2.7","autoprefixer":"^10.0.1","glob":"^8.0.3","postcss":"^8.4.38","react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^4.1.10","typescript":"5.4.3"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"engines":{"node":">=18.0.0"},"publishConfig":{"access":"public"},"scripts":{"build":"rollup -c","clean":"rimraf ./dist ./.cache","typecheck":"tsc -p tsconfig.typecheck.json","test":"jest"},"_id":"@0xkey-io/react-wallet-kit@0.3.0","_integrity":"sha512-bY1PnT8H71tjcQQ5jcIYKxYjzVRSSJnAgZKRuv0lpNGGKVb14pp+3WQS2TaTafEedrXVf0Ee7wGDMjsbNwI3Bg==","_resolved":"/tmp/c092c2fffd0a7956767ad57674a49ac5/0xkey-io-react-wallet-kit-0.3.0.tgz","_from":"file:0xkey-io-react-wallet-kit-0.3.0.tgz","_nodeVersion":"20.17.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-bY1PnT8H71tjcQQ5jcIYKxYjzVRSSJnAgZKRuv0lpNGGKVb14pp+3WQS2TaTafEedrXVf0Ee7wGDMjsbNwI3Bg==","shasum":"30e5cfdb7067e11d6477a7a1975f8742db6fd9fe","tarball":"https://registry.npmjs.org/@0xkey-io/react-wallet-kit/-/react-wallet-kit-0.3.0.tgz","fileCount":332,"unpackedSize":4078991,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDvPe1K0n147jlJ5Md6dUljQa1/z01dnIya35R33UpW5AIgcLZWnBYGQBXm8od45dCsN/rW3LFmv7+KkC9XbxYa64A="}]},"_npmUser":{"name":"0xkey-developer","email":"developer@0xkey.io"},"directories":{},"maintainers":[{"name":"0xkey-developer","email":"developer@0xkey.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-wallet-kit_0.3.0_1783088356361_0.9420545772067588"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-22T09:53:17.517Z","modified":"2026-07-03T14:19:16.659Z","0.1.0":"2026-05-22T09:53:17.872Z","0.1.1":"2026-05-22T12:14:15.322Z","0.2.0":"2026-06-23T19:50:24.617Z","0.3.0":"2026-07-03T14:19:16.521Z"},"bugs":{"url":"https://github.com/0xkey-io/sdk-js/issues"},"author":{"name":"0xkey","url":"https://0xkey.com/"},"license":"MIT","homepage":"https://github.com/0xkey-io/sdk-js/tree/main/packages/react-wallet-kit","keywords":["0xkey"],"repository":{"type":"git","url":"git+https://github.com/0xkey-io/sdk-js.git","directory":"packages/react-wallet-kit"},"description":"The easiest and most powerful way to integrate 0xkey's Embedded Wallets into your React applications.","maintainers":[{"name":"0xkey-developer","email":"developer@0xkey.io"}],"readme":"# @0xkey-io/react-wallet-kit\n\nThe `@0xkey-io/react-wallet-kit` is a powerful SDK that allows you to integrate ZeroXKey's Embedded Wallets into your React applications. It provides a set of UI components and easy-to-use functions, all exported from a hook, enabling you to quickly build secure embedded wallet experiences.\n\n## Getting started\n\nTo learn how to setup your ZeroXKey organization and configure the Auth Proxy, check out our [Getting Started](https://docs.0xkey.com/sdks/react/getting-started) guide!\n\n## Installation\n\nYou can use `@0xkey-io/react-wallet-kit` in any React based web application.\n\nFor this guide, let's create a new `Next.js` app. If you already have an existing app, you don't need to do this.\n\n```bash npx\nnpx create-next-app@latest\n```\n\nNow, install the ZeroXKey React Wallet Kit package:\n\n<CodeGroup>\n\n```bash npm\nnpm install @0xkey-io/react-wallet-kit\n```\n\n```bash pnpm\npnpm add @0xkey-io/react-wallet-kit\n```\n\n```bash yarn\nyarn add @0xkey-io/react-wallet-kit\n```\n\n</CodeGroup>\n\n## Provider\n\nWrap your app with the `ZeroXKeyProvider` component, and import `\"@0xkey-io/react-wallet-kit/styles.css\"` to include styles for the UI components.\n\nWith Next.js App Router, keep `app/layout.tsx` as a server component and create a separate `app/providers.tsx` client wrapper. This is necessary if you want to pass callbacks (e.g., onError), which must be defined in a client component.\n\n```tsx app/providers.tsx\n\"use client\";\n\nimport {\n  ZeroXKeyProvider,\n  ZeroXKeyProviderConfig,\n} from \"@0xkey-io/react-wallet-kit\";\n\nconst zeroXKeyConfig: ZeroXKeyProviderConfig = {\n  organizationId: process.env.NEXT_PUBLIC_ORGANIZATION_ID!,\n  authProxyConfigId: process.env.NEXT_PUBLIC_AUTH_PROXY_CONFIG_ID!,\n};\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  return <ZeroXKeyProvider config={zeroXKeyConfig}>{children}</ZeroXKeyProvider>;\n}\n```\n\nIn case anything goes wrong, let's add an `onError` callback to the `ZeroXKeyProvider` to catch any errors that may occur.\n\n```tsx app/providers.tsx\n<ZeroXKeyProvider\n  config={zeroXKeyConfig}\n  callbacks={{\n    onError: (error) => console.error(\"ZeroXKey error:\", error),\n  }}\n>\n```\n\nThen, use the `Providers` component to wrap your app in `app/layout.tsx`.\n\n```tsx app/layout.tsx\nimport \"@0xkey-io/react-wallet-kit/styles.css\";\nimport \"./globals.css\";\nimport Providers from \"./providers\";\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <Providers>{children}</Providers>\n      </body>\n    </html>\n  );\n}\n```\n\n> **Why this pattern?**\n>\n> - Callbacks (and other interactive bits) must be declared in a client component.\n> - Keeping layout.tsx as a server component maintains optimal rendering and avoids making your entire app client-side unnecessarily.\n> - Centralizing ZeroXKey setup in app/providers.tsx keeps configuration, styles, and callbacks in one place.\n\n\n## Quick authentication\n\nThe easiest way to handle authentication is using the `handleLogin` function from the `useZeroXKey` hook. This will automatically show a modal with all the authentication methods you've enabled in your dashboard.\n\n```tsx\nimport { useZeroXKey } from \"@0xkey-io/react-wallet-kit\";\n\nfunction LoginButton() {\n  const { handleLogin } = useZeroXKey();\n\n  return <button onClick={handleLogin}>Login / Sign Up</button>;\n}\n```\n\n\nFor more information, check out [our docs!](https://docs.0xkey.com/sdks/react)","readmeFilename":"README.MD"}