@tonconnect/ui-react 0.0.6 → 0.0.8

package/README.md

@@ -144,3 +144,50 @@ export const Settings = () => {
     );
 };
 ```
+
+
+## Add connect request parameters (ton_proof)
+Pass `getConnectParameters` async function to the `TonConnectUIProvider`. This callback will be called after `connectWallet` method call or `Connect Button` click before wallets list render.
+
+In other words, if `getConnectParameters` is passed, there will be a following steps:
+1. User clicks to the 'Connect Wallet' button, or `connectWallet` method is called
+2. Wallets modal opens
+3. Loader renders in the center of the modal
+4. TonConnectUI calls `getConnectParameters` and waits while it resolves
+5. Wallets list renders in the center of the modal
+
+Note that there is no any caching for `getConnectParameters` -- every time wallets modal opens there will be the 5 steps above.
+
+If you have to make a http-request to your backend it this case, it is better to do it after app initialization (if possible) and return (probably completed) promise from the `getConnectParameters` to reduce loading time for the user.
+
+```tsx
+const tonProofPayloadPromise = getTonProofFromYourBackend(); // will be executed during app initialization
+                                                             // don't forget to manage to refetch payload from your backend if needed
+<TonConnectUIProvider
+    manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json"
+    getConnectParameters={async () => {
+        const tonProof = await tonProofPayloadPromise; // will be executed every time when wallets modal is opened. It is recommended to make an http-request in advance
+        return {
+            tonProof
+        };
+    }}
+>
+    { /* Your app */ }
+</TonConnectUIProvider>
+```
+
+You can find `ton_proof` result in the `wallet` object when wallet will be connected:
+
+```ts
+import {useTonConnectUI} from "@tonconnect/ui-react";
+
+const [tonConnectUI] = useTonConnectUI();
+
+useEffect(() =>
+    tonConnectUI.onStatusChange(wallet => {
+        if (wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {
+            checkProofInYourBackend(wallet.connectItems.tonProof.proof, wallet.account);
+        }
+    }), []);
+```
+

package/lib/components/TonConnectUIProvider.d.ts

@@ -1,5 +1,5 @@
 import { ActionConfiguration, Locales, Theme, TonConnectUI, UIPreferences, WalletsListConfiguration } from '@tonconnect/ui';
-import { ITonConnect } from '@tonconnect/sdk';
+import type { ConnectAdditionalRequest, ITonConnect } from '@tonconnect/sdk';
 export declare const TonConnectUIContext: import("react").Context<TonConnectUI | null>;
 export declare type TonConnectUIProviderProps = {
     children: JSX.Element;
@@ -51,9 +51,17 @@ export interface TonConnectUIProviderPropsBase {
      */
     actionsConfiguration?: ActionConfiguration;
     /**
-     * @deprecated Don't use it
+     * 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;
+    /**
+     * 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>;
 }
 declare const _default: import("react").NamedExoticComponent<TonConnectUIProviderProps>;
 export default _default;

package/lib/components/index.d.ts

@@ -1,2 +1,2 @@
-export { default as TonConnectButton } from './TonConnectButton';
-export { default as TonConnectUIProvider } from './TonConnectUIProvider';
+export { default as TonConnectButton, type TonConnectButtonProps } from './TonConnectButton';
+export { default as TonConnectUIProvider, type TonConnectUIProviderProps, type TonConnectUIProviderPropsBase, type TonConnectUIProviderPropsWithConnector, type TonConnectUIProviderPropsWithManifest, TonConnectUIContext } from './TonConnectUIProvider';

package/lib/index.d.ts

@@ -1,4 +1,2 @@
-export * from './components';
-export * from './errors';
-export * from './hooks';
+export * from './library';
 export * from '@tonconnect/ui';

package/lib/index.js

@@ -4744,11 +4744,16 @@ class TonConnect {
 TonConnect.walletsList = new WalletsListManager();
 TonConnect.isWalletInjected = (walletJSKey) => InjectedProvider.isWalletInjected(walletJSKey);
 TonConnect.isInsideWalletBrowser = (walletJSKey) => InjectedProvider.isInsideWalletBrowser(walletJSKey);
-function toUserFriendlyAddress$1(hexAddress) {
+const bounceableTag$1 = 17;
+const testOnlyTag$1 = 128;
+function toUserFriendlyAddress$1(hexAddress, testOnly = false) {
   const { wc, hex } = parseHexAddress$1(hexAddress);
-  const bounceableTag = 17;
+  let tag = bounceableTag$1;
+  if (testOnly) {
+    tag |= testOnlyTag$1;
+  }
   const addr = new Int8Array(34);
-  addr[0] = bounceableTag;
+  addr[0] = tag;
   addr[1] = wc;
   addr.set(hex, 2);
   const addressWithChecksum = new Uint8Array(36);
@@ -8062,7 +8067,7 @@ const AccountButtonDropdown = (props) => {
   const connector = useContext(ConnectorContext);
   const [isCopiedShown, setIsCopiedShown] = createSignal(false);
   const onCopy = () => __async(void 0, null, function* () {
-    const userFriendlyAddress = toUserFriendlyAddress$1(tonConnectUi.account.address);
+    const userFriendlyAddress = toUserFriendlyAddress$1(tonConnectUi.account.address, tonConnectUi.account.chain === CHAIN$1.TESTNET);
     yield copyToClipboard(userFriendlyAddress);
     setIsCopiedShown(true);
     setTimeout(() => setIsCopiedShown(false), 1e3);
@@ -9137,7 +9142,7 @@ const AccountButton = () => {
   const connector = useContext(ConnectorContext);
   const tonConnectUI2 = 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();
@@ -9146,8 +9151,9 @@ const AccountButton = () => {
     placement: "bottom-end"
   });
   const normalizedAddress = () => {
-    if (address()) {
-      const userFriendlyAddress = toUserFriendlyAddress$1(address());
+    const acc = account();
+    if (acc) {
+      const userFriendlyAddress = toUserFriendlyAddress$1(acc.address, acc.chain === CHAIN$1.TESTNET);
       return userFriendlyAddress.slice(0, 4) + "..." + userFriendlyAddress.slice(-4);
     }
     return "";
@@ -9155,13 +9161,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);
@@ -9179,7 +9185,7 @@ const AccountButton = () => {
   });
   return [createComponent(Show, {
     get when() {
-      return !address();
+      return !account();
     },
     get children() {
       return createComponent(AccountButtonStyled, {
@@ -9205,7 +9211,7 @@ const AccountButton = () => {
     }
   }), createComponent(Show, {
     get when() {
-      return address();
+      return account();
     },
     get children() {
       return createComponent(DropdownContainerStyled, {
@@ -9309,6 +9315,11 @@ const QrCodeStyled = styled.div`
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > svg {
+            height: 276px;
+            width: 276px;
+        }
     }
 
     rect {
@@ -11082,7 +11093,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;
@@ -11145,7 +11156,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",
@@ -11415,6 +11426,22 @@ const WalletsModal = () => {
   const connector = useContext(ConnectorContext);
   const tonConnectUI2 = useContext(TonConnectUiContext);
   const [fetchedWalletsList] = createResource(() => tonConnectUI2.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") {
@@ -11422,6 +11449,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);
@@ -11444,13 +11478,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) {
@@ -11467,7 +11501,7 @@ const WalletsModal = () => {
     get children() {
       return [createComponent(Show, {
         get when() {
-          return !walletsList();
+          return !walletsList() || additionalRequestLoading();
         },
         get children() {
           return [createComponent(H1Styled$1, {
@@ -11481,7 +11515,7 @@ const WalletsModal = () => {
         }
       }), createComponent(Show, {
         get when() {
-          return walletsList();
+          return createMemo(() => !!walletsList())() && !additionalRequestLoading();
         },
         get children() {
           return [createComponent(Show, {
@@ -11505,6 +11539,9 @@ const WalletsModal = () => {
             keyed: false,
             get children() {
               return createComponent(QrCodeModal, {
+                get additionalRequest() {
+                  return additionalRequest();
+                },
                 get wallet() {
                   return selectedWalletInfo();
                 },
@@ -11785,7 +11822,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() {
@@ -14822,11 +14862,16 @@ globalThis && globalThis.__rest || function(s2, e2) {
     }
   return t2;
 };
-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);
@@ -14906,7 +14951,7 @@ function hexToBytes(hex) {
 function useTonAddress(userFriendly = true) {
   const wallet = useTonWallet();
   if (wallet) {
-    return userFriendly ? toUserFriendlyAddress(wallet.account.address) : wallet.account.address;
+    return userFriendly ? toUserFriendlyAddress(wallet.account.address, wallet.account.chain === CHAIN.TESTNET) : wallet.account.address;
   } else {
     return "";
   }
@@ -14916,6 +14961,7 @@ export {
   TonConnectButton$1 as TonConnectButton,
   TonConnectProviderNotSetError,
   TonConnectUI,
+  TonConnectUIContext,
   TonConnectUIError,
   TonConnectUIProvider$1 as TonConnectUIProvider,
   TonConnectUIReactError,