Merge pull request #22 from sameoldlab/fix-dialog-close

close on destroy

.changeset/config.json

@@ -1,11 +1,17 @@
 {
-  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [[ "fractl-ui", "@fractl-ui/types", "x-*", "@fractl-ui/*"]],
-  "linked": [],
-  "access": "restricted",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}
+	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [
+		[
+			"fractl-ui",
+			"@fractl-ui/types",
+			"x-*"
+		]
+	],
+	"linked": [],
+	"access": "restricted",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.changeset/sweet-bugs-itch.md

@@ -0,0 +1,5 @@
+---
+"fractl-ui": patch
+---
+
+fixed hideen scrollbar on modal close

packages/ui/src/components/AccountModal.svelte

@@ -7,6 +7,7 @@
 	} from '@fractl-ui/types'
 	import Zorb from './zorb/Zorb.svelte'
 	import Modal from './Common/Modal.svelte'
+	import { onDestroy } from 'svelte'
 
 	export let accountData: AccountData
 	export let config: ConfigConnected
@@ -19,8 +20,13 @@
 	$: symbol = accountData.balance?.symbol
 
 	let open: () => void
+	let close: () => void
+	onDestroy(() => {
+		close()
+	})
 
 	const handleDisconnect = async (connector: Connector) => {
+		close()
 		await config.disconnect(connector)
 	}
 </script>
@@ -42,7 +48,7 @@
 		{name || truncate(address)}
 	</button>
 
-	<Modal titleText="Connected" bind:open customTrigger>
+	<Modal titleText="Connected" bind:open bind:close customTrigger>
 		<!-- header>div*2+div.balance+hr+div>div.header -->
 		<div class="fcl__layout-3col">
 			{#if avatar}

packages/ui/src/components/Common/Modal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '../../styles/index.css'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, onDestroy } from 'svelte'
 	const dispatch = createEventDispatcher()
 
 	export let titleText = 'Title Text'
@@ -48,6 +48,9 @@
 		dialog.close()
 		dispatch('close')
 	}
+	onDestroy(()=>{
+		dispatch('close')
+	})
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+
+	import { onDestroy, onMount } from 'svelte'
 	import copyEN from '../../copy/copy.EN.js'
 	import Modal from '../Common/Modal.svelte'
 	import Scannable from './Scannable.svelte'
@@ -17,6 +19,7 @@
 	// export let accountStatus: string
 	// export let chainStatus
 	// export let showBalance: string
+	onDestroy(()=>{close()})
 	$: if (state.status === 'connected') close()
 
 	let activeRequest: Connector | null = null //config.connectors[3]