fix: rendering button options issue (#185)

Co-authored-by: Davide Carpini <[email protected]>
vechain · Jan 29, 2024 · b1e6e90 · b1e6e90
1 parent 802c78a
commit b1e6e90
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 60 deletions.
diff --git a/examples/sample-next-app/src/app/layout.tsx b/examples/sample-next-app/src/app/layout.tsx
@@ -3,9 +3,37 @@
 
 import { Inter } from 'next/font/google';
 import './globals.css';
+import type { WalletConnectOptions } from '@vechain/dapp-kit';
+import dynamic from 'next/dynamic';
+
+const DAppKitProvider = dynamic(
+    async () => {
+        const { DAppKitProvider: _DAppKitProvider } = await import(
+            '@vechain/dapp-kit-react'
+        );
+        return _DAppKitProvider;
+    },
+    {
+        ssr: false,
+    },
+);
 
 const inter = Inter({ subsets: ['latin'] });
 
+const walletConnectOptions: WalletConnectOptions = {
+    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+    metadata: {
+        name: 'Sample VeChain dApp',
+        description: 'A sample VeChain dApp',
+        url: typeof window !== 'undefined' ? window.location.origin : '',
+        icons: [
+            typeof window !== 'undefined'
+                ? `${window.location.origin}/images/logo/my-dapp.png`
+                : '',
+        ],
+    },
+};
+
 // eslint-disable-next-line import/no-default-export
 export default function RootLayout({
     children,
@@ -17,7 +45,18 @@ export default function RootLayout({
             <head>
                 <title>Next JS</title>
             </head>
-            <body className={inter.className}>{children}</body>
+            <body className={inter.className}>
+                <DAppKitProvider
+                    genesis="test"
+                    logLevel="DEBUG"
+                    nodeUrl="https://testnet.vechain.org/"
+                    themeMode="DARK"
+                    usePersistence
+                    walletConnectOptions={walletConnectOptions}
+                >
+                    {children}
+                </DAppKitProvider>
+            </body>
         </html>
     );
 }
diff --git a/examples/sample-next-app/src/app/pages/homepage.tsx b/examples/sample-next-app/src/app/pages/homepage.tsx
@@ -1,13 +1,12 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react/function-component-definition */
+'use client'; // This is a client component
 import { type ReactElement, useEffect, useState } from 'react';
 import {
     WalletButton,
-    DAppKitProvider,
     useWalletModal,
     useWallet,
 } from '@vechain/dapp-kit-react';
-import type { WalletConnectOptions } from '@vechain/dapp-kit';
 
 const Button = (): ReactElement => {
     const { account } = useWallet();
@@ -45,31 +44,8 @@ const Button = (): ReactElement => {
     );
 };
 
-const walletConnectOptions: WalletConnectOptions = {
-    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
-    metadata: {
-        name: 'Sample VeChain dApp',
-        description: 'A sample VeChain dApp',
-        url: typeof window !== 'undefined' ? window.location.origin : '',
-        icons: [
-            typeof window !== 'undefined'
-                ? `${window.location.origin}/images/logo/my-dapp.png`
-                : '',
-        ],
-    },
-};
-
 const HomePage = (): ReactElement => {
-    return (
-        <DAppKitProvider
-            genesis="test"
-            nodeUrl="https://testnet.vechain.org/"
-            usePersistence
-            walletConnectOptions={walletConnectOptions}
-        >
-            <Button />
-        </DAppKitProvider>
-    );
+    return <Button />;
 };
 
 // eslint-disable-next-line import/no-default-export

diff --git 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.0",
+    "version": "1.0.3",
     "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
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit-ui",
-    "version": "1.0.0",
+    "version": "1.0.3",
     "private": false,
     "description": "Vanilla JS DAppKit",
     "keywords": [

diff --git a/packages/dapp-kit-ui/src/client.ts b/packages/dapp-kit-ui/src/client.ts
@@ -5,7 +5,7 @@ import { CustomWalletConnectModal, ConnectModalManager } from './classes';
 import {
     type CustomizedStyle,
     dispatchCustomEvent,
-    initModalsAndButtons,
+    initModalAndButton,
 } from './utils';
 import type { SourceInfo, I18n, ThemeMode } from './constants';
 
@@ -40,20 +40,14 @@ export const DAppKitUI = {
         });
 
         // configure bottons and modals options
-        initModalsAndButtons(options);
+        initModalAndButton(options);
         dispatchCustomEvent('vdk-dapp-kit-configured');
 
         initialized = true;
 
         return dappKit;
     },
 
-    configureButtonsAndModals(): void {
-        if (dappKitOptions) {
-            initModalsAndButtons(dappKitOptions);
-        }
-    },
-
     get initialized(): boolean {
         return initialized;
     },
@@ -70,6 +64,10 @@ export const DAppKitUI = {
         return this.get().wallet;
     },
 
+    get configuration(): DAppKitUIOptions | null {
+        return dappKitOptions;
+    },
+
     get modal(): ConnectModalManager {
         return ConnectModalManager.getInstance(this.wallet, {
             modalParent: dappKitOptions?.modalParent,

diff --git a/packages/dapp-kit-ui/src/components/buttons/button.ts b/packages/dapp-kit-ui/src/components/buttons/button.ts
@@ -10,20 +10,27 @@ export class Button extends LitElement {
     constructor() {
         super();
         if (DAppKitUI.initialized) {
-            this.address = DAppKitUI.wallet.state.address ?? '';
             this.initAddressListener();
-            setTimeout(() => {
-                DAppKitUI.configureButtonsAndModals();
-                this.requestUpdate();
-            }, 0);
+            this.setAddressFromState();
+            this.configureButtonUI();
         } else {
             subscribeToCustomEvent('vdk-dapp-kit-configured', () => {
-                this.address = DAppKitUI.wallet.state.address ?? '';
+                this.setAddressFromState();
                 this.initAddressListener();
             });
         }
     }
 
+    private setAddressFromState(): void {
+        this.address = DAppKitUI.wallet.state.address ?? '';
+    }
+
+    private configureButtonUI(): void {
+        this.mode = DAppKitUI.configuration?.themeMode ?? 'LIGHT';
+        this.i18n = DAppKitUI.configuration?.i18n ?? defaultI18n;
+        this.language = DAppKitUI.configuration?.language ?? 'en';
+    }
+
     private initAddressListener(): void {
         subscribeKey(DAppKitUI.wallet.state, 'address', (v) => {
             this.address = v ?? '';

diff --git a/packages/dapp-kit-ui/src/utils/ui-config.ts b/packages/dapp-kit-ui/src/utils/ui-config.ts
@@ -2,7 +2,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
 import { type DAppKitUIOptions } from '../client';
-import { Colors, Font, modalZIndex, defaultI18n } from '../constants';
+import {
+    Colors,
+    Font,
+    modalZIndex,
+    defaultI18n,
+    type I18n,
+} from '../constants';
 
 const getModal = (): HTMLElement | null => document.querySelector('vdk-modal');
 
@@ -62,32 +68,57 @@ export const initStyles = (customizedStyle: CustomizedStyle): void => {
     }
 };
 
-export const initModalsAndButtons = (options: DAppKitUIOptions): void => {
-    // configure theme variables
-    if (options.themeVariables) {
-        initStyles(options.themeVariables);
-    }
-
-    const button = document.querySelector('vdk-button');
-    const modal = document.querySelector('vdk-modal');
-
-    const initOptions = {
+const getInitOptions = (
+    options: DAppKitUIOptions,
+): {
+    mode?: string;
+    i18n?: I18n;
+    language?: string;
+} => {
+    return {
         mode: options.themeMode ?? 'LIGHT',
         i18n: options.i18n ? { ...defaultI18n, ...options.i18n } : defaultI18n,
         language: options.language ?? 'en',
     };
+};
 
+export const initButton = (options: DAppKitUIOptions): void => {
+    const button = document.querySelector('vdk-button');
+    const initOptions = getInitOptions(options);
+    if (!button) {
+        return;
+    }
     for (const [key, value] of Object.entries(initOptions)) {
-        if (button && value) {
+        if (value) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (button as any)[key] = value;
         }
-        if (modal && value) {
+    }
+};
+
+export const initModal = (options: DAppKitUIOptions): void => {
+    const modal = document.querySelector('vdk-modal');
+    const initOptions = getInitOptions(options);
+    if (!modal) {
+        return;
+    }
+    for (const [key, value] of Object.entries(initOptions)) {
+        if (value) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (modal as any)[key] = value;
         }
     }
-
-    // just for modal
-    if (modal && options.onSourceClick) {
+    if (options.onSourceClick) {
         modal.onSourceClick = options.onSourceClick;
     }
 };
+
+export const initModalAndButton = (options: DAppKitUIOptions): void => {
+    // configure theme variables
+    if (options.themeVariables) {
+        initStyles(options.themeVariables);
+    }
+
+    initButton(options);
+    initModal(options);
+};
diff --git a/packages/dapp-kit/package.json b/packages/dapp-kit/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vechain/dapp-kit",
-    "version": "1.0.0",
+    "version": "1.0.3",
     "private": false,
     "homepage": "https://github.com/vechainfoundation/vechain-dapp-kit",
     "repository": "github:vechain/vechain-dapp-kit",