{"_id":"@0xnx/react-wallet-kit","_rev":"4-d79e5e9a878ac2e556862fd0b6aca4f2","name":"@0xnx/react-wallet-kit","dist-tags":{"latest":"1.7.1-fix.2"},"versions":{"1.6.3-fix.1":{"name":"@0xnx/react-wallet-kit","version":"1.6.3-fix.1","keywords":["turnkey"],"author":{"url":"https://turnkey.com/","name":"Turnkey"},"license":"MIT","_id":"@0xnx/react-wallet-kit@1.6.3-fix.1","maintainers":[{"name":"0xnx","email":"mvxnxh@gmail.com"}],"homepage":"https://github.com/tkhq/sdk","bugs":{"url":"https://github.com/tkhq/sdk/issues"},"dist":{"shasum":"cd19123af4e8edda0d109810fee0ccf1b3b267c3","tarball":"https://registry.npmjs.org/@0xnx/react-wallet-kit/-/react-wallet-kit-1.6.3-fix.1.tgz","fileCount":285,"integrity":"sha512-wIL+mhtrXFi3AwP/NIIE2o+4xF2jHMrE7/+EeknK8M7uRl/r885ilxvn1Op0IkTbeA7QwqPWJqYQqVxzgnrRVg==","signatures":[{"sig":"MEUCIEcCtmd/mTeJrFNFXL8rJeiVkVsFcdURd1o2Qf0S2YLDAiEAq4t4TnEbMEaPH3JIrySblFKUfALv831sSds6I2EUG0M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3963168},"main":"./dist/index.js","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"},"gitHead":"4358ae43f9271917008f4183eaa435554565793c","scripts":{"test":"jest","build":"rollup -c","clean":"rimraf ./dist ./.cache","typecheck":"tsc -p tsconfig.typecheck.json","prepublishOnly":"pnpm run clean && pnpm run build"},"_npmUser":{"name":"0xnx","email":"mvxnxh@gmail.com"},"repository":{"url":"git+https://github.com/metavaultorg/turnkey-sdk.git","type":"git","directory":"packages/react-wallet-kit"},"_npmVersion":"10.8.2","description":"The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.","directories":{},"_nodeVersion":"20.19.4","dependencies":{"clsx":"^2.1.1","viem":"^2.40.2","buffer":"^6.0.3","qrcode.react":"^4.2.0","@noble/hashes":"^1.8.0","@turnkey/core":"workspace:*","@headlessui/react":"^2.2.6","libphonenumber-js":"^1.11.14","@turnkey/sdk-types":"workspace:*","@turnkey/iframe-stamper":"workspace:^","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_1.6.3-fix.1_1767694045103_0.19926395032251154","host":"s3://npm-registry-packages-npm-production"}},"1.6.3-fix.2":{"name":"@0xnx/react-wallet-kit","version":"1.6.3-fix.2","keywords":["turnkey"],"author":{"url":"https://turnkey.com/","name":"Turnkey"},"license":"MIT","_id":"@0xnx/react-wallet-kit@1.6.3-fix.2","maintainers":[{"name":"0xnx","email":"mvxnxh@gmail.com"}],"homepage":"https://github.com/tkhq/sdk","bugs":{"url":"https://github.com/tkhq/sdk/issues"},"dist":{"shasum":"5e5d9dfc6dc541db9ebe0578769698c264065533","tarball":"https://registry.npmjs.org/@0xnx/react-wallet-kit/-/react-wallet-kit-1.6.3-fix.2.tgz","fileCount":286,"integrity":"sha512-Sr9ycoCupeFHI7fP5dU/IUwHBUUrO2R+rXq5KfKUo1dnVnZ8s2PGTwxPX0Ypqsq5DpGQkzKgYZLMCG0QLIGqAg==","signatures":[{"sig":"MEQCIAYvEiocSogSWwBquZuBtrj3lQU8NDkhPam3OFu8YANLAiASJtBCgE+lO7nxaeF56gqG9khJ4gB9yNHPsscQwkAwSg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3974429},"main":"./dist/index.js","_from":"file:0xnx-react-wallet-kit-1.6.3-fix.2.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":"0xnx","email":"mvxnxh@gmail.com"},"_resolved":"/tmp/0a1040c54ea1c51f9a8124105221d34a/0xnx-react-wallet-kit-1.6.3-fix.2.tgz","_integrity":"sha512-Sr9ycoCupeFHI7fP5dU/IUwHBUUrO2R+rXq5KfKUo1dnVnZ8s2PGTwxPX0Ypqsq5DpGQkzKgYZLMCG0QLIGqAg==","repository":{"url":"git+https://github.com/metavaultorg/turnkey-sdk.git","type":"git","directory":"packages/react-wallet-kit"},"_npmVersion":"10.8.2","description":"The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.","directories":{},"_nodeVersion":"20.19.4","dependencies":{"clsx":"^2.1.1","viem":"^2.40.2","buffer":"^6.0.3","qrcode.react":"^4.2.0","@noble/hashes":"^1.8.0","@turnkey/core":"1.8.3","@headlessui/react":"^2.2.6","libphonenumber-js":"^1.11.14","@turnkey/sdk-types":"0.9.0","@turnkey/iframe-stamper":"^2.9.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_1.6.3-fix.2_1767695088232_0.9011643544167482","host":"s3://npm-registry-packages-npm-production"}},"1.7.1-fix.1":{"name":"@0xnx/react-wallet-kit","version":"1.7.1-fix.1","keywords":["turnkey"],"author":{"url":"https://turnkey.com/","name":"Turnkey"},"license":"MIT","_id":"@0xnx/react-wallet-kit@1.7.1-fix.1","maintainers":[{"name":"0xnx","email":"mvxnxh@gmail.com"}],"homepage":"https://github.com/tkhq/sdk","bugs":{"url":"https://github.com/tkhq/sdk/issues"},"dist":{"shasum":"59c19c6d450a5b835883f022097e60b060c0f310","tarball":"https://registry.npmjs.org/@0xnx/react-wallet-kit/-/react-wallet-kit-1.7.1-fix.1.tgz","fileCount":286,"integrity":"sha512-hlur/Pmpu7HlmMA3bJ+p1i1sK70WJO2X5CYvfVd2niL1sceEMmKDna1wwbuJP7lGfR1rl48QMCOeoDFE2k8n3g==","signatures":[{"sig":"MEQCIHDHTkWXMbePUg+HbKo44SnUYPTA72zjFlhuAvFA5sCeAiBCAi1I/aH3VJZEzH5YKOTbwrWlJ12L5arnpu44S378uw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3975142},"main":"./dist/index.js","_from":"file:0xnx-react-wallet-kit-1.7.1-fix.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":"0xnx","email":"mvxnxh@gmail.com"},"_resolved":"/tmp/4749384ee3ad580b3c6593f2a918dcc4/0xnx-react-wallet-kit-1.7.1-fix.1.tgz","_integrity":"sha512-hlur/Pmpu7HlmMA3bJ+p1i1sK70WJO2X5CYvfVd2niL1sceEMmKDna1wwbuJP7lGfR1rl48QMCOeoDFE2k8n3g==","repository":{"url":"git+https://github.com/metavaultorg/turnkey-sdk.git","type":"git","directory":"packages/react-wallet-kit"},"_npmVersion":"10.8.2","description":"The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.","directories":{},"_nodeVersion":"20.19.4","dependencies":{"clsx":"^2.1.1","viem":"^2.40.2","buffer":"^6.0.3","qrcode.react":"^4.2.0","@noble/hashes":"^1.8.0","@turnkey/core":"1.10.0","@headlessui/react":"^2.2.6","libphonenumber-js":"^1.11.14","@turnkey/sdk-types":"0.11.0","@turnkey/iframe-stamper":"^2.9.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_1.7.1-fix.1_1767779578019_0.6245475824367508","host":"s3://npm-registry-packages-npm-production"}},"1.7.1-fix.2":{"name":"@0xnx/react-wallet-kit","version":"1.7.1-fix.2","description":"The easiest and most powerful way to integrate Turnkey'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":"Turnkey","url":"https://turnkey.com/"},"homepage":"https://github.com/tkhq/sdk","bugs":{"url":"https://github.com/tkhq/sdk/issues"},"repository":{"type":"git","url":"git+https://github.com/metavaultorg/turnkey-sdk.git","directory":"packages/react-wallet-kit"},"keywords":["turnkey"],"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","@turnkey/iframe-stamper":"^2.9.0","@turnkey/sdk-types":"0.11.0","@turnkey/core":"1.10.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":"@0xnx/react-wallet-kit@1.7.1-fix.2","_integrity":"sha512-XLRk5YAW/605KpgY68EylH34Ods/btu7AVW+Pkj7T2chF5Fs9VOmzudI4q3jGFwanUFL8p9VzqImUPanN9DzVg==","_resolved":"/tmp/466e45b92bc6d6945e6e78488f945189/0xnx-react-wallet-kit-1.7.1-fix.2.tgz","_from":"file:0xnx-react-wallet-kit-1.7.1-fix.2.tgz","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-XLRk5YAW/605KpgY68EylH34Ods/btu7AVW+Pkj7T2chF5Fs9VOmzudI4q3jGFwanUFL8p9VzqImUPanN9DzVg==","shasum":"79c0453d70ef993bea030076b556b4fdc8862e6a","tarball":"https://registry.npmjs.org/@0xnx/react-wallet-kit/-/react-wallet-kit-1.7.1-fix.2.tgz","fileCount":286,"unpackedSize":3974431,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEAykmzwzaqWmNiTFzQgJKY/Vz4veBN0Sxm8axWIaOs2AiAzRFOLo0Ltf0PWRZfyn0pS+QV0WajZVSkTWWvPmoy+YA=="}]},"_npmUser":{"name":"0xnx","email":"mvxnxh@gmail.com"},"directories":{},"maintainers":[{"name":"0xnx","email":"mvxnxh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-wallet-kit_1.7.1-fix.2_1767786978007_0.7936015544379729"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-06T10:07:24.968Z","modified":"2026-01-07T11:56:18.411Z","1.6.3-fix.1":"2026-01-06T10:07:25.331Z","1.6.3-fix.2":"2026-01-06T10:24:48.475Z","1.7.1-fix.1":"2026-01-07T09:52:58.214Z","1.7.1-fix.2":"2026-01-07T11:56:18.202Z"},"bugs":{"url":"https://github.com/tkhq/sdk/issues"},"author":{"name":"Turnkey","url":"https://turnkey.com/"},"license":"MIT","homepage":"https://github.com/tkhq/sdk","keywords":["turnkey"],"repository":{"type":"git","url":"git+https://github.com/metavaultorg/turnkey-sdk.git","directory":"packages/react-wallet-kit"},"description":"The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.","maintainers":[{"name":"0xnx","email":"mvxnxh@gmail.com"}],"readme":"# @turnkey/react-wallet-kit\n\nThe `@turnkey/react-wallet-kit` is a powerful SDK that allows you to integrate Turnkey'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 Turnkey organization and configure the Auth Proxy, check out our [Getting Started](https://docs.turnkey.com/sdks/react/getting-started) guide!\n\n## Installation\n\nYou can use `@turnkey/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 Turnkey React Wallet Kit package:\n\n<CodeGroup>\n\n```bash npm\nnpm install @turnkey/react-wallet-kit\n```\n\n```bash pnpm\npnpm add @turnkey/react-wallet-kit\n```\n\n```bash yarn\nyarn add @turnkey/react-wallet-kit\n```\n\n</CodeGroup>\n\n## Provider\n\nWrap your app with the `TurnkeyProvider` component, and import `\"@turnkey/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  TurnkeyProvider,\n  TurnkeyProviderConfig,\n} from \"@turnkey/react-wallet-kit\";\n\nconst turnkeyConfig: TurnkeyProviderConfig = {\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 <TurnkeyProvider config={turnkeyConfig}>{children}</TurnkeyProvider>;\n}\n```\n\nIn case anything goes wrong, let's add an `onError` callback to the `TurnkeyProvider` to catch any errors that may occur.\n\n```tsx app/providers.tsx\n<TurnkeyProvider\n  config={turnkeyConfig}\n  callbacks={{\n    onError: (error) => console.error(\"Turnkey 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 \"@turnkey/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 Turnkey 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 `useTurnkey` hook. This will automatically show a modal with all the authentication methods you've enabled in your dashboard.\n\n```tsx\nimport { useTurnkey } from \"@turnkey/react-wallet-kit\";\n\nfunction LoginButton() {\n  const { handleLogin } = useTurnkey();\n\n  return <button onClick={handleLogin}>Login / Sign Up</button>;\n}\n```\n\n\nFor more information, check out [our docs!](https://docs.turnkey.com/sdks/react)","readmeFilename":"README.MD"}