fix: use local i18n-js logic (#604)

* fix: use local i18n-js logic * chore: Fixed formatting Co-authored-by: Samer Buna <samerbuna@users.noreply.github.com> Co-authored-by: daviroo <david.borthwick@gmail.com>
GaloyMoney · Aug 31, 2022 · e431155 · e431155
1 parent d255f0f
commit e431155
Show file tree

Hide file tree

Showing 55 changed files with 111 additions and 78 deletions.
diff --git a/__tests__/components/transaction-date.spec.tsx b/__tests__/components/transaction-date.spec.tsx
@@ -1,10 +1,12 @@
 import * as React from "react"
 import { render } from "@testing-library/react-native"
-import { TransactionDate } from "../../app/components/transaction-date"
-import { GaloyGQL, translateUnknown } from "@galoymoney/client"
+import { GaloyGQL } from "@galoymoney/client"
 import { createMock } from "ts-auto-mock"
 import moment from "moment"
 
+import { TransactionDate } from "../../app/components/transaction-date"
+import { translate } from "../../app/utils/translate"
+
 describe("Display the createdAt date for a transaction", () => {
   it("Displays pending for a pending onchain transaction", () => {
     const mockedTransaction = createMock<GaloyGQL.Transaction>({
@@ -13,7 +15,7 @@ describe("Display the createdAt date for a transaction", () => {
     })
 
     const { queryAllByText } = render(<TransactionDate tx={mockedTransaction} />)
-    expect(queryAllByText(translateUnknown("common.pending"))).not.toBeNull()
+    expect(queryAllByText(translate("common.pending"))).not.toBeNull()
   })
   it("Displays friendly date", () => {
     const testTransactionCreatedAtDate = moment().subtract(1, "days")

diff --git a/__tests__/screens/phone-auth.spec.tsx b/__tests__/screens/phone-auth.spec.tsx
@@ -4,7 +4,7 @@ import { InMemoryCache } from "@apollo/client"
 import { act, cleanup, fireEvent, render } from "@testing-library/react-native"
 import "@testing-library/jest-native/extend-expect"
 import "react-native-gesture-handler/jestSetup.js"
-import { translateUnknown as translate } from "@galoymoney/client"
+
 import "@mocks/react-navigation-native"
 import "@mocks/react-native-geetest-module"
 import { WelcomePhoneInputScreen } from "../../app/screens/phone-auth-screen"
@@ -14,6 +14,7 @@ import {
   defaultConfiguration,
 } from "../../app/store/app-configuration-context"
 import { PriceContextProvider } from "../../app/store/price-context"
+import { translate } from "../../app/utils/translate"
 
 jest.mock("react-native/Libraries/EventEmitter/NativeEventEmitter")
 jest.mock("react-native-fingerprint-scanner", () => ({}))

diff --git a/app/components/balance-header/balance-header.tsx b/app/components/balance-header/balance-header.tsx
@@ -5,13 +5,13 @@ import { StyleProp, Text, TouchableHighlight, View, ViewStyle } from "react-nati
 import EStyleSheet from "react-native-extended-stylesheet"
 import Icon from "react-native-vector-icons/Ionicons"
 import Tooltip from "react-native-walkthrough-tooltip"
-import { translateUnknown as translate } from "@galoymoney/client"
 import { palette } from "../../theme/palette"
 import { TextCurrencyForAmount } from "../text-currency/text-currency"
 import { useIsFocused } from "@react-navigation/native"
 import { useHiddenBalanceToolTip, useHideBalance } from "../../hooks"
 import { saveHiddenBalanceToolTip } from "../../graphql/client-only-query"
 import { useApolloClient } from "@apollo/client"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   container: {

diff --git a/app/components/contact-modal/contact-modal.tsx b/app/components/contact-modal/contact-modal.tsx
@@ -1,12 +1,12 @@
 import { CONTACT_EMAIL_ADDRESS, WHATSAPP_CONTACT_NUMBER } from "@app/constants/support"
 import { palette } from "@app/theme"
-import { translateUnknown as translate } from "@galoymoney/client"
 import React from "react"
 import { Linking, View } from "react-native"
 import EStyleSheet from "react-native-extended-stylesheet"
 import ReactNativeModal from "react-native-modal"
 import { openWhatsApp } from "@app/utils/external"
 import { ListItem, Icon } from "react-native-elements"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   container: {

diff --git a/app/components/global-error/global-error.tsx b/app/components/global-error/global-error.tsx
@@ -2,9 +2,10 @@ import { ServerError, ServerParseError } from "@apollo/client"
 import { useApolloNetworkStatus } from "../../app"
 import { ComponentType } from "../../types/jsx"
 import { NetworkErrorCode } from "./network-error-code"
-import { translateUnknown as translate } from "@galoymoney/client"
 import { toastShow } from "@app/utils/toast"
 import useLogout from "@app/hooks/use-logout"
+import { translate } from "@app/utils/translate"
+
 export const GlobalErrorToast: ComponentType = () => {
   const status = useApolloNetworkStatus()
   // use logout hook

diff --git a/app/components/modal-clipboard/modal-clipboard.tsx b/app/components/modal-clipboard/modal-clipboard.tsx
@@ -12,10 +12,7 @@ import {
   LAST_CLIPBOARD_PAYMENT,
   modalClipboardVisibleVar,
 } from "../../graphql/client-only-query"
-import {
-  parsePaymentDestination,
-  translateUnknown as translate,
-} from "@galoymoney/client"
+import { parsePaymentDestination } from "@galoymoney/client"
 import { color } from "../../theme"
 import { palette } from "../../theme/palette"
 import { cache } from "../../graphql/cache"
@@ -24,6 +21,7 @@ import type { StackNavigationProp } from "@react-navigation/stack"
 import type { ComponentType } from "../../types/jsx"
 import type { RootStackParamList } from "../../navigation/stack-param-lists"
 import useMainQuery from "@app/hooks/use-main-query"
+import { translate } from "@app/utils/translate"
 
 const styles = StyleSheet.create({
   buttonContainer: {

diff --git a/app/components/mountain-header/mountain-header.tsx b/app/components/mountain-header/mountain-header.tsx
@@ -2,9 +2,9 @@ import * as React from "react"
 import { View, Text } from "react-native"
 import EStyleSheet from "react-native-extended-stylesheet"
 import Montain from "./mointains-cloud-01.svg"
-import { translateUnknown as translate } from "@galoymoney/client"
 import { palette } from "../../theme/palette"
 import type { ComponentType } from "../../types/jsx"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   amountContainer: {

diff --git a/app/components/overlay/overlay.tsx b/app/components/overlay/overlay.tsx
@@ -4,8 +4,8 @@ import { TouchableWithoutFeedback } from "react-native-gesture-handler"
 import { StyleSheet, View, Modal, SafeAreaView, Text, Dimensions } from "react-native"
 import Svg, { Path, Defs, ClipPath, G, Rect, Circle } from "react-native-svg"
 import { palette } from "../../theme/palette"
-import { translateUnknown as translate } from "@galoymoney/client"
 import type { ComponentType } from "../../types/jsx"
+import { translate } from "@app/utils/translate"
 
 const CY = 200
 const R = 135

diff --git a/app/components/price-graph/price-graph.tsx b/app/components/price-graph/price-graph.tsx
@@ -11,9 +11,9 @@ import {
 
 import { color } from "../../theme"
 import { palette } from "../../theme/palette"
-import { translateUnknown as translate } from "@galoymoney/client"
 import type { ComponentType } from "../../types/jsx"
 import { Defs, LinearGradient, Stop } from "react-native-svg"
+import { translate } from "@app/utils/translate"
 
 const BTC_PRICE_LIST = gql`
   query btcPriceList($range: PriceGraphRange!) {

diff --git a/app/components/transaction-date/transaction-date.tsx b/app/components/transaction-date/transaction-date.tsx
@@ -1,8 +1,9 @@
 import React from "react"
 import { Text } from "react-native"
 import moment from "moment"
-import { GaloyGQL, getLocale, translateUnknown as translate } from "@galoymoney/client"
+import { GaloyGQL } from "@galoymoney/client"
 import { toMomentLocale } from "@app/utils/date"
+import { translate, getLocale } from "@app/utils/translate"
 
 type TransactionDateProps = {
   tx: GaloyGQL.Transaction

diff --git a/app/components/version/version.tsx b/app/components/version/version.tsx
@@ -2,12 +2,12 @@ import { useNavigation } from "@react-navigation/native"
 import * as React from "react"
 import { Pressable, StyleSheet, Text } from "react-native"
 import VersionNumber from "react-native-version-number"
-import { translateUnknown as translate } from "@galoymoney/client"
 import { palette } from "../../theme/palette"
 import type { StackNavigationProp } from "@react-navigation/stack"
 import type { TextStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet"
 import type { ComponentType } from "../../types/jsx"
 import type { RootStackParamList } from "../../navigation/stack-param-lists"
+import { translate } from "@app/utils/translate"
 
 const styles = StyleSheet.create({
   version: {

diff --git a/app/hooks/use-geetest-captcha.ts b/app/hooks/use-geetest-captcha.ts
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { EventSubscription, NativeEventEmitter, NativeModules } from "react-native"
 import GeetestModule from "@galoymoney/react-native-geetest-module"
-import { translateUnknown as translate, useMutation } from "@galoymoney/client"
+import { useMutation } from "@galoymoney/client"
+import { translate } from "../utils/translate"
 
 type GeetestCaptchaReturn = {
   geetestError: string | null

diff --git a/app/hooks/use-main-query.ts b/app/hooks/use-main-query.ts
@@ -2,10 +2,10 @@ import { useQuery } from "@apollo/client"
 import { MAIN_QUERY } from "@app/graphql/query"
 import useToken from "@app/hooks/use-token"
 import NetInfo from "@react-native-community/netinfo"
-import { translateUnknown as translate } from "@galoymoney/client"
 import crashlytics from "@react-native-firebase/crashlytics"
 import { useAppConfig } from "./use-app-config"
 import { usePriceConversion } from "./use-price-conversion"
+import { translate } from "../utils/translate"
 
 const useMainQuery = (): useMainQueryOutput => {
   const { hasToken } = useToken()

diff --git a/app/navigation/root-navigator.tsx b/app/navigation/root-navigator.tsx
@@ -12,7 +12,6 @@ import EStyleSheet from "react-native-extended-stylesheet"
 import * as RNLocalize from "react-native-localize"
 import analytics from "@react-native-firebase/analytics"
 
-import { setLocale, translateUnknown as translate } from "@galoymoney/client"
 import {
   AuthenticationScreen,
   AuthenticationCheckScreen,
@@ -68,6 +67,7 @@ import {
   ConversionSuccessScreen,
   ConversionConfirmationScreen,
 } from "@app/screens/conversion-flow"
+import { translate, setLocale } from "../utils/translate"
 import { useAuthenticationContext } from "@app/store/authentication-context"
 
 // Must be outside of any component LifeCycle (such as `componentDidMount`).

diff --git a/app/screens/authentication-screen/authentication-screen.tsx b/app/screens/authentication-screen/authentication-screen.tsx
@@ -8,7 +8,6 @@ import { useApolloClient } from "@apollo/client"
 import { Screen } from "../../components/screen"
 import { color } from "../../theme"
 import { palette } from "../../theme/palette"
-import { translateUnknown as translate } from "@galoymoney/client"
 import KeyStoreWrapper from "../../utils/storage/secureStorage"
 import BiometricWrapper from "../../utils/biometricAuthentication"
 import type { ScreenType } from "../../types/jsx"
@@ -21,6 +20,7 @@ import useToken from "../../hooks/use-token"
 import BitcoinBeachLogo from "../get-started-screen/bitcoin-beach-logo.png"
 import useLogout from "../../hooks/use-logout"
 import useMainQuery from "@app/hooks/use-main-query"
+import { translate } from "@app/utils/translate"
 import { useAuthenticationContext } from "@app/store/authentication-context"
 
 const styles = EStyleSheet.create({

diff --git a/app/screens/authentication-screen/pin-screen.tsx b/app/screens/authentication-screen/pin-screen.tsx
@@ -8,7 +8,6 @@ import { useApolloClient } from "@apollo/client"
 
 import { Screen } from "../../components/screen"
 import { palette } from "../../theme/palette"
-import { translateUnknown as translate } from "@galoymoney/client"
 import KeyStoreWrapper from "../../utils/storage/secureStorage"
 import type { ScreenType } from "../../types/jsx"
 import { PinScreenPurpose } from "../../utils/enum"
@@ -21,6 +20,7 @@ import useToken from "../../hooks/use-token"
 import useLogout from "../../hooks/use-logout"
 import useMainQuery from "@app/hooks/use-main-query"
 import { useAuthenticationContext } from "@app/store/authentication-context"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   bottomSpacer: {

diff --git a/app/screens/contacts-screen/contact-transactions.tsx b/app/screens/contacts-screen/contact-transactions.tsx
@@ -7,12 +7,13 @@ import { TouchableOpacity } from "react-native-gesture-handler"
 import Icon from "react-native-vector-icons/Ionicons"
 import { TransactionItem } from "../../components/transaction-item"
 import { nextPrefCurrency, prefCurrencyVar } from "../../graphql/client-only-query"
-import { translateUnknown as translate, useQuery } from "@galoymoney/client"
+import { useQuery } from "@galoymoney/client"
 import type { ScreenType } from "../../types/jsx"
 import type { RootStackParamList } from "../../navigation/stack-param-lists"
 import { palette } from "../../theme/palette"
 import { sameDay, sameMonth } from "../../utils/date"
 import { toastShow } from "../../utils/toast"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   errorText: { alignSelf: "center", color: palette.red, paddingBottom: 18 },

diff --git a/app/screens/contacts-screen/contacts-detail.tsx b/app/screens/contacts-screen/contacts-detail.tsx
@@ -7,7 +7,7 @@ import { CloseCross } from "../../components/close-cross"
 import { IconTransaction } from "../../components/icon-transactions"
 import { LargeButton } from "../../components/large-button"
 import { Screen } from "../../components/screen"
-import { translateUnknown as translate, useMutation } from "@galoymoney/client"
+import { useMutation } from "@galoymoney/client"
 import { palette } from "../../theme/palette"
 import type { ContactStackParamList } from "../../navigation/stack-param-lists"
 import { StackNavigationProp } from "@react-navigation/stack"
@@ -16,6 +16,7 @@ import type { ScreenType } from "../../types/jsx"
 import { ContactTransactionsDataInjected } from "./contact-transactions"
 import useMainQuery from "@app/hooks/use-main-query"
 import { WalletType } from "@app/utils/enum"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   actionsContainer: { marginBottom: "15rem", backgroundColor: palette.lighterGrey },

diff --git a/app/screens/contacts-screen/contacts.tsx b/app/screens/contacts-screen/contacts.tsx
@@ -16,12 +16,13 @@ import { FlatList } from "react-native-gesture-handler"
 import Icon from "react-native-vector-icons/Ionicons"
 
 import { Screen } from "../../components/screen"
-import { translateUnknown as translate } from "@galoymoney/client"
 import { ContactStackParamList } from "../../navigation/stack-param-lists"
 import { color } from "../../theme"
 import { ScreenType } from "../../types/jsx"
 import { toastShow } from "../../utils/toast"
 import useToken from "../../hooks/use-token"
+import { translate } from "@app/utils/translate"
+
 // TODO: get rid of this wrapper once SearchBar props are figured out ref: https://github.com/react-native-elements/react-native-elements/issues/3089
 const SafeSearchBar = SearchBar as unknown as React.FC<
   SearchBarBaseProps | SearchBarDefaultProps | SearchBarAndroidProps | SearchBarIosProps

diff --git a/app/screens/conversion-flow/conversion-confirmation-screen.tsx b/app/screens/conversion-flow/conversion-confirmation-screen.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from "react"
 import { StyleSheet, Text, View } from "react-native"
 import { Button } from "react-native-elements"
-import { translateUnknown as translate, useMutation } from "@galoymoney/client"
+import { useMutation } from "@galoymoney/client"
 import { palette } from "@app/theme"
 import { toastShow } from "@app/utils/toast"
 import { paymentAmountToTextWithUnits } from "@app/utils/currencyConversion"
 import { WalletCurrency } from "@app/types/amounts"
 import { StackScreenProps } from "@react-navigation/stack"
 import { RootStackParamList } from "@app/navigation/stack-param-lists"
 import { CommonActions } from "@react-navigation/native"
+import { translate } from "@app/utils/translate"
 
 export const ConversionConfirmationScreen = ({
   navigation,

diff --git a/app/screens/conversion-flow/conversion-details-screen.tsx b/app/screens/conversion-flow/conversion-details-screen.tsx
@@ -4,7 +4,6 @@ import EStyleSheet from "react-native-extended-stylesheet"
 import { ScrollView, TouchableWithoutFeedback } from "react-native-gesture-handler"
 import { FakeCurrencyInput } from "react-native-currency-input"
 import { Button } from "react-native-elements"
-import { translateUnknown as translate } from "@galoymoney/client"
 
 import { color, palette } from "@app/theme"
 import useMainQuery from "@app/hooks/use-main-query"
@@ -20,6 +19,7 @@ import { useUsdBtcAmount } from "@app/hooks/use-amount"
 import { WalletDescriptor } from "@app/types/wallets"
 import { StackScreenProps } from "@react-navigation/stack"
 import { RootStackParamList } from "@app/navigation/stack-param-lists"
+import { translate } from "@app/utils/translate"
 
 export const ConversionDetailsScreen = ({
   route,

diff --git a/app/screens/conversion-flow/conversion-success-screen.tsx b/app/screens/conversion-flow/conversion-success-screen.tsx
@@ -2,13 +2,12 @@ import React, { useEffect } from "react"
 import { StyleSheet, Text, View } from "react-native"
 import LottieView from "lottie-react-native"
 
-import { translateUnknown as translate } from "@galoymoney/client"
-
 import { palette } from "@app/theme"
 import successLottieJson from "../send-bitcoin-screen/success_lottie.json"
 import { StackScreenProps } from "@react-navigation/stack"
 import { RootStackParamList } from "@app/navigation/stack-param-lists"
 import useMainQuery from "@app/hooks/use-main-query"
+import { translate } from "@app/utils/translate"
 
 export const ConversionSuccessScreen = ({
   navigation,

diff --git a/app/screens/earns-map-screen/earns-map-screen.tsx b/app/screens/earns-map-screen/earns-map-screen.tsx
@@ -7,12 +7,13 @@ import { SvgProps } from "react-native-svg"
 import { MountainHeader } from "../../components/mountain-header"
 import { Screen } from "../../components/screen"
 import { getQuizQuestions } from "../../graphql/query"
-import { getLocale, translateUnknown as translate } from "@galoymoney/client"
 import { PrimaryStackParamList } from "../../navigation/stack-param-lists"
 import { palette } from "../../theme/palette"
 import { ComponentType, ScreenType } from "../../types/jsx"
 import useToken from "../../hooks/use-token"
 import { sectionCompletedPct } from "../earns-screen"
+import { translate, getLocale } from "@app/utils/translate"
+
 import BitcoinCircle from "./bitcoin-circle-01.svg"
 import BottomOngoing from "./bottom-ongoing-01.svg"
 import BottomStart from "./bottom-start-01.svg"
@@ -30,6 +31,7 @@ import RightComplete from "./right-section-completed-01.svg"
 import RightOngoing from "./right-section-ongoing-01.svg"
 import RightTodo from "./right-section-to-do-01.svg"
 import TextBlock from "./text-block-medium.svg"
+
 const BottomOngoingEN = React.lazy(() => import("./bottom-ongoing-01.en.svg"))
 const BottomOngoingES = React.lazy(() => import("./bottom-ongoing-01.es.svg"))
 const BottomStartEN = React.lazy(() => import("./bottom-start-01.en.svg"))

diff --git a/app/screens/earns-screen/earns-quiz.tsx b/app/screens/earns-screen/earns-quiz.tsx
@@ -12,7 +12,6 @@ import I18n from "i18n-js"
 
 import { CloseCross } from "../../components/close-cross"
 import { Screen } from "../../components/screen"
-import { translateUnknown as translate } from "@galoymoney/client"
 import { palette } from "../../theme/palette"
 import { shuffle } from "../../utils/helper"
 import { sleep } from "../../utils/sleep"
@@ -21,6 +20,7 @@ import type { ScreenType } from "../../types/jsx"
 import { StackNavigationProp } from "@react-navigation/stack"
 import type { RootStackParamList } from "../../navigation/stack-param-lists"
 import { RouteProp } from "@react-navigation/native"
+import { translate } from "@app/utils/translate"
 
 const styles = EStyleSheet.create({
   answersView: {

diff --git a/app/screens/earns-screen/earns-section.tsx b/app/screens/earns-screen/earns-section.tsx
@@ -12,7 +12,7 @@ import Icon from "react-native-vector-icons/Ionicons"
 import I18n from "i18n-js"
 
 import { Screen } from "../../components/screen"
-import { translateUnknown as translate, useMutation } from "@galoymoney/client"
+import { useMutation } from "@galoymoney/client"
 import type { RootStackParamList } from "../../navigation/stack-param-lists"
 import { color } from "../../theme"
 import { palette } from "../../theme/palette"
@@ -24,6 +24,7 @@ import { SVGs } from "./earn-svg-factory"
 import { getCardsFromSection, remainingSatsOnSection } from "./earns-utils"
 import { getQuizQuestions } from "../../graphql/query"
 import useMainQuery from "@app/hooks/use-main-query"
+import { translate } from "@app/utils/translate"
 
 const { width: screenWidth } = Dimensions.get("window")
 

diff --git a/app/screens/earns-screen/earns-utils.ts b/app/screens/earns-screen/earns-utils.ts
@@ -1,7 +1,7 @@
 import filter from "lodash.filter"
 import sumBy from "lodash.sumby"
-import { translateUnknown as translate } from "@galoymoney/client"
 import type { QuizQuestion, QuizSectionContent } from "../../types/quiz"
+import { translate } from "@app/utils/translate"
 
 export const getCardsFromSection = ({ quizQuestions, sectionIndex }): QuizQuestion[] => {
   const quizQuestionsContent = translate(