@matchain/matchid-sdk-react 0.1.40-alpha.4 → 0.1.40-alpha.6

package/dist/index.js

@@ -40,7 +40,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/MatchContext.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/assets/icon/ArrowLeftIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1501,28 +1501,42 @@ var getAuthInfoApi = () => {
     method: "GET"
   });
 };
-var getWalletNonceApi = ({ address }) => {
+var getWalletNonceApi = (data) => {
   return request_default({
     url: `/api/v1/login/wallet/init`,
     method: "POST",
-    data: { address }
+    data
   });
 };
-var loginByWalletApi = ({ type, address, signature, message, connector_type, wallet_client_type }) => {
+var loginByWalletApi = ({
+  type,
+  address,
+  signature,
+  message,
+  connector_type,
+  wallet_client_type
+}) => {
   return request_default({
     url: `/api/v1/login/wallet`,
     method: "POST",
     data: { type, address, signature, message, connector_type, wallet_client_type }
   });
 };
-var getWalletInitApi = ({ address }) => {
+var getWalletInitApi = (data) => {
   return request_default({
     url: `/api/v1/wallet/init`,
     method: "POST",
-    data: { address }
+    data
   });
 };
-var toBindWalletApi = ({ type, address, signature, message, connector_type, wallet_client_type }) => {
+var toBindWalletApi = ({
+  type,
+  address,
+  signature,
+  message,
+  connector_type,
+  wallet_client_type
+}) => {
   return request_default({
     url: `/api/v1/wallet/bind`,
     method: "POST",
@@ -1597,6 +1611,12 @@ var useTRONModalStore = (0, import_zustand2.create)((set) => ({
   open: (type) => set({ isOpen: true, type }),
   close: () => set({ isOpen: false })
 }));
+var useTONModalStore = (0, import_zustand2.create)((set) => ({
+  isOpen: false,
+  type: "",
+  open: (type) => set({ isOpen: true, type }),
+  close: () => set({ isOpen: false })
+}));
 var useBTCModalStore = (0, import_zustand2.create)((set) => ({
   isOpen: false,
   type: "",
@@ -1626,6 +1646,7 @@ function useUserInfo() {
   const { events, login } = useMatch();
   const { open: SOLOpen } = useSOLModalStore();
   const { open: TRONOpen } = useTRONModalStore();
+  const { open: TONOpen } = useTONModalStore();
   const { open: BTCOpen } = useBTCModalStore();
   const { open: CEXBindOpen } = useCEXBindModalStore();
   const isLogin = (0, import_react3.useMemo)(() => !!token, [token]);
@@ -1674,6 +1695,8 @@ function useUserInfo() {
         return SOLOpen("login");
       case "tron":
         return TRONOpen("login");
+      case "ton":
+        return TONOpen("login");
       case "btc":
         return BTCOpen("login");
       case "telegram":
@@ -1765,6 +1788,8 @@ function useUserInfo() {
         return SOLOpen("bind");
       case "tron":
         return TRONOpen("bind");
+      case "ton":
+        return TONOpen("bind");
       case "btc":
         return BTCOpen("bind");
       case "telegram":
@@ -2210,6 +2235,7 @@ __export(components_exports, {
   PasswordModal: () => PasswordModal,
   Popover: () => Popover,
   SOLModal: () => SOLModal,
+  TONModal: () => TONModal,
   TRONModal: () => TRONModal,
   UsernameModal: () => UsernameModal
 });
@@ -2594,6 +2620,12 @@ function LoginBox({
       activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TRXLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "TRON",
       onClick: () => login("tron")
+    },
+    ton: {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TRXDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TRXLightIcon, { size: isDownMd ? 36 : 40 }),
+      name: "TON",
+      onClick: () => login("ton")
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
@@ -3040,8 +3072,13 @@ function WalletModalContent({
         text: error,
         btnText: "Reconnect Wallet",
         btnClick: async () => {
+          console.log("click error");
           setError("");
-          await disconnect();
+          try {
+            await disconnect();
+          } catch (error2) {
+            console.error(error2);
+          }
           setVisible(true);
         },
         statusImage: walletErrorImage,
@@ -3128,7 +3165,7 @@ function WalletContent({
     try {
       setStatus("nonce");
       statusRef.current = "nonce";
-      const res = type == "bind" ? await getWalletInitApi({ address }) : await getWalletNonceApi({ address });
+      const res = type == "bind" ? await getWalletInitApi({ address, type: "SOL" }) : await getWalletNonceApi({ address, type: "SOL" });
       if (!isSuccess(res)) {
         throw new Error(res.message);
       }
@@ -3395,7 +3432,7 @@ function TRONModal({
     try {
       setStatus("nonce");
       statusRef.current = "nonce";
-      const res = type == "bind" ? await getWalletInitApi({ address }) : await getWalletNonceApi({ address });
+      const res = type == "bind" ? await getWalletInitApi({ address, type: "TRON" }) : await getWalletNonceApi({ address, type: "TRON" });
       if (!isSuccess(res)) {
         throw new Error(res.message);
       }
@@ -3510,9 +3547,184 @@ function TRONModal({
   ] }) }) });
 }
 
-// src/components/BTCModal/index.tsx
-var import_react21 = __toESM(require("react"));
+// src/components/TONModal/index.tsx
+var import_react20 = __toESM(require("react"));
 var import_react_intl13 = require("react-intl");
+var import_ui_react = require("@tonconnect/ui-react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function WalletContent2({
+  onSuccess,
+  type
+}) {
+  const { events, login } = useMatch();
+  const [connected, setConnected] = (0, import_react20.useState)(false);
+  const wallet = (0, import_ui_react.useTonWallet)();
+  const userFriendlyAddress = (0, import_ui_react.useTonAddress)();
+  const [tonConnectUI] = (0, import_ui_react.useTonConnectUI)();
+  const { state, open, close } = (0, import_ui_react.useTonConnectModal)();
+  const [status, setStatus] = (0, import_react20.useState)("");
+  const statusRef = import_react20.default.useRef(status);
+  const [error, setError] = (0, import_react20.useState)("");
+  (0, import_react20.useEffect)(() => {
+    const init = async () => {
+      if (wallet) {
+        await tonConnectUI.disconnect();
+      }
+      open();
+    };
+    init();
+    tonConnectUI.onStatusChange((wallet2) => {
+      matchlog_default.log("onStatusChange:", wallet2, wallet2?.connectItems?.tonProof, JSON.stringify(wallet2?.connectItems?.tonProof));
+      if (wallet2?.connectItems?.tonProof && "proof" in wallet2.connectItems.tonProof) {
+        matchlog_default.log(wallet2?.connectItems.tonProof.proof, wallet2?.account);
+        const toLoginInWallet = async () => {
+          if (statusRef.current || !wallet2) return;
+          setStatus("signer");
+          statusRef.current = "signer";
+          try {
+            const signature = {
+              "address": wallet2?.account?.address,
+              "network": wallet2?.account?.chain,
+              "public_key": wallet2?.account?.publicKey,
+              "proof": {
+                //@ts-ignore
+                ...wallet2?.connectItems?.tonProof?.proof,
+                "state_init": wallet2?.account?.walletStateInit
+              }
+            };
+            let obj = {
+              type: "TON",
+              address: wallet2?.account?.publicKey,
+              signature: JSON.stringify(signature),
+              //@ts-ignore
+              message: wallet2?.connectItems?.tonProof?.proof.payload,
+              connector_type: "TON",
+              wallet_client_type: wallet2?.name
+            };
+            console.log("signature", {
+              signature,
+              obj
+            });
+            const res1 = type == "bind" ? await toBindWalletApi(obj) : await loginByWalletApi(obj);
+            if (res1) {
+              if (!isSuccess(res1)) {
+                throw new Error(res1.message);
+              }
+              matchlog_default.log(res1);
+              setStatus("success");
+              statusRef.current = "success";
+              if (type == "bind") {
+                events.onBind && events.onBind({
+                  type: "ton"
+                });
+                eventManager_default.emit("onBind", {
+                  type: "ton"
+                });
+              } else {
+                await login({
+                  mid: res1.data.mid,
+                  token: `${res1.data.token_type} ${res1.data.access_token}`
+                });
+              }
+              onSuccess && onSuccess();
+            }
+          } catch (error2) {
+            setStatus("error");
+            setError(error2.message);
+            statusRef.current = "";
+          }
+        };
+        toLoginInWallet();
+      }
+    });
+  }, []);
+  (0, import_react20.useEffect)(() => {
+    if (wallet) {
+      setConnected(true);
+      console.log("Wallet connected:", wallet);
+    } else {
+      setConnected(false);
+      open();
+      statusRef.current = "";
+      setStatus("");
+    }
+  }, [wallet]);
+  (0, import_react20.useEffect)(() => {
+    console.log({
+      state,
+      wallet
+    });
+    if (state.status == "opened") {
+      const init = async () => {
+        tonConnectUI.setConnectRequestParameters({ state: "loading" });
+        const res = type == "bind" ? await getWalletInitApi({
+          address: "tonconnect",
+          type: "TON"
+        }) : await getWalletNonceApi({ address: "tonconnect", type: "TON" });
+        if (!isSuccess(res)) {
+          tonConnectUI.setConnectRequestParameters(null);
+          throw new Error(res.message);
+        }
+        tonConnectUI.setConnectRequestParameters({
+          state: "ready",
+          value: { tonProof: res.data.nonce }
+        });
+      };
+      init();
+    } else {
+      if (!wallet) {
+        setStatus("");
+        statusRef.current = "";
+      }
+    }
+  }, [state]);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    WalletModalContent,
+    {
+      connected,
+      disconnect: tonConnectUI.disconnect,
+      address: userFriendlyAddress,
+      visible: state.status == "opened",
+      setVisible: (v) => {
+        console.log("setVisible", v);
+        if (v) {
+          setStatus("");
+          statusRef.current = "";
+          open();
+        } else {
+          close();
+        }
+      },
+      error,
+      setError,
+      status
+    }
+  );
+}
+function TONModal({
+  type = "login",
+  onSuccess,
+  ...props
+}) {
+  const intl = (0, import_react_intl13.useIntl)();
+  const { endpoints, appid } = useLocalStore_default();
+  const manifestUrl = `${endpoints.back}api/v1/wallet/ton?appid=${appid}&url=` + encodeURIComponent(window.location.origin);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ModalWithHeader, { ...props, title: props.title || intl.formatMessage({
+    id: type == "bind" ? "bindWith" : "loginWith"
+  }, {
+    name: "TON"
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    import_ui_react.TonConnectUIProvider,
+    {
+      manifestUrl,
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(WalletContent2, { onSuccess, type })
+    }
+  ) });
+}
+
+// src/components/BTCModal/index.tsx
+var import_react22 = __toESM(require("react"));
+var import_react_intl14 = require("react-intl");
 
 // src/lib/btc/UnisatAdapter.ts
 var UnisatAdapter = class {
@@ -3660,12 +3872,12 @@ var LeatherAdapter = class {
 };
 
 // src/hooks/useBTCWallet.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useBTCWallet = () => {
   const wallets2 = [new UnisatAdapter(), new XverseAdapter(), new LeatherAdapter()];
-  const [installedWallets, setInstalledWallets] = (0, import_react20.useState)([]);
-  const [address, setAddress] = (0, import_react20.useState)(null);
-  (0, import_react20.useEffect)(() => {
+  const [installedWallets, setInstalledWallets] = (0, import_react21.useState)([]);
+  const [address, setAddress] = (0, import_react21.useState)(null);
+  (0, import_react21.useEffect)(() => {
     const getInstalled = async () => {
       const installed = await Promise.all(wallets2.map((wallet2) => wallet2.isInstalled().then((isInstalled) => ({
         wallet: wallet2,
@@ -3675,11 +3887,11 @@ var useBTCWallet = () => {
     };
     getInstalled();
   }, []);
-  const [wallet, chooseWallet] = (0, import_react20.useState)(null);
+  const [wallet, chooseWallet] = (0, import_react21.useState)(null);
   const onConnect = async () => {
     setAddress(await wallet.connect());
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!wallet) {
       setAddress(null);
     }
@@ -3695,25 +3907,25 @@ var useBTCWallet = () => {
 };
 
 // src/components/BTCModal/index.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function BTCModal({
   type = "login",
   onSuccess,
   ...props
 }) {
   const isDownMd = useDownMd();
-  const intl = (0, import_react_intl13.useIntl)();
+  const intl = (0, import_react_intl14.useIntl)();
   const { wallets: wallets2, installedWallets, chooseWallet, wallet, address, onConnect } = useBTCWallet();
   const iconMaps = {
-    leather: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LeatherIcon, { size: isDownMd ? 36 : 40 }),
-    unisat: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(UnisatIcon, { size: isDownMd ? 36 : 40 }),
-    xverse: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(XverseIcon, { size: isDownMd ? 36 : 40 })
+    leather: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LeatherIcon, { size: isDownMd ? 36 : 40 }),
+    unisat: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(UnisatIcon, { size: isDownMd ? 36 : 40 }),
+    xverse: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(XverseIcon, { size: isDownMd ? 36 : 40 })
   };
   const { events, login } = useMatch();
-  const [status, setStatus] = (0, import_react21.useState)("");
-  const statusRef = import_react21.default.useRef(status);
-  const [error, setError] = (0, import_react21.useState)("");
-  const connected = (0, import_react21.useMemo)(() => {
+  const [status, setStatus] = (0, import_react22.useState)("");
+  const statusRef = import_react22.default.useRef(status);
+  const [error, setError] = (0, import_react22.useState)("");
+  const connected = (0, import_react22.useMemo)(() => {
     return !!address;
   }, [address]);
   const disconnect = async () => {
@@ -3728,7 +3940,7 @@ function BTCModal({
     try {
       setStatus("nonce");
       statusRef.current = "nonce";
-      const res = type == "bind" ? await getWalletInitApi({ address }) : await getWalletNonceApi({ address });
+      const res = type == "bind" ? await getWalletInitApi({ address, type: "BTC" }) : await getWalletNonceApi({ address, type: "BTC" });
       if (!isSuccess(res)) {
         throw new Error(res.message);
       }
@@ -3777,7 +3989,7 @@ function BTCModal({
       statusRef.current = "";
     }
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (wallet) {
       console.log("onConnect");
       try {
@@ -3790,12 +4002,12 @@ function BTCModal({
       setStatus("");
     }
   }, [wallet]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (address) {
       toLoginInWallet();
     }
   }, [address]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!props.isOpen) {
       disconnect();
     }
@@ -3807,11 +4019,11 @@ function BTCModal({
     statusRef.current = "";
     setError("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ModalWithHeader, { ...props, title: props.title || intl.formatMessage({
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ModalWithHeader, { ...props, title: props.title || intl.formatMessage({
     id: type == "bind" ? "bindWith" : "loginWith"
   }, {
     name: "BTC"
-  }), onBack: wallet ? onBack : void 0, children: wallet ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  }), onBack: wallet ? onBack : void 0, children: wallet ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     WalletModalContent,
     {
       error,
@@ -3824,9 +4036,9 @@ function BTCModal({
       setVisible: () => {
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "matchid-login-box", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "matchid-login-recommend-list", children: [
+  ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "matchid-login-box", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "matchid-login-recommend-list", children: [
     installedWallets.map((wallet2) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         RecommendItem,
         {
           icon: iconMaps[wallet2.walletKey],
@@ -3839,14 +4051,14 @@ function BTCModal({
       );
     }),
     wallets2.filter((wallet2) => !installedWallets.find((installedWallet) => installedWallet.walletKey == wallet2.walletKey)).map((wallet2) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         RecommendItem,
         {
           icon: iconMaps[wallet2.walletKey],
           name: wallet2.name,
           onClick: () => {
           },
-          footer: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { size: "sm", onClick: () => {
+          footer: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Button, { size: "sm", onClick: () => {
             window.open(wallet2.website);
           }, children: "Install" })
         },
@@ -3857,27 +4069,27 @@ function BTCModal({
 }
 
 // src/components/CEXBindModal/index.tsx
-var import_react22 = require("react");
-var import_react_intl14 = require("react-intl");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_react_intl15 = require("react-intl");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function CEXBindModal({
   onClose,
   type,
   isOpen = false,
   ...props
 }) {
-  const intl = (0, import_react_intl14.useIntl)();
+  const intl = (0, import_react_intl15.useIntl)();
   const { events } = useMatch();
-  const [APIPassphrase, setAPIPassphrase] = (0, import_react22.useState)("");
+  const [APIPassphrase, setAPIPassphrase] = (0, import_react23.useState)("");
   const { refreshOverview } = useUserInfo();
-  const [loading, setLoading] = (0, import_react22.useState)(false);
-  const [key, setKey] = (0, import_react22.useState)("");
-  const [secret, setSecret] = (0, import_react22.useState)("");
-  const [error, setError] = (0, import_react22.useState)("");
-  const needPassphrase = (0, import_react22.useMemo)(() => {
+  const [loading, setLoading] = (0, import_react23.useState)(false);
+  const [key, setKey] = (0, import_react23.useState)("");
+  const [secret, setSecret] = (0, import_react23.useState)("");
+  const [error, setError] = (0, import_react23.useState)("");
+  const needPassphrase = (0, import_react23.useMemo)(() => {
     return ["bitget", "okx"].includes(type.toLowerCase());
   }, [type]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (isOpen) {
       setSecret("");
       setKey("");
@@ -3914,20 +4126,20 @@ function CEXBindModal({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ModalWithHeader, { showClose: true, isOpen, onClose, title: intl.formatMessage({
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ModalWithHeader, { showClose: true, isOpen, onClose, title: intl.formatMessage({
     id: "CEXBindTitle"
   }, {
     type
-  }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "matchid-cex-modal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_intl14.FormattedMessage, { id: "CEXBindAttention" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_intl14.FormattedMessage, { id: "CEXBindTips1" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_intl14.FormattedMessage, { id: "CEXBindTips2" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_intl14.FormattedMessage, { id: "CEXBindTips3" }) })
+  }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "matchid-cex-modal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_intl15.FormattedMessage, { id: "CEXBindAttention" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_intl15.FormattedMessage, { id: "CEXBindTips1" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_intl15.FormattedMessage, { id: "CEXBindTips2" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_intl15.FormattedMessage, { id: "CEXBindTips3" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Field, { label: intl.formatMessage({
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Field, { label: intl.formatMessage({
       id: "CEXBindApiKey"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Input,
       {
         value: key,
@@ -3935,9 +4147,9 @@ function CEXBindModal({
         placeholder: "**** **** ****"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Field, { label: intl.formatMessage({
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Field, { label: intl.formatMessage({
       id: "CEXBindApiSecretKey"
-    }), error: !needPassphrase && error, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    }), error: !needPassphrase && error, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Input,
       {
         value: secret,
@@ -3945,9 +4157,9 @@ function CEXBindModal({
         placeholder: "**** **** ****"
       }
     ) }),
-    needPassphrase && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Field, { error, label: intl.formatMessage({
+    needPassphrase && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Field, { error, label: intl.formatMessage({
       id: "CEXBindApiPassphrase"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Input,
       {
         value: APIPassphrase,
@@ -3955,7 +4167,7 @@ function CEXBindModal({
         placeholder: "**** **** ****"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Button,
       {
         onClick: SubmitApi,
@@ -3963,24 +4175,25 @@ function CEXBindModal({
         block: true,
         loading,
         disabled: !key || !secret,
-        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_intl14.FormattedMessage, { id: "continue" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_intl15.FormattedMessage, { id: "continue" })
       }
     )
   ] }) });
 }
 
 // src/context/BusinessProvider.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function BusinessProvider({ children }) {
   const { overview, token } = useUserInfo();
   const { recoveryModal } = useStore_default();
   const { type: SOLType, isOpen: SOLIsOpen, close: SOLClose } = useSOLModalStore();
+  const { type: TONType, isOpen: TONIsOpen, close: TONClose } = useTONModalStore();
   const { type: TRONType, isOpen: TRONIsOpen, close: TRONClose } = useTRONModalStore();
   const { type: BTCType, isOpen: BTCIsOpen, close: BTCClose } = useBTCModalStore();
   const { type: CEXType, isOpen: CEXIsOpen, close: CEXClose } = useCEXBindModalStore();
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       RecoveryModal,
       {
         isOpen: !!token && !!overview && !!overview.address && recoveryModal.open,
@@ -3988,7 +4201,7 @@ function BusinessProvider({ children }) {
         onSuccess: recoveryModal.success
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       SOLModal,
       {
         isOpen: SOLIsOpen && (SOLType == "login" && !overview && !token || SOLType == "bind" && !!token && !!overview),
@@ -3998,7 +4211,7 @@ function BusinessProvider({ children }) {
         zIndex: 199
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       TRONModal,
       {
         isOpen: TRONIsOpen && (TRONType == "login" && !overview && !token || TRONType == "bind" && !!token && !!overview),
@@ -4008,7 +4221,17 @@ function BusinessProvider({ children }) {
         zIndex: 199
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      TONModal,
+      {
+        isOpen: TONIsOpen && (TONType == "login" && !overview && !token || TONType == "bind" && !!token && !!overview),
+        onClose: TONClose,
+        type: TONType,
+        onSuccess: TONClose,
+        zIndex: 199
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       BTCModal,
       {
         isOpen: BTCIsOpen && (BTCType == "login" && !overview && !token || BTCType == "bind" && !!token && !!overview),
@@ -4018,7 +4241,7 @@ function BusinessProvider({ children }) {
         zIndex: 199
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       CEXBindModal,
       {
         isOpen: CEXIsOpen && (!!token && !!overview),
@@ -4032,17 +4255,17 @@ function BusinessProvider({ children }) {
 }
 
 // src/context/index.tsx
-var import_jsx_runtime66 = (
+var import_jsx_runtime67 = (
   // <MpcWalletProvider>
   require("react/jsx-runtime")
 );
 var Providers = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BusinessProvider, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BusinessProvider, { children });
 };
 var context_default = Providers;
 
 // src/hooks/useWalletInit.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var AppClientId2 = getAppClientId();
 function useWalletInit({
   refreshOverview
@@ -4051,17 +4274,17 @@ function useWalletInit({
   const getWalletIframe = () => {
     return document.getElementById("match-wallet");
   };
-  const [walletInited, setWalletInited] = (0, import_react23.useState)(false);
+  const [walletInited, setWalletInited] = (0, import_react24.useState)(false);
   const { appid, token, overview } = useLocalStore_default();
   const { initWallet, generateWallet } = useWallet();
-  const [iframeLoaded, setIframeLoaded] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const [iframeLoaded, setIframeLoaded] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     console.log("wallet status", {
       iframeLoaded,
       walletInited
     });
   }, [iframeLoaded, walletInited]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (endpoints.auth) {
       if (!window.matchWalletMessageIdMap) {
         window.matchWalletMessageIdMap = {};
@@ -4135,7 +4358,7 @@ function useWalletInit({
       }
     }
   }, [endpoints.auth]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const messageHandle = async (e) => {
       if (e.origin !== endpoints.auth.substring(0, endpoints.auth.length - 1)) {
         return;
@@ -4168,7 +4391,7 @@ function useWalletInit({
       window.removeEventListener("message", messageHandle);
     };
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (token && overview && overview.did && walletInited) {
       const did = overview.did.split(":")[2];
       const newUserInit = async () => {
@@ -4199,7 +4422,7 @@ function useWalletInit({
 }
 
 // src/hooks/useInit.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useInit({
   theme,
   appid,
@@ -4218,23 +4441,23 @@ function useInit({
     setLocale,
     locale: realLocale
   } = useLocalStore_default();
-  const overviewLoadingRef = (0, import_react24.useRef)(false);
+  const overviewLoadingRef = (0, import_react25.useRef)(false);
   const searchParams = new URLSearchParams(window.location.search);
   const matchToken = searchParams.get("matchToken");
   const realEndpoints = endpoints || env_default.endpoints;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setTheme(theme);
   }, [theme]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setAppid(appid);
   }, [appid]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setEndpoints(realEndpoints);
   }, [realEndpoints]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setLocale(locale || "en");
   }, [locale]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (matchToken) {
       const tokenData = JSON.parse(atob(matchToken));
       if (tokenData && tokenData.mid && tokenData.token) {
@@ -4245,7 +4468,7 @@ function useInit({
       }
     }
   }, [matchToken]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const onLoginMessage = (event) => {
       const res = event.data;
       if (res.event === "login" && res.data && (res.data.token || res.data.token_type && res.data.access_token)) {
@@ -4281,7 +4504,7 @@ function useInit({
       overviewLoadingRef.current = false;
     }
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (token) {
       loadOverview();
     }
@@ -4313,7 +4536,7 @@ function useInit({
 
 // src/MatchContext.tsx
 var import_react_query = require("@tanstack/react-query");
-var import_react_intl15 = require("react-intl");
+var import_react_intl16 = require("react-intl");
 
 // src/i18n/en.json
 var en_default = {
@@ -4788,9 +5011,9 @@ var messages = {
 };
 
 // src/MatchContext.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
-var MatchContext = (0, import_react25.createContext)(void 0);
+var MatchContext = (0, import_react26.createContext)(void 0);
 var MatchProvider = ({ children, appid, events, theme = "light", endpoints, locale }) => {
   const { loadOverview, login, endpoints: realEndPoints, locale: realLocale } = useInit({
     theme,
@@ -4809,7 +5032,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints, loca
   useWalletInit({
     refreshOverview: loadOverview
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl15.IntlProvider, { locale: realLocale, messages: messages[realLocale], children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_intl16.IntlProvider, { locale: realLocale, messages: messages[realLocale], children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     MatchContext.Provider,
     {
       value: {
@@ -4820,12 +5043,12 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints, loca
         theme,
         locale: realLocale
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(context_default, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(context_default, { children })
     }
   ) }) });
 };
 var useMatch = () => {
-  const context = (0, import_react25.useContext)(MatchContext);
+  const context = (0, import_react26.useContext)(MatchContext);
   if (context === void 0) {
     throw new Error("useMatch must be used within a MatchProvider");
   }