From 11d56981689e8d36fd1b109d7f12bca983ce755c Mon Sep 17 00:00:00 2001 From: Haris Valjevcic Date: Tue, 14 Mar 2023 09:27:22 +0100 Subject: [PATCH 01/23] Added custom language string for developers --- packages/core/src/lib/translate/translate.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/core/src/lib/translate/translate.ts b/packages/core/src/lib/translate/translate.ts index ddb741f20..7a2e65564 100644 --- a/packages/core/src/lib/translate/translate.ts +++ b/packages/core/src/lib/translate/translate.ts @@ -7,6 +7,8 @@ import vi from "../locale/vi.json"; import hi from "../locale/hi.json"; import ar from "../locale/ar.json"; +const devLanguage = "es"; // leave null or change into language code "en", "es"... + const getLanguage = (languageCode: string) => { switch (languageCode) { case "en": @@ -54,6 +56,9 @@ const findObjectPropByStringPath = (obj: any, prop: string): unknown => { export const translate = (path: string) => { let lang = window.navigator.languages ? window.navigator.languages[0] : null; lang = lang || window.navigator.language; + if (devLanguage !== null) { + lang = devLanguage; + } const languageCode = shortenLanguageCode(lang); From ad2bc1f5875084348e2e13d0c81f3e445e3b6fef Mon Sep 17 00:00:00 2001 From: Haris Valjevcic Date: Wed, 15 Mar 2023 15:13:06 +0100 Subject: [PATCH 02/23] Added documentation and edit string into null. --- .../core/docs/guides/multilanguage-support.md | 48 ++++++++++++++----- packages/core/src/lib/translate/translate.ts | 6 +-- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/packages/core/docs/guides/multilanguage-support.md b/packages/core/docs/guides/multilanguage-support.md index 091bbba94..ac712acf1 100644 --- a/packages/core/docs/guides/multilanguage-support.md +++ b/packages/core/docs/guides/multilanguage-support.md @@ -1,23 +1,23 @@ - # Multilanguage support +# Multilanguage support - Languages are detected from browser language settings. -- If user preffered language is not supported, english is rendered as default. +- If user preffered language is not supported, english is rendered as default. ## Supported languages + - English -- Spanish +- Spanish - Chinese - Bulgarian -- Vietnamese +- Vietnamese - Korean - Arabic - Hindi - - ## How to use +## How to use - Language files are located in locale folder in `packages\core\src\lib\locale` -- In order for text to be translated `translate` function should be used +- In order for text to be translated `translate` function should be used as in example below - Can be extended when needed following `packageName.section.translationKey`structure @@ -32,7 +32,7 @@ } ``` -- File where translated text is rendered +- File where translated text is rendered ```ts import { translate } from "@near-wallet-selector/core"; @@ -49,8 +49,8 @@

${translate("modal.wallet.whatIsAWallet")}

``` - ## Adding new language + - Language files are located in locale folder in `packages\core\src\lib\locale` - Files are named after ISO 639-1: two-letter language code - Keys are named in camelCase as the beginning of the string always in English, with the following pattern used : @@ -65,7 +65,7 @@ } ``` -- When new language is introduced it must be added to `packages\core\src\lib\translate\translate.ts` +- When new language is introduced it must be added to `packages\core\src\lib\translate\translate.ts` ```ts import en from "../locale/en.json"; @@ -87,6 +87,32 @@ }; ``` -- Supported language should be added to **Supported Languages** [list](https://github.com/near/wallet-selector/blob/dev/packages/core/docs/guides/multilanguage-support.md#supported-languages). +- Supported language should be added to **Supported + Languages** [list](https://github.com/near/wallet-selector/blob/dev/packages/core/docs/guides/multilanguage-support.md#supported-languages) + . - Pull request title should be named as **"Add support for `LanguageName` language"**. + +## Set custom language + +- In `packages\core\src\lib\translate\translate.ts` find and edit `allowOnlyLanguage` for language code which is + available. + +**Default file:** +```ts +import en from "../locale/en.json"; +import es from "../locale/es.json"; + +const allowOnlyLanguage = null; +``` +
+ +##### Example for Spanish language: +```ts +import en from "../locale/en.json"; +import es from "../locale/es.json"; + +const allowOnlyLanguage = "es"; + ``` + +- *Note: Only languages which is already added to `packages\core\src\lib\locale` can be selected.* diff --git a/packages/core/src/lib/translate/translate.ts b/packages/core/src/lib/translate/translate.ts index 7a2e65564..03c7d2af6 100644 --- a/packages/core/src/lib/translate/translate.ts +++ b/packages/core/src/lib/translate/translate.ts @@ -7,7 +7,7 @@ import vi from "../locale/vi.json"; import hi from "../locale/hi.json"; import ar from "../locale/ar.json"; -const devLanguage = "es"; // leave null or change into language code "en", "es"... +const allowOnlyLanguage = null; // leave null or change into language code "en", "es"... const getLanguage = (languageCode: string) => { switch (languageCode) { @@ -56,8 +56,8 @@ const findObjectPropByStringPath = (obj: any, prop: string): unknown => { export const translate = (path: string) => { let lang = window.navigator.languages ? window.navigator.languages[0] : null; lang = lang || window.navigator.language; - if (devLanguage !== null) { - lang = devLanguage; + if (allowOnlyLanguage !== null) { + lang = allowOnlyLanguage; } const languageCode = shortenLanguageCode(lang); From 17b10f1a1a431d197e1cc53d753604f106414ed9 Mon Sep 17 00:00:00 2001 From: Haris Valjevcic Date: Wed, 15 Mar 2023 16:31:32 +0100 Subject: [PATCH 03/23] Added Damir comment for this --- packages/core/docs/guides/multilanguage-support.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/docs/guides/multilanguage-support.md b/packages/core/docs/guides/multilanguage-support.md index ac712acf1..6005e6220 100644 --- a/packages/core/docs/guides/multilanguage-support.md +++ b/packages/core/docs/guides/multilanguage-support.md @@ -95,6 +95,7 @@ ## Set custom language +- This disables language detection and allows to set only one to be used. - In `packages\core\src\lib\translate\translate.ts` find and edit `allowOnlyLanguage` for language code which is available. From c9358ccb18bd291f8cd9e6048593b6d6db0eb473 Mon Sep 17 00:00:00 2001 From: Haris Valjevcic Date: Fri, 17 Mar 2023 16:07:41 +0100 Subject: [PATCH 04/23] Added exported function for forced language --- packages/core/src/index.ts | 2 +- packages/core/src/lib/translate/translate.ts | 18 ++++++++++++++---- packages/modal-ui/src/lib/components/Modal.tsx | 4 ++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 957f5811b..fa047abbc 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -71,4 +71,4 @@ export type { FinalExecutionOutcome } from "near-api-js/lib/providers"; export { waitFor, getActiveAccount } from "./lib/helpers"; -export { translate } from "./lib/translate/translate"; +export { translate, allowOnlyLanguage } from "./lib/translate/translate"; diff --git a/packages/core/src/lib/translate/translate.ts b/packages/core/src/lib/translate/translate.ts index 03c7d2af6..19989ddd8 100644 --- a/packages/core/src/lib/translate/translate.ts +++ b/packages/core/src/lib/translate/translate.ts @@ -7,7 +7,8 @@ import vi from "../locale/vi.json"; import hi from "../locale/hi.json"; import ar from "../locale/ar.json"; -const allowOnlyLanguage = null; // leave null or change into language code "en", "es"... +let forcedLang: boolean; +let forcedLanguageCode: string; const getLanguage = (languageCode: string) => { switch (languageCode) { @@ -32,6 +33,13 @@ const getLanguage = (languageCode: string) => { } }; +// leave null or change into language code "en", "es"... +export const allowOnlyLanguage = (forcedLangCode: string) => { + forcedLang = true; + forcedLanguageCode = forcedLangCode; + return forcedLangCode; +}; + // (i.e en-CA returns just en) const shortenLanguageCode = (lang: string) => { return lang.indexOf("-") !== -1 ? lang.split("-")[0] : lang.split("_")[0]; @@ -56,13 +64,15 @@ const findObjectPropByStringPath = (obj: any, prop: string): unknown => { export const translate = (path: string) => { let lang = window.navigator.languages ? window.navigator.languages[0] : null; lang = lang || window.navigator.language; - if (allowOnlyLanguage !== null) { + /*if (allowOnlyLanguage !== null) { lang = allowOnlyLanguage; - } + }*/ const languageCode = shortenLanguageCode(lang); - const selectedLanguage = getLanguage(languageCode); + const selectedLanguage = forcedLang + ? getLanguage(forcedLanguageCode) + : getLanguage(languageCode); const text = findObjectPropByStringPath(selectedLanguage, path); diff --git a/packages/modal-ui/src/lib/components/Modal.tsx b/packages/modal-ui/src/lib/components/Modal.tsx index 0bce38b8b..a0b878ff7 100644 --- a/packages/modal-ui/src/lib/components/Modal.tsx +++ b/packages/modal-ui/src/lib/components/Modal.tsx @@ -22,7 +22,7 @@ import { WalletNotInstalled } from "./WalletNotInstalled"; import { WalletHome } from "./WalletHome"; import { WalletConnected } from "./WalletConnected"; import { ScanQRCode } from "./ScanQRCode"; -import { translate } from "@near-wallet-selector/core"; +import { translate, allowOnlyLanguage } from "@near-wallet-selector/core"; interface ModalProps { selector: WalletSelector; @@ -61,7 +61,7 @@ export const Modal: React.FC = ({ setRoute({ name: "WalletHome", }); - + allowOnlyLanguage("es"); const { selectedWalletId, modules } = selector.store.getState(); if (selectedWalletId) { const module = modules.find((m) => m.id === selectedWalletId); From cec759c054688481e37cfcd11239ac39f3ecc38a Mon Sep 17 00:00:00 2001 From: daoauth <57783762+daoauth@users.noreply.github.com> Date: Tue, 21 Mar 2023 13:47:32 +0900 Subject: [PATCH 05/23] add: browser detect method for extension support --- .../src/lib/isSupportBrowser.ts | 116 ++++++++++++++++++ packages/welldone-wallet/src/lib/welldone.ts | 6 +- 2 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 packages/welldone-wallet/src/lib/isSupportBrowser.ts diff --git a/packages/welldone-wallet/src/lib/isSupportBrowser.ts b/packages/welldone-wallet/src/lib/isSupportBrowser.ts new file mode 100644 index 000000000..582e2372b --- /dev/null +++ b/packages/welldone-wallet/src/lib/isSupportBrowser.ts @@ -0,0 +1,116 @@ +// https://github.com/DamonOehlman/detect-browser/blob/master/src/index.ts + +export type Browser = + | "aol" + | "edge" + | "edge-ios" + | "yandexbrowser" + | "kakaotalk" + | "samsung" + | "silk" + | "miui" + | "beaker" + | "edge-chromium" + | "chrome" + | "chromium-webview" + | "phantomjs" + | "crios" + | "firefox" + | "fxios" + | "opera-mini" + | "opera" + | "pie" + | "netfront" + | "ie" + | "bb10" + | "android" + | "ios" + | "safari" + | "facebook" + | "instagram" + | "ios-webview" + | "curl" + | "searchbot"; + +type UserAgentMatch = [Browser, RegExpExecArray] | false; +type UserAgentRule = [Browser, RegExp]; + +const SEARCHBOX_UA_REGEX = + /alexa|bot|crawl(er|ing)|facebookexternalhit|feedburner|google web preview|nagios|postrank|pingdom|slurp|spider|yahoo!|yandex/; +const userAgentRules: Array = [ + ["aol", /AOLShield\/([0-9\._]+)/], + ["edge", /Edge\/([0-9\._]+)/], + ["edge-ios", /EdgiOS\/([0-9\._]+)/], + ["yandexbrowser", /YaBrowser\/([0-9\._]+)/], + ["kakaotalk", /KAKAOTALK\s([0-9\.]+)/], + ["samsung", /SamsungBrowser\/([0-9\.]+)/], + ["silk", /\bSilk\/([0-9._-]+)\b/], + ["miui", /MiuiBrowser\/([0-9\.]+)$/], + ["beaker", /BeakerBrowser\/([0-9\.]+)/], + ["edge-chromium", /EdgA?\/([0-9\.]+)/], + [ + "chromium-webview", + /(?!Chrom.*OPR)wv\).*Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/, + ], + ["chrome", /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/], + ["phantomjs", /PhantomJS\/([0-9\.]+)(:?\s|$)/], + ["crios", /CriOS\/([0-9\.]+)(:?\s|$)/], + ["firefox", /Firefox\/([0-9\.]+)(?:\s|$)/], + ["fxios", /FxiOS\/([0-9\.]+)/], + ["opera-mini", /Opera Mini.*Version\/([0-9\.]+)/], + ["opera", /Opera\/([0-9\.]+)(?:\s|$)/], + ["opera", /OPR\/([0-9\.]+)(:?\s|$)/], + ["pie", /^Microsoft Pocket Internet Explorer\/(\d+\.\d+)$/], + [ + "pie", + /^Mozilla\/\d\.\d+\s\(compatible;\s(?:MSP?IE|MSInternet Explorer) (\d+\.\d+);.*Windows CE.*\)$/, + ], + ["netfront", /^Mozilla\/\d\.\d+.*NetFront\/(\d.\d)/], + ["ie", /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/], + ["ie", /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/], + ["ie", /MSIE\s(7\.0)/], + ["bb10", /BB10;\sTouch.*Version\/([0-9\.]+)/], + ["android", /Android\s([0-9\.]+)/], + ["ios", /Version\/([0-9\._]+).*Mobile.*Safari.*/], + ["safari", /Version\/([0-9\._]+).*Safari/], + ["facebook", /FB[AS]V\/([0-9\.]+)/], + ["instagram", /Instagram\s([0-9\.]+)/], + ["ios-webview", /AppleWebKit\/([0-9\.]+).*Mobile/], + ["ios-webview", /AppleWebKit\/([0-9\.]+).*Gecko\)$/], + ["curl", /^curl\/([0-9\.]+)$/], + ["searchbot", SEARCHBOX_UA_REGEX], +]; + +const matchUserAgent = (ua: string): UserAgentMatch => { + return ( + ua !== "" && + userAgentRules.reduce( + (matched: UserAgentMatch, [browser, regex]) => { + if (matched) { + return matched; + } + + const uaMatch = regex.exec(ua); + return !!uaMatch && [browser, uaMatch]; + }, + false + ) + ); +}; + +export const isSupportBrowser = (browers: Array): boolean => { + if (typeof navigator === "undefined") { + return false; + } + const matchedRule: UserAgentMatch = matchUserAgent(navigator.userAgent); + if (!matchedRule) { + return false; + } + + const [name] = matchedRule; + if (name === "searchbot") { + return false; + } + + return !!browers.find((item) => item === name); +}; diff --git a/packages/welldone-wallet/src/lib/welldone.ts b/packages/welldone-wallet/src/lib/welldone.ts index 785a6f331..cd470147c 100644 --- a/packages/welldone-wallet/src/lib/welldone.ts +++ b/packages/welldone-wallet/src/lib/welldone.ts @@ -20,6 +20,7 @@ import type { import icon from "./icon"; import { signTransactions } from "@near-wallet-selector/wallet-utils"; import isMobile from "is-mobile"; +import { isSupportBrowser } from "./isSupportBrowser"; export const STORAGE_ACCOUNT = "account"; @@ -360,8 +361,9 @@ export function setupWelldoneWallet({ deprecated = false, }: WelldoneWalletParams = {}): WalletModuleFactory { return async () => { - const mobile = isMobile(); - if (mobile) { + const support = + !isMobile() && isSupportBrowser(["chrome", "edge-chromium", "opera"]); + if (!support) { return null; } From 0455e2f3d32d8c89482d1933e030b853aef2261e Mon Sep 17 00:00:00 2001 From: daoauth <57783762+daoauth@users.noreply.github.com> Date: Tue, 21 Mar 2023 14:36:33 +0900 Subject: [PATCH 06/23] Update isSupportBrowser.ts --- packages/welldone-wallet/src/lib/isSupportBrowser.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/welldone-wallet/src/lib/isSupportBrowser.ts b/packages/welldone-wallet/src/lib/isSupportBrowser.ts index 582e2372b..cd83f8048 100644 --- a/packages/welldone-wallet/src/lib/isSupportBrowser.ts +++ b/packages/welldone-wallet/src/lib/isSupportBrowser.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-useless-escape */ // https://github.com/DamonOehlman/detect-browser/blob/master/src/index.ts export type Browser = From fd492d265556d63ff605f9db68f3e8d21e72a036 Mon Sep 17 00:00:00 2001 From: daoauth <57783762+daoauth@users.noreply.github.com> Date: Wed, 22 Mar 2023 09:59:35 +0900 Subject: [PATCH 07/23] Update welldone.ts support -> isSupported --- packages/welldone-wallet/src/lib/welldone.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/welldone-wallet/src/lib/welldone.ts b/packages/welldone-wallet/src/lib/welldone.ts index cd470147c..401b0214c 100644 --- a/packages/welldone-wallet/src/lib/welldone.ts +++ b/packages/welldone-wallet/src/lib/welldone.ts @@ -361,9 +361,9 @@ export function setupWelldoneWallet({ deprecated = false, }: WelldoneWalletParams = {}): WalletModuleFactory { return async () => { - const support = + const isSupported = !isMobile() && isSupportBrowser(["chrome", "edge-chromium", "opera"]); - if (!support) { + if (!isSupported) { return null; } From 08808e7f62eaea05c8539b8ef336a7fe962bdf41 Mon Sep 17 00:00:00 2001 From: Haris Date: Wed, 22 Mar 2023 10:21:14 +0100 Subject: [PATCH 08/23] Added forced language code into options --- packages/core/src/lib/options.ts | 1 + packages/core/src/lib/options.types.ts | 1 + packages/core/src/lib/translate/translate.ts | 8 ++++++-- packages/modal-ui/src/lib/components/Modal.tsx | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/core/src/lib/options.ts b/packages/core/src/lib/options.ts index ece946bc4..e11ebb371 100644 --- a/packages/core/src/lib/options.ts +++ b/packages/core/src/lib/options.ts @@ -31,6 +31,7 @@ export const resolveNetwork = (network: NetworkId | Network): Network => { export const resolveOptions = (params: WalletSelectorParams) => { const options: Options = { + languageCode: "", network: resolveNetwork(params.network), debug: params.debug || false, optimizeWalletOrder: params.optimizeWalletOrder === false ? false : true, diff --git a/packages/core/src/lib/options.types.ts b/packages/core/src/lib/options.types.ts index 1f5e27efc..40d436496 100644 --- a/packages/core/src/lib/options.types.ts +++ b/packages/core/src/lib/options.types.ts @@ -9,6 +9,7 @@ export interface Network { } export interface Options { + languageCode: string; network: Network; debug: boolean; optimizeWalletOrder: boolean; diff --git a/packages/core/src/lib/translate/translate.ts b/packages/core/src/lib/translate/translate.ts index 19989ddd8..4883a6609 100644 --- a/packages/core/src/lib/translate/translate.ts +++ b/packages/core/src/lib/translate/translate.ts @@ -35,8 +35,12 @@ const getLanguage = (languageCode: string) => { // leave null or change into language code "en", "es"... export const allowOnlyLanguage = (forcedLangCode: string) => { - forcedLang = true; - forcedLanguageCode = forcedLangCode; + if (forcedLangCode !== "") { + forcedLang = true; + forcedLanguageCode = forcedLangCode; + } else { + forcedLang = false; + } return forcedLangCode; }; diff --git a/packages/modal-ui/src/lib/components/Modal.tsx b/packages/modal-ui/src/lib/components/Modal.tsx index a0b878ff7..16a1c87db 100644 --- a/packages/modal-ui/src/lib/components/Modal.tsx +++ b/packages/modal-ui/src/lib/components/Modal.tsx @@ -61,7 +61,7 @@ export const Modal: React.FC = ({ setRoute({ name: "WalletHome", }); - allowOnlyLanguage("es"); + allowOnlyLanguage(selector.options.languageCode); const { selectedWalletId, modules } = selector.store.getState(); if (selectedWalletId) { const module = modules.find((m) => m.id === selectedWalletId); From 5b9efffcd01a8850508633a9829d47f343a0b25a Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 11:25:52 +0100 Subject: [PATCH 09/23] Refactor translate function. --- packages/core/src/lib/translate/translate.ts | 40 ++++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/core/src/lib/translate/translate.ts b/packages/core/src/lib/translate/translate.ts index 4883a6609..4b96239b5 100644 --- a/packages/core/src/lib/translate/translate.ts +++ b/packages/core/src/lib/translate/translate.ts @@ -7,9 +7,6 @@ import vi from "../locale/vi.json"; import hi from "../locale/hi.json"; import ar from "../locale/ar.json"; -let forcedLang: boolean; -let forcedLanguageCode: string; - const getLanguage = (languageCode: string) => { switch (languageCode) { case "en": @@ -33,15 +30,19 @@ const getLanguage = (languageCode: string) => { } }; -// leave null or change into language code "en", "es"... -export const allowOnlyLanguage = (forcedLangCode: string) => { - if (forcedLangCode !== "") { - forcedLang = true; - forcedLanguageCode = forcedLangCode; - } else { - forcedLang = false; - } - return forcedLangCode; +export type SupportedLanguage = + | "en" + | "es" + | "zh" + | "bg" + | "ko" + | "vi" + | "hi" + | "ar"; + +let chosenLang: string; +export const allowOnlyLanguage = (langCode: SupportedLanguage) => { + chosenLang = langCode; }; // (i.e en-CA returns just en) @@ -66,17 +67,14 @@ const findObjectPropByStringPath = (obj: any, prop: string): unknown => { }; export const translate = (path: string) => { - let lang = window.navigator.languages ? window.navigator.languages[0] : null; - lang = lang || window.navigator.language; - /*if (allowOnlyLanguage !== null) { - lang = allowOnlyLanguage; - }*/ + let browserLang = window.navigator.languages + ? window.navigator.languages[0] + : null; + browserLang = browserLang || window.navigator.language; - const languageCode = shortenLanguageCode(lang); + const languageCode = shortenLanguageCode(chosenLang || browserLang); - const selectedLanguage = forcedLang - ? getLanguage(forcedLanguageCode) - : getLanguage(languageCode); + const selectedLanguage = getLanguage(languageCode); const text = findObjectPropByStringPath(selectedLanguage, path); From 5ec4212ea0526c4af148e79e47f45112a98d7676 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 11:27:54 +0100 Subject: [PATCH 10/23] Added optional languageCode param to WalletSelectorParams. --- packages/core/src/lib/options.ts | 2 +- packages/core/src/lib/options.types.ts | 4 +++- packages/core/src/lib/wallet-selector.types.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/core/src/lib/options.ts b/packages/core/src/lib/options.ts index e11ebb371..ddc0e5269 100644 --- a/packages/core/src/lib/options.ts +++ b/packages/core/src/lib/options.ts @@ -31,7 +31,7 @@ export const resolveNetwork = (network: NetworkId | Network): Network => { export const resolveOptions = (params: WalletSelectorParams) => { const options: Options = { - languageCode: "", + languageCode: params.languageCode || undefined, network: resolveNetwork(params.network), debug: params.debug || false, optimizeWalletOrder: params.optimizeWalletOrder === false ? false : true, diff --git a/packages/core/src/lib/options.types.ts b/packages/core/src/lib/options.types.ts index 40d436496..5ee5a669c 100644 --- a/packages/core/src/lib/options.types.ts +++ b/packages/core/src/lib/options.types.ts @@ -1,3 +1,5 @@ +import type { SupportedLanguage } from "./translate/translate"; + export type NetworkId = "mainnet" | "testnet"; export interface Network { @@ -9,7 +11,7 @@ export interface Network { } export interface Options { - languageCode: string; + languageCode: SupportedLanguage | undefined; network: Network; debug: boolean; optimizeWalletOrder: boolean; diff --git a/packages/core/src/lib/wallet-selector.types.ts b/packages/core/src/lib/wallet-selector.types.ts index a0a86daaf..820e8342b 100644 --- a/packages/core/src/lib/wallet-selector.types.ts +++ b/packages/core/src/lib/wallet-selector.types.ts @@ -6,6 +6,7 @@ import type { import type { ReadOnlyStore } from "./store.types"; import type { Network, NetworkId, Options } from "./options.types"; import type { Subscription, StorageService } from "./services"; +import type { SupportedLanguage } from "./translate/translate"; export interface WalletSelectorParams { network: NetworkId | Network; @@ -15,6 +16,7 @@ export interface WalletSelectorParams { optimizeWalletOrder?: boolean; allowMultipleSelectors?: boolean; randomizeWalletOrder?: boolean; + languageCode?: SupportedLanguage; } export type WalletSelectorStore = ReadOnlyStore; From bcd07b22731ce64e5e1fc8dc6f9d1038cff42661 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 11:29:26 +0100 Subject: [PATCH 11/23] Fix types. --- packages/core/src/lib/translate/translate.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/lib/translate/translate.ts b/packages/core/src/lib/translate/translate.ts index 4b96239b5..76c9283c7 100644 --- a/packages/core/src/lib/translate/translate.ts +++ b/packages/core/src/lib/translate/translate.ts @@ -40,8 +40,8 @@ export type SupportedLanguage = | "hi" | "ar"; -let chosenLang: string; -export const allowOnlyLanguage = (langCode: SupportedLanguage) => { +let chosenLang: string | undefined; +export const allowOnlyLanguage = (langCode: SupportedLanguage | undefined) => { chosenLang = langCode; }; From 2bd64b6b3abbda06180e47d13f2df68fc13dcdf3 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 13:14:31 +0100 Subject: [PATCH 12/23] Add allowOnlyLanguage in modal-ui-js. --- packages/modal-ui-js/src/lib/modal.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/modal.ts b/packages/modal-ui-js/src/lib/modal.ts index a5b85fed4..095924600 100644 --- a/packages/modal-ui-js/src/lib/modal.ts +++ b/packages/modal-ui-js/src/lib/modal.ts @@ -13,7 +13,7 @@ import type { } from "./modal.types"; import { renderWhatIsAWallet } from "./components/WhatIsAWallet"; import { renderWalletAccount } from "./components/WalletAccount"; -import { EventEmitter } from "@near-wallet-selector/core"; +import { allowOnlyLanguage, EventEmitter } from "@near-wallet-selector/core"; const MODAL_ELEMENT_ID = "near-wallet-selector-modal"; export const DEFAULT_DERIVATION_PATH = "44'/397'/0'/0'/1'"; @@ -105,6 +105,7 @@ export const setupModal = ( if (!modalState) { return; } + allowOnlyLanguage(modalState.selector.options.languageCode); renderModal(); const selectedWalletId = modalState.selector.store.getState().selectedWalletId; From 02d62d4105056544a7952d65648b43e4163e3a42 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 13:33:46 +0100 Subject: [PATCH 13/23] Updated docs. --- packages/core/README.md | 1 + .../core/docs/guides/multilanguage-support.md | 26 +++---------------- 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index ccdbe3114..4d1495311 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -47,6 +47,7 @@ const selector = await setupWalletSelector({ - `optimizeWalletOrder` (`boolean?`): Enable automatic wallet order. Reorders last signed in wallet on top, then installed wallets over not installed and deprecated wallets. - `randomizeWalletOrder` (`boolean?`): Randomize wallets order in the `More` section of the UI. - `allowMultipleSelectors` (`boolean?`): Optionally allow creating new instances of wallet selector. +- `languageCode` (`string?`): Optionally set specific ISO 639-1 two-letter language code, disables language detection based on the browser's settings. - `storage` (`StorageService?`): Async storage implementation. Useful when [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) is unavailable. Defaults to `localStorage`. - `modules` (`Array`): List of wallets to support in your dApp. diff --git a/packages/core/docs/guides/multilanguage-support.md b/packages/core/docs/guides/multilanguage-support.md index 6005e6220..8345f38fb 100644 --- a/packages/core/docs/guides/multilanguage-support.md +++ b/packages/core/docs/guides/multilanguage-support.md @@ -94,26 +94,6 @@ - Pull request title should be named as **"Add support for `LanguageName` language"**. ## Set custom language - -- This disables language detection and allows to set only one to be used. -- In `packages\core\src\lib\translate\translate.ts` find and edit `allowOnlyLanguage` for language code which is - available. - -**Default file:** -```ts -import en from "../locale/en.json"; -import es from "../locale/es.json"; - -const allowOnlyLanguage = null; -``` -
- -##### Example for Spanish language: -```ts -import en from "../locale/en.json"; -import es from "../locale/es.json"; - -const allowOnlyLanguage = "es"; - ``` - -- *Note: Only languages which is already added to `packages\core\src\lib\locale` can be selected.* +- Set the `languageCode` in the [Options](./README.md#options) of `setupWalletSelector(options)` +- This disables language detection and allows to set only one to be used. +- The `languageCode` must be an ISO 639-1: two-letter language code from [Supported Languages](#supported-languages) From cbbe783348a0a11fe7957250c4b66b3711bd6c11 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 14:26:58 +0100 Subject: [PATCH 14/23] Fixed link in docs. --- packages/core/docs/guides/multilanguage-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/guides/multilanguage-support.md b/packages/core/docs/guides/multilanguage-support.md index 8345f38fb..08474f8ec 100644 --- a/packages/core/docs/guides/multilanguage-support.md +++ b/packages/core/docs/guides/multilanguage-support.md @@ -94,6 +94,6 @@ - Pull request title should be named as **"Add support for `LanguageName` language"**. ## Set custom language -- Set the `languageCode` in the [Options](./README.md#options) of `setupWalletSelector(options)` +- Set the `languageCode` in the [Options](../../README.md#options) of `setupWalletSelector(options)` - This disables language detection and allows to set only one to be used. - The `languageCode` must be an ISO 639-1: two-letter language code from [Supported Languages](#supported-languages) From e6aa53d3b195b05d90af5d1c559e5cae079b6fcf Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 14:29:36 +0100 Subject: [PATCH 15/23] Improved docs. --- packages/core/docs/guides/multilanguage-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/guides/multilanguage-support.md b/packages/core/docs/guides/multilanguage-support.md index 08474f8ec..1f1711d6b 100644 --- a/packages/core/docs/guides/multilanguage-support.md +++ b/packages/core/docs/guides/multilanguage-support.md @@ -88,7 +88,7 @@ ``` - Supported language should be added to **Supported - Languages** [list](https://github.com/near/wallet-selector/blob/dev/packages/core/docs/guides/multilanguage-support.md#supported-languages) + Languages** [list](https://github.com/near/wallet-selector/blob/dev/packages/core/docs/guides/multilanguage-support.md#supported-languages) and type list . - Pull request title should be named as **"Add support for `LanguageName` language"**. From 3a5b5f6e2e858ce9f7f893f201da704f9b32299a Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 16:08:58 +0100 Subject: [PATCH 16/23] Moved logic for detecting supported browsers to core helper functions. --- packages/core/src/index.ts | 2 +- packages/core/src/lib/helpers/index.ts | 1 + .../src/lib => core/src/lib/helpers}/isSupportBrowser.ts | 0 packages/welldone-wallet/src/lib/welldone.ts | 3 +-- 4 files changed, 3 insertions(+), 3 deletions(-) rename packages/{welldone-wallet/src/lib => core/src/lib/helpers}/isSupportBrowser.ts (100%) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index bde1faa38..3096937b5 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -72,6 +72,6 @@ export type { export type { FinalExecutionOutcome } from "near-api-js/lib/providers"; -export { waitFor, getActiveAccount } from "./lib/helpers"; +export { waitFor, getActiveAccount, isSupportBrowser } from "./lib/helpers"; export { translate, allowOnlyLanguage } from "./lib/translate/translate"; diff --git a/packages/core/src/lib/helpers/index.ts b/packages/core/src/lib/helpers/index.ts index ed5b5f4d2..e7b6ea95f 100644 --- a/packages/core/src/lib/helpers/index.ts +++ b/packages/core/src/lib/helpers/index.ts @@ -1,2 +1,3 @@ export * from "./waitFor"; export * from "./getActiveAccount"; +export * from "./isSupportBrowser"; diff --git a/packages/welldone-wallet/src/lib/isSupportBrowser.ts b/packages/core/src/lib/helpers/isSupportBrowser.ts similarity index 100% rename from packages/welldone-wallet/src/lib/isSupportBrowser.ts rename to packages/core/src/lib/helpers/isSupportBrowser.ts diff --git a/packages/welldone-wallet/src/lib/welldone.ts b/packages/welldone-wallet/src/lib/welldone.ts index 401b0214c..8449a8310 100644 --- a/packages/welldone-wallet/src/lib/welldone.ts +++ b/packages/welldone-wallet/src/lib/welldone.ts @@ -10,7 +10,7 @@ import type { Transaction, Account, } from "@near-wallet-selector/core"; -import { waitFor } from "@near-wallet-selector/core"; +import { isSupportBrowser, waitFor } from "@near-wallet-selector/core"; import type { ViewAccessKeyParams, WalletProvider, @@ -20,7 +20,6 @@ import type { import icon from "./icon"; import { signTransactions } from "@near-wallet-selector/wallet-utils"; import isMobile from "is-mobile"; -import { isSupportBrowser } from "./isSupportBrowser"; export const STORAGE_ACCOUNT = "account"; From dd1538c9b4c68585bb51ea7598b604c665dfe9ef Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 16:12:30 +0100 Subject: [PATCH 17/23] Refactor if statement. --- packages/welldone-wallet/src/lib/welldone.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/welldone-wallet/src/lib/welldone.ts b/packages/welldone-wallet/src/lib/welldone.ts index 8449a8310..af747eec1 100644 --- a/packages/welldone-wallet/src/lib/welldone.ts +++ b/packages/welldone-wallet/src/lib/welldone.ts @@ -360,9 +360,10 @@ export function setupWelldoneWallet({ deprecated = false, }: WelldoneWalletParams = {}): WalletModuleFactory { return async () => { - const isSupported = - !isMobile() && isSupportBrowser(["chrome", "edge-chromium", "opera"]); - if (!isSupported) { + const mobile = isMobile(); + const supported = isSupportBrowser(["chrome", "edge-chromium", "opera"]); + + if (mobile || !supported) { return null; } From 2c8082f7f85ffc8c76b0344a3580ae8c15877488 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 22 Mar 2023 16:25:40 +0100 Subject: [PATCH 18/23] Renamed helper function from isSupportBrowser to isBrowserSupported. --- packages/core/src/index.ts | 2 +- packages/core/src/lib/helpers/index.ts | 2 +- .../helpers/{isSupportBrowser.ts => isBrowserSupported.ts} | 4 ++-- packages/welldone-wallet/src/lib/welldone.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) rename packages/core/src/lib/helpers/{isSupportBrowser.ts => isBrowserSupported.ts} (96%) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 3096937b5..d32fc568a 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -72,6 +72,6 @@ export type { export type { FinalExecutionOutcome } from "near-api-js/lib/providers"; -export { waitFor, getActiveAccount, isSupportBrowser } from "./lib/helpers"; +export { waitFor, getActiveAccount, isBrowserSupported } from "./lib/helpers"; export { translate, allowOnlyLanguage } from "./lib/translate/translate"; diff --git a/packages/core/src/lib/helpers/index.ts b/packages/core/src/lib/helpers/index.ts index e7b6ea95f..e206b1cc4 100644 --- a/packages/core/src/lib/helpers/index.ts +++ b/packages/core/src/lib/helpers/index.ts @@ -1,3 +1,3 @@ export * from "./waitFor"; export * from "./getActiveAccount"; -export * from "./isSupportBrowser"; +export * from "./isBrowserSupported"; diff --git a/packages/core/src/lib/helpers/isSupportBrowser.ts b/packages/core/src/lib/helpers/isBrowserSupported.ts similarity index 96% rename from packages/core/src/lib/helpers/isSupportBrowser.ts rename to packages/core/src/lib/helpers/isBrowserSupported.ts index cd83f8048..8415f9a25 100644 --- a/packages/core/src/lib/helpers/isSupportBrowser.ts +++ b/packages/core/src/lib/helpers/isBrowserSupported.ts @@ -99,7 +99,7 @@ const matchUserAgent = (ua: string): UserAgentMatch => { ); }; -export const isSupportBrowser = (browers: Array): boolean => { +export const isBrowserSupported = (browsers: Array): boolean => { if (typeof navigator === "undefined") { return false; } @@ -113,5 +113,5 @@ export const isSupportBrowser = (browers: Array): boolean => { return false; } - return !!browers.find((item) => item === name); + return !!browsers.find((item) => item === name); }; diff --git a/packages/welldone-wallet/src/lib/welldone.ts b/packages/welldone-wallet/src/lib/welldone.ts index af747eec1..7a29c1e96 100644 --- a/packages/welldone-wallet/src/lib/welldone.ts +++ b/packages/welldone-wallet/src/lib/welldone.ts @@ -10,7 +10,7 @@ import type { Transaction, Account, } from "@near-wallet-selector/core"; -import { isSupportBrowser, waitFor } from "@near-wallet-selector/core"; +import { isBrowserSupported, waitFor } from "@near-wallet-selector/core"; import type { ViewAccessKeyParams, WalletProvider, @@ -361,7 +361,7 @@ export function setupWelldoneWallet({ }: WelldoneWalletParams = {}): WalletModuleFactory { return async () => { const mobile = isMobile(); - const supported = isSupportBrowser(["chrome", "edge-chromium", "opera"]); + const supported = isBrowserSupported(["chrome", "edge-chromium", "opera"]); if (mobile || !supported) { return null; From c551980c826800d9b691e0a765263f570aaed1ab Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Thu, 23 Mar 2023 16:16:30 +1300 Subject: [PATCH 19/23] feat: Account Export UI improvements --- .../src/lib/components/AccountSelect.tsx | 56 ++++++++++--------- packages/account-export/src/lib/styles.css | 7 ++- 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/packages/account-export/src/lib/components/AccountSelect.tsx b/packages/account-export/src/lib/components/AccountSelect.tsx index bdba5fda0..9fa395a9e 100644 --- a/packages/account-export/src/lib/components/AccountSelect.tsx +++ b/packages/account-export/src/lib/components/AccountSelect.tsx @@ -132,32 +132,38 @@ export const AccountSelect: React.FC = ({ ))} - - {translate("modal.exportAccounts.selectAccounts.unavailable")} - -
- {disabledAccounts.map(({ accountId, type, hasBalance }) => ( -
-
- { - onAccountSelect(accountId, e.target.checked); - }} - checked={selectedAccounts.includes(accountId)} - type="checkbox" - id={accountId} - name={accountId} - value={accountId} - disabled - /> - -
+ {disabledAccounts.length > 0 && ( + <> + + {translate( + "modal.exportAccounts.selectAccounts.unavailable" + )} + +
+ {disabledAccounts.map(({ accountId, type, hasBalance }) => ( +
+
+ { + onAccountSelect(accountId, e.target.checked); + }} + checked={selectedAccounts.includes(accountId)} + type="checkbox" + id={accountId} + name={accountId} + value={accountId} + disabled + /> + +
+
+ ))}
- ))} -
+ + )}