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)}
/>
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.