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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +51 -27
  2. package/dist/index.d.cts +2 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +52 -28
  5. package/package.json +1 -1
  6. package/src/embedded-wallet.ts +61 -32
package/dist/index.cjs CHANGED
@@ -164,12 +164,14 @@ var onResponse = async (requestParams) => {
164
164
  var EmbeddedWallet = class _EmbeddedWallet {
165
165
  constructor() {
166
166
  this.themeConfig = null;
167
+ this.walletCloseHandlerRegistered = false;
167
168
  this.walletIframe = null;
168
169
  this.walletOrigin = "";
169
170
  this.maskZIndex = 999;
170
171
  this.isAvailable = false;
171
172
  this.config = null;
172
173
  this.info = null;
174
+ this.oidcToken = "";
173
175
  this.connectors = {
174
176
  [walletUtils.ChainTypeEnum.BITCOIN]: null,
175
177
  [walletUtils.ChainTypeEnum.DOGECOIN]: null,
@@ -267,7 +269,6 @@ var EmbeddedWallet = class _EmbeddedWallet {
267
269
  this.loginByX = loginByX;
268
270
  const { isAvailable, message, connectedInfo } = await this.login();
269
271
  this.isAvailable = isAvailable;
270
- console.log("embedded-wallet-providers connectedInfo::", connectedInfo);
271
272
  const { connected, address = [] } = (connectedInfo == null ? void 0 : connectedInfo.evmProvider) || {};
272
273
  if (connected && address.length > 0) {
273
274
  const evmConnector = this.connectors[walletUtils.ChainTypeEnum.EVM];
@@ -286,7 +287,42 @@ var EmbeddedWallet = class _EmbeddedWallet {
286
287
  if (!config) {
287
288
  throw new Error("config is not initialized");
288
289
  }
290
+ const cacheKey = config.clientId + "-cube-oidc-token";
291
+ if (oidcToken) {
292
+ walletUtils.cache.set(cacheKey, oidcToken, false);
293
+ }
294
+ this.oidcToken = oidcToken || walletUtils.cache.get(cacheKey) || "";
295
+ console.log("embedded wallet login with oidcToken:", config, this.oidcToken);
296
+ if (!this.oidcToken) {
297
+ console.warn("oidcToken is not found");
298
+ }
289
299
  return new Promise((resolve, reject) => {
300
+ const receiveResponse = (event) => {
301
+ var _a, _b;
302
+ const { origin, data } = event;
303
+ if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
304
+ this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
305
+ if (this.themeConfig) {
306
+ setTimeout(() => {
307
+ this.request("theme-change", this.themeConfig);
308
+ }, 0);
309
+ }
310
+ const payload = (_b = data == null ? void 0 : data.data) != null ? _b : { isAvailable: false, connectedInfo: null };
311
+ resolve(payload);
312
+ if (this.loginStatusCallback) {
313
+ this == null ? void 0 : this.loginStatusCallback({ type: "login" });
314
+ }
315
+ window.removeEventListener("message", receiveResponse);
316
+ }
317
+ if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
318
+ this.close();
319
+ }
320
+ };
321
+ window.addEventListener("message", receiveResponse);
322
+ if (!this.walletCloseHandlerRegistered) {
323
+ window.addEventListener("message", this.walletCloseHandler);
324
+ this.walletCloseHandlerRegistered = true;
325
+ }
290
326
  try {
291
327
  const { walletBaseUrl, clientId, stage, logo, name } = config || {};
292
328
  if (!walletBaseUrl || !clientId) {
@@ -294,49 +330,35 @@ var EmbeddedWallet = class _EmbeddedWallet {
294
330
  }
295
331
  const EMBEDDED_WALLET_ID = clientId;
296
332
  let walletIframe = document.getElementById(EMBEDDED_WALLET_ID);
333
+ if (oidcToken && walletIframe) {
334
+ walletIframe.remove();
335
+ walletIframe = null;
336
+ }
297
337
  if (!walletIframe) {
298
338
  walletIframe = document.createElement("iframe");
299
- walletIframe.style.cssText = ` width: 0; height: 0;`;
339
+ walletIframe.style.cssText = `width: 0; height: 0; background: transparent; background-color: transparent; border: none;`;
300
340
  walletIframe.id = EMBEDDED_WALLET_ID;
341
+ walletIframe.setAttribute("allowTransparency", "true");
301
342
  document.body.appendChild(walletIframe);
302
343
  }
303
344
  const searchParams = new URLSearchParams({
304
345
  dappOrigin: window.location.origin,
305
346
  tomoStage: stage,
306
347
  tomoClientId: clientId,
307
- oidcToken: oidcToken || "",
348
+ oidcToken: this.oidcToken || "",
308
349
  logo: logo || "",
309
350
  name: name || ""
310
351
  });
311
- walletIframe.src = `${walletBaseUrl}#${searchParams.toString()}`;
352
+ const r = Math.random().toString(36).substring(2, 15);
353
+ walletIframe.src = `${walletBaseUrl}?r1=${r}#${searchParams.toString()}`;
354
+ walletIframe.setAttribute("allowTransparency", "true");
312
355
  walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
313
356
  this.walletIframe = walletIframe;
314
357
  } catch (error) {
315
358
  console.error("login error", error);
359
+ window.removeEventListener("message", receiveResponse);
316
360
  reject(error);
317
361
  }
318
- const receiveResponse = ({ origin, data }) => {
319
- var _a;
320
- if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
321
- console.log("------receiveResponse", data, origin);
322
- this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
323
- if (this.themeConfig) {
324
- setTimeout(() => {
325
- this.request("theme-change", this.themeConfig);
326
- }, 0);
327
- }
328
- resolve(data == null ? void 0 : data.data);
329
- if (this.loginStatusCallback) {
330
- this == null ? void 0 : this.loginStatusCallback({ type: "login" });
331
- }
332
- window.removeEventListener("message", receiveResponse);
333
- }
334
- if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
335
- this.close();
336
- }
337
- };
338
- window.addEventListener("message", receiveResponse);
339
- window.addEventListener("message", this.walletCloseHandler);
340
362
  });
341
363
  }
342
364
  async themeChange(theme) {
@@ -347,9 +369,11 @@ var EmbeddedWallet = class _EmbeddedWallet {
347
369
  if (!this.walletIframe) {
348
370
  return;
349
371
  }
350
- const baseCssText = "position: fixed; top:0; left:0; border: none; width: 100%; height: 100%;";
372
+ const baseCssText = "position: fixed; top: 0; left: 0; border: none; width: 100%; height: 100%; background: transparent; background-color: transparent;";
351
373
  const maskZIndex = this.maskZIndex;
352
374
  this.walletIframe.style.cssText = `${baseCssText} z-index: ${maskZIndex};`;
375
+ this.walletIframe.setAttribute("allowTransparency", "true");
376
+ this.walletIframe.style.backgroundColor = "transparent";
353
377
  }
354
378
  close() {
355
379
  if (!this.walletIframe) {
package/dist/index.d.cts CHANGED
@@ -49,12 +49,14 @@ type EmbeddedWalletConnectors = {
49
49
  declare class EmbeddedWallet {
50
50
  private static instance;
51
51
  private themeConfig;
52
+ private walletCloseHandlerRegistered;
52
53
  walletIframe: HTMLIFrameElement | null;
53
54
  walletOrigin: string;
54
55
  maskZIndex: number;
55
56
  isAvailable: boolean;
56
57
  config: EmbeddedWalletConfig | null;
57
58
  info: WalletInfo | null;
59
+ private oidcToken;
58
60
  connectors: EmbeddedWalletConnectors;
59
61
  loginByGoogle: (() => Promise<string>) | null;
60
62
  loginByX: (() => Promise<string>) | null;
package/dist/index.d.ts CHANGED
@@ -49,12 +49,14 @@ type EmbeddedWalletConnectors = {
49
49
  declare class EmbeddedWallet {
50
50
  private static instance;
51
51
  private themeConfig;
52
+ private walletCloseHandlerRegistered;
52
53
  walletIframe: HTMLIFrameElement | null;
53
54
  walletOrigin: string;
54
55
  maskZIndex: number;
55
56
  isAvailable: boolean;
56
57
  config: EmbeddedWalletConfig | null;
57
58
  info: WalletInfo | null;
59
+ private oidcToken;
58
60
  connectors: EmbeddedWalletConnectors;
59
61
  loginByGoogle: (() => Promise<string>) | null;
60
62
  loginByX: (() => Promise<string>) | null;
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { TronProvider, SolanaProvider, DogecoinProvider, BitcoinProvider, EvmProvider } from '@tomo-inc/inject-providers';
2
- import { ChainTypeEnum, ProviderProtocol, ProviderStandard } from '@tomo-inc/wallet-utils';
2
+ import { ChainTypeEnum, ProviderProtocol, ProviderStandard, cache } from '@tomo-inc/wallet-utils';
3
3
  import { OidcAuth } from '@tomo-inc/oidc-auth';
4
4
 
5
5
  var __defProp = Object.defineProperty;
@@ -162,12 +162,14 @@ var onResponse = async (requestParams) => {
162
162
  var EmbeddedWallet = class _EmbeddedWallet {
163
163
  constructor() {
164
164
  this.themeConfig = null;
165
+ this.walletCloseHandlerRegistered = false;
165
166
  this.walletIframe = null;
166
167
  this.walletOrigin = "";
167
168
  this.maskZIndex = 999;
168
169
  this.isAvailable = false;
169
170
  this.config = null;
170
171
  this.info = null;
172
+ this.oidcToken = "";
171
173
  this.connectors = {
172
174
  [ChainTypeEnum.BITCOIN]: null,
173
175
  [ChainTypeEnum.DOGECOIN]: null,
@@ -265,7 +267,6 @@ var EmbeddedWallet = class _EmbeddedWallet {
265
267
  this.loginByX = loginByX;
266
268
  const { isAvailable, message, connectedInfo } = await this.login();
267
269
  this.isAvailable = isAvailable;
268
- console.log("embedded-wallet-providers connectedInfo::", connectedInfo);
269
270
  const { connected, address = [] } = (connectedInfo == null ? void 0 : connectedInfo.evmProvider) || {};
270
271
  if (connected && address.length > 0) {
271
272
  const evmConnector = this.connectors[ChainTypeEnum.EVM];
@@ -284,7 +285,42 @@ var EmbeddedWallet = class _EmbeddedWallet {
284
285
  if (!config) {
285
286
  throw new Error("config is not initialized");
286
287
  }
288
+ const cacheKey = config.clientId + "-cube-oidc-token";
289
+ if (oidcToken) {
290
+ cache.set(cacheKey, oidcToken, false);
291
+ }
292
+ this.oidcToken = oidcToken || cache.get(cacheKey) || "";
293
+ console.log("embedded wallet login with oidcToken:", config, this.oidcToken);
294
+ if (!this.oidcToken) {
295
+ console.warn("oidcToken is not found");
296
+ }
287
297
  return new Promise((resolve, reject) => {
298
+ const receiveResponse = (event) => {
299
+ var _a, _b;
300
+ const { origin, data } = event;
301
+ if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
302
+ this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
303
+ if (this.themeConfig) {
304
+ setTimeout(() => {
305
+ this.request("theme-change", this.themeConfig);
306
+ }, 0);
307
+ }
308
+ const payload = (_b = data == null ? void 0 : data.data) != null ? _b : { isAvailable: false, connectedInfo: null };
309
+ resolve(payload);
310
+ if (this.loginStatusCallback) {
311
+ this == null ? void 0 : this.loginStatusCallback({ type: "login" });
312
+ }
313
+ window.removeEventListener("message", receiveResponse);
314
+ }
315
+ if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
316
+ this.close();
317
+ }
318
+ };
319
+ window.addEventListener("message", receiveResponse);
320
+ if (!this.walletCloseHandlerRegistered) {
321
+ window.addEventListener("message", this.walletCloseHandler);
322
+ this.walletCloseHandlerRegistered = true;
323
+ }
288
324
  try {
289
325
  const { walletBaseUrl, clientId, stage, logo, name } = config || {};
290
326
  if (!walletBaseUrl || !clientId) {
@@ -292,49 +328,35 @@ var EmbeddedWallet = class _EmbeddedWallet {
292
328
  }
293
329
  const EMBEDDED_WALLET_ID = clientId;
294
330
  let walletIframe = document.getElementById(EMBEDDED_WALLET_ID);
331
+ if (oidcToken && walletIframe) {
332
+ walletIframe.remove();
333
+ walletIframe = null;
334
+ }
295
335
  if (!walletIframe) {
296
336
  walletIframe = document.createElement("iframe");
297
- walletIframe.style.cssText = ` width: 0; height: 0;`;
337
+ walletIframe.style.cssText = `width: 0; height: 0; background: transparent; background-color: transparent; border: none;`;
298
338
  walletIframe.id = EMBEDDED_WALLET_ID;
339
+ walletIframe.setAttribute("allowTransparency", "true");
299
340
  document.body.appendChild(walletIframe);
300
341
  }
301
342
  const searchParams = new URLSearchParams({
302
343
  dappOrigin: window.location.origin,
303
344
  tomoStage: stage,
304
345
  tomoClientId: clientId,
305
- oidcToken: oidcToken || "",
346
+ oidcToken: this.oidcToken || "",
306
347
  logo: logo || "",
307
348
  name: name || ""
308
349
  });
309
- walletIframe.src = `${walletBaseUrl}#${searchParams.toString()}`;
350
+ const r = Math.random().toString(36).substring(2, 15);
351
+ walletIframe.src = `${walletBaseUrl}?r1=${r}#${searchParams.toString()}`;
352
+ walletIframe.setAttribute("allowTransparency", "true");
310
353
  walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
311
354
  this.walletIframe = walletIframe;
312
355
  } catch (error) {
313
356
  console.error("login error", error);
357
+ window.removeEventListener("message", receiveResponse);
314
358
  reject(error);
315
359
  }
316
- const receiveResponse = ({ origin, data }) => {
317
- var _a;
318
- if ((data == null ? void 0 : data.type) === "wallet-ready" && origin === this.walletOrigin) {
319
- console.log("------receiveResponse", data, origin);
320
- this.isAvailable = ((_a = data == null ? void 0 : data.data) == null ? void 0 : _a.isAvailable) || false;
321
- if (this.themeConfig) {
322
- setTimeout(() => {
323
- this.request("theme-change", this.themeConfig);
324
- }, 0);
325
- }
326
- resolve(data == null ? void 0 : data.data);
327
- if (this.loginStatusCallback) {
328
- this == null ? void 0 : this.loginStatusCallback({ type: "login" });
329
- }
330
- window.removeEventListener("message", receiveResponse);
331
- }
332
- if ((data == null ? void 0 : data.type) === "wallet-close" && origin === this.walletOrigin) {
333
- this.close();
334
- }
335
- };
336
- window.addEventListener("message", receiveResponse);
337
- window.addEventListener("message", this.walletCloseHandler);
338
360
  });
339
361
  }
340
362
  async themeChange(theme) {
@@ -345,9 +367,11 @@ var EmbeddedWallet = class _EmbeddedWallet {
345
367
  if (!this.walletIframe) {
346
368
  return;
347
369
  }
348
- const baseCssText = "position: fixed; top:0; left:0; border: none; width: 100%; height: 100%;";
370
+ const baseCssText = "position: fixed; top: 0; left: 0; border: none; width: 100%; height: 100%; background: transparent; background-color: transparent;";
349
371
  const maskZIndex = this.maskZIndex;
350
372
  this.walletIframe.style.cssText = `${baseCssText} z-index: ${maskZIndex};`;
373
+ this.walletIframe.setAttribute("allowTransparency", "true");
374
+ this.walletIframe.style.backgroundColor = "transparent";
351
375
  }
352
376
  close() {
353
377
  if (!this.walletIframe) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tomo-inc/embedded-wallet-providers",
3
- "version": "0.0.18",
3
+ "version": "0.0.21",
4
4
  "author": "tomo.inc",
5
5
  "license": "MIT",
6
6
  "private": false,
package/src/embedded-wallet.ts CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  import { onResponse, sendRequest } from "./hub";
9
9
 
10
10
  import { OidcAuth } from "@tomo-inc/oidc-auth";
11
- import { ChainTypeEnum, ProviderProtocol, ProviderStandard } from "@tomo-inc/wallet-utils";
11
+ import { ChainTypeEnum, ProviderProtocol, ProviderStandard, cache } from "@tomo-inc/wallet-utils";
12
12
  import {
13
13
  EmbeddedWalletConfig,
14
14
  EmbeddedWalletConnectors,
@@ -21,6 +21,7 @@ import {
21
21
  export class EmbeddedWallet {
22
22
  private static instance: EmbeddedWallet;
23
23
  private themeConfig: any | null = null;
24
+ private walletCloseHandlerRegistered = false;
24
25
 
25
26
  public walletIframe: HTMLIFrameElement | null = null;
26
27
  public walletOrigin: string = "";
@@ -28,6 +29,7 @@ export class EmbeddedWallet {
28
29
  public isAvailable: boolean = false;
29
30
  public config: EmbeddedWalletConfig | null = null;
30
31
  public info: WalletInfo | null = null;
32
+ private oidcToken: string = "";
31
33
  public connectors: EmbeddedWalletConnectors = {
32
34
  [ChainTypeEnum.BITCOIN]: null,
33
35
  [ChainTypeEnum.DOGECOIN]: null,
@@ -43,7 +45,7 @@ export class EmbeddedWallet {
43
45
  public loginByGoogle: (() => Promise<string>) | null = null;
44
46
  public loginByX: (() => Promise<string>) | null = null;
45
47
  public loginStatusCallback: (({ type }: { type: string }) => void) | null = null;
46
- public constructor() {}
48
+ public constructor() { }
47
49
 
48
50
  public static getInstance() {
49
51
  if (!EmbeddedWallet.instance) {
@@ -127,7 +129,7 @@ export class EmbeddedWallet {
127
129
  const { isAvailable, message, connectedInfo } = await this.login();
128
130
  this.isAvailable = isAvailable;
129
131
 
130
- console.log("embedded-wallet-providers connectedInfo::", connectedInfo);
132
+ // console.log("embedded-wallet-providers connectedInfo::", connectedInfo);
131
133
 
132
134
  const { connected, address = [] } = connectedInfo?.evmProvider || {};
133
135
  if (connected && address.length > 0) {
@@ -150,7 +152,45 @@ export class EmbeddedWallet {
150
152
  throw new Error("config is not initialized");
151
153
  }
152
154
 
155
+ // cache oidcToken for second login(2nd reason unknown)
156
+ const cacheKey = config.clientId + "-cube-oidc-token";
157
+ if (oidcToken) {
158
+ cache.set(cacheKey, oidcToken, false);
159
+ }
160
+ this.oidcToken = oidcToken || cache.get(cacheKey) || "";
161
+ console.log("embedded wallet login with oidcToken:", config, this.oidcToken);
162
+ if (!this.oidcToken) {
163
+ console.warn("oidcToken is not found");
164
+ }
165
+
153
166
  return new Promise((resolve, reject) => {
167
+ const receiveResponse = (event: MessageEvent) => {
168
+ const { origin, data } = event;
169
+ if (data?.type === "wallet-ready" && origin === this.walletOrigin) {
170
+ this.isAvailable = data?.data?.isAvailable || false;
171
+ if (this.themeConfig) {
172
+ setTimeout(() => {
173
+ this.request("theme-change", this.themeConfig);
174
+ }, 0);
175
+ }
176
+ const payload = data?.data ?? { isAvailable: false, connectedInfo: null };
177
+ resolve(payload);
178
+ if (this.loginStatusCallback) {
179
+ this?.loginStatusCallback({ type: "login" });
180
+ }
181
+ window.removeEventListener("message", receiveResponse);
182
+ }
183
+ if (data?.type === "wallet-close" && origin === this.walletOrigin) {
184
+ this.close();
185
+ }
186
+ };
187
+
188
+ window.addEventListener("message", receiveResponse);
189
+ if (!this.walletCloseHandlerRegistered) {
190
+ window.addEventListener("message", this.walletCloseHandler);
191
+ this.walletCloseHandlerRegistered = true;
192
+ }
193
+
154
194
  try {
155
195
  const { walletBaseUrl, clientId, stage, logo, name } = config || {};
156
196
  if (!walletBaseUrl || !clientId) {
@@ -160,52 +200,39 @@ export class EmbeddedWallet {
160
200
  const EMBEDDED_WALLET_ID = clientId;
161
201
 
162
202
  let walletIframe = document.getElementById(EMBEDDED_WALLET_ID) as HTMLIFrameElement | null;
203
+
204
+ if (oidcToken && walletIframe) {
205
+ walletIframe.remove();
206
+ walletIframe = null;
207
+ }
163
208
  if (!walletIframe) {
164
209
  walletIframe = document.createElement("iframe");
165
- walletIframe.style.cssText = ` width: 0; height: 0;`;
210
+ walletIframe.style.cssText = `width: 0; height: 0; background: transparent; background-color: transparent; border: none;`;
166
211
  walletIframe.id = EMBEDDED_WALLET_ID;
212
+ walletIframe.setAttribute("allowTransparency", "true");
167
213
  document.body.appendChild(walletIframe);
168
214
  }
215
+
169
216
  const searchParams = new URLSearchParams({
170
217
  dappOrigin: window.location.origin,
171
218
  tomoStage: stage,
172
219
  tomoClientId: clientId,
173
- oidcToken: oidcToken || "",
220
+ oidcToken: this.oidcToken || "",
174
221
  logo: logo || "",
175
222
  name: name || "",
176
223
  });
177
- walletIframe.src = `${walletBaseUrl}#${searchParams.toString()}`;
224
+
225
+ //prevent browser cache, load iframe --force
226
+ const r = Math.random().toString(36).substring(2, 15);
227
+ walletIframe.src = `${walletBaseUrl}?r1=${r}#${searchParams.toString()}`;
228
+ walletIframe.setAttribute("allowTransparency", "true");
178
229
  walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
179
230
  this.walletIframe = walletIframe;
180
231
  } catch (error) {
181
232
  console.error("login error", error);
233
+ window.removeEventListener("message", receiveResponse);
182
234
  reject(error);
183
235
  }
184
-
185
- const receiveResponse = ({ origin, data }: { origin: string; data: any }) => {
186
- if (data?.type === "wallet-ready" && origin === this.walletOrigin) {
187
- console.log("------receiveResponse", data, origin);
188
- this.isAvailable = data?.data?.isAvailable || false;
189
- // Apply persisted theme after wallet is ready
190
- if (this.themeConfig) {
191
- // Apply persisted theme asynchronously
192
- setTimeout(() => {
193
- this.request("theme-change", this.themeConfig);
194
- }, 0);
195
- }
196
- resolve(data?.data);
197
- if (this.loginStatusCallback) {
198
- this?.loginStatusCallback({ type: "login" });
199
- }
200
- window.removeEventListener("message", receiveResponse);
201
- }
202
- if (data?.type === "wallet-close" && origin === this.walletOrigin) {
203
- this.close();
204
- }
205
- };
206
- window.addEventListener("message", receiveResponse);
207
- // add wallet-close listener
208
- window.addEventListener("message", this.walletCloseHandler);
209
236
  });
210
237
  }
211
238
 
@@ -225,9 +252,11 @@ export class EmbeddedWallet {
225
252
  if (!this.walletIframe) {
226
253
  return;
227
254
  }
228
- const baseCssText = "position: fixed; top:0; left:0; border: none; width: 100%; height: 100%;";
255
+ const baseCssText = "position: fixed; top: 0; left: 0; border: none; width: 100%; height: 100%; background: transparent; background-color: transparent;";
229
256
  const maskZIndex = this.maskZIndex;
230
257
  this.walletIframe.style.cssText = `${baseCssText} z-index: ${maskZIndex};`;
258
+ this.walletIframe.setAttribute("allowTransparency", "true");
259
+ this.walletIframe.style.backgroundColor = "transparent";
231
260
  }
232
261
 
233
262
  public close() {