From adcacc0fd33c54d2649b35cb8cb0fdd25a7918bc Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Mon, 13 Nov 2023 13:50:07 +0100 Subject: [PATCH] fix: modal responsiveness (#71) * fix: modal responsiveness * fix: viewport * fix: lint warnings * fix: modal --- apps/sample-vanilla-app/index.html | 1 + .../Components/ConnectButtonWithModal.tsx | 3 +- .../Components/ThemeSelector.tsx | 6 ++-- .../src/provider/ThemeProvider.tsx | 7 ++-- packages/vanilla-wallet-kit/index.html | 1 + .../vanilla-wallet-kit/src/class/index.ts | 1 + .../src/class/responsive.ts | 32 +++++++++++++++++++ .../components/base/vwk-base-modal/index.ts | 10 +++--- .../src/components/vwk-connect-modal/index.ts | 5 +-- .../src/constants/breakpoint.ts | 4 +++ .../src/constants/{enums => }/colors.ts | 0 .../src/constants/enums/index.ts | 2 -- .../vanilla-wallet-kit/src/constants/index.ts | 4 ++- .../src/constants/{enums => }/sources.ts | 7 +--- packages/vanilla-wallet-kit/src/modal.ts | 2 +- .../vanilla-wallet-kit/src/utils/index.ts | 2 ++ .../vanilla-wallet-kit/src/utils/listeners.ts | 4 +++ 17 files changed, 66 insertions(+), 25 deletions(-) create mode 100644 packages/vanilla-wallet-kit/src/class/index.ts create mode 100644 packages/vanilla-wallet-kit/src/class/responsive.ts create mode 100644 packages/vanilla-wallet-kit/src/constants/breakpoint.ts rename packages/vanilla-wallet-kit/src/constants/{enums => }/colors.ts (100%) delete mode 100644 packages/vanilla-wallet-kit/src/constants/enums/index.ts rename packages/vanilla-wallet-kit/src/constants/{enums => }/sources.ts (87%) create mode 100644 packages/vanilla-wallet-kit/src/utils/listeners.ts diff --git a/apps/sample-vanilla-app/index.html b/apps/sample-vanilla-app/index.html index 94b9b029..14c9b7c3 100644 --- a/apps/sample-vanilla-app/index.html +++ b/apps/sample-vanilla-app/index.html @@ -2,6 +2,7 @@ + Sample Vanilla App diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx index 0b02dff7..39f0d1f8 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx +++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx @@ -1,3 +1,4 @@ +import type { ReactNode } from 'react'; import { useCallback, useContext, useState } from 'react'; import type { WalletSource } from '@vechainfoundation/wallet-kit'; import type { SourceInfo } from '@vechainfoundation/vanilla-wallet-kit'; @@ -11,7 +12,7 @@ interface ConnectButtonWithModalProps { export const ConnectButtonWithModal = ({ onClose, -}: ConnectButtonWithModalProps) => { +}: ConnectButtonWithModalProps): ReactNode => { const { theme } = useContext(ThemeContext); const handleSourceClick = (e: SourceInfo): void => { diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx index 1563e994..ce303345 100644 --- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx +++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx @@ -1,12 +1,14 @@ // ThemeSelector.js +import type { ReactNode } from 'react'; import React, { useContext } from 'react'; -import { ThemeContext } from '../../provider/ThemeProvider'; +// eslint-disable-next-line import/no-named-as-default import styled from 'styled-components'; +import { ThemeContext } from '../../provider/ThemeProvider'; const Button = styled.button``; -const ThemeSelector = () => { +const ThemeSelector = (): ReactNode => { const { toggleTheme } = useContext(ThemeContext); return ; diff --git a/packages/react-wallet-kit/src/provider/ThemeProvider.tsx b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx index 5a78a342..197ee333 100644 --- a/packages/react-wallet-kit/src/provider/ThemeProvider.tsx +++ b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx @@ -1,8 +1,9 @@ // ThemeProvider.js +import type { ReactNode } from 'react'; import React, { useState, createContext } from 'react'; -import { lightTheme, darkTheme } from '../ConnectWalletButton/Constants'; import { ThemeProvider as StyledThemeProvider } from 'styled-components'; +import { lightTheme, darkTheme } from '../ConnectWalletButton/Constants'; const ThemeContext = createContext({ theme: lightTheme, @@ -10,10 +11,10 @@ const ThemeContext = createContext({ toggleTheme: () => {}, }); -const ThemeProvider = ({ children }: any) => { +const ThemeProvider = ({ children }: { children: ReactNode }): ReactNode => { const [currentTheme, setCurrentTheme] = useState(lightTheme); - const toggleTheme = () => { + const toggleTheme = (): void => { setCurrentTheme((prevTheme) => prevTheme === lightTheme ? darkTheme : lightTheme, ); diff --git a/packages/vanilla-wallet-kit/index.html b/packages/vanilla-wallet-kit/index.html index 312fce50..4fd8dca5 100644 --- a/packages/vanilla-wallet-kit/index.html +++ b/packages/vanilla-wallet-kit/index.html @@ -2,6 +2,7 @@ + Sample Vanilla App diff --git a/packages/vanilla-wallet-kit/src/class/index.ts b/packages/vanilla-wallet-kit/src/class/index.ts new file mode 100644 index 00000000..df34a59e --- /dev/null +++ b/packages/vanilla-wallet-kit/src/class/index.ts @@ -0,0 +1 @@ +export * from './responsive'; diff --git a/packages/vanilla-wallet-kit/src/class/responsive.ts b/packages/vanilla-wallet-kit/src/class/responsive.ts new file mode 100644 index 00000000..b6727843 --- /dev/null +++ b/packages/vanilla-wallet-kit/src/class/responsive.ts @@ -0,0 +1,32 @@ +import { LitElement } from 'lit'; +import { property } from 'lit/decorators'; +import { addResizeListeners } from '../utils'; +import { Breakpoint } from '../constants'; + +export enum Media { + Mobile = 'mobile', + Tablet = 'tablet', + Desktop = 'desktop', +} + +export class ResponsiveLitElement extends LitElement { + @property() + media = Media.Desktop; + + private setCurrentMedia = (): void => { + if (window.screen.width <= Breakpoint.Mobile) { + this.media = Media.Mobile; + return; + } + if (window.screen.width <= Breakpoint.Tablet) { + this.media = Media.Tablet; + return; + } + this.media = Media.Desktop; + }; + + constructor() { + super(); + addResizeListeners(this.setCurrentMedia); + } +} diff --git a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts index 16ad20e2..f3a76025 100644 --- a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts +++ b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts @@ -1,8 +1,8 @@ import type { TemplateResult } from 'lit'; -import { css, html, LitElement } from 'lit'; +import { LitElement, css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit'; -import { Colors } from '../../../constants'; +import { Breakpoint, Colors } from '../../../constants'; @customElement('vwk-base-modal') export class Modal extends LitElement { @@ -22,7 +22,6 @@ export class Modal extends LitElement { .modal { position: absolute; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - box-sizing: border-box; } .modal.LIGHT { @@ -35,7 +34,7 @@ export class Modal extends LitElement { color: ${Colors.LightGrey}; } - @media (max-width: 600px) { + @media (max-width: ${Breakpoint.Mobile}px) { .modal { width: 100%; border-top-left-radius: 16px; @@ -46,7 +45,7 @@ export class Modal extends LitElement { } } - @media (min-width: 600px) { + @media (min-width: ${Breakpoint.Mobile}px) { .modal { width: 350px; top: 50%; @@ -56,6 +55,7 @@ export class Modal extends LitElement { } } `; + @property({ type: Boolean }) open = false; @property() diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts index 09843a0e..3f878546 100644 --- a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts +++ b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts @@ -11,10 +11,7 @@ import { } from '../../assets'; import type { SourceInfo } from '../../constants'; import { Colors, WalletSources } from '../../constants'; -import { - dispatchCustomEvent, - subscribeToCustomEvent, -} from '../../utils/events'; +import { dispatchCustomEvent, subscribeToCustomEvent } from '../../utils'; import { DAppKit } from '../../client'; @customElement('vwk-connect-modal') diff --git a/packages/vanilla-wallet-kit/src/constants/breakpoint.ts b/packages/vanilla-wallet-kit/src/constants/breakpoint.ts new file mode 100644 index 00000000..16da4b1d --- /dev/null +++ b/packages/vanilla-wallet-kit/src/constants/breakpoint.ts @@ -0,0 +1,4 @@ +export const Breakpoint = { + Mobile: 500, + Tablet: 800, +}; diff --git a/packages/vanilla-wallet-kit/src/constants/enums/colors.ts b/packages/vanilla-wallet-kit/src/constants/colors.ts similarity index 100% rename from packages/vanilla-wallet-kit/src/constants/enums/colors.ts rename to packages/vanilla-wallet-kit/src/constants/colors.ts diff --git a/packages/vanilla-wallet-kit/src/constants/enums/index.ts b/packages/vanilla-wallet-kit/src/constants/enums/index.ts deleted file mode 100644 index 810b0c26..00000000 --- a/packages/vanilla-wallet-kit/src/constants/enums/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './colors'; -export * from './sources'; diff --git a/packages/vanilla-wallet-kit/src/constants/index.ts b/packages/vanilla-wallet-kit/src/constants/index.ts index a5d0d46f..129fc84e 100644 --- a/packages/vanilla-wallet-kit/src/constants/index.ts +++ b/packages/vanilla-wallet-kit/src/constants/index.ts @@ -1,2 +1,4 @@ // TODO: use the wallet-kit package instead of this one -export * from './enums'; +export * from './colors'; +export * from './sources'; +export * from './breakpoint'; diff --git a/packages/vanilla-wallet-kit/src/constants/enums/sources.ts b/packages/vanilla-wallet-kit/src/constants/sources.ts similarity index 87% rename from packages/vanilla-wallet-kit/src/constants/enums/sources.ts rename to packages/vanilla-wallet-kit/src/constants/sources.ts index d7afc328..124dfb41 100644 --- a/packages/vanilla-wallet-kit/src/constants/enums/sources.ts +++ b/packages/vanilla-wallet-kit/src/constants/sources.ts @@ -1,9 +1,4 @@ -import { - Sync2Logo, - SyncLogo, - VeWorldLogo, - WalletConnectLogo, -} from '../../assets'; +import { Sync2Logo, SyncLogo, VeWorldLogo, WalletConnectLogo } from '../assets'; enum WalletSource { WalletConnect = 'wallet-connect', diff --git a/packages/vanilla-wallet-kit/src/modal.ts b/packages/vanilla-wallet-kit/src/modal.ts index 6a136da4..869cbcc1 100644 --- a/packages/vanilla-wallet-kit/src/modal.ts +++ b/packages/vanilla-wallet-kit/src/modal.ts @@ -5,7 +5,7 @@ import type { SubscribeModalState, WCModal, } from '@vechainfoundation/wallet-kit'; -import { dispatchCustomEvent, subscribeToCustomEvent } from './utils/events'; +import { dispatchCustomEvent, subscribeToCustomEvent } from './utils'; const MODAL_STATE_EVENT = 'vwk-modal-state-change'; diff --git a/packages/vanilla-wallet-kit/src/utils/index.ts b/packages/vanilla-wallet-kit/src/utils/index.ts index da3465f6..746e5bee 100644 --- a/packages/vanilla-wallet-kit/src/utils/index.ts +++ b/packages/vanilla-wallet-kit/src/utils/index.ts @@ -1 +1,3 @@ export * from './qr-code'; +export * from './listeners'; +export * from './events'; diff --git a/packages/vanilla-wallet-kit/src/utils/listeners.ts b/packages/vanilla-wallet-kit/src/utils/listeners.ts new file mode 100644 index 00000000..5e06d497 --- /dev/null +++ b/packages/vanilla-wallet-kit/src/utils/listeners.ts @@ -0,0 +1,4 @@ +export const addResizeListeners = (callback: () => void): void => { + window.addEventListener('load', callback, false); + window.addEventListener('resize', callback, false); +};