157 create a better flow when a certificate is required for wallet connect

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);
         }
     }
 

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 (
         <div className="container">

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 (
         <div className="container">

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);

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);

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);
 

packages/dapp-kit-react/src/DAppKitProvider.tsx

@@ -23,6 +23,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     walletConnectOptions,
     usePersistence = false,
     logLevel,
+    requireCertificate,
     themeMode,
     themeVariables,
     i18n,
@@ -38,6 +39,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
                 walletConnectOptions,
                 usePersistence,
                 logLevel,
+                requireCertificate,
                 themeVariables,
                 themeMode,
                 i18n,
@@ -51,6 +53,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
             walletConnectOptions,
             usePersistence,
             logLevel,
+            requireCertificate,
             themeVariables,
             themeMode,
             i18n,
@@ -90,7 +93,7 @@ export const DAppKitProvider: React.FC<DAppKitProviderOptions> = ({
     }, []);
     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<DAppKitProviderOptions> = ({
             modal: {
                 open: openModal,
                 close: closeModal,
-                onConnected: onModalConnected,
+                onConnectionStatusChange: onModalConnected,
             },
         };
     }, [connex, account, source, closeModal, openModal, onModalConnected]);

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;
     };
 }

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);

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;
+    }
 `;

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);
+        });
+    }
+}

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<void> {
+        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);
+    }
+}

packages/dapp-kit-ui/src/classes/index.ts

@@ -0,0 +1,2 @@
+export * from './connect-modal-manager';
+export * from './custom-wallet-connect-modal';