@tonconnect/ui-react 2.0.0-beta.1 → 2.0.0-beta.10

package/README.md

@@ -107,6 +107,26 @@ export const Wallet = () => {
 };
 ```
 
+### useTonConnectModal
+
+Use 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.
+
+```tsx
+import { useTonConnectModal } from '@tonconnect/ui-react';
+
+export const ModalControl = () => {
+    const { state, open, close } = useTonConnectModal();
+
+    return (
+      <div>
+          <div>Modal state: {state?.status}</div>
+          <button onClick={open}>Open modal</button>
+          <button onClick={close}>Close modal</button>
+      </div>
+    );
+};
+```
+
 ### useTonConnectUI
 Use it to get access to the `TonConnectUI` instance and UI options updating function.
 
@@ -256,3 +276,80 @@ useEffect(() =>
     }), []);
 ```
 
+# Troubleshooting
+
+## Android Back Handler
+
+If 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`:
+
+```tsx
+import { TonConnectUIProvider } from '@tonconnect/ui-react';
+
+export function App() {
+    return (
+        <TonConnectUIProvider 
+          manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json"
+          enableAndroidBackHandler={false}
+        >
+            { /* Your app */ }
+        </TonConnectUIProvider>
+    );
+}
+```
+
+This will disable the custom back button behavior on Android, and you can then handle the back button press manually in your application.
+
+While 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.
+
+## Animations not working
+
+If 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.
+
+### Using npm
+
+To install the polyfill, run the following command:
+
+```shell
+npm install web-animations-js
+```
+
+Then, import the polyfill in your project:
+
+```typescript
+import 'web-animations-js';
+```
+
+### Using CDN
+
+Alternatively, you can include the polyfill via CDN by adding the following script tag to your HTML:
+
+```html
+<script src="https://www.unpkg.com/web-animations-js@latest/web-animations.min.js"></script>
+```
+
+Both methods will provide a fallback implementation of the Web Animations API and should resolve the animation issues you are facing.
+
+## Warning about 'encoding' module in Next.js
+
+If you are using Next.js and see a warning similar to the following:
+
+```
+ ⚠ ./node_modules/node-fetch/lib/index.js
+Module not found: Can't resolve 'encoding' in '.../node_modules/node-fetch/lib'
+
+Import trace for requested module:
+./node_modules/node-fetch/lib/index.js
+./node_modules/@tonconnect/isomorphic-fetch/index.mjs
+./node_modules/@tonconnect/sdk/lib/esm/index.mjs
+./node_modules/@tonconnect/ui/lib/esm/index.mjs
+./node_modules/@tonconnect/ui-react/lib/esm/index.js
+```
+
+Please 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:
+
+1. (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.
+
+2. (Optional) Install the `encoding` package, to resolve the warning:
+```shell
+npm install encoding
+```

package/lib/components/TonConnectUIProvider.d.ts

@@ -46,6 +46,11 @@ export interface TonConnectUIProviderPropsBase {
      * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications and wallet behaviour (return strategy).
      */
     actionsConfiguration?: ActionConfiguration;
+    /**
+     * Specifies whether the Android back button should be used to close modals and notifications on Android devices.
+     * @default true
+     */
+    enableAndroidBackHandler?: boolean;
 }
 declare const _default: import("react").NamedExoticComponent<TonConnectUIProviderProps>;
 export default _default;

package/lib/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { useTonAddress } from './useTonAddress';
+export { useTonConnectModal } from './useTonConnectModal';
 export { useTonConnectUI } from './useTonConnectUI';
 export { useTonWallet } from './useTonWallet';
 export { useIsConnectionRestored } from './useIsConnectionRestored';

package/lib/hooks/useTonConnectModal.d.ts

@@ -0,0 +1,5 @@
+import { WalletsModal } from '@tonconnect/ui';
+/**
+ * Use it to get access to the open/close modal functions.
+ */
+export declare function useTonConnectModal(): Omit<WalletsModal, 'onStateChange'>;