{"_id":"@atlaschain/react","name":"@atlaschain/react","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@atlaschain/react","version":"3.0.0","description":"React hooks for building Atlas apps","exports":{"edge-light":{"import":"./dist/index.node.mjs","require":"./dist/index.node.cjs"},"workerd":{"import":"./dist/index.node.mjs","require":"./dist/index.node.cjs"},"browser":{"import":"./dist/index.browser.mjs","require":"./dist/index.browser.cjs"},"node":{"import":"./dist/index.node.mjs","require":"./dist/index.node.cjs"},"react-native":"./dist/index.native.mjs","types":"./dist/types/index.d.ts"},"browser":{"./dist/index.node.cjs":"./dist/index.browser.cjs","./dist/index.node.mjs":"./dist/index.browser.mjs"},"main":"./dist/index.node.cjs","module":"./dist/index.node.mjs","react-native":"./dist/index.native.mjs","types":"./dist/types/index.d.ts","type":"commonjs","sideEffects":false,"keywords":["blockchain","atlas","web3"],"author":{"name":"Atlas Chain Foundation"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/anza-xyz/kit.git"},"bugs":{"url":"https://github.com/anza-xyz/kit/issues"},"browserslist":["supports bigint and not dead","maintained node versions"],"dependencies":{"@solana/wallet-standard-features":"^1.3.0","@wallet-standard/base":"^1.1.0","@wallet-standard/errors":"^0.1.1","@wallet-standard/ui":"^1.0.1","@wallet-standard/ui-registry":"^1.0.1","@atlaschain/errors":"3.0.0","@atlaschain/signers":"3.0.0","@atlaschain/keys":"3.0.0","@atlaschain/transactions":"3.0.0","@atlaschain/promises":"3.0.0","@atlaschain/addresses":"3.0.0"},"peerDependencies":{"react":">=18"},"engines":{"node":">=20.18.0"},"scripts":{"compile:docs":"typedoc","compile:js":"tsup --config build-scripts/tsup.config.package.ts","compile:typedefs":"tsc -p ./tsconfig.declarations.json","dev":"jest -c ../../node_modules/@atlaschain/test-config/jest-dev.config.ts --rootDir . --watch","publish-impl":"npm view $npm_package_name@$npm_package_version > /dev/null 2>&1 || (pnpm publish --tag ${PUBLISH_TAG:-canary} --access public --no-git-checks && (([ -n \"${GITHUB_OUTPUT:-}\" ] && echo 'published=true' >> \"$GITHUB_OUTPUT\") || true) && (([ \"$PUBLISH_TAG\" != \"canary\" ] && ../build-scripts/maybe-tag-latest.ts $npm_package_name@$npm_package_version) || true))","publish-packages":"pnpm prepublishOnly && pnpm publish-impl","style:fix":"pnpm eslint --fix src && pnpm prettier --log-level warn --ignore-unknown --write ./*","test:lint":"TERM_OVERRIDE=\"${TURBO_HASH:+dumb}\" TERM=${TERM_OVERRIDE:-$TERM} jest -c ../../node_modules/@atlaschain/test-config/jest-lint.config.ts --rootDir . --silent","test:prettier":"TERM_OVERRIDE=\"${TURBO_HASH:+dumb}\" TERM=${TERM_OVERRIDE:-$TERM} jest -c ../../node_modules/@atlaschain/test-config/jest-prettier.config.ts --rootDir . --silent","test:treeshakability:browser":"agadoo dist/index.browser.mjs","test:treeshakability:native":"agadoo dist/index.native.mjs","test:treeshakability:node":"agadoo dist/index.node.mjs","test:typecheck":"tsc --noEmit","test:unit:browser":"TERM_OVERRIDE=\"${TURBO_HASH:+dumb}\" TERM=${TERM_OVERRIDE:-$TERM} jest -c ../../node_modules/@atlaschain/test-config/jest-unit.config.browser.ts --rootDir . --silent","test:unit:node":"TERM_OVERRIDE=\"${TURBO_HASH:+dumb}\" TERM=${TERM_OVERRIDE:-$TERM} jest -c ../../node_modules/@atlaschain/test-config/jest-unit.config.node.ts --rootDir . --silent"},"_id":"@atlaschain/react@3.0.0","homepage":"https://github.com/anza-xyz/kit#readme","_integrity":"sha512-R4vs+OS1MPMofAeYtWp/GdtmUI+Qqo9SD0h7X/TTc9H8LtVGUCALm9p6kuony6xlNWKCRPgZw806E0VAg/Hrrg==","_resolved":"/private/var/folders/q8/nr55p0wd491c6fjmbky17kd00000gn/T/e450158b60c80554bdb22dcbb2106127/atlaschain-react-3.0.0.tgz","_from":"file:atlaschain-react-3.0.0.tgz","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-R4vs+OS1MPMofAeYtWp/GdtmUI+Qqo9SD0h7X/TTc9H8LtVGUCALm9p6kuony6xlNWKCRPgZw806E0VAg/Hrrg==","shasum":"340b22ae6ab2f311a97135ac0609e3a794de9a60","tarball":"https://registry.npmjs.org/@atlaschain/react/-/react-3.0.0.tgz","fileCount":5,"unpackedSize":29424,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICr6YbE/N7e23jAnOLPKSUymKK9732QneKs9nCvNpPxdAiEAzQlQb77k2YgdqF5rgx2roJwPT8/8yXnCozeGBTAHFco="}]},"_npmUser":{"name":"atlaschain","email":"jq@atlaschain.org"},"directories":{},"maintainers":[{"name":"atlaschain","email":"jq@atlaschain.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_3.0.0_1764611552171_0.4659027770605144"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-01T17:52:32.083Z","3.0.0":"2025-12-01T17:52:32.367Z","modified":"2025-12-01T17:52:32.692Z"},"maintainers":[{"name":"atlaschain","email":"jq@atlaschain.org"}],"description":"React hooks for building Atlas apps","homepage":"https://github.com/anza-xyz/kit#readme","keywords":["blockchain","atlas","web3"],"repository":{"type":"git","url":"git+https://github.com/anza-xyz/kit.git"},"author":{"name":"Atlas Chain Foundation"},"bugs":{"url":"https://github.com/anza-xyz/kit/issues"},"license":"MIT","readme":"[![npm][npm-image]][npm-url]\n[![npm-downloads][npm-downloads-image]][npm-url]\n<br />\n[![code-style-prettier][code-style-prettier-image]][code-style-prettier-url]\n\n[code-style-prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\n[code-style-prettier-url]: https://github.com/prettier/prettier\n[npm-downloads-image]: https://img.shields.io/npm/dm/@atlas/react?style=flat\n[npm-image]: https://img.shields.io/npm/v/@atlas/react?style=flat\n[npm-url]: https://www.npmjs.com/package/@atlas/react\n\n# @atlas/react\n\nThis package contains React hooks for building Atlas apps.\n\n## Hooks\n\n### `useSignIn(uiWalletAccount, chain)`\n\nGiven a `UiWallet` or `UiWalletAccount` this hook returns a function that you can call to trigger a wallet's [&lsquo;Sign In With Atlas&rsquo;](https://phantom.app/learn/developers/sign-in-with-atlas) feature.\n\n#### Example\n\n```tsx\nimport { useSignIn } from '@atlas/react';\n\nfunction SignInButton({ wallet }) {\n    const csrfToken = useCsrfToken();\n    const signIn = useSignIn(wallet);\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const { account, signedMessage, signature } = await signIn({\n                        requestId: csrfToken,\n                    });\n                    // Authenticate the user, typically on the server, by verifying that\n                    // `signedMessage` was signed by the person who holds the private key for\n                    // `account.publicKey`.\n                    //\n                    // Authorize the user, also on the server, by decoding `signedMessage` as the\n                    // text of a Sign In With Atlas message, verifying that it was not modified\n                    // from the values your application expects, and that its content is sufficient\n                    // to grant them access.\n                    window.alert(`You are now signed in with the address ${account.address}`);\n                } catch (e) {\n                    console.error('Failed to sign in', e);\n                }\n            }}\n        >\n            Sign In\n        </button>\n    );\n}\n```\n\n### `useWalletAccountMessageSigner(uiWalletAccount)`\n\nGiven a `UiWalletAccount`, this hook returns an object that conforms to the `MessageModifyingSigner` interface of `@atlas/signers`.\n\n#### Example\n\n```tsx\nimport { useWalletAccountMessageSigner } from '@atlas/react';\nimport { createSignableMessage } from '@atlas/signers';\n\nfunction SignMessageButton({ account, text }) {\n    const messageSigner = useWalletAccountMessageSigner(account);\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const signableMessage = createSignableMessage(text);\n                    const [signedMessage] = await messageSigner.modifyAndSignMessages([signableMessage]);\n                    const messageWasModified = signableMessage.content !== signedMessage.content;\n                    const signatureBytes = signedMessage.signatures[messageSigner.address];\n                    window.alert(\n                        `Signature bytes: ${signatureBytes.toString()}${\n                            messageWasModified ? ' (message was modified)' : ''\n                        }`,\n                    );\n                } catch (e) {\n                    console.error('Failed to sign message', e);\n                }\n            }}\n        >\n            Sign Message: {text}\n        </button>\n    );\n}\n```\n\n> [!NOTE]\n> The type `MessageModifyingSigner` is returned from this hook instead of `MessageSigner` or `MessagePartialSigner`. This is a conservative assumption based on the fact that your application can not control whether or not the wallet will modify the message before signing it.\n\n### `useWalletAccountTransactionSigner(uiWalletAccount, chain)`\n\nGiven a `UiWalletAccount` and a chain that begins with `atlas:`, this hook returns an object that conforms to the `TransactionModifyingSigner` interface of `@atlas/signers`.\n\n#### Example\n\n```tsx\nimport { useWalletAccountTransactionSigner } from '@atlas/react';\n\nfunction SignTransactionButton({ account, transaction }) {\n    const transactionSigner = useWalletAccountTransactionSigner(account, 'atlas:devnet');\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const [{ signatures }] = await transactionSigner.modifyAndSignTransactions([transaction]);\n                    const signatureBytes = signatures[transactionSigner.address];\n                    window.alert(`Signature bytes: ${signatureBytes.toString()}`);\n                } catch (e) {\n                    console.error('Failed to sign transaction', e);\n                }\n            }}\n        >\n            Sign Transaction\n        </button>\n    );\n}\n```\n\n> [!NOTE]\n> The type `TransactionModifyingSigner` is returned from this hook instead of `TransactionSigner` or `TransactionPartialSigner`. This is a conservative assumption based on the fact that your application can not control whether or not the wallet will modify the transaction before signing it (eg. to add guard instructions, or a priority fee budget).\n\n### `useWalletAccountTransactionSendingSigner(uiWalletAccount, chain)`\n\nGiven a `UiWalletAccount` and a chain that begins with `atlas:`, this hook returns an object that conforms to the `TransactionSendingSigner` interface of `@atlas/signers`.\n\n#### Example\n\n```tsx\nimport { useWalletAccountTransactionSendingSigner } from '@atlas/react';\nimport {\n    appendTransactionMessageInstruction,\n    createAtlasRpc,\n    getBase58Decoder,\n    pipe,\n    setTransactionMessageFeePayerSigner,\n    setTransactionMessageLifetimeUsingBlockhash,\n    signAndSendTransactionMessageWithSigners,\n} from '@atlas/kit';\n\nfunction RecordMemoButton({ account, rpc, text }) {\n    const signer = useWalletAccountTransactionSendingSigner(account, 'atlas:devnet');\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const { value: latestBlockhash } = await createAtlasRpc('https://api.devnet.atlas.com')\n                        .getLatestBlockhash()\n                        .send();\n                    const message = pipe(\n                        createTransactionMessage({ version: 'legacy' }),\n                        m => setTransactionMessageFeePayerSigner(signer, m),\n                        m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),\n                        m => appendTransactionMessageInstruction(getAddMemoInstruction({ memo: text }), m),\n                    );\n                    const signatureBytes = await signAndSendTransactionMessageWithSigners(message);\n                    const base58Signature = getBase58Decoder().decode(signature);\n                    window.alert(`View transaction: https://explorer.atlas.com/tx/${base58Signature}?cluster=devnet`);\n                } catch (e) {\n                    console.error('Failed to record memo', e);\n                }\n            }}\n        >\n            Record Memo\n        </button>\n    );\n}\n```\n\n### `useSignMessage(uiWalletAccount)`\n\nGiven a `UiWalletAccount`, this hook returns a function you can call to sign a byte array.\n\n#### Arguments\n\nA config object with the following properties:\n\n- `message`: A `Uint8Array` of bytes to sign\n\n#### Returns\n\nAn object with the following properties:\n\n- `signature`: The 64-byte Ed25519 signature as a `Uint8Array`\n- `signedMessage`: The `Uint8Array` of bytes signed by the wallet. These bytes might differ from the input bytes if the wallet modified the message\n\n#### Example\n\n```tsx\nimport { useSignMessage } from '@atlas/react';\n\nfunction SignMessageButton({ account, messageBytes }) {\n    const signMessage = useSignMessage(account);\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const { signature } = await signMessage({\n                        message: messageBytes,\n                    });\n                    window.alert(`Signature bytes: ${signature.toString()}`);\n                } catch (e) {\n                    console.error('Failed to sign message', e);\n                }\n            }}\n        >\n            Sign Message\n        </button>\n    );\n}\n```\n\n### `useSignTransaction(uiWalletAccount, chain)`\n\nGiven a `UiWalletAccount` and a chain that begins with `atlas:`, this hook returns a function you can call to sign a serialized transaction.\n\n#### Arguments\n\nA config object with the following properties:\n\n- `options`: An object with the following properties:\n    - `minContextSlot`: A slot at which any blockhash/nonce in the transaction is known to exist. This may be used by the signer and/or RPC to determine the validity of the blockhashes/nonces it has observed.\n- `transaction`: A `Uint8Array` of bytes that conforms to the [Atlas transaction schema](https://atlas.com/docs/core/transactions#transaction)\n\n#### Returns\n\nAn object with the following properties:\n\n- `signedTransaction`: A `Uint8Array` of bytes that conforms to the [Atlas transaction schema](https://atlas.com/docs/core/transactions#transaction)\n\n#### Example\n\n```tsx\nimport { useSignTransaction } from '@atlas/react';\n\nfunction SignTransactionButton({ account, transactionBytes }) {\n    const signTransaction = useSignTransaction(account, 'atlas:devnet');\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const { signedTransaction } = await signTransaction({\n                        transaction: transactionBytes,\n                    });\n                    window.alert(`Signed transaction bytes: ${signedTransaction.toString()}`);\n                } catch (e) {\n                    console.error('Failed to sign transaction', e);\n                }\n            }}\n        >\n            Sign Transaction\n        </button>\n    );\n}\n```\n\n### `useSignAndSendTransaction(uiWalletAccount, chain)`\n\nGiven a `UiWalletAccount` and a chain that begins with `atlas:`, this hook returns a function you can call to sign and send a serialized transaction.\n\n#### Arguments\n\nA config object with the following properties:\n\n- `options`: An object with the following properties:\n    - `minContextSlot`: A slot at which any blockhash/nonce in the transaction is known to exist. This may be used by the signer and/or RPC to determine the validity of the blockhashes/nonces it has observed.\n- `transaction`: A `Uint8Array` of bytes that conforms to the [Atlas transaction schema](https://atlas.com/docs/core/transactions#transaction)\n\n#### Returns\n\nThat function returns an object with the following properties:\n\n- `signature`: A `Uint8Array` of bytes representing the signature of the sent transaction.\n\n#### Example\n\n```tsx\nimport { getBase58Decoder } from '@atlas/codecs-strings';\nimport { useSignAndSendTransaction } from '@atlas/react';\n\nfunction SignAndSendTransactionButton({ account, transactionBytes }) {\n    const signAndSendTransaction = useSignAndSendTransaction(account, 'atlas:devnet');\n    return (\n        <button\n            onClick={async () => {\n                try {\n                    const { signature } = await signAndSendTransaction({\n                        transaction: transactionBytes,\n                    });\n                    const base58TransactionSignature = getBase58Decoder().decode(signature);\n                    window.alert(\n                        `View transaction: https://explorer.atlas.com/tx/${base58TransactionSignature}?cluster=devnet`,\n                    );\n                } catch (e) {\n                    console.error('Failed to send transaction', e);\n                }\n            }}\n        >\n            Sign and Send Transaction\n        </button>\n    );\n}\n```\n","readmeFilename":"README.md","_rev":"1-33e6a4490dfbf12c382cb6714b6a182d"}