@tonconnect/ui 0.0.7 → 0.0.9

package/lib/index.d.ts

@@ -1,62 +1,136 @@
-import { WalletConnectionSource, ITonConnect, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjected, WalletInfoRemote, ITonConnect, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 import { Property } from 'csstype';
 
+declare type Locales = 'en' | 'ru';
+
 declare enum THEME {
     DARK = "DARK",
     LIGHT = "LIGHT"
 }
 declare type Theme = THEME | 'SYSTEM';
 
-declare type Color$1 = Property.Color;
+declare type BorderRadius = 'm' | 's' | 'none';
 
-interface Themed {
-    theme: Theme;
-    accentColor: Color$1;
-}
+declare type Color$1 = Property.Color;
+declare type ColorsSet = {
+    constant: {
+        black: Color$1;
+        white: Color$1;
+    };
+    connectButton: {
+        background: Color$1;
+        foreground: Color$1;
+    };
+    accent: Color$1;
+    icon: {
+        primary: Color$1;
+        secondary: Color$1;
+        tertiary: Color$1;
+        success: Color$1;
+    };
+    background: {
+        primary: Color$1;
+        secondary: Color$1;
+    };
+    text: {
+        primary: Color$1;
+        subhead: Color$1;
+        secondary: Color$1;
+    };
+};
+declare type PartialColorsSet = {
+    constant?: {
+        black?: Color$1;
+        white?: Color$1;
+    };
+    connectButton?: {
+        background?: Color$1;
+        foreground?: Color$1;
+    };
+    accent?: Color$1;
+    icon?: {
+        primary?: Color$1;
+        secondary?: Color$1;
+        tertiary?: Color$1;
+        success?: Color$1;
+    };
+    background?: {
+        primary?: Color$1;
+        secondary?: Color$1;
+    };
+    text?: {
+        primary?: Color$1;
+        subhead?: Color$1;
+        secondary?: Color$1;
+    };
+};
 
-declare type ButtonSize = 'm' | 'l';
-declare type ButtonAppearance = 'primary' | 'secondary' | 'flat';
-interface ButtonConfiguration extends Partial<Themed> {
-    size: ButtonSize;
-    appearance: ButtonAppearance;
+interface UIPreferences {
+    /**
+     * Color theme for the UI elements.
+     * @default SYSTEM theme.
+     */
+    theme?: Theme;
+    /**
+     * Birder radius for UI elements.
+     * @default 'm'
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Configure colors scheme for different themes.
+     */
+    colorsSet?: Partial<Record<THEME, PartialColorsSet>>;
 }
 
-interface UiWallet {
-    name: string;
-    iconUrl: string;
-    connectionSource: WalletConnectionSource;
-}
+declare type UIWallet = WalletInfoBase & (Omit<WalletInfoInjected, 'injected' | 'embedded'> | WalletInfoRemote);
 
 declare type WalletsListConfiguration = WalletsListConfigurationExplicit | WalletsListConfigurationImplicit;
+/**
+ * Configure whole list of wallets in the modal. Only passed wallets will be displayed.
+ */
 declare type WalletsListConfigurationExplicit = {
-    wallets: (string | UiWallet)[];
+    /**
+     * Allows to configure wallets order and add custom wallets. Must be an array of wallets names from WalletsList or custom wallets.
+     */
+    wallets: (string | UIWallet)[];
 };
+/**
+ * Add corrections to the default wallets list in the modal: exclude some wallets and add custom wallets.
+ */
 declare type WalletsListConfigurationImplicit = {
+    /**
+     * Allows to exclude wallets from wallets list in the modal by its names. Must be an array of wallet's names from WalletsList.
+     */
     excludeWallets?: string[];
-    includeWallets?: UiWallet[];
+    /**
+     * Allows to include extra wallets to the wallets list in the modal.
+     */
+    includeWallets?: UIWallet[];
+    /**
+     * Allows to specify order of the extra wallets in the wallets list in the modal. Cannot be applied if `includeWallets` is not specified.
+     * @default 'end'.
+     */
+    includeWalletsOrder?: 'start' | 'end';
 };
 
-declare type ModalSize = 'm' | 'l';
-interface WidgetConfiguration extends Partial<Themed> {
-    size: ModalSize;
-    wallets?: WalletsListConfiguration;
+interface ActionConfiguration {
+    /**
+     * Configure action modals behavior.
+     * @default ['before']
+     */
+    modals?: ('before' | 'success' | 'error')[] | 'all';
+    /**
+     * Configure action notifications behavior.
+     * @default 'all'
+     */
+    notifications?: ('before' | 'success' | 'error')[] | 'all';
 }
 
-declare type Locales = 'en' | 'ru';
-
-declare type Color = Property.Color;
-
 interface TonConnectUiOptions {
     /**
-     * Color theme for the UI elements.
-     * @default SYSTEM theme.
-     */
-    theme?: Theme;
-    /**
-     * Accent color for the UI elements.
-     * @default #31A6F5 (blue).
+     * UI elements configuration.
      */
-    accentColor?: Color;
+    uiPreferences?: UIPreferences;
     /**
      * HTML element id to attach the wallet connect button. If not passed button won't appear.
      * @default null.
@@ -68,13 +142,17 @@ interface TonConnectUiOptions {
      */
     language?: Locales;
     /**
-     * Configuration for the wallet connect button.
+     * Configuration for the wallets list in the connect wallet modal.
+     */
+    walletsList?: WalletsListConfiguration;
+    /**
+     * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications.
      */
-    buttonConfiguration?: Partial<ButtonConfiguration>;
+    actionsConfiguration?: ActionConfiguration;
     /**
-     * Configuration for the wallet connect modal and action modals.
+     * @deprecated Don't use it
      */
-    widgetConfiguration?: Partial<WidgetConfiguration>;
+    walletsListSource?: string;
 }
 
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
@@ -110,6 +188,7 @@ declare class TonConnectUI {
     private readonly connector;
     private _walletInfo;
     private systemThemeChangeUnsubscribe;
+    private actionsConfiguration?;
     /**
      * Current connection status.
      */
@@ -154,18 +233,18 @@ declare class TonConnectUI {
      * @param tx transaction to send.
      * @param options modal and notifications behaviour settings. Default is show only 'before' modal and all notifications.
      */
-    sendTransaction(tx: SendTransactionRequest, options?: {
-        modals?: ('before' | 'success' | 'error')[];
-        notifications?: ('before' | 'success' | 'error')[];
-    }): Promise<SendTransactionResponse>;
+    sendTransaction(tx: SendTransactionRequest, options?: ActionConfiguration): Promise<SendTransactionResponse>;
     private subscribeToWalletChange;
     private updateWalletInfo;
     private normalizeWidgetRoot;
     private checkButtonRootExist;
+    private getModalsAndNotificationsConfiguration;
 }
 
+declare type Color = Property.Color;
+
 declare class TonConnectUIError extends TonConnectError {
     constructor(...args: ConstructorParameters<typeof Error>);
 }
 
-export { ButtonAppearance, ButtonConfiguration, ButtonSize, Locales, THEME, Theme, Themed, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, WalletsListConfiguration, WalletsListConfigurationExplicit, WalletsListConfigurationImplicit, WidgetConfiguration, TonConnectUI as default };
+export { ActionConfiguration, BorderRadius, Color, ColorsSet, Locales, PartialColorsSet, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, WalletsListConfiguration, WalletsListConfigurationExplicit, WalletsListConfigurationImplicit, TonConnectUI as default };