feat(ui): change modal close methods to include close reason

ton-connect · May 20, 2024 · e19139e · e19139e
1 parent 2e606a9
commit e19139e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git a/packages/ui/src/app/views/modals/wallets-modal/single-wallet-modal.tsx b/packages/ui/src/app/views/modals/wallets-modal/single-wallet-modal.tsx
@@ -25,6 +25,7 @@ import { InfoModal } from 'src/app/views/modals/wallets-modal/info-modal';
 import { MobileConnectionModal } from 'src/app/views/modals/wallets-modal/mobile-connection-modal';
 import { Dynamic } from 'solid-js/web';
 import { WalletsModalCloseReason } from 'src/models';
+import { TonConnectUiContext } from 'src/app/state/ton-connect-ui.context';
 
 export const SingleWalletModal: Component = () => {
     const { locale } = useI18n()[1];
@@ -37,6 +38,7 @@ export const SingleWalletModal: Component = () => {
     });
 
     const connector = useContext(ConnectorContext)!;
+    const tonConnectUI = useContext(TonConnectUiContext)!;
     const [infoTab, setInfoTab] = createSignal(false);
 
     const additionalRequestLoading = (): boolean =>
@@ -52,8 +54,7 @@ export const SingleWalletModal: Component = () => {
     });
 
     const onClose = (closeReason: WalletsModalCloseReason): void => {
-        setSingleWalletModalState({ status: 'closed', closeReason: closeReason });
-        setInfoTab(false);
+        tonConnectUI.closeSingleWalletModal(closeReason);
     };
 
     const unsubscribe = connector.onStatusChange(wallet => {
@@ -64,6 +65,10 @@ export const SingleWalletModal: Component = () => {
 
     onCleanup(unsubscribe);
 
+    onCleanup(() => {
+        setInfoTab(false);
+    });
+
     return (
         <StyledModal
             opened={getSingleWalletModalIsOpened()}

diff --git a/packages/ui/src/app/views/modals/wallets-modal/wallets-modal.tsx b/packages/ui/src/app/views/modals/wallets-modal/wallets-modal.tsx
@@ -104,11 +104,7 @@ export const WalletsModal: Component = () => {
     });
 
     const onClose = (closeReason: WalletsModalCloseReason): void => {
-        if (tonConnectUI) {
-            tonConnectUI.closeModal(closeReason);
-        } else {
-            setWalletsModalState({ status: 'closed', closeReason: closeReason });
-        }
+        tonConnectUI!.closeModal(closeReason);
     };
 
     const unsubscribe = connector.onStatusChange(wallet => {

diff --git a/packages/ui/src/managers/single-wallet-modal-manager.ts b/packages/ui/src/managers/single-wallet-modal-manager.ts
@@ -15,6 +15,7 @@ import { isInTMA, sendExpand } from 'src/app/utils/tma-api';
 import { TonConnectUIError } from 'src/errors';
 import { applyWalletsListConfiguration, eqWalletName } from 'src/app/utils/wallets';
 import { TonConnectUITracker } from 'src/tracker/ton-connect-ui-tracker';
+import { WalletsModalCloseReason } from 'src/models';
 
 interface SingleWalletModalManagerCreateOptions {
     /**
@@ -119,8 +120,10 @@ export class SingleWalletModalManager implements SingleWalletModal {
     /**
      * Closes the modal window.
      */
-    public close(): void {
-        this.tracker.trackConnectionError('Connection was cancelled');
+    public close(reason: WalletsModalCloseReason = 'action-cancelled'): void {
+        if (reason === 'action-cancelled') {
+            this.tracker.trackConnectionError('Connection was cancelled');
+        }
         widgetController.closeSingleWalletModal('action-cancelled');
     }
 

diff --git a/packages/ui/src/managers/wallets-modal-manager.ts b/packages/ui/src/managers/wallets-modal-manager.ts
@@ -99,7 +99,7 @@ export class WalletsModalManager implements WalletsModal {
      */
     public close(reason: WalletsModalCloseReason = 'action-cancelled'): void {
         if (reason === 'action-cancelled') {
-            this.tracker.trackConnectionError('Connection cancelled by user.');
+            this.tracker.trackConnectionError('Connection was cancelled');
         }
         widgetController.closeWalletsModal(reason);
     }

diff --git a/packages/ui/src/models/single-wallet-modal.ts b/packages/ui/src/models/single-wallet-modal.ts
@@ -1,4 +1,5 @@
 import { WalletInfoRemote } from '@tonconnect/sdk';
+import { WalletsModalCloseReason } from 'src/models/wallets-modal';
 
 export interface SingleWalletModal {
     /**
@@ -9,7 +10,7 @@ export interface SingleWalletModal {
     /**
      * Close the modal.
      */
-    close: () => void;
+    close: (closeReason?: WalletsModalCloseReason) => void;
 
     /**
      * Subscribe to the modal window status changes.

diff --git a/packages/ui/src/ton-connect-ui.ts b/packages/ui/src/ton-connect-ui.ts
@@ -341,8 +341,8 @@ export class TonConnectUI {
      * Close the single wallet modal window.
      * @experimental
      */
-    public closeSingleWalletModal(): void {
-        this.singleWalletModal.close();
+    public closeSingleWalletModal(closeReason?: WalletsModalCloseReason): void {
+        this.singleWalletModal.close(closeReason);
     }
 
     /**