@tonconnect/ui 0.0.10 → 0.0.12

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { WalletInfoBase, WalletInfoInjected, WalletInfoRemote, ITonConnect, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjected, WalletInfoRemote, ITonConnect, ConnectAdditionalRequest, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 import { Property } from 'csstype';
 
 declare type Locales = 'en' | 'ru';
@@ -149,10 +149,6 @@ interface TonConnectUiOptions {
      * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications.
      */
     actionsConfiguration?: ActionConfiguration;
-    /**
-     * @deprecated Don't use it
-     */
-    walletsListSource?: string;
 }
 
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;
@@ -180,6 +176,18 @@ interface TonConnectUiCreateOptionsBase extends TonConnectUiOptions {
      * @default `div#tc-widget-root`.
      */
     widgetRootId?: string;
+    /**
+     * Use it to customize ConnectRequest and add `tonProof` payload.
+     * The function will be called after wallets modal opens, and wallets selection will be blocked until it's resolved.
+     * If you have to make a http-request to your backend, it is better to do it after app initialization (if possible) and return (probably completed) promise to reduce loading time for the user.
+     */
+    getConnectParameters?: () => Promise<ConnectAdditionalRequest>;
+    /**
+     * Redefine wallets list source URL. Must be a link to a json file with [following structure]{@link https://github.com/ton-connect/wallets-list}
+     * @default https://raw.githubusercontent.com/ton-connect/wallets-list/main/wallets.json
+     * @
+     */
+    walletsListSource?: string;
 }
 
 declare class TonConnectUI {

package/lib/index.js

@@ -3767,11 +3767,16 @@ class TonConnect {
 TonConnect.walletsList = new WalletsListManager();
 TonConnect.isWalletInjected = (walletJSKey) => InjectedProvider.isWalletInjected(walletJSKey);
 TonConnect.isInsideWalletBrowser = (walletJSKey) => InjectedProvider.isInsideWalletBrowser(walletJSKey);
-function toUserFriendlyAddress(hexAddress) {
+const bounceableTag = 17;
+const testOnlyTag = 128;
+function toUserFriendlyAddress(hexAddress, testOnly = false) {
   const { wc, hex } = parseHexAddress(hexAddress);
-  const bounceableTag = 17;
+  let tag = bounceableTag;
+  if (testOnly) {
+    tag |= testOnlyTag;
+  }
   const addr = new Int8Array(34);
-  addr[0] = bounceableTag;
+  addr[0] = tag;
   addr[1] = wc;
   addr.set(hex, 2);
   const addressWithChecksum = new Uint8Array(36);
@@ -7085,7 +7090,7 @@ const AccountButtonDropdown = (props) => {
   const connector = useContext(ConnectorContext);
   const [isCopiedShown, setIsCopiedShown] = createSignal(false);
   const onCopy = () => __async(void 0, null, function* () {
-    const userFriendlyAddress = toUserFriendlyAddress(tonConnectUi.account.address);
+    const userFriendlyAddress = toUserFriendlyAddress(tonConnectUi.account.address, tonConnectUi.account.chain === CHAIN.TESTNET);
     yield copyToClipboard(userFriendlyAddress);
     setIsCopiedShown(true);
     setTimeout(() => setIsCopiedShown(false), 1e3);
@@ -8160,7 +8165,7 @@ const AccountButton = () => {
   const connector = useContext(ConnectorContext);
   const tonConnectUI = useContext(TonConnectUiContext);
   const [isOpened, setIsOpened] = createSignal(false);
-  const [address, setAddress] = createSignal("");
+  const [account, setAccount] = createSignal(null);
   let dropDownRef;
   const [floating, setFloating] = createSignal();
   const [anchor, setAnchor] = createSignal();
@@ -8169,8 +8174,9 @@ const AccountButton = () => {
     placement: "bottom-end"
   });
   const normalizedAddress = () => {
-    if (address()) {
-      const userFriendlyAddress = toUserFriendlyAddress(address());
+    const acc = account();
+    if (acc) {
+      const userFriendlyAddress = toUserFriendlyAddress(acc.address, acc.chain === CHAIN.TESTNET);
       return userFriendlyAddress.slice(0, 4) + "..." + userFriendlyAddress.slice(-4);
     }
     return "";
@@ -8178,13 +8184,13 @@ const AccountButton = () => {
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (!wallet) {
       setIsOpened(false);
-      setAddress("");
+      setAccount(null);
       return;
     }
-    setAddress(wallet.account.address);
+    setAccount(wallet.account);
   });
   const onClick = (e2) => {
-    if (!address() || !isOpened()) {
+    if (!account() || !isOpened()) {
       return;
     }
     const clickToButton = anchor().contains(e2.target);
@@ -8202,7 +8208,7 @@ const AccountButton = () => {
   });
   return [createComponent(Show, {
     get when() {
-      return !address();
+      return !account();
     },
     get children() {
       return createComponent(AccountButtonStyled, {
@@ -8228,7 +8234,7 @@ const AccountButton = () => {
     }
   }), createComponent(Show, {
     get when() {
-      return address();
+      return account();
     },
     get children() {
       return createComponent(DropdownContainerStyled, {
@@ -8332,6 +8338,11 @@ const QrCodeStyled = styled.div`
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > svg {
+            height: 276px;
+            width: 276px;
+        }
     }
 
     rect {
@@ -10105,7 +10116,7 @@ const QrCodeModal = (props) => {
   const universalLink = connector.connect({
     universalLink: props.wallet.universalLink,
     bridgeUrl: props.wallet.bridgeUrl
-  });
+  }, props.additionalRequest);
   return createComponent(QrCodeModalStyled, {
     get id() {
       return props.id;
@@ -10168,7 +10179,7 @@ const QrCodeModal = (props) => {
               return createComponent(ActionButtonStyled, {
                 onClick: () => connector.connect({
                   jsBridgeKey: props.wallet.jsBridgeKey
-                }),
+                }, props.additionalRequest),
                 get children() {
                   return createComponent(Translation, {
                     translationKey: "walletModal.qrCodeModal.openExtension",
@@ -10438,6 +10449,22 @@ const WalletsModal = () => {
   const connector = useContext(ConnectorContext);
   const tonConnectUI = useContext(TonConnectUiContext);
   const [fetchedWalletsList] = createResource(() => tonConnectUI.getWallets());
+  const [fetchedAdditionalRequest, {
+    refetch
+  }] = createResource((_, {
+    refetching
+  }) => {
+    var _a;
+    if (refetching) {
+      return (_a = appState.getConnectParameters) == null ? void 0 : _a.call(appState);
+    }
+    return void 0;
+  });
+  createEffect(on(walletsModalOpen, () => {
+    if (walletsModalOpen() && fetchedAdditionalRequest.state !== "refreshing") {
+      refetch();
+    }
+  }));
   const [selectedWalletInfo, setSelectedWalletInfo] = createSignal(null);
   const walletsList = createMemo(() => {
     if (fetchedWalletsList.state !== "ready") {
@@ -10445,6 +10472,13 @@ const WalletsModal = () => {
     }
     return applyWalletsListConfiguration(fetchedWalletsList(), appState.walletsList);
   });
+  const additionalRequestLoading = () => fetchedAdditionalRequest.state !== "ready" && fetchedAdditionalRequest.state !== "errored";
+  const additionalRequest = createMemo(() => {
+    if (fetchedAdditionalRequest.state !== "ready") {
+      return void 0;
+    }
+    return fetchedAdditionalRequest();
+  });
   const onClose = () => {
     setWalletsModalOpen(false);
     setSelectedWalletInfo(null);
@@ -10467,13 +10501,13 @@ const WalletsModal = () => {
     const universalLink = connector.connect({
       universalLink: walletInfo.universalLink,
       bridgeUrl: walletInfo.bridgeUrl
-    });
+    }, additionalRequest());
     openLink(universalLink);
   };
   const onSelectIfInjected = (walletInfo) => {
     connector.connect({
       jsBridgeKey: walletInfo.jsBridgeKey
-    });
+    }, additionalRequest());
   };
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (wallet) {
@@ -10490,7 +10524,7 @@ const WalletsModal = () => {
     get children() {
       return [createComponent(Show, {
         get when() {
-          return !walletsList();
+          return !walletsList() || additionalRequestLoading();
         },
         get children() {
           return [createComponent(H1Styled$1, {
@@ -10504,7 +10538,7 @@ const WalletsModal = () => {
         }
       }), createComponent(Show, {
         get when() {
-          return walletsList();
+          return createMemo(() => !!walletsList())() && !additionalRequestLoading();
         },
         get children() {
           return [createComponent(Show, {
@@ -10528,6 +10562,9 @@ const WalletsModal = () => {
             keyed: false,
             get children() {
               return createComponent(QrCodeModal, {
+                get additionalRequest() {
+                  return additionalRequest();
+                },
                 get wallet() {
                   return selectedWalletInfo();
                 },
@@ -10808,7 +10845,10 @@ class TonConnectUI {
       });
     }
     this.uiOptions = mergeOptions(options, { uiPreferences: { theme: "SYSTEM" } });
-    setAppState({ connector: this.connector });
+    setAppState({
+      connector: this.connector,
+      getConnectParameters: options == null ? void 0 : options.getConnectParameters
+    });
     widgetController.renderApp(rootId, this);
   }
   static getWallets() {