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
sameoldlab · Jul 31, 2024 · e95d562 · e95d562
1 parent 969a088
commit e95d562
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 67 deletions.
diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -1,25 +1,37 @@
-<!-- <svelte:options tag="my-app" /> -->
 <script lang="ts">
-	// import config from '../../../../packages/ui.old/src/wagmiConfig'
 	import { addEvmConnection } from '@fractl-ui/evm'
-	import 'fractl-ui'
+	import { create, AccountModal } from 'fractl-ui'
 	import wagmiConfig from './lib/wagmiConfig'
 	import { onMount } from 'svelte'
 	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 stark = addStarknetConnection()
+	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))
+		)
 </script>
 
 <header>
-	<fractl-modal {config} btnClass="button-85" />
+	<button on:click={() => connect(evm)}>Connect EVM</button>
+	<button on:click={() => connect(stark)}>Connect Stark</button>
 </header>
 <main>
 	<div class="hero">
@@ -33,8 +45,9 @@
 			</span>
 		</p>
 	</div>
-
-	<fractl-modal {config} btnClass="button-85" />
+	{#if account}
+		<AccountModal {...account} />
+	{/if}
 
 	<!-- 
 	{#if connected}

diff --git 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,
@@ -8,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
@@ -82,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 -->
@@ -96,7 +98,3 @@
 		</div>
 	</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
@@ -48,7 +48,7 @@
 		dialog.close()
 		dispatch('close')
 	}
-	onDestroy(()=>{
+	onDestroy(() => {
 		dispatch('close')
 	})
 </script>
@@ -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
@@ -1,15 +1,23 @@
 <script lang="ts">
-
-	import { onDestroy } from 'svelte'
+	import '../../styles/index.css'
+	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'
-
-	export let config: ConfigDisconnected
-	export let state
+	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: (fractl: ConfigConnected<Connector>) => void
+	export let onConnectFail: (error: Error) => void
 
 	let open: () => void
 	let close: () => void
@@ -19,8 +27,11 @@
 	// export let accountStatus: string
 	// export let chainStatus
 	// export let showBalance: string
-	onDestroy(()=>{close()})
-	$: if (state.status === 'connected') close()
+	onMount(() => open())
+	onDestroy(() => {
+		close()
+	})
+	$: if ($state.status === 'connected') close()
 
 	let activeRequest: Connector | null = null //config.connectors[3]
 	$: title = !activeRequest ? 'Connect Wallet' : activeRequest.name
@@ -29,14 +40,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(config)
 		} 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>
@@ -90,7 +103,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> 
@@ -104,7 +117,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]}
@@ -146,11 +159,7 @@
 	</div>
 </Modal>
 
-<!-- </Modal> -->
-
 <style>
-	@import url('../../styles/index.css');
-
 	.hide {
 		display: none;
 		opacity: 0;

diff --git a/packages/ui/src/components/FractlModal.svelte b/packages/ui/src/components/FractlModal.svelte
@@ -1,17 +1,7 @@
-<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'
+	import ConnectModal from './ConnectModal/ConnectModal.svelte'
+	import AccountModal from './AccountModal.svelte'
 	import { blur } from 'svelte/transition'
 	import { quintOut } from 'svelte/easing'
 
@@ -34,14 +24,9 @@
 			out:blur={{ duration: 8 }}
 		>
 			{#if isConnected}
-				<AccountModal accountData={$accountData} {config} {btnClass} />
+				<AccountModal {accountData} {config} {btnClass} />
 			{:else}
-				<ConnectModal
-					state={$state}
-					{config}
-					{btnClass}
-					triggerText="Connect Wallet"
-				>
+				<ConnectModal {state} {config} {btnClass} triggerText="Connect Wallet">
 					<svelte:fragment slot="footer"></svelte:fragment>
 				</ConnectModal>
 			{/if}

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -1,5 +1,34 @@
 import ConnectModal from './ConnectModal/ConnectModal.svelte'
 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>>
+) => {
+	const _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) => {
+			const modal = new ConnectModal({
+				target: getTarget(),
+				props: {
+					config: _config,
+					state: _config.state,
+					onConnect: (state: StateConnected<C>) => {
+						resolve(state)
+						modal.$destroy()
+					},
+					onConnectFail: (error) => {
+						reject(error)
+						modal.$destroy()
+					}
+				}
+			})
+		})
+	}
+}
 export { ConnectModal, AccountModal, FractlModal }
diff --git 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>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,3 +1,7 @@
-export { FractlModal } from './components/index.js'
-// export {open connect modal}
+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 { FractlModal, AccountModal, ConnectModal }
 // export T&C text prop