Bugfix/translation (pancakeswap#418)

* fix(i18n): Dynamic variables

* docs: Updated README

* chore: Added data to translation

CONTRIBUTING.md

@@ -47,19 +47,22 @@ A hook expose the function you need to translate content.
 
 ```
 import useI18n from 'hooks/useI18n'
+
 ...
 const TranslateString = useI18n()
 ...
-TranslateString(id, 'fallback')
+
+TranslateString(id, 'fallback', data)
 ```
 
 - **id** is the crowdin id of the string you want to translate.
 - **fallback** is a string fallback used if the id cannot be found.
+- **data** dynamic variables
 
-### Variables
-
-The translation component can handle variables being passed in from Crowdin, with no code changes.
+#### Dyanamic variables Example
 
-It will only work if there is only **one** variable passed in, and if that variable within Crowdin is wrapped in **%** signs, i.e.:
+If a Crowdin translation like this `You have %num% left in your wallet` - would look something like:
 
-Translation in crowdin: `%asset% Earned` [link](https://crowdin.com/translate/pancakeswap/8/en-de#330)
+```
+TranslateString(675, `You have ${cakeBalance} left in your wallet`, { num: cakeBalance })
+```

src/hooks/useI18n.ts

@@ -1,17 +1,42 @@
 import { useContext } from 'react'
+import { isEmpty } from 'lodash'
 import { TranslationsContext } from '../contexts/Localisation/translationsContext'
-import { getTranslation } from '../utils/translateTextHelpers'
+
+interface ContextData {
+  [key: string]: number | string
+}
 
 const useI18n = () => {
   const { translations } = useContext(TranslationsContext)
 
-  return (translationId: number, fallback: string) => {
-    if (translations[0] === 'error') {
-      return fallback
-    }
-    if (translations.length > 0) {
-      return getTranslation(translations, translationId, fallback)
+  return (translationId: number, fallback: string, data: ContextData = {}) => {
+    const foundTranslation = translations.find((translation) => {
+      return translation.data.stringId === translationId
+    })
+
+    if (foundTranslation) {
+      const { text } = foundTranslation.data
+      const includesVariable = text.includes('%')
+
+      if (includesVariable) {
+        let interpolatedText = text
+
+        // If dynamic tags are found but no data was passed return the fallback
+        if (isEmpty(data)) {
+          return fallback
+        }
+
+        Object.keys(data).forEach((dataKey) => {
+          const templateKey = new RegExp(`%${dataKey}%`, 'g')
+          interpolatedText = interpolatedText.replace(templateKey, data[dataKey])
+        })
+
+        return interpolatedText
+      }
+
+      return text
     }
+
     return fallback
   }
 }

src/views/Lottery/components/TicketCard/UserTicketsModal.tsx

@@ -42,7 +42,10 @@ const UserTicketsModal: React.FC<UserTicketsModalProps> = ({ myTicketNumbers, on
   })
 
   return (
-    <Modal title={TranslateString(490, `My Tickets (Total: ${myTicketNumbers.length})`)} onDismiss={onDismiss}>
+    <Modal
+      title={TranslateString(490, `My Tickets (Total: ${myTicketNumbers.length})`, { TICKETS: myTicketNumbers.length })}
+      onDismiss={onDismiss}
+    >
       <TicketsList>
         <h2>{listItems}</h2>
       </TicketsList>

src/views/Lottery/components/TotalPrizesCard/index.tsx

@@ -64,7 +64,9 @@ const TotalPrizesCard = () => {
             {currentLotteryNumber === 0 && <Skeleton height={20} width={56} />}
             {currentLotteryNumber > 0 && (
               <>
-                <Text fontSize="12px" style={{ fontWeight: 600 }}>{`Round #${currentLotteryNumber}`}</Text>
+                <Text fontSize="12px" style={{ fontWeight: 600 }}>
+                  {TranslateString(720, `Round #${currentLotteryNumber}`, { num: currentLotteryNumber })}
+                </Text>
               </>
             )}
           </Flex>