web-dc-api 0.0.40 → 0.0.41

package/lib/implements/wallet/manager.ts

@@ -1,14 +1,19 @@
-
 import { walletOrigin, walletUrl, walletWindowName } from "../../common/define";
 import { DCContext } from "../../../lib/interfaces/DCContext";
 import { Ed25519PubKey } from "../../common/dc-key/ed25519";
-import type { Account, EIP712SignReqMessage, SendMessage, SignReqMessage, SignResponseMessage } from "../../common/types/types";
-
-
-const appOrigin = typeof window !== "undefined" ? window.location.origin : "";//"http://localhost:3002"
-const appUrl = typeof window !== "undefined" ? window.location.href :  "";
+import type {
+  Account,
+  EIP712SignReqMessage,
+  SendMessage,
+  SignReqMessage,
+  SignResponseMessage,
+} from "../../common/types/types";
 
+const appOrigin = typeof window !== "undefined" ? window.location.origin : ""; //"http://localhost:3002"
+const appUrl = typeof window !== "undefined" ? window.location.href : "";
 
+const localStorageKey_dcwallet_opener = "dcwallet_opener";
+const timeout = 30000;
 // 错误定义
 export class WalletError extends Error {
   constructor(message: string) {
@@ -16,27 +21,28 @@ export class WalletError extends Error {
     this.name = "WalletError";
   }
 }
-export const Errors = {
-};
+export const Errors = {};
 
 export class WalletManager {
   private context: DCContext;
   private walletWindow: Window | null = null;
-  private iframeId: string  = 'dcIframeId';
-  private walletIframeId: string = 'dcWalletIframeId';
+  private iframeId: string = "dcIframeId";
+  private walletIframeId: string = "dcWalletIframeId";
   private channelPort2: MessagePort | null = null;
   constructor(context: DCContext) {
     this.context = context;
   }
 
-  async init():  Promise<boolean> {
+  async init(): Promise<boolean> {
     console.log("========init walletManager", appOrigin, walletOrigin);
-    if(appOrigin.indexOf(walletOrigin) === -1) {
+    const walletOpenFlag = typeof globalThis !== "undefined" && typeof (globalThis as any).walletOpenType !== "undefined" ? true : false // 用于判断是否是直接打开;
+    if (walletOpenFlag || appOrigin.indexOf(walletOrigin) === -1) {
       return new Promise((resolve, reject) => {
         // html添加iframe标签，id是dcWalletIframe
         const iframe = document.createElement("iframe");
         iframe.id = this.iframeId;
         iframe.src = `${walletUrl}/iframe?parentOrigin=${appOrigin}`;
+        (iframe as any).credentialless = true;
         iframe.onload = async () => {
           const bool = await this.initConfig(this);
           resolve(bool);
@@ -47,34 +53,35 @@ export class WalletManager {
           this.listenFromWallet(event);
         });
       });
-    }else {
+    } else {
       return true;
     }
   }
   // iframe加载完成后，发送初始化配置
-  async initConfig  (that: WalletManager): Promise<boolean> {
-    return new Promise((resolve, reject) => { 
+  async initConfig(that: WalletManager): Promise<boolean> {
+    return new Promise((resolve, reject) => {
       const message = {
         type: "init",
         data: {
           appId: this.context.appInfo.appId,
-          appName: this.context.appInfo.appName, 
-          appIcon: this.context.appInfo.appIcon, 
+          appName: this.context.appInfo.appName,
+          appIcon: this.context.appInfo.appIcon,
           appVersion: this.context.appInfo.appVersion,
           appUrl: appUrl,
         },
       };
-      that.sendMessageToIframe(message, 5000 * 10)
+      that
+        .sendMessageToIframe(message, 5000 * 10)
         .then((response) => {
           console.log("initConfig response", response);
-          if(!response || !response.data || !response.data.data) {
+          if (!response || !response.data || !response.data.data) {
             console.error("initConfig response is null");
             resolve(false);
             return;
           }
           const data = response.data?.data;
           const messageData = data.message;
-          if(data.success === false || !messageData.publicKey) {
+          if (data.success === false || !messageData.publicKey) {
             console.error("initConfig error", message);
             resolve(false);
             return;
@@ -87,28 +94,128 @@ export class WalletManager {
           resolve(false);
         });
     });
+  }
+
+  //等待钱包页面加载完成
+  waitForWalletLoaded = async (
+    walletWindow: Window | null,
+    timeout: number
+  ) => {
+    // localStorage中获取是否支持window.opener
+    const openerFlag = localStorage.getItem(localStorageKey_dcwallet_opener);
+    let waitTimeCount = 1;
+    if (openerFlag == "true") {
+      waitTimeCount = 3;
+    }
+    // 开启定时器500ms检查一次,第一次等待1.5秒,如果没有加载完成,则发送轮询请求
+    return new Promise((resolve) => {
+      let messageChannel = new MessageChannel();
+      const onMessage = (event: MessageEvent) => {
+        const message = event.data;
+        if (message.type === "walletLoaded") {
+          clearInterval(interval);
+          clearTimeout(timeoutHandle);
+          messageChannel.port1.close();
+          window.removeEventListener("message", listenForWalletLoaded);
+          resolve(true);
+        }
+      };
+      messageChannel.port1.onmessage = onMessage;
+      const checkMessage = {
+        type: "checkWalletLoaded",
+        origin: appOrigin,
+      };
+      let walletLoadedFlag = false;
+      const listenForWalletLoaded = (event: MessageEvent) => {
+        //判断消息来源
+        if (event.origin !== walletOrigin) {
+          return;
+        }
+        if (event.source != null && event.source != walletWindow) {
+          //非当前操作打开的窗口
+          return;
+        }
+        const data = event.data;
+        if (!data.type) {
+          //非钱包插件
+          return;
+        }
+        if (data.type === "walletLoaded") {
+          //钱包加载完成
+          walletLoadedFlag = true;
+          localStorage.setItem(localStorageKey_dcwallet_opener, "true");
+          clearInterval(interval);
+          clearTimeout(timeoutHandle);
+          messageChannel.port1.close();
+          window.removeEventListener("message", listenForWalletLoaded);
+          resolve(true);
+        }
+      };
+
+      //添加监听事件
+      window.addEventListener("message", listenForWalletLoaded);
+      const interval = setInterval(() => {
+        if (walletLoadedFlag) {
+          clearInterval(interval);
+          messageChannel.port1.close();
+        } else {
+          if (waitTimeCount >= 0) {
+            waitTimeCount--;
+          } else {
+            try {
+              walletWindow?.postMessage(checkMessage, walletOrigin, [
+                messageChannel.port2,
+              ]);
+            } catch (e) {
+              //不做处理
+              // 提示错误
+              console.log("错误", e);
+              if (messageChannel) {
+                messageChannel.port1.close();
+              }
+              messageChannel = new MessageChannel();
+              messageChannel.port1.onmessage = onMessage;
+            }
+          }
+        }
+      }, 500);
+      //添加超时处理
+      const timeoutHandle = setTimeout(() => {
+        clearInterval(interval);
+        messageChannel.port1.close();
+        window.removeEventListener("message", listenForWalletLoaded);
+        resolve(false);
+      }, timeout);
+    });
   };
 
-  // 判断是否是微信窗口
-  private isWechatWindow = (): boolean => {
+  // 判断是否iframe打开钱包
+  private isIframeOpen = (): boolean => {
+    const walletOpenType = typeof globalThis !== "undefined" ? (globalThis as any).walletOpenType : '' // 用于判断是否是直接打开;
+    if(walletOpenType == 'iframe') {
+      return true;
+    }
     const ua = navigator.userAgent.toLowerCase();
     return ua.indexOf("micromessenger") !== -1;
-    // // todo 临时测试
-    // return false
+    // todo 临时测试
+    // return true
   };
 
   // 打开钱包iframe窗口
   async openWalletIframe(): Promise<boolean> {
-    return new Promise((resolve, reject) => { 
-      const walletIframe = document.getElementById(this.walletIframeId) as HTMLIFrameElement;
-      if(walletIframe) {
-          resolve(true);
-          return;
+    return new Promise((resolve, reject) => {
+      const walletIframe = document.getElementById(
+        this.walletIframeId
+      ) as HTMLIFrameElement;
+      if (walletIframe) {
+        resolve(true);
+        return;
       }
       // html添加iframe标签，id是dcWalletIframe
       const iframe = document.createElement("iframe");
       iframe.id = this.walletIframeId;
       iframe.src = `${walletUrl}?origin=${appOrigin}`;
+      (iframe as any).credentialless = true;
       iframe.onload = async () => {
         resolve(true);
       };
@@ -116,10 +223,12 @@ export class WalletManager {
         console.error("openWallet error", error);
         resolve(false);
       };
-      iframe.sandbox = "allow-scripts allow-forms allow-same-origin";
+      iframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
+
+    // iframe.sandbox = "allow-scripts allow-forms allow-same-origin";
       // 直接设置 iframe 的样式以覆盖整个页面
       // 最大可能的 z-index
-      iframe.style = `
+      iframe.style.cssText = `
           z-index: 2147483647;
           position: fixed;
           top: 0;
@@ -135,26 +244,28 @@ export class WalletManager {
           isolation: isolate;
           transform: translateZ(0);
         `;
-      iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+      iframe.allow =
+        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
       iframe.allowFullscreen = true;
       document.body.appendChild(iframe);
     });
   }
 
   async removeWalletIframe() {
-      const walletIframe = document.getElementById(this.walletIframeId) as HTMLIFrameElement;
-      if(walletIframe) {
-        document.body.removeChild(walletIframe);  
-      }
+    const walletIframe = document.getElementById(
+      this.walletIframeId
+    ) as HTMLIFrameElement;
+    if (walletIframe) {
+      document.body.removeChild(walletIframe);
+    }
   }
 
-
   async openConnect(): Promise<Account> {
     return new Promise(async (resolve, reject) => {
-      if (this.isWechatWindow()) {
+      if (this.isIframeOpen()) {
         // 微信窗口
         const bool = await this.openWalletIframe();
-        if(!bool) {
+        if (!bool) {
           console.error("openWalletIframe error");
           reject(new WalletError("openWalletIframe error"));
           return;
@@ -165,39 +276,43 @@ export class WalletManager {
         this.walletWindow = window.open(urlWithOrigin, walletWindowName);
       }
       this.initCommChannel();
-      const message = {
-        type: "connect",
-        data: {
-          origin: appOrigin,
-        },
-      };
-      this.sendMessageToIframe(message, 600000)
-        .then((response) => {
-          console.log("openConnect response", response);
-          if(!response || !response.data || !response.data.data) {
-            console.error("openConnect response is null");
-            reject(new WalletError("openConnect response is null"));
-            return;
-          }
-          const data = response.data?.data;
-          const messageData = data.message;
-          if(data.success === false || !messageData.appAccount) {
-            console.error("openConnect error", message);
-            reject(new WalletError("openConnect appAccount is null"));
-            return;
-          }
-          console.log("openConnect success", messageData);
-          resolve(messageData);
-        })
-        .catch((error) => {
-          console.error("openConnect error", error);
-          reject(new WalletError("openConnect error"));
-        });
+      // this.waitForWalletLoaded(this.walletWindow, timeout).then((flag) => {
+      //   if (flag) {
+          const message = {
+            type: "connect",
+            data: {
+              origin: appOrigin,
+            },
+          };
+          this.sendMessageToIframe(message, 600000)
+            .then((response) => {
+              console.log("openConnect response", response);
+              if (!response || !response.data || !response.data.data) {
+                console.error("openConnect response is null");
+                reject(new WalletError("openConnect response is null"));
+                return;
+              }
+              const data = response.data?.data;
+              const messageData = data.message;
+              if (data.success === false || !messageData.appAccount) {
+                console.error("openConnect error", message);
+                reject(new WalletError("openConnect appAccount is null"));
+                return;
+              }
+              console.log("openConnect success", messageData);
+              resolve(messageData);
+            })
+            .catch((error) => {
+              console.error("openConnect error", error);
+              reject(new WalletError("openConnect error"));
+            });
+      //     }
+      // });
     });
   }
 
   // 退出登录 清除iframe中的私钥和公钥
-  exitLogin = (): Promise<boolean>  => {
+  exitLogin = (): Promise<boolean> => {
     return new Promise((resolve, reject) => {
       // 每100ms发送一次消息,直到钱包加载完成
       const message = {
@@ -205,14 +320,14 @@ export class WalletManager {
       };
       this.sendMessageToIframe(message, 60000)
         .then((response) => {
-          if(!response || !response.data || !response.data.data) {
+          if (!response || !response.data || !response.data.data) {
             console.error("exitLogin response is null");
             reject(new WalletError("exitLogin response is null"));
             return;
           }
           const data = response.data?.data;
           const messageData = data.message;
-          if(data.success === false) {
+          if (data.success === false) {
             console.error("exitLogin error", message);
             reject(new WalletError("exitLogin messageData is null"));
             return;
@@ -226,11 +341,11 @@ export class WalletManager {
     });
   };
 
-/**
- * 用私钥解密数据
- * @param payload 需要解密的数据
- * @returns 解密结果
- */
+  /**
+   * 用私钥解密数据
+   * @param payload 需要解密的数据
+   * @returns 解密结果
+   */
 
   decrypt = (payload: Uint8Array): Promise<Uint8Array> => {
     return new Promise((resolve, reject) => {
@@ -243,14 +358,14 @@ export class WalletManager {
       this.sendMessageToIframe(message, 60000)
         .then((response) => {
           console.log("decrypt response", response);
-          if(!response || !response.data || !response.data.data) {
+          if (!response || !response.data || !response.data.data) {
             console.error("decrypt response is null");
             reject(new WalletError("decrypt response is null"));
             return;
           }
           const data = response.data?.data;
           const messageData = data.message;
-          if(data.success === false || !messageData) {
+          if (data.success === false || !messageData) {
             console.error("decrypt error", message);
             reject(new WalletError("decrypt messageData is null"));
             return;
@@ -270,7 +385,7 @@ export class WalletManager {
    * @param payload 需要签名的数据
    * @returns 签名结果
    */
-  sign = (payload: Uint8Array): Promise<Uint8Array>  => {
+  sign = (payload: Uint8Array): Promise<Uint8Array> => {
     return new Promise((resolve, reject) => {
       // 每100ms发送一次消息,直到钱包加载完成
       const message = {
@@ -281,14 +396,14 @@ export class WalletManager {
       };
       this.sendMessageToIframe(message, 60000)
         .then((response) => {
-          if(!response || !response.data || !response.data.data) {
+          if (!response || !response.data || !response.data.data) {
             console.error("sign response is null");
             reject(new WalletError("sign response is null"));
             return;
           }
           const data = response.data?.data;
           const messageData = data.message;
-          if(data.success === false || !messageData) {
+          if (data.success === false || !messageData) {
             console.error("sign error", message);
             reject(new WalletError("sign messageData is null"));
             return;
@@ -302,19 +417,18 @@ export class WalletManager {
     });
   };
 
-
   // 签名普通消息
-  async signMessage (data: SignReqMessage): Promise<SignResponseMessage | null> {
+  async signMessage(data: SignReqMessage): Promise<SignResponseMessage | null> {
     return new Promise(async (resolve, reject) => {
       if (!this.context) {
         console.log("未连接钱包");
         reject(new WalletError("未连接钱包"));
         return;
       }
-      if (this.isWechatWindow()) {
+      if (this.isIframeOpen()) {
         // 微信窗口
         const bool = await this.openWalletIframe();
-        if(!bool) {
+        if (!bool) {
           console.error("openWalletIframe error");
           reject(new WalletError("openWalletIframe error"));
           return;
@@ -325,49 +439,54 @@ export class WalletManager {
         this.walletWindow = window.open(urlWithOrigin, walletWindowName);
       }
       this.initCommChannel();
-      // 每100ms发送一次消息,直到钱包加载完成
-      const message = {
-        type: "signMessage",
-        data,
-      };
-      this.sendMessageToIframe(message, 60000)
-        .then((response: MessageEvent | null) => {
-          console.log("signMessage response", response);
-          if(!response || !response.data || !response.data.data) {
-            console.error("signMessage response is null");
-            reject(new WalletError("signMessage response is null"));
-            return;
-          }
-          const data = response.data?.data;
-          const messageData = data.message;
-          if(data.success === false || !messageData) {
-            console.error("signMessage error", message);
-            reject(new WalletError("signMessage messageData is null"));
-            return;
-          }
-          console.log("signMessage success", messageData);
-          resolve(messageData);
-        })
-        .catch((error) => {
-          console.error("signMessage error", error);
-          reject(error);
-        });
-    })
-  };
-
+      // this.waitForWalletLoaded(this.walletWindow, timeout).then((flag) => {
+      //   if (flag) {
+          // 每100ms发送一次消息,直到钱包加载完成
+          const message = {
+            type: "signMessage",
+            data,
+          };
+          this.sendMessageToIframe(message, 60000)
+            .then((response: MessageEvent | null) => {
+              console.log("signMessage response", response);
+              if (!response || !response.data || !response.data.data) {
+                console.error("signMessage response is null");
+                reject(new WalletError("signMessage response is null"));
+                return;
+              }
+              const data = response.data?.data;
+              const messageData = data.message;
+              if (data.success === false || !messageData) {
+                console.error("signMessage error", message);
+                reject(new WalletError("signMessage messageData is null"));
+                return;
+              }
+              console.log("signMessage success", messageData);
+              resolve(messageData);
+            })
+            .catch((error) => {
+              console.error("signMessage error", error);
+              reject(error);
+            });
+        //   }
+        // });
+    });
+  }
 
   // 签名EIP712消息
-  async signEIP712Message (data: EIP712SignReqMessage): Promise<SignResponseMessage | null> {
+  async signEIP712Message(
+    data: EIP712SignReqMessage
+  ): Promise<SignResponseMessage | null> {
     return new Promise(async (resolve, reject) => {
       if (!this.context) {
         console.log("未连接钱包");
         reject(new WalletError("未连接钱包"));
         return;
       }
-      if (this.isWechatWindow()) {
+      if (this.isIframeOpen()) {
         // 微信窗口
         const bool = await this.openWalletIframe();
-        if(!bool) {
+        if (!bool) {
           console.error("openWalletIframe error");
           reject(new WalletError("openWalletIframe error"));
           return;
@@ -378,35 +497,39 @@ export class WalletManager {
         this.walletWindow = window.open(urlWithOrigin, walletWindowName);
       }
       this.initCommChannel();
-      // port1 转移给iframe
-      const message = {
-        type: "signEIP712Message",
-        data: data
-      };
-      this.sendMessageToIframe(message, 60000)
-        .then((response) => {
-          console.log("signEIP712Message response", response);
-          if(!response || !response.data || !response.data.data) {
-            console.error("signEIP712Message response is null");
-            reject(new WalletError("signEIP712Message response is null"));
-            return;
-          }
-          const data = response.data?.data;
-          const messageData = data.message;
-          if(data.success === false || !messageData) {
-            console.error("signEIP712Message error", message);
-            reject(new WalletError("signEIP712Message messageData is null"));
-            return;
-          }
-          console.log("messageData success", messageData);
-          resolve(messageData);
-        })
-        .catch((error) => {
-          console.error("signEIP712Message error", error);
-          reject(error);
-        });
-    })
-  };
+      // this.waitForWalletLoaded(this.walletWindow, timeout).then((flag) => {
+      //   if (flag) {
+          // port1 转移给iframe
+          const message = {
+            type: "signEIP712Message",
+            data: data,
+          };
+          this.sendMessageToIframe(message, 60000)
+            .then((response) => {
+              console.log("signEIP712Message response", response);
+              if (!response || !response.data || !response.data.data) {
+                console.error("signEIP712Message response is null");
+                reject(new WalletError("signEIP712Message response is null"));
+                return;
+              }
+              const data = response.data?.data;
+              const messageData = data.message;
+              if (data.success === false || !messageData) {
+                console.error("signEIP712Message error", message);
+                reject(new WalletError("signEIP712Message messageData is null"));
+                return;
+              }
+              console.log("messageData success", messageData);
+              resolve(messageData);
+            })
+            .catch((error) => {
+              console.error("signEIP712Message error", error);
+              reject(error);
+            });
+      //   }
+      // });
+    });
+  }
 
   private async listenFromWallet(event: MessageEvent): Promise<void> {
     // if (event.origin !== "todo来源") return; // 可选：对源进行验证
@@ -417,9 +540,9 @@ export class WalletManager {
         return;
       }
       if (message.type === "walletLoaded") {
-        console.log('walletLoaded', message)
-        console.log('event.origin', event.origin)
-        console.log('walletOrigin', walletOrigin)
+        console.log("walletLoaded", message);
+        console.log("event.origin", event.origin);
+        console.log("walletOrigin", walletOrigin);
         //钱包加载完成
         if (event.origin !== walletOrigin) {
           console.log("来源不匹配", event.origin, walletOrigin);
@@ -433,23 +556,28 @@ export class WalletManager {
             type: "channelPort2",
             origin: appOrigin,
           };
-          if (this.walletWindow) { // 如果钱包已经打开
+          if (this.walletWindow) {
+            // 如果钱包已经打开
             try {
               this.walletWindow.postMessage(message, walletOrigin, [this.channelPort2]);
             } catch (error) {
               console.error("postMessage error", error);
             }
-          }else { // 如果钱包iframe已经打开
-            const iframe = document.getElementById(this.walletIframeId) as HTMLIFrameElement;
+          } else {
+            // 如果钱包iframe已经打开
+            const iframe = document.getElementById(
+              this.walletIframeId
+            ) as HTMLIFrameElement;
             // port1转移给iframe
             if (iframe) {
               try {
-                iframe.contentWindow?.postMessage(message, walletOrigin, [this.channelPort2]);
+                iframe.contentWindow?.postMessage(message, walletOrigin, [
+                  this.channelPort2,
+                ]);
               } catch (error) {
                 console.error("postMessage error", error);
               }
             }
-
           }
         }
       }
@@ -481,7 +609,7 @@ export class WalletManager {
     }
   }
   // 利用messageChannel通信
-  private async sendMessageToIframe  (
+  private async sendMessageToIframe(
     message: SendMessage<any>,
     timeout: number
   ): Promise<MessageEvent | null> {
@@ -492,7 +620,7 @@ export class WalletManager {
       // 等待钱包iframe返回,并关闭channel,超时时间timeout
       return new Promise((resolve, reject) => {
         const timer = setTimeout(() => {
-          if (this.isWechatWindow()) {
+          if (this.isIframeOpen()) {
             // 微信窗口
             this.removeWalletIframe();
           }
@@ -501,7 +629,7 @@ export class WalletManager {
         messageChannel.port1.onmessage = (event) => {
           clearTimeout(timer);
           messageChannel.port1.close();
-          if (this.isWechatWindow()) {
+          if (this.isIframeOpen()) {
             // 微信窗口
             this.removeWalletIframe();
           }
@@ -515,7 +643,7 @@ export class WalletManager {
           console.error("sendMessageToIframe postMessage error", error);
           clearTimeout(timer);
           messageChannel.port1.close();
-          if (this.isWechatWindow()) {
+          if (this.isIframeOpen()) {
             // 微信窗口
             this.removeWalletIframe();
           }
@@ -526,6 +654,5 @@ export class WalletManager {
       console.error("iframe不存在");
       return null;
     }
-  };
-
+  }
 }