return state after connection attempt

sameoldlab · Jul 31, 2024 · be533b8 · be533b8
1 parent 4fc54a6
commit be533b8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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()
+					}
 				}
 			})
 		})