Function api2

examples/svelte/src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { addEvmConnection } from '@fractl-ui/evm'
-	import { create, AccountModal } from 'fractl-ui'
+	import { create } from 'fractl-ui'
+	import { AccountModal } from 'fractl-ui/svelte'
 	import wagmiConfig from './lib/wagmiConfig'
 	import { onMount } from 'svelte'
 	import { reconnect } from '@wagmi/core'
@@ -48,11 +49,12 @@
 	{#if account}
 		<AccountModal {...account} />
 	{/if}
-
 	<!-- 
-	{#if connected}
-		<AccountDialog config={$config}></AccountDialog>
-	{/if} -->
+	Future versions of ConnectModal will not include a button.
+	FractlModal will take care of transitions swapping between connection states. 
+	A reuglar button can also be used to trigger the connect moadal
+	<FractlModal {config} />
+	-->
 </main>
 <footer class="links">
 	<a href="https://github.com/sameoldlab/fractl-ui">

packages/ui/package.json

@@ -22,6 +22,21 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js"
+		},
+		"./svelte": {
+			"types": "./dist/components/index.d.ts",
+			"import": "./dist/components/index.js",
+			"svelte": "./dist/components/index.ts"
+		}
+	},
+	"typesVersions": {
+		">4.0": {
+			"index.d.ts": [
+				"./dist/index.d.ts"
+			],
+			"svelte": [
+				"./dist/components/index.d.ts"
+			]
 		}
 	},
 	"scripts": {
@@ -32,18 +47,25 @@
 	"devDependencies": {
 		"@fractl-ui/types": "workspace:^",
 		"@melt-ui/svelte": "^0.67.0",
+		"@sveltejs/package": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@tsconfig/svelte": "^5.0.2",
 		"@types/qrcode": "^1.5.5",
 		"@wagmi/core": "2.0.1",
+		"postcss": "^8.4.40",
 		"postcss-preset-env": "^9.3.0",
 		"qrcode": "^1.5.3",
+		"sass": "^1.77.8",
 		"svelte": "^4.2.9",
 		"svelte-check": "^3.6.3",
+		"svelte-preprocess": "^6.0.2",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"viem": "2.0.1",
 		"vite": "^5.0.12",
 		"vite-plugin-dts": "^3.7.2"
+	},
+	"peerDependencies": {
+		"svelte": "^3 || ^4 || ^5.0.0-next.180"
 	}
 }

packages/ui/src/components/AccountModal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../styles/index.css'
 	import { truncate } from '../utils.js'
 	import type {
 		AccountData,
@@ -38,7 +37,7 @@
 	<button
 		aria-haspopup="dialog"
 		data-fractl-trigger
-		class="address {btnClass}"
+		class="address fcl_el {btnClass}"
 		on:click={open}
 	>
 		{#if avatar}
@@ -52,7 +51,7 @@
 
 	<Modal titleText="Connected" bind:open bind:close customTrigger>
 		<!-- header>div*2+div.balance+hr+div>div.header -->
-		<div class="fcl__layout-3col">
+		<div class="fcl__layout-3col fcl__el">
 			{#if avatar}
 				<img class="fcl__graphic-primary rounded" src={avatar} alt="" />
 			{:else}
@@ -84,7 +83,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/Common/Modal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../styles/index.css'
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	const dispatch = createEventDispatcher()
 

packages/ui/src/components/ConnectModal/ConnectModal.d.ts

@@ -0,0 +1,10 @@
+import { SvelteComponent } from 'svelte'
+
+export class ConnectModal extends SvelteComponent<{
+	config: Config<Connector>
+	state: Readable<StateDisconnected<Connector>>
+	btnClass: string
+	triggerText: string
+	onConnect: (fractl: Config<Connector>) => void
+	onConnectFail: (error: unknown) => void
+}> {}

packages/ui/src/components/ConnectModal/ConnectModal.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
-	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 {
-		ConfigConnected,
-		ConfigDisconnected,
-		Connector,
-		StateDisconnected
-	} from '@fractl-ui/types'
+	import type { Config, Connector, StateDisconnected } from '@fractl-ui/types'
 	import type { Readable } from 'svelte/store'
 
-	export let config: ConfigDisconnected<Connector>
+	export let config: Config<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
+	export let onConnect: (fractl: Config<Connector>) => void
+	export let onConnectFail: (error: unknown) => void
 
 	let open: () => void
 	let close: () => void
@@ -97,7 +91,7 @@
 		</button>
 	</svelte:fragment>
 
-	<div class="fcl__layout-1col">
+	<div id="fractl-connect" class="fcl__layout-1col fcl__el">
 		{#if activeRequest}
 			{#if activeRequest.type === 'injected'}
 				<!-- <Injected connector={activeRequest}></Injected> -->

packages/ui/src/components/index.ts

@@ -1,34 +1,6 @@
-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
+import ConnectModal from './ConnectModal/ConnectModal.svelte'
+import '../styles/index.css'
 
-		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 }

packages/ui/src/components/zorb/Zorb.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../styles/index.css'
 	import { gradientForAddress } from './lib.js'
 	export let size = '100%'
 	export let address = '0x0000000000000000000000000000000000000000'
@@ -37,3 +36,5 @@
 		<ellipse fill="url(#gzr)" cx="45" cy="45" rx="45" ry="45"></ellipse>
 	</g>
 </svg>
+
+<!-- <style src='../../styles/index.css'></style> -->

packages/ui/src/components/zorb/index.ts

@@ -23,5 +23,5 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-import * as lib from './lib'
+import * as lib from './lib.js'
 export { lib }

packages/ui/src/index.ts

@@ -1,7 +1,44 @@
-import FractlModal from './components/FractlModal.svelte'
 import ConnectModal from './components/ConnectModal/ConnectModal.svelte'
-import AccountModal from './components/AccountModal.svelte'
+import type { Config, Connector } from '@fractl-ui/types'
+
+export const create = async <C extends Connector>(
+	config: Promise<Config<C>>
+): Promise<() => Promise<Config<C>>> => {
+	const _config = await Promise.resolve(config)
+	const SINGLETON = 'fractl-connect'
+
+	return () => {
+		const getTarget = () => {
+			const el = document.getElementById(SINGLETON)
+			if (el) {
+				//TODO: target only gives a mount point. Need a way of calling show instead to avoid deleting each time
+				el.remove()
+			}
+			const target = document.createElement('div')
+			target.id = SINGLETON
+			document.body.appendChild(target)
+
+			return target
+		}
+
+		return new Promise((resolve, reject) => {
+			const modal = new ConnectModal({
+				target: getTarget(),
+				props: {
+					config: _config,
+					state: _config.state,
+					onConnect: (state: Config<C>) => {
+						resolve(state)
+						modal.$destroy()
+					},
+					onConnectFail: (error) => {
+						reject(error)
+						modal.$destroy()
+					}
+				}
+			})
+		})
+	}
+}
 
-export { create } from './components/index.js'
-export { FractlModal, AccountModal, ConnectModal }
 // export T&C text prop

packages/ui/src/styles/index.css

@@ -240,24 +240,25 @@ button.fcl__btn-primary svg,
 /* =============== */
 /* Utility Classes */
 /* =============== */
-
-.justify-center {
-	justify-content: center;
-	text-align: center;
-}
-.justify-between {
-	justify-content: space-between;
-}
-.rounded {
-	border-radius: 50%;
-}
-.error {
-	color: var(--fcl-text-color-error, oklch(80% 0.16 8));
-}
-button.address {
-	font-feature-settings: 'tnum', 'zero';
-	transition: opacity 150ms ease-out;
-}
-.mt-1 {
-	margin-top: 1em;
+.fcl__el {
+	.justify-center {
+		justify-content: center;
+		text-align: center;
+	}
+	.justify-between {
+		justify-content: space-between;
+	}
+	.rounded {
+		border-radius: 50%;
+	}
+	.error {
+		color: var(--fcl-text-color-error, oklch(80% 0.16 8));
+	}
+	button.address {
+		font-feature-settings: 'tnum', 'zero';
+		transition: opacity 150ms ease-out;
+	}
+	.mt-1 {
+		margin-top: 1em;
+	}
 }

packages/ui/svelte.config.js

@@ -1,11 +1,7 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-
+import { sveltePreprocess } from 'svelte-preprocess'
 export default {
 	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
 	// for more information about preprocessors
 
-	preprocess: vitePreprocess(),
-	compilerOptions: {
-		customElement: true
-	}
+	preprocess: sveltePreprocess()
 }