@tomo-inc/embedded-wallet-providers 0.0.20 → 0.0.21

package/dist/index.cjs

@@ -164,12 +164,14 @@ var onResponse = async (requestParams) => {
 var EmbeddedWallet = class _EmbeddedWallet {
   constructor() {
     this.themeConfig = null;
+    this.walletCloseHandlerRegistered = false;
     this.walletIframe = null;
     this.walletOrigin = "";
     this.maskZIndex = 999;
     this.isAvailable = false;
     this.config = null;
     this.info = null;
+    this.oidcToken = "";
     this.connectors = {
       [walletUtils.ChainTypeEnum.BITCOIN]: null,
       [walletUtils.ChainTypeEnum.DOGECOIN]: null,
@@ -285,7 +287,42 @@ var EmbeddedWallet = class _EmbeddedWallet {
     if (!config) {
       throw new Error("config is not initialized");
     }
+    const cacheKey = config.clientId + "-cube-oidc-token";
+    if (oidcToken) {
+      walletUtils.cache.set(cacheKey, oidcToken, false);
+    }
+    this.oidcToken = oidcToken || walletUtils.cache.get(cacheKey) || "";
+    console.log("embedded wallet login with oidcToken:", config, this.oidcToken);
+    if (!this.oidcToken) {
+      console.warn("oidcToken is not found");
+    }
     return new Promise((resolve, reject) => {
+      const receiveResponse = (event) => {
+        var _a, _b;
+        const { origin, data } = event;
+        if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
+          this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
+          if (this.themeConfig) {
+            setTimeout(() => {
+              this.request("theme-change", this.themeConfig);
+            }, 0);
+          }
+          const payload = (_b = data == null ? void 0 : data.data) != null ? _b : { isAvailable: false, connectedInfo: null };
+          resolve(payload);
+          if (this.loginStatusCallback) {
+            this == null ? void 0 : this.loginStatusCallback({ type: "login" });
+          }
+          window.removeEventListener("message", receiveResponse);
+        }
+        if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
+          this.close();
+        }
+      };
+      window.addEventListener("message", receiveResponse);
+      if (!this.walletCloseHandlerRegistered) {
+        window.addEventListener("message", this.walletCloseHandler);
+        this.walletCloseHandlerRegistered = true;
+      }
       try {
         const { walletBaseUrl, clientId, stage, logo, name } = config || {};
         if (!walletBaseUrl || !clientId) {
@@ -293,6 +330,10 @@ var EmbeddedWallet = class _EmbeddedWallet {
         }
         const EMBEDDED_WALLET_ID = clientId;
         let walletIframe = document.getElementById(EMBEDDED_WALLET_ID);
+        if (oidcToken && walletIframe) {
+          walletIframe.remove();
+          walletIframe = null;
+        }
         if (!walletIframe) {
           walletIframe = document.createElement("iframe");
           walletIframe.style.cssText = `width: 0; height: 0; background: transparent; background-color: transparent; border: none;`;
@@ -304,40 +345,20 @@ var EmbeddedWallet = class _EmbeddedWallet {
           dappOrigin: window.location.origin,
           tomoStage: stage,
           tomoClientId: clientId,
-          oidcToken: oidcToken || "",
+          oidcToken: this.oidcToken || "",
           logo: logo || "",
           name: name || ""
         });
-        walletIframe.src = `${walletBaseUrl}#${searchParams.toString()}`;
+        const r = Math.random().toString(36).substring(2, 15);
+        walletIframe.src = `${walletBaseUrl}?r1=${r}#${searchParams.toString()}`;
         walletIframe.setAttribute("allowTransparency", "true");
         walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
         this.walletIframe = walletIframe;
       } catch (error) {
         console.error("login error", error);
+        window.removeEventListener("message", receiveResponse);
         reject(error);
       }
-      const receiveResponse = ({ origin, data }) => {
-        var _a;
-        if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
-          console.log("------receiveResponse", data, origin);
-          this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
-          if (this.themeConfig) {
-            setTimeout(() => {
-              this.request("theme-change", this.themeConfig);
-            }, 0);
-          }
-          resolve(data == null ? void 0 : data.data);
-          if (this.loginStatusCallback) {
-            this == null ? void 0 : this.loginStatusCallback({ type: "login" });
-          }
-          window.removeEventListener("message", receiveResponse);
-        }
-        if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
-          this.close();
-        }
-      };
-      window.addEventListener("message", receiveResponse);
-      window.addEventListener("message", this.walletCloseHandler);
     });
   }
   async themeChange(theme) {

package/dist/index.d.cts

@@ -49,12 +49,14 @@ type EmbeddedWalletConnectors = {
 declare class EmbeddedWallet {
     private static instance;
     private themeConfig;
+    private walletCloseHandlerRegistered;
     walletIframe: HTMLIFrameElement | null;
     walletOrigin: string;
     maskZIndex: number;
     isAvailable: boolean;
     config: EmbeddedWalletConfig | null;
     info: WalletInfo | null;
+    private oidcToken;
     connectors: EmbeddedWalletConnectors;
     loginByGoogle: (() => Promise<string>) | null;
     loginByX: (() => Promise<string>) | null;

package/dist/index.d.ts

@@ -49,12 +49,14 @@ type EmbeddedWalletConnectors = {
 declare class EmbeddedWallet {
     private static instance;
     private themeConfig;
+    private walletCloseHandlerRegistered;
     walletIframe: HTMLIFrameElement | null;
     walletOrigin: string;
     maskZIndex: number;
     isAvailable: boolean;
     config: EmbeddedWalletConfig | null;
     info: WalletInfo | null;
+    private oidcToken;
     connectors: EmbeddedWalletConnectors;
     loginByGoogle: (() => Promise<string>) | null;
     loginByX: (() => Promise<string>) | null;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { TronProvider, SolanaProvider, DogecoinProvider, BitcoinProvider, EvmProvider } from '@tomo-inc/inject-providers';
-import { ChainTypeEnum, ProviderProtocol, ProviderStandard } from '@tomo-inc/wallet-utils';
+import { ChainTypeEnum, ProviderProtocol, ProviderStandard, cache } from '@tomo-inc/wallet-utils';
 import { OidcAuth } from '@tomo-inc/oidc-auth';
 
 var __defProp = Object.defineProperty;
@@ -162,12 +162,14 @@ var onResponse = async (requestParams) => {
 var EmbeddedWallet = class _EmbeddedWallet {
   constructor() {
     this.themeConfig = null;
+    this.walletCloseHandlerRegistered = false;
     this.walletIframe = null;
     this.walletOrigin = "";
     this.maskZIndex = 999;
     this.isAvailable = false;
     this.config = null;
     this.info = null;
+    this.oidcToken = "";
     this.connectors = {
       [ChainTypeEnum.BITCOIN]: null,
       [ChainTypeEnum.DOGECOIN]: null,
@@ -283,7 +285,42 @@ var EmbeddedWallet = class _EmbeddedWallet {
     if (!config) {
       throw new Error("config is not initialized");
     }
+    const cacheKey = config.clientId + "-cube-oidc-token";
+    if (oidcToken) {
+      cache.set(cacheKey, oidcToken, false);
+    }
+    this.oidcToken = oidcToken || cache.get(cacheKey) || "";
+    console.log("embedded wallet login with oidcToken:", config, this.oidcToken);
+    if (!this.oidcToken) {
+      console.warn("oidcToken is not found");
+    }
     return new Promise((resolve, reject) => {
+      const receiveResponse = (event) => {
+        var _a, _b;
+        const { origin, data } = event;
+        if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
+          this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
+          if (this.themeConfig) {
+            setTimeout(() => {
+              this.request("theme-change", this.themeConfig);
+            }, 0);
+          }
+          const payload = (_b = data == null ? void 0 : data.data) != null ? _b : { isAvailable: false, connectedInfo: null };
+          resolve(payload);
+          if (this.loginStatusCallback) {
+            this == null ? void 0 : this.loginStatusCallback({ type: "login" });
+          }
+          window.removeEventListener("message", receiveResponse);
+        }
+        if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
+          this.close();
+        }
+      };
+      window.addEventListener("message", receiveResponse);
+      if (!this.walletCloseHandlerRegistered) {
+        window.addEventListener("message", this.walletCloseHandler);
+        this.walletCloseHandlerRegistered = true;
+      }
       try {
         const { walletBaseUrl, clientId, stage, logo, name } = config || {};
         if (!walletBaseUrl || !clientId) {
@@ -291,6 +328,10 @@ var EmbeddedWallet = class _EmbeddedWallet {
         }
         const EMBEDDED_WALLET_ID = clientId;
         let walletIframe = document.getElementById(EMBEDDED_WALLET_ID);
+        if (oidcToken && walletIframe) {
+          walletIframe.remove();
+          walletIframe = null;
+        }
         if (!walletIframe) {
           walletIframe = document.createElement("iframe");
           walletIframe.style.cssText = `width: 0; height: 0; background: transparent; background-color: transparent; border: none;`;
@@ -302,40 +343,20 @@ var EmbeddedWallet = class _EmbeddedWallet {
           dappOrigin: window.location.origin,
           tomoStage: stage,
           tomoClientId: clientId,
-          oidcToken: oidcToken || "",
+          oidcToken: this.oidcToken || "",
           logo: logo || "",
           name: name || ""
         });
-        walletIframe.src = `${walletBaseUrl}#${searchParams.toString()}`;
+        const r = Math.random().toString(36).substring(2, 15);
+        walletIframe.src = `${walletBaseUrl}?r1=${r}#${searchParams.toString()}`;
         walletIframe.setAttribute("allowTransparency", "true");
         walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
         this.walletIframe = walletIframe;
       } catch (error) {
         console.error("login error", error);
+        window.removeEventListener("message", receiveResponse);
         reject(error);
       }
-      const receiveResponse = ({ origin, data }) => {
-        var _a;
-        if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
-          console.log("------receiveResponse", data, origin);
-          this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
-          if (this.themeConfig) {
-            setTimeout(() => {
-              this.request("theme-change", this.themeConfig);
-            }, 0);
-          }
-          resolve(data == null ? void 0 : data.data);
-          if (this.loginStatusCallback) {
-            this == null ? void 0 : this.loginStatusCallback({ type: "login" });
-          }
-          window.removeEventListener("message", receiveResponse);
-        }
-        if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
-          this.close();
-        }
-      };
-      window.addEventListener("message", receiveResponse);
-      window.addEventListener("message", this.walletCloseHandler);
     });
   }
   async themeChange(theme) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomo-inc/embedded-wallet-providers",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "author": "tomo.inc",
   "license": "MIT",
   "private": false,

package/src/embedded-wallet.ts

@@ -8,7 +8,7 @@ import {
 import { onResponse, sendRequest } from "./hub";
 
 import { OidcAuth } from "@tomo-inc/oidc-auth";
-import { ChainTypeEnum, ProviderProtocol, ProviderStandard } from "@tomo-inc/wallet-utils";
+import { ChainTypeEnum, ProviderProtocol, ProviderStandard, cache } from "@tomo-inc/wallet-utils";
 import {
   EmbeddedWalletConfig,
   EmbeddedWalletConnectors,
@@ -21,6 +21,7 @@ import {
 export class EmbeddedWallet {
   private static instance: EmbeddedWallet;
   private themeConfig: any | null = null;
+  private walletCloseHandlerRegistered = false;
 
   public walletIframe: HTMLIFrameElement | null = null;
   public walletOrigin: string = "";
@@ -28,6 +29,7 @@ export class EmbeddedWallet {
   public isAvailable: boolean = false;
   public config: EmbeddedWalletConfig | null = null;
   public info: WalletInfo | null = null;
+  private oidcToken: string = "";
   public connectors: EmbeddedWalletConnectors = {
     [ChainTypeEnum.BITCOIN]: null,
     [ChainTypeEnum.DOGECOIN]: null,
@@ -150,7 +152,45 @@ export class EmbeddedWallet {
       throw new Error("config is not initialized");
     }
 
+    // cache oidcToken for second login(2nd reason unknown)
+    const cacheKey = config.clientId + "-cube-oidc-token";
+    if (oidcToken) {
+      cache.set(cacheKey, oidcToken, false);
+    }
+    this.oidcToken = oidcToken || cache.get(cacheKey) || "";
+    console.log("embedded wallet login with oidcToken:", config, this.oidcToken);
+    if (!this.oidcToken) {
+      console.warn("oidcToken is not found");
+    }
+
     return new Promise((resolve, reject) => {
+      const receiveResponse = (event: MessageEvent) => {
+        const { origin, data } = event;
+        if (data?.type === "wallet-ready" && origin === this.walletOrigin) {
+          this.isAvailable = data?.data?.isAvailable || false;
+          if (this.themeConfig) {
+            setTimeout(() => {
+              this.request("theme-change", this.themeConfig);
+            }, 0);
+          }
+          const payload = data?.data ?? { isAvailable: false, connectedInfo: null };
+          resolve(payload);
+          if (this.loginStatusCallback) {
+            this?.loginStatusCallback({ type: "login" });
+          }
+          window.removeEventListener("message", receiveResponse);
+        }
+        if (data?.type === "wallet-close" && origin === this.walletOrigin) {
+          this.close();
+        }
+      };
+
+      window.addEventListener("message", receiveResponse);
+      if (!this.walletCloseHandlerRegistered) {
+        window.addEventListener("message", this.walletCloseHandler);
+        this.walletCloseHandlerRegistered = true;
+      }
+
       try {
         const { walletBaseUrl, clientId, stage, logo, name } = config || {};
         if (!walletBaseUrl || !clientId) {
@@ -160,6 +200,11 @@ export class EmbeddedWallet {
         const EMBEDDED_WALLET_ID = clientId;
 
         let walletIframe = document.getElementById(EMBEDDED_WALLET_ID) as HTMLIFrameElement | null;
+
+        if (oidcToken && walletIframe) {
+          walletIframe.remove();
+          walletIframe = null;
+        }
         if (!walletIframe) {
           walletIframe = document.createElement("iframe");
           walletIframe.style.cssText = `width: 0; height: 0; background: transparent; background-color: transparent; border: none;`;
@@ -167,46 +212,27 @@ export class EmbeddedWallet {
           walletIframe.setAttribute("allowTransparency", "true");
           document.body.appendChild(walletIframe);
         }
+
         const searchParams = new URLSearchParams({
           dappOrigin: window.location.origin,
           tomoStage: stage,
           tomoClientId: clientId,
-          oidcToken: oidcToken || "",
+          oidcToken: this.oidcToken || "",
           logo: logo || "",
           name: name || "",
         });
-        walletIframe.src = `${walletBaseUrl}#${searchParams.toString()}`;
+
+        //prevent browser cache, load iframe --force
+        const r = Math.random().toString(36).substring(2, 15);
+        walletIframe.src = `${walletBaseUrl}?r1=${r}#${searchParams.toString()}`;
         walletIframe.setAttribute("allowTransparency", "true");
         walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
         this.walletIframe = walletIframe;
       } catch (error) {
         console.error("login error", error);
+        window.removeEventListener("message", receiveResponse);
         reject(error);
       }
-
-      const receiveResponse = ({ origin, data }: { origin: string; data: any }) => {
-        if (data?.type === "wallet-ready" && origin === this.walletOrigin) {
-          console.log("------receiveResponse", data, origin);
-          this.isAvailable = data?.data?.isAvailable || false;
-          // Apply persisted theme after wallet is ready
-          if (this.themeConfig) {
-            setTimeout(() => {
-              this.request("theme-change", this.themeConfig);
-            }, 0);
-          }
-          resolve(data?.data);
-          if (this.loginStatusCallback) {
-            this?.loginStatusCallback({ type: "login" });
-          }
-          window.removeEventListener("message", receiveResponse);
-        }
-        if (data?.type === "wallet-close" && origin === this.walletOrigin) {
-          this.close();
-        }
-      };
-      window.addEventListener("message", receiveResponse);
-      // add wallet-close listener
-      window.addEventListener("message", this.walletCloseHandler);
     });
   }