Translation system should allow hyperlinks on sub-messages

[danjm]

Our translation system allows users to experience MetaMask in their own language (provided translations exist). Developers simply need to pass a string to the t method available on context and that method will get the string in the user's preferred language. For example: t('send'). Translators just reference the metamask-extension/app/_locales/en/messages.json file and add translations of the messages to their respective languages file.

Suppose a developer enters t('providerRequestInfo), given our english translation, this would render as "This site is requesting access to view your current account address. Always make sure you trust the sites you interact with." Of course, the developer would have to pass that string to the appropriate expression within jsx, e.g. <div className="provider-info"><span>{ t('providerRequestInfo) }</span></div>

Now, what if there is a requirement to have the "current account" substring of the above message be hyperlinked to an external page with info about the current account? If translation was not a concern, something like the following would work:

<div className="provider-info"><span>"This site is requesting access to view your <a href="http://ethereumaddresses.info/0xfakeaccounthash">current account</a> address. Always make sure you trust the sites you interact with."}</span></div>

But translation is a concern, we still want to be able to do something like <div className="provider-info"><span>{ t('providerRequestInfo') }</span></div>, but maybe with some extra info passed to t().

Note that we can't just do

<div className="provider-info">
    <span>{ t('providerRequestInfoBeforeLink) }</span>
    <a href="http://ethereumaddresses.info/0xfakeaccounthash">{ t('providerRequestInfoBeforeLink) } 
    </a>
    <span>{ t('providerRequestInfoAfterLink) }</span>
</div>

Because not all translations will be structured the same way and may have very different semantics. For example, the Korean translation of 'providerRequestInfo' is "아래 나열된 도메인은 Web3 API에 대한 액세스를 요청하여 Ethereum 블록 체인과 상호 작용할 수 있습니다. Ethereum 액세스를 승인하기 전에 항상 올바른 사이트에 있는지 다시 확인하십시오".

The task is to upgrade our translation system to:

• allow developers to easily flag where a hyper link is needed in the non-translated / reference text (i.e. english messages)
• allow translators to know that a link is needed and what text the link is needed on
• allow translators to indicate which text of the translated message needs the link

Basic task requirement:

• a static hyperlink url can be hardcoded into the objects on the en/messages.json file

Advanced requirement:

• a hyperlink url can be dynamically passed to the t() method

[rickycodes]

just so that I am understanding this issue correctly...

we'd want to modify the current t() method to be something like:

t(translationKey, substringKey, component)

initially I thought the second param could be a substring (that the third component param wraps) but realized that could be very different between translations so it would have to be a key so that text could live on it's own in the translations?... this also seems kinda flawed in that a text could theoretically have multiple occurrences of the same substring in which case the system wouldn't know where to wrap (or would wrap just the first occurrence?)

[Gudahtt]

The current translation helper already has the signature t(translationKey, substitutions), where substitutions is an optional array of string substitutions corresponding to numbered elements in the localized message (e.g. $0, $1, etc.).

We could augment this substitution system to accept React components rather than just strings. Then the localized messages would remain the same.