From a34b5367ea2625de2bca238de1704a1eddcd65ab Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Fri, 9 Feb 2024 16:20:57 +0100 Subject: [PATCH] fix: ui improvements, adding mobile and disabled attributes, and fix multiple buttons bug (#193) --- packages/dapp-kit-react/package.json | 2 +- packages/dapp-kit-ui/package.json | 2 +- .../dapp-kit-ui/src/assets/icons/index.ts | 1 + packages/dapp-kit-ui/src/assets/icons/link.ts | 27 +++++++++++++++ .../src/components/buttons/address-button.ts | 34 +++++++++++++++++++ .../src/components/buttons/button.ts | 10 ++++++ .../src/components/buttons/connect-button.ts | 31 ++++++++++++++++- packages/dapp-kit-ui/src/utils/ui-config.ts | 17 +++++----- packages/dapp-kit/package.json | 2 +- .../dapp-kit/src/classes/wallet-manager.ts | 12 ++++--- 10 files changed, 120 insertions(+), 18 deletions(-) create mode 100644 packages/dapp-kit-ui/src/assets/icons/link.ts diff --git a/packages/dapp-kit-react/package.json b/packages/dapp-kit-react/package.json index 95a65d2b..79f524de 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": "1.0.4", + "version": "1.0.6", "private": false, "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit", "repository": "github:vechain/vechain-dapp-kit", diff --git a/packages/dapp-kit-ui/package.json b/packages/dapp-kit-ui/package.json index d1618862..c039f426 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": "1.0.4", + "version": "1.0.6", "private": false, "description": "Vanilla JS DAppKit", "keywords": [ diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts index 1ae8b64f..f4cf63eb 100644 --- a/packages/dapp-kit-ui/src/assets/icons/index.ts +++ b/packages/dapp-kit-ui/src/assets/icons/index.ts @@ -4,3 +4,4 @@ export * from './copy'; export * from './check'; export * from './disconnect'; export * from './wallet-connect'; +export * from './link'; diff --git a/packages/dapp-kit-ui/src/assets/icons/link.ts b/packages/dapp-kit-ui/src/assets/icons/link.ts new file mode 100644 index 00000000..5932824c --- /dev/null +++ b/packages/dapp-kit-ui/src/assets/icons/link.ts @@ -0,0 +1,27 @@ +import { html, svg } from 'lit'; +import { Colors } from '../../constants'; + +export const LinkSvg = svg` + + `; + +export const LightLinkSvg = html` + + ${LinkSvg} + +`; +export const DarkLinkSvg = html` + + ${LinkSvg} + +`; diff --git a/packages/dapp-kit-ui/src/components/buttons/address-button.ts b/packages/dapp-kit-ui/src/components/buttons/address-button.ts index d7671983..ef9d6f6e 100644 --- a/packages/dapp-kit-ui/src/components/buttons/address-button.ts +++ b/packages/dapp-kit-ui/src/components/buttons/address-button.ts @@ -16,6 +16,14 @@ export class AddressButton extends LitElement { gap: 4px; } + button.mobile { + padding: 0px; + } + + button.mobile:hover { + opacity: 0.9; + } + /* Style for the wallet address */ .wallet-address { @@ -29,6 +37,12 @@ export class AddressButton extends LitElement { height: 23px; border-radius: 50%; } + + .address-icon.mobile { + width: 41px; + height: 41px; + border-radius: 12px; + } `, ]; @@ -43,11 +57,31 @@ export class AddressButton extends LitElement { DAppKitUI.modal.open(); }; + @property() + disabled = false; + + @property() + mobile = false; + render(): TemplateResult { + if (this.mobile) { + return html` + `; + } return html` `; + } + const translate = useTranslate(this.i18n, this.language); return html` - `; diff --git a/packages/dapp-kit-ui/src/utils/ui-config.ts b/packages/dapp-kit-ui/src/utils/ui-config.ts index ac5aaf9a..d6eca2cb 100644 --- a/packages/dapp-kit-ui/src/utils/ui-config.ts +++ b/packages/dapp-kit-ui/src/utils/ui-config.ts @@ -83,17 +83,16 @@ const getInitOptions = ( }; export const initButton = (options: DAppKitUIOptions): void => { - const button = document.querySelector('vdk-button'); + const buttons = document.querySelectorAll('vdk-button'); const initOptions = getInitOptions(options); - if (!button) { - return; - } - for (const [key, value] of Object.entries(initOptions)) { - if (value) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (button as any)[key] = value; + buttons.forEach((button) => { + for (const [key, value] of Object.entries(initOptions)) { + if (value) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (button as any)[key] = value; + } } - } + }); }; export const initModal = (options: DAppKitUIOptions): void => { diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json index 54359c63..2a4d1c07 100644 --- a/packages/dapp-kit/package.json +++ b/packages/dapp-kit/package.json @@ -1,6 +1,6 @@ { "name": "@vechain/dapp-kit", - "version": "1.0.4", + "version": "1.0.6", "private": false, "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit", "repository": "github:vechain/vechain-dapp-kit", diff --git a/packages/dapp-kit/src/classes/wallet-manager.ts b/packages/dapp-kit/src/classes/wallet-manager.ts index f4e4064a..622df128 100644 --- a/packages/dapp-kit/src/classes/wallet-manager.ts +++ b/packages/dapp-kit/src/classes/wallet-manager.ts @@ -273,20 +273,22 @@ class WalletManager { }; private getAvailableSources = (): WalletSource[] => { - const wallets: WalletSource[] = ['sync2']; + const wallets: WalletSource[] = []; if (window.vechain) { wallets.push('veworld'); } - if (window.connex) { - wallets.push('sync'); - } - if (this.options.walletConnectOptions) { wallets.push('wallet-connect'); } + wallets.push('sync2'); + + if (window.connex) { + wallets.push('sync'); + } + return wallets; };