@tonconnect/ui 0.0.5 → 0.0.6

package/README.md

@@ -1,3 +1,168 @@
-# TON Connect SDK UI
+# TON Connect UI
 
-⚠️ API is work in progress right now.
+⚠️ **API is work in progress right now. Don't use this package in production.**
+
+TonConnect UI is a UI kit for TonConnect SDK. Use it to connect your app to TON wallets via TonConnect protocol.
+
+If you use React for your dapp, take a look at [TonConnect UI React kit](https://github.com/ton-connect/sdk/tree/main/packages/ui-react).
+
+If you want to use TonConnect on the server side, you should use the [TonConnect SDK](https://github.com/ton-connect/sdk/tree/main/packages/sdk).
+
+You can find more details and the protocol specification in the [docs](https://github.com/ton-connect/docs).
+
+---
+
+[Latest API documentation](https://ton-connect.github.io/sdk/modules/_tonconnect_ui.html)
+
+# Getting started
+
+## Installation with npm
+`npm i @tonconnect/ui`
+
+# Usage
+
+## Create TonConnectUI instance
+```ts
+import TonConnectUI from '@tonconnect/ui'
+
+const tonConnectUI = new TonConnectUI({
+    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
+    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
+});
+```
+
+See all available options:
+[TonConnectUiOptionsWithManifest](https://ton-connect.github.io/sdk/docs/interfaces/_tonconnect_ui.TonConnectUiOptionsWithManifest.html)
+[TonConnectUiOptionsWithConnector](https://ton-connect.github.io/sdk/docs/interfaces/_tonconnect_ui.TonConnectUiOptionsWithConnector.html)
+
+## Change options if needed 
+```ts
+tonConnectUI.uiOptions = {
+    language: 'ru',
+    theme: THEME.DARK
+};
+```
+
+UI element will be rerendered after assignation. You should pass only options that you want to change.
+Passed options will be merged with current UI options. Note, that you have to pass object to `tonConnectUI.uiOptions` to keep reactivity.
+
+DON'T do this:
+```ts
+tonConnectUI.uiOptions.language = 'ru'; // WRONG, WILL NOT WORK 
+```
+
+[See all available options](https://ton-connect.github.io/sdk/docs/interfaces/_tonconnect_ui.TonConnectUiOptions.html)
+
+## Fetch wallets list
+```ts
+const walletsList = await tonConnectUI.getWallets();
+
+/* walletsList is 
+{
+    name: string;
+    imageUrl: string;
+    tondns?: string;
+    aboutUrl: string;
+    universalLink?: string;
+    deepLink?: string;
+    bridgeUrl?: string;
+    jsBridgeKey?: string;
+    injected?: boolean; // true if this wallet is injected to the webpage
+    embedded?: boolean; // true if the dapp is opened inside this wallet's browser
+}[] 
+ */
+```
+
+or
+
+```ts
+const walletsList = await TonConnectUI.getWallets();
+```
+
+## Call connect
+"TonConnect UI connect button" (which is added at `buttonRootId`) automatically handles clicks and calls connect.
+But you are still able to open "connect modal" programmatically, e.g. after click on your custom connect button.
+
+```ts
+const connectedWallet = await tonConnectUI.connectWallet();
+```
+
+If there is an error while wallet connecting, `TonConnectUIError` or `TonConnectError` will be thrown depends on situation.
+
+## Get current connected Wallet and WalletInfo
+You can use special getters to read current connection state. Note that this getter only represents current value, so they are not reactive. 
+To react and handle wallet changes use `onStatusChange` mathod.
+
+```ts
+    const currentWallet = tonConnectUI.wallet;
+    const currentWalletInfo = tonConnectUI.walletInfo;
+    const currentAccount = tonConnectUI.account;
+    const currentIsConnectedStatus = tonConnectUI.connected;
+```
+
+## Subscribe to the connection status changes
+```js
+const unsubscribe = tonConnectUI.onStatusChange(
+    walletAndwalletInfo => {
+        // update state/reactive variables to show updates in the ui
+    } 
+);
+
+// call `unsubscribe()` later to save resources when you don't need to listen for updates anymore.
+```
+
+## Disconnect wallet
+Call to disconnect the wallet.
+
+```ts
+await tonConnectUI.disconnect();
+```
+
+## Send transaction
+Wallet must be connected when you call `sendTransaction`. Otherwise, an error will be thrown.
+
+
+```ts
+const transaction = {
+    validUntil: Date.now() + 1000000,
+    messages: [
+        {
+            address: "0:412410771DA82CBA306A55FA9E0D43C9D245E38133CB58F1457DFB8D5CD8892F",
+            amount: "20000000",
+            stateInit: "base64bocblahblahblah==" // just for instance. Replace with your transaction initState or remove
+        },
+        {
+            address: "0:E69F10CC84877ABF539F83F879291E5CA169451BA7BCE91A37A5CED3AB8080D3",
+            amount: "60000000",
+            payload: "base64bocblahblahblah==" // just for instance. Replace with your transaction payload or remove
+        }
+    ]
+}
+
+try {
+    const result = await tonConnectUI.sendTransaction(transaction);
+
+    // you can use signed boc to find the transaction 
+    const someTxData = await myAppExplorerService.getTransaction(result.boc);
+    alert('Transaction was sent successfully', someTxData);
+} catch (e) {
+    console.error(e);
+}
+```
+
+`sendTransaction` will automatically render informational modals and notifications. You can change its behaviour:
+
+```ts
+const result = await tonConnectUI.sendTransaction(defaultTx, {
+    modals: ['before', 'success', 'error'],
+    notifications: ['before', 'success', 'error']
+});
+```
+
+Default configuration is: 
+```ts
+const defaultBehaviour = {
+    modals: ['before'],
+    notifications: ['before', 'success', 'error']
+}
+```

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { WalletConnectionSource, ITonConnect, Account, Wallet, WalletInfo, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletConnectionSource, ITonConnect, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 import { Property } from 'csstype';
 
 declare enum THEME {
@@ -47,47 +47,89 @@ 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).
+     */
     accentColor?: Color;
+    /**
+     * HTML element id to attach the wallet connect button. If not passed button won't appear.
+     * @default null.
+     */
     buttonRootId?: string | null;
+    /**
+     * Language for the phrases it the UI elements.
+     * @default system
+     */
     language?: Locales;
+    /**
+     * Configuration for the wallet connect button.
+     */
     buttonConfiguration?: Partial<ButtonConfiguration>;
+    /**
+     * Configuration for the wallet connect modal and action modals.
+     */
     widgetConfiguration?: Partial<WidgetConfiguration>;
 }
 
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
 interface TonConnectUiOptionsWithManifest extends TonConnectUiCreateOptionsBase {
+    /**
+     * Url to the [manifest]{@link https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest} with the Dapp metadata that will be displayed in the user's wallet.
+     * If not passed, manifest from `${window.location.origin}/tonconnect-manifest.json` will be taken.
+     */
     manifestUrl?: string;
 }
 interface TonConnectUiOptionsWithConnector extends TonConnectUiCreateOptionsBase {
+    /**
+     * TonConnect instance. Can be helpful if you use custom ITonConnect implementation, or use both of @tonconnect/sdk and @tonconnect/ui in your app.
+     */
     connector?: ITonConnect;
 }
 interface TonConnectUiCreateOptionsBase extends TonConnectUiOptions {
+    /**
+     * Try to restore existing session and reconnect to the corresponding wallet.
+     * @default true.
+     */
     restoreConnection?: boolean;
+    /**
+     * HTML element id to attach the modal window element. If not passed, `div#tc-widget-root` in the end of the <body> will be added and used.
+     * @default `div#tc-widget-root`.
+     */
     widgetRootId?: string;
 }
 
-declare class TonConnectUi {
+declare class TonConnectUI {
+    static getWallets(): Promise<WalletInfo[]>;
     private readonly walletInfoStorage;
     private readonly connector;
     private _walletInfo;
     private systemThemeChangeUnsubscribe;
     /**
-     * Current connection status
+     * Current connection status.
      */
     get connected(): boolean;
     /**
-     * Current connected account or null
+     * Current connected account or null.
      */
     get account(): Account | null;
     /**
-     * Curren connected wallet app or null
+     * Curren connected wallet app or null.
      */
     get wallet(): Wallet | null;
     /**
-     * Curren connected wallet's info or null
+     * Curren connected wallet's info or null.
      */
     get walletInfo(): WalletInfo | null;
+    /**
+     * Set and apply new UI options. Object with partial options should be passed. Passed options will be merged with current options.
+     * @param options
+     */
     set uiOptions(options: TonConnectUiOptions);
     constructor(options?: TonConnectUiCreateOptions);
     /**
@@ -95,8 +137,8 @@ declare class TonConnectUi {
      */
     getWallets(): Promise<WalletInfo[]>;
     /**
-     * Subscribe to connection status change
-     * @return function which has to be called to unsubscribe
+     * Subscribe to connection status change.
+     * @return function which has to be called to unsubscribe.
      */
     onStatusChange(callback: (wallet: (Wallet & WalletInfo) | null) => void, errorsHandler?: (err: TonConnectError) => void): ReturnType<ITonConnect['onStatusChange']>;
     /**
@@ -108,13 +150,13 @@ declare class TonConnectUi {
      */
     disconnect(): Promise<void>;
     /**
-     * Opens the modal window and handles the tx sending
-     * @param tx
-     * @param options
+     * Opens the modal window and handles the transaction sending.
+     * @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')[];
+        modals?: ('before' | 'success' | 'error')[];
+        notifications?: ('before' | 'success' | 'error')[];
     }): Promise<SendTransactionResponse>;
     private subscribeToWalletChange;
     private updateWalletInfo;
@@ -126,4 +168,4 @@ declare class TonConnectUIError extends TonConnectError {
     constructor(...args: ConstructorParameters<typeof Error>);
 }
 
-export { ButtonAppearance, ButtonConfiguration, ButtonSize, Locales, THEME, Theme, Themed, TonConnectUIError, TonConnectUi, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, WalletsListConfiguration, WalletsListConfigurationExplicit, WalletsListConfigurationImplicit, WidgetConfiguration, TonConnectUi as default };
+export { ButtonAppearance, ButtonConfiguration, ButtonSize, Locales, THEME, Theme, Themed, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, WalletsListConfiguration, WalletsListConfigurationExplicit, WalletsListConfigurationImplicit, WidgetConfiguration, TonConnectUI as default };

package/lib/index.js

@@ -2688,7 +2688,11 @@ class SessionCrypto {
     const [nonce, internalMessage] = splitToUint8Arrays(message, this.nonceLength);
     const decrypted = nacl.box.open(internalMessage, nonce, senderPublicKey, this.keyPair.secretKey);
     if (!decrypted) {
-      throw new Error("Decryption error");
+      throw new Error(`Decryption error: 
+ message: ${message.toString()} 
+ sender pubkey: ${senderPublicKey.toString()} 
+ keypair pubkey: ${this.keyPair.publicKey.toString()} 
+ keypair secretkey: ${this.keyPair.secretKey.toString()}`);
     }
     return new TextDecoder().decode(decrypted);
   }
@@ -2890,14 +2894,14 @@ class BridgeGateway {
     });
   }
   close() {
-    var _a2;
+    var _a;
     this.isClosed = true;
-    (_a2 = this.eventSource) === null || _a2 === void 0 ? void 0 : _a2.close();
+    (_a = this.eventSource) === null || _a === void 0 ? void 0 : _a.close();
   }
   errorsHandler(e2) {
-    var _a2, _b;
+    var _a, _b;
     if (!this.isClosed) {
-      if (((_a2 = this.eventSource) === null || _a2 === void 0 ? void 0 : _a2.readyState) === EventSource.CLOSED) {
+      if (((_a = this.eventSource) === null || _a === void 0 ? void 0 : _a.readyState) === EventSource.CLOSED) {
         this.eventSource.close();
         this.registerSession();
         return;
@@ -3087,8 +3091,8 @@ class BridgeProvider {
     });
   }
   connect(message) {
-    var _a2;
-    (_a2 = this.bridge) === null || _a2 === void 0 ? void 0 : _a2.close();
+    var _a;
+    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
     const sessionCrypto = new SessionCrypto();
     this.session = {
       sessionCrypto,
@@ -3099,9 +3103,9 @@ class BridgeProvider {
     return this.generateUniversalLink(message);
   }
   restoreConnection() {
-    var _a2;
+    var _a;
     return __awaiter$4(this, void 0, void 0, function* () {
-      (_a2 = this.bridge) === null || _a2 === void 0 ? void 0 : _a2.close();
+      (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
       const storedConnection = yield this.connectionStorage.getHttpConnection();
       if (!storedConnection) {
         return;
@@ -3125,15 +3129,15 @@ class BridgeProvider {
     });
   }
   closeConnection() {
-    var _a2;
-    (_a2 = this.bridge) === null || _a2 === void 0 ? void 0 : _a2.close();
+    var _a;
+    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
     this.listeners = [];
     this.session = null;
     this.bridge = null;
   }
   disconnect() {
-    var _a2;
-    (_a2 = this.bridge) === null || _a2 === void 0 ? void 0 : _a2.close();
+    var _a;
+    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
     this.listeners = [];
     return this.removeBridgeAndSession();
   }
@@ -3202,8 +3206,8 @@ function getWindow$1() {
   return window;
 }
 function getWebPageManifest() {
-  var _a2;
-  const origin = (_a2 = getWindow$1()) === null || _a2 === void 0 ? void 0 : _a2.location.origin;
+  var _a;
+  const origin = (_a = getWindow$1()) === null || _a === void 0 ? void 0 : _a.location.origin;
   if (origin) {
     return origin + "/tonconnect-manifest.json";
   }
@@ -3311,10 +3315,10 @@ class InjectedProvider {
     return Promise.resolve();
   }
   closeAllListeners() {
-    var _a2;
+    var _a;
     this.listenSubscriptions = false;
     this.listeners = [];
-    (_a2 = this.unsubscribeCallback) === null || _a2 === void 0 ? void 0 : _a2.call(this);
+    (_a = this.unsubscribeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
   }
   listen(eventsCallback) {
     this.listeners.push(eventsCallback);
@@ -3551,7 +3555,6 @@ var __rest = globalThis && globalThis.__rest || function(s2, e2) {
     }
   return t2;
 };
-var _a;
 class TonConnect {
   constructor(options) {
     this.walletsList = new WalletsListManager();
@@ -3568,12 +3571,15 @@ class TonConnect {
     }
     this.bridgeConnectionStorage = new BridgeConnectionStorage(this.dappSettings.storage);
   }
+  static getWallets() {
+    return this.walletsList.getWallets();
+  }
   get connected() {
     return this._wallet !== null;
   }
   get account() {
-    var _b;
-    return ((_b = this._wallet) === null || _b === void 0 ? void 0 : _b.account) || null;
+    var _a;
+    return ((_a = this._wallet) === null || _a === void 0 ? void 0 : _a.account) || null;
   }
   get wallet() {
     return this._wallet;
@@ -3598,11 +3604,11 @@ class TonConnect {
     };
   }
   connect(wallet, request) {
-    var _b;
+    var _a;
     if (this.connected) {
       throw new WalletAlreadyConnectedError();
     }
-    (_b = this.provider) === null || _b === void 0 ? void 0 : _b.closeConnection();
+    (_a = this.provider) === null || _a === void 0 ? void 0 : _a.closeConnection();
     this.provider = this.createProvider(wallet);
     return this.provider.connect(this.createConnectRequest(request));
   }
@@ -3713,8 +3719,8 @@ class TonConnect {
     }
   }
   checkFeatureSupport(feature) {
-    var _b;
-    if (!((_b = this.wallet) === null || _b === void 0 ? void 0 : _b.device.features.includes(feature))) {
+    var _a;
+    if (!((_a = this.wallet) === null || _a === void 0 ? void 0 : _a.device.features.includes(feature))) {
       throw new WalletNotSupportFeatureError();
     }
   }
@@ -3736,9 +3742,7 @@ class TonConnect {
     };
   }
 }
-_a = TonConnect;
 TonConnect.walletsList = new WalletsListManager();
-TonConnect.getWallets = _a.walletsList.getWallets();
 function toUserFriendlyAddress(hexAddress) {
   const { wc, hex } = parseHexAddress(hexAddress);
   const bounceableTag = 17;
@@ -6206,17 +6210,17 @@ const TransitionGroup = (props) => {
 };
 function clickOutside$1(el, accessor) {
   const onClick = (e2) => {
-    var _a2;
-    return !el.contains(e2.target) && ((_a2 = accessor()) == null ? void 0 : _a2());
+    var _a;
+    return !el.contains(e2.target) && ((_a = accessor()) == null ? void 0 : _a());
   };
   document.body.addEventListener("click", onClick);
   onCleanup(() => document.body.removeEventListener("click", onClick));
 }
 function escPressed(_, accessor) {
   const onKeyPress = (e2) => {
-    var _a2, _b;
+    var _a, _b;
     if (e2.key === "Escape") {
-      (_a2 = document.activeElement) == null ? void 0 : _a2.blur();
+      (_a = document.activeElement) == null ? void 0 : _a.blur();
       (_b = accessor()) == null ? void 0 : _b();
     }
   };
@@ -6521,8 +6525,8 @@ const H1 = (props) => {
       return props.class;
     },
     get children() {
-      var _a2;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a2 = props.children) == null ? void 0 : _a2.toString()) : props.children;
+      var _a;
+      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -6547,8 +6551,8 @@ const H2 = (props) => {
       return props.class;
     },
     get children() {
-      var _a2;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a2 = props.children) == null ? void 0 : _a2.toString()) : props.children;
+      var _a;
+      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -6569,8 +6573,8 @@ const H3 = (props) => {
   const [t2] = useI18n();
   return createComponent(H3Styled, {
     get children() {
-      var _a2;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a2 = props.children) == null ? void 0 : _a2.toString()) : props.children;
+      var _a;
+      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -6613,8 +6617,8 @@ const Text = (inputs) => {
       return props.class;
     },
     get children() {
-      var _a2;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a2 = props.children) == null ? void 0 : _a2.toString()) : props.children;
+      var _a;
+      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -7980,8 +7984,8 @@ const AccountButton = () => {
               }), null);
               insert(_el$, createComponent(NotificationsStyled, {}), null);
               createRenderEffect((_p$) => {
-                var _a2, _b;
-                const _v$ = position.strategy, _v$2 = `${(_a2 = position.y) != null ? _a2 : 0}px`, _v$3 = `${(_b = position.x) != null ? _b : 0}px`;
+                var _a, _b;
+                const _v$ = position.strategy, _v$2 = `${(_a = position.y) != null ? _a : 0}px`, _v$3 = `${(_b = position.x) != null ? _b : 0}px`;
                 _v$ !== _p$._v$ && _el$.style.setProperty("position", _p$._v$ = _v$);
                 _v$2 !== _p$._v$2 && _el$.style.setProperty("top", _p$._v$2 = _v$2);
                 _v$3 !== _p$._v$3 && _el$.style.setProperty("left", _p$._v$3 = _v$3);
@@ -9712,9 +9716,9 @@ const QRCode = (props) => {
   });
 };
 const Translation = (props) => {
-  var _a2;
+  var _a;
   const [t2] = useI18n();
-  return t2(props.translationKey, props.translationValues, (_a2 = props.children) == null ? void 0 : _a2.toString());
+  return t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString());
 };
 const QrCodeModalStyled = styled.div`
     padding: 0 24px;
@@ -10023,8 +10027,8 @@ const SelectWalletModal = (props) => {
 };
 const ModalWrapper = styled.div`
     color: ${(props) => {
-  var _a2;
-  return ((_a2 = props.theme) == null ? void 0 : _a2.accentColor) || "blue";
+  var _a;
+  return ((_a = props.theme) == null ? void 0 : _a.accentColor) || "blue";
 }};
 `;
 const StyledModal = styled(Modal)`
@@ -10266,8 +10270,8 @@ const TransactionSentModal = (props) => {
 const ActionsModal = () => {
   return createComponent(Modal, {
     get opened() {
-      var _a2;
-      return memo(() => action() !== null, true)() && ((_a2 = action()) == null ? void 0 : _a2.openModal) === true;
+      var _a;
+      return memo(() => action() !== null, true)() && ((_a = action()) == null ? void 0 : _a.openModal) === true;
     },
     onClose: () => setAction(null),
     get children() {
@@ -10519,7 +10523,7 @@ function mergeOptions(options, defaultOptions) {
     isMergeableObject: isPlainObject
   });
 }
-class TonConnectUi {
+class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
     __publicField(this, "connector");
@@ -10544,6 +10548,9 @@ class TonConnectUi {
     setAppState({ connector: this.connector });
     widgetController.renderApp(rootId, this);
   }
+  static getWallets() {
+    return TonConnect.getWallets();
+  }
   get connected() {
     return this.connector.connected;
   }
@@ -10557,7 +10564,7 @@ class TonConnectUi {
     return this._walletInfo;
   }
   set uiOptions(options) {
-    var _a2;
+    var _a;
     this.checkButtonRootExist(options.buttonRootId);
     if (options.theme === "SYSTEM") {
       setTheme(getSystemTheme());
@@ -10568,7 +10575,7 @@ class TonConnectUi {
       }
     } else {
       if (options.theme) {
-        (_a2 = this.systemThemeChangeUnsubscribe) == null ? void 0 : _a2.call(this);
+        (_a = this.systemThemeChangeUnsubscribe) == null ? void 0 : _a.call(this);
         setTheme(options.theme);
       }
     }
@@ -10707,8 +10714,8 @@ class TonConnectUi {
 }
 export {
   THEME,
+  TonConnectUI,
   TonConnectUIError,
-  TonConnectUi,
-  TonConnectUi as default
+  TonConnectUI as default
 };
 //# sourceMappingURL=index.js.map