enable svelte imports

alows use of connect modal from compiled svelte or direclty importing components

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}

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 -->

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)

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"

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