From 61941ab98191573847fa12916573c8bccf5b5dde Mon Sep 17 00:00:00 2001 From: Ladislav Martincik Date: Fri, 2 Jun 2023 14:04:17 +0200 Subject: [PATCH 1/2] Add more debugging and fix event listner --- src/onramp/initOnRamp.ts | 1 + src/utils/CBPayInstance.ts | 11 ++++++++--- src/utils/CoinbasePixel.ts | 8 ++++++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/onramp/initOnRamp.ts b/src/onramp/initOnRamp.ts index 9dd52a7..18bd2ab 100644 --- a/src/onramp/initOnRamp.ts +++ b/src/onramp/initOnRamp.ts @@ -31,6 +31,7 @@ export const initOnRamp = ( } }, onFallbackOpen: () => { + console.log("Falling back to onramp URL: ", options, widgetParameters); const url = generateOnRampURL({ appId: options.appId, host: options.host, diff --git a/src/utils/CBPayInstance.ts b/src/utils/CBPayInstance.ts index 15ec3b5..6a1b517 100644 --- a/src/utils/CBPayInstance.ts +++ b/src/utils/CBPayInstance.ts @@ -28,8 +28,10 @@ export interface CBPayInstanceType { export class CBPayInstance implements CBPayInstanceType { private pixel: CoinbasePixel; private options: InternalExperienceOptions; + private targetElement: HTMLElement | null; constructor(options: CBPayInstanceConstructorArguments) { + this.targetElement = null; this.options = options; this.pixel = new CoinbasePixel({ ...options, @@ -40,9 +42,9 @@ export class CBPayInstance implements CBPayInstanceType { }); if (options.target) { - const targetElement = document.querySelector(options.target); - if (targetElement) { - targetElement.addEventListener('click', this.open); + this.targetElement = document.querySelector(options.target); + if (this.targetElement) { + this.targetElement.addEventListener('click', this.open); } } } @@ -84,6 +86,9 @@ export class CBPayInstance implements CBPayInstanceType { }; public destroy = (): void => { + if (this.targetElement) { + this.targetElement.removeEventListener('click', this.open); + } this.pixel.destroy(); }; } diff --git a/src/utils/CoinbasePixel.ts b/src/utils/CoinbasePixel.ts index 632b0e6..983cb94 100644 --- a/src/utils/CoinbasePixel.ts +++ b/src/utils/CoinbasePixel.ts @@ -8,7 +8,7 @@ import { EventMetadata } from 'types/events'; const PIXEL_PATH = '/embed'; /** Default time to wait before setting loading to "failed" state */ -const DEFAULT_MAX_LOAD_TIMEOUT = 5000; +const DEFAULT_MAX_LOAD_TIMEOUT = 50000; export const PIXEL_ID = 'coinbase-sdk-connect'; const PopupSizes: Record<'signin' | 'widget', { width: number; height: number }> = { @@ -94,7 +94,8 @@ export class CoinbasePixel { // Setup a timeout for errors that might stop the window from loading i.e. CSP setTimeout(() => { if (this.state !== 'ready') { - this.onFailedToLoad(); + console.log("Timeout, would fallback.") + //this.onFailedToLoad(); } }, DEFAULT_MAX_LOAD_TIMEOUT); } @@ -115,6 +116,7 @@ export class CoinbasePixel { // Pixel failed to load or ran into a critical error, run fallback if provided. if (this.state === 'failed') { + console.log("Embed failed."); this.onFallbackOpen?.(); return; } @@ -380,12 +382,14 @@ function createPixel({ host, appId }: { host: string; appId: string }) { const url = new URL(`${host}${PIXEL_PATH}`); url.searchParams.append('appId', appId); + console.log("Pixel URL: ", url.toString()); pixel.src = url.toString(); return pixel; } function openWindow(url: string, experience: Experience) { + console.log("Trying to open window in new tab."); return window.open( url, 'Coinbase', From 717efcbf3bd3e35bda8e4ac25e43e682a6ae8c6b Mon Sep 17 00:00:00 2001 From: Ladislav Martincik Date: Fri, 2 Jun 2023 14:49:37 +0200 Subject: [PATCH 2/2] Remove unneded changes --- src/onramp/initOnRamp.ts | 1 - src/utils/CoinbasePixel.ts | 8 ++------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/onramp/initOnRamp.ts b/src/onramp/initOnRamp.ts index 18bd2ab..9dd52a7 100644 --- a/src/onramp/initOnRamp.ts +++ b/src/onramp/initOnRamp.ts @@ -31,7 +31,6 @@ export const initOnRamp = ( } }, onFallbackOpen: () => { - console.log("Falling back to onramp URL: ", options, widgetParameters); const url = generateOnRampURL({ appId: options.appId, host: options.host, diff --git a/src/utils/CoinbasePixel.ts b/src/utils/CoinbasePixel.ts index 983cb94..632b0e6 100644 --- a/src/utils/CoinbasePixel.ts +++ b/src/utils/CoinbasePixel.ts @@ -8,7 +8,7 @@ import { EventMetadata } from 'types/events'; const PIXEL_PATH = '/embed'; /** Default time to wait before setting loading to "failed" state */ -const DEFAULT_MAX_LOAD_TIMEOUT = 50000; +const DEFAULT_MAX_LOAD_TIMEOUT = 5000; export const PIXEL_ID = 'coinbase-sdk-connect'; const PopupSizes: Record<'signin' | 'widget', { width: number; height: number }> = { @@ -94,8 +94,7 @@ export class CoinbasePixel { // Setup a timeout for errors that might stop the window from loading i.e. CSP setTimeout(() => { if (this.state !== 'ready') { - console.log("Timeout, would fallback.") - //this.onFailedToLoad(); + this.onFailedToLoad(); } }, DEFAULT_MAX_LOAD_TIMEOUT); } @@ -116,7 +115,6 @@ export class CoinbasePixel { // Pixel failed to load or ran into a critical error, run fallback if provided. if (this.state === 'failed') { - console.log("Embed failed."); this.onFallbackOpen?.(); return; } @@ -382,14 +380,12 @@ function createPixel({ host, appId }: { host: string; appId: string }) { const url = new URL(`${host}${PIXEL_PATH}`); url.searchParams.append('appId', appId); - console.log("Pixel URL: ", url.toString()); pixel.src = url.toString(); return pixel; } function openWindow(url: string, experience: Experience) { - console.log("Trying to open window in new tab."); return window.open( url, 'Coinbase',