@matchain/matchid-sdk-react 0.1.42-alpha.2 → 0.1.42-alpha.4

package/dist/hooks/index.js

@@ -82,7 +82,7 @@ var localStore = useLocalStore;
 var useLocalStore_default = useLocalStore;
 
 // src/hooks/useUserInfo.tsx
-var import_react25 = require("react");
+var import_react28 = require("react");
 
 // src/api/request.ts
 var import_axios = __toESM(require("axios"));
@@ -242,10 +242,10 @@ var getAuthInfoApi = () => {
 };
 
 // src/MatchContext.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 
 // src/context/BusinessProvider.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/assets/icon/ArrowLeftIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -396,36 +396,40 @@ function useDownMd() {
   return isBelowMd;
 }
 
-// src/components/Modal/index.tsx
+// src/components/Overlay/index.tsx
+var import_react2 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
+// src/components/Modal/index.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
 // src/components/PasswordModal/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/Input/index.tsx
-var import_react2 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 
 // src/components/Field/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 
 // src/components/Button/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/components/PasswordModal/index.tsx
 var import_react_intl = require("react-intl");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/components/RecoveryModal/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_intl2 = require("react-intl");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/store/useStore.ts
 var import_zustand2 = require("zustand");
 var useStore = (0, import_zustand2.create)((set) => ({
-  walletIframeInited: false,
-  setWalletIframeInited: (inited) => set({ walletIframeInited: inited }),
+  walletReady: false,
+  setWalletReady: (inited) => set({ walletReady: inited }),
   recoveryModal: {
     open: false,
     success: async () => {
@@ -470,16 +474,27 @@ var useCEXBindModalStore = (0, import_zustand3.create)((set) => ({
   open: (type) => set({ isOpen: true, type }),
   close: () => set({ isOpen: false })
 }));
+var useHashPanelStore = (0, import_zustand3.create)((set) => ({
+  isOpen: false,
+  hash: null,
+  chain: null,
+  open: (params) => set({
+    isOpen: true,
+    hash: params?.hash || null,
+    chain: params?.chain || null
+  }),
+  close: () => set({ isOpen: false })
+}));
 
 // src/components/EmailModal/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/EmailModal/StepEmail.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/utils/index.ts
 var getVersion = () => {
-  return "0.0.1";
+  return "0.0.2";
 };
 function encodeBase64(input) {
   return btoa(unescape(encodeURIComponent(input)));
@@ -490,62 +505,62 @@ function getAppClientId() {
 
 // src/components/EmailModal/StepEmail.tsx
 var import_react_intl3 = require("react-intl");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 
 // src/components/EmailModal/StepVerify.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_intl4 = require("react-intl");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/components/EmailModal/index.tsx
 var import_react_intl5 = require("react-intl");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 
 // src/components/Popover/index.tsx
-var import_react8 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 
 // src/components/LoginBox/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_intl6 = require("react-intl");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/components/LoginButton/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/LoginPanel/index.tsx
 var import_react_intl7 = require("react-intl");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/LoginModal/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 
 // src/components/UserPopover/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/assets/icon/ProfileIcon.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/components/UserPopover/index.tsx
 var import_react_intl8 = require("react-intl");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 
 // src/components/LoginButton/index.tsx
 var import_react_intl9 = require("react-intl");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 
 // src/components/UsernameModal/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/assets/icon/InfoRoundIcon.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 
 // src/components/UsernameModal/index.tsx
 var import_react_intl10 = require("react-intl");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/components/SOLModal/index.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/hooks/eventManager.ts
 var EventManager = class {
@@ -594,11 +609,11 @@ var import_styles = require("@solana/wallet-adapter-react-ui/styles.css");
 var import_react_intl11 = require("react-intl");
 
 // src/components/WalletModalContent/index.tsx
-var import_react13 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/components/SOLModal/index.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var wallets = [
   new import_wallet_adapter_wallets.PhantomWalletAdapter(),
   new import_wallet_adapter_wallets.SolflareWalletAdapter(),
@@ -642,183 +657,338 @@ var wallets = [
 ];
 
 // src/components/TRONModal/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_react_intl12 = require("react-intl");
 
 // src/hooks/useTRONWallet.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/TRONModal/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 
 // src/components/TONModal/index.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_react_intl13 = require("react-intl");
 var import_ui_react = require("@tonconnect/ui-react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 
 // src/components/BTCModal/index.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_react_intl14 = require("react-intl");
 
 // src/lib/btc/XverseAdapter.ts
 var import_sats_connect = require("sats-connect");
 
 // src/hooks/useBTCWallet.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/BTCModal/index.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 
 // src/components/CEXBindModal/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_intl15 = require("react-intl");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+
+// src/components/HashPanel/index.tsx
+var import_viem = require("viem");
+var import_react22 = require("react");
+var import_react_query = require("@tanstack/react-query");
+
+// src/components/Drawer/index.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+
+// src/components/ModalDrawer/index.tsx
+var import_jsx_runtime70 = require("react/jsx-runtime");
+
+// src/components/HashPanel/index.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
 
 // src/context/BusinessProvider.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 
 // src/context/index.tsx
-var import_jsx_runtime69 = (
+var import_jsx_runtime73 = (
   // <MpcWalletProvider>
   require("react/jsx-runtime")
 );
 
 // src/hooks/useWalletInit.ts
-var import_react22 = require("react");
+var import_react25 = require("react");
 
 // src/hooks/useWallet.tsx
+var import_viem2 = require("viem");
 var import_accounts = require("viem/accounts");
+var import_viem3 = require("viem");
+var import_react24 = require("react");
+var import_viem4 = require("viem");
 var AppClientId = "react-sdk-" + getVersion();
 function useWallet() {
   const { appid, token, overview, address, wallet: walletConfig } = useLocalStore_default();
-  const { setRecoveryModal, closeRecoveryModal } = useStore_default();
-  const initWallet = ({
+  const { setRecoveryModal, closeRecoveryModal, walletReady } = useStore_default();
+  const { open: openHashPanel } = useHashPanelStore();
+  const initCore = ({
     did,
     address: address2
   }) => {
-    return window.waitMatchUntilWalletMessage(
-      "initCore",
+    return window.matchProvider.waitUntilWalletMessage(
       {
-        AppId: appid,
-        AppClientId,
-        UserId: did,
-        AccessToken: token,
-        Address: address2
+        method: "initCore",
+        data: {
+          AppId: appid,
+          AppClientId,
+          UserId: did,
+          AccessToken: token,
+          Address: address2
+        }
       }
     );
   };
+  const generateEmbeddedWallets = async (data) => {
+    return await window.matchProvider.waitUntilWalletMessage({
+      method: "generateEmbeddedWallets",
+      data
+    });
+  };
+  const recoveryEmbeddedWallets = async (data) => {
+    return await window.matchProvider.waitUntilWalletMessage({
+      method: "recoveryEmbeddedWallets",
+      data
+    });
+  };
   const isRecovered = async () => {
-    const res = await window.waitMatchUntilWalletMessage("isRecovered");
+    const res = await window.matchProvider.waitUntilWalletMessage({
+      method: "isRecovered"
+    });
     return res.isRecovered;
   };
-  const generateWallet = async ({
-    did,
-    userPasscode,
-    recoveryType = "user_passcode_recovery_key"
+  const recoverAfter = async ({
+    chainType,
+    handle
   }) => {
-    return await window.waitMatchUntilWalletMessage("generateWallet", {
-      chainType: "ethereum",
-      recoveryType,
-      userPasscode
-    });
-  };
-  const recoverAfter = async (func) => {
     return new Promise(async (resolve, reject) => {
       const res = await isRecovered();
-      matchlog_default.log("isRecovered", res);
-      if (!res) {
-        await initWallet({
-          address: overview?.address || "",
-          did: overview?.did?.split(":")[2] || ""
-        });
-        if (walletConfig.type == "UserPasscode") {
-          setRecoveryModal({
-            open: true,
-            success: async () => {
-              matchlog_default.log("recover Success");
-              await func(resolve, reject);
-            },
-            close: async () => {
-              closeRecoveryModal();
-              reject(new Error("recover modal close"));
-            }
-          });
-          return;
-        }
-        await recoveryWallet("ethereum", "base_generated_recovery_key");
-        await func(resolve, reject);
-      } else {
-        await recoveryWallet("ethereum", "user_passcode_recovery_key");
-        await func(resolve, reject);
+      matchlog_default.log("sdk.mpc.isRecovered", res);
+      if (res) {
+        await recoveryEmbeddedWallets({ chainType, recoveryType: "user_passcode_recovery_key" });
+        await handle(resolve, reject);
+        return;
       }
+      setRecoveryModal({
+        chainType,
+        open: true,
+        success: async () => {
+          closeRecoveryModal();
+          matchlog_default.log("sdk.mpc.recover", "Success");
+          await handle(resolve, reject);
+        },
+        close: async () => {
+          closeRecoveryModal();
+          reject(new Error("recover modal close"));
+        }
+      });
+      await initCore({
+        address: overview?.address || "",
+        did: overview?.did || ""
+      });
     });
   };
-  const signMessage2 = async (message, type) => {
+  const signMessage2 = async ({
+    message,
+    chainType = "ethereum" /* Ethereum */
+  }) => {
     const getSign = async (resolve, reject) => {
       try {
-        const recoverRes = await window.waitMatchUntilWalletMessage("signMessage", {
-          message,
-          chainType: type
+        const recoverRes = await window.matchProvider.waitUntilWalletMessage({
+          method: "signMessage",
+          data: {
+            message,
+            chainType
+          }
         });
-        closeRecoveryModal();
-        resolve(recoverRes);
+        resolve(recoverRes.message);
       } catch (error) {
         console.error("qwe-sign-error", error);
         reject(error);
       }
     };
-    return await recoverAfter(getSign);
+    return await recoverAfter({
+      handle: getSign,
+      chainType
+    });
   };
-  const signTransaction = async (transaction, type) => {
+  const signTransaction = async ({
+    transaction,
+    chainType = "ethereum" /* Ethereum */,
+    chain
+  }) => {
+    console.log("qwe-sign-transaction", transaction);
     const getSign = async (resolve, reject) => {
       try {
-        const recoverRes = await window.waitMatchUntilWalletMessage("signTransaction", {
-          transaction,
-          chainType: type
+        const recoverRes = await window.matchProvider.waitUntilWalletMessage({
+          method: "signTransaction",
+          data: {
+            transaction,
+            chainType,
+            chain
+          }
         });
-        closeRecoveryModal();
-        resolve(recoverRes);
+        resolve(recoverRes.message);
       } catch (error) {
         console.error("qwe-sign-error", error);
         reject(error);
       }
     };
-    return await recoverAfter(getSign);
-  };
-  const recoveryWallet = async (chainType, recoveryType, userPasscode) => {
-    return await window.waitMatchUntilWalletMessage("recoveryWallet", {
-      chainType,
-      recoveryType,
-      userPasscode
+    return await recoverAfter({
+      handle: getSign,
+      chainType
     });
   };
-  const evmAccount = address ? (0, import_accounts.toAccount)({
-    address,
-    async signMessage({ message }) {
-      return await signMessage2(message);
-    },
-    async signTransaction(transaction, options) {
-      const { account, ...restTransaction } = transaction;
-      const sign = await signTransaction({
-        ...restTransaction
-      });
-      return sign;
-    },
-    async signTypedData(typedData) {
-      return "0x";
-    }
-  }) : void 0;
+  const evmAccount = (0, import_react24.useMemo)(() => {
+    return address ? (0, import_accounts.toAccount)({
+      address,
+      async signMessage({ message }) {
+        return await signMessage2({
+          message,
+          chainType: "ethereum" /* Ethereum */
+        });
+      },
+      async signTransaction(transaction, options) {
+        const { account, chain, ...restTransaction } = transaction;
+        console.log("qwe-sign-transaction", restTransaction, options);
+        return await signTransaction({
+          transaction: {
+            ...restTransaction
+          },
+          chainType: "ethereum" /* Ethereum */,
+          chain: {
+            id: chain?.id || restTransaction.chainId,
+            name: chain?.name,
+            nativeCurrency: {
+              name: chain?.nativeCurrency?.name || "ETH",
+              symbol: chain?.nativeCurrency?.symbol || "ETH",
+              decimals: chain?.nativeCurrency?.decimals || 18
+            }
+          }
+        });
+      },
+      async signTypedData(typedData) {
+        return "0x";
+      }
+    }) : void 0;
+  }, [address]);
+  (0, import_react24.useEffect)(() => {
+    console.log("qwe-evmAccount", evmAccount);
+  }, [evmAccount]);
   return {
+    walletReady,
     evmAccount,
     address,
-    recoveryWallet,
-    initWallet,
-    generateWallet,
+    initCore,
     signMessage: signMessage2,
     signTransaction,
     isRecovered,
-    recoverAfter
+    recoverAfter,
+    generateEmbeddedWallets,
+    recoveryEmbeddedWallets,
+    createWalletClient: (parameters) => {
+      if (!evmAccount) {
+        return;
+      }
+      const obj = (0, import_viem3.createWalletClient)({
+        ...parameters,
+        account: evmAccount
+      });
+      const sendTransaction = async (transaction) => {
+        const getSign = async (resolve, reject) => {
+          const { chain, ...restTransaction } = transaction;
+          const chainId = chain ? chain.id : await obj.getChainId();
+          const _chain = chain || obj.chain;
+          const transactionId = Date.now().toString() + Math.random().toString().slice(6);
+          const sendPrepareTransactionRequest = async () => {
+            const { chain: chain2, account, ...prepareTransactionRequest } = await obj.prepareTransactionRequest(transaction);
+            window.matchProvider.sendWalletMessage({
+              method: "prepareTransactionRequest",
+              data: {
+                prepareTransactionRequest,
+                transactionId
+              }
+            });
+          };
+          let interval = null;
+          const timer = setTimeout(() => {
+            sendPrepareTransactionRequest();
+            interval = setInterval(() => {
+              sendPrepareTransactionRequest();
+            }, 1e4);
+          }, 1500);
+          try {
+            const { serializedTransaction } = await window.matchProvider.waitUntilWalletMessage({
+              method: "sendTransaction",
+              data: {
+                transactionId,
+                transaction: {
+                  ...restTransaction
+                },
+                chainType: "ethereum" /* Ethereum */,
+                chain: {
+                  id: chainId,
+                  name: _chain?.name,
+                  nativeCurrency: _chain?.nativeCurrency
+                }
+              }
+            });
+            openHashPanel();
+            const txHash = await obj.sendRawTransaction({
+              serializedTransaction
+            });
+            openHashPanel({
+              hash: txHash,
+              chain
+            });
+            clearTimeout(timer);
+            clearInterval(interval);
+            resolve(txHash);
+          } catch (error) {
+            console.error("qwe-sign-error", error);
+            clearTimeout(timer);
+            clearInterval(interval);
+            reject(error);
+          }
+        };
+        return await recoverAfter({
+          handle: getSign,
+          chainType: "ethereum" /* Ethereum */
+        });
+      };
+      const deployContract = async (parameters2) => {
+        const { abi, args, bytecode, ...request3 } = parameters2;
+        const calldata = (0, import_viem4.encodeDeployData)({ abi, args, bytecode });
+        return await sendTransaction({
+          ...request3,
+          data: calldata
+        });
+      };
+      const writeContract = async (parameters2) => {
+        const { abi, address: address2, args, dataSuffix, functionName, ...request3 } = parameters2;
+        const data = (0, import_viem2.encodeFunctionData)({
+          abi,
+          args,
+          functionName
+        });
+        return await sendTransaction({
+          data: `${data}${dataSuffix ? dataSuffix.replace("0x", "") : ""}`,
+          to: address2,
+          ...request3
+        });
+      };
+      return {
+        ...obj,
+        sendTransaction,
+        deployContract,
+        writeContract
+      };
+    }
   };
 }
 
@@ -826,16 +996,16 @@ function useWallet() {
 var AppClientId2 = getAppClientId();
 
 // src/hooks/useInit.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 
 // src/MatchContext.tsx
-var import_react_query = require("@tanstack/react-query");
+var import_react_query2 = require("@tanstack/react-query");
 var import_react_intl16 = require("react-intl");
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var queryClient = new import_react_query.QueryClient();
-var MatchContext = (0, import_react24.createContext)(void 0);
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var queryClient = new import_react_query2.QueryClient();
+var MatchContext = (0, import_react27.createContext)(void 0);
 var useMatch = () => {
-  const context = (0, import_react24.useContext)(MatchContext);
+  const context = (0, import_react27.useContext)(MatchContext);
   if (context === void 0) {
     throw new Error("useMatch must be used within a MatchProvider");
   }
@@ -862,7 +1032,7 @@ function useUserInfo() {
   const { open: TONOpen } = useTONModalStore();
   const { open: BTCOpen } = useBTCModalStore();
   const { open: CEXBindOpen } = useCEXBindModalStore();
-  const isLogin = (0, import_react25.useMemo)(() => !!token, [token]);
+  const isLogin = (0, import_react28.useMemo)(() => !!token && !!overview, [token, overview]);
   const logout = async () => {
     try {
       await toLogoutApi();
@@ -1096,9 +1266,9 @@ function useUserInfo() {
 }
 
 // src/hooks/useMatchEvents.ts
-var import_react26 = require("react");
+var import_react29 = require("react");
 function useMatchEvents(handlers) {
-  (0, import_react26.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     Object.entries(handlers).forEach(([event, handler2]) => {
       if (handler2) {
         eventManager_default.on(event, handler2);
@@ -1116,14 +1286,14 @@ function useMatchEvents(handlers) {
 
 // src/hooks/useCopyClipboard.ts
 var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
-var import_react27 = require("react");
+var import_react30 = require("react");
 function useCopyClipboard(timeout = 500) {
-  const [isCopied, setIsCopied] = (0, import_react27.useState)(false);
-  const staticCopy = (0, import_react27.useCallback)((text) => {
+  const [isCopied, setIsCopied] = (0, import_react30.useState)(false);
+  const staticCopy = (0, import_react30.useCallback)((text) => {
     const didCopy = (0, import_copy_to_clipboard.default)(text);
     setIsCopied(didCopy);
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (isCopied) {
       const hide = setTimeout(() => {
         setIsCopied(false);