From 7b8c70716dac0d919c7b0102c680f581f1a7f8a5 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Wed, 6 Dec 2023 09:14:02 +0100 Subject: [PATCH] feat: add translations and clean props (#145) --- packages/dapp-kit-ui/index.html | 4 +- .../dapp-kit-ui/src/assets/icons/index.ts | 1 + .../components/address-button-with-modal.ts | 18 ++--- .../src/components/address-modal.ts | 28 +++++--- .../dapp-kit-ui/src/components/base/modal.ts | 6 +- .../components/connect-button-with-modal.ts | 35 ++++++---- .../src/components/connect-button.ts | 15 ++-- .../src/components/connect-modal.ts | 30 ++++---- .../provider/dapp-kit-context-provider.ts | 8 ++- .../dapp-kit-ui/src/components/source-card.ts | 12 +--- .../components/vechain-dapp-connect-kit.ts | 14 ++-- .../src/components/wallet-connect-qr-code.ts | 45 +++++++----- packages/dapp-kit-ui/src/constants/i18n.ts | 68 +++++++++++++++++++ packages/dapp-kit-ui/src/constants/index.ts | 2 +- packages/dapp-kit-ui/src/constants/theme.ts | 2 - packages/dapp-kit-ui/src/utils/index.ts | 2 + .../dapp-kit-ui/src/utils/use-translate.ts | 7 ++ .../dapp-kit-ui/test/utils/listeners.test.ts | 2 +- .../test/utils/use-translate.test.ts | 17 +++++ 19 files changed, 220 insertions(+), 96 deletions(-) create mode 100644 packages/dapp-kit-ui/src/constants/i18n.ts create mode 100644 packages/dapp-kit-ui/src/utils/use-translate.ts create mode 100644 packages/dapp-kit-ui/test/utils/use-translate.test.ts diff --git a/packages/dapp-kit-ui/index.html b/packages/dapp-kit-ui/index.html index 3071e131..fa0a5027 100644 --- a/packages/dapp-kit-ui/index.html +++ b/packages/dapp-kit-ui/index.html @@ -8,8 +8,6 @@ - + diff --git a/packages/dapp-kit-ui/src/assets/icons/index.ts b/packages/dapp-kit-ui/src/assets/icons/index.ts index 2ed8f481..1ae8b64f 100644 --- 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 index cbccb3e5..1966b85c 100644 --- 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 { 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} >
-
Connected
+
${translate('connected')}
diff --git a/packages/dapp-kit-ui/src/components/base/modal.ts b/packages/dapp-kit-ui/src/components/base/modal.ts index 995fbe30..bec78808 100644 --- 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} >
- ${this.title} + `; } diff --git a/packages/dapp-kit-ui/src/components/connect-modal.ts b/packages/dapp-kit-ui/src/components/connect-modal.ts index 63635b16..710b4121 100644 --- 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`
@@ -146,7 +151,7 @@ export class ConnectModal extends LitElement {
` : html`
` } -
Connect Wallet
+
${translate('connect-wallet')}
` 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 index 5b0dcd26..6e1eda74 100644 --- 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( 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(); diff --git a/packages/dapp-kit-ui/src/components/source-card.ts b/packages/dapp-kit-ui/src/components/source-card.ts index a5785d54..1e0a8b61 100644 --- a/packages/dapp-kit-ui/src/components/source-card.ts +++ b/packages/dapp-kit-ui/src/components/source-card.ts @@ -2,12 +2,7 @@ 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 Theme, - type ThemeMode, -} from '../constants'; +import { Font, type SourceInfo, type ThemeMode } from '../constants'; import { buttonStyle } from '../assets/styles'; import { DAppKitUI } from '../client'; @@ -38,9 +33,6 @@ export class SourceCard extends LitElement { @property() mode: ThemeMode = 'LIGHT'; - @property() - theme: Theme = 'DEFAULT'; - @property() source?: SourceInfo = undefined; @@ -55,7 +47,7 @@ export class SourceCard extends LitElement { override render(): TemplateResult { return html`
${this.openingVeWorld ? html`
- Opening VeWorld... + ${translate('opening-veworld')}
` : nothing} ${this.openingVeWorld ? html`` : nothing}
-
-
or
-
+
+
or
+
-
`; diff --git a/packages/dapp-kit-ui/src/constants/i18n.ts b/packages/dapp-kit-ui/src/constants/i18n.ts new file mode 100644 index 00000000..6c9bf6b5 --- /dev/null +++ b/packages/dapp-kit-ui/src/constants/i18n.ts @@ -0,0 +1,68 @@ +export type I18n = Record>; + +export const defaultI18n: I18n = { + en: { + 'connect-wallet': 'Connect Wallet', + 'copy-to-clipboard': 'Copy to Clipboard', + connected: 'Connected', + disconnect: 'Disconnect', + 'opening-veworld': 'Opening VeWorld...', + 'get-veworld': 'Get VeWorld', + }, + it: { + 'connect-wallet': 'Connetti il Wallet', + 'copy-to-clipboard': 'Copia', + connected: 'Connesso', + disconnect: 'Disconnetti', + 'opening-veworld': 'Apertura di VeWorld...', + 'get-veworld': 'Ottieni VeWorld', + }, + fr: { + 'connect-wallet': 'Connecter le portefeuille', + 'copy-to-clipboard': 'Copier dans le presse-papiers', + connected: 'Connecté', + disconnect: 'Déconnecter', + 'opening-veworld': 'Ouverture de VeWorld...', + 'get-veworld': 'Obtenir VeWorld', + }, + es: { + 'connect-wallet': 'Conectar billetera', + 'copy-to-clipboard': 'Copiar al portapapeles', + connected: 'Conectado', + disconnect: 'Desconectar', + 'opening-veworld': 'Abriendo VeWorld...', + 'get-veworld': 'Obtener VeWorld', + }, + de: { + 'connect-wallet': 'Wallet verbinden', + 'copy-to-clipboard': 'In Zwischenablage kopieren', + connected: 'Verbunden', + disconnect: 'Trennen', + 'opening-veworld': 'VeWorld wird geöffnet...', + 'get-veworld': 'VeWorld erhalten', + }, + zh: { + 'connect-wallet': '连接钱包', + 'copy-to-clipboard': '复制到剪贴板', + connected: '已连接', + disconnect: '断开连接', + 'opening-veworld': '正在打开 VeWorld...', + 'get-veworld': '获取 VeWorld', + }, + ja: { + 'connect-wallet': 'ウォレットに接続', + 'copy-to-clipboard': 'クリップボードにコピー', + connected: '接続されました', + disconnect: '切断する', + 'opening-veworld': 'VeWorld を開いています...', + 'get-veworld': 'VeWorld を取得', + }, + ru: { + 'connect-wallet': 'Подключить кошелек', + 'copy-to-clipboard': 'Копировать в буфер обмена', + connected: 'Подключено', + disconnect: 'Отключить', + 'opening-veworld': 'Открытие VeWorld...', + 'get-veworld': 'Получить VeWorld', + }, +}; diff --git a/packages/dapp-kit-ui/src/constants/index.ts b/packages/dapp-kit-ui/src/constants/index.ts index 7752f47e..2d874158 100644 --- a/packages/dapp-kit-ui/src/constants/index.ts +++ b/packages/dapp-kit-ui/src/constants/index.ts @@ -1,7 +1,7 @@ -// TODO: use the wallet-kit package instead of this one export * from './colors'; export * from './sources'; export * from './breakpoint'; export * from './theme'; export * from './stores'; export * from './font'; +export * from './i18n'; diff --git a/packages/dapp-kit-ui/src/constants/theme.ts b/packages/dapp-kit-ui/src/constants/theme.ts index 035fa9a4..5a578d5a 100644 --- a/packages/dapp-kit-ui/src/constants/theme.ts +++ b/packages/dapp-kit-ui/src/constants/theme.ts @@ -1,3 +1 @@ export type ThemeMode = 'LIGHT' | 'DARK'; - -export type Theme = 'DEFAULT'; diff --git a/packages/dapp-kit-ui/src/utils/index.ts b/packages/dapp-kit-ui/src/utils/index.ts index 5f048950..9f54bf2a 100644 --- a/packages/dapp-kit-ui/src/utils/index.ts +++ b/packages/dapp-kit-ui/src/utils/index.ts @@ -2,3 +2,5 @@ export * from './qr-code'; export * from './listeners'; export * from './events'; export * from './mobile'; +export * from './use-translate'; +export * from './account'; diff --git a/packages/dapp-kit-ui/src/utils/use-translate.ts b/packages/dapp-kit-ui/src/utils/use-translate.ts new file mode 100644 index 00000000..268803d3 --- /dev/null +++ b/packages/dapp-kit-ui/src/utils/use-translate.ts @@ -0,0 +1,7 @@ +import { type I18n } from '../constants'; + +export const useTranslate = + (i18n: I18n, language: string) => + (s: string): string => { + return i18n?.[language]?.[s] || i18n?.['en']?.[s] || s; + }; diff --git a/packages/dapp-kit-ui/test/utils/listeners.test.ts b/packages/dapp-kit-ui/test/utils/listeners.test.ts index 189caeb4..c1bc54cd 100644 --- a/packages/dapp-kit-ui/test/utils/listeners.test.ts +++ b/packages/dapp-kit-ui/test/utils/listeners.test.ts @@ -1,5 +1,5 @@ import { vi } from 'vitest'; -import { addResizeListeners } from '../../src/utils/listeners'; // Replace 'yourModule' with the actual module path +import { addResizeListeners } from '../../src/utils/listeners'; describe('addResizeListeners', () => { it('should call the callback when the window loads', () => { diff --git a/packages/dapp-kit-ui/test/utils/use-translate.test.ts b/packages/dapp-kit-ui/test/utils/use-translate.test.ts new file mode 100644 index 00000000..627257ad --- /dev/null +++ b/packages/dapp-kit-ui/test/utils/use-translate.test.ts @@ -0,0 +1,17 @@ +import { defaultI18n } from '../../src/constants'; +import { useTranslate } from '../../src/utils'; + +describe('useTranslate', () => { + it('should return correct translation', () => { + const translate = useTranslate(defaultI18n, 'en'); + expect(translate('connect-wallet')).toBe('Connect Wallet'); + }); + it('should fallback to en if language not found', () => { + const translate = useTranslate(defaultI18n, 'pl'); + expect(translate('connect-wallet')).toBe('Connect Wallet'); + }); + it('should fallback to passed string if translation not found', () => { + const translate = useTranslate(defaultI18n, 'en'); + expect(translate('hello')).toBe('hello'); + }); +});