add chinese translations (#852)

* add chinese translations

* issue with steppers

* issue with steppers

* params

* updated

app/components/CreateWalletStepIndicator.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 import { Text, View } from '.'
-import { useThemeContext } from '../contexts/ThemeProvider'
-import { tailwind } from '../tailwind'
-import { translate } from '../translations'
+import { useThemeContext } from '@contexts/ThemeProvider'
+import { tailwind } from '@tailwind'
+import { translate } from '@translations'
 import { ThemedText } from './themed'
 
 interface StepIndicatorProps {
@@ -14,14 +14,14 @@ interface StepIndicatorProps {
 }
 
 export const CREATE_STEPS = [
-  translate('components/CreateWalletIndicator', 'Recovery'),
-  translate('components/CreateWalletIndicator', 'Verify'),
-  translate('components/CreateWalletIndicator', 'Secure')
+  'Recovery',
+  'Verify',
+  'Secure'
 ]
 
 export const RESTORE_STEPS = [
-  translate('components/CreateWalletIndicator', 'Restore'),
-  translate('components/CreateWalletIndicator', 'Secure')
+  'Restore',
+  'Secure'
 ]
 
 /**
@@ -33,7 +33,12 @@ export const RESTORE_STEPS = [
  */
 export function CreateWalletStepIndicator (props: StepIndicatorProps): JSX.Element {
   const { isLight } = useThemeContext()
-  const { current, total, style: containerViewStyle, steps = [] } = props
+  const {
+    current,
+    total,
+    style: containerViewStyle,
+    steps = []
+  } = props
   if (total === undefined && steps.length === 0) {
     throw Error('Invalid prop for CreateWalletStepIndicator')
   }
@@ -94,12 +99,16 @@ function getStepNodeStyle (isLight: boolean, current: number, step: number): { s
     textStyle = isLight ? 'text-gray-500' : 'text-gray-400'
   }
   return {
-    stepperStyle, textStyle
+    stepperStyle,
+    textStyle
   }
 }
 
 function StepNode (props: { step: number, current: number, content: string, isLight: boolean }): JSX.Element {
-  const { stepperStyle, textStyle } = getStepNodeStyle(props.isLight, props.current, props.step)
+  const {
+    stepperStyle,
+    textStyle
+  } = getStepNodeStyle(props.isLight, props.current, props.step)
   return (
     <View style={tailwind('flex-col')}>
       <View
@@ -126,7 +135,7 @@ function Description (props: { step: number, current: number, content: string })
       light={tailwind(props.current === props.step ? 'text-primary-500' : 'text-gray-500')}
       style={tailwind('text-center text-sm font-medium top-9 absolute w-20')}
     >
-      {props.content}
+      {translate('components/CreateWalletIndicator', props.content)}
     </ThemedText>
   )
 }

app/components/WalletAccordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ThemedIcon, ThemedScrollView, ThemedText, ThemedView, ThemedSectionTitle } from './themed'
+import { ThemedIcon, ThemedScrollView, ThemedSectionTitle, ThemedText, ThemedView } from './themed'
 import Accordion from 'react-native-collapsible/Accordion'
 import { tailwind } from '@tailwind'
 import { useThemeContext } from '@contexts/ThemeProvider'

app/contexts/LanguageProvider.tsx

@@ -1,8 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import * as Localization from 'expo-localization'
 import i18n from 'i18n-js'
-import { Logging } from '../api'
-import { LanguagePersistence } from '../api/persistence/language_storage'
+import { LanguagePersistence, Logging } from '@api'
 
 interface LanguageLoader {
   isLanguageLoaded: boolean

app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx

@@ -1,6 +1,13 @@
 import { getNativeIcon } from '@components/icons/assets'
 import { View } from '@components/index'
-import { ThemedFlatList, ThemedIcon, ThemedText, ThemedTouchableOpacity, ThemedView, ThemedSectionTitle } from '@components/themed'
+import {
+  ThemedFlatList,
+  ThemedIcon,
+  ThemedSectionTitle,
+  ThemedText,
+  ThemedTouchableOpacity,
+  ThemedView
+} from '@components/themed'
 import { useWalletContext } from '@contexts/WalletContext'
 import { useWalletPersistenceContext } from '@contexts/WalletPersistenceContext'
 import { useWhaleApiClient } from '@contexts/WhaleContext'

app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx

@@ -15,7 +15,13 @@ import { IconButton } from '../../../../../components/IconButton'
 import { getNativeIcon } from '../../../../../components/icons/assets'
 import { NumberTextInput } from '../../../../../components/NumberTextInput'
 import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton'
-import { ThemedIcon, ThemedScrollView, ThemedText, ThemedView, ThemedSectionTitle } from '../../../../../components/themed'
+import {
+  ThemedIcon,
+  ThemedScrollView,
+  ThemedSectionTitle,
+  ThemedText,
+  ThemedView
+} from '../../../../../components/themed'
 import { useWhaleApiClient } from '../../../../../contexts/WhaleContext'
 import { useTokensAPI } from '../../../../../hooks/wallet/TokensAPI'
 import { RootState } from '../../../../../store'

app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx

@@ -18,11 +18,11 @@ import { NumberTextInput } from '../../../../../components/NumberTextInput'
 import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton'
 import {
   ThemedIcon,
+  ThemedSectionTitle,
   ThemedText,
   ThemedTextInput,
   ThemedTouchableOpacity,
-  ThemedView,
-  ThemedSectionTitle
+  ThemedView
 } from '../../../../../components/themed'
 import { useNetworkContext } from '../../../../../contexts/NetworkContext'
 import { useWhaleApiClient } from '../../../../../contexts/WhaleContext'

app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx

@@ -1,5 +1,11 @@
 import { SummaryTitle } from '@components/SummaryTitle'
-import { ThemedIcon, ThemedScrollView, ThemedText, ThemedTouchableOpacity, ThemedSectionTitle } from '@components/themed'
+import {
+  ThemedIcon,
+  ThemedScrollView,
+  ThemedSectionTitle,
+  ThemedText,
+  ThemedTouchableOpacity
+} from '@components/themed'
 import { MaterialIcons } from '@expo/vector-icons'
 import { useTokensAPI } from '@hooks/wallet/TokensAPI'
 import { StackScreenProps } from '@react-navigation/stack'

app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx

@@ -12,7 +12,7 @@ import { IconLabelScreenType, InputIconLabel } from '../../../../components/Inpu
 import { NumberRow } from '../../../../components/NumberRow'
 import { NumberTextInput } from '../../../../components/NumberTextInput'
 import { AmountButtonTypes, SetAmountButton } from '../../../../components/SetAmountButton'
-import { ThemedScrollView, ThemedText, ThemedView, ThemedSectionTitle } from '../../../../components/themed'
+import { ThemedScrollView, ThemedSectionTitle, ThemedText, ThemedView } from '../../../../components/themed'
 import { usePoolPairsAPI } from '../../../../hooks/wallet/PoolPairsAPI'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { tailwind } from '../../../../tailwind'

app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx

@@ -12,7 +12,7 @@ import { View } from '../../../../components'
 import { Button } from '../../../../components/Button'
 import { NumberRow } from '../../../../components/NumberRow'
 import { NumberTextInput } from '../../../../components/NumberTextInput'
-import { ThemedScrollView, ThemedText, ThemedView, ThemedSectionTitle } from '../../../../components/themed'
+import { ThemedScrollView, ThemedSectionTitle, ThemedText, ThemedView } from '../../../../components/themed'
 import { TokenBalanceRow } from '../../../../components/TokenBalanceRow'
 import { useWhaleApiClient } from '../../../../contexts/WhaleContext'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'

app/screens/AppNavigator/screens/Dex/DexScreen.tsx

@@ -10,7 +10,7 @@ import { View } from '../../../../components'
 import { IconButton } from '../../../../components/IconButton'
 import { getNativeIcon } from '../../../../components/icons/assets'
 import { SkeletonLoader, SkeletonLoaderScreen } from '../../../../components/SkeletonLoader'
-import { ThemedSectionList, ThemedText, ThemedView, ThemedSectionTitle } from '../../../../components/themed'
+import { ThemedSectionList, ThemedSectionTitle, ThemedText, ThemedView } from '../../../../components/themed'
 import { usePoolPairsAPI } from '../../../../hooks/wallet/PoolPairsAPI'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { tailwind } from '../../../../tailwind'

app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx

@@ -6,7 +6,7 @@ import { IconLabelScreenType, InputIconLabel } from '@components/InputIconLabel'
 import { NumberRow } from '@components/NumberRow'
 import { NumberTextInput } from '@components/NumberTextInput'
 import { AmountButtonTypes, SetAmountButton } from '@components/SetAmountButton'
-import { ThemedScrollView, ThemedText, ThemedView, ThemedSectionTitle } from '@components/themed'
+import { ThemedScrollView, ThemedSectionTitle, ThemedText, ThemedView } from '@components/themed'
 import { useWhaleApiClient } from '@contexts/WhaleContext'
 import { PoolPairData } from '@defichain/whale-api-client/dist/api/poolpairs'
 import { usePoolPairsAPI } from '@hooks/wallet/PoolPairsAPI'

app/screens/AppNavigator/screens/Dex/PoolSwap/components/SlippageTolerance.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { TouchableOpacity } from 'react-native'
-import { ThemedText, ThemedView, ThemedSectionTitle } from '../../../../../../components/themed'
+import { ThemedSectionTitle, ThemedText, ThemedView } from '../../../../../../components/themed'
 import { tailwind } from '../../../../../../tailwind'
 import { translate } from '../../../../../../translations'
 

app/screens/AppNavigator/screens/Settings/SettingsScreen.tsx

@@ -1,5 +1,11 @@
 import { Logging } from '@api'
-import { ThemedIcon, ThemedScrollView, ThemedText, ThemedTouchableOpacity, ThemedSectionTitle } from '@components/themed'
+import {
+  ThemedIcon,
+  ThemedScrollView,
+  ThemedSectionTitle,
+  ThemedText,
+  ThemedTouchableOpacity
+} from '@components/themed'
 import { WalletAlert } from '@components/WalletAlert'
 import { useNetworkContext } from '@contexts/NetworkContext'
 import { useWalletPersistenceContext } from '@contexts/WalletPersistenceContext'

app/screens/AppNavigator/screens/Settings/components/RowLanguageItem.tsx

@@ -4,23 +4,27 @@ import { WalletAlert } from '@components/WalletAlert'
 import { useLanguageContext } from '@contexts/LanguageProvider'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { tailwind } from '@tailwind'
-import { AppLanguage, getLanguageName, getLocaleByLanguageName, translate } from '@translations'
+import { AppLanguageItem, translate } from '@translations'
 import * as React from 'react'
 import { View } from 'react-native'
 import { SettingsParamList } from '../SettingsNavigator'
 
-export function RowLanguageItem (props: { language: AppLanguage }): JSX.Element {
+export function RowLanguageItem ({ languageItem }: { languageItem: AppLanguageItem }): JSX.Element {
   const navigation = useNavigation<NavigationProp<SettingsParamList>>()
-  const { language, setLanguage } = useLanguageContext()
+  const {
+    language,
+    setLanguage
+  } = useLanguageContext()
+
   const onPress = async (): Promise<void> => {
-    if (getLocaleByLanguageName(props.language) === language) {
+    if (languageItem.locale === language) {
       return
     }
 
     WalletAlert({
       title: translate('screens/Settings', 'Switch Language'),
       message: translate(
-        'screens/Settings', 'You are about to change your language to {{language}}. Do you want to proceed?', { language: getLanguageName(props.language) }),
+        'screens/Settings', 'You are about to change your language to {{language}}. Do you want to proceed?', { language: languageItem.displayName }),
       buttons: [
         {
           text: translate('screens/Settings', 'No'),
@@ -30,48 +34,44 @@ export function RowLanguageItem (props: { language: AppLanguage }): JSX.Element
           text: translate('screens/Settings', 'Yes'),
           style: 'destructive',
           onPress: async () => {
-            setLanguage(getLocaleByLanguageName(props.language))
-            await LanguagePersistence.set(getLocaleByLanguageName(props.language))
+            setLanguage(languageItem.locale)
+            await LanguagePersistence.set(languageItem.locale)
             navigation.goBack()
           }
         }
       ]
     })
   }
 
-  const isLanguageSelected = (language: AppLanguage, languageStored: string): boolean => {
-    return getLocaleByLanguageName(language) === languageStored.slice(0, 2)
-  }
-
   return (
     <ThemedTouchableOpacity
       onPress={onPress}
       style={tailwind('flex flex-row p-4 pr-2 items-center justify-between')}
-      testID={`button_language_${props.language}`}
+      testID={`button_language_${languageItem.language}`}
     >
       <View>
         <ThemedText testID='language_option' style={tailwind('font-medium')}>
-          {getLanguageName(props.language)}
+          {languageItem.displayName}
         </ThemedText>
         <ThemedText
           testID='language_option_description'
           dark={tailwind('text-gray-400')}
           light={tailwind('text-gray-500')}
           style={tailwind('text-sm')}
         >
-          {translate('screens/Settings', props.language)}
+          {translate('screens/Settings', languageItem.language)}
         </ThemedText>
       </View>
       {
-        isLanguageSelected(props.language, language) &&
+        language.startsWith(languageItem.locale) &&
         (
           <ThemedIcon
             dark={tailwind('text-darkprimary-500')}
             iconType='MaterialIcons'
             light={tailwind('text-primary-500')}
             name='check'
             size={24}
-            testID={`button_network_${props.language}_check`}
+            testID={`button_network_${languageItem.language}_check`}
           />
         )
       }

app/screens/AppNavigator/screens/Settings/screens/AboutScreen.tsx

@@ -3,7 +3,12 @@ import { nativeApplicationVersion } from 'expo-application'
 import React, { useCallback } from 'react'
 import { Linking, TouchableOpacity, View } from 'react-native'
 import { AppIcon } from '../../../../../components/icons/AppIcon'
-import { ThemedScrollView, ThemedText, ThemedTouchableOpacity, ThemedSectionTitle } from '../../../../../components/themed'
+import {
+  ThemedScrollView,
+  ThemedSectionTitle,
+  ThemedText,
+  ThemedTouchableOpacity
+} from '../../../../../components/themed'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'
 

app/screens/AppNavigator/screens/Settings/screens/CommunityScreen.tsx

@@ -6,10 +6,10 @@ import { View } from '../../../../../components'
 import {
   ThemedFlatList,
   ThemedIcon,
+  ThemedSectionTitle,
   ThemedText,
   ThemedTouchableOpacity,
-  ThemedView,
-  ThemedSectionTitle
+  ThemedView
 } from '../../../../../components/themed'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'

app/screens/AppNavigator/screens/Settings/screens/LanguageSelectionScreen.tsx

@@ -18,7 +18,7 @@ export function LanguageSelectionScreen (): JSX.Element {
         languages.map((language, index) => (
           <RowLanguageItem
             key={index}
-            language={language}
+            languageItem={language}
           />
         ))
       }