Skip to content

Commit

Permalink
Update z index (#144)
Browse files Browse the repository at this point in the history
* chore: update readme

* chore: change readme

* fix: make z-index promgrammable

* chore: make all options configurable

* fix: custom styles

* fix: update tests
  • Loading branch information
darrenvechain authored Dec 5, 2023
1 parent d2ad512 commit dab39ef
Show file tree
Hide file tree
Showing 12 changed files with 110 additions and 33 deletions.
2 changes: 1 addition & 1 deletion .changeset/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"commit": false,
"fixed": [],
"linked": [],
"access": "restricted",
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
Expand Down
2 changes: 1 addition & 1 deletion packages/dapp-kit-react/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vechain/dapp-kit-react",
"version": "0.0.1",
"version": "0.0.2",
"private": false,
"license": "MIT",
"sideEffects": false,
Expand Down
11 changes: 10 additions & 1 deletion packages/dapp-kit-react/src/DAppKitProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
genesis,
walletConnectOptions,
usePersistence = false,
customStyles,
logLevel,
}): React.ReactElement => {
const connex = useMemo(
Expand All @@ -32,8 +33,16 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
walletConnectOptions,
usePersistence,
logLevel,
customStyles,
}),
[nodeUrl, genesis, walletConnectOptions, usePersistence, logLevel],
[
nodeUrl,
genesis,
walletConnectOptions,
usePersistence,
logLevel,
customStyles,
],
);

const [account, setAccount] = useState<string | null>(
Expand Down
9 changes: 3 additions & 6 deletions packages/dapp-kit-react/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
/// <reference types="@vechain/connex" />
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;
Expand All @@ -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;
};

Expand Down
2 changes: 1 addition & 1 deletion packages/dapp-kit-ui/package.json
Original file line number Diff line number Diff line change
@@ -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": [
Expand Down
11 changes: 10 additions & 1 deletion packages/dapp-kit-ui/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -15,6 +20,10 @@ const DAppKitUI = {
CustomWalletConnectModal.getInstance();
}

if (options.customStyles) {
initStyles(options.customStyles);
}

dappKit = new DAppKit(options);

return dappKit;
Expand Down
4 changes: 2 additions & 2 deletions packages/dapp-kit-ui/src/components/connect-modal.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(
Expand Down
1 change: 1 addition & 0 deletions packages/dapp-kit-ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ export * from './client';
export * from './components';
export * from './constants';
export * from './utils';
export * from './styles';
51 changes: 33 additions & 18 deletions packages/dapp-kit-ui/src/modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -40,7 +53,18 @@ class CustomWalletConnectModal implements WCModal {
*/
openModal(options: OpenOptions): Promise<void> {
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();
}

Expand Down Expand Up @@ -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 {
Expand Down
39 changes: 39 additions & 0 deletions packages/dapp-kit-ui/src/styles.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
};
9 changes: 8 additions & 1 deletion packages/dapp-kit-ui/test/connect-button-with-modal.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/dapp-kit/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vechain/dapp-kit",
"version": "0.0.1",
"version": "0.0.2",
"private": false,
"type": "module",
"main": "./dist/index.js",
Expand Down

0 comments on commit dab39ef

Please sign in to comment.