add demo logs (#25)

* add logs

* Update src/lib/StringPay.ts

Co-authored-by: akfoster <ocasta181@gmail.com>

* Update src/lib/StringPay.ts

Co-authored-by: akfoster <ocasta181@gmail.com>

* Update src/lib/StringPay.ts

Co-authored-by: akfoster <ocasta181@gmail.com>

* Update src/lib/StringPay.ts

Co-authored-by: akfoster <ocasta181@gmail.com>

* get user logged in on iframe ready

* Update src/lib/events.ts

Co-authored-by: akfoster <ocasta181@gmail.com>

* Update src/lib/events.ts

Co-authored-by: Frostbourne <85953565+frostbournesb@users.noreply.github.com>

* Update src/lib/StringPay.ts

Co-authored-by: akfoster <ocasta181@gmail.com>

* cleanup

---------

Co-authored-by: akfoster <ocasta181@gmail.com>
Co-authored-by: Frostbourne <85953565+frostbournesb@users.noreply.github.com>

Author: 3 people

src/lib/StringPay.ts

@@ -45,16 +45,15 @@ export class StringPay {
 		while (container.firstChild) {
 			container.removeChild(container.firstChild);
 		}
-
-		this.container = container;
-
+		
 		// Validate payload
 		if (!payload) return err("No payload specified");
 		if (!payload.apiKey) return err("You must have an api key in your payload");
 		if (payload.apiKey.slice(0, 4) !== "str.") return err(`Invalid API Key: ${payload.apiKey}`);
 		if (!payload.userAddress) return err("No user address found, please connect wallet")
 		if (!IFRAME_URL) return err("IFRAME_URL not specified");
 
+		// Set payload
 		this.payload = payload;
 
 		// Create iframe in dom
@@ -64,6 +63,7 @@ export class StringPay {
 		iframe.style.overflow = "none";
 		iframe.src = IFRAME_URL;
 		container.appendChild(iframe);
+		this.container = container;
 		this.frame = iframe;
 
 		// set the default gas limit
@@ -80,10 +80,8 @@ export class StringPay {
 		// since apiClient is a singleton, we can `globally` set the user address
 		services.apiClient.setWalletAddress(this.payload.userAddress);
 
-		const user = await services.authService.fetchLoggedInUser(this.payload.userAddress);
-
 		// Register events
-		const eventsService = createEventsService(this, services, user);
+		const eventsService = createEventsService(this, services);
 		eventsService.registerEvents();
 		eventsService.watchWalletChange();
 

src/lib/events.ts

@@ -5,7 +5,7 @@ import type { QuoteRequestPayload, TransactPayload, User } from './services/apiC
 const CHANNEL = "STRING_PAY"
 const IFRAME_URL = new URL(import.meta.env.VITE_IFRAME_URL).origin;
 
-export function createEventsService(stringPay: StringPay, services: Services, user: User | null) {
+export function createEventsService(stringPay: StringPay, services: Services) {
 	const { authService, quoteService } = services;
 
 	if (!stringPay.frame || !stringPay.payload) {
@@ -30,6 +30,7 @@ export function createEventsService(stringPay: StringPay, services: Services, us
 		if (!frame) {
 			err("a frame was not provided to sendEvent")
 		}
+
 		const stringEvent: StringEvent = { eventName, data, error };
 		const message = JSON.stringify({
 			channel: CHANNEL,
@@ -58,24 +59,32 @@ export function createEventsService(stringPay: StringPay, services: Services, us
 
 	const registerEvents = () => {
 		unregisterEvents();
-
+ 
 		window.addEventListener('message', _handleEvent);
 	};
 
 	const unregisterEvents = () => {
-		window.removeEventListener('message', _handleEvent, false);
+		window.removeEventListener('message', _handleEvent);
 	};
 
 	/** -------------- EVENT HANDLERS  ---------------- */
 
 	async function onIframeReady() {
+		let user = null as User | null;
+		try {
+			user = await authService.fetchLoggedInUser(stringPayload.userAddress);
+		} catch (e) {
+			console.debug("fetchLoggedInUser error", e);
+		}
+
 		const iframePayload = createIframePayload(stringPayload, user);
 		sendEvent(frame, Events.LOAD_PAYLOAD, iframePayload);
 		stringPay.isLoaded = true;
 		stringPay.onFrameLoad();
 	}
 
 	async function onIframeClose() {
+		console.debug('SDK :: onIframeClose');
 		stringPay.frame?.remove();
 		stringPay.frame = undefined;
 		stringPay.isLoaded = false;
@@ -95,7 +104,7 @@ export function createEventsService(stringPay: StringPay, services: Services, us
 			const { user } = await authService.loginOrCreateUser(stringPayload.userAddress);
 			sendEvent(frame, Events.RECEIVE_AUTHORIZE_USER, { user });
 		} catch (error: any) {
-			console.log('SDK :: onAuthorizeUser error: ', error);
+			console.debug('SDK :: onAuthorizeUser error: ', error);
 			sendEvent(frame, Events.RECEIVE_AUTHORIZE_USER, {}, error);
 		}
 	}
@@ -142,6 +151,7 @@ export function createEventsService(stringPay: StringPay, services: Services, us
 	}
 
 	const watchWalletChange = () => {
+		window.ethereum.removeAllListeners('accountsChanged');
 		window.ethereum.on('accountsChanged', (accounts: string[]) => {
 			services.apiClient.setWalletAddress(accounts[0]);
 			onIframeClose();