From a0b2b69af8d6799a2237352ef757eeedfca0a48e Mon Sep 17 00:00:00 2001 From: ibro Date: Fri, 2 Aug 2024 03:13:59 +0100 Subject: [PATCH 01/12] wider default modal, fix horizontal scroll --- packages/ui/src/components/Common/Modal.svelte | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte index e1a9c1c..2ff15f8 100644 --- a/packages/ui/src/components/Common/Modal.svelte +++ b/packages/ui/src/components/Common/Modal.svelte @@ -5,7 +5,7 @@ export let titleText = 'Title Text' export let customTrigger = false - export let inlineSize: number + export let inlineSize = 300 export let triggerText = 'open dialog' let dialog: HTMLDialogElement @@ -62,7 +62,8 @@ on:click|self={close} use:restoreStyles inert={isOpen ? undefined : true} - style:inline-size={`min(${inlineSize || 240}px, 100%)`} + style:inline-size={`min(${inlineSize}px, 100%)`} + class="fcl__el" >
@@ -119,9 +120,10 @@ position 128ms ease-in; /* Position at center */ - display: block; + /* display: block; */ position: fixed; margin: auto; + overflow-x: hidden; padding: 0; inset: 0; @@ -193,16 +195,18 @@ } } */ .fcl__dialog-content { + box-sizing: border-box; display: grid; grid-template-rows: 1fr; transition: 250ms grid-template-rows ease; max-block-size: 300px; overscroll-behavior: contain; + overflow-x: hidden; overflow-y: auto; padding-block-start: 0; &::-webkit-scrollbar { - inline-size: 0.5em; + inline-size: 0.25em; } &::-webkit-scrollbar-track { From bc683b19991fc038f2758d2413952b80ebd3a8b4 Mon Sep 17 00:00:00 2001 From: ibro Date: Tue, 18 Jun 2024 01:54:57 +0100 Subject: [PATCH 02/12] ui:switch qrcode package installed `@castlenine/svelte-qrcode`. removed `qrcode` --- packages/ui/package.json | 3 +-- pnpm-lock.yaml | 25 ++++++++++++------------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index c7ca619..aef4c87 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -50,11 +50,10 @@ "@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", + "@castlenine/svelte-qrcode": "^2.2.0", "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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2332835..10b2815 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -225,6 +225,9 @@ importers: packages/ui: devDependencies: + '@castlenine/svelte-qrcode': + specifier: ^2.2.0 + version: 2.2.0(svelte@4.2.9) '@fractl-ui/types': specifier: workspace:^ version: link:../types @@ -240,9 +243,6 @@ importers: '@tsconfig/svelte': specifier: ^5.0.2 version: 5.0.2 - '@types/qrcode': - specifier: ^1.5.5 - version: 1.5.5 '@wagmi/core': specifier: 2.0.1 version: 2.0.1(react@18.2.0)(typescript@5.3.3)(viem@2.0.1(typescript@5.3.3)) @@ -252,9 +252,6 @@ importers: postcss-preset-env: specifier: ^9.3.0 version: 9.6.0(postcss@8.4.40) - qrcode: - specifier: ^1.5.3 - version: 1.5.3 sass: specifier: ^1.77.8 version: 1.77.8 @@ -365,6 +362,11 @@ packages: resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==} engines: {node: '>=6.9.0'} + '@castlenine/svelte-qrcode@2.2.0': + resolution: {integrity: sha512-0PbzjH86AQOPFomHD7FDxSzWlQC8MOfyvOfHS0kmRXNA2nz5+oOL9kjpE+7IywejCGIXFN3sZrBpvx9i6xsdeA==} + peerDependencies: + svelte: '>=3.54.0' + '@changesets/apply-release-plan@7.0.4': resolution: {integrity: sha512-HLFwhKWayKinWAul0Vj+76jVx1Pc2v55MGPVjZ924Y/ROeSsBMFutv9heHmCUj48lJyRfOTJG5+ar+29FUky/A==} @@ -2007,9 +2009,6 @@ packages: '@types/pug@2.0.10': resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==} - '@types/qrcode@1.5.5': - resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==} - '@types/semver@7.5.8': resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} @@ -5010,6 +5009,10 @@ snapshots: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + '@castlenine/svelte-qrcode@2.2.0(svelte@4.2.9)': + dependencies: + svelte: 4.2.9 + '@changesets/apply-release-plan@7.0.4': dependencies: '@babel/runtime': 7.25.0 @@ -7040,10 +7043,6 @@ snapshots: '@types/pug@2.0.10': {} - '@types/qrcode@1.5.5': - dependencies: - '@types/node': 22.0.0 - '@types/semver@7.5.8': {} '@types/trusted-types@2.0.7': {} From a35cdd455a43f7ed6702d9f17a75ccaed881a4c0 Mon Sep 17 00:00:00 2001 From: ibro Date: Tue, 18 Jun 2024 02:01:10 +0100 Subject: [PATCH 03/12] ui: switch Scannable to new component, add skeleton --- .../components/ConnectModal/Scannable.svelte | 210 +----------------- .../components/ConnectModal/skeletonQr.svg | 1 + 2 files changed, 8 insertions(+), 203 deletions(-) create mode 100644 packages/ui/src/components/ConnectModal/skeletonQr.svg diff --git a/packages/ui/src/components/ConnectModal/Scannable.svelte b/packages/ui/src/components/ConnectModal/Scannable.svelte index 5c63531..fe5d80d 100644 --- a/packages/ui/src/components/ConnectModal/Scannable.svelte +++ b/packages/ui/src/components/ConnectModal/Scannable.svelte @@ -1,203 +1,24 @@ -
- {#if !QR} - shimmer + {#if data} + {:else} - - - - {@html QR} + loading QRCode {/if}
@@ -216,21 +37,4 @@ justify-content: stretch; align-items: stretch; } - - /* .row { - display: flex; - /* gap: .2em; * - } - .dot { - width: 4px; - height: 4px; - background: transparent; - margin: 1.25px; - } - .round { - border-radius: 50%; - } - .fill { - background: white; - } */ diff --git a/packages/ui/src/components/ConnectModal/skeletonQr.svg b/packages/ui/src/components/ConnectModal/skeletonQr.svg new file mode 100644 index 0000000..6635ac5 --- /dev/null +++ b/packages/ui/src/components/ConnectModal/skeletonQr.svg @@ -0,0 +1 @@ + From 2df0a327e3a1eff16e4aa9e88602fab236895d56 Mon Sep 17 00:00:00 2001 From: ibro Date: Sat, 3 Aug 2024 07:31:41 +0100 Subject: [PATCH 04/12] fix QR layout issue --- .../ConnectModal/ConnectModal.svelte | 2 - .../components/ConnectModal/Scannable.svelte | 51 ++++++++++++++----- packages/ui/src/styles/index.css | 8 +++ 3 files changed, 45 insertions(+), 16 deletions(-) diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte index 0e73eb3..3a3774b 100644 --- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte +++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte @@ -91,7 +91,6 @@ -
{#if activeRequest} {#if activeRequest.type === 'injected'} @@ -150,7 +149,6 @@ {/if} -
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css index 2dd3af4..8286a34 100644 --- a/packages/ui/src/styles/index.css +++ b/packages/ui/src/styles/index.css @@ -143,6 +143,14 @@ button.fcl__btn-primary svg, padding-block-end: 0.25em; } +.fcl__text-secondary { + font-size: .9em; + font-weight: 400; + margin: 0; + padding-block-start: 1.25em; + padding-block-end: 0.25em; +} + .fcl__subhead { opacity: 0.7; /* hacky... _/(:/)\_ */ font-size: 0.9em; From 03a559920b0a14865d95a8cdbe4170bd4191c853 Mon Sep 17 00:00:00 2001 From: ibro Date: Sat, 3 Aug 2024 07:38:34 +0100 Subject: [PATCH 05/12] simpler common modal --- .../ui/src/components/Common/Modal.svelte | 54 +++---------------- .../ConnectModal/ConnectModal.svelte | 36 +++++++------ packages/ui/src/styles/index.css | 21 +++++++- 3 files changed, 48 insertions(+), 63 deletions(-) diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte index 2ff15f8..60736ff 100644 --- a/packages/ui/src/components/Common/Modal.svelte +++ b/packages/ui/src/components/Common/Modal.svelte @@ -5,7 +5,6 @@ export let titleText = 'Title Text' export let customTrigger = false - export let inlineSize = 300 export let triggerText = 'open dialog' let dialog: HTMLDialogElement @@ -13,18 +12,15 @@ x: document.documentElement.style.overflowX, y: document.documentElement.style.overflowY } - let isOpen = false const restoreStyles = (el: HTMLDialogElement) => { el.addEventListener('close', () => { - isOpen = false document.documentElement.style.overflowY = docOverflow.x document.documentElement.style.overflowX = docOverflow.y }) return { destroy() { el.removeEventListener('close', () => { - isOpen = false document.documentElement.style.overflowY = docOverflow.x document.documentElement.style.overflowX = docOverflow.y }) @@ -33,7 +29,6 @@ } export function open() { - isOpen = true dialog.showModal() /* Get the overflow at the point when dialog is being opened */ @@ -61,8 +56,6 @@ aria-labelledby="fcl__dialog-title" on:click|self={close} use:restoreStyles - inert={isOpen ? undefined : true} - style:inline-size={`min(${inlineSize}px, 100%)`} class="fcl__el" > @@ -104,25 +97,17 @@ diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte index d51211d..bbbd5d4 100644 --- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte +++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte @@ -5,6 +5,7 @@ import Scannable from './Scannable.svelte' import type { Config, Connector, StateDisconnected } from '@fractl-ui/types' import type { Readable } from 'svelte/store' + import { slide } from 'svelte/transition' export let config: Config export let state: Readable> @@ -39,7 +40,7 @@ await config.connect(connector) onConnect(config) } catch (error) { - onConnectFail(error) + // onConnectFail(error) // console.error('caught: ', error) } @@ -117,7 +118,8 @@

Retry {/if} diff --git a/packages/ui/src/components/ConnectModal/Scannable.svelte b/packages/ui/src/components/ConnectModal/Scannable.svelte index ac37ec1..5385c8f 100644 --- a/packages/ui/src/components/ConnectModal/Scannable.svelte +++ b/packages/ui/src/components/ConnectModal/Scannable.svelte @@ -2,6 +2,7 @@ import QRCode from '@castlenine/svelte-qrcode' import type { Connector } from '@wagmi/core' import skeleton from './skeletonQr.svg' + import { fade } from 'svelte/transition' export let connector: Connector let data: string = '' @@ -25,8 +26,15 @@
+ loading QRCode {#if data} - + - {:else} - loading QRCode {/if}
- +
From 0c293c3b3439e8344aa468092942d8dbf3ebb198 Mon Sep 17 00:00:00 2001 From: ibro Date: Sat, 3 Aug 2024 21:53:17 +0100 Subject: [PATCH 08/12] bmrk --- .../ConnectModal/ConnectModal.svelte | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte index bbbd5d4..e0692b2 100644 --- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte +++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte @@ -36,7 +36,9 @@ try { // console.debug('config.state: ', $state.status) - activeRequest = connector + makeTransition(() => { + activeRequest = connector + }) await config.connect(connector) onConnect(config) } catch (error) { @@ -46,7 +48,20 @@ // console.debug('config.state: ', $state.status) } - const clearRequest = () => (activeRequest = null) + + const clearRequest = () => + makeTransition(() => { + activeRequest = null + }) + + function makeTransition(transition: () => void) { + if (document.startViewTransition) { + transition() + // document.startViewTransition(() => { transition() }) + } else { + transition() + } + } @@ -164,6 +179,12 @@ /* transition: opacity 150ms 1s ease-in; */ } + #fractl-connect, + #fractl-injected { + flex: 0.000001; + transition: all 1s ease; + animation: flexGrow 150ms ease forwards; + } .spin { animation: 1500ms linear infinite spin; color: oklch(70% 0.52 230); @@ -176,6 +197,16 @@ } } + @keyframes flexGrow { + to { + flex: 1; + } + } + @keyframes flexShrink { + to { + flex: 0.0000001; + } + } .connectors { display: grid; width: 100%; From 467dc3199c1643b0e3e621f1de08a50e41ab2050 Mon Sep 17 00:00:00 2001 From: ibro Date: Sat, 3 Aug 2024 21:53:24 +0100 Subject: [PATCH 09/12] Revert "bmrk" This reverts commit 0c293c3b3439e8344aa468092942d8dbf3ebb198. --- .../ConnectModal/ConnectModal.svelte | 35 ++----------------- 1 file changed, 2 insertions(+), 33 deletions(-) diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte index e0692b2..bbbd5d4 100644 --- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte +++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte @@ -36,9 +36,7 @@ try { // console.debug('config.state: ', $state.status) - makeTransition(() => { - activeRequest = connector - }) + activeRequest = connector await config.connect(connector) onConnect(config) } catch (error) { @@ -48,20 +46,7 @@ // console.debug('config.state: ', $state.status) } - - const clearRequest = () => - makeTransition(() => { - activeRequest = null - }) - - function makeTransition(transition: () => void) { - if (document.startViewTransition) { - transition() - // document.startViewTransition(() => { transition() }) - } else { - transition() - } - } + const clearRequest = () => (activeRequest = null) @@ -179,12 +164,6 @@ /* transition: opacity 150ms 1s ease-in; */ } - #fractl-connect, - #fractl-injected { - flex: 0.000001; - transition: all 1s ease; - animation: flexGrow 150ms ease forwards; - } .spin { animation: 1500ms linear infinite spin; color: oklch(70% 0.52 230); @@ -197,16 +176,6 @@ } } - @keyframes flexGrow { - to { - flex: 1; - } - } - @keyframes flexShrink { - to { - flex: 0.0000001; - } - } .connectors { display: grid; width: 100%; From 60112959dead62a1949065920e5f32240a36a90e Mon Sep 17 00:00:00 2001 From: ibro Date: Sun, 4 Aug 2024 19:12:17 +0100 Subject: [PATCH 10/12] rename text style subhead to secondary --- packages/ui/src/components/AccountModal.svelte | 2 +- .../ui/src/components/ConnectModal/ConnectModal.svelte | 4 ++-- packages/ui/src/styles/index.css | 9 +-------- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte index fff9f06..f6f2fbd 100644 --- a/packages/ui/src/components/AccountModal.svelte +++ b/packages/ui/src/components/AccountModal.svelte @@ -71,7 +71,7 @@ - {balance ? `${balance.substring(0, 7)} ${symbol}` : 0} diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte index bbbd5d4..6ec3f7d 100644 --- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte +++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte @@ -108,12 +108,12 @@ {#if $state.status === 'connecting' || $state.status === 'reconnecting'}

Requesting Connection

-

+

{copyEN(activeRequest.name).connecting[activeRequest.type]}

{:else}

Connection Declined

-

+

{copyEN(activeRequest.name).rejected[activeRequest.type]}

-
+