@tonconnect/ui - npm Package Compare versions

Comparing version 2.0.3-beta.0 to 2.0.3-beta.1

lib/index.d.ts

@@ -1,5 +0,4 @@
-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';
 
@@ -172,2 +171,7 @@ declare type Locales = 'en' | 'ru';
 
+/**
+ * User action events.
+ */
+declare type UserActionEvent = ConnectionEvent | ConnectionRestoringEvent | DisconnectionEvent | TransactionSigningEvent;
+
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
@@ -198,2 +202,7 @@ interface TonConnectUiOptionsWithManifest extends TonConnectUiCreateOptionsBase {
     widgetRootId?: string;
+    /**
+     * Event dispatcher to track user actions. By default, it uses `window.dispatchEvent` for browser environment.
+     * @default BrowserEventDispatcher.
+     */
+    eventDispatcher?: EventDispatcher<UserActionEvent | SdkActionEvent>;
 }
@@ -224,4 +233,5 @@
      * Close the modal.
+     * @default 'action-cancelled'
      */
-    close: () => void;
+    close: (reason?: WalletsModalCloseReason) => void;
     /**
@@ -314,2 +324,6 @@ * Subscribe to the modal window status changes.
     private readonly preferredWalletStorage;
+    /**
+     * Emits user action event to the EventDispatcher. By default, it uses `window.dispatchEvent` for browser environment.
+     * @private
+     */
     private readonly tracker;
@@ -386,3 +400,3 @@ private walletInfo;
      */
-    closeModal(): void;
+    closeModal(reason?: WalletsModalCloseReason): void;
     /**
@@ -405,3 +419,3 @@ * Subscribe to the modal window state changes, returns a function which has to be called to unsubscribe.
      */
-    closeSingleWalletModal(): void;
+    closeSingleWalletModal(closeReason?: WalletsModalCloseReason): void;
     /**
@@ -485,228 +499,2 @@ * Subscribe to the single wallet modal window state changes, returns a function which has to be called to unsubscribe.
 
-/**
- * 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;
@@ -718,2 +506,2 @@
 
-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.json

 {
   "name": "@tonconnect/ui",
-  "version": "2.0.3-beta.0",
+  "version": "2.0.3-beta.1",
   "scripts": {
@@ -52,3 +52,3 @@ "start": "vite --host",
     "deepmerge": "^4.2.2",
-    "@tonconnect/sdk": "3.0.2",
+    "@tonconnect/sdk": "3.0.3-beta.0",
     "ua-parser-js": "^1.0.35"
@@ -55,0 +55,0 @@ },

README.md

@@ -754,2 +754,50 @@ # TON Connect UI
 
+
+# Tracking
+
+## Track events
+
+Tracker for TonConnect user actions, such as transaction signing, connection, etc.
+
+List of events:
+* `connection-started`: when a user starts connecting a wallet.
+* `connection-completed`: when a user successfully connected a wallet.
+* `connection-error`: when a user cancels a connection or there is an error during the connection process.
+* `connection-restoring-started`: when the dApp starts restoring a connection.
+* `connection-restoring-completed`: when the dApp successfully restores a connection.
+* `connection-restoring-error`: when the dApp fails to restore a connection.
+* `disconnection`: when a user starts disconnecting a wallet.
+* `transaction-sent-for-signature`: when a user sends a transaction for signature.
+* `transaction-signed`: when a user successfully signs a transaction.
+* `transaction-signing-failed`: when a user cancels transaction signing or there is an error during the signing process.
+
+If you want to track user actions, you can subscribe to the window events with prefix `ton-connect-ui-`:
+
+```typescript
+window.addEventListener('ton-connect-ui-transaction-sent-for-signature', (event) => {
+    console.log('Transaction init', event.detail);
+});
+```
+
+## Use custom event dispatcher
+
+You can use your custom event dispatcher to track user actions. To do this, you need to pass the `eventDispatcher` to the TonConnect constructor:
+
+```typescript
+import { TonConnectUI, EventDispatcher, SdkActionEvent, UserActionEvent } from '@tonconnect/ui';
+
+class CustomEventDispatcher implements EventDispatcher<UserActionEvent | SdkActionEvent> {
+    public async dispatchEvent(
+      eventName: string,
+      eventDetails: UserActionEvent | SdkActionEvent
+    ): Promise<void> {
+        console.log(`Event: ${eventName}, details:`, eventDetails);
+    }
+}
+
+const eventDispatcher = new CustomEventDispatcher();
+
+const connector = new TonConnectUI({ eventDispatcher });
+```
+
 # Troubleshooting
@@ -756,0 +804,0 @@

No alert changes

Improved metrics

Number of lines in readme file

870

increased by5.84%

Worsened metrics

Total package byte prevSize

3995667

decreased by-0.22%

Lines of code

25291

decreased by-1.31%

Dependency changes

• + Added@tonconnect/sdk@3.0.3-beta.0(transitive)

• - Removed@tonconnect/sdk@3.0.2(transitive)

• Updated@tonconnect/sdk@3.0.3-beta.0