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

package/dist/components/index.d.mts

@@ -1,4 +1,4 @@
-export { f as BTCModal, B as Button, E as EmailModal, F as Field, I as Input, L as LoginBox, b as LoginButton, d as LoginModal, c as LoginPanel, M as Modal, a as ModalWithHeader, e as PasswordModal, P as Popover, S as SOLModal, T as TRONModal, U as UsernameModal } from '../index-ClQl2MMF.mjs';
+export { g as BTCModal, B as Button, E as EmailModal, F as Field, I as Input, L as LoginBox, b as LoginButton, d as LoginModal, c as LoginPanel, M as Modal, a as ModalWithHeader, e as PasswordModal, P as Popover, S as SOLModal, f as TONModal, T as TRONModal, U as UsernameModal } from '../index-COlsBC-b.mjs';
 import 'react/jsx-runtime';
-import '../types.d-IS3DBl3p.mjs';
+import '../types.d-CLO_WLka.mjs';
 import 'react';

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { f as BTCModal, B as Button, E as EmailModal, F as Field, I as Input, L as LoginBox, b as LoginButton, d as LoginModal, c as LoginPanel, M as Modal, a as ModalWithHeader, e as PasswordModal, P as Popover, S as SOLModal, T as TRONModal, U as UsernameModal } from '../index-CvCSpU8m.js';
+export { g as BTCModal, B as Button, E as EmailModal, F as Field, I as Input, L as LoginBox, b as LoginButton, d as LoginModal, c as LoginPanel, M as Modal, a as ModalWithHeader, e as PasswordModal, P as Popover, S as SOLModal, f as TONModal, T as TRONModal, U as UsernameModal } from '../index-fS75Swm8.js';
 import 'react/jsx-runtime';
-import '../types.d-IS3DBl3p.js';
+import '../types.d-CLO_WLka.js';
 import 'react';

package/dist/components/index.js

@@ -44,6 +44,7 @@ __export(components_exports, {
   PasswordModal: () => PasswordModal,
   Popover: () => Popover,
   SOLModal: () => SOLModal,
+  TONModal: () => TONModal,
   TRONModal: () => TRONModal,
   UsernameModal: () => UsernameModal
 });
@@ -1479,28 +1480,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",
@@ -1841,6 +1856,12 @@ var useTRONModalStore = (0, import_zustand3.create)((set) => ({
   open: (type) => set({ isOpen: true, type }),
   close: () => set({ isOpen: false })
 }));
+var useTONModalStore = (0, import_zustand3.create)((set) => ({
+  isOpen: false,
+  type: "",
+  open: (type) => set({ isOpen: true, type }),
+  close: () => set({ isOpen: false })
+}));
 var useBTCModalStore = (0, import_zustand3.create)((set) => ({
   isOpen: false,
   type: "",
@@ -1905,6 +1926,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_react12.useMemo)(() => !!token, [token]);
@@ -1953,6 +1975,8 @@ function useUserInfo() {
         return SOLOpen("login");
       case "tron":
         return TRONOpen("login");
+      case "ton":
+        return TONOpen("login");
       case "btc":
         return BTCOpen("login");
       case "telegram":
@@ -2044,6 +2068,8 @@ function useUserInfo() {
         return SOLOpen("bind");
       case "tron":
         return TRONOpen("bind");
+      case "ton":
+        return TONOpen("bind");
       case "btc":
         return BTCOpen("bind");
       case "telegram":
@@ -2435,6 +2461,12 @@ function LoginBox({
       activeIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TRXLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "TRON",
       onClick: () => login("tron")
+    },
+    ton: {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TRXDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TRXLightIcon, { size: isDownMd ? 36 : 40 }),
+      name: "TON",
+      onClick: () => login("ton")
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
@@ -2881,8 +2913,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,
@@ -2969,7 +3006,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);
       }
@@ -3236,7 +3273,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);
       }
@@ -3351,9 +3388,184 @@ function TRONModal({
   ] }) }) });
 }
 
-// src/components/BTCModal/index.tsx
-var import_react25 = __toESM(require("react"));
+// src/components/TONModal/index.tsx
+var import_react24 = __toESM(require("react"));
 var import_react_intl15 = require("react-intl");
+var import_ui_react = require("@tonconnect/ui-react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+function WalletContent2({
+  onSuccess,
+  type
+}) {
+  const { events, login } = useMatch();
+  const [connected, setConnected] = (0, import_react24.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_react24.useState)("");
+  const statusRef = import_react24.default.useRef(status);
+  const [error, setError] = (0, import_react24.useState)("");
+  (0, import_react24.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_react24.useEffect)(() => {
+    if (wallet) {
+      setConnected(true);
+      console.log("Wallet connected:", wallet);
+    } else {
+      setConnected(false);
+      open();
+      statusRef.current = "";
+      setStatus("");
+    }
+  }, [wallet]);
+  (0, import_react24.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_runtime67.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_intl15.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_runtime67.jsx)(ModalWithHeader, { ...props, title: props.title || intl.formatMessage({
+    id: type == "bind" ? "bindWith" : "loginWith"
+  }, {
+    name: "TON"
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    import_ui_react.TonConnectUIProvider,
+    {
+      manifestUrl,
+      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(WalletContent2, { onSuccess, type })
+    }
+  ) });
+}
+
+// src/components/BTCModal/index.tsx
+var import_react26 = __toESM(require("react"));
+var import_react_intl16 = require("react-intl");
 
 // src/lib/btc/UnisatAdapter.ts
 var UnisatAdapter = class {
@@ -3501,12 +3713,12 @@ var LeatherAdapter = class {
 };
 
 // src/hooks/useBTCWallet.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 var useBTCWallet = () => {
   const wallets2 = [new UnisatAdapter(), new XverseAdapter(), new LeatherAdapter()];
-  const [installedWallets, setInstalledWallets] = (0, import_react24.useState)([]);
-  const [address, setAddress] = (0, import_react24.useState)(null);
-  (0, import_react24.useEffect)(() => {
+  const [installedWallets, setInstalledWallets] = (0, import_react25.useState)([]);
+  const [address, setAddress] = (0, import_react25.useState)(null);
+  (0, import_react25.useEffect)(() => {
     const getInstalled = async () => {
       const installed = await Promise.all(wallets2.map((wallet2) => wallet2.isInstalled().then((isInstalled) => ({
         wallet: wallet2,
@@ -3516,11 +3728,11 @@ var useBTCWallet = () => {
     };
     getInstalled();
   }, []);
-  const [wallet, chooseWallet] = (0, import_react24.useState)(null);
+  const [wallet, chooseWallet] = (0, import_react25.useState)(null);
   const onConnect = async () => {
     setAddress(await wallet.connect());
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!wallet) {
       setAddress(null);
     }
@@ -3536,25 +3748,25 @@ var useBTCWallet = () => {
 };
 
 // src/components/BTCModal/index.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function BTCModal({
   type = "login",
   onSuccess,
   ...props
 }) {
   const isDownMd = useDownMd();
-  const intl = (0, import_react_intl15.useIntl)();
+  const intl = (0, import_react_intl16.useIntl)();
   const { wallets: wallets2, installedWallets, chooseWallet, wallet, address, onConnect } = useBTCWallet();
   const iconMaps = {
-    leather: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(LeatherIcon, { size: isDownMd ? 36 : 40 }),
-    unisat: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(UnisatIcon, { size: isDownMd ? 36 : 40 }),
-    xverse: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(XverseIcon, { size: isDownMd ? 36 : 40 })
+    leather: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(LeatherIcon, { size: isDownMd ? 36 : 40 }),
+    unisat: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(UnisatIcon, { size: isDownMd ? 36 : 40 }),
+    xverse: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(XverseIcon, { size: isDownMd ? 36 : 40 })
   };
   const { events, login } = useMatch();
-  const [status, setStatus] = (0, import_react25.useState)("");
-  const statusRef = import_react25.default.useRef(status);
-  const [error, setError] = (0, import_react25.useState)("");
-  const connected = (0, import_react25.useMemo)(() => {
+  const [status, setStatus] = (0, import_react26.useState)("");
+  const statusRef = import_react26.default.useRef(status);
+  const [error, setError] = (0, import_react26.useState)("");
+  const connected = (0, import_react26.useMemo)(() => {
     return !!address;
   }, [address]);
   const disconnect = async () => {
@@ -3569,7 +3781,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);
       }
@@ -3618,7 +3830,7 @@ function BTCModal({
       statusRef.current = "";
     }
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (wallet) {
       console.log("onConnect");
       try {
@@ -3631,12 +3843,12 @@ function BTCModal({
       setStatus("");
     }
   }, [wallet]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (address) {
       toLoginInWallet();
     }
   }, [address]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!props.isOpen) {
       disconnect();
     }
@@ -3648,11 +3860,11 @@ function BTCModal({
     statusRef.current = "";
     setError("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ModalWithHeader, { ...props, title: props.title || intl.formatMessage({
+  return /* @__PURE__ */ (0, import_jsx_runtime68.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_runtime67.jsx)(
+  }), onBack: wallet ? onBack : void 0, children: wallet ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     WalletModalContent,
     {
       error,
@@ -3665,9 +3877,9 @@ function BTCModal({
       setVisible: () => {
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-box", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-recommend-list", children: [
+  ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "matchid-login-box", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "matchid-login-recommend-list", children: [
     installedWallets.map((wallet2) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         RecommendItem,
         {
           icon: iconMaps[wallet2.walletKey],
@@ -3680,14 +3892,14 @@ function BTCModal({
       );
     }),
     wallets2.filter((wallet2) => !installedWallets.find((installedWallet) => installedWallet.walletKey == wallet2.walletKey)).map((wallet2) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         RecommendItem,
         {
           icon: iconMaps[wallet2.walletKey],
           name: wallet2.name,
           onClick: () => {
           },
-          footer: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { size: "sm", onClick: () => {
+          footer: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { size: "sm", onClick: () => {
             window.open(wallet2.website);
           }, children: "Install" })
         },
@@ -3712,6 +3924,7 @@ function BTCModal({
   PasswordModal,
   Popover,
   SOLModal,
+  TONModal,
   TRONModal,
   UsernameModal
 });