walletkit icon indicating copy to clipboard operation
walletkit copied to clipboard

Support multiple languages

Open munanadi opened this issue 4 years ago • 6 comments

Are there plans to include multiple languages? Would you accept a PR if I used https://react.i18next.com/ ?

Is there a nice way to do it? Lazy load translations? Anything I can start working with?

PS. Also is there a local dev workflow to make changes in walletkit and use the example dir to see these changes. Sorry noob here.

munanadi avatar Oct 12 '21 13:10 munanadi

~This is no where close to a PR~ ~But~ Here it goes. https://github.com/Aadhinana/walletkit/tree/i18n

it takes a new optional prop on WalletKitProvider itself

  • langOptions which takes the different language options that are passed
  • /public/locales/{lang}/translations.json hold the translated text.

It by default falls back to english, A selector is given as the connect button is presented.

gokimultiwallet

I really like to to contribute to this. Please help.

~This currently uses a hacky approach to update for when the language changes, It uses useTranslation imported into the files that actually have no use, this is just so the state changes. Need to figure this out.~

~Working on how to do this properly.~

munanadi avatar Oct 14 '21 20:10 munanadi

These are the steps I followed to get this working in local env for dev.

I changed the packages/walletkit/package.json to keep watching the files.

"build" : "tsc -w"
  1. Link the package/walletkit using yarn link
  2. In package/walletkit run yarn build (This will watch the ts files for changes and will also build it)
  3. In package/example link this walletkit instead of installing it by npm link @gokiprotocol/walletkit
  4. yarn run to get the example started running!
  5. DEV

munanadi avatar Oct 14 '21 21:10 munanadi

Thanks @Aadhinana. I'll see how we can include the language selection in the UI-- we should see if we can make it automatically detect the language like Uniswap does.

sungoki avatar Oct 20 '21 13:10 sungoki

i18next-browser-languagedetector this already does that I guess? i18n.language can be used to read it from the browser and set it accordingly. But we might need to include the corresponding files for the translations.

munanadi avatar Oct 20 '21 14:10 munanadi

Great. If there are no locales specified, will the dropdown be displayed? I think we should style that.

Otherwise, I really like the change. Thank you for the code. Please make a pull request!

sungoki avatar Oct 20 '21 15:10 sungoki

Yes if the langOptions are left empty then by default it shows only english as the sole option. like this wihtoutLangOptions

I thought I'll ask you about the styling. Since it should be consistent with the whole thing. Okay sure! :+1: Thanks!

PS: I would like to contribute more! Let me know what's next!

munanadi avatar Oct 20 '21 16:10 munanadi