@etherplay/connect 0.0.8 → 0.0.10

package/src/popup.ts

@@ -0,0 +1,204 @@
+import {writable, type Readable} from 'svelte/store';
+import {createStorePromise} from './utils.js';
+
+export type Error = {
+	message: string;
+	type?: string;
+	cause?: any;
+};
+
+export type Popup = {
+	launched: boolean;
+	closed: boolean;
+	resolved: boolean;
+	error?: Error;
+};
+
+export type PopupPromise<T> = ReturnType<typeof createStorePromise<T, Popup, Readable<Popup> & {cancel: () => void}>>;
+
+export function createPopupLauncher<T>() {
+	let id = 1;
+	let currentPopup:
+		| {
+				popup: Window;
+				onMessage: (messageEvent: MessageEvent) => void;
+				rejectRecovery: (error: Error) => void;
+		  }
+		| {popup: undefined} = {popup: undefined};
+
+	function launchPopup(
+		url: string,
+		options?: {fullWindow?: boolean},
+	): Promise<T> & Readable<Popup> & {cancel: () => void} {
+		const urlObject = new URL(url);
+		const expectedOrigin = `${urlObject.protocol}//${urlObject.host}`;
+		const pathname = urlObject.pathname;
+
+		let $popup: Popup = {
+			closed: false,
+			launched: false,
+			resolved: false,
+		};
+		const _store = writable<Popup>($popup);
+		function set(state: Popup) {
+			$popup = state;
+			_store.set(state);
+		}
+
+		if (currentPopup.popup) {
+			console.log(`stop listening to message from old popup`);
+			window.removeEventListener('message', currentPopup.onMessage);
+			const tmpRejectRecovery = currentPopup.rejectRecovery;
+			let couldCloseExistingPopup = false;
+			try {
+				currentPopup.popup.close();
+				couldCloseExistingPopup = true;
+			} catch (err) {
+				console.error(err);
+			}
+			currentPopup = {popup: undefined};
+			if (couldCloseExistingPopup) {
+				tmpRejectRecovery({message: 'popup closed so new one can take over'});
+			} else {
+				tmpRejectRecovery({message: 'popup replaced'});
+			}
+		}
+
+		let _resolveRecovery: (state: T) => void;
+		let _rejectRecovery: (error: Error) => void;
+
+		function resolveRecovery(state: T) {
+			currentPopup = {popup: undefined};
+			console.log(`stop listening to message as we resolved it`);
+			window.removeEventListener('message', onMessage);
+
+			if (_resolveRecovery) {
+				set({
+					closed: true,
+					launched: true,
+					resolved: true,
+				});
+				_resolveRecovery(state);
+			}
+		}
+
+		function rejectRecovery(error: Error) {
+			currentPopup = {popup: undefined};
+			console.log(`stop listening to message as we rejected it`, error);
+			window.removeEventListener('message', onMessage);
+			if (_rejectRecovery) {
+				set({
+					closed: true,
+					launched: true,
+					resolved: true,
+					error: {
+						message: 'errored',
+						cause: error,
+					},
+				});
+				_rejectRecovery(error);
+			}
+		}
+
+		const onMessage = (messageEvent: MessageEvent) => {
+			if (messageEvent.origin === expectedOrigin) {
+				console.log(messageEvent);
+				const data = messageEvent.data;
+				if (id == data.id) {
+					if (data.error) {
+						console.error(`ERROR`, data.error);
+						rejectRecovery(data.error);
+					} else {
+						resolveRecovery(data.result);
+					}
+				} else {
+					console.log(`different id : eventId = ${data.id}, expected id = ${id}`);
+				}
+			}
+		};
+
+		// function continuouslyPingPopup(popup: Window) {
+		// 	const intervalId = setInterval(() => {
+		// 		// // console.log(`checking if popup is closed...`);
+		// 		if (currentPopup.popup !== popup) {
+		// 			console.log(`ping: new popup, we ignore closing state`);
+		// 			clearInterval(intervalId);
+		// 			return;
+		// 		}
+		// 		try {
+		// 			if ('closed' in popup && popup.closed) {
+		// 				console.log(`ping: popup is closed`);
+		// 				clearInterval(intervalId);
+		// 			}
+		// 			console.log(`ping: ${expectedOrigin}`);
+		// 			popup.postMessage({ id, type: 'ping' }, expectedOrigin);
+		// 		} catch (err) {}
+		// 	}, 300);
+		// }
+
+		function watchForPopupClosed(popup: Window) {
+			const intervalId = setInterval(() => {
+				// console.log(`checking if popup is closed...`);
+				if (currentPopup.popup !== popup) {
+					console.log(`new popup, we ignore closing state`);
+					clearInterval(intervalId);
+					return;
+				}
+				try {
+					if ('closed' in popup && popup.closed) {
+						console.log(`popup is closed`);
+						clearInterval(intervalId);
+
+						setTimeout(() => {
+							// we delay the rejection in case it conflict with an onMessage event
+							if (currentPopup.popup === popup) {
+								set({
+									closed: true,
+									launched: $popup.launched,
+									resolved: $popup.resolved,
+									error: $popup.error,
+								});
+							}
+						}, 100);
+					}
+				} catch (err) {}
+			}, 200);
+		}
+
+		const store = {
+			subscribe: _store.subscribe,
+			cancel() {
+				// TODO
+			},
+		};
+
+		const storePromise = createStorePromise<T, Popup, Readable<Popup> & {cancel: () => void}>(
+			store,
+			(resolve, reject) => {
+				_resolveRecovery = resolve;
+				_rejectRecovery = reject;
+				id++;
+				urlObject.searchParams.append('origin', window.origin);
+				urlObject.searchParams.append('id', id.toString());
+				const popupParameters = options?.fullWindow
+					? ''
+					: 'popup=1,scrollbars=0,menubar=0,location=0,resizable=0,status=0,titlebar=0,toolbar=0,width=500,height=700';
+
+				console.log({popupParameters});
+				const popup = window.open(urlObject.toString(), `${pathname}:${window.origin}`, popupParameters);
+				if (!popup) {
+					throw new Error(`could not open the login popup`);
+				}
+				currentPopup = {popup, onMessage, rejectRecovery: _rejectRecovery};
+				console.log(`listening to message... ${id}`);
+				window.addEventListener('message', currentPopup.onMessage);
+				watchForPopupClosed(popup);
+				// continuouslyPingPopup(popup);
+			},
+		);
+
+		return storePromise;
+	}
+
+	return {launchPopup};
+}

package/src/provider.ts

@@ -0,0 +1,68 @@
+import type {EIP1193WalletProvider, EIP1193WindowWalletProvider, Methods} from 'eip-1193';
+import {createCurriedJSONRPC, CurriedRPC} from 'remote-procedure-call';
+
+const signerMethods = [
+	'eth_accounts',
+	'eth_sign',
+	'eth_signTransaction',
+	'personal_sign',
+	'eth_signTypedData_v4',
+	'eth_signTypedData',
+];
+
+const connectedAccountMethods = ['eth_sendTransaction'];
+
+const walletOnlyMethods = ['eth_requestAccounts', 'wallet_switchEthereumChain', 'wallet_addEthereumChain'];
+
+export function createProvider(params: {
+	endpoint: string;
+	chainId: string;
+	prioritizeWalletProvider?: boolean;
+	requestsPerSecond?: number;
+}): CurriedRPC<Methods> & {setWalletProvider: (walletProvider: EIP1193WindowWalletProvider | undefined) => void} & {
+	chainId: string;
+} {
+	const {endpoint, chainId, prioritizeWalletProvider, requestsPerSecond} = params;
+	const jsonRPC = createCurriedJSONRPC(endpoint);
+
+	let walletProvider: EIP1193WindowWalletProvider | undefined;
+
+	function setWalletProvider(walletProvider: EIP1193WindowWalletProvider | undefined) {
+		walletProvider = walletProvider;
+	}
+
+	const provider = {
+		request(req: {method: string; params?: any[]}) {
+			if (walletProvider) {
+				const signingMethod =
+					signerMethods.includes(req.method) ||
+					connectedAccountMethods.includes(req.method) ||
+					walletOnlyMethods.includes(req.method) ||
+					req.method.indexOf('sign') != -1;
+				if (prioritizeWalletProvider || signingMethod) {
+					const currentChainIdAsHex = walletProvider.request({
+						method: 'eth_chainId',
+					});
+					const currentChainId = Number(currentChainIdAsHex).toString();
+					if (chainId !== currentChainId) {
+						if (signingMethod) {
+							return Promise.reject(
+								new Error(
+									`wallet provider is connected to a different chain, expected ${chainId} but got ${currentChainId}`,
+								),
+							);
+						} else {
+							// we fallback on jsonRPc if invalid chain and not a signing method
+							return jsonRPC.request(req);
+						}
+					}
+					return walletProvider.request(req as any);
+				}
+			}
+
+			return jsonRPC.request(req);
+		},
+	} as unknown as EIP1193WalletProvider;
+
+	return {...createCurriedJSONRPC<Methods>(provider as any, {requestsPerSecond}), setWalletProvider, chainId};
+}

package/src/utils.ts

@@ -0,0 +1,29 @@
+import {bytesToHex} from '@noble/hashes/utils';
+import type {Readable} from 'svelte/store';
+
+export function createStorePromise<U, T, V extends Readable<T>>(
+	store: V,
+	executor: (resolve: (value: U | PromiseLike<U>) => void, reject: (reason?: any) => void) => void,
+): Promise<U> & V {
+	const storePromise = new Promise<U>(executor) as Promise<U> & V;
+
+	for (const key of Object.keys(store)) {
+		if (key === 'then') {
+			throw new Error(`then field is not allowed`);
+		}
+		if (key == 'finally') {
+			throw new Error(`finally field is not allowed`);
+		}
+		(storePromise as any)[key] = (store as any)[key];
+	}
+
+	return storePromise;
+}
+
+const encoder = new TextEncoder();
+
+export function hashMessage(message: string): `0x${string}` {
+	const messageAsBytes = encoder.encode(message);
+	const msg = `0x${bytesToHex(messageAsBytes)}` as `0x${string}`;
+	return msg;
+}

package/README.md

@@ -1,58 +0,0 @@
-# create-svelte
-
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```