feat: add translations and clean props (#145)

vechain · Dec 6, 2023 · 7b8c707 · 7b8c707
1 parent 8960cf3
commit 7b8c707
Show file tree

Hide file tree

Showing 19 changed files with 220 additions and 96 deletions.
diff --git a/packages/dapp-kit-ui/index.html b/packages/dapp-kit-ui/index.html
@@ -8,8 +8,6 @@
         <script crossorigin type="module" src="./index.js"></script>
     </head>
     <body>
-        <vwk-vechain-dapp-connect-kit
-            mode="LIGHT"
-        ></vwk-vechain-dapp-connect-kit>
+        <vwk-vechain-dapp-connect-kit></vwk-vechain-dapp-connect-kit>
     </body>
 </html>
diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts
@@ -3,3 +3,4 @@ export * from './chevron-left';
 export * from './copy';
 export * from './check';
 export * from './disconnect';
+export * from './wallet-connect';
diff --git a/packages/dapp-kit-ui/src/components/address-button-with-modal.ts b/packages/dapp-kit-ui/src/components/address-button-with-modal.ts
@@ -1,15 +1,17 @@
-import type { TemplateResult } from 'lit';
-import { html, LitElement } from 'lit';
+import { html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { Theme, ThemeMode } from '../constants';
+import { defaultI18n, type I18n, type ThemeMode } from '../constants';
 
 @customElement('vwk-connected-address-button-with-modal')
 export class AddressButtonWithModal extends LitElement {
-    @property({ type: String })
+    @property()
     mode: ThemeMode = 'LIGHT';
 
-    @property({ type: String })
-    theme: Theme = 'DEFAULT';
+    @property()
+    i18n: I18n = defaultI18n;
+
+    @property()
+    language = 'en';
 
     @property({ type: String })
     address?: string;
@@ -26,13 +28,13 @@ export class AddressButtonWithModal extends LitElement {
                 <vwk-fonts></vwk-fonts>
                 <vwk-connected-address-button
                     .mode=${this.mode}
-                    .theme=${this.theme}
                     .address=${this.address}
                     .onClick=${this.handleOpen}
                 ></vwk-connected-address-button>
                 <vwk-connected-address-modal
                     .mode=${this.mode}
-                    .theme=${this.theme}
+                    .i18n=${this.i18n}
+                    .language=${this.language}
                     .open=${this.open}
                     .onClose=${this.handleClose}
                     .address=${this.address}

diff --git a/packages/dapp-kit-ui/src/components/address-modal.ts b/packages/dapp-kit-ui/src/components/address-modal.ts
@@ -1,12 +1,17 @@
 import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { SourceInfo } from '../constants';
-import { Font } from '../constants';
+import type { I18n, SourceInfo } from '../constants';
+import { defaultI18n, Font } from '../constants';
 import { buttonStyle, iconButtonStyle } from '../assets/styles';
-import { dispatchCustomEvent, subscribeToCustomEvent } from '../utils';
-import type { Theme, ThemeMode } from '../constants/theme';
-import { friendlyAddress, getPicassoImage } from '../utils/account';
+import type { ThemeMode } from '../constants/theme';
+import {
+    friendlyAddress,
+    getPicassoImage,
+    useTranslate,
+    dispatchCustomEvent,
+    subscribeToCustomEvent,
+} from '../utils';
 import {
     CheckSvg,
     DarkCloseSvg,
@@ -117,7 +122,10 @@ export class AddressModal extends LitElement {
     mode: ThemeMode = 'LIGHT';
 
     @property()
-    theme: Theme = 'DEFAULT';
+    i18n: I18n = defaultI18n;
+
+    @property()
+    language = 'en';
 
     @property()
     walletConnectQRcode?: string = undefined;
@@ -141,6 +149,7 @@ export class AddressModal extends LitElement {
     onClose: () => void = () => nothing;
 
     override render(): TemplateResult {
+        const translate = useTranslate(this.i18n, this.language);
         let copyIcon = this.mode === 'LIGHT' ? LightCopySvg : DarkCopySvg;
         if (this.showCopiedIcon) {
             copyIcon = CheckSvg;
@@ -151,12 +160,11 @@ export class AddressModal extends LitElement {
                 .open=${this.open}
                 .onClose=${this.handleClose}
                 .mode=${this.mode}
-                .theme=${this.theme}
         >
             <div class="modal-container">
                 <div class="modal-header">
                     <div class="icon-button"></div>
-                    <div class="title">Connected</div>
+                    <div class="title">${translate('connected')}</div>
                     <div
                             class="icon-button ${this.mode}"
                             @click=${this.handleClose}
@@ -179,7 +187,7 @@ export class AddressModal extends LitElement {
                 </div>
                 <div class="modal-footer">
                     <button
-                            class="${this.mode} ${this.theme}"
+                            class="${this.mode}"
                             @click=${this.onDisconnectClick}
                     >
                         <div class="disconnect-icon ${this.mode}">
@@ -189,7 +197,7 @@ export class AddressModal extends LitElement {
                                     : DarkDisconnectSvg
                             }
                         </div>
-                        Disconnect
+                        ${translate('disconnect')}
                     </button>
                 </div>
         </vwk-base-modal>

diff --git a/packages/dapp-kit-ui/src/components/base/modal.ts b/packages/dapp-kit-ui/src/components/base/modal.ts
@@ -1,7 +1,7 @@
 import type { PropertyValues, TemplateResult } from 'lit';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import type { Theme, ThemeMode } from '../../constants';
+import type { ThemeMode } from '../../constants';
 import { Breakpoint, Colors } from '../../constants';
 import { modalZIndex } from '../../constants/z-index';
 
@@ -85,8 +85,6 @@ export class Modal extends LitElement {
     open = false;
     @property()
     mode: ThemeMode = 'LIGHT';
-    @property()
-    theme: Theme = 'DEFAULT';
 
     observer = new ResizeObserver(() => {
         this.modalHeight = this.modalSubContainer?.clientHeight ?? 0;
@@ -121,7 +119,7 @@ export class Modal extends LitElement {
                 @click=${this.onClose}
             >
                 <div
-                    class="modal ${this.mode} ${this.theme}"
+                    class="modal ${this.mode}"
                     @click=${this.stopPropagation}
                     style="height: ${this.modalHeight
                         ? `${this.modalHeight}px`

diff --git a/packages/dapp-kit-ui/src/components/connect-button-with-modal.ts b/packages/dapp-kit-ui/src/components/connect-button-with-modal.ts
@@ -3,28 +3,31 @@ import { html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { WalletManager } from '@vechain/dapp-kit';
 import { DAppKitUI } from '../client';
-import type { SourceInfo, Theme, ThemeMode } from '../constants';
+import {
+    defaultI18n,
+    type I18n,
+    type SourceInfo,
+    type ThemeMode,
+} from '../constants';
 import type { DappKitContext } from './provider';
-import { dappKitContext } from './provider';
+import { dappKitContext, defaultDappKitContext } from './provider';
 
 @customElement('vwk-connect-button-with-modal')
 export class ConnectButtonWithModal extends LitElement {
     @consume({ context: dappKitContext })
     @property({ attribute: false })
-    dappKitContext: DappKitContext = {
-        address: '',
-    };
+    dappKitContext: DappKitContext = defaultDappKitContext;
 
     @property()
-    override title = 'Connect Wallet';
-
-    @property({ type: String })
     mode: ThemeMode = 'LIGHT';
 
-    @property({ type: String })
-    theme: Theme = 'DEFAULT';
+    @property()
+    i18n: I18n = defaultI18n;
+
+    @property()
+    language = 'en';
 
-    @property({ type: Boolean })
+    @property()
     open = false;
 
     private get wallet(): WalletManager {
@@ -61,19 +64,21 @@ export class ConnectButtonWithModal extends LitElement {
                 ${this.dappKitContext.address
                     ? html` <vwk-connected-address-button-with-modal
                           .mode=${this.mode}
-                          .theme=${this.theme}
+                          .i18n=${this.i18n}
+                          .language=${this.language}
                           .address=${this.dappKitContext.address}
                           .onDisconnectClick=${this.onDisconnectClick}
                       ></vwk-connected-address-button-with-modal>`
                     : html` <vwk-connect-button
-                              .title=${this.title}
                               .mode=${this.mode}
-                              .theme=${this.theme}
+                              .i18n=${this.i18n}
+                              .language=${this.language}
                               .onClick=${this.handleOpen}
                           ></vwk-connect-button>
                           <vwk-connect-modal
                               .mode=${this.mode}
-                              .theme=${this.theme}
+                              .i18n=${this.i18n}
+                              .language=${this.language}
                               .open=${this.open}
                               .onClose=${this.handleClose}
                               .onSourceClick=${this.onSourceClick}

diff --git a/packages/dapp-kit-ui/src/components/connect-button.ts b/packages/dapp-kit-ui/src/components/connect-button.ts
@@ -1,8 +1,10 @@
 import type { TemplateResult } from 'lit';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { Theme, ThemeMode } from '../constants/theme';
+import type { ThemeMode } from '../constants/theme';
 import { buttonStyle } from '../assets/styles';
+import { defaultI18n, type I18n } from '../constants';
+import { useTranslate } from '../utils';
 
 @customElement('vwk-connect-button')
 export class ConnectButton extends LitElement {
@@ -16,21 +18,22 @@ export class ConnectButton extends LitElement {
     ];
 
     @property()
-    override title = 'Connect Wallet';
+    mode: ThemeMode = 'LIGHT';
 
     @property()
-    mode: ThemeMode = 'LIGHT';
+    i18n: I18n = defaultI18n;
 
     @property()
-    theme: Theme = 'DEFAULT';
+    language = 'en';
 
     @property({ type: Function })
     onClick? = undefined;
 
     override render(): TemplateResult {
+        const translate = useTranslate(this.i18n, this.language);
         return html`
-            <button class="${this.mode} ${this.theme}" @click=${this.onClick}>
-                ${this.title}
+            <button class="${this.mode}" @click=${this.onClick}>
+                ${translate('connect-wallet')}
             </button>
         `;
     }

diff --git a/packages/dapp-kit-ui/src/components/connect-modal.ts b/packages/dapp-kit-ui/src/components/connect-modal.ts
@@ -3,20 +3,20 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { WalletManager } from '@vechain/dapp-kit';
 import { consume } from '@lit/context';
-import type { SourceInfo } from '../constants';
-import { Font, WalletSources } from '../constants';
+import type { I18n, SourceInfo } from '../constants';
+import { defaultI18n, Font, WalletSources } from '../constants';
 import {
     DarkChevronLeftSvg,
     DarkCloseSvg,
     LightChevronLeftSvg,
     LightCloseSvg,
 } from '../assets/icons';
-import { isMobile, subscribeToCustomEvent } from '../utils';
+import { isMobile, subscribeToCustomEvent, useTranslate } from '../utils';
 import { DAppKitUI } from '../client';
-import type { Theme, ThemeMode } from '../constants/theme';
+import type { ThemeMode } from '../constants/theme';
 import { iconButtonStyle } from '../assets/styles';
 import type { DappKitContext } from './provider';
-import { dappKitContext } from './provider';
+import { dappKitContext, defaultDappKitContext } from './provider';
 
 @customElement('vwk-connect-modal')
 export class ConnectModal extends LitElement {
@@ -47,18 +47,23 @@ export class ConnectModal extends LitElement {
 
     @consume({ context: dappKitContext })
     @property({ attribute: false })
-    dappKitContext: DappKitContext = {
-        address: '',
-    };
+    dappKitContext: DappKitContext = defaultDappKitContext;
 
     @property({ type: Boolean })
     open = false;
+
     @property({ type: Boolean })
     openingVeWorld = false;
+
     @property()
     mode: ThemeMode = 'LIGHT';
+
     @property()
-    theme: Theme = 'DEFAULT';
+    i18n: I18n = defaultI18n;
+
+    @property()
+    language = 'en';
+
     @property()
     walletConnectQRcode?: string = undefined;
 
@@ -124,13 +129,13 @@ export class ConnectModal extends LitElement {
     onClose: () => void = () => nothing;
 
     override render(): TemplateResult {
+        const translate = useTranslate(this.i18n, this.language);
         return html`
         <vwk-fonts></vwk-fonts>
         <vwk-base-modal
                 .open=${this.open}
                 .onClose=${this.handleClose}
                 .mode=${this.mode}
-                .theme=${this.theme}
         >
             <div class="modal-container">
                 <div class="modal-header">
@@ -146,7 +151,7 @@ export class ConnectModal extends LitElement {
                               </div>`
                             : html` <div class="icon-button"></div>`
                     }
-                    <div>Connect Wallet</div>
+                    <div>${translate('connect-wallet')}</div>
                     <div
                             class="icon-button ${this.mode}"
                             @click=${this.handleClose}
@@ -160,7 +165,8 @@ export class ConnectModal extends LitElement {
                             ? html` <vwk-wallet-connect-qrcode
                                   .openingVeWorld=${this.openingVeWorld}
                                   .mode=${this.mode}
-                                  .theme=${this.theme}
+                                  .i18n=${this.i18n}
+                                  .language=${this.language}
                                   .walletConnectQRcode=${this
                                       .walletConnectQRcode}
                               ></vwk-wallet-connect-qrcode>`

diff --git a/packages/dapp-kit-ui/src/components/provider/dapp-kit-context-provider.ts b/packages/dapp-kit-ui/src/components/provider/dapp-kit-context-provider.ts
@@ -12,13 +12,15 @@ export const dappKitContext = createContext<DappKitContext>(
     Symbol('dapp-kit-context'),
 );
 
+export const defaultDappKitContext: DappKitContext = {
+    address: '',
+};
+
 @customElement('dapp-kit-context-provider')
 export class DappKitContextProvider extends LitElement {
     @provide({ context: dappKitContext })
     @property({ attribute: false })
-    dappKitContext: DappKitContext = {
-        address: '',
-    };
+    dappKitContext: DappKitContext = defaultDappKitContext;
 
     constructor() {
         super();