From 099e54085332215a1d6cf8621de489a76c601ff3 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Fri, 12 Jan 2024 09:11:30 +0100 Subject: [PATCH] 157 create a better flow when a certificate is required for wallet connect (#170) * fix: fix opening logic * fix: refactor of the dapp-kit-ui * fix: fix dispatch * fix: styles * fix: add i18n and modalParent configuration * fix: unit tests * fix: react package * fix: test js * fix: lint * fix: update all sample apps * feat: add onSourceClick configuration * fix: versions and imports * fix: rename components * fix: readme * fix: null coalish and theme variables * fix: add default i18n languages * fix: minors * feat: return certificate for sync, sync2 and veworld * feat: wip adding certificate request * feat: add signature of the connection certificate for wallet-connect wallets * refactor: modal component * fix: refactor modal name * refactor: dapp-kit * fix: remove DEFAULT_SIGN_IN_MESSAGE * fix: add loader * fix: add loader to other wallets --- .../src/app/app.component.ts | 2 +- .../src/app/pages/homepage.tsx | 6 +- apps/sample-react-app/src/App.tsx | 6 +- apps/sample-svelte-app/src/lib/index.ts | 2 +- apps/sample-vanilla-app/index.js | 2 +- apps/sample-vue-app/src/App.vue | 2 +- .../dapp-kit-react/src/DAppKitProvider.tsx | 7 +- packages/dapp-kit-react/src/types.ts | 4 +- packages/dapp-kit-ui/index.js | 2 +- .../dapp-kit-ui/src/assets/styles/button.ts | 19 +- packages/dapp-kit-ui/src/class/index.ts | 1 - packages/dapp-kit-ui/src/class/responsive.ts | 32 ---- .../src/classes/connect-modal-manager.ts | 72 +++++++ .../classes/custom-wallet-connect-modal.ts | 85 +++++++++ packages/dapp-kit-ui/src/classes/index.ts | 2 + packages/dapp-kit-ui/src/client.ts | 10 +- .../src/components/modals/address-modal.ts | 5 +- .../{ => connect-modal}/connect-modal.ts | 179 +++++++++++------- .../components/modals/connect-modal/index.ts | 4 + .../sign-connection-certificate.ts | 144 ++++++++++++++ .../modals/{ => connect-modal}/source-card.ts | 6 +- .../wallet-connect-qr-code.ts | 10 +- .../src/components/modals/index.ts | 2 - .../src/components/modals/modal.ts | 19 +- packages/dapp-kit-ui/src/constants/i18n.ts | 31 +++ packages/dapp-kit-ui/src/index.ts | 2 +- packages/dapp-kit-ui/src/modal.ts | 147 -------------- packages/dapp-kit-ui/src/utils/events.ts | 12 +- packages/dapp-kit-ui/src/utils/ui-config.ts | 18 ++ packages/dapp-kit-ui/test/qr-code.test.ts | 2 +- packages/dapp-kit/src/certificates.ts | 17 -- .../certificate-wallet.ts | 28 +-- packages/dapp-kit/src/classes/index.ts | 3 + .../src/{ => classes}/wallet-manager.ts | 56 +++++- .../src/{wallets => classes}/wc-wallet.ts | 3 +- .../dapp-kit/src/constants/certificates.ts | 9 + .../genesis-blocks.ts} | 21 -- packages/dapp-kit/src/constants/index.ts | 4 + .../wallet-connect.ts} | 0 .../wallet-settings.ts} | 2 +- packages/dapp-kit/src/dapp-kit.ts | 5 +- packages/dapp-kit/src/index.ts | 18 +- .../src/{wallet-connect => types}/index.ts | 17 +- packages/dapp-kit/src/{ => types}/types.d.ts | 7 +- .../types.d.ts => types/wc-types.d.ts} | 2 + .../convert-vendor-to-signer.ts} | 2 +- .../dapp-kit/src/{ => utils}/create-wallet.ts | 23 ++- .../client.ts => utils/create-wc-client.ts} | 2 +- .../create-wc-modal.ts} | 2 +- .../signer.ts => utils/create-wc-signer.ts} | 17 +- packages/dapp-kit/src/utils/genesis.ts | 21 ++ packages/dapp-kit/src/utils/index.ts | 7 + .../dapp-kit/src/{ => utils}/local-storage.ts | 4 +- packages/dapp-kit/test/create-wallet.test.ts | 2 +- packages/dapp-kit/test/genesis.test.ts | 7 +- .../test/helpers/mocked-sign-client.ts | 2 +- packages/dapp-kit/test/helpers/wc-fixtures.ts | 3 +- .../{wallet-connect => utils}/client.test.ts | 0 .../utils/convert-vendor-to-signer.test.ts | 142 ++++++++++++++ .../{wallet-connect => utils}/signer.test.ts | 8 +- .../web3-modal.test.ts | 0 61 files changed, 842 insertions(+), 427 deletions(-) delete mode 100644 packages/dapp-kit-ui/src/class/index.ts delete mode 100644 packages/dapp-kit-ui/src/class/responsive.ts create mode 100644 packages/dapp-kit-ui/src/classes/connect-modal-manager.ts create mode 100644 packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts create mode 100644 packages/dapp-kit-ui/src/classes/index.ts rename packages/dapp-kit-ui/src/components/modals/{ => connect-modal}/connect-modal.ts (55%) create mode 100644 packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts create mode 100644 packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts rename packages/dapp-kit-ui/src/components/modals/{ => connect-modal}/source-card.ts (89%) rename packages/dapp-kit-ui/src/components/modals/{ => connect-modal}/wallet-connect-qr-code.ts (97%) delete mode 100644 packages/dapp-kit-ui/src/modal.ts delete mode 100644 packages/dapp-kit/src/certificates.ts rename packages/dapp-kit/src/{wallets => classes}/certificate-wallet.ts (67%) create mode 100644 packages/dapp-kit/src/classes/index.ts rename packages/dapp-kit/src/{ => classes}/wallet-manager.ts (78%) rename packages/dapp-kit/src/{wallets => classes}/wc-wallet.ts (86%) create mode 100644 packages/dapp-kit/src/constants/certificates.ts rename packages/dapp-kit/src/{genesis.ts => constants/genesis-blocks.ts} (76%) create mode 100644 packages/dapp-kit/src/constants/index.ts rename packages/dapp-kit/src/{wallet-connect/constants.ts => constants/wallet-connect.ts} (100%) rename packages/dapp-kit/src/{wallet.ts => constants/wallet-settings.ts} (88%) rename packages/dapp-kit/src/{wallet-connect => types}/index.ts (50%) rename packages/dapp-kit/src/{ => types}/types.d.ts (90%) rename packages/dapp-kit/src/{wallet-connect/types.d.ts => types/wc-types.d.ts} (96%) rename packages/dapp-kit/src/{vendor-signer.ts => utils/convert-vendor-to-signer.ts} (97%) rename packages/dapp-kit/src/{ => utils}/create-wallet.ts (77%) rename packages/dapp-kit/src/{wallet-connect/client.ts => utils/create-wc-client.ts} (97%) rename packages/dapp-kit/src/{wallet-connect/web3-modal.ts => utils/create-wc-modal.ts} (96%) rename packages/dapp-kit/src/{wallet-connect/signer.ts => utils/create-wc-signer.ts} (94%) create mode 100644 packages/dapp-kit/src/utils/genesis.ts rename packages/dapp-kit/src/{ => utils}/local-storage.ts (92%) rename packages/dapp-kit/test/{wallet-connect => utils}/client.test.ts (100%) create mode 100644 packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts rename packages/dapp-kit/test/{wallet-connect => utils}/signer.test.ts (91%) rename packages/dapp-kit/test/{wallet-connect => utils}/web3-modal.test.ts (100%) diff --git a/apps/sample-angular-app/src/app/app.component.ts b/apps/sample-angular-app/src/app/app.component.ts index 3f3dbf16..4918d532 100644 --- a/apps/sample-angular-app/src/app/app.component.ts +++ b/apps/sample-angular-app/src/app/app.component.ts @@ -32,7 +32,7 @@ export class AppComponent implements OnInit { handleConnected(DAppKitUI.wallet.state.address); - DAppKitUI.modal.onConnected(handleConnected); + DAppKitUI.modal.onConnectionStatusChange(handleConnected); } } diff --git a/apps/sample-next-app/src/app/pages/homepage.tsx b/apps/sample-next-app/src/app/pages/homepage.tsx index 70883867..894c7776 100644 --- a/apps/sample-next-app/src/app/pages/homepage.tsx +++ b/apps/sample-next-app/src/app/pages/homepage.tsx @@ -11,7 +11,7 @@ import type { WalletConnectOptions } from '@vechain/dapp-kit'; const Button = (): ReactElement => { const { account } = useWallet(); - const { open, onConnected } = useWalletModal(); + const { open, onConnectionStatusChange } = useWalletModal(); const [buttonText, setButtonText] = useState('Connect Custom Button'); useEffect(() => { @@ -29,8 +29,8 @@ const Button = (): ReactElement => { handleConnected(account); - onConnected(handleConnected); - }, [account, onConnected]); + onConnectionStatusChange(handleConnected); + }, [account, onConnectionStatusChange]); return (
diff --git a/apps/sample-react-app/src/App.tsx b/apps/sample-react-app/src/App.tsx index 6e403645..752817e5 100644 --- a/apps/sample-react-app/src/App.tsx +++ b/apps/sample-react-app/src/App.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'; function App() { const { account } = useWallet(); - const { open, onConnected } = useWalletModal(); + const { open, onConnectionStatusChange } = useWalletModal(); const [buttonText, setButtonText] = useState('Connect Custom Button'); useEffect(() => { @@ -25,8 +25,8 @@ function App() { handleConnected(account); - onConnected(handleConnected); - }, [account, onConnected]); + onConnectionStatusChange(handleConnected); + }, [account, onConnectionStatusChange]); return (
diff --git a/apps/sample-svelte-app/src/lib/index.ts b/apps/sample-svelte-app/src/lib/index.ts index a45fda68..98f9f3dd 100644 --- a/apps/sample-svelte-app/src/lib/index.ts +++ b/apps/sample-svelte-app/src/lib/index.ts @@ -41,6 +41,6 @@ setTimeout(() => { handleConnected(DAppKitUI.wallet.state.address); - DAppKitUI.modal.onConnected(handleConnected); + DAppKitUI.modal.onConnectionStatusChange(handleConnected); } }, 100); diff --git a/apps/sample-vanilla-app/index.js b/apps/sample-vanilla-app/index.js index e53aa5d7..4ed22d3a 100644 --- a/apps/sample-vanilla-app/index.js +++ b/apps/sample-vanilla-app/index.js @@ -42,4 +42,4 @@ const handleConnected = (address) => { handleConnected(DAppKitUI.wallet.state.address); -DAppKitUI.modal.onConnected(handleConnected); +DAppKitUI.modal.onConnectionStatusChange(handleConnected); diff --git a/apps/sample-vue-app/src/App.vue b/apps/sample-vue-app/src/App.vue index 7f84a5c3..c680a9ea 100644 --- a/apps/sample-vue-app/src/App.vue +++ b/apps/sample-vue-app/src/App.vue @@ -54,7 +54,7 @@ setTimeout(() => { handleConnected(DAppKitUI.wallet.state.address); - DAppKitUI.modal.onConnected(handleConnected); + DAppKitUI.modal.onConnectionStatusChange(handleConnected); } }, 100); diff --git a/packages/dapp-kit-react/src/DAppKitProvider.tsx b/packages/dapp-kit-react/src/DAppKitProvider.tsx index e5ac8c05..5d7c7ce9 100644 --- a/packages/dapp-kit-react/src/DAppKitProvider.tsx +++ b/packages/dapp-kit-react/src/DAppKitProvider.tsx @@ -23,6 +23,7 @@ export const DAppKitProvider: React.FC = ({ walletConnectOptions, usePersistence = false, logLevel, + requireCertificate, themeMode, themeVariables, i18n, @@ -38,6 +39,7 @@ export const DAppKitProvider: React.FC = ({ walletConnectOptions, usePersistence, logLevel, + requireCertificate, themeVariables, themeMode, i18n, @@ -51,6 +53,7 @@ export const DAppKitProvider: React.FC = ({ walletConnectOptions, usePersistence, logLevel, + requireCertificate, themeVariables, themeMode, i18n, @@ -90,7 +93,7 @@ export const DAppKitProvider: React.FC = ({ }, []); const onModalConnected = useCallback( (callback: (address: string | null) => void) => - DAppKitUI.modal.onConnected(callback), + DAppKitUI.modal.onConnectionStatusChange(callback), [], ); @@ -111,7 +114,7 @@ export const DAppKitProvider: React.FC = ({ modal: { open: openModal, close: closeModal, - onConnected: onModalConnected, + onConnectionStatusChange: onModalConnected, }, }; }, [connex, account, source, closeModal, openModal, onModalConnected]); diff --git a/packages/dapp-kit-react/src/types.ts b/packages/dapp-kit-react/src/types.ts index e4360227..8a653d38 100644 --- a/packages/dapp-kit-react/src/types.ts +++ b/packages/dapp-kit-react/src/types.ts @@ -38,6 +38,8 @@ export interface DAppKitContext { modal: { open: () => void; close: () => void; - onConnected: (callback: (address: string | null) => void) => void; + onConnectionStatusChange: ( + callback: (address: string | null) => void, + ) => void; }; } diff --git a/packages/dapp-kit-ui/index.js b/packages/dapp-kit-ui/index.js index 1a007f35..ae3b1910 100644 --- a/packages/dapp-kit-ui/index.js +++ b/packages/dapp-kit-ui/index.js @@ -42,4 +42,4 @@ const handleConnected = (address) => { handleConnected(DAppKitUI.wallet.state.address); -DAppKitUI.modal.onConnected(handleConnected); +DAppKitUI.modal.onConnectionStatusChange(handleConnected); diff --git a/packages/dapp-kit-ui/src/assets/styles/button.ts b/packages/dapp-kit-ui/src/assets/styles/button.ts index 68ecfa71..f924698c 100644 --- a/packages/dapp-kit-ui/src/assets/styles/button.ts +++ b/packages/dapp-kit-ui/src/assets/styles/button.ts @@ -22,35 +22,42 @@ export const buttonStyle = css` background: var(--vdk-color-light-primary, ${Colors.Light.Primary}); color: var(--vdk-color-light-tertiary, ${Colors.Light.Tertiary}); } - button.LIGHT:hover { + button.LIGHT:hover:not(:disabled) { background: var( --vdk-color-light-primary-hover, ${Colors.Light.PrimaryHover} ); } - button.LIGHT:active { + button.LIGHT:active:not(:disabled) { background: var( --vdk-color-light-primary-active, ${Colors.Light.PrimaryActive} ); } + button.LIGHT:disabled { + opacity: 0.8; + } button.DARK { background: var(--vdk-color-dark-primary, ${Colors.Dark.Primary}); color: var(--vdk-color-dark-tertiary, ${Colors.Dark.Tertiary}); } - button.DARK:hover { + button.DARK:hover:not(:disabled) { background: var( --vdk-color-dark-primary-hover, ${Colors.Dark.PrimaryHover} ); } - button.DARK:active { + button.DARK:active:not(:disabled) { background: var( --vdk-color-dark-primary-active, ${Colors.Dark.PrimaryActive} ); } + + button.DARK:disabled { + opacity: 0.8; + } `; export const iconButtonStyle = css` @@ -83,4 +90,8 @@ export const iconButtonStyle = css` .icon-button.DARK:active { background: var(--vdk-color-dark-primary, ${Colors.Dark.PrimaryActive}); } + + button:disabled { + opacity: 0.8; + } `; diff --git a/packages/dapp-kit-ui/src/class/index.ts b/packages/dapp-kit-ui/src/class/index.ts deleted file mode 100644 index df34a59e..00000000 --- a/packages/dapp-kit-ui/src/class/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './responsive'; diff --git a/packages/dapp-kit-ui/src/class/responsive.ts b/packages/dapp-kit-ui/src/class/responsive.ts deleted file mode 100644 index b6727843..00000000 --- a/packages/dapp-kit-ui/src/class/responsive.ts +++ /dev/null @@ -1,32 +0,0 @@ -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/dapp-kit-ui/src/classes/connect-modal-manager.ts b/packages/dapp-kit-ui/src/classes/connect-modal-manager.ts new file mode 100644 index 00000000..0f5d1300 --- /dev/null +++ b/packages/dapp-kit-ui/src/classes/connect-modal-manager.ts @@ -0,0 +1,72 @@ +import type { WalletManager, WalletSource } from '@vechain/dapp-kit'; +import { DAppKitLogger } from '@vechain/dapp-kit'; +import { subscribeKey } from 'valtio/vanilla/utils'; +import { createModalIfNotPresent, dispatchCustomEvent } from '../utils'; + +export interface ConnectModalManagerOptions { + modalParent?: HTMLElement; +} + +export class ConnectModalManager { + private static instance: ConnectModalManager | null = null; + + private constructor( + private walletManager: WalletManager, + options?: ConnectModalManagerOptions, + ) { + createModalIfNotPresent(options); + } + + public static getInstance( + walletManager: WalletManager, + options?: ConnectModalManagerOptions, + ): ConnectModalManager { + if (!ConnectModalManager.instance) { + ConnectModalManager.instance = new ConnectModalManager( + walletManager, + options, + ); + } + + return ConnectModalManager.instance; + } + + open(): void { + DAppKitLogger.debug('ConnectModalManager', 'opening the modal'); + dispatchCustomEvent('vdk-open-wallet-modal'); + } + + close(): void { + DAppKitLogger.debug('ConnectModalManager', 'closing the modal'); + dispatchCustomEvent('vdk-close-wallet-modal'); + } + + closeWalletConnect(): void { + DAppKitLogger.debug('ConnectModalManager', 'closing wallet connect'); + dispatchCustomEvent('vdk-close-wc-qrcode'); + } + + closeConnectionCertificateRequest(): void { + DAppKitLogger.debug( + 'ConnectModalManager', + 'closing connection certificate request', + ); + dispatchCustomEvent('vdk-close-connection-certificate-request'); + } + + onConnectionStatusChange( + callback: (address: string | null) => void, + ): () => void { + return subscribeKey(this.walletManager.state, 'address', (address) => { + callback(address); + }); + } + + onWalletSelected( + callback: (source: WalletSource | null) => void, + ): () => void { + return subscribeKey(this.walletManager.state, 'source', (source) => { + callback(source); + }); + } +} diff --git a/packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts b/packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts new file mode 100644 index 00000000..71a568ab --- /dev/null +++ b/packages/dapp-kit-ui/src/classes/custom-wallet-connect-modal.ts @@ -0,0 +1,85 @@ +import { EventEmitter } from 'events'; +import type { + OpenOptions, + SubscribeModalState, + WCModal, +} from '@vechain/dapp-kit'; +import { DAppKitLogger } from '@vechain/dapp-kit'; +import { dispatchCustomEvent, subscribeToCustomEvent } from '../utils'; + +const MODAL_STATE_EVENT = 'vdk-modal-state-change'; + +export class CustomWalletConnectModal implements WCModal { + private static instance: CustomWalletConnectModal | null = null; + + private eventEmitter = new EventEmitter(); + + private constructor() { + subscribeToCustomEvent('vdk-close-wc-qrcode', () => { + this.updateModalState({ open: false }); + }); + subscribeToCustomEvent('vdk-open-wc-qrcode', () => { + this.updateModalState({ open: true }); + }); + } + + static getInstance(): CustomWalletConnectModal { + if (!CustomWalletConnectModal.instance) { + CustomWalletConnectModal.instance = new CustomWalletConnectModal(); + } + + return CustomWalletConnectModal.instance; + } + + /** + * WalletConnect + */ + openModal(options: OpenOptions): Promise { + DAppKitLogger.debug('CustomWalletConnectModal', 'opening the wc modal'); + dispatchCustomEvent('vdk-open-wc-qrcode', options); + return Promise.resolve(); + } + + closeModal(): void { + DAppKitLogger.debug('CustomWalletConnectModal', 'closing the modal'); + dispatchCustomEvent('vdk-close-wc-qrcode'); + } + + askForConnectionCertificate(): void { + DAppKitLogger.debug( + 'CustomWalletConnectModal', + 'ask for connection certificate', + ); + dispatchCustomEvent('vdk-close-wc-qrcode'); + dispatchCustomEvent('vdk-request-connection-certificate'); + } + + onConnectionCertificateSigned(): void { + DAppKitLogger.debug( + 'CustomWalletConnectModal', + 'connection certificate signed', + ); + dispatchCustomEvent('vdk-close-wallet-modal'); + dispatchCustomEvent('vdk-close-wc-qrcode'); + dispatchCustomEvent('vdk-close-connection-certificate-request'); + } + + subscribeModal( + callback: (newState: SubscribeModalState) => void, + ): () => void { + DAppKitLogger.debug( + 'CustomWalletConnectModal', + 'subscribing to modal state', + ); + + this.eventEmitter.on(MODAL_STATE_EVENT, callback); + + return () => { + this.eventEmitter.off(MODAL_STATE_EVENT, callback); + }; + } + + private updateModalState(state: SubscribeModalState): void { + this.eventEmitter.emit(MODAL_STATE_EVENT, state); + } +} diff --git a/packages/dapp-kit-ui/src/classes/index.ts b/packages/dapp-kit-ui/src/classes/index.ts new file mode 100644 index 00000000..74211e40 --- /dev/null +++ b/packages/dapp-kit-ui/src/classes/index.ts @@ -0,0 +1,2 @@ +export * from './connect-modal-manager'; +export * from './custom-wallet-connect-modal'; diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts index 30a5bc2f..7025a3e9 100644 --- a/packages/dapp-kit-ui/src/client.ts +++ b/packages/dapp-kit-ui/src/client.ts @@ -1,7 +1,7 @@ /// import type { DAppKitOptions, WalletManager } from '@vechain/dapp-kit'; import { DAppKit } from '@vechain/dapp-kit'; -import { CustomWalletConnectModal, DAppKitModal } from './modal'; +import { CustomWalletConnectModal, ConnectModalManager } from './classes'; import { type CustomizedStyle, dispatchCustomEvent, @@ -34,8 +34,8 @@ export const DAppKitUI = { dappKitOptions = options; if (!dappKit) dappKit = new DAppKit(options); - // init modal so on the first opening it doesn't have to create it - DAppKitModal.getInstance(this.wallet, { + // init modal so that on the first opening it doesn't have to create it + ConnectModalManager.getInstance(this.wallet, { modalParent: options.modalParent, }); @@ -64,8 +64,8 @@ export const DAppKitUI = { return this.get().wallet; }, - get modal(): DAppKitModal { - return DAppKitModal.getInstance(this.wallet, { + get modal(): ConnectModalManager { + return ConnectModalManager.getInstance(this.wallet, { modalParent: dappKitOptions?.modalParent, }); }, diff --git a/packages/dapp-kit-ui/src/components/modals/address-modal.ts b/packages/dapp-kit-ui/src/components/modals/address-modal.ts index afa3dc22..3bde7d03 100644 --- a/packages/dapp-kit-ui/src/components/modals/address-modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/address-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 { I18n, SourceInfo } from '../../constants'; +import type { I18n } from '../../constants'; import { defaultI18n, Font } from '../../constants'; import { buttonStyle, iconButtonStyle } from '../../assets/styles'; import type { ThemeMode } from '../../constants/theme'; @@ -112,9 +112,6 @@ export class AddressModal extends LitElement { @property({ type: String }) address = ''; - @property({ type: Function }) - onSourceClick?: (source?: SourceInfo) => void = undefined; - @property({ type: Function }) onDisconnectClick?: () => void = undefined; diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts similarity index 55% rename from packages/dapp-kit-ui/src/components/modals/connect-modal.ts rename to packages/dapp-kit-ui/src/components/modals/connect-modal/connect-modal.ts index afad496f..846eab5e 100644 --- a/packages/dapp-kit-ui/src/components/modals/connect-modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/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 { WalletManager } from '@vechain/dapp-kit'; +import { DAppKitLogger, type WalletManager } from '@vechain/dapp-kit'; import { type I18n, type SourceInfo, @@ -9,16 +9,16 @@ import { defaultI18n, Font, WalletSources, -} from '../../constants'; +} from '../../../constants'; import { DarkChevronLeftSvg, DarkCloseSvg, LightChevronLeftSvg, LightCloseSvg, -} from '../../assets/icons'; -import { isMobile, subscribeToCustomEvent, useTranslate } from '../../utils'; -import { DAppKitUI } from '../../client'; -import { iconButtonStyle } from '../../assets/styles'; +} from '../../../assets/icons'; +import { isMobile, subscribeToCustomEvent, useTranslate } from '../../../utils'; +import { DAppKitUI } from '../../../client'; +import { iconButtonStyle } from '../../../assets/styles'; @customElement('vdk-connect-modal') export class ConnectModal extends LitElement { @@ -47,28 +47,10 @@ export class ConnectModal extends LitElement { `, ]; - @property({ type: Boolean }) - open = false; - - @property({ type: Boolean }) - openingVeWorld = false; - - @property() - mode: ThemeMode = 'LIGHT'; - - @property() - i18n: I18n = defaultI18n; - - @property() - language = 'en'; - - @property() - walletConnectQRcode?: string = undefined; - constructor() { super(); - subscribeToCustomEvent('vdk-open-wc-modal', (options) => { + subscribeToCustomEvent('vdk-open-wc-qrcode', (options) => { if (isMobile()) { this.openingVeWorld = true; window.open( @@ -81,19 +63,25 @@ export class ConnectModal extends LitElement { this.open = true; this.walletConnectQRcode = options.uri; }); - - subscribeToCustomEvent('vdk-close-wc-modal', () => { + subscribeToCustomEvent('vdk-close-wc-qrcode', () => { this.walletConnectQRcode = undefined; this.openingVeWorld = false; }); - subscribeToCustomEvent('vdk-open-wallet-modal', () => { this.open = true; }); - subscribeToCustomEvent('vdk-close-wallet-modal', () => { this.open = false; }); + subscribeToCustomEvent('vdk-request-connection-certificate', () => { + this.requestForConnectionCertificate = true; + }); + subscribeToCustomEvent( + 'vdk-close-connection-certificate-request', + () => { + this.requestForConnectionCertificate = false; + }, + ); } private get availableSources(): SourceInfo[] { @@ -109,14 +97,22 @@ export class ConnectModal extends LitElement { @property({ type: Function }) onSourceClick = (source?: SourceInfo): void => { if (source) { + if (source.id !== 'wallet-connect') { + this.setWaitingForTheSignature(true); + this.requestForConnectionCertificate = true; + } this.wallet.setSource(source.id); this.wallet .connect() .then(() => { this.requestUpdate(); }) - .finally(() => { - DAppKitUI.modal.close(); + .catch((err): void => { + DAppKitLogger.error( + 'Connection Attempt', + 'error trying to connect', + err, + ); }); } }; @@ -124,19 +120,75 @@ export class ConnectModal extends LitElement { @property({ type: Function }) onClose: () => void = () => nothing; + @property({ type: Boolean }) + open = false; + + @property({ type: Boolean }) + openingVeWorld = false; + + @property() + mode: ThemeMode = 'LIGHT'; + + @property() + i18n: I18n = defaultI18n; + + @property() + language = 'en'; + + @property() + walletConnectQRcode?: string = undefined; + + @property() + requestForConnectionCertificate = false; + + @property() + waitingForTheSignature = false; + + private setWaitingForTheSignature = (value: boolean): void => { + this.waitingForTheSignature = value; + }; + + private renderContent(): TemplateResult | TemplateResult[] { + if (this.requestForConnectionCertificate) { + return html``; + } + if (this.walletConnectQRcode) { + return html` `; + } + return this.availableSources.map( + (source) => + html` `, + ); + } + override render(): TemplateResult { const translate = useTranslate(this.i18n, this.language); return html` - - + -
-
- ${ - this.walletConnectQRcode + > +
+
+ ${this.walletConnectQRcode ? html`
` - : html`
` - } -
${translate('connect-wallet')}
-
`} +
${translate('connect-wallet')}
+
- ${this.mode === 'LIGHT' ? LightCloseSvg : DarkCloseSvg} + > + ${this.mode === 'LIGHT' + ? LightCloseSvg + : DarkCloseSvg} +
+
${this.renderContent()}
-
- ${ - this.walletConnectQRcode - ? html` ` - : this.availableSources.map( - (source) => - html` `, - ) - } -
- - - `; + + `; } private handleBack = (): void => { @@ -186,13 +219,21 @@ export class ConnectModal extends LitElement { }; private handleClose = (): void => { + DAppKitUI.modal.close(); if (this.walletConnectQRcode) { // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal setTimeout(() => { this.handleBack(); + this.wallet.disconnect(); + }, 500); + } + if (this.requestForConnectionCertificate) { + // this timeout is to avoid flickering on close modal animation when the user is in the wallet connect modal + setTimeout(() => { + DAppKitUI.modal.closeConnectionCertificateRequest(); + this.wallet.disconnect(); }, 500); } - DAppKitUI.modal.close(); this.onClose(); }; } diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts new file mode 100644 index 00000000..2caa81bf --- /dev/null +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/index.ts @@ -0,0 +1,4 @@ +export * from './connect-modal'; +export * from './source-card'; +export * from './wallet-connect-qr-code'; +export * from './sign-connection-certificate'; diff --git a/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts new file mode 100644 index 00000000..a5ae77b4 --- /dev/null +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/sign-connection-certificate.ts @@ -0,0 +1,144 @@ +import { css, html, LitElement, nothing, type TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { + Colors, + defaultI18n, + type I18n, + type ThemeMode, +} from '../../../constants'; +import { useTranslate } from '../../../utils'; +import { buttonStyle } from '../../../assets/styles'; +import { DAppKitUI } from '../../../client'; + +@customElement('vdk-sign-connection-certificate') +export class SignConnectionCertificate extends LitElement { + static override styles = [ + buttonStyle, + css` + .signCertificateText { + margin: 20px; + text-align: center; + } + + @keyframes loading { + to { + stroke-dashoffset: 0px; + } + } + + use { + stroke: var( + --vdk-color-walletconnectblue, + ${Colors.WalletConnectBlue} + ); + animation: loading 1s linear infinite; + } + + svg.loader { + position: absolute; + fill: none; + stroke: transparent; + stroke-linecap: round; + stroke-width: 1px; + top: 10; + left: 10; + z-index: 1; + } + `, + ]; + + constructor() { + super(); + this.setSubmitButtonWidth(); + addEventListener('resize', this.setSubmitButtonWidth); + } + + @property() + mode: ThemeMode = 'LIGHT'; + @property() + i18n: I18n = defaultI18n; + @property() + language = 'en'; + @property() + waitingForTheSignature = false; + @property() + // eslint-disable-next-line @typescript-eslint/no-empty-function + setWaitingForTheSignature: (v: boolean) => void = () => {}; + @property() + submitButtonWidth = 0; + + private svgLoaderTemplate(): TemplateResult { + const offset = 2; + const submitButtonWidthMinusOffset = this.submitButtonWidth - offset; + const buttonHeight = 41; + const perimeter = (submitButtonWidthMinusOffset + buttonHeight) * 2; + const dashLength = submitButtonWidthMinusOffset / 2; + const spaceLength = perimeter - dashLength; + return html` + + + + + `; + } + + override render(): TemplateResult | typeof nothing { + const translate = useTranslate(this.i18n, this.language); + + return html` +
+
+ ${translate('sign-connection-certificate-description')} +
+ ${this.waitingForTheSignature + ? this.svgLoaderTemplate() + : nothing} + +
+ `; + } + + private setSubmitButtonWidth = (): void => { + const modalWidth = + document + .querySelector('vdk-modal') + ?.shadowRoot?.querySelector('vdk-connect-modal') + ?.shadowRoot?.querySelector('div')?.clientWidth ?? 0; + this.submitButtonWidth = modalWidth ? modalWidth - 40 : 0; + }; + + private handleSignCertificate = async (): Promise => { + this.setWaitingForTheSignature(true); + await DAppKitUI.wallet.signConnectionCertificate(); + }; +} + +declare global { + interface HTMLElementTagNameMap { + 'vdk-sign-connection-certificate': SignConnectionCertificate; + } +} diff --git a/packages/dapp-kit-ui/src/components/modals/source-card.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/source-card.ts similarity index 89% rename from packages/dapp-kit-ui/src/components/modals/source-card.ts rename to packages/dapp-kit-ui/src/components/modals/connect-modal/source-card.ts index 6a6abcb4..c5f1e31e 100644 --- a/packages/dapp-kit-ui/src/components/modals/source-card.ts +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/source-card.ts @@ -2,9 +2,9 @@ import type { TemplateResult } from 'lit'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import type { WalletManager } from '@vechain/dapp-kit'; -import { Font, type SourceInfo, type ThemeMode } from '../../constants'; -import { buttonStyle } from '../../assets/styles'; -import { DAppKitUI } from '../../client'; +import { Font, type SourceInfo, type ThemeMode } from '../../../constants'; +import { buttonStyle } from '../../../assets/styles'; +import { DAppKitUI } from '../../../client'; @customElement('vdk-source-card') export class SourceCard extends LitElement { diff --git a/packages/dapp-kit-ui/src/components/modals/wallet-connect-qr-code.ts b/packages/dapp-kit-ui/src/components/modals/connect-modal/wallet-connect-qr-code.ts similarity index 97% rename from packages/dapp-kit-ui/src/components/modals/wallet-connect-qr-code.ts rename to packages/dapp-kit-ui/src/components/modals/connect-modal/wallet-connect-qr-code.ts index 0d023bbd..dafa3a76 100644 --- a/packages/dapp-kit-ui/src/components/modals/wallet-connect-qr-code.ts +++ b/packages/dapp-kit-ui/src/components/modals/connect-modal/wallet-connect-qr-code.ts @@ -9,16 +9,16 @@ import { type I18n, IOS_STORE_URL, type ThemeMode, -} from '../../constants'; -import { isAndroid, QrCodeUtil, useTranslate } from '../../utils'; +} from '../../../constants'; +import { isAndroid, QrCodeUtil, useTranslate } from '../../../utils'; import { CheckSvg, DarkCopySvg, LightCopySvg, WalletConnectLogoSvg, -} from '../../assets/icons'; -import { buttonStyle } from '../../assets/styles'; -import { VeWorldLogo } from '../../assets/images'; +} from '../../../assets/icons'; +import { buttonStyle } from '../../../assets/styles'; +import { VeWorldLogo } from '../../../assets/images'; const qrCodeSize = 280; @customElement('vdk-wallet-connect-qrcode') diff --git a/packages/dapp-kit-ui/src/components/modals/index.ts b/packages/dapp-kit-ui/src/components/modals/index.ts index 70b1189b..b62a249d 100644 --- a/packages/dapp-kit-ui/src/components/modals/index.ts +++ b/packages/dapp-kit-ui/src/components/modals/index.ts @@ -2,5 +2,3 @@ export * from './modal'; export * from './base-modal'; export * from './connect-modal'; export * from './address-modal'; -export * from './source-card'; -export * from './wallet-connect-qr-code'; diff --git a/packages/dapp-kit-ui/src/components/modals/modal.ts b/packages/dapp-kit-ui/src/components/modals/modal.ts index 678aa926..6f1dd0f5 100644 --- a/packages/dapp-kit-ui/src/components/modals/modal.ts +++ b/packages/dapp-kit-ui/src/components/modals/modal.ts @@ -1,6 +1,6 @@ -import { html, LitElement, type TemplateResult } from 'lit'; +import { html, LitElement, type TemplateResult, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { DAppKitLogger, type WalletManager } from '@vechain/dapp-kit'; +import { type WalletManager } from '@vechain/dapp-kit'; import { subscribeKey } from 'valtio/vanilla/utils'; import { DAppKitUI } from '../../client'; import { @@ -37,18 +37,7 @@ export class Modal extends LitElement { } @property({ type: Function }) - onSourceClick = (source?: SourceInfo): void => { - if (source) { - this.wallet.setSource(source.id); - this.wallet.connect().catch((err): void => { - DAppKitLogger.error( - 'Source Clicked', - 'error trying to connect', - err, - ); - }); - } - }; + onSourceClick?: (source?: SourceInfo) => void; @property({ type: Function }) onDisconnectClick = (): void => { @@ -70,7 +59,7 @@ export class Modal extends LitElement { .mode=${this.mode} .i18n=${this.i18n} .language=${this.language} - .onSourceClick=${this.onSourceClick} + .onSourceClick=${this.onSourceClick || nothing} >`}
`; diff --git a/packages/dapp-kit-ui/src/constants/i18n.ts b/packages/dapp-kit-ui/src/constants/i18n.ts index 6c9bf6b5..f177999b 100644 --- a/packages/dapp-kit-ui/src/constants/i18n.ts +++ b/packages/dapp-kit-ui/src/constants/i18n.ts @@ -8,6 +8,10 @@ export const defaultI18n: I18n = { disconnect: 'Disconnect', 'opening-veworld': 'Opening VeWorld...', 'get-veworld': 'Get VeWorld', + 'sign-connection-certificate-button': 'Sign Certificate', + 'sign-connection-certificate-description': + 'Proof address is required, please sign a certificate to continue', + 'waiting-signature': 'Waiting for signature...', }, it: { 'connect-wallet': 'Connetti il Wallet', @@ -16,6 +20,10 @@ export const defaultI18n: I18n = { disconnect: 'Disconnetti', 'opening-veworld': 'Apertura di VeWorld...', 'get-veworld': 'Ottieni VeWorld', + 'sign-connection-certificate-button': 'Firma Certificato', + 'sign-connection-certificate-description': + 'È richiesta una firma di certificato per connettersi al wallet.', + 'waiting-signature': 'Attendo firma...', }, fr: { 'connect-wallet': 'Connecter le portefeuille', @@ -24,6 +32,10 @@ export const defaultI18n: I18n = { disconnect: 'Déconnecter', 'opening-veworld': 'Ouverture de VeWorld...', 'get-veworld': 'Obtenir VeWorld', + 'sign-connection-certificate-description': + 'Une signature de certificat est requise pour se connecter au portefeuille.', + 'sign-connection-certificate-button': 'Signer le certificat', + 'waiting-signature': 'En attente de la signature...', }, es: { 'connect-wallet': 'Conectar billetera', @@ -32,6 +44,10 @@ export const defaultI18n: I18n = { disconnect: 'Desconectar', 'opening-veworld': 'Abriendo VeWorld...', 'get-veworld': 'Obtener VeWorld', + 'sign-connection-certificate-description': + 'Se requiere una firma de certificado para conectarse a la billetera.', + 'sign-connection-certificate-button': 'Firmar certificado', + 'waiting-signature': 'Esperando firma...', }, de: { 'connect-wallet': 'Wallet verbinden', @@ -40,6 +56,10 @@ export const defaultI18n: I18n = { disconnect: 'Trennen', 'opening-veworld': 'VeWorld wird geöffnet...', 'get-veworld': 'VeWorld erhalten', + 'sign-connection-certificate-description': + 'Eine Zertifikatssignatur ist erforderlich, um eine Verbindung zur Brieftasche herzustellen.', + 'sign-connection-certificate-button': 'Zertifikat signieren', + 'waiting-signature': 'Warte auf Signatur...', }, zh: { 'connect-wallet': '连接钱包', @@ -48,6 +68,9 @@ export const defaultI18n: I18n = { disconnect: '断开连接', 'opening-veworld': '正在打开 VeWorld...', 'get-veworld': '获取 VeWorld', + 'sign-connection-certificate-description': '连接钱包需要签名证书。', + 'sign-connection-certificate-button': '签名证书', + 'waiting-signature': '等待签名...', }, ja: { 'connect-wallet': 'ウォレットに接続', @@ -56,6 +79,10 @@ export const defaultI18n: I18n = { disconnect: '切断する', 'opening-veworld': 'VeWorld を開いています...', 'get-veworld': 'VeWorld を取得', + 'sign-connection-certificate-description': + 'ウォレットに接続するには証明書の署名が必要です。', + 'sign-connection-certificate-button': '証明書に署名', + 'waiting-signature': '署名を待っています...', }, ru: { 'connect-wallet': 'Подключить кошелек', @@ -64,5 +91,9 @@ export const defaultI18n: I18n = { disconnect: 'Отключить', 'opening-veworld': 'Открытие VeWorld...', 'get-veworld': 'Получить VeWorld', + 'sign-connection-certificate-description': + 'Для подключения к кошельку требуется подпись сертификата.', + 'sign-connection-certificate-button': 'Подписать сертификат', + 'waiting-signature': 'Ожидание подписи...', }, }; diff --git a/packages/dapp-kit-ui/src/index.ts b/packages/dapp-kit-ui/src/index.ts index 767aab1e..d66fd5dd 100644 --- a/packages/dapp-kit-ui/src/index.ts +++ b/packages/dapp-kit-ui/src/index.ts @@ -2,4 +2,4 @@ export * from './client'; export * from './components'; export * from './constants'; export * from './utils'; -export * from './utils/ui-config'; +export * from './classes'; diff --git a/packages/dapp-kit-ui/src/modal.ts b/packages/dapp-kit-ui/src/modal.ts deleted file mode 100644 index 5b3983f0..00000000 --- a/packages/dapp-kit-ui/src/modal.ts +++ /dev/null @@ -1,147 +0,0 @@ -// eslint-disable-next-line unicorn/prefer-node-protocol -import { EventEmitter } from 'events'; -import type { - OpenOptions, - SubscribeModalState, - WalletManager, - WalletSource, - WCModal, -} from '@vechain/dapp-kit'; -import { DAppKitLogger } from '@vechain/dapp-kit'; -import { subscribeKey } from 'valtio/vanilla/utils'; -import { dispatchCustomEvent, subscribeToCustomEvent } from './utils'; - -const MODAL_STATE_EVENT = 'vdk-modal-state-change'; - -const getModal = (): HTMLElement | null => document.querySelector('vdk-modal'); - -const createModalIfNotPresent = (options?: { - modalParent?: HTMLElement; -}): HTMLElement => { - const modal = getModal(); - - if (modal) { - return modal; - } - - DAppKitLogger.debug('DAppKitModal', 'creating a new modal'); - - const newModal = document.createElement('vdk-modal'); - - (options?.modalParent ?? document.body).appendChild(newModal); - - return newModal; -}; - -class CustomWalletConnectModal implements WCModal { - private static instance: CustomWalletConnectModal | null = null; - - private eventEmitter = new EventEmitter(); - - private constructor() { - subscribeToCustomEvent('vdk-close-wc-modal', () => { - this.updateModalState({ open: false }); - }); - subscribeToCustomEvent('vdk-open-wc-modal', () => { - this.updateModalState({ open: true }); - }); - } - - static getInstance(): CustomWalletConnectModal { - if (!CustomWalletConnectModal.instance) { - CustomWalletConnectModal.instance = new CustomWalletConnectModal(); - } - - return CustomWalletConnectModal.instance; - } - - /** - * WalletConnect - */ - openModal(options: OpenOptions): Promise { - DAppKitLogger.debug('CustomWalletConnectModal', 'opening the wc modal'); - dispatchCustomEvent('vdk-open-wc-modal', options); - return Promise.resolve(); - } - - closeModal(): void { - DAppKitLogger.debug('CustomWalletConnectModal', 'closing the modal'); - dispatchCustomEvent('vdk-close-wc-modal'); - } - - subscribeModal( - callback: (newState: SubscribeModalState) => void, - ): () => void { - DAppKitLogger.debug( - 'CustomWalletConnectModal', - 'subscribing to modal state', - ); - - this.eventEmitter.on(MODAL_STATE_EVENT, callback); - - return () => { - this.eventEmitter.off(MODAL_STATE_EVENT, callback); - }; - } - - private updateModalState(state: SubscribeModalState): void { - this.eventEmitter.emit(MODAL_STATE_EVENT, state); - } -} - -export interface DAppKitModalOptions { - modalParent?: HTMLElement; -} - -export class DAppKitModal { - private static instance: DAppKitModal | null = null; - - private constructor( - private walletManager: WalletManager, - options?: DAppKitModalOptions, - ) { - createModalIfNotPresent(options); - } - - public static getInstance( - walletManager: WalletManager, - options?: DAppKitModalOptions, - ): DAppKitModal { - if (!DAppKitModal.instance) { - DAppKitModal.instance = new DAppKitModal(walletManager, options); - } - - return DAppKitModal.instance; - } - - open(): void { - DAppKitLogger.debug('DAppKitModal', 'opening the modal'); - dispatchCustomEvent('vdk-open-wallet-modal'); - } - - close(): void { - DAppKitLogger.debug('DAppKitModal', 'closing the modal'); - dispatchCustomEvent('vdk-close-wallet-modal'); - } - - closeWalletConnect(): void { - DAppKitLogger.debug('DAppKitModal', 'closing wallet connect'); - dispatchCustomEvent('vdk-close-wc-modal'); - } - - onConnected(callback: (address: string | null) => void): () => void { - return subscribeKey(this.walletManager.state, 'address', (address) => { - callback(address); - }); - } - - onWalletSelected( - callback: (source: WalletSource | null) => void, - ): () => void { - return subscribeKey(this.walletManager.state, 'source', (source) => { - callback(source); - }); - } -} - -export { CustomWalletConnectModal }; diff --git a/packages/dapp-kit-ui/src/utils/events.ts b/packages/dapp-kit-ui/src/utils/events.ts index 919017ca..27b277b9 100644 --- a/packages/dapp-kit-ui/src/utils/events.ts +++ b/packages/dapp-kit-ui/src/utils/events.ts @@ -4,8 +4,10 @@ import type { ThemeMode } from '../constants'; export type EventTypes = | 'vdk-dapp-kit-configured' - | 'vdk-open-wc-modal' - | 'vdk-close-wc-modal' + | 'vdk-request-connection-certificate' + | 'vdk-close-connection-certificate-request' + | 'vdk-open-wc-qrcode' + | 'vdk-close-wc-qrcode' | 'vdk-open-wallet-modal' | 'vdk-close-wallet-modal'; @@ -17,8 +19,10 @@ type ThemeOptions = export interface EventArgs { 'vdk-dapp-kit-configured': undefined; - 'vdk-close-wc-modal': undefined; - 'vdk-open-wc-modal': OpenOptions & ThemeOptions; + 'vdk-request-connection-certificate': undefined; + 'vdk-close-connection-certificate-request': undefined; + 'vdk-close-wc-qrcode': undefined; + 'vdk-open-wc-qrcode': OpenOptions & ThemeOptions; 'vdk-open-wallet-modal': ThemeOptions; 'vdk-close-wallet-modal': undefined; } diff --git a/packages/dapp-kit-ui/src/utils/ui-config.ts b/packages/dapp-kit-ui/src/utils/ui-config.ts index 7b4f01f9..fe1e4d05 100644 --- a/packages/dapp-kit-ui/src/utils/ui-config.ts +++ b/packages/dapp-kit-ui/src/utils/ui-config.ts @@ -4,6 +4,24 @@ import { type DAppKitUIOptions } from '../client'; import { Colors, Font, modalZIndex, defaultI18n } from '../constants'; +const getModal = (): HTMLElement | null => document.querySelector('vdk-modal'); + +export const createModalIfNotPresent = (options?: { + modalParent?: HTMLElement; +}): HTMLElement => { + const modal = getModal(); + + if (modal) { + return modal; + } + + const newModal = document.createElement('vdk-modal'); + + (options?.modalParent ?? document.body).appendChild(newModal); + + return newModal; +}; + const ThemeVariables = { '--vdk-color-dark-primary': Colors.Dark.Primary.toString(), '--vdk-color-dark-primary-hover': Colors.Dark.PrimaryHover.toString(), diff --git a/packages/dapp-kit-ui/test/qr-code.test.ts b/packages/dapp-kit-ui/test/qr-code.test.ts index 6c7e8459..aff55d47 100644 --- a/packages/dapp-kit-ui/test/qr-code.test.ts +++ b/packages/dapp-kit-ui/test/qr-code.test.ts @@ -37,7 +37,7 @@ describe('qr-code-modal', () => { connectButton.shadowRoot?.querySelector('button')?.click(); - dispatchCustomEvent('vdk-open-wc-modal', { uri: sampleUri }); + dispatchCustomEvent('vdk-open-wc-qrcode', { uri: sampleUri }); const qrCode = (await elementQueries.getWalletConnectQrCode()) as WalletConnectQrCode; diff --git a/packages/dapp-kit/src/certificates.ts b/packages/dapp-kit/src/certificates.ts deleted file mode 100644 index 3e3bdc56..00000000 --- a/packages/dapp-kit/src/certificates.ts +++ /dev/null @@ -1,17 +0,0 @@ -const DEFAULT_CONNECT_CERT_MESSAGE: Connex.Vendor.CertMessage = { - purpose: 'identification', - payload: { - type: 'text', - content: `The following dApp would like to see your public address: ${window.origin}`, - }, -}; - -const DEFAULT_SIGN_IN_MESSAGE: Connex.Vendor.CertMessage = { - purpose: 'identification', - payload: { - type: 'text', - content: `Sign in to: ${window.origin}`, - }, -}; - -export { DEFAULT_SIGN_IN_MESSAGE, DEFAULT_CONNECT_CERT_MESSAGE }; diff --git a/packages/dapp-kit/src/wallets/certificate-wallet.ts b/packages/dapp-kit/src/classes/certificate-wallet.ts similarity index 67% rename from packages/dapp-kit/src/wallets/certificate-wallet.ts rename to packages/dapp-kit/src/classes/certificate-wallet.ts index f771d260..1a0350a9 100644 --- a/packages/dapp-kit/src/wallets/certificate-wallet.ts +++ b/packages/dapp-kit/src/classes/certificate-wallet.ts @@ -1,34 +1,36 @@ import { Certificate } from 'thor-devkit'; import type { BaseWallet, ConnectResponse, ConnexWallet } from '../types'; -import { DEFAULT_CONNECT_CERT_MESSAGE } from '../certificates'; +import { DEFAULT_CONNECT_CERT_MESSAGE } from '../constants'; /** * A `ConnexWallet` for wallet's that use a certificate connection */ class CertificateBasedWallet implements ConnexWallet { - connectionCertificate: Connex.Vendor.CertMessage; - constructor(private readonly wallet: BaseWallet) { - this.connectionCertificate = DEFAULT_CONNECT_CERT_MESSAGE; - } + connectionCertificate?: Certificate; + constructor(private readonly wallet: BaseWallet) {} connect = async (): Promise => { + const cert = DEFAULT_CONNECT_CERT_MESSAGE; const { annex: { domain, signer, timestamp }, signature, - } = await this.signCert(this.connectionCertificate, {}); + } = await this.signCert(cert, {}); + + this.connectionCertificate = { + ...cert, + signature, + signer, + domain, + timestamp, + }; try { - Certificate.verify({ - ...this.connectionCertificate, - signature, - signer, - domain, - timestamp, - }); + Certificate.verify(this.connectionCertificate); return { account: signer, verified: true, + connectionCertificate: this.connectionCertificate, }; } catch (e) { return { diff --git a/packages/dapp-kit/src/classes/index.ts b/packages/dapp-kit/src/classes/index.ts new file mode 100644 index 00000000..0f251e78 --- /dev/null +++ b/packages/dapp-kit/src/classes/index.ts @@ -0,0 +1,3 @@ +export * from './wallet-manager'; +export * from './certificate-wallet'; +export * from './wc-wallet'; diff --git a/packages/dapp-kit/src/wallet-manager.ts b/packages/dapp-kit/src/classes/wallet-manager.ts similarity index 78% rename from packages/dapp-kit/src/wallet-manager.ts rename to packages/dapp-kit/src/classes/wallet-manager.ts index 90f7543b..3c1660ae 100644 --- a/packages/dapp-kit/src/wallet-manager.ts +++ b/packages/dapp-kit/src/classes/wallet-manager.ts @@ -1,3 +1,4 @@ +import { Certificate } from 'thor-devkit'; import { proxy, subscribe } from 'valtio/vanilla'; import { subscribeKey } from 'valtio/vanilla/utils'; import type { @@ -6,11 +7,9 @@ import type { DAppKitOptions, WalletManagerState, WalletSource, -} from './types'; -import { createWallet } from './create-wallet'; -import { WalletSources } from './wallet'; -import { Storage } from './local-storage'; -import { DAppKitLogger } from './utils'; +} from '../types'; +import { DAppKitLogger, Storage, createWallet } from '../utils'; +import { DEFAULT_CONNECT_CERT_MESSAGE, WalletSources } from '../constants'; class WalletManager { public readonly state: WalletManagerState; @@ -67,15 +66,58 @@ class WalletManager { return wallet; } - get connectionCertificate(): Connex.Vendor.CertMessage | undefined { + get connectionCertificate(): Certificate | undefined { return this.wallet.connectionCertificate; } + // this is needed for wallet connect connections when a connection certificate is required + signConnectionCertificate = async (): Promise => { + const cert = DEFAULT_CONNECT_CERT_MESSAGE; + const { + annex: { domain, signer, timestamp }, + signature, + } = await this.wallet.signCert(cert, {}); + + this.wallet.connectionCertificate = { + ...cert, + signature, + signer, + domain, + timestamp, + }; + + try { + Certificate.verify(this.wallet.connectionCertificate); + this.state.address = signer; + return { + account: signer, + verified: true, + connectionCertificate: this.connectionCertificate, + }; + } catch (e) { + return { + account: signer, + verified: false, + }; + } finally { + this.options.walletConnectOptions?.modal?.onConnectionCertificateSigned?.(); + } + }; + connect = (): Promise => this.wallet .connect() .then((res) => { - this.state.address = res.account; + if ( + this.state.source === 'wallet-connect' && + this.options.requireCertificate && + this.options.walletConnectOptions?.modal + ?.askForConnectionCertificate + ) { + this.options.walletConnectOptions.modal.askForConnectionCertificate(); + } else { + this.state.address = res.account; + } return res; }) .catch((e) => { diff --git a/packages/dapp-kit/src/wallets/wc-wallet.ts b/packages/dapp-kit/src/classes/wc-wallet.ts similarity index 86% rename from packages/dapp-kit/src/wallets/wc-wallet.ts rename to packages/dapp-kit/src/classes/wc-wallet.ts index 3c5ac167..a07ae5f6 100644 --- a/packages/dapp-kit/src/wallets/wc-wallet.ts +++ b/packages/dapp-kit/src/classes/wc-wallet.ts @@ -1,5 +1,4 @@ -import type { WCSigner } from '../wallet-connect'; -import type { ConnectResponse, ConnexWallet } from '../types'; +import type { ConnectResponse, ConnexWallet, WCSigner } from '../types'; class WCWallet implements ConnexWallet { constructor(private readonly signer: WCSigner) {} diff --git a/packages/dapp-kit/src/constants/certificates.ts b/packages/dapp-kit/src/constants/certificates.ts new file mode 100644 index 00000000..7df6a26f --- /dev/null +++ b/packages/dapp-kit/src/constants/certificates.ts @@ -0,0 +1,9 @@ +const DEFAULT_CONNECT_CERT_MESSAGE: Connex.Vendor.CertMessage = { + purpose: 'identification', + payload: { + type: 'text', + content: `The following dApp would like to see your public address: ${window.origin}`, + }, +}; + +export { DEFAULT_CONNECT_CERT_MESSAGE }; diff --git a/packages/dapp-kit/src/genesis.ts b/packages/dapp-kit/src/constants/genesis-blocks.ts similarity index 76% rename from packages/dapp-kit/src/genesis.ts rename to packages/dapp-kit/src/constants/genesis-blocks.ts index 8dc91acb..e15faeed 100644 --- a/packages/dapp-kit/src/genesis.ts +++ b/packages/dapp-kit/src/constants/genesis-blocks.ts @@ -1,5 +1,3 @@ -import type { Genesis } from './types'; - type NetworkType = 'main' | 'test'; export const genesisBlocks: Record = { @@ -48,22 +46,3 @@ export const genesisBlocks: Record = { transactions: [], }, }; - -const normalizeGenesisId = (genesis?: Genesis): string => { - if (!genesis) return genesisBlocks.main.id; - - if (genesis === 'main' || genesis === 'test') - return genesisBlocks[genesis].id; - - return genesis.id; -}; - -const normalizeGenesisBlock = (genesis?: Genesis): Connex.Thor.Block => { - if (!genesis) return genesisBlocks.main; - - if (genesis === 'main' || genesis === 'test') return genesisBlocks[genesis]; - - return genesis; -}; - -export { normalizeGenesisId, normalizeGenesisBlock }; diff --git a/packages/dapp-kit/src/constants/index.ts b/packages/dapp-kit/src/constants/index.ts new file mode 100644 index 00000000..7aab048c --- /dev/null +++ b/packages/dapp-kit/src/constants/index.ts @@ -0,0 +1,4 @@ +export * from './certificates'; +export * from './genesis-blocks'; +export * from './wallet-settings'; +export * from './wallet-connect'; diff --git a/packages/dapp-kit/src/wallet-connect/constants.ts b/packages/dapp-kit/src/constants/wallet-connect.ts similarity index 100% rename from packages/dapp-kit/src/wallet-connect/constants.ts rename to packages/dapp-kit/src/constants/wallet-connect.ts diff --git a/packages/dapp-kit/src/wallet.ts b/packages/dapp-kit/src/constants/wallet-settings.ts similarity index 88% rename from packages/dapp-kit/src/wallet.ts rename to packages/dapp-kit/src/constants/wallet-settings.ts index 40630ecd..bfbc9b81 100644 --- a/packages/dapp-kit/src/wallet.ts +++ b/packages/dapp-kit/src/constants/wallet-settings.ts @@ -2,7 +2,7 @@ * Wallet types */ -import type { WalletConfig, WalletSource } from './types'; +import type { WalletConfig, WalletSource } from '../types'; const DEFAULT_CONFIG: WalletConfig = { requiresCertificate: true, diff --git a/packages/dapp-kit/src/dapp-kit.ts b/packages/dapp-kit/src/dapp-kit.ts index 4474f1c8..85ccc8df 100644 --- a/packages/dapp-kit/src/dapp-kit.ts +++ b/packages/dapp-kit/src/dapp-kit.ts @@ -4,9 +4,8 @@ import { } from '@vechain/connex-driver/dist/index.js'; import { Framework } from '@vechain/connex-framework'; import { blake2b256 } from 'thor-devkit'; -import { normalizeGenesisBlock } from './genesis'; -import { WalletManager } from './wallet-manager'; -import { DAppKitLogger } from './utils/logger'; +import { WalletManager } from './classes'; +import { DAppKitLogger, normalizeGenesisBlock } from './utils'; import type { DAppKitOptions } from './types'; const cache: Record = {}; diff --git a/packages/dapp-kit/src/index.ts b/packages/dapp-kit/src/index.ts index da0c5845..a3317b2d 100644 --- a/packages/dapp-kit/src/index.ts +++ b/packages/dapp-kit/src/index.ts @@ -1,17 +1,5 @@ export * from './dapp-kit'; -export * from './wallet'; -export * from './wallet-manager'; -export * from './wallet-connect'; -export * from './genesis'; +export * from './constants'; +export * from './classes'; export * from './utils'; - -export type { - DAppKitOptions, - ConnexWallet, - WalletSource, - ConnectResponse, - WalletConfig, - BaseWallet, - WalletManagerState, - Genesis, -} from './types'; +export * from './types'; diff --git a/packages/dapp-kit/src/wallet-connect/index.ts b/packages/dapp-kit/src/types/index.ts similarity index 50% rename from packages/dapp-kit/src/wallet-connect/index.ts rename to packages/dapp-kit/src/types/index.ts index 61ed556b..1d1ccb01 100644 --- a/packages/dapp-kit/src/wallet-connect/index.ts +++ b/packages/dapp-kit/src/types/index.ts @@ -1,6 +1,13 @@ -import { newWcSigner } from './signer'; -import { createWcModal } from './web3-modal'; -import { createWcClient } from './client'; +export type { + DAppKitOptions, + ConnexWallet, + WalletSource, + ConnectResponse, + WalletConfig, + BaseWallet, + WalletManagerState, + Genesis, +} from './types'; export type { WCSigner, @@ -11,6 +18,4 @@ export type { WCModal, OpenOptions, SubscribeModalState, -} from './types'; - -export { newWcSigner, createWcModal, createWcClient }; +} from './wc-types'; diff --git a/packages/dapp-kit/src/types.d.ts b/packages/dapp-kit/src/types/types.d.ts similarity index 90% rename from packages/dapp-kit/src/types.d.ts rename to packages/dapp-kit/src/types/types.d.ts index 3f501ccd..3b1c4b25 100644 --- a/packages/dapp-kit/src/types.d.ts +++ b/packages/dapp-kit/src/types/types.d.ts @@ -1,5 +1,6 @@ +import type { Certificate } from 'thor-devkit'; import type { WalletConnectOptions } from '@vechain/dapp-kit'; -import type { LogLevel } from './utils/logger'; +import type { LogLevel } from '../utils/logger'; declare global { interface Window { @@ -35,6 +36,7 @@ interface DAppKitOptions { usePersistence?: boolean; useFirstDetectedSource?: boolean; logLevel?: LogLevel; + requireCertificate?: boolean; } type BaseWallet = Connex.Signer & { @@ -46,12 +48,13 @@ type BaseWallet = Connex.Signer & { */ type ConnexWallet = BaseWallet & { connect: () => Promise; - connectionCertificate?: Connex.Vendor.CertMessage; + connectionCertificate?: Certificate; }; interface ConnectResponse { account: string; verified: boolean; + connectionCertificate?: Certificate; } interface WalletManagerState { diff --git a/packages/dapp-kit/src/wallet-connect/types.d.ts b/packages/dapp-kit/src/types/wc-types.d.ts similarity index 96% rename from packages/dapp-kit/src/wallet-connect/types.d.ts rename to packages/dapp-kit/src/types/wc-types.d.ts index 6705efe7..460a4326 100644 --- a/packages/dapp-kit/src/wallet-connect/types.d.ts +++ b/packages/dapp-kit/src/types/wc-types.d.ts @@ -43,6 +43,8 @@ export interface WCModal { subscribeModal: ( callback: (newState: SubscribeModalState) => void, ) => () => void; + askForConnectionCertificate?: () => void; + onConnectionCertificateSigned?: () => void; } /** diff --git a/packages/dapp-kit/src/vendor-signer.ts b/packages/dapp-kit/src/utils/convert-vendor-to-signer.ts similarity index 97% rename from packages/dapp-kit/src/vendor-signer.ts rename to packages/dapp-kit/src/utils/convert-vendor-to-signer.ts index 02794f2a..0ed1638b 100644 --- a/packages/dapp-kit/src/vendor-signer.ts +++ b/packages/dapp-kit/src/utils/convert-vendor-to-signer.ts @@ -1,4 +1,4 @@ -import { DAppKitLogger } from './utils'; +import { DAppKitLogger } from './logger'; export const convertVendorToSigner = (vendor: Connex.Vendor): Connex.Signer => { return { diff --git a/packages/dapp-kit/src/create-wallet.ts b/packages/dapp-kit/src/utils/create-wallet.ts similarity index 77% rename from packages/dapp-kit/src/create-wallet.ts rename to packages/dapp-kit/src/utils/create-wallet.ts index fc5e3cdb..e9b0c889 100644 --- a/packages/dapp-kit/src/create-wallet.ts +++ b/packages/dapp-kit/src/utils/create-wallet.ts @@ -1,12 +1,19 @@ import { Connex } from '@vechain/connex'; -import type { WCClient, WCModal } from './wallet-connect'; -import { createWcClient, createWcModal, newWcSigner } from './wallet-connect'; -import type { ConnexWallet, DAppKitOptions, WalletSource } from './types'; -import { CertificateBasedWallet } from './wallets/certificate-wallet'; -import { WCWallet } from './wallets/wc-wallet'; +import type { + ConnexWallet, + DAppKitOptions, + WalletSource, + WCClient, + WCModal, +} from '../types'; +import { CertificateBasedWallet } from '../classes/certificate-wallet'; +import { WCWallet } from '../classes/wc-wallet'; +import { createWcClient } from './create-wc-client'; +import { createWcModal } from './create-wc-modal'; +import { createWcSigner } from './create-wc-signer'; +import { convertVendorToSigner } from './convert-vendor-to-signer'; import { normalizeGenesisId } from './genesis'; -import { convertVendorToSigner } from './vendor-signer'; -import { DAppKitLogger } from './utils'; +import { DAppKitLogger } from './logger'; type ICreateWallet = DAppKitOptions & { source: WalletSource; @@ -61,7 +68,7 @@ export const createWallet = ({ const web3Modal: WCModal = modal ?? createWcModal(projectId); - const wallet = newWcSigner({ + const wallet = createWcSigner({ genesisId, wcClient, web3Modal, diff --git a/packages/dapp-kit/src/wallet-connect/client.ts b/packages/dapp-kit/src/utils/create-wc-client.ts similarity index 97% rename from packages/dapp-kit/src/wallet-connect/client.ts rename to packages/dapp-kit/src/utils/create-wc-client.ts index fb2a729c..6ae8cb2b 100644 --- a/packages/dapp-kit/src/wallet-connect/client.ts +++ b/packages/dapp-kit/src/utils/create-wc-client.ts @@ -3,7 +3,7 @@ import type { ResolvedSignClient, WalletConnectOptions, WCClient, -} from './types'; +} from '../types/wc-types'; const _cachedClients: Record = {}; diff --git a/packages/dapp-kit/src/wallet-connect/web3-modal.ts b/packages/dapp-kit/src/utils/create-wc-modal.ts similarity index 96% rename from packages/dapp-kit/src/wallet-connect/web3-modal.ts rename to packages/dapp-kit/src/utils/create-wc-modal.ts index af6f65f7..700b1080 100644 --- a/packages/dapp-kit/src/wallet-connect/web3-modal.ts +++ b/packages/dapp-kit/src/utils/create-wc-modal.ts @@ -1,5 +1,5 @@ import { WalletConnectModal } from '@walletconnect/modal'; -import type { WCModal } from './types'; +import type { WCModal } from '../types/wc-types'; const _cachedModals: Record = {}; diff --git a/packages/dapp-kit/src/wallet-connect/signer.ts b/packages/dapp-kit/src/utils/create-wc-signer.ts similarity index 94% rename from packages/dapp-kit/src/wallet-connect/signer.ts rename to packages/dapp-kit/src/utils/create-wc-signer.ts index ca1dee9b..7180225b 100644 --- a/packages/dapp-kit/src/wallet-connect/signer.ts +++ b/packages/dapp-kit/src/utils/create-wc-signer.ts @@ -5,9 +5,9 @@ import type { } from '@walletconnect/types'; import { getSdkError } from '@walletconnect/utils'; import type { SignClient } from '@walletconnect/sign-client/dist/types/client'; -import { DAppKitLogger } from '../utils'; -import type { WCSigner, WCSignerOptions } from './types'; -import { DefaultMethods } from './constants'; +import type { WCSigner, WCSignerOptions } from '../types/wc-types'; +import { DefaultMethods } from '../constants/wallet-connect'; +import { DAppKitLogger } from './logger'; interface SessionAccount { networkIdentifier: string; @@ -20,7 +20,7 @@ interface SessionAccount { * @param options - The signer options. See {@link WCSignerOptions} * @returns A new {@link WCSigner} */ -export const newWcSigner = ({ +export const createWcSigner = ({ genesisId, wcClient, web3Modal, @@ -151,10 +151,13 @@ export const newWcSigner = ({ endSubscription(); resolve(newSession); }) - .catch(reject); + .catch((e) => { + web3Modal.closeModal(); + reject(e); + }); }); - } finally { - web3Modal.closeModal(); + } catch (e) { + throw new Error(`wc connect failed`); } }; diff --git a/packages/dapp-kit/src/utils/genesis.ts b/packages/dapp-kit/src/utils/genesis.ts new file mode 100644 index 00000000..cfd51644 --- /dev/null +++ b/packages/dapp-kit/src/utils/genesis.ts @@ -0,0 +1,21 @@ +import { genesisBlocks } from '../constants'; +import type { Genesis } from '../types'; + +const normalizeGenesisId = (genesis?: Genesis): string => { + if (!genesis) return genesisBlocks.main.id; + + if (genesis === 'main' || genesis === 'test') + return genesisBlocks[genesis].id; + + return genesis.id; +}; + +const normalizeGenesisBlock = (genesis?: Genesis): Connex.Thor.Block => { + if (!genesis) return genesisBlocks.main; + + if (genesis === 'main' || genesis === 'test') return genesisBlocks[genesis]; + + return genesis; +}; + +export { normalizeGenesisId, normalizeGenesisBlock }; diff --git a/packages/dapp-kit/src/utils/index.ts b/packages/dapp-kit/src/utils/index.ts index 1ff09efd..0156b3b0 100644 --- a/packages/dapp-kit/src/utils/index.ts +++ b/packages/dapp-kit/src/utils/index.ts @@ -1 +1,8 @@ export * from './logger'; +export * from './convert-vendor-to-signer'; +export * from './local-storage'; +export * from './genesis'; +export * from './create-wallet'; +export * from './create-wc-client'; +export * from './create-wc-signer'; +export * from './create-wc-modal'; diff --git a/packages/dapp-kit/src/local-storage.ts b/packages/dapp-kit/src/utils/local-storage.ts similarity index 92% rename from packages/dapp-kit/src/local-storage.ts rename to packages/dapp-kit/src/utils/local-storage.ts index f2cf37e4..113e9738 100644 --- a/packages/dapp-kit/src/local-storage.ts +++ b/packages/dapp-kit/src/utils/local-storage.ts @@ -1,5 +1,5 @@ -import type { WalletSource } from './types'; -import { DAppKitLogger } from './utils'; +import type { WalletSource } from '../types'; +import { DAppKitLogger } from './logger'; const STORAGE_PREFIX = 'dappkit@vechain'; const WALLET_SOURCE_KEY = `${STORAGE_PREFIX}/source`; diff --git a/packages/dapp-kit/test/create-wallet.test.ts b/packages/dapp-kit/test/create-wallet.test.ts index 235c9660..164e1f04 100644 --- a/packages/dapp-kit/test/create-wallet.test.ts +++ b/packages/dapp-kit/test/create-wallet.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from 'vitest'; import type { Connex1 } from '@vechain/connex/esm/signer'; -import { createWallet } from '../src/create-wallet'; +import { createWallet } from '../src/utils'; import type { DAppKitOptions, WalletConnectOptions, diff --git a/packages/dapp-kit/test/genesis.test.ts b/packages/dapp-kit/test/genesis.test.ts index 2c449044..d9164859 100644 --- a/packages/dapp-kit/test/genesis.test.ts +++ b/packages/dapp-kit/test/genesis.test.ts @@ -1,9 +1,6 @@ import { describe, expect, it } from 'vitest'; -import { - genesisBlocks, - normalizeGenesisBlock, - normalizeGenesisId, -} from '../src/genesis'; +import { normalizeGenesisBlock, normalizeGenesisId } from '../src/utils'; +import { genesisBlocks } from '../src/constants'; const customBlock = { number: 0, diff --git a/packages/dapp-kit/test/helpers/mocked-sign-client.ts b/packages/dapp-kit/test/helpers/mocked-sign-client.ts index fe2ee985..d87b0897 100644 --- a/packages/dapp-kit/test/helpers/mocked-sign-client.ts +++ b/packages/dapp-kit/test/helpers/mocked-sign-client.ts @@ -5,7 +5,7 @@ import type { } from '@walletconnect/types/dist/types/sign-client/engine'; import type { SessionTypes } from '@walletconnect/types'; import type { ResolvedSignClient } from '../../src'; -import { DefaultMethods } from '../../src/wallet-connect/constants'; +import { DefaultMethods } from '../../src'; import { wcSessionStruct } from './wc-fixtures'; import { address, mockedConnexSigner } from './mocked-signer'; import { randomUUID } from 'node:crypto'; diff --git a/packages/dapp-kit/test/helpers/wc-fixtures.ts b/packages/dapp-kit/test/helpers/wc-fixtures.ts index d670bdc9..4c11c725 100644 --- a/packages/dapp-kit/test/helpers/wc-fixtures.ts +++ b/packages/dapp-kit/test/helpers/wc-fixtures.ts @@ -1,6 +1,5 @@ import type { SessionTypes, SignClientTypes } from '@walletconnect/types'; -import { normalizeGenesisBlock } from '../../src/genesis'; -import { DefaultMethods } from '../../src/wallet-connect/constants'; +import { normalizeGenesisBlock, DefaultMethods } from '../../src'; import { address } from './mocked-signer'; const wcMetadata: SignClientTypes.Options['metadata'] = { diff --git a/packages/dapp-kit/test/wallet-connect/client.test.ts b/packages/dapp-kit/test/utils/client.test.ts similarity index 100% rename from packages/dapp-kit/test/wallet-connect/client.test.ts rename to packages/dapp-kit/test/utils/client.test.ts diff --git a/packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts b/packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts new file mode 100644 index 00000000..64b3c7c5 --- /dev/null +++ b/packages/dapp-kit/test/utils/convert-vendor-to-signer.test.ts @@ -0,0 +1,142 @@ +import { convertVendorToSigner } from '../../src'; +import { vi, it, describe, expect } from 'vitest'; + +describe('convertVendorToSigner', () => { + it('should return the correct message', async () => { + const gasMock = vi.fn(); + const signerMock = vi.fn(); + const dependsOnMock = vi.fn(); + const linkMock = vi.fn(); + const commentMock = vi.fn(); + const delegateMock = vi.fn(); + const acceptedMock = vi.fn(); + const requestMock = vi.fn(); + const mockSign = vi.fn(() => ({ + gas: gasMock, + signer: signerMock, + dependsOn: dependsOnMock, + link: linkMock, + comment: commentMock, + delegate: delegateMock, + accepted: acceptedMock, + request: requestMock, + })); + const vendorMock = { + sign: mockSign, + }; + + // Create a fake transaction message and options + const fakeMsg = 'Your fake transaction message'; + const fakeOptions = { + gas: 100000, + }; + + // Call the function with the mock + const signer = convertVendorToSigner(vendorMock as Connex.Vendor); + await signer.signTx([{ to: 'address', value: fakeMsg }], fakeOptions); + + expect(mockSign).toHaveBeenCalledWith('tx', [ + { + to: 'address', + value: fakeMsg, + }, + ]); + + await signer.signCert( + { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }, + {}, + ); + expect(mockSign).toHaveBeenCalledWith('cert', { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }); + + expect(gasMock).toHaveBeenCalledWith(fakeOptions.gas); + expect(requestMock).toHaveBeenCalled(); + }); + it('should call it with multiple options', async () => { + const gasMock = vi.fn(); + const signerMock = vi.fn(); + const dependsOnMock = vi.fn(); + const linkMock = vi.fn(); + const commentMock = vi.fn(); + const delegateMock = vi.fn(); + const acceptedMock = vi.fn(); + const requestMock = vi.fn(); + const mockSign = vi.fn(() => ({ + gas: gasMock, + signer: signerMock, + dependsOn: dependsOnMock, + link: linkMock, + comment: commentMock, + delegate: delegateMock, + accepted: acceptedMock, + request: requestMock, + })); + const vendorMock = { + sign: mockSign, + }; + + // Create a fake transaction message and options + const fakeMsg = 'Your fake transaction message'; + const fakeOptions = { + signer: '0x1234567890', + dependsOn: '0x0987654321', + link: 'https://example.com', + comment: 'This is a comment', + onAccepted: () => {}, + delegator: { + url: 'https://example.com', + signer: '0x1234567890', + }, + }; + + // Call the function with the mock + const signer = convertVendorToSigner(vendorMock); + await signer.signTx([{ to: 'address', value: fakeMsg }], fakeOptions); + expect(mockSign).toHaveBeenCalledWith('tx', [ + { + to: 'address', + value: fakeMsg, + }, + ]); + await signer.signCert( + { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }, + fakeOptions, + ); + expect(mockSign).toHaveBeenCalledWith('cert', { + purpose: 'identification', + payload: { + type: 'text', + content: '', + }, + }); + + expect(gasMock).not.toHaveBeenCalled(); + expect(signerMock).toHaveBeenCalledWith(fakeOptions.signer); + expect(dependsOnMock).toHaveBeenCalledWith(fakeOptions.dependsOn); + expect(linkMock).toHaveBeenCalledWith(fakeOptions.link); + expect(commentMock).toHaveBeenCalledWith(fakeOptions.comment); + expect(delegateMock).toHaveBeenCalledWith( + fakeOptions.delegator.url, + fakeOptions.delegator.signer, + ); + expect(acceptedMock).toHaveBeenCalledWith(fakeOptions.onAccepted); + expect(requestMock).toHaveBeenCalled(); + }); +}); diff --git a/packages/dapp-kit/test/wallet-connect/signer.test.ts b/packages/dapp-kit/test/utils/signer.test.ts similarity index 91% rename from packages/dapp-kit/test/wallet-connect/signer.test.ts rename to packages/dapp-kit/test/utils/signer.test.ts index 209f6e15..0b255841 100644 --- a/packages/dapp-kit/test/wallet-connect/signer.test.ts +++ b/packages/dapp-kit/test/utils/signer.test.ts @@ -2,9 +2,9 @@ import { describe, expect, it, vi } from 'vitest'; import { SignClient } from '@walletconnect/sign-client'; import type { SignClientTypes } from '@walletconnect/types'; import type { WCModal, WCSigner } from '../../src'; -import { createWcClient, newWcSigner } from '../../src'; +import { createWcClient, createWcSigner } from '../../src'; import { mockedSignClient } from '../helpers/mocked-sign-client'; -import { normalizeGenesisId } from '../../src/genesis'; +import { normalizeGenesisId } from '../../src'; import { address } from '../helpers/mocked-signer'; vi.spyOn(SignClient, 'init').mockResolvedValue(mockedSignClient); @@ -26,7 +26,7 @@ const customModal: WCModal = { }; const createNewSignClient = (): WCSigner => - newWcSigner({ + createWcSigner({ genesisId: normalizeGenesisId('main'), wcClient: createWcClient({ projectId, metadata }), onDisconnected: () => { @@ -35,7 +35,7 @@ const createNewSignClient = (): WCSigner => web3Modal: customModal, }); -describe('newWcSigner', () => { +describe('createWcSigner', () => { it('can connect', async () => { const signer = createNewSignClient(); diff --git a/packages/dapp-kit/test/wallet-connect/web3-modal.test.ts b/packages/dapp-kit/test/utils/web3-modal.test.ts similarity index 100% rename from packages/dapp-kit/test/wallet-connect/web3-modal.test.ts rename to packages/dapp-kit/test/utils/web3-modal.test.ts