decred/pi-ui

Support translation using react-intl

matheusd opened this issue · 3 comments

Decrediton supports multiple languages by using react-intl (currently at version 3.11).

Since Decrediton now uses a number of pi-ui widgets, it should also be possible to perform translation of its strings, otherwise we end up with elements in the UI that are untranslatable. One example of a widget that requires translation is the copyable-text one.

We should investigate how to correctly expose the pi-ui strings such that Decrediton's translation workflow can be maintained.

I have discussed that with @victorgcramos this week, an we are thinking to change any string prop in pi-ui to be node
then we could pass the translated value from decredtion side:

Same as we did with Checkbox here:

<Checkbox
  label={
    <T
      id="settings.privacy.networkStatus.label"
      m="Network Information"
    />
  }
  id="networking"
  description={
    <T
      id="settings.privacy.networkStatus.description"
      m="General network information (block height, etc) from decred.org"
    />
  }
  checked={
    tempSettings.allowedExternalRequests.indexOf(
      EXTERNALREQUEST_NETWORK_STATUS
    ) > -1
  }
  onClick={toggle(EXTERNALREQUEST_NETWORK_STATUS)}
/>

https://github.com/decred/decrediton/blob/master/app/components/views/SettingsPage/PrivacySettings.jsx#L74-L94

Seems reasonable. We can probably shim such components locally in decrediton and use them directly instead of the pi-ui ones.
For example, something like:

import { CopyableText } from "pi-ui";
export default const ({...}) => (
  <CopyableText label={<T id=..../>} {...} />
);

This is related to #300. All these propTypes should be of the type node to prevent this waning when using i18n.