{"_id":"@alejandbel/ton-connect-ui-react","name":"@alejandbel/ton-connect-ui-react","dist-tags":{"latest":"2.4.2"},"versions":{"2.4.2":{"name":"@alejandbel/ton-connect-ui-react","version":"2.4.2","repository":{"type":"git","url":"git+https://github.com/Alejandbel/ton-connect-sdk.git"},"homepage":"https://github.com/Alejandbel/ton-connect-sdk/tree/main/packages/ui-react","bugs":{"url":"https://github.com/Alejandbel/ton-connect-sdk/issues"},"keywords":["TON","Wallet","ton-connect","tonconnect","Connect","Tonkeeper","sdk","UI","React"],"author":{"name":"tonconnect"},"license":"Apache-2.0","main":"./lib/index.cjs","module":"./lib/index.mjs","types":"./lib/index.d.ts","exports":{".":{"types":"./lib/index.d.ts","require":"./lib/index.cjs","import":"./lib/index.mjs","default":"./lib/index.cjs"}},"devDependencies":{"@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@vitejs/plugin-react":"^4.3.4","csstype":"^3.1.3","eslint-plugin-react":"^7.37.4","eslint-plugin-react-hooks":"^5.2.0","typescript":"^5.9.2","vite":"^7.0.6","vite-plugin-dts":"^4.5.4"},"dependencies":{"@tonconnect/ui":"npm:@alejandbel/ton-connect-ui@2.4.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"typedoc":{"entryPoint":"./src/library.ts"},"scripts":{"dev":"vite","build":"tsc && vite build"},"_id":"@alejandbel/ton-connect-ui-react@2.4.2","description":"TonConnect UI React is a React UI kit for TonConnect SDK. Use it to connect your app to TON wallets via TonConnect protocol in React apps.","_integrity":"sha512-X54uRtVRH7N7ZwCcf015A/JvLG3lXgPKYD5Vw63vBAJtEP167HroQSNI1j4G3Ve6t02DZf2Bz1qTohUcpJJXOg==","_resolved":"/private/var/folders/h9/wfnrk3496fx8kcbxgcpnmwsm0000gn/T/e183fc891e35c60e6cfac68fa6a87659/alejandbel-ton-connect-ui-react-2.4.2.tgz","_from":"file:alejandbel-ton-connect-ui-react-2.4.2.tgz","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-X54uRtVRH7N7ZwCcf015A/JvLG3lXgPKYD5Vw63vBAJtEP167HroQSNI1j4G3Ve6t02DZf2Bz1qTohUcpJJXOg==","shasum":"c75060d7339d194c50e6ffd0521f381de3ba5a67","tarball":"https://registry.npmjs.org/@alejandbel/ton-connect-ui-react/-/ton-connect-ui-react-2.4.2.tgz","fileCount":23,"unpackedSize":82529,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDKCOmMXNq4O8BlSY0tVtFm11TzpU7dvl8ksuZtyDjMsAIgP0TuzV5kTZqZI3+FchM0VJADfsFoxuAkhcA+0zKPKU8="}]},"_npmUser":{"name":"a-bahdanau","email":"bogdanov28c@gmail.com"},"directories":{},"maintainers":[{"name":"a-bahdanau","email":"bogdanov28c@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ton-connect-ui-react_2.4.2_1773234452797_0.1993623060394527"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T13:07:32.718Z","2.4.2":"2026-03-11T13:07:32.959Z","modified":"2026-03-11T13:07:33.172Z"},"maintainers":[{"name":"a-bahdanau","email":"bogdanov28c@gmail.com"}],"description":"TonConnect UI React is a React UI kit for TonConnect SDK. Use it to connect your app to TON wallets via TonConnect protocol in React apps.","homepage":"https://github.com/Alejandbel/ton-connect-sdk/tree/main/packages/ui-react","keywords":["TON","Wallet","ton-connect","tonconnect","Connect","Tonkeeper","sdk","UI","React"],"repository":{"type":"git","url":"git+https://github.com/Alejandbel/ton-connect-sdk.git"},"author":{"name":"tonconnect"},"bugs":{"url":"https://github.com/Alejandbel/ton-connect-sdk/issues"},"license":"Apache-2.0","readme":"# TON Connect UI React\n\nTonConnect UI React is a React UI kit for TonConnect SDK. Use it to connect your app to TON wallets via TonConnect protocol in React apps.\n\nIf you don't use React for your app, take a look at [TonConnect UI](https://github.com/ton-connect/sdk/tree/main/packages/ui).\n\nIf you want to use TonConnect on the server side, you should use the [TonConnect SDK](https://github.com/ton-connect/sdk/tree/main/packages/sdk).\n\nYou can find more details and the protocol specification in the [docs](https://docs.ton.org/develop/dapps/ton-connect/overview).\n\n---\n\n# Getting started\n\n[Latest API documentation](https://ton-connect.github.io/sdk/modules/_tonconnect_ui_react.html)\n\n# Getting started\n\n## Installation with npm\n`npm i @tonconnect/ui-react`\n\n# Usage\n\n## Add TonConnectUIProvider\nAdd TonConnectUIProvider to the root of the app. You can specify UI options using props.\n[See all available options](https://ton-connect.github.io/sdk/types/_tonconnect_ui_react.TonConnectUIProviderProps.html)\n\nAll TonConnect UI hooks calls and `<TonConnectButton />` component must be placed inside `<TonConnectUIProvider>`.\n\n```tsx\nimport { TonConnectUIProvider } from '@tonconnect/ui-react';\n\nexport function App() {\n    return (\n        <TonConnectUIProvider manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\">\n            { /* Your app */ }\n        </TonConnectUIProvider>\n    );\n}\n\n```\n### Using with Next.js\n\n`TonConnectUIProvider` relies on browser APIs and should be rendered only on the client side. In a Next.js application mark the component that wraps the provider with `\"use client\"` or dynamically import the provider to disable server side rendering.\n\nExample for the `app` router:\n\n```tsx\n// app/providers.tsx\n'use client';\n\nimport { TonConnectUIProvider } from '@tonconnect/ui-react';\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n    return (\n        <TonConnectUIProvider manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\">\n            {children}\n        </TonConnectUIProvider>\n    );\n}\n```\n\nFor the `pages` router you can dynamically import the provider:\n\n```tsx\nimport dynamic from 'next/dynamic';\n\nconst TonConnectUIProvider = dynamic(\n    () => import('@tonconnect/ui-react').then(m => m.TonConnectUIProvider),\n    { ssr: false }\n);\n\nfunction MyApp({ Component, pageProps }) {\n    return (\n        <TonConnectUIProvider manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\"> \n            <Component {...pageProps} />\n        </TonConnectUIProvider>\n    );\n}\n```\n\nWith both approaches the provider is executed only in the browser and works correctly.\n\n\nYou can also specify required wallet features to filter wallets that will be displayed in the connect wallet modal:\n\n```tsx\n<TonConnectUIProvider\n    manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\"\n    walletsRequiredFeatures={{\n        sendTransaction: {\n            minMessages: 2, // Wallet must support at least 2 messages\n            extraCurrencyRequired: true // Wallet must support extra currency\n        }\n    }}\n>\n    { /* Your app */ }\n</TonConnectUIProvider>\n```\n\nThis will only display wallets that support sending at least 2 messages and support extra currencies in transactions.\n\nYou can also specify preferred wallet features to prioritize wallets that will be displayed first in the connect wallet modal, without excluding others:\n\n```tsx\n<TonConnectUIProvider\n    manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\"\n    walletsPreferredFeatures={{\n        sendTransaction: {\n            minMessages: 2, // Wallets supporting at least 2 messages are prioritized\n            extraCurrencyRequired: true // Wallets supporting extra currency are prioritized\n        }\n    }}\n>\n    { /* Your app */ }\n</TonConnectUIProvider>\n```\n\nThis will gently recommend wallets with richer functionality by placing them higher in the list, but all wallets remain available for selection.\n\n### Analytics\n\nYou can configure analytics collection via the `analytics` prop:\n\n```tsx\n<TonConnectUIProvider\n    manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\"\n    analytics={{ mode: 'off' }}\n>\n    { /* Your app */ }\n</TonConnectUIProvider>\n```\n\n**Analytics modes:**\n\n| Mode                    | Description                                                |\n|-------------------------|------------------------------------------------------------|\n| **off**                 | Analytics turned off. No events are collected or sent.     |\n| **telemetry** (default) | Analytics used for technical research and issue debugging. |\n| **full**                | Full analytics events.                                     |\n\n## Add TonConnect Button\nTonConnect Button is universal UI component for initializing connection. After wallet is connected it transforms to a wallet menu.\nIt is recommended to place it in the top right corner of your app.\n\n```tsx\nexport const Header = () => {\n    return (\n        <header>\n            <span>My App with React UI</span>\n            <TonConnectButton />\n        </header>\n    );\n};\n\n```\n\nYou can add `className` and `style` props to the button as well. Note that you cannot pass child to the TonConnectButton. \n`<TonConnectButton  className=\"my-button-class\" style={{ float: \"right\" }}/>`\n\n## Use TonConnect UI hooks\n\n### useTonAddress\nUse it to get user's current ton wallet address. Pass boolean parameter isUserFriendly to choose format of the address. If wallet is not connected hook will return empty string.\n\n```tsx\nimport { useTonAddress } from '@tonconnect/ui-react';\n\nexport const Address = () => {\n    const userFriendlyAddress = useTonAddress();\n    const rawAddress = useTonAddress(false);\n\n    return (\n        address && (\n            <div>\n                <span>User-friendly address: {userFriendlyAddress}</span>\n                <span>Raw address: {rawAddress}</span>\n            </div>\n        )\n    );\n};\n```\n\n### useTonWallet\nUse it to get user's current ton wallet. If wallet is not connected hook will return null.\n\nSee all wallet's properties\n\n[Wallet interface](https://ton-connect.github.io/sdk/interfaces/_tonconnect_sdk.Wallet.html)\n[WalletInfo interface](https://ton-connect.github.io/sdk/types/_tonconnect_sdk.WalletInfo.html)\n\n```tsx\nimport { useTonWallet } from '@tonconnect/ui-react';\n\nexport const Wallet = () => {\n    const wallet = useTonWallet();\n\n    return (\n        wallet && (\n            <div>\n                <span>Connected wallet: {wallet.name}</span>\n                <span>Device: {wallet.device.appName}</span>\n            </div>\n        )\n    );\n};\n```\n\n### useTonConnectModal\n\nUse this hook to access the functions for opening and closing the modal window. The hook returns an object with the current modal state and methods to open and close the modal.\n\n```tsx\nimport { useTonConnectModal } from '@tonconnect/ui-react';\n\nexport const ModalControl = () => {\n    const { state, open, close } = useTonConnectModal();\n\n    return (\n      <div>\n          <div>Modal state: {state?.status}</div>\n          <button onClick={open}>Open modal</button>\n          <button onClick={close}>Close modal</button>\n      </div>\n    );\n};\n```\n\n### useTonConnectUI\nUse it to get access to the `TonConnectUI` instance and UI options updating function.\n\n[See more about TonConnectUI instance methods](https://github.com/ton-connect/sdk/tree/main/packages/ui#send-transaction)\n\n[See more about setOptions function](https://github.com/ton-connect/sdk/tree/main/packages/ui#change-options-if-needed)\n\n\n```tsx\nimport { Locales, useTonConnectUI } from '@tonconnect/ui-react';\n\nexport const Settings = () => {\n    const [tonConnectUI, setOptions] = useTonConnectUI();\n\n    const onLanguageChange = (lang: string) => {\n        setOptions({ language: lang as Locales });\n    };\n\n    const myTransaction = {\n        validUntil: Math.floor(Date.now() / 1000) + 60, // 60 sec\n        messages: [\n            {\n                address: \"EQBBJBB3HagsujBqVfqeDUPJ0kXjgTPLWPFFffuNXNiJL0aA\",\n                amount: \"20000000\",\n                // stateInit: \"base64bocblahblahblah==\" // just for instance. Replace with your transaction initState or remove\n            },\n            {\n                address: \"EQDmnxDMhId6v1Ofg_h5KR5coWlFG6e86Ro3pc7Tq4CA0-Jn\",\n                amount: \"60000000\",\n                // payload: \"base64bocblahblahblah==\" // just for instance. Replace with your transaction payload or remove\n            }\n        ]\n    }\n\n    // Example with extra currency support\n    const transactionWithExtraCurrency = {\n        validUntil: Math.floor(Date.now() / 1000) + 60,\n        messages: [\n            {\n                address: \"EQBBJBB3HagsujBqVfqeDUPJ0kXjgTPLWPFFffuNXNiJL0aA\",\n                // Specify the extra currency\n                extraCurrency: {\n                    100: \"10000000\"\n                }\n            }\n        ]\n    }\n\n    return (\n        <div>\n            <button onClick={() => tonConnectUI.sendTransaction(myTransaction)}>\n                Send transaction\n            </button>\n\n            <div>\n                <label>language</label>\n                <select onChange={e => onLanguageChange(e.target.value)}>\n                    <option value=\"en\">en</option>\n                    <option value=\"ru\">ru</option>\n                </select>\n            </div>\n        </div>\n    );\n};\n```\n\n### Trace ID for analytics\n\nYou can pass a custom trace ID to track transactions through your analytics:\n\n```tsx\nconst result = await tonConnectUI.sendTransaction(myTransaction, {\n    traceId: '019a2a92-a884-7cfc-b1bc-caab18644b6f' // optional, UUIDv7 auto-generated if not provided\n});\n\nconsole.log(result.traceId); // use this ID to correlate with analytics events\n```\n\n## Sign data\n\nSign arbitrary data with the user's wallet. The wallet will display the data to the user for confirmation before signing. Wallet must be connected when you call `signData`, otherwise an error will be thrown.\n\n### Data Types\n\nYou can sign three types of data. Choose the right format based on your use case:\n\n- **Text** - Use for human-readable text that users should see and understand\n- **Cell** - Use for TON Blockchain data that should be used in smart contracts (wallet may show unknown content warning)  \n- **Binary** - For other arbitrary data (least preferred due to security warnings)\n\n#### Text Format\n\nUse when you need to sign human-readable text. The wallet displays the text to the user.\n\n**Parameters:**\n- `type` (string, required): Must be `\"text\"`\n- `text` (string, required): UTF-8 text to sign\n- `network` (string, optional): `\"-239\"` for mainnet, `\"-3\"` for testnet\n- `from` (string, optional): Signer address in raw format `\"0:<hex>\"`\n\n```tsx\nimport { useTonConnectUI } from '@tonconnect/ui-react';\n\nexport const SignTextData = () => {\n    const [tonConnectUI] = useTonConnectUI();\n\n    const handleSignText = async () => {\n        const textData = {\n            type: \"text\",\n            text: \"Confirm new 2fa number:\\n+1 234 567 8901\",\n            network: \"-239\", // MAINNET = '-239', TESTNET = '-3'\n            from: \"0:348bcf827469c5fc38541c77fdd91d4e347eac200f6f2d9fd62dc08885f0415f\"\n        };\n\n        try {\n            const result = await tonConnectUI.signData(textData);\n            console.log('Signed:', result);\n        } catch (e) {\n            console.error('Error:', e);\n        }\n    };\n\n    return <button onClick={handleSignText}>Sign Text Data</button>;\n};\n```\n\nYou can also pass a trace ID to correlate with analytics:\n\n```tsx\nconst result = await tonConnectUI.signData(textData, {\n    traceId: '019a2a92-a884-7cfc-b1bc-caab18644b6f' // optional, UUIDv7 auto-generated if not provided\n});\n\nconsole.log(result.traceId); // use this ID to correlate with analytics events\n```\n\n#### Binary Format\n\nUse for arbitrary binary data. The wallet shows a warning about unknown content.\n\n**Parameters:**\n- `type` (string, required): Must be `\"binary\"`\n- `bytes` (string, required): Base64 encoded binary data (not url-safe)\n- `network` (string, optional): `\"-239\"` for mainnet, `\"-3\"` for testnet\n- `from` (string, optional): Signer address in raw format `\"0:<hex>\"`\n\n```tsx\nimport { useTonConnectUI } from '@tonconnect/ui-react';\n\nexport const SignBinaryData = () => {\n    const [tonConnectUI] = useTonConnectUI();\n\n    const handleSignBinary = async () => {\n        const binaryData = {\n            type: \"binary\",\n            bytes: \"1Z/SGh+3HFMKlVHSkN91DpcCzT4C5jzHT3sA/24C5A==\",\n            network: \"-239\", // MAINNET = '-239', TESTNET = '-3'\n            from: \"0:348bcf827469c5fc38541c77fdd91d4e347eac200f6f2d9fd62dc08885f0415f\"\n        };\n\n        try {\n            const result = await tonConnectUI.signData(binaryData);\n            console.log('Signed:', result);\n        } catch (e) {\n            console.error('Error:', e);\n        }\n    };\n\n    return <button onClick={handleSignBinary}>Sign Binary Data</button>;\n};\n```\n\n#### Cell Format\n\nUse for TON Blockchain data with TL-B schema. The wallet can parse and display the content if the schema is valid.\n\n**Parameters:**\n- `type` (string, required): Must be `\"cell\"`\n- `schema` (string, required): TL-B schema of the cell payload\n- `cell` (string, required): Base64 encoded BoC (not url-safe) with single-root cell\n- `network` (string, optional): `\"-239\"` for mainnet, `\"-3\"` for testnet\n- `from` (string, optional): Signer address in raw format `\"0:<hex>\"`\n\n```tsx\nimport { useTonConnectUI } from '@tonconnect/ui-react';\n\nexport const SignCellData = () => {\n    const [tonConnectUI] = useTonConnectUI();\n\n    const handleSignCell = async () => {\n        const cellData = {\n            type: \"cell\",\n            schema: \"transfer#0f8a7ea5 query_id:uint64 amount:(VarUInteger 16) destination:MsgAddress response_destination:MsgAddress custom_payload:(Maybe ^Cell) forward_ton_amount:(VarUInteger 16) forward_payload:(Either Cell ^Cell) = InternalMsgBody;\",\n            cell: \"te6ccgEBAQEAVwAAqg+KfqVUbeTvKqB4h0AcnDgIAZucsOi6TLrfP6FcuPKEeTI6oB3fF/NBjyqtdov/KtutACCLqvfmyV9kH+Pyo5lcsrJzJDzjBJK6fd+ZnbFQe4+XggI=\",\n            network: \"-239\", // MAINNET = '-239', TESTNET = '-3'\n            from: \"0:348bcf827469c5fc38541c77fdd91d4e347eac200f6f2d9fd62dc08885f0415f\"\n        };\n\n        try {\n            const result = await tonConnectUI.signData(cellData);\n            console.log('Signed:', result);\n        } catch (e) {\n            console.error('Error:', e);\n        }\n    };\n\n    return <button onClick={handleSignCell}>Sign Cell Data</button>;\n};\n```\n\n### Response\n\nAll signData calls return the same response structure:\n\n```ts\ninterface SignDataResult {\n    signature: string; // Base64 encoded signature\n    address: string;   // Wallet address in raw format\n    timestamp: number; // UNIX timestamp in seconds (UTC)\n    domain: string;    // App domain name \n    payload: object;   // Original payload from the request\n}\n```\n\n### Signature Verification\n\nAfter receiving the signed data, you need to verify the signature to ensure it's authentic and was signed by the claimed wallet address.\n\n**For backend verification:** See [TypeScript verification example](https://github.com/ton-connect/demo-dapp-with-react-ui/blob/master/src/server/services/sign-data-service.ts#L32-L109) showing how to verify signatures on your server.\n\n**For smart contract verification:** See [FunC verification example](https://github.com/p0lunin/sign-data-contract-verify-example/blob/master/contracts/sign_data_example.fc) showing how to verify signatures in TON smart contracts.\n\n**For complete technical details:** See the [Sign Data specification](https://github.com/ton-blockchain/ton-connect/blob/main/requests-responses.md#sign-data) for full signature verification requirements.\n\n### useIsConnectionRestored\nIndicates current status of the connection restoring process.\nYou can use it to detect when connection restoring process if finished.\n\n```tsx\nimport { useIsConnectionRestored } from '@tonconnect/ui-react';\n\nexport const EntrypointPage = () => {\n    const connectionRestored = useIsConnectionRestored();\n\n    if (!connectionRestored) {\n        return <Loader>Please wait...</Loader>;\n    }\n\n    return <MainPage />;\n};\n```\n\n## Add connect request parameters (ton_proof)\nUse `tonConnectUI.setConnectRequestParameters` function to pass your connect request parameters.\n\nThis function takes one parameter:\n\nSet state to 'loading' while you are waiting for the response from your backend. If user opens connect wallet modal at this moment, he will see a loader.\n```ts\nconst [tonConnectUI] = useTonConnectUI();\n\ntonConnectUI.setConnectRequestParameters({\n    state: 'loading'\n});\n```\n\nor\n\nSet state to 'ready' and define `tonProof` value. Passed parameter will be applied to the connect request (QR and universal link).\n```ts\nconst [tonConnectUI] = useTonConnectUI();\n\ntonConnectUI.setConnectRequestParameters({\n    state: 'ready',\n    value: {\n        tonProof: '<your-proof-payload>'\n    }\n});\n```\n\nor\n\nRemove loader if it was enabled via `state: 'loading'` (e.g. you received an error instead of a response from your backend). Connect request will be created without any additional parameters.\n```ts\nconst [tonConnectUI] = useTonConnectUI();\n\ntonConnectUI.setConnectRequestParameters(null);\n```\n\n\nYou can call `tonConnectUI.setConnectRequestParameters` multiple times if your tonProof payload has bounded lifetime (e.g. you can refresh connect request parameters every 10 minutes).\n\n\n```ts\nconst [tonConnectUI] = useTonConnectUI();\n\n// enable ui loader\ntonConnectUI.setConnectRequestParameters({ state: 'loading' });\n\n// fetch you tonProofPayload from the backend\nconst tonProofPayload: string | null = await fetchTonProofPayloadFromBackend();\n\nif (!tonProofPayload) {\n    // remove loader, connect request will be without any additional parameters\n    tonConnectUI.setConnectRequestParameters(null);\n} else {\n    // add tonProof to the connect request\n    tonConnectUI.setConnectRequestParameters({\n        state: \"ready\",\n        value: { tonProof: tonProofPayload }\n    });\n}\n\n```\n\n\nYou can find `ton_proof` result in the `wallet` object when wallet will be connected:\n\n```ts\nimport {useTonConnectUI} from \"@tonconnect/ui-react\";\n\nconst [tonConnectUI] = useTonConnectUI();\n\nuseEffect(() =>\n    tonConnectUI.onStatusChange(wallet => {\n        if (wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {\n            checkProofInYourBackend(wallet.connectItems.tonProof.proof, wallet.account);\n        }\n    }), []);\n```\n\n# Troubleshooting\n\n## Android Back Handler\n\nIf you encounter any issues with the Android back handler, such as modals not closing properly when the back button is pressed, or conflicts with `history.pushState()` if you are manually handling browser history in your application, you can disable the back handler by setting `enableAndroidBackHandler` to `false`:\n\n```tsx\nimport { TonConnectUIProvider } from '@tonconnect/ui-react';\n\nexport function App() {\n    return (\n        <TonConnectUIProvider \n          manifestUrl=\"https://<YOUR_APP_URL>/tonconnect-manifest.json\"\n          enableAndroidBackHandler={false}\n        >\n            { /* Your app */ }\n        </TonConnectUIProvider>\n    );\n}\n```\n\nThis will disable the custom back button behavior on Android, and you can then handle the back button press manually in your application.\n\nWhile we do not foresee any problems arising with the Android back handler, but if you find yourself needing to disable it due to an issue, please describe the problem in on [GitHub Issues](https://github.com/ton-connect/sdk/issues), so we can assist you further.\n\n## Animations not working\n\nIf you are experiencing issues with animations not working in your environment, it might be due to a lack of support for the Web Animations API. To resolve this issue, you can use the `web-animations-js` polyfill.\n\n### Using npm\n\nTo install the polyfill, run the following command:\n\n```shell\nnpm install web-animations-js\n```\n\nThen, import the polyfill in your project:\n\n```typescript\nimport 'web-animations-js';\n```\n\n### Using CDN\n\nAlternatively, you can include the polyfill via CDN by adding the following script tag to your HTML:\n\n```html\n<script src=\"https://www.unpkg.com/web-animations-js@latest/web-animations.min.js\"></script>\n```\n\nBoth methods will provide a fallback implementation of the Web Animations API and should resolve the animation issues you are facing.\n\n## Warning about 'encoding' module in Next.js\n\nIf you are using Next.js and see a warning similar to the following:\n\n```\n ⚠ ./node_modules/node-fetch/lib/index.js\nModule not found: Can't resolve 'encoding' in '.../node_modules/node-fetch/lib'\n\nImport trace for requested module:\n./node_modules/node-fetch/lib/index.js\n./node_modules/@tonconnect/isomorphic-fetch/index.mjs\n./node_modules/@tonconnect/sdk/lib/esm/index.mjs\n./node_modules/@tonconnect/ui/lib/esm/index.mjs\n./node_modules/@tonconnect/ui-react/lib/esm/index.js\n```\n\nPlease note that this is just a warning and should not affect the functionality of your application. If you wish to suppress the warning, you have two options:\n\n1. (Recommended) Wait for us to remove the dependency on `@tonconnect/isomorphic-fetch` in future releases. This dependency will be removed when we drop support for Node.js versions below 18.\n\n2. (Optional) Install the `encoding` package, to resolve the warning:\n```shell\nnpm install encoding\n```\n\n## How to find a sent transaction on the blockchain\n\nSee the detailed guide: [Transaction-by-external-message](../../guidelines/transaction-by-external-message.md)\n\nThis guide explains how to find the corresponding transaction on the TON blockchain by the BOC of an external-in message.\n\n","readmeFilename":"README.md","_rev":"1-60c54c603071d5cd3997ddf8fe5e377c"}