Internationalization Enhancement

[ksusha-beep]

Description

This is at attempt to create internationalization / translation for the browser by adding a localization i18n library and browser language detector, based on this improvement issue: Add internationalization #1935.

User story

As a Blockstack user, I would like to change the to my preferred language either in Settings or in a navigation bar quick access menu. Automatic language switch is done (if available) based on i18next-browser-languageDetector or on querystring ${ROOT_URL}?lng=LANG. The fallback language is English.

The following packages have been installed:

• i18next (^21.2.4)
• i18next-browser-languagedetector (^6.1.2)
• react-i18next (^11.12.0)

i18next is an improvement of i18n (which has been there for 11 years). It has more versions, fewer dependencies, more daily downloads, more weekly downloads, more monthly downloads, fewer open issues and fewer open pull requests. react-i18next has more frequent updates.

Affected code paths

The following two directories with the appropriate files were created, English, fallback and French as an example.

translations

en/translations.json
fr/translations.json

i18n.js

The i18n.js is the config file in the app/js directory. It specifies the configuration options of localizations, such as:

• order and from where user language should be detected
• keys and parameters to look up languages from
• cache language options
• optional expiration and domain for cookie
• fallback language, whitelisted languages available in the app, debug options, etc

Two ways to create a localization of the component in react:

• one is by directly importing the i18n.js config file and by wrapping the string in i18n.t('translatable_string'). The translatable_string must be a string and have a reference to in on the translation json files.
• second way is to wrap the component in HOC withTranslation() and then (checking PropTypes) import function t using props

Recommendation

One recommendation is to get allApps label key as a keyword, such as social_impact, or document_storage and not as a full string. It could then be referenced in the translation file and translated. Currently these labels come back in English, see img attached below.

For details refer to issue #1935

Type of Change

• New feature
• Bug fix
• API reference/documentation update
• Other

Are documentation updates required?

• Link to documentation updates: n/a

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[markmhendrickson]

Thanks for this contribution. However, the Blockstack Browser is no longer supported by Hiro PBC as it's a deprecated product, replaced by the Hiro Wallet browser extension as found here: https://github.com/blockstack/stacks-wallet-web

The corresponding issue in that repository can be found at leather-io/extension#1674

You're encouraged to open a similar PR for that product, which we would review!

[ksusha-beep]

Thanks for this contribution. However, the Blockstack Browser is no longer supported by Hiro PBC as it's a deprecated product, replaced by the Hiro Wallet browser extension as found here: https://github.com/blockstack/stacks-wallet-web

The corresponding issue in that repository can be found at blockstack/stacks-wallet-web#1674

You're encouraged to open a similar PR for that product, which we would review!

Absolutely, I will. Thank you!