@tonconnect/ui 2.0.3-beta.0 → 2.0.3-beta.1

package/lib/index.d.ts

@@ -1,7 +1,6 @@
-import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, ITonConnect, Wallet, WalletInfo, Account, ConnectAdditionalRequest, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjectable, WalletInfoRemote, ConnectionEvent, ConnectionRestoringEvent, DisconnectionEvent, TransactionSigningEvent, ITonConnect, EventDispatcher, SdkActionEvent, Wallet, WalletInfo, Account, ConnectAdditionalRequest, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 export * from '@tonconnect/sdk';
 import { Property } from 'csstype';
-import { ConnectItem } from '@tonconnect/protocol';
 
 declare type Locales = 'en' | 'ru';
 
@@ -169,6 +168,11 @@ interface TonConnectUiOptions {
     enableAndroidBackHandler?: boolean;
 }
 
+/**
+ * User action events.
+ */
+declare type UserActionEvent = ConnectionEvent | ConnectionRestoringEvent | DisconnectionEvent | TransactionSigningEvent;
+
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
 interface TonConnectUiOptionsWithManifest extends TonConnectUiCreateOptionsBase {
     /**
@@ -194,6 +198,11 @@ interface TonConnectUiCreateOptionsBase extends TonConnectUiOptions {
      * @default `div#tc-widget-root`.
      */
     widgetRootId?: string;
+    /**
+     * Event dispatcher to track user actions. By default, it uses `window.dispatchEvent` for browser environment.
+     * @default BrowserEventDispatcher.
+     */
+    eventDispatcher?: EventDispatcher<UserActionEvent | SdkActionEvent>;
 }
 
 declare type WalletOpenMethod = 'qrcode' | 'universal-link' | 'custom-deeplink';
@@ -219,8 +228,9 @@ interface WalletsModal {
     open: () => void;
     /**
      * Close the modal.
+     * @default 'action-cancelled'
      */
-    close: () => void;
+    close: (reason?: WalletsModalCloseReason) => void;
     /**
      * Subscribe to the modal window status changes.
      */
@@ -308,6 +318,10 @@ declare class TonConnectUI {
     static getWallets(): Promise<WalletInfo[]>;
     private readonly walletInfoStorage;
     private readonly preferredWalletStorage;
+    /**
+     * Emits user action event to the EventDispatcher. By default, it uses `window.dispatchEvent` for browser environment.
+     * @private
+     */
     private readonly tracker;
     private walletInfo;
     private systemThemeChangeUnsubscribe;
@@ -379,7 +393,7 @@ declare class TonConnectUI {
     /**
      * Closes the modal window.
      */
-    closeModal(): void;
+    closeModal(reason?: WalletsModalCloseReason): void;
     /**
      * Subscribe to the modal window state changes, returns a function which has to be called to unsubscribe.
      */
@@ -397,7 +411,7 @@ declare class TonConnectUI {
      * Close the single wallet modal window.
      * @experimental
      */
-    closeSingleWalletModal(): void;
+    closeSingleWalletModal(closeReason?: WalletsModalCloseReason): void;
     /**
      * Subscribe to the single wallet modal window state changes, returns a function which has to be called to unsubscribe.
      * @experimental
@@ -476,236 +490,10 @@ declare class TonConnectUI {
     private getModalsAndNotificationsConfiguration;
 }
 
-/**
- * Requested authentication type: 'ton_addr' or 'ton_proof'.
- */
-declare type AuthType = ConnectItem['name'];
-/**
- * Information about a connected wallet.
- */
-declare type ConnectionInfo = {
-    /**
-     * Connected wallet address.
-     */
-    address: string | null;
-    /**
-     * Connected chain ID.
-     */
-    chainId: string | null;
-    /**
-     * Wallet provider.
-     */
-    provider: 'http' | 'injected' | null;
-    /**
-     * Wallet type: 'tonkeeper', 'tonhub', etc.
-     */
-    walletType: string | null;
-    /**
-     * Wallet version.
-     */
-    walletVersion: string | null;
-    /**
-     * Requested authentication types.
-     */
-    authType: AuthType | null;
-};
-/**
- * Initial connection event when a user initiates a connection.
- */
-declare type ConnectionStartedEvent = {
-    /**
-     * Event type.
-     */
-    type: 'connection-started';
-};
-/**
- * Successful connection event when a user successfully connected a wallet.
- */
-declare type ConnectionCompletedEvent = {
-    /**
-     * Event type.
-     */
-    type: 'connection-completed';
-    /**
-     * Wallet information.
-     */
-    connectionInfo: ConnectionInfo;
-};
-/**
- * Connection error event when a user cancels a connection or there is an error during the connection process.
- */
-declare type ConnectionErrorEvent = {
-    /**
-     * Event type.
-     */
-    type: 'connection-error';
-    /**
-     * Reason for the error.
-     */
-    reason: string;
-};
-/**
- * Connection events.
- */
-declare type ConnectionEvent = ConnectionStartedEvent | ConnectionCompletedEvent | ConnectionErrorEvent;
-/**
- * Connection restoring started event when initiates a connection restoring process.
- */
-declare type ConnectionRestoringStartedEvent = {
-    /**
-     * Event type.
-     */
-    type: 'connection-restoring-started';
-};
-/**
- * Connection restoring completed event when successfully restored a connection.
- */
-declare type ConnectionRestoringCompletedEvent = {
-    /**
-     * Event type.
-     */
-    type: 'connection-restoring-completed';
-    /**
-     * Wallet information.
-     */
-    connectionInfo: ConnectionInfo;
-};
-/**
- * Connection restoring error event when there is an error during the connection restoring process.
- */
-declare type ConnectionRestoringErrorEvent = {
-    /**
-     * Event type.
-     */
-    type: 'connection-restoring-error';
-    /**
-     * Reason for the error.
-     */
-    reason: string;
-};
-/**
- * Connection restoring events.
- */
-declare type ConnectionRestoringEvent = ConnectionRestoringStartedEvent | ConnectionRestoringCompletedEvent | ConnectionRestoringErrorEvent;
-/**
- * Transaction message.
- */
-declare type TransactionMessage = {
-    /**
-     * Recipient address.
-     */
-    address: string | null;
-    /**
-     * Transfer amount.
-     */
-    amount: string | null;
-};
-/**
- * Transaction information.
- */
-declare type TransactionInfo = {
-    /**
-     * Transaction validity time in unix timestamp.
-     */
-    validUntil: number | null;
-    /**
-     * Sender address.
-     */
-    from: string | null;
-    /**
-     * Transaction messages.
-     */
-    messages: TransactionMessage[];
-};
-/**
- * Initial transaction event when a user initiates a transaction.
- */
-declare type TransactionSentForSignatureEvent = {
-    /**
-     * Event type.
-     */
-    type: 'transaction-sent-for-signature';
-    /**
-     * Wallet information.
-     */
-    connectionInfo: ConnectionInfo;
-    /**
-     * Transaction information.
-     */
-    transactionInfo: TransactionInfo;
-};
-/**
- * Transaction signed event when a user successfully signed a transaction.
- */
-declare type TransactionSignedEvent = {
-    /**
-     * Event type.
-     */
-    type: 'transaction-signed';
-    /**
-     * Wallet information.
-     */
-    connectionInfo: ConnectionInfo;
-    /**
-     * Transaction information.
-     */
-    transactionInfo: TransactionInfo;
-    /**
-     * Signed transaction.
-     */
-    signedTransaction: string;
-};
-/**
- * Transaction error event when a user cancels a transaction or there is an error during the transaction process.
- */
-declare type TransactionSigningFailedEvent = {
-    /**
-     * Event type.
-     */
-    type: 'transaction-signing-failed';
-    /**
-     * Wallet information.
-     */
-    connectionInfo: ConnectionInfo;
-    /**
-     * Transaction information.
-     */
-    transactionInfo: TransactionInfo;
-    /**
-     * Reason for the error.
-     */
-    reason: string;
-};
-/**
- * Transaction events.
- */
-declare type TransactionSigningEvent = TransactionSentForSignatureEvent | TransactionSignedEvent | TransactionSigningFailedEvent;
-/**
- * Disconnect event when a user initiates a disconnection.
- */
-declare type DisconnectionEvent = {
-    /**
-     * Event type.
-     */
-    type: 'disconnection';
-    /**
-     * Wallet information.
-     */
-    connectionInfo: ConnectionInfo;
-    /**
-     * Disconnect scope: 'dapp' or 'wallet'.
-     */
-    scope: 'dapp' | 'wallet';
-};
-/**
- * User action events.
- */
-declare type UserActionEvent = ConnectionEvent | ConnectionRestoringEvent | DisconnectionEvent | TransactionSigningEvent;
-
 declare type Color = Property.Color;
 
 declare class TonConnectUIError extends TonConnectError {
     constructor(...args: ConstructorParameters<typeof Error>);
 }
 
-export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, ConnectionCompletedEvent, ConnectionErrorEvent, ConnectionEvent, ConnectionRestoringCompletedEvent, ConnectionRestoringErrorEvent, ConnectionRestoringStartedEvent, ConnectionStartedEvent, DisconnectionEvent, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, TransactionSentForSignatureEvent, TransactionSignedEvent, TransactionSigningEvent, TransactionSigningFailedEvent, UIPreferences, UIWallet, UserActionEvent, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };
+export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, UserActionEvent, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };

package/lib/index.mjs

@@ -42,7 +42,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 var _a, _b, _c, _d, _e, _f, _g, _h;
-import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isTelegramUrl, encodeTelegramUrlParameters, isWalletInfoRemote, isWalletInfoCurrentlyEmbedded } from "@tonconnect/sdk";
+import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isTelegramUrl, encodeTelegramUrlParameters, isWalletInfoRemote, isWalletInfoCurrentlyEmbedded, BrowserEventDispatcher, createConnectionStartedEvent, createConnectionCompletedEvent, createConnectionErrorEvent, createConnectionRestoringStartedEvent, createConnectionRestoringCompletedEvent, createConnectionRestoringErrorEvent, createDisconnectionEvent, createTransactionSentForSignatureEvent, createTransactionSignedEvent, createTransactionSigningFailedEvent } from "@tonconnect/sdk";
 export * from "@tonconnect/sdk";
 import UAParser from "ua-parser-js";
 import deepmerge from "deepmerge";
@@ -10031,18 +10031,26 @@ const WalletsModal = () => {
     return (_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.value;
   });
   const onClose = (closeReason) => {
-    setWalletsModalState({
-      status: "closed",
-      closeReason
-    });
-    setSelectedWalletInfo(null);
-    setInfoTab(false);
+    tonConnectUI.closeModal(closeReason);
   };
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (wallet) {
       onClose("wallet-selected");
     }
   });
+  const onSelectAllWallets = () => {
+    setSelectedTab("all-wallets");
+  };
+  const onSelectUniversal = () => {
+    setSelectedTab("universal");
+  };
+  const clearSelectedWalletInfo = () => {
+    setSelectedWalletInfo(null);
+  };
+  onCleanup(() => {
+    setSelectedWalletInfo(null);
+    setInfoTab(false);
+  });
   onCleanup(unsubscribe);
   return createComponent(StyledModal, {
     get opened() {
@@ -10107,7 +10115,7 @@ const WalletsModal = () => {
                         get additionalRequest() {
                           return additionalRequest();
                         },
-                        onBackClick: () => setSelectedWalletInfo(null)
+                        onBackClick: clearSelectedWalletInfo
                       });
                     }
                   }), createComponent(Match, {
@@ -10126,7 +10134,7 @@ const WalletsModal = () => {
                         get additionalRequest() {
                           return additionalRequest();
                         },
-                        onSelectAllWallets: () => setSelectedTab("all-wallets")
+                        onSelectAllWallets
                       });
                     }
                   }), createComponent(Match, {
@@ -10138,7 +10146,7 @@ const WalletsModal = () => {
                         get walletsList() {
                           return walletsList();
                         },
-                        onBack: () => setSelectedTab("universal"),
+                        onBack: onSelectUniversal,
                         onSelect: setSelectedWalletInfo
                       });
                     }
@@ -10393,6 +10401,7 @@ const SingleWalletModal = () => {
     }
   });
   const connector = useContext(ConnectorContext);
+  const tonConnectUI = useContext(TonConnectUiContext);
   const [infoTab, setInfoTab] = createSignal(false);
   const additionalRequestLoading = () => {
     var _a2;
@@ -10406,11 +10415,7 @@ const SingleWalletModal = () => {
     return (_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.value;
   });
   const onClose = (closeReason) => {
-    setSingleWalletModalState({
-      status: "closed",
-      closeReason
-    });
-    setInfoTab(false);
+    tonConnectUI.closeSingleWalletModal(closeReason);
   };
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (wallet) {
@@ -10418,6 +10423,9 @@ const SingleWalletModal = () => {
     }
   });
   onCleanup(unsubscribe);
+  onCleanup(() => {
+    setInfoTab(false);
+  });
   return createComponent(StyledModal, {
     get opened() {
       return getSingleWalletModalIsOpened();
@@ -10567,8 +10575,10 @@ class WalletsModalManager {
     __publicField(this, "connector");
     __publicField(this, "setConnectRequestParametersCallback");
     __publicField(this, "consumers", []);
+    __publicField(this, "tracker");
     __publicField(this, "state", walletsModalState());
     this.connector = options.connector;
+    this.tracker = options.tracker;
     this.setConnectRequestParametersCallback = options.setConnectRequestParametersCallback;
     createEffect(() => {
       const state = walletsModalState();
@@ -10578,6 +10588,7 @@ class WalletsModalManager {
   }
   open() {
     return __async(this, null, function* () {
+      this.tracker.trackConnectionStarted();
       const walletsList = yield this.connector.getWallets();
       const embeddedWallet = walletsList.find(isWalletInfoCurrentlyEmbedded);
       if (embeddedWallet) {
@@ -10587,8 +10598,11 @@ class WalletsModalManager {
       }
     });
   }
-  close() {
-    widgetController.closeWalletsModal("action-cancelled");
+  close(reason = "action-cancelled") {
+    if (reason === "action-cancelled") {
+      this.tracker.trackConnectionError("Connection was cancelled");
+    }
+    widgetController.closeWalletsModal(reason);
   }
   onStateChange(onChange) {
     this.consumers.push(onChange);
@@ -10648,8 +10662,10 @@ class SingleWalletModalManager {
     __publicField(this, "connector");
     __publicField(this, "setConnectRequestParametersCallback");
     __publicField(this, "consumers", []);
+    __publicField(this, "tracker");
     __publicField(this, "state", singleWalletModalState());
     this.connector = options.connector;
+    this.tracker = options.tracker;
     this.setConnectRequestParametersCallback = options.setConnectRequestParametersCallback;
     createEffect(() => {
       const state = singleWalletModalState();
@@ -10659,6 +10675,7 @@ class SingleWalletModalManager {
   }
   open(wallet) {
     return __async(this, null, function* () {
+      this.tracker.trackConnectionStarted();
       const fetchedWalletsList = yield this.connector.getWallets();
       const walletsList = applyWalletsListConfiguration(
         fetchedWalletsList,
@@ -10675,10 +10692,15 @@ class SingleWalletModalManager {
       if (isExternalWalletExist) {
         return this.openSingleWalletModal(externalWallet);
       }
-      throw new TonConnectUIError(`Trying to open modal window with unknown wallet "${wallet}".`);
+      const error = `Trying to open modal window with unknown wallet "${wallet}".`;
+      this.tracker.trackConnectionError(error);
+      throw new TonConnectUIError(error);
     });
   }
-  close() {
+  close(reason = "action-cancelled") {
+    if (reason === "action-cancelled") {
+      this.tracker.trackConnectionError("Connection was cancelled");
+    }
     widgetController.closeSingleWalletModal("action-cancelled");
   }
   onStateChange(onChange) {
@@ -10717,112 +10739,17 @@ class SingleWalletModalManager {
     });
   }
 }
-function createConnnectionInfo(wallet) {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-  let authType = null;
-  if ((_a2 = wallet == null ? void 0 : wallet.connectItems) == null ? void 0 : _a2.tonProof) {
-    authType = "proof" in wallet.connectItems.tonProof ? "ton_proof" : null;
-  } else if (wallet == null ? void 0 : wallet.connectItems) {
-    authType = "ton_addr";
-  }
-  return {
-    address: (_c2 = (_b2 = wallet == null ? void 0 : wallet.account) == null ? void 0 : _b2.address) != null ? _c2 : null,
-    chainId: (_e2 = (_d2 = wallet == null ? void 0 : wallet.account) == null ? void 0 : _d2.chain) != null ? _e2 : null,
-    provider: (_f2 = wallet == null ? void 0 : wallet.provider) != null ? _f2 : null,
-    walletType: (_g2 = wallet == null ? void 0 : wallet.device.appName) != null ? _g2 : null,
-    walletVersion: (_h2 = wallet == null ? void 0 : wallet.device.appVersion) != null ? _h2 : null,
-    authType
-  };
-}
-function createConnectionStartedEvent() {
-  return {
-    type: "connection-started"
-  };
-}
-function createConnectionCompletedEvent(wallet) {
-  return {
-    type: "connection-completed",
-    connectionInfo: createConnnectionInfo(wallet)
-  };
-}
-function createConnectionErrorEvent(reason) {
-  return {
-    type: "connection-error",
-    reason
-  };
-}
-function createConnectionRestoringStartedEvent() {
-  return {
-    type: "connection-restoring-started"
-  };
-}
-function createConnectionRestoringCompletedEvent(wallet) {
-  return {
-    type: "connection-restoring-completed",
-    connectionInfo: createConnnectionInfo(wallet)
-  };
-}
-function createConnectionRestoringErrorEvent(reason) {
-  return {
-    type: "connection-restoring-error",
-    reason
-  };
-}
-function createTransactionInfo(transaction) {
-  var _a2, _b2;
-  return {
-    validUntil: (_a2 = transaction.validUntil) != null ? _a2 : null,
-    from: (_b2 = transaction.from) != null ? _b2 : null,
-    messages: transaction.messages.map((message) => {
-      var _a3, _b3;
-      return {
-        address: (_a3 = message.address) != null ? _a3 : null,
-        amount: (_b3 = message.amount) != null ? _b3 : null
-      };
-    })
-  };
-}
-function createTransactionSentForSignatureEvent(wallet, transaction) {
-  return {
-    type: "transaction-sent-for-signature",
-    connectionInfo: createConnnectionInfo(wallet),
-    transactionInfo: createTransactionInfo(transaction)
-  };
-}
-function createTransactionSignedEvent(wallet, transaction, signedTransaction) {
-  return {
-    type: "transaction-signed",
-    connectionInfo: createConnnectionInfo(wallet),
-    transactionInfo: createTransactionInfo(transaction),
-    signedTransaction: signedTransaction.boc
-  };
-}
-function createTransactionSigningFailedEvent(wallet, transaction, reason) {
-  return {
-    type: "transaction-signing-failed",
-    connectionInfo: createConnnectionInfo(wallet),
-    transactionInfo: createTransactionInfo(transaction),
-    reason
-  };
-}
-function createDisconnectionEvent(wallet, scope) {
-  return {
-    type: "disconnection",
-    connectionInfo: createConnnectionInfo(wallet),
-    scope
-  };
-}
-class TonConnectTracker {
-  constructor() {
+class TonConnectUITracker {
+  constructor(eventDispatcher) {
     __publicField(this, "eventPrefix", "ton-connect-ui-");
-    __publicField(this, "window", getWindow$1());
+    __publicField(this, "eventDispatcher");
+    this.eventDispatcher = eventDispatcher != null ? eventDispatcher : new BrowserEventDispatcher();
   }
   dispatchUserActionEvent(eventDetails) {
     var _a2;
     try {
       const eventName = `${this.eventPrefix}${eventDetails.type}`;
-      const event = new CustomEvent(eventName, { detail: eventDetails });
-      (_a2 = this.window) == null ? void 0 : _a2.dispatchEvent(event);
+      (_a2 = this.eventDispatcher) == null ? void 0 : _a2.dispatchEvent(eventName, eventDetails).catch();
     } catch (e2) {
     }
   }
@@ -10901,7 +10828,7 @@ class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
     __publicField(this, "preferredWalletStorage", new PreferredWalletStorage());
-    __publicField(this, "tracker", new TonConnectTracker());
+    __publicField(this, "tracker");
     __publicField(this, "walletInfo", null);
     __publicField(this, "systemThemeChangeUnsubscribe", null);
     __publicField(this, "actionsConfiguration");
@@ -10915,20 +10842,26 @@ class TonConnectUI {
     if (options && "connector" in options && options.connector) {
       this.connector = options.connector;
     } else if (options && "manifestUrl" in options && options.manifestUrl) {
-      this.connector = new TonConnect({ manifestUrl: options.manifestUrl });
+      this.connector = new TonConnect({
+        manifestUrl: options.manifestUrl,
+        eventDispatcher: options == null ? void 0 : options.eventDispatcher
+      });
     } else {
       throw new TonConnectUIError(
         "You have to specify a `manifestUrl` or a `connector` in the options."
       );
     }
+    this.tracker = new TonConnectUITracker(options == null ? void 0 : options.eventDispatcher);
     this.modal = new WalletsModalManager({
       connector: this.connector,
+      tracker: this.tracker,
       setConnectRequestParametersCallback: (callback) => {
         this.connectRequestParametersCallback = callback;
       }
     });
     this.singleWalletModal = new SingleWalletModalManager({
       connector: this.connector,
+      tracker: this.tracker,
       setConnectRequestParametersCallback: (callback) => {
         this.connectRequestParametersCallback = callback;
       }
@@ -11043,13 +10976,11 @@ class TonConnectUI {
   }
   openModal() {
     return __async(this, null, function* () {
-      this.tracker.trackConnectionStarted();
       return this.modal.open();
     });
   }
-  closeModal() {
-    this.tracker.trackConnectionError("Connection was cancelled");
-    this.modal.close();
+  closeModal(reason) {
+    this.modal.close(reason);
   }
   onModalStateChange(onChange) {
     return this.modal.onStateChange(onChange);
@@ -11059,13 +10990,11 @@ class TonConnectUI {
   }
   openSingleWalletModal(wallet) {
     return __async(this, null, function* () {
-      this.tracker.trackConnectionStarted();
       return this.singleWalletModal.open(wallet);
     });
   }
-  closeSingleWalletModal() {
-    this.tracker.trackConnectionError("Connection was cancelled");
-    this.singleWalletModal.close();
+  closeSingleWalletModal(closeReason) {
+    this.singleWalletModal.close(closeReason);
   }
   onSingleWalletModalStateChange(onChange) {
     return this.singleWalletModal.onStateChange(onChange);