@tonconnect/ui-react
Version:
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.
1 lines • 13.5 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../src/utils/web.ts","../src/components/TonConnectUIProvider.tsx","../src/errors/ton-connect-ui-react.error.ts","../src/errors/ton-connect-provider-not-set.error.ts","../src/utils/errors.ts","../src/hooks/useTonConnectUI.ts","../src/components/TonConnectButton.tsx","../src/hooks/useTonWallet.ts","../src/hooks/useTonAddress.ts","../src/hooks/useTonConnectModal.ts","../src/hooks/useIsConnectionRestored.ts"],"sourcesContent":["export function isClientSide(): boolean {\n return typeof window !== 'undefined';\n}\n\nexport function isServerSide(): boolean {\n return !isClientSide();\n}\n","import { createContext, FunctionComponent, memo, ReactNode } from 'react';\nimport {\n ActionConfiguration,\n Locales,\n TonConnectUI,\n UIPreferences,\n WalletsListConfiguration\n} from '@tonconnect/ui';\nimport type { ITonConnect, RequiredFeatures } from '@tonconnect/ui';\nimport { isClientSide } from '../utils/web';\n\nexport const TonConnectUIContext = createContext<TonConnectUI | null>(null);\n\nexport type TonConnectUIProviderProps = {\n children: ReactNode;\n} & Partial<TonConnectUIProviderPropsBase> &\n Partial<TonConnectUIProviderPropsWithManifest | TonConnectUIProviderPropsWithConnector>;\n\nexport interface TonConnectUIProviderPropsWithManifest {\n /**\n * Url to the [manifest]{@link https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest} with the Dapp metadata that will be displayed in the user's wallet.\n * If not passed, manifest from `${window.location.origin}/tonconnect-manifest.json` will be taken.\n */\n manifestUrl: string;\n}\n\nexport interface TonConnectUIProviderPropsWithConnector {\n /**\n * TonConnect instance. Can be helpful if you use custom ITonConnect implementation, or use both of @tonconnect/sdk and @tonconnect/ui in your app.\n */\n connector: ITonConnect;\n}\n\nexport interface TonConnectUIProviderPropsBase {\n /**\n * Try to restore existing session and reconnect to the corresponding wallet.\n * @default true.\n */\n restoreConnection: boolean;\n\n /**\n * Language for the phrases it the UI elements.\n * @default system\n */\n language: Locales;\n\n /**\n * HTML element id to attach the modal window element. If not passed, `div#tc-widget-root` in the end of the <body> will be added and used.\n * @default `div#tc-widget-root`.\n */\n widgetRootId: string;\n\n /**\n * UI elements configuration.\n */\n uiPreferences?: UIPreferences;\n\n /**\n * Configuration for the wallets list in the connect wallet modal.\n */\n walletsListConfiguration?: WalletsListConfiguration;\n\n /**\n * Required features for wallets to be displayed in the connect wallet modal.\n */\n walletsRequiredFeatures?: RequiredFeatures;\n\n /**\n * Preferred features for wallets to be displayed in the connect wallet modal.\n */\n walletsPreferredFeatures?: RequiredFeatures;\n\n /**\n * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications and wallet behaviour (return strategy).\n */\n actionsConfiguration?: ActionConfiguration;\n\n /**\n * Specifies whether the Android back button should be used to close modals and notifications on Android devices.\n * @default true\n */\n enableAndroidBackHandler?: boolean;\n}\n\nlet tonConnectUI: TonConnectUI | null = null;\n\n/**\n * Add TonConnectUIProvider to the root of the app. You can specify UI options using props.\n * All TonConnect UI hooks calls and `<TonConnectButton />` component must be placed inside `<TonConnectUIProvider>`.\n * @param children JSX to insert.\n * @param [options] additional options.\n * @constructor\n */\nconst TonConnectUIProvider: FunctionComponent<TonConnectUIProviderProps> = ({\n children,\n ...options\n}) => {\n if (isClientSide() && !tonConnectUI) {\n tonConnectUI = new TonConnectUI(options);\n }\n\n return (\n <TonConnectUIContext.Provider value={tonConnectUI}>{children}</TonConnectUIContext.Provider>\n );\n};\n\nexport default memo(TonConnectUIProvider);\n","import { TonConnectUIError } from '@tonconnect/ui';\n\n/**\n * Base class for TonConnectUIReact errors. You can check if the error was triggered by the @tonconnect/ui-react using `err instanceof TonConnectUIReactError`.\n */\nexport class TonConnectUIReactError extends TonConnectUIError {\n constructor(...args: ConstructorParameters<typeof Error>) {\n super(...args);\n\n Object.setPrototypeOf(this, TonConnectUIReactError.prototype);\n }\n}\n","import { TonConnectUIReactError } from './ton-connect-ui-react.error';\n\n/**\n * Thrown when either <TonConnectProvider> not added to the top of the tags tree,\n * either there is an attempt using TonConnect UI hook or <TonConnectButton> inside <TonConnectProvider>\n */\nexport class TonConnectProviderNotSetError extends TonConnectUIReactError {\n constructor(...args: ConstructorParameters<typeof Error>) {\n super(...args);\n\n Object.setPrototypeOf(this, TonConnectProviderNotSetError.prototype);\n }\n}\n","import { TonConnectUI } from '@tonconnect/ui';\nimport { TonConnectProviderNotSetError } from '../errors/ton-connect-provider-not-set.error';\n\nexport function checkProvider(provider: TonConnectUI | null): provider is TonConnectUI {\n if (!provider) {\n throw new TonConnectProviderNotSetError(\n 'You should add <TonConnectUIProvider> on the top of the app to use TonConnect'\n );\n }\n\n return true;\n}\n","import { useCallback, useContext } from 'react';\nimport { TonConnectUIContext } from '../components/TonConnectUIProvider';\nimport { TonConnectUI, TonConnectUiOptions } from '@tonconnect/ui';\nimport { checkProvider } from '../utils/errors';\nimport { isServerSide } from '../utils/web';\n\n/**\n * Use it to get access to the `TonConnectUI` instance and UI options updating function.\n */\nexport function useTonConnectUI(): [TonConnectUI, (options: TonConnectUiOptions) => void] {\n const tonConnectUI = useContext(TonConnectUIContext);\n const setOptions = useCallback(\n (options: TonConnectUiOptions) => {\n if (tonConnectUI) {\n tonConnectUI!.uiOptions = options;\n }\n },\n [tonConnectUI]\n );\n\n if (isServerSide()) {\n return [null as unknown as TonConnectUI, () => {}];\n }\n\n checkProvider(tonConnectUI);\n return [tonConnectUI!, setOptions];\n}\n","import { CSSProperties, FunctionComponent, memo, useEffect } from 'react';\nimport { useTonConnectUI } from '../hooks/useTonConnectUI';\n\nconst buttonRootId = 'ton-connect-button';\n\nexport interface TonConnectButtonProps {\n className?: string;\n\n style?: CSSProperties;\n}\n\n/**\n * TonConnect Button is universal UI component for initializing connection. After wallet is connected it transforms to a wallet menu.\n * It is recommended to place it in the top right corner of your app.\n * @param [className] css class to add to the button container.\n * @param [style] style to add to the button container.\n * @constructor\n */\nconst TonConnectButton: FunctionComponent<TonConnectButtonProps> = ({ className, style }) => {\n const [_, setOptions] = useTonConnectUI();\n\n useEffect(() => {\n setOptions({ buttonRootId });\n return () => setOptions({ buttonRootId: null });\n }, [setOptions]);\n\n return (\n <div\n id={buttonRootId}\n className={className}\n style={{ width: 'fit-content', ...style }}\n ></div>\n );\n};\n\nexport default memo(TonConnectButton);\n","import { useEffect, useState } from 'react';\nimport { ConnectedWallet, Wallet, WalletInfoWithOpenMethod } from '@tonconnect/ui';\nimport { useTonConnectUI } from './useTonConnectUI';\n\n/**\n * Use it to get user's current ton wallet. If wallet is not connected hook will return null.\n */\nexport function useTonWallet(): Wallet | (Wallet & WalletInfoWithOpenMethod) | null {\n const [tonConnectUI] = useTonConnectUI();\n const [wallet, setWallet] = useState<Wallet | (Wallet & WalletInfoWithOpenMethod) | null>(\n tonConnectUI?.wallet || null\n );\n\n useEffect(() => {\n if (tonConnectUI) {\n setWallet(tonConnectUI.wallet);\n return tonConnectUI.onStatusChange((value: ConnectedWallet | null) => {\n setWallet(value);\n });\n }\n }, [tonConnectUI]);\n\n return wallet;\n}\n","import { CHAIN, toUserFriendlyAddress } from '@tonconnect/ui';\nimport { useTonWallet } from './useTonWallet';\nimport { useMemo } from 'react';\n\n/**\n * Use it to get user's current ton wallet address. If wallet is not connected hook will return empty string.\n * @param [userFriendly=true] allows to choose format of the address.\n */\nexport function useTonAddress(userFriendly = true): string {\n const wallet = useTonWallet();\n return useMemo(() => {\n if (wallet) {\n return userFriendly\n ? toUserFriendlyAddress(\n wallet.account.address,\n wallet.account.chain === CHAIN.TESTNET\n )\n : wallet.account.address;\n } else {\n return '';\n }\n }, [wallet, userFriendly, wallet?.account.address, wallet?.account.chain]);\n}\n","import { WalletsModal, WalletsModalState } from '@tonconnect/ui';\nimport { useTonConnectUI } from './useTonConnectUI';\nimport { useEffect, useState } from 'react';\n\n/**\n * Use it to get access to the open/close modal functions.\n */\nexport function useTonConnectModal(): Omit<WalletsModal, 'onStateChange'> {\n const [tonConnectUI] = useTonConnectUI();\n const [state, setState] = useState(tonConnectUI?.modal.state || null);\n\n useEffect(() => {\n if (tonConnectUI) {\n setState(tonConnectUI.modal.state);\n return tonConnectUI.onModalStateChange((value: WalletsModalState) => {\n setState(value);\n });\n }\n }, [tonConnectUI]);\n\n return {\n state: state,\n open: () => tonConnectUI?.modal.open(),\n close: () => tonConnectUI?.modal.close()\n };\n}\n","import { useEffect, useState } from 'react';\nimport { useTonConnectUI } from './useTonConnectUI';\n\n/**\n * Indicates current status of the connection restoring process.\n */\nexport function useIsConnectionRestored(): boolean {\n const [restored, setRestored] = useState(false);\n const [tonConnectUI] = useTonConnectUI();\n\n useEffect(() => {\n if (tonConnectUI) {\n tonConnectUI.connectionRestored.then(() => setRestored(true));\n }\n }, [tonConnectUI]);\n\n return restored;\n}\n"],"names":["tonConnectUI"],"mappings":"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"}