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