From dab39efc31c614a48a056c5f2a8ace31fed04c4e Mon Sep 17 00:00:00 2001 From: Darren Kelly <107671032+darrenvechain@users.noreply.github.com> Date: Tue, 5 Dec 2023 13:17:56 +0000 Subject: [PATCH] Update z index (#144) * chore: update readme * chore: change readme * fix: make z-index promgrammable * chore: make all options configurable * fix: custom styles * fix: update tests --- .changeset/config.json | 2 +- packages/dapp-kit-react/package.json | 2 +- .../dapp-kit-react/src/DAppKitProvider.tsx | 11 +++- packages/dapp-kit-react/src/types.ts | 9 ++-- packages/dapp-kit-ui/package.json | 2 +- packages/dapp-kit-ui/src/client.ts | 11 +++- .../src/components/connect-modal.ts | 4 +- packages/dapp-kit-ui/src/index.ts | 1 + packages/dapp-kit-ui/src/modal.ts | 51 ++++++++++++------- packages/dapp-kit-ui/src/styles.ts | 39 ++++++++++++++ .../test/connect-button-with-modal.test.ts | 9 +++- packages/dapp-kit/package.json | 2 +- 12 files changed, 110 insertions(+), 33 deletions(-) create mode 100644 packages/dapp-kit-ui/src/styles.ts diff --git a/.changeset/config.json b/.changeset/config.json index 294b24a0..a7972e6a 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -4,7 +4,7 @@ "commit": false, "fixed": [], "linked": [], - "access": "restricted", + "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", "ignore": [] diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index 7048a9ad..a84a040f 100644 --- a/packages/dapp-kit-react/package.json +++ b/packages/dapp-kit-react/package.json @@ -1,6 +1,6 @@ { "name": "@vechain/dapp-kit-react", - "version": "0.0.1", + "version": "0.0.2", "private": false, "license": "MIT", "sideEffects": false, diff --git a/packages/dapp-kit-react/src/DAppKitProvider.tsx b/packages/dapp-kit-react/src/DAppKitProvider.tsx index 5f165222..f5ed4675 100644 --- a/packages/dapp-kit-react/src/DAppKitProvider.tsx +++ b/packages/dapp-kit-react/src/DAppKitProvider.tsx @@ -22,6 +22,7 @@ export const DAppKitProvider: React.FC = ({ genesis, walletConnectOptions, usePersistence = false, + customStyles, logLevel, }): React.ReactElement => { const connex = useMemo( @@ -32,8 +33,16 @@ export const DAppKitProvider: React.FC = ({ walletConnectOptions, usePersistence, logLevel, + customStyles, }), - [nodeUrl, genesis, walletConnectOptions, usePersistence, logLevel], + [ + nodeUrl, + genesis, + walletConnectOptions, + usePersistence, + logLevel, + customStyles, + ], ); const [account, setAccount] = useState( diff --git a/packages/dapp-kit-react/src/types.ts b/packages/dapp-kit-react/src/types.ts index a39d3a1b..5dca4bf0 100644 --- a/packages/dapp-kit-react/src/types.ts +++ b/packages/dapp-kit-react/src/types.ts @@ -1,10 +1,7 @@ /// import type React from 'react'; -import type { - ConnectResponse, - DAppKitOptions, - WalletSource, -} from '@vechain/dapp-kit'; +import type { ConnectResponse, WalletSource } from '@vechain/dapp-kit'; +import { DAppKitUIOptions } from '@vechain/dapp-kit-ui'; export interface AccountState { address: string | null; @@ -15,7 +12,7 @@ export interface AccountState { * Connex Provider Options * @param children - React children */ -export type DAppKitProviderOptions = DAppKitOptions & { +export type DAppKitProviderOptions = DAppKitUIOptions & { children: React.ReactNode; }; diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json index 69b16132..6739ab59 100644 --- a/packages/dapp-kit-ui/package.json +++ b/packages/dapp-kit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@vechain/dapp-kit-ui", - "version": "0.0.1", + "version": "0.0.2", "private": false, "description": "Vanilla js wallet kit", "keywords": [ diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts index eb7ffb23..f341467b 100644 --- a/packages/dapp-kit-ui/src/client.ts +++ b/packages/dapp-kit-ui/src/client.ts @@ -2,11 +2,16 @@ import type { DAppKitOptions, WalletManager } from '@vechain/dapp-kit'; import { DAppKit } from '@vechain/dapp-kit'; import { CustomWalletConnectModal, DAppKitModal } from './modal'; +import { CustomizedStyle, initStyles } from './styles'; let dappKit: DAppKit | null = null; +export type DAppKitUIOptions = DAppKitOptions & { + customStyles?: CustomizedStyle; +}; + const DAppKitUI = { - configure(options: DAppKitOptions): DAppKit { + configure(options: DAppKitUIOptions): DAppKit { if ( options.walletConnectOptions && !options.walletConnectOptions.modal @@ -15,6 +20,10 @@ const DAppKitUI = { CustomWalletConnectModal.getInstance(); } + if (options.customStyles) { + initStyles(options.customStyles); + } + dappKit = new DAppKit(options); return dappKit; diff --git a/packages/dapp-kit-ui/src/components/connect-modal.ts b/packages/dapp-kit-ui/src/components/connect-modal.ts index 179296c5..63635b16 100644 --- a/packages/dapp-kit-ui/src/components/connect-modal.ts +++ b/packages/dapp-kit-ui/src/components/connect-modal.ts @@ -1,7 +1,7 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { OpenOptions, WalletManager } from '@vechain/dapp-kit'; +import type { WalletManager } from '@vechain/dapp-kit'; import { consume } from '@lit/context'; import type { SourceInfo } from '../constants'; import { Font, WalletSources } from '../constants'; @@ -65,7 +65,7 @@ export class ConnectModal extends LitElement { constructor() { super(); - subscribeToCustomEvent('vwk-open-wc-modal', (options: OpenOptions) => { + subscribeToCustomEvent('vwk-open-wc-modal', (options) => { if (isMobile()) { this.openingVeWorld = true; window.open( diff --git a/packages/dapp-kit-ui/src/index.ts b/packages/dapp-kit-ui/src/index.ts index 74e7b2e4..223be7d7 100644 --- a/packages/dapp-kit-ui/src/index.ts +++ b/packages/dapp-kit-ui/src/index.ts @@ -4,3 +4,4 @@ export * from './client'; export * from './components'; export * from './constants'; export * from './utils'; +export * from './styles'; diff --git a/packages/dapp-kit-ui/src/modal.ts b/packages/dapp-kit-ui/src/modal.ts index 25593667..dd988302 100644 --- a/packages/dapp-kit-ui/src/modal.ts +++ b/packages/dapp-kit-ui/src/modal.ts @@ -13,6 +13,19 @@ import { dispatchCustomEvent, subscribeToCustomEvent } from './utils'; const MODAL_STATE_EVENT = 'vwk-modal-state-change'; +const getModal = () => { + const existing = document.querySelector('vwk-connect-modal'); + + if (existing) { + return existing; + } + const element = document.createElement('vwk-connect-modal'); + + document.body.appendChild(element); + + return element; +}; + class CustomWalletConnectModal implements WCModal { private static instance: CustomWalletConnectModal | null = null; @@ -40,7 +53,18 @@ class CustomWalletConnectModal implements WCModal { */ openModal(options: OpenOptions): Promise { DAppKitLogger.debug('CustomWalletConnectModal', 'opening the modal'); - dispatchCustomEvent('vwk-open-wc-modal', options); + + const modal = getModal(); + modal.open = true; + modal.walletConnectQRcode = options.uri; + modal.onClose = () => { + modal.open = false; + }; + + setTimeout(() => { + dispatchCustomEvent('vwk-open-wc-modal', options); + }, 100); + return Promise.resolve(); } @@ -85,24 +109,15 @@ export class DAppKitModal { open(): void { DAppKitLogger.debug('DAppKitModal', 'opening the modal'); - const existingElement = - window.document.querySelector('vwk-connect-modal'); - - if (!existingElement) { - DAppKitLogger.debug( - 'DAppKitModal', - 'OPEN', - 'creating a new element', - ); - - const element = window.document.createElement('vwk-connect-modal'); - - element.open = true; - - window.document.body.appendChild(element); - } + const modal = getModal(); + modal.open = true; + modal.onClose = () => { + modal.open = false; + }; - dispatchCustomEvent('vwk-open-wallet-modal', undefined); + setTimeout(() => { + dispatchCustomEvent('vwk-open-wallet-modal', undefined); + }, 100); } close(): void { diff --git a/packages/dapp-kit-ui/src/styles.ts b/packages/dapp-kit-ui/src/styles.ts new file mode 100644 index 00000000..b8fad55d --- /dev/null +++ b/packages/dapp-kit-ui/src/styles.ts @@ -0,0 +1,39 @@ +import { Colors, Font } from './constants'; +import { modalZIndex } from './constants/z-index'; + +const StyleVariables = { + '--vwk-color-dark-primary': Colors.Dark.Primary, + '--vwk-color-dark-primary-hover': Colors.Dark.PrimaryHover, + '--vwk-color-dark-primary-active': Colors.Dark.PrimaryActive, + '--vwk-color-dark-secondary': Colors.Dark.Secondary, + '--vwk-color-dark-tertiary': Colors.Dark.Tertiary, + '--vwk-color-dark-quaternary': Colors.Dark.Quaternary, + '--vwk-color-light-primary': Colors.Light.Primary, + '--vwk-color-light-primary-hover': Colors.Light.PrimaryHover, + '--vwk-color-light-primary-active': Colors.Light.PrimaryActive, + '--vwk-color-light-secondary': Colors.Light.Secondary, + '--vwk-color-light-tertiary': Colors.Light.Tertiary, + '--vwk-color-light-quaternary': Colors.Light.Quaternary, + '--vwk-color-walletconnectblue': Colors.WalletConnectBlue, + '--vwk-font-family': Font.Family.toString(), + '--vwk-font-size-medium': Font.Size.Medium.toString(), + '--vwk-font-size-large': Font.Size.Large.toString(), + '--vwk-font-weight-medium': Font.Weight.Medium.toString(), + '--vwk-modal-z-index': modalZIndex.toString(), +}; + +export type StyleVariables = keyof typeof StyleVariables; + +export type CustomizedStyle = { + [key in StyleVariables]?: string; +}; + +export const initStyles = (customizedStyle: CustomizedStyle) => { + const root: HTMLElement | null = document.querySelector(':root'); + + if (root) { + for (const [key, value] of Object.entries(customizedStyle)) { + root.style.setProperty(key, value); + } + } +}; diff --git a/packages/dapp-kit-ui/test/connect-button-with-modal.test.ts b/packages/dapp-kit-ui/test/connect-button-with-modal.test.ts index b73f900b..c48bec15 100644 --- a/packages/dapp-kit-ui/test/connect-button-with-modal.test.ts +++ b/packages/dapp-kit-ui/test/connect-button-with-modal.test.ts @@ -13,9 +13,16 @@ import { import { elementQueries } from './helpers/element-queries'; import { WalletSource } from '@vechain/dapp-kit'; +const customStyles = { + '--vwk-color-dark-primary': '#000000', +}; + describe('connect-button-with-modal', () => { beforeEach(() => { - DAppKitUI.configure({ nodeUrl: 'https://mainnet.vechain.org/' }); + DAppKitUI.configure({ + nodeUrl: 'https://mainnet.vechain.org/', + customStyles, + }); }); it('Should callback with source when user clicks a wallet and should render the connected address button once connected', async () => { diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json index c2330f40..c7ed3cd5 100644 --- a/packages/dapp-kit/package.json +++ b/packages/dapp-kit/package.json @@ -1,6 +1,6 @@ { "name": "@vechain/dapp-kit", - "version": "0.0.1", + "version": "0.0.2", "private": false, "type": "module", "main": "./dist/index.js",