From 13822682d5a9c9e4b9e624a5c3dc8a3089cff77e Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 16:51:41 +0100
Subject: [PATCH] Merge pull-request #25 from sameoldlab/function-api

export connectModal as function
update example
Remove custom element workarounds
- Moves style imports to script
return state after connection attempt
enable svelte imports
- alows use of connect modal from compiled svelte or direclty importing
components
---
 examples/svelte/src/App.svelte                | 29 ++++++++++---------
 .../ui/src/components/AccountModal.svelte     |  2 +-
 .../ui/src/components/Common/Modal.svelte     |  2 +-
 packages/ui/src/components/FractlModal.svelte |  4 +--
 packages/ui/src/index.ts                      |  2 +-
 5 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index a8f3d98..0322f41 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -15,20 +15,23 @@
 	const evm = addEvmConnection($wagmiConfig)
 	let account
 
-	const connect = async (conf) =>  create(conf).then((connect) => connect()
-		.then(res => {
-			account = {
-				config: res,
-				accountData: res.accountData
-			}
-			console.log(res)
-		})
-		.catch(err => console.error(err))
+	const connect = async (conf) =>
+		create(conf).then((connect) =>
+			connect()
+				.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>
+	<button on:click={() => connect(evm)}>Connect EVM</button>
+	<button on:click={() => connect(stark)}>Connect Stark</button>
 </header>
 <main>
 	<div class="hero">
@@ -43,8 +46,8 @@
 		</p>
 	</div>
 	{#if account}
-  	<AccountModal {...account}/>
-  {/if}
+		<AccountModal {...account} />
+	{/if}
 
 	<!-- 
 	{#if connected}
diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index 2869c3c..254420e 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -9,7 +9,7 @@
 	import Zorb from './zorb/Zorb.svelte'
 	import Modal from './Common/Modal.svelte'
 	import { onDestroy } from 'svelte'
-	import type { Readable} from 'svelte/store'
+	import type { Readable } from 'svelte/store'
 
 	export let accountData: Readable<AccountData>
 	export let config: ConfigConnected<Connector>
diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte
index bbdd9f8..2b866fe 100644
--- a/packages/ui/src/components/Common/Modal.svelte
+++ b/packages/ui/src/components/Common/Modal.svelte
@@ -48,7 +48,7 @@
 		dialog.close()
 		dispatch('close')
 	}
-	onDestroy(()=>{
+	onDestroy(() => {
 		dispatch('close')
 	})
 </script>
diff --git a/packages/ui/src/components/FractlModal.svelte b/packages/ui/src/components/FractlModal.svelte
index f129d99..c905aac 100644
--- a/packages/ui/src/components/FractlModal.svelte
+++ b/packages/ui/src/components/FractlModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Config } from '@fractl-ui/types'
-	import ConnectModal from './ConnectModal/ConnectModal.svelte';
-	import AccountModal from './AccountModal.svelte';
+	import ConnectModal from './ConnectModal/ConnectModal.svelte'
+	import AccountModal from './AccountModal.svelte'
 	import { blur } from 'svelte/transition'
 	import { quintOut } from 'svelte/easing'
 
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 67a340f..14cd4bc 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -3,5 +3,5 @@ import ConnectModal from './components/ConnectModal/ConnectModal.svelte'
 import AccountModal from './components/AccountModal.svelte'
 
 export { create } from './components/index.js'
-export {FractlModal , AccountModal, ConnectModal }
+export { FractlModal, AccountModal, ConnectModal }
 // export T&C text prop