TW-1646 Add extra anti-exception logic for some functions

src/components/error-boundary/content.tsx

@@ -1,33 +1,50 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 
 import { formatSize } from 'src/styles/format-size';
 import { useColors } from 'src/styles/use-colors';
+import { copyStringToClipboard } from 'src/utils/clipboard.utils';
+import { isDefined } from 'src/utils/is-defined';
+import { isString } from 'src/utils/is-string';
 
+import { ButtonMedium } from '../button/button-medium/button-medium';
 import { ButtonSmallTryAgain } from '../button/button-small/button-small-try-again';
 import { Icon } from '../icon/icon';
 import { IconNameEnum } from '../icon/icon-name.enum';
 
 import { useErrorBoundaryContentStyles } from './content.styles';
 
 interface ErrorBoundaryContentProps {
-  errorMessage: string;
+  error: Error;
+  whileMessage?: string;
   style?: StyleProp<ViewStyle>;
   onTryAgainClick: EmptyFn;
 }
 
-export const ErrorBoundaryContent = memo<ErrorBoundaryContentProps>(({ errorMessage, style, onTryAgainClick }) => {
-  const styles = useErrorBoundaryContentStyles();
-  const colors = useColors();
-
-  return (
-    <View style={[styles.root, style]}>
-      <View style={styles.content}>
-        <Icon name={IconNameEnum.AlertTriangle} size={formatSize(64)} color={colors.destructive} />
-        <Text style={styles.header}>Oops!</Text>
-        <Text style={styles.errorText}>{errorMessage}</Text>
-        <ButtonSmallTryAgain title="Try again" onPress={onTryAgainClick} />
+// TODO: set to `false` before release
+const SHOULD_SHOW_ERROR_DETAILS = true;
+
+export const ErrorBoundaryContent = memo<ErrorBoundaryContentProps>(
+  ({ error, whileMessage, style, onTryAgainClick }) => {
+    const errorMessage = isString(whileMessage) ? `Something went wrong while ${whileMessage}` : 'Something went wrong';
+    const styles = useErrorBoundaryContentStyles();
+    const colors = useColors();
+
+    const copyErrorStack = useCallback(() => copyStringToClipboard(error.stack), []);
+
+    return (
+      <View style={[styles.root, style]}>
+        <View style={styles.content}>
+          <Icon name={IconNameEnum.AlertTriangle} size={formatSize(64)} color={colors.destructive} />
+          <Text style={styles.header}>Oops!</Text>
+          <Text style={styles.errorText}>{errorMessage}</Text>
+          {SHOULD_SHOW_ERROR_DETAILS && <Text style={styles.errorText}>{error.message ?? 'No error message'}</Text>}
+          <ButtonSmallTryAgain title="Try again" onPress={onTryAgainClick} />
+          {SHOULD_SHOW_ERROR_DETAILS && isDefined(error.stack) && (
+            <ButtonMedium title="Copy error stack" iconName={IconNameEnum.Copy} onPress={copyErrorStack} />
+          )}
+        </View>
       </View>
-    </View>
-  );
-});
+    );
+  }
+);

src/components/error-boundary/index.tsx

@@ -2,8 +2,6 @@ import * as Sentry from '@sentry/react-native';
 import React, { Component, PropsWithChildren, ErrorInfo, FC } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
-import { isString } from 'src/utils/is-string';
-
 import { ErrorBoundaryContent } from './content';
 
 // TODO: export when it becomes necessary
@@ -49,23 +47,15 @@ export class ErrorBoundary extends Component<Props, ErrorBoundaryState> {
     this.setState({ error: null });
   };
 
-  getDefaultErrorMessage() {
-    const { whileMessage } = this.props;
-
-    return isString(whileMessage) ? `Something went wrong while ${whileMessage}` : 'Something went wrong';
-  }
-
   render() {
-    const { style, children, Fallback } = this.props;
+    const { style, children, Fallback, whileMessage } = this.props;
     const { error } = this.state;
 
-    const errorMessage = error instanceof BoundaryError ? error.message : this.getDefaultErrorMessage();
-
     if (error) {
       return Fallback ? (
         <Fallback />
       ) : (
-        <ErrorBoundaryContent errorMessage={errorMessage} onTryAgainClick={this.tryAgain} style={style} />
+        <ErrorBoundaryContent error={error} whileMessage={whileMessage} onTryAgainClick={this.tryAgain} style={style} />
       );
     }
 

src/hooks/use-total-balance.ts

@@ -3,7 +3,6 @@ import { useMemo } from 'react';
 
 import { useUsdToTokenRates } from 'src/store/currency/currency-selectors';
 import { useCurrentAccountTokens } from 'src/utils/assets/hooks';
-import { isDefined } from 'src/utils/is-defined';
 
 import { TEZ_TOKEN_METADATA } from '../token/data/tokens-metadata';
 import { getTokenSlug } from '../token/utils/token.utils';
@@ -22,16 +21,8 @@ export const useTotalBalance = () => {
     for (const token of visibleTokens) {
       const exchangeRate = exchangeRates[getTokenSlug(token)];
 
-      if (!isDefined(token.decimals) || !isDefined(exchangeRate)) {
-        continue;
-      }
-
-      try {
-        const tokenDollarValue = getDollarValue(token.balance, token.decimals, exchangeRate);
-        dollarValue = dollarValue.plus(tokenDollarValue);
-      } catch (e) {
-        console.error(e);
-      }
+      const tokenDollarValue = getDollarValue(token.balance, token.decimals, exchangeRate);
+      dollarValue = dollarValue.plus(tokenDollarValue);
     }
 
     const tezosDollarValue = getDollarValue(tezosToken.balance, tezosToken.decimals, exchangeRates.tez);

src/utils/balance.utils.ts

@@ -1,9 +1,18 @@
 import { BigNumber } from 'bignumber.js';
 
+import { isDefined } from './is-defined';
+import { ZERO } from './number.util';
 import { mutezToTz } from './tezos.util';
 
-export const getDollarValue = (balance: string, decimals: number, exchangeRate = 0) => {
-  const dollarValue = mutezToTz(new BigNumber(balance), decimals).multipliedBy(exchangeRate);
+export const getDollarValue = (
+  balance: string | nullish,
+  decimals: number | nullish,
+  exchangeRate: number | nullish
+) => {
+  const dollarValue =
+    isDefined(balance) && isDefined(decimals) && isDefined(exchangeRate)
+      ? mutezToTz(new BigNumber(balance), decimals).multipliedBy(exchangeRate)
+      : ZERO;
 
-  return dollarValue.isNaN() ? new BigNumber(0) : dollarValue;
+  return dollarValue.isNaN() ? ZERO : dollarValue;
 };

src/utils/tezos.util.ts

@@ -16,15 +16,15 @@ export const RPC_RETRY_OPTIONS = {
 };
 
 export const mutezToTz = (x: BigNumber, decimals: number) => {
-  if (!x.isFinite()) {
+  if (!x.isFinite() || !Number.isFinite(decimals)) {
     return x;
   }
 
   return new BigNumber(x).integerValue().shiftedBy(-decimals);
 };
 
 export const tzToMutez = (x: BigNumber, decimals: number) => {
-  if (!x.isFinite()) {
+  if (!x.isFinite() || !Number.isFinite(decimals)) {
     return x;
   }