From 41c8d566e38010ea7901ccb20ecc5fb0b13f7774 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Tue, 21 Nov 2023 21:00:04 +0300 Subject: [PATCH] 82 modal animation (#84) * fix: add animation to modal * fix: icons and animations * test: add vi tests --- packages/dapp-kit-ui/index.html | 2 +- packages/dapp-kit-ui/package.json | 2 +- .../dapp-kit-ui/src/assets/icons/check.ts | 9 +++ packages/dapp-kit-ui/src/assets/icons/copy.ts | 17 +++-- .../dapp-kit-ui/src/assets/icons/index.ts | 1 + .../components/base/vwk-base-modal/index.ts | 53 ++++++++++++-- .../components/vwk-connect-button/index.ts | 6 +- .../src/components/vwk-connect-modal/index.ts | 25 +++---- .../src/components/vwk-source-card/index.ts | 4 ++ .../vwk-wallet-connect-qrcode/index.ts | 72 ++++++++++++++++--- packages/dapp-kit-ui/test/listeners.test.ts | 24 +++++++ packages/dapp-kit-ui/tsconfig.json | 2 +- 12 files changed, 181 insertions(+), 36 deletions(-) create mode 100644 packages/dapp-kit-ui/src/assets/icons/check.ts create mode 100644 packages/dapp-kit-ui/test/listeners.test.ts diff --git a/packages/dapp-kit-ui/index.html b/packages/dapp-kit-ui/index.html index 4fd8dca5..136551b8 100644 --- a/packages/dapp-kit-ui/index.html +++ b/packages/dapp-kit-ui/index.html @@ -9,7 +9,7 @@ diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json index dbada4b4..2a2f5ba1 100644 --- a/packages/dapp-kit-ui/package.json +++ b/packages/dapp-kit-ui/package.json @@ -17,7 +17,7 @@ "scripts": { "build": "tsup", "clean": "rm -rf dist .turbo", - "dev": "parcel --no-cache index.html", + "dev": "rm -rf ../../.parcel-cache; parcel --no-cache index.html", "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write", "lint": "tsc --noEmit && eslint src --ext .js,.jsx,.ts,.tsx", "purge": "yarn clean && rm -rf node_modules", diff --git a/packages/dapp-kit-ui/src/assets/icons/check.ts b/packages/dapp-kit-ui/src/assets/icons/check.ts new file mode 100644 index 00000000..b82e7ec1 --- /dev/null +++ b/packages/dapp-kit-ui/src/assets/icons/check.ts @@ -0,0 +1,9 @@ +import { html } from 'lit'; + +export const CheckSvg = html` + + + +`; diff --git a/packages/dapp-kit-ui/src/assets/icons/copy.ts b/packages/dapp-kit-ui/src/assets/icons/copy.ts index 7e60a386..c7604f44 100644 --- a/packages/dapp-kit-ui/src/assets/icons/copy.ts +++ b/packages/dapp-kit-ui/src/assets/icons/copy.ts @@ -1,17 +1,26 @@ import { html, svg } from 'lit'; export const CopySvg = svg` - + `; export const LightCopySvg = html` - + ${CopySvg} `; export const DarkCopySvg = html` - + ${CopySvg} `; diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts index 59b757cc..da2a86cc 100644 --- a/packages/dapp-kit-ui/src/assets/icons/index.ts +++ b/packages/dapp-kit-ui/src/assets/icons/index.ts @@ -1,3 +1,4 @@ export * from './close'; export * from './chevron-left'; export * from './copy'; +export * from './check'; diff --git a/packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts b/packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts index 5ba42946..04f08872 100644 --- a/packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts +++ b/packages/dapp-kit-ui/src/components/base/vwk-base-modal/index.ts @@ -1,6 +1,6 @@ import type { TemplateResult } from 'lit'; -import { LitElement, css, html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { css, html, LitElement } from 'lit'; +import { customElement, property, query } from 'lit/decorators.js'; import { Breakpoint, Colors } from '../../../constants'; import type { Theme, ThemeMode } from '../../../constants/theme'; @@ -17,11 +17,23 @@ export class Modal extends LitElement { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); + opacity: 1; + transition: opacity 0.3s; + } + .modal-container.hidden { + opacity: 0; + pointer-events: none; } .modal { position: absolute; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + transition: height 0.2s, opacity 0.3s; + overflow: hidden; + opacity: 1; + } + .modal-container.hidden .modal { + opacity: 0; } .modal.LIGHT { @@ -55,6 +67,30 @@ export class Modal extends LitElement { } } `; + + changeHeightOnResize = (): void => { + if (!this.modalSubContainer) { + return; + } + this.modalHeight = this.modalSubContainer.clientHeight; + new ResizeObserver(() => { + this.modalHeight = this.modalSubContainer?.clientHeight ?? 0; + }).observe(this.modalSubContainer); + }; + + override connectedCallback(): void { + super.connectedCallback(); + addEventListener('load', this.changeHeightOnResize); + } + override disconnectedCallback(): void { + super.disconnectedCallback(); + window.removeEventListener('load', this.changeHeightOnResize); + } + + @query('.modal-sub-container') + modalSubContainer?: Element; + @property() + modalHeight?: number; @property({ type: Boolean }) open = false; @property() @@ -70,14 +106,21 @@ export class Modal extends LitElement { }; override render(): TemplateResult { - if (!this.open) return html``; return html` -
+
- +
+ +
`; diff --git a/packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts b/packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts index cc384362..b7114ded 100644 --- a/packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts +++ b/packages/dapp-kit-ui/src/components/vwk-connect-button/index.ts @@ -20,13 +20,17 @@ export class ConnectButton extends LitElement { opacity: 0.9; } + button:active { + opacity: 0.8; + } + button.LIGHT { background-color: ${Colors.LightGrey}; color: ${Colors.Dark}; } button.DARK { - background-color: ${Colors.Dark}; + background-color: ${Colors.DarkGrey}; color: ${Colors.LightGrey}; } `; diff --git a/packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts b/packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts index cad36097..c29af957 100644 --- a/packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts +++ b/packages/dapp-kit-ui/src/components/vwk-connect-modal/index.ts @@ -10,7 +10,7 @@ import { LightChevronLeftSvg, LightCloseSvg, } from '../../assets'; -import { dispatchCustomEvent, subscribeToCustomEvent } from '../../utils'; +import { subscribeToCustomEvent } from '../../utils'; import { DAppKit } from '../../client'; import type { Theme, ThemeMode } from '../../constants/theme'; @@ -19,7 +19,6 @@ export class ConnectModal extends LitElement { static override styles = css` .modal-container { padding: 20px; - transition: width 5s, height 4s; } .modal-header { @@ -32,7 +31,6 @@ export class ConnectModal extends LitElement { .modal-body { flex-direction: column; - transition: width 2s, height 4s; } .modal-footer { @@ -126,6 +124,18 @@ export class ConnectModal extends LitElement { @property({ type: Function }) onClose: () => void = () => nothing; + private onBack = (): void => { + this.walletConnectQRcode = undefined; + }; + + private handleClose = (): void => { + // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal + setTimeout(() => { + this.onBack(); + }, 500); + this.onClose(); + }; + override render(): TemplateResult { return html` @@ -180,15 +190,6 @@ export class ConnectModal extends LitElement { `; } - - private onBack = (): void => { - dispatchCustomEvent('vwk-close-wc-modal', undefined); - }; - - private handleClose = (): void => { - this.onBack(); - this.onClose(); - }; } declare global { diff --git a/packages/dapp-kit-ui/src/components/vwk-source-card/index.ts b/packages/dapp-kit-ui/src/components/vwk-source-card/index.ts index b1ed7203..72a5cc6c 100644 --- a/packages/dapp-kit-ui/src/components/vwk-source-card/index.ts +++ b/packages/dapp-kit-ui/src/components/vwk-source-card/index.ts @@ -24,6 +24,10 @@ export class SourceCard extends LitElement { } .card:hover { + opacity: 0.9; + } + + .card:active { opacity: 0.8; } diff --git a/packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts b/packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts index 6377773f..7f6604cd 100644 --- a/packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts +++ b/packages/dapp-kit-ui/src/components/vwk-wallet-connect-qrcode/index.ts @@ -2,7 +2,12 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement, nothing, svg } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { Colors } from '../../constants'; -import { DarkCopySvg, LightCopySvg, WalletConnectLogo } from '../../assets'; +import { + CheckSvg, + DarkCopySvg, + LightCopySvg, + WalletConnectLogo, +} from '../../assets'; import { QrCodeUtil } from '../../utils'; import type { Theme, ThemeMode } from '../../constants/theme'; @@ -17,11 +22,11 @@ export class WalletConnectQrCode extends LitElement { } .qrcode-container { - margin: 20px auto 30px auto; + margin: 20px auto 20px auto; background-color: ${Colors.White}; width: 280px; padding: 10px; - border: 1px solid ${Colors.LightGrey}; + border: 1px solid ${Colors.Grey}; border-radius: 20px; display: flex; justify-content: center; @@ -35,6 +40,40 @@ export class WalletConnectQrCode extends LitElement { object-fit: contain; } + .separator { + display: flex; + align-items: center; + padding-bottom: 20px; + } + + .line { + display: flex; + flex-grow: 1; + height: 1px; + } + + .line.LIGHT { + background-color: ${Colors.Grey}; + } + + .line.DARK { + background-color: ${Colors.Grey}; + } + + .or { + font-family: 'Inter', sans-serif; + font-size: 14px; + padding: 0 12px; + } + + .or.LIGHT { + color: ${Colors.Grey}; + } + + .or.DARK { + color: ${Colors.Grey}; + } + button { cursor: pointer; display: flex; @@ -52,7 +91,7 @@ export class WalletConnectQrCode extends LitElement { } button:active { - opacity: 0.7; + opacity: 0.8; } button.LIGHT { @@ -66,8 +105,8 @@ export class WalletConnectQrCode extends LitElement { } .icon { - width: 16px; - height: 16px; + width: 20px; + height: 20px; margin-right: 10px; } `; @@ -78,8 +117,14 @@ export class WalletConnectQrCode extends LitElement { theme: Theme = 'DEFAULT'; @property() walletConnectQRcode?: string = undefined; + @property() + showCopiedIcon = false; override render(): TemplateResult | typeof nothing { + let copyIcon = this.mode === 'LIGHT' ? LightCopySvg : DarkCopySvg; + if (this.showCopiedIcon) { + copyIcon = CheckSvg; + } return this.walletConnectQRcode ? html`
@@ -87,15 +132,16 @@ export class WalletConnectQrCode extends LitElement { ${this.svgWCQrCode(this.walletConnectQRcode)}
+
+
+
or
+
+
@@ -105,6 +151,10 @@ export class WalletConnectQrCode extends LitElement { private onCopy = async (): Promise => { await navigator.clipboard.writeText(this.walletConnectQRcode || ''); + this.showCopiedIcon = true; + setTimeout(() => { + this.showCopiedIcon = false; + }, 3000); }; private svgWCQrCode(uri: string): TemplateResult { diff --git a/packages/dapp-kit-ui/test/listeners.test.ts b/packages/dapp-kit-ui/test/listeners.test.ts new file mode 100644 index 00000000..e0d55d37 --- /dev/null +++ b/packages/dapp-kit-ui/test/listeners.test.ts @@ -0,0 +1,24 @@ +import { vi } from 'vitest'; +import { addResizeListeners } from '../src/utils/listeners'; // Replace 'yourModule' with the actual module path + +describe('addResizeListeners', () => { + it('should call the callback when the window loads', () => { + const callback = vi.fn(); + addResizeListeners(callback); + + // Simulate a 'load' event on the window + window.dispatchEvent(new Event('load')); + + expect(callback).toHaveBeenCalled(); + }); + + it('should call the callback when the window resizes', () => { + const callback = vi.fn(); + addResizeListeners(callback); + + // Simulate a 'resize' event on the window + window.dispatchEvent(new Event('resize')); + + expect(callback).toHaveBeenCalled(); + }); +}); diff --git a/packages/dapp-kit-ui/tsconfig.json b/packages/dapp-kit-ui/tsconfig.json index 49edcff3..17cd689c 100644 --- a/packages/dapp-kit-ui/tsconfig.json +++ b/packages/dapp-kit-ui/tsconfig.json @@ -4,6 +4,6 @@ "target": "es2021", "experimentalDecorators": true }, - "include": ["src/**/*.ts"], + "include": ["src/**/*.ts", "test/listeners.test.ts"], "exclude": [] }