@etherplay/connect 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# 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
+```

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import type { AlchemyMechanism, OriginAccount } from '@etherplay/alchemy';
+import type { EIP1193WindowWalletProvider } from 'eip-1193';
+import { fromEntropyKeyToMnemonic } from '@etherplay/alchemy';
+export { fromEntropyKeyToMnemonic };
+export type PopupSettings = {
+    walletHost: string;
+    mechanism: AlchemyMechanism;
+};
+export type WalletMechanism<WalletName extends string | undefined, Address extends `0x${string}` | undefined> = {
+    type: 'wallet';
+} & (WalletName extends undefined ? {
+    name?: undefined;
+} : {
+    name: WalletName;
+}) & (Address extends undefined ? {
+    address?: undefined;
+} : {
+    address: Address;
+});
+export type Mechanism = AlchemyMechanism | WalletMechanism<string | undefined, `0x${string}` | undefined>;
+export type FullfilledMechanism = AlchemyMechanism | WalletMechanism<string, `0x${string}`>;
+export type Connection = {
+    error?: {
+        message: string;
+        cause?: any;
+    };
+    wallets: EIP6963ProviderDetail[];
+} & ({
+    step: 'Idle';
+    loading: boolean;
+} | {
+    step: 'MechanismToChoose';
+} | {
+    step: 'PopupLaunched';
+    popupClosed: boolean;
+    mechanism: AlchemyMechanism;
+} | {
+    step: 'WalletToChoose';
+    mechanism: WalletMechanism<undefined, undefined>;
+} | {
+    step: 'WaitingForWalletConnection';
+    mechanism: WalletMechanism<string, undefined>;
+} | {
+    step: 'NeedWalletSignature';
+    mechanism: WalletMechanism<string, `0x${string}`>;
+} | {
+    step: 'WaitingForSignature';
+    mechanism: WalletMechanism<string, `0x${string}`>;
+} | {
+    step: 'SignedIn';
+    mechanism: FullfilledMechanism;
+    account: OriginAccount;
+    walletAccountChanged: `0x${string}` | undefined;
+});
+interface EIP6963ProviderInfo {
+    uuid: string;
+    name: string;
+    icon: string;
+    rdns: string;
+}
+interface EIP6963ProviderDetail {
+    info: EIP6963ProviderInfo;
+    provider: EIP1193WindowWalletProvider;
+}
+export interface EIP6963AnnounceProviderEvent extends CustomEvent {
+    type: 'eip6963:announceProvider';
+    detail: EIP6963ProviderDetail;
+}
+export declare function createConnection(settings: {
+    walletHost: string;
+    autoConnect?: boolean;
+}): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Connection>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    connect: (mechanism?: Mechanism, options?: {
+        alwaysRequestSignatureOnlyAfterUserConfirmation?: boolean;
+        doNotStoreLocally?: boolean;
+    }) => Promise<void>;
+    cancel: () => void;
+    back: (step: "MechanismToChoose" | "Idle" | "WalletToChoose") => void;
+    requestSignature: () => Promise<void>;
+    connectOnCurrentWalletAccount: (address: `0x${string}`) => void;
+    disconnect: () => void;
+};

package/dist/index.js

@@ -0,0 +1,471 @@
+import { writable } from 'svelte/store';
+import { createPopupLauncher } from './popup.js';
+import { fromEntropyKeyToMnemonic, fromMnemonicToFirstAccount, fromSignatureToKey, originKeyMessage } from '@etherplay/alchemy';
+import { bytesToHex } from '@noble/hashes/utils';
+export { fromEntropyKeyToMnemonic };
+const encoder = new TextEncoder();
+const storageAccountKey = '__origin_account';
+export function createConnection(settings) {
+    let autoConnect = true;
+    if (typeof settings.autoConnect !== 'undefined') {
+        autoConnect = settings.autoConnect;
+    }
+    let $connection = { step: 'Idle', loading: true, wallets: [] };
+    const _store = writable($connection);
+    function set(connection) {
+        $connection = connection;
+        _store.set($connection);
+        return $connection;
+    }
+    function setError(error) {
+        if ($connection) {
+            set({
+                ...$connection,
+                error
+            });
+        }
+        else {
+            throw new Error(`no connection`);
+        }
+    }
+    let walletProvider;
+    let popup;
+    function fetchWallets() {
+        if (typeof window !== 'undefined') {
+            // const defaultProvider = (window as any).ethereum;
+            // console.log(defaultProvider);
+            // TODO ?
+            window.addEventListener('eip6963:announceProvider', (event) => {
+                const { detail } = event;
+                // const { info, provider } = detail;
+                // const { uuid, name, icon, rdns } = info;
+                // console.log('provider', provider);
+                // console.log(`isDefault: ${provider === defaultProvider}`);
+                // console.log('info', info);
+                const existingWallets = $connection.wallets;
+                existingWallets.push(detail);
+                set({
+                    ...$connection,
+                    wallets: existingWallets
+                });
+            });
+            window.dispatchEvent(new Event('eip6963:requestProvider'));
+        }
+    }
+    function waitForWallet(name) {
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                clearInterval(interval);
+                reject('timeout');
+            }, 1000);
+            const interval = setInterval(() => {
+                const wallet = $connection.wallets.find((v) => v.info.name == name);
+                if (wallet) {
+                    clearTimeout(timeout);
+                    clearInterval(interval);
+                    resolve(wallet);
+                }
+            }, 100);
+        });
+    }
+    if (autoConnect) {
+        if (typeof window !== 'undefined') {
+            // set({step: 'Idle', loading: true, wallets: $connection.wallets});
+            try {
+                const existingAccount = getOriginAccount();
+                if (existingAccount) {
+                    if (existingAccount.signer) {
+                        if (existingAccount.mechanismUsed.type == 'wallet') {
+                            const walletMechanism = existingAccount.mechanismUsed;
+                            waitForWallet(walletMechanism.name)
+                                .then((walletDetails) => {
+                                walletProvider = walletDetails.provider;
+                                set({
+                                    step: 'SignedIn',
+                                    account: existingAccount,
+                                    mechanism: existingAccount.mechanismUsed,
+                                    wallets: $connection.wallets,
+                                    walletAccountChanged: undefined
+                                });
+                                walletProvider.request({ method: 'eth_accounts' }).then(onAccountChanged);
+                                watchForAccountChange(walletProvider);
+                            })
+                                .catch((err) => {
+                                set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+                            });
+                        }
+                        else {
+                            set({
+                                step: 'SignedIn',
+                                account: existingAccount,
+                                mechanism: existingAccount.mechanismUsed,
+                                wallets: $connection.wallets,
+                                walletAccountChanged: undefined
+                            });
+                        }
+                    }
+                    else {
+                        set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+                    }
+                }
+                else {
+                    set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+                }
+            }
+            catch {
+                set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+            }
+        }
+    }
+    else {
+        set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+    }
+    fetchWallets();
+    function getOriginAccount() {
+        const fromStorage = localStorage.getItem(storageAccountKey);
+        if (fromStorage) {
+            return JSON.parse(fromStorage);
+        }
+    }
+    function saveOriginAccount(account) {
+        const accountSTR = JSON.stringify(account);
+        sessionStorage.setItem(storageAccountKey, accountSTR);
+        localStorage.setItem(storageAccountKey, accountSTR);
+    }
+    function deleteOriginAccount() {
+        sessionStorage.removeItem(storageAccountKey);
+        localStorage.removeItem(storageAccountKey);
+    }
+    async function requestSignature() {
+        if ($connection.step !== 'NeedWalletSignature') {
+            throw new Error(`invalid step: ${$connection.step}, needs to be NeedWalletSignature`);
+        }
+        const provider = walletProvider;
+        if (!provider) {
+            // TODO error ?
+            throw new Error(`no wallet provided initialised`);
+        }
+        const message = originKeyMessage(origin);
+        const messageAsBytes = encoder.encode(message);
+        const msg = `0x${bytesToHex(messageAsBytes)}`;
+        set({
+            ...$connection,
+            step: 'WaitingForSignature'
+        });
+        const signature = await provider.request({
+            method: 'personal_sign',
+            params: [msg, $connection.mechanism.address]
+        });
+        const originKey = fromSignatureToKey(signature);
+        const originMnemonic = fromEntropyKeyToMnemonic(originKey);
+        const originAccount = fromMnemonicToFirstAccount(originMnemonic);
+        const account = {
+            address: $connection.mechanism.address,
+            signer: {
+                origin,
+                address: originAccount.address,
+                privateKey: originAccount.privateKey,
+                mnemomicKey: originKey
+            },
+            metadata: {},
+            mechanismUsed: $connection.mechanism
+        };
+        set({
+            ...$connection,
+            step: 'SignedIn',
+            mechanism: {
+                type: 'wallet',
+                name: $connection.mechanism.name,
+                address: $connection.mechanism.address
+            },
+            account,
+            walletAccountChanged: undefined // TODO check account list
+        });
+        if (remember) {
+            saveOriginAccount(account);
+        }
+    }
+    function connectOnCurrentWalletAccount(address) {
+        if ($connection.step === 'SignedIn' && $connection.mechanism.type === 'wallet') {
+            connect({
+                type: 'wallet',
+                address,
+                name: $connection.mechanism.name
+            });
+        }
+        else {
+            throw new Error(`need to be using a mechanism of type wallet and be SignedIN`);
+        }
+    }
+    function onAccountChanged(accounts) {
+        if ($connection.step === 'SignedIn' && $connection.mechanism.type === 'wallet') {
+            // TODO if auto-connect and saved-signature ?
+            // connect(
+            // 	{
+            // 		type: 'wallet',
+            // 		address: accounts[0],
+            // 		name: $connection.mechanism.name
+            // 	},
+            // 	{ alwaysRequestSignatureOnlyAfterUserConfirmation: true }
+            // );
+            if (accounts.length > 0 &&
+                accounts[0].toLowerCase() != $connection.account.address.toLowerCase()) {
+                set({
+                    ...$connection,
+                    walletAccountChanged: accounts[0]
+                });
+            }
+            else if ($connection.walletAccountChanged) {
+                set({
+                    ...$connection,
+                    walletAccountChanged: undefined
+                });
+            }
+        }
+        // if (accounts[0] !== $connection)
+    }
+    function watchForAccountChange(walletProvider) {
+        walletProvider.on('accountsChanged', onAccountChanged);
+    }
+    function stopatchingForAccountChange(walletProvider) {
+        walletProvider.removeListener('accountsChanged', onAccountChanged);
+    }
+    let remember = false;
+    async function connect(mechanism, options) {
+        remember = !(options?.doNotStoreLocally || false);
+        if (mechanism) {
+            if (mechanism.type === 'wallet') {
+                const walletName = mechanism.name;
+                if (walletName) {
+                    const wallet = $connection.wallets.find((v) => v.info.name == walletName || v.info.uuid == walletName);
+                    if (wallet) {
+                        if (walletProvider) {
+                            stopatchingForAccountChange(walletProvider);
+                        }
+                        walletProvider = wallet.provider;
+                        const mechanism = {
+                            type: 'wallet',
+                            name: walletName
+                        };
+                        set({
+                            step: 'WaitingForWalletConnection', // TODO FetchingAccounts
+                            mechanism,
+                            wallets: $connection.wallets
+                        });
+                        const provider = wallet.provider;
+                        let accounts = await provider.request({ method: 'eth_accounts' });
+                        if (accounts.length === 0) {
+                            set({
+                                step: 'WaitingForWalletConnection',
+                                mechanism,
+                                wallets: $connection.wallets
+                            });
+                            accounts = await provider.request({ method: 'eth_requestAccounts' });
+                            if (accounts.length > 0) {
+                                set({
+                                    step: 'NeedWalletSignature',
+                                    mechanism: {
+                                        ...mechanism,
+                                        address: accounts[0]
+                                    },
+                                    wallets: $connection.wallets
+                                });
+                                watchForAccountChange(walletProvider);
+                            }
+                            else {
+                                set({
+                                    step: 'MechanismToChoose',
+                                    wallets: $connection.wallets,
+                                    error: { message: 'could not get any accounts' }
+                                });
+                            }
+                        }
+                        else {
+                            if (options?.alwaysRequestSignatureOnlyAfterUserConfirmation) {
+                                set({
+                                    step: 'NeedWalletSignature',
+                                    mechanism: {
+                                        ...mechanism,
+                                        address: accounts[0]
+                                    },
+                                    wallets: $connection.wallets
+                                });
+                                watchForAccountChange(walletProvider);
+                            }
+                            else {
+                                watchForAccountChange(walletProvider);
+                                set({
+                                    step: 'NeedWalletSignature',
+                                    mechanism: {
+                                        ...mechanism,
+                                        address: accounts[0]
+                                    },
+                                    wallets: $connection.wallets
+                                });
+                                await requestSignature();
+                            }
+                        }
+                    }
+                    else {
+                        console.error(`failed to get wallet ${walletName}`, $connection.wallets);
+                        set({
+                            step: 'MechanismToChoose',
+                            wallets: $connection.wallets,
+                            error: { message: `failed to get wallet ${walletName}` }
+                        });
+                    }
+                }
+                else {
+                    // TODO can also be done automatically before hand
+                    // set({
+                    // 	step: 'FetchingWallets',
+                    // 	mechanism: { type: 'wallet', wallet: undefined }
+                    // });
+                    set({
+                        step: 'WalletToChoose',
+                        mechanism: { type: 'wallet' },
+                        wallets: $connection.wallets
+                    });
+                }
+            }
+            else {
+                popup = connectViaPopup({
+                    mechanism,
+                    walletHost: settings.walletHost
+                });
+                set({
+                    step: 'PopupLaunched',
+                    popupClosed: false,
+                    mechanism,
+                    wallets: $connection.wallets
+                });
+                const unsubscribe = popup.subscribe(($popup) => {
+                    if ($connection?.step === 'PopupLaunched') {
+                        if ($popup.closed) {
+                            set({
+                                ...$connection,
+                                popupClosed: true
+                            });
+                        }
+                    }
+                });
+                try {
+                    const result = await popup;
+                    console.log({ result });
+                    set({
+                        step: 'SignedIn',
+                        account: result,
+                        mechanism,
+                        wallets: $connection.wallets,
+                        walletAccountChanged: undefined
+                    });
+                    if (remember) {
+                        saveOriginAccount(result);
+                    }
+                }
+                catch (err) {
+                    console.log({ error: err });
+                    set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+                }
+                finally {
+                    unsubscribe();
+                }
+            }
+        }
+        else {
+            set({
+                step: 'MechanismToChoose',
+                wallets: $connection.wallets
+            });
+        }
+    }
+    function disconnect() {
+        deleteOriginAccount();
+        if (walletProvider) {
+            stopatchingForAccountChange(walletProvider);
+        }
+        walletProvider = undefined;
+        set({
+            step: 'Idle',
+            loading: false,
+            wallets: $connection.wallets
+        });
+    }
+    function back(step) {
+        popup?.cancel();
+        if (step === 'MechanismToChoose') {
+            set({ step, wallets: $connection.wallets });
+        }
+        else if (step === 'Idle') {
+            set({ step, loading: false, wallets: $connection.wallets });
+        }
+        else if (step === 'WalletToChoose') {
+            set({ step, wallets: $connection.wallets, mechanism: { type: 'wallet' } });
+        }
+    }
+    const popupLauncher = createPopupLauncher();
+    function connectViaPopup(settings) {
+        let popupURL = new URL(`${settings.walletHost}/login/`);
+        let fullWindow = false;
+        if (settings.mechanism.type === 'mnemonic') {
+            popupURL.searchParams.append('type', 'mnemonic');
+        }
+        else if (settings.mechanism.type === 'email') {
+            popupURL.searchParams.append('type', 'email');
+            if (settings.mechanism.email) {
+                popupURL.searchParams.append('email', encodeURIComponent(settings.mechanism.email));
+            }
+            if (settings.mechanism.mode) {
+                popupURL.searchParams.append('emailMode', settings.mechanism.mode);
+            }
+        }
+        else if (settings.mechanism.type === 'oauth') {
+            popupURL.searchParams.append('type', 'oauth');
+            if (settings.mechanism.provider.id === 'auth0') {
+                popupURL.searchParams.append('oauth-provider', settings.mechanism.provider.id);
+                popupURL.searchParams.append('oauth-connection', settings.mechanism.provider.connection);
+            }
+            else {
+                popupURL.searchParams.append('oauth-provider', settings.mechanism.provider.id);
+            }
+            if (!settings.mechanism.usePopup) {
+                popupURL.searchParams.append('oauth-redirection', 'true');
+            }
+        }
+        else {
+            throw new Error(`mechanism ${settings.mechanism.type} not supported`);
+        }
+        // if (settings.extraParams) {
+        // 	for (const [key, value] of Object.entries(settings.extraParams)) {
+        // 		popupURL.searchParams.append(`${key}`, value);
+        // 	}
+        // }
+        const currentURL = new URL(location.href);
+        const entriesToAdd = [];
+        for (const entry of currentURL.searchParams.entries()) {
+            if (entry[0].startsWith('renraku_')) {
+                entriesToAdd.push([entry[0].slice(`renraku_`.length), entry[1]]);
+            }
+        }
+        if (currentURL.searchParams.has('_d_eruda')) {
+            entriesToAdd.push(['_d_eruda', currentURL.searchParams.get('_d_eruda') || '']);
+        }
+        for (const entryToAdd of entriesToAdd) {
+            popupURL.searchParams.append(entryToAdd[0], entryToAdd[1]);
+        }
+        return popupLauncher.launchPopup(popupURL.toString(), { fullWindow });
+    }
+    function cancel() {
+        popup?.cancel();
+        set({ step: 'Idle', loading: false, wallets: $connection.wallets });
+    }
+    return {
+        subscribe: _store.subscribe,
+        connect,
+        cancel,
+        back,
+        requestSignature,
+        connectOnCurrentWalletAccount,
+        disconnect
+    };
+}

package/dist/popup.d.ts

@@ -0,0 +1,23 @@
+import { 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 declare function createPopupLauncher<T>(): {
+    launchPopup: (url: string, options?: {
+        fullWindow?: boolean;
+    }) => Promise<T> & Readable<Popup> & {
+        cancel: () => void;
+    };
+};

package/dist/popup.js

@@ -0,0 +1,165 @@
+import { writable } from 'svelte/store';
+import { createStorePromise } from './utils.js';
+export function createPopupLauncher() {
+    let id = 1;
+    let currentPopup = { popup: undefined };
+    function launchPopup(url, options) {
+        const urlObject = new URL(url);
+        const expectedOrigin = `${urlObject.protocol}//${urlObject.host}`;
+        const pathname = urlObject.pathname;
+        let $popup = {
+            closed: false,
+            launched: false,
+            resolved: false
+        };
+        const _store = writable($popup);
+        function set(state) {
+            $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;
+        let _rejectRecovery;
+        function resolveRecovery(state) {
+            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) {
+            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) => {
+            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) {
+            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(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/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Readable } from 'svelte/store';
+export declare 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;

package/dist/utils.js

@@ -0,0 +1,13 @@
+export function createStorePromise(store, executor) {
+    const storePromise = new Promise(executor);
+    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[key] = store[key];
+    }
+    return storePromise;
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@etherplay/connect",
+  "version": "0.0.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.4",
+    "eip-1193": "^0.6.1",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vitest": "^3.0.0"
+  },
+  "dependencies": {
+    "@account-kit/signer": "^4.13.0",
+    "@noble/curves": "^1.8.1",
+    "@noble/hashes": "^1.7.1",
+    "@scure/bip32": "^1.6.2",
+    "@scure/bip39": "^1.5.4",
+    "zustand": "^5.0.3",
+    "@etherplay/alchemy": "0.0.1"
+  },
+  "scripts": {
+    "dev": "vite dev --host --port 60002",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "test:e2e": "playwright test"
+  }
+}