feat: add language selection on settings page

[oleonardolima]

fixes #830
closes #875

[oleonardolima]

@futurepaul I'm curious about how I should override the i18n context, is it already being done on another part of the code?

[oleonardolima]

@futurepaul I'm curious about how I should override the i18n context, is it already being done on another part of the code?

As we discussed, it would need a new language field and function update, right ?

Something like this:

mutiny-web/src/state/megaStore.tsx

Lines 327 to 334 in c680ab2

	async saveFiat(fiat: Currency) {
	localStorage.setItem("fiat_currency", JSON.stringify(fiat));
	const price = await actions.fetchPrice(fiat);
	setState({
	price: price,
	fiat: fiat
	});
	},

[futurepaul]

Something like this:

yeah that looks right to me. you set it in the state, and then you reference that value from the global state to pass to the config during i18npovider (https://github.com/MutinyWallet/mutiny-web/blob/master/src/components/I18nProvider.tsx)

it looks like i18n has its cachuserlanguage thing but probably don't need to bother with it would rather just have it stored in megastore https://github.com/i18next/i18next-browser-languageDetector

[oleonardolima]

Something like this:

yeah that looks right to me. you set it in the state, and then you reference that value from the global state to pass to the config during i18npovider (https://github.com/MutinyWallet/mutiny-web/blob/master/src/components/I18nProvider.tsx)

it looks like i18n has its cachuserlanguage thing but probably don't need to bother with it would rather just have it stored in megastore https://github.com/i18next/i18next-browser-languageDetector

nice! thx

[oleonardolima]

....

it looks like i18n has its cachuserlanguage thing but probably don't need to bother with it would rather just have it stored in megastore https://github.com/i18next/i18next-browser-languageDetector

yep, I've tried using the cache and detection options, but doesn't to work 🤔, I'll try getting it directly from megaStore then lol

[benalleng]

I see the issue here! you need to modify the detection in the i18n config as such

        detection: {
            order: ["querystring", "localStorage", "navigator", "htmlTag"],
            lookupQuerystring: "lang",
            lookupLocalStorage: "i18nextLng",
            caches: ["localStorage"], // not sure if this specific key is necessry
        },

This will allow the localStorage item to be found

[oleonardolima]

I see the issue here! you need to modify the detection in the i18n config as such

        detection: {
            order: ["querystring", "localStorage", "navigator", "htmlTag"],
            lookupQuerystring: "lang",
            lookupLocalStorage: "i18nextLng",
            caches: ["localStorage"], // not sure if this specific key is necessry
        },

This will allow the localStorage item to be found

Nice! I've tried that, but the problem remained I think mainly because it wasn't being refreshed 🤔

[benalleng]

Really close! great work, just some small things and then make sure to run pnpm pre-commit to clean up any prettier formatting

[oleonardolima]

Really close! great work, just some small things and then make sure to run pnpm pre-commit to clean up any prettier formatting

@benalleng I was talking with @benthecarman about adding some non-blocking step on CI for showing that some translations are missing, wdyt ?

[benalleng]

Definitely! I think we should probably make a new PR for that CI check though

[oleonardolima]

Definitely! I think we should probably make a new PR for that CI check though

I'll add some playwright tests on this PR as well, and then we are good to go :)

[benalleng]

from the element chat we came to some consensus that we might want to change the key names for thie Language interface as it might be a little confusing with the value being the "label" in the ui and the label being the "value" sent to i18next. @futurepaul suggested we replace label with shortName

[benalleng]

Made another pass after I had a chance to look at #875 and the value <=> label stuff was most of the problem with the select options being weird but I did catch one small change in addition to that

[benalleng]

Sorry to butt heads on this! But switching back and forth with the value and findLanguageByValue() is still causing problems.

If you start in another language it still always displays english as the default

[oleonardolima]

Sorry to butt heads on this! But switching back and forth with the value and findLanguageByValue() is still causing problems.

If you start in another language it still always displays english as the default

No worries, I think I covered everything now

[benthecarman]

works for me

[benalleng]

tACK great work on this!