Merge pull request #6649 from BlueWallet/loc-ts

fix: TS localization vocabulary

components/TransactionListItem.tsx

@@ -73,7 +73,7 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
     if (sub !== '') sub += ' ';
     sub += txMemo;
     if (item.memo) sub += item.memo;
-    return sub || null;
+    return sub || undefined;
   }, [txMemo, item.confirmations, item.memo]);
 
   const rowTitle = useMemo(() => {
@@ -87,7 +87,7 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
 
       if (invoiceExpiration > now) {
         return formatBalanceWithoutSuffix(item.value && item.value, itemPriceUnit, true).toString();
-      } else if (invoiceExpiration < now) {
+      } else {
         if (item.ispaid) {
           return formatBalanceWithoutSuffix(item.value && item.value, itemPriceUnit, true).toString();
         } else {
@@ -249,7 +249,7 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
 
   const handleOnCopyAmountTap = useCallback(() => Clipboard.setString(rowTitle.replace(/[\s\\-]/g, '')), [rowTitle]);
   const handleOnCopyTransactionID = useCallback(() => Clipboard.setString(item.hash), [item.hash]);
-  const handleOnCopyNote = useCallback(() => Clipboard.setString(subtitle), [subtitle]);
+  const handleOnCopyNote = useCallback(() => Clipboard.setString(subtitle ?? ''), [subtitle]);
   const handleOnViewOnBlockExplorer = useCallback(() => {
     const url = `https://mempool.space/tx/${item.hash}`;
     Linking.canOpenURL(url).then(supported => {

loc/index.ts

@@ -3,19 +3,27 @@ import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import Localization from 'react-localization';
+import Localization, { LocalizedStrings } from 'react-localization';
 import { I18nManager } from 'react-native';
 import * as RNLocalize from 'react-native-localize';
 
 import { satoshiToLocalCurrency } from '../blue_modules/currency';
 import { BitcoinUnit } from '../models/bitcoinUnits';
 import { AvailableLanguages } from './languages';
+import enJson from './en.json';
 
 export const STORAGE_KEY = 'lang';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 
+interface ILocalization1 extends LocalizedStrings<typeof enJson> {}
+
+// overriding formatString to only return string
+interface ILocalization extends Omit<ILocalization1, 'formatString'> {
+  formatString: (...args: Parameters<ILocalization1['formatString']>) => string;
+}
+
 const setDateTimeLocale = async () => {
   let lang = (await AsyncStorage.getItem(STORAGE_KEY)) ?? '';
   let localeForDayJSAvailable = true;
@@ -206,8 +214,8 @@ const init = async () => {
 };
 init();
 
-const loc = new Localization({
+const loc: ILocalization = new Localization({
-  en: require('./en.json'),
+  en: enJson,
   ar: require('./ar.json'),
   be: require('./be@tarask.json'),
   bg_bg: require('./bg_bg.json'),
@@ -281,12 +289,12 @@ export const transactionTimeToReadable = (time: number) => {
     ret = dayjs(time).fromNow();
   } catch (_) {
     console.warn('incorrect locale set for dayjs');
-    return time;
+    return String(time);
   }
   return ret;
 };
 
-export const removeTrailingZeros = (value: number | string) => {
+export const removeTrailingZeros = (value: number | string): string => {
   let ret = value.toString();
 
   if (ret.indexOf('.') === -1) {
@@ -305,7 +313,7 @@ export const removeTrailingZeros = (value: number | string) => {
  * @param withFormatting {boolean} Works only with `BitcoinUnit.SATS`, makes spaces wetween groups of 000
  * @returns {string}
  */
-export function formatBalance(balance: number, toUnit: string, withFormatting = false) {
+export function formatBalance(balance: number, toUnit: string, withFormatting = false): string {
   if (toUnit === undefined) {
     return balance + ' ' + loc.units[BitcoinUnit.BTC];
   }
@@ -314,7 +322,7 @@ export function formatBalance(balance: number, toUnit: string, withFormatting =
     return removeTrailingZeros(+value) + ' ' + loc.units[BitcoinUnit.BTC];
   } else if (toUnit === BitcoinUnit.SATS) {
     return (withFormatting ? new Intl.NumberFormat().format(balance).toString() : String(balance)) + ' ' + loc.units[BitcoinUnit.SATS];
-  } else if (toUnit === BitcoinUnit.LOCAL_CURRENCY) {
+  } else {
     return satoshiToLocalCurrency(balance);
   }
 }
@@ -326,7 +334,7 @@ export function formatBalance(balance: number, toUnit: string, withFormatting =
  * @param withFormatting {boolean} Works only with `BitcoinUnit.SATS`, makes spaces wetween groups of 000
  * @returns {string}
  */
-export function formatBalanceWithoutSuffix(balance = 0, toUnit: string, withFormatting = false) {
+export function formatBalanceWithoutSuffix(balance = 0, toUnit: string, withFormatting = false): string | number {
   if (toUnit === undefined) {
     return balance;
   }
@@ -336,7 +344,7 @@ export function formatBalanceWithoutSuffix(balance = 0, toUnit: string, withForm
       return removeTrailingZeros(value);
     } else if (toUnit === BitcoinUnit.SATS) {
       return withFormatting ? new Intl.NumberFormat().format(balance).toString() : String(balance);
-    } else if (toUnit === BitcoinUnit.LOCAL_CURRENCY) {
+    } else {
       return satoshiToLocalCurrency(balance);
     }
   }

navigation/SendDetailsStack.tsx

@@ -22,7 +22,7 @@ const Stack = createNativeStackNavigator<SendDetailsStackParamList>();
 
 const SendDetailsStack = () => {
   const theme = useTheme();
-  const DetailsButton = useMemo(() => <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.create_details} />, []);
+  const DetailsButton = useMemo(() => <HeaderRightButton testID="Save" disabled={true} title={loc.send.create_details} />, []);
 
   return (
     <Stack.Navigator initialRouteName="SendDetails" screenOptions={{ headerShadowVisible: false }}>

screen/settings/EncryptStorage.tsx

@@ -195,7 +195,7 @@ const EncryptStorage = () => {
     return isCapable ? (
       <>
         <BlueText />
-        <BlueText>{loc.formatString(loc.settings.biometrics_fail, { type: deviceBiometricType })}</BlueText>
+        <BlueText>{loc.formatString(loc.settings.biometrics_fail, { type: deviceBiometricType! })}</BlueText>
       </>
     ) : null;
   };
@@ -213,14 +213,14 @@ const EncryptStorage = () => {
             {loc.settings.biometrics}
           </Text>
           <ListItem
-            title={loc.formatString(loc.settings.encrypt_use, { type: deviceBiometricType })}
+            title={loc.formatString(loc.settings.encrypt_use, { type: deviceBiometricType! })}
             Component={TouchableWithoutFeedback}
             switch={{ value: biometricEnabled, onValueChange: onUseBiometricSwitch, disabled: state.currentLoadingSwitch !== null }}
             isLoading={state.currentLoadingSwitch === 'biometric' && state.isLoading}
             containerStyle={[styles.row, styleHooks.root]}
           />
           <BlueCard>
-            <BlueText>{loc.formatString(loc.settings.encrypt_use_expl, { type: deviceBiometricType })}</BlueText>
+            <BlueText>{loc.formatString(loc.settings.encrypt_use_expl, { type: deviceBiometricType! })}</BlueText>
             {renderPasscodeExplanation()}
           </BlueCard>
           <BlueSpacing20 />

screen/wallets/WalletsList.tsx

@@ -367,7 +367,7 @@ const WalletsList: React.FC = () => {
     const anchor = findNodeHandle(walletActionButtonsRef.current);
 
     if (anchor) {
-      options.push(anchor);
+      options.push(String(anchor));
     }
 
     ActionSheet.showActionSheetWithOptions(props, buttonIndex => {