From ed4d08e11b01012ba1512f23a9cc194e9dda9d63 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 10:49:49 +0100
Subject: [PATCH 1/6] export connectModal as function

---
 packages/ui/src/components/index.ts | 18 ++++++++++++++++++
 packages/ui/src/index.ts            |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index d2ad327..c3a24f1 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,5 +1,23 @@
 import ConnectModal from './ConnectModal/ConnectModal.svelte'
 import AccountModal from './AccountModal.svelte'
 import FractlModal from './FractlModal.svelte'
+import type { Config } from '@fractl-ui/types'
 
+export const create = async <C extends object>(config: Promise<Config<C>>) => {
+	let _config = await Promise.resolve(config)
+
+	return () => {
+		const getTarget = () =>  document.body
+		
+		return new Promise((resolve, reject) => {
+			new ConnectModal({
+				target: getTarget(),
+				props: {
+					config: _config,
+					state: _config.state
+				}
+			})
+		})
+	}
+}
 export { ConnectModal, AccountModal, FractlModal }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f6913c0..10e92dc 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,3 +1,3 @@
-export { FractlModal } from './components/index.js'
+export { create } from './components/index.js'
 // export {open connect modal}
 // export T&C text prop

From 301f618e53e4b7578b315d13c3cd9dc6f1c9a22a Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 10:51:19 +0100
Subject: [PATCH 2/6] update example

---
 examples/svelte/src/App.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index 1c2a6d0..3ac0f8e 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -2,7 +2,7 @@
 <script lang="ts">
 	// import config from '../../../../packages/ui.old/src/wagmiConfig'
 	import { addEvmConnection } from '@fractl-ui/evm'
-	import 'fractl-ui'
+	import { create } from 'fractl-ui'
 	import wagmiConfig from './lib/wagmiConfig'
 	import { onMount } from 'svelte'
 	import { reconnect } from '@wagmi/core'
@@ -16,10 +16,12 @@
 	// const config = addStarknetConnection()
 	const config = addEvmConnection($wagmiConfig)
 	// const { status } = config.state
+	const connect = async () =>
+		create(addEvmConnection($wagmiConfig)).then((connect) => connect())
 </script>
 
 <header>
-	<fractl-modal {config} btnClass="button-85" />
+	<button on:click={connect}>Connect</button>
 </header>
 <main>
 	<div class="hero">
@@ -58,7 +60,6 @@
 		</svg>
 	</a>
 </footer>
-
 <style>
 	header {
 		display: flex;

From 4fc54a6ef42ae037e21c5dd053a80716920cd92d Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 11:14:51 +0100
Subject: [PATCH 3/6] Remove custom element workarounds

Moves style imports to script
---
 packages/ui/src/components/AccountModal.svelte        |  4 +---
 packages/ui/src/components/Common/Modal.svelte        |  2 --
 .../src/components/ConnectModal/ConnectModal.svelte   |  5 +----
 packages/ui/src/components/FractlModal.svelte         | 11 -----------
 packages/ui/src/components/zorb/Zorb.svelte           |  5 +----
 5 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index a727435..7c02917 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../styles/index.css'
 	import { truncate } from '../utils.js'
 	import type {
 		AccountData,
@@ -97,6 +98,3 @@
 	</Modal>
 {/if}
 
-<style lang="postcss">
-	@import url('../styles/index.css');
-</style>
diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte
index 212b59c..bbdd9f8 100644
--- a/packages/ui/src/components/Common/Modal.svelte
+++ b/packages/ui/src/components/Common/Modal.svelte
@@ -103,8 +103,6 @@
 {/if}
 
 <style>
-	@import url('../../styles/index.css');
-
 	dialog:not([open]) {
 		pointer-events: none;
 		opacity: 0;
diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index d87f9ab..19fd20e 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../../styles/index.css'
 
 	import { onDestroy } from 'svelte'
 	import copyEN from '../../copy/copy.EN.js'
@@ -145,11 +146,7 @@
 		{/if}
 	</div>
 </Modal>
-
-<!-- </Modal> -->
-
 <style>
-	@import url('../../styles/index.css');
 
 	.hide {
 		display: none;
diff --git a/packages/ui/src/components/FractlModal.svelte b/packages/ui/src/components/FractlModal.svelte
index 3d0c1f8..89cce5a 100644
--- a/packages/ui/src/components/FractlModal.svelte
+++ b/packages/ui/src/components/FractlModal.svelte
@@ -1,14 +1,3 @@
-<svelte:options
-	customElement={{
-		tag: 'fractl-modal',
-		shadow: 'none',
-		props: {
-			config: { reflect: false, type: 'Object', attribute: 'config' }
-		}
-	}}
-	accessors={true}
-/>
-
 <script lang="ts">
 	import { ConnectModal, AccountModal } from './index.js'
 	import type { Config } from '@fractl-ui/types'
diff --git a/packages/ui/src/components/zorb/Zorb.svelte b/packages/ui/src/components/zorb/Zorb.svelte
index df799ba..4540082 100644
--- a/packages/ui/src/components/zorb/Zorb.svelte
+++ b/packages/ui/src/components/zorb/Zorb.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../../styles/index.css'
 	import { gradientForAddress } from './lib.js'
 	export let size = '100%'
 	export let address = '0x0000000000000000000000000000000000000000'
@@ -36,7 +37,3 @@
 		<ellipse fill="url(#gzr)" cx="45" cy="45" rx="45" ry="45"></ellipse>
 	</g>
 </svg>
-
-<style lang="postcss">
-	@import url('../../styles/index.css');
-</style>

From be533b8e2f0873958cd05770f0baffda48804a3d Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 12:45:50 +0100
Subject: [PATCH 4/6] return state after connection attempt

---
 examples/svelte/src/App.svelte                | 19 ++++++++--------
 .../ConnectModal/ConnectModal.svelte          | 22 +++++++++++--------
 packages/ui/src/components/index.ts           | 17 ++++++++++----
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index 3ac0f8e..8783c16 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -8,20 +8,23 @@
 	import { reconnect } from '@wagmi/core'
 	import FractlSvg from './assets/fractl.svg'
 	import './app.css'
-	// import { addStarknetConnection } frLom '@fractl-ui/starknet'
+	import { addStarknetConnection } from '@fractl-ui/starknet'
 
 	onMount(async () => {
 		reconnect($wagmiConfig, { connectors: $wagmiConfig.connectors })
 	})
-	// const config = addStarknetConnection()
-	const config = addEvmConnection($wagmiConfig)
-	// const { status } = config.state
-	const connect = async () =>
-		create(addEvmConnection($wagmiConfig)).then((connect) => connect())
+	const stark = addStarknetConnection()
+	const evm = addEvmConnection($wagmiConfig)
+
+	const connect = async (conf) =>  create(conf).then((connect) => connect()
+		.then(res => console.log(res))
+		.catch(err => console.error(err))
+		)
 </script>
 
 <header>
-	<button on:click={connect}>Connect</button>
+	<button on:click={()=>connect(evm)}>Connect EVM</button>
+	<button on:click={()=>connect(stark)}>Connect Stark</button>
 </header>
 <main>
 	<div class="hero">
@@ -36,8 +39,6 @@
 		</p>
 	</div>
 
-	<fractl-modal {config} btnClass="button-85" />
-
 	<!-- 
 	{#if connected}
 		<AccountDialog config={$config}></AccountDialog>
diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index 19fd20e..91dfaf6 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
 	import '../../styles/index.css'
-
-	import { onDestroy } from 'svelte'
+	import { onDestroy, onMount } from 'svelte'
 	import copyEN from '../../copy/copy.EN.js'
 	import Modal from '../Common/Modal.svelte'
 	import Scannable from './Scannable.svelte'
-	import type { ConfigDisconnected, Connector } from '@fractl-ui/types'
+	import type { ConfigConnected, ConfigDisconnected, Connector, StateConnected } from '@fractl-ui/types'
 
 	export let config: ConfigDisconnected
 	export let state
 	export let btnClass = ''
 	export let triggerText = 'Connect Wallet'
+	export let onConnect: (status: StateConnected<Connector>) => void
+	export let onConnectFail: (error: Error) => void
 
 	let open: () => void
 	let close: () => void
@@ -20,8 +21,9 @@
 	// export let accountStatus: string
 	// export let chainStatus
 	// export let showBalance: string
+	onMount(()=> open())
 	onDestroy(()=>{close()})
-	$: if (state.status === 'connected') close()
+	$: if ($state.status === 'connected') close()
 
 	let activeRequest: Connector | null = null //config.connectors[3]
 	$: title = !activeRequest ? 'Connect Wallet' : activeRequest.name
@@ -30,14 +32,16 @@
 		await config.reconnect([connector])
 
 		try {
-			console.log('config.state: ', state.status)
+			// console.debug('config.state: ', $state.status)
 			activeRequest = connector
 			await config.connect(connector)
+			onConnect($state)
 		} catch (error) {
-			console.error('caught: ', error)
+			onConnectFail(error)
+			// console.error('caught: ', error)
 		}
 
-		console.log('config.state: ', state.status)
+		// console.debug('config.state: ', $state.status)
 	}
 	const clearRequest = () => (activeRequest = null)
 </script>
@@ -91,7 +95,7 @@
 				<!-- <Injected connector={activeRequest}></Injected> -->
 				<div class="fcl__graphic-primary">
 					<!-- prettier-ignore -->
-					<svg class:hide={state.status !== 'connecting' && state.status !== 'reconnecting'} class="spin" width="108" height="108" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" > 
+					<svg class:hide={$state.status !== 'connecting' && $state.status !== 'reconnecting'} class="spin" width="108" height="108" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" > 
 						<path d="M98 50C98 23.4903 76.5097 2 50 2" stroke="url(#a)" stroke-width="4" stroke-linecap="round" /> 
 						<defs> 
 							<radialGradient id="radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100 50) rotate(-90) scale(47 47)" > <stop stop-color="currentColor" /> <stop offset="1" stop-color="currentColor" stop-opacity="0" /> </radialGradient> 
@@ -105,7 +109,7 @@
 					/>
 				</div>
 
-				{#if state.status === 'connecting' || state.status === 'reconnecting'}
+				{#if $state.status === 'connecting' || $state.status === 'reconnecting'}
 					<h3 class="fcl__text-primary">Requesting Connection</h3>
 					<p class="fcl__subhead">
 						{copyEN(activeRequest.name).connecting[activeRequest.type]}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index c3a24f1..a2b0210 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,20 +1,29 @@
 import ConnectModal from './ConnectModal/ConnectModal.svelte'
 import AccountModal from './AccountModal.svelte'
 import FractlModal from './FractlModal.svelte'
-import type { Config } from '@fractl-ui/types'
+import type { Config, Connector, StateConnected } from '@fractl-ui/types'
 
-export const create = async <C extends object>(config: Promise<Config<C>>) => {
+export const create = async <C extends Connector>(config: Promise<Config<C>>) => {
 	let _config = await Promise.resolve(config)
 
+	//TODO: return singleton when modal is dismissed without completing connection
 	return () => {
 		const getTarget = () =>  document.body
 		
 		return new Promise((resolve, reject) => {
-			new ConnectModal({
+			const modal = new ConnectModal({
 				target: getTarget(),
 				props: {
 					config: _config,
-					state: _config.state
+					state: _config.state,
+					onConnect: (state: StateConnected<C>) => {
+						resolve(state)
+						modal.$destroy()
+					},
+					onConnectFail: (error) => {
+						reject(error)
+						modal.$destroy()
+					}
 				}
 			})
 		})

From 92b8750c8373004081df797f6b1de7f3f66b3553 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 15:26:21 +0100
Subject: [PATCH 5/6] enable svelte imports

alows use of connect modal from compiled svelte or direclty importing components
---
 examples/svelte/src/App.svelte                  | 17 ++++++++++++-----
 packages/ui/src/components/AccountModal.svelte  | 17 +++++++++--------
 .../components/ConnectModal/ConnectModal.svelte |  7 ++++---
 packages/ui/src/components/FractlModal.svelte   |  7 ++++---
 packages/ui/src/index.ts                        |  6 +++++-
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index 8783c16..a8f3d98 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -1,8 +1,6 @@
-<!-- <svelte:options tag="my-app" /> -->
 <script lang="ts">
-	// import config from '../../../../packages/ui.old/src/wagmiConfig'
 	import { addEvmConnection } from '@fractl-ui/evm'
-	import { create } from 'fractl-ui'
+	import { create, AccountModal } from 'fractl-ui'
 	import wagmiConfig from './lib/wagmiConfig'
 	import { onMount } from 'svelte'
 	import { reconnect } from '@wagmi/core'
@@ -15,13 +13,19 @@
 	})
 	const stark = addStarknetConnection()
 	const evm = addEvmConnection($wagmiConfig)
+	let account
 
 	const connect = async (conf) =>  create(conf).then((connect) => connect()
-		.then(res => console.log(res))
+		.then(res => {
+			account = {
+				config: res,
+				accountData: res.accountData
+			}
+			console.log(res)
+		})
 		.catch(err => console.error(err))
 		)
 </script>
-
 <header>
 	<button on:click={()=>connect(evm)}>Connect EVM</button>
 	<button on:click={()=>connect(stark)}>Connect Stark</button>
@@ -38,6 +42,9 @@
 			</span>
 		</p>
 	</div>
+	{#if account}
+  	<AccountModal {...account}/>
+  {/if}
 
 	<!-- 
 	{#if connected}
diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index 7c02917..2869c3c 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -9,16 +9,17 @@
 	import Zorb from './zorb/Zorb.svelte'
 	import Modal from './Common/Modal.svelte'
 	import { onDestroy } from 'svelte'
+	import type { Readable} from 'svelte/store'
 
-	export let accountData: AccountData
-	export let config: ConfigConnected
+	export let accountData: Readable<AccountData>
+	export let config: ConfigConnected<Connector>
 	export let btnClass: string = ''
 
-	$: address = accountData.account?.address
-	$: name = accountData.nameService.name
-	$: avatar = accountData.nameService.avatar
-	$: balance = accountData.balance?.value
-	$: symbol = accountData.balance?.symbol
+	$: address = $accountData.account?.address
+	$: name = $accountData.nameService?.name
+	$: avatar = $accountData.nameService?.avatar
+	$: balance = $accountData.balance?.value
+	$: symbol = $accountData.balance?.symbol
 
 	let open: () => void
 	let close: () => void
@@ -83,7 +84,7 @@
 				<!-- <button on:click={handleDisconnect} disabled> Switch</button> -->
 
 				<button
-					on:click={() => handleDisconnect(accountData.account.connector)}
+					on:click={() => handleDisconnect($accountData.account.connector)}
 					class="fcl__btn-primary row justify-center"
 				>
 					<!-- prettier-ignore -->
diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index 91dfaf6..df0cdaa 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -4,10 +4,11 @@
 	import copyEN from '../../copy/copy.EN.js'
 	import Modal from '../Common/Modal.svelte'
 	import Scannable from './Scannable.svelte'
-	import type { ConfigConnected, ConfigDisconnected, Connector, StateConnected } from '@fractl-ui/types'
+	import type { ConfigConnected, ConfigDisconnected, Connector, StateConnected, StateDisconnected } from '@fractl-ui/types'
+	import type { Readable} from 'svelte/store'
 
 	export let config: ConfigDisconnected
-	export let state
+	export let state: Readable<StateDisconnected<Connector>>
 	export let btnClass = ''
 	export let triggerText = 'Connect Wallet'
 	export let onConnect: (status: StateConnected<Connector>) => void
@@ -35,7 +36,7 @@
 			// console.debug('config.state: ', $state.status)
 			activeRequest = connector
 			await config.connect(connector)
-			onConnect($state)
+			onConnect({config, accountData: config.accountData})
 		} catch (error) {
 			onConnectFail(error)
 			// console.error('caught: ', error)
diff --git a/packages/ui/src/components/FractlModal.svelte b/packages/ui/src/components/FractlModal.svelte
index 89cce5a..f129d99 100644
--- a/packages/ui/src/components/FractlModal.svelte
+++ b/packages/ui/src/components/FractlModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { ConnectModal, AccountModal } from './index.js'
 	import type { Config } from '@fractl-ui/types'
+	import ConnectModal from './ConnectModal/ConnectModal.svelte';
+	import AccountModal from './AccountModal.svelte';
 	import { blur } from 'svelte/transition'
 	import { quintOut } from 'svelte/easing'
 
@@ -23,10 +24,10 @@
 			out:blur={{ duration: 8 }}
 		>
 			{#if isConnected}
-				<AccountModal accountData={$accountData} {config} {btnClass} />
+				<AccountModal {accountData} {config} {btnClass} />
 			{:else}
 				<ConnectModal
-					state={$state}
+					{state}
 					{config}
 					{btnClass}
 					triggerText="Connect Wallet"
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 10e92dc..67a340f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,3 +1,7 @@
+import FractlModal from './components/FractlModal.svelte'
+import ConnectModal from './components/ConnectModal/ConnectModal.svelte'
+import AccountModal from './components/AccountModal.svelte'
+
 export { create } from './components/index.js'
-// export {open connect modal}
+export {FractlModal , AccountModal, ConnectModal }
 // export T&C text prop

From 55733629d676d1bcdee8231d48b12c8ea124b123 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 16:49:17 +0100
Subject: [PATCH 6/6] fix lint error

---
 .../ConnectModal/ConnectModal.svelte          | 25 ++++++++++++-------
 packages/ui/src/components/index.ts           | 10 +++++---
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index df0cdaa..dd43bc4 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -4,14 +4,19 @@
 	import copyEN from '../../copy/copy.EN.js'
 	import Modal from '../Common/Modal.svelte'
 	import Scannable from './Scannable.svelte'
-	import type { ConfigConnected, ConfigDisconnected, Connector, StateConnected, StateDisconnected } from '@fractl-ui/types'
-	import type { Readable} from 'svelte/store'
-
-	export let config: ConfigDisconnected
+	import type {
+		ConfigConnected,
+		ConfigDisconnected,
+		Connector,
+		StateDisconnected
+	} from '@fractl-ui/types'
+	import type { Readable } from 'svelte/store'
+
+	export let config: ConfigDisconnected<Connector>
 	export let state: Readable<StateDisconnected<Connector>>
 	export let btnClass = ''
 	export let triggerText = 'Connect Wallet'
-	export let onConnect: (status: StateConnected<Connector>) => void
+	export let onConnect: (fractl: ConfigConnected<Connector>) => void
 	export let onConnectFail: (error: Error) => void
 
 	let open: () => void
@@ -22,8 +27,10 @@
 	// export let accountStatus: string
 	// export let chainStatus
 	// export let showBalance: string
-	onMount(()=> open())
-	onDestroy(()=>{close()})
+	onMount(() => open())
+	onDestroy(() => {
+		close()
+	})
 	$: if ($state.status === 'connected') close()
 
 	let activeRequest: Connector | null = null //config.connectors[3]
@@ -36,7 +43,7 @@
 			// console.debug('config.state: ', $state.status)
 			activeRequest = connector
 			await config.connect(connector)
-			onConnect({config, accountData: config.accountData})
+			onConnect(config)
 		} catch (error) {
 			onConnectFail(error)
 			// console.error('caught: ', error)
@@ -151,8 +158,8 @@
 		{/if}
 	</div>
 </Modal>
-<style>
 
+<style>
 	.hide {
 		display: none;
 		opacity: 0;
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index a2b0210..bcf0e9b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -3,13 +3,15 @@ import AccountModal from './AccountModal.svelte'
 import FractlModal from './FractlModal.svelte'
 import type { Config, Connector, StateConnected } from '@fractl-ui/types'
 
-export const create = async <C extends Connector>(config: Promise<Config<C>>) => {
-	let _config = await Promise.resolve(config)
+export const create = async <C extends Connector>(
+	config: Promise<Config<C>>
+) => {
+	const _config = await Promise.resolve(config)
 
 	//TODO: return singleton when modal is dismissed without completing connection
 	return () => {
-		const getTarget = () =>  document.body
-		
+		const getTarget = () => document.body
+
 		return new Promise((resolve, reject) => {
 			const modal = new ConnectModal({
 				target: getTarget(),