index.js

import 'react-native-get-random-values'; // must import before @ethersproject/shims
import { install as installQuickCrypto } from 'react-native-quick-crypto';
import '@ethersproject/shims';
// import 'fast-text-encoding';
import './shim';
import '@walletconnect/react-native-compat';
import {AppRegistry, Alert, StatusBar, Appearance} from 'react-native';
import Root from './src/Root';
import React, {useState, useEffect} from 'react';
import './i18n';
import {
  setJSExceptionHandler,
  setNativeExceptionHandler,
} from 'react-native-exception-handler';
import {name as appName} from './app.json';
import getStore from './src/store';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import 'react-native-url-polyfill/auto'; // https://github.com/facebook/react-native/issues/23922#issuecomment-648096619
import {AppInitialization} from './src/AppInitialization';
import {Analytics} from './src/store/analytics/analytics.effects';
import {APP_VERSION} from './src/constants/config';
import {GIT_COMMIT_HASH, SENTRY_DSN} from '@env';
import {LogActions} from './src/store/log';
import {
  configureReanimatedLogger,
  ReanimatedLogLevel,
} from 'react-native-reanimated';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import {ThemeProvider} from 'styled-components/native';
import {
  PaymentSentProvider,
  OngoingProcessProvider,
  BottomSheetProvider,
  TokenProvider,
  LogProvider,
} from './src/contexts';
import {BitPayDarkTheme, BitPayLightTheme} from './src/themes/bitpay';
import {useAppSelector} from './src/utils/hooks';
import {DklsWorkerHost} from './src/dkls/DklsWorker';
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: SENTRY_DSN,
  enabled: !__DEV__,
  environment: __DEV__ ? 'development' : 'production',
  sendDefaultPii: false,
  enableLogs: false,
  enableAutoNativeBreadcrumbs: false,
  autoSessionTracking: false,
  maxBreadcrumbs: 500,
  beforeSend(event) {
    if (event.contexts) {
      delete event.contexts.trace;
      delete event.contexts.app;
    }
    if (event.tags) {
      delete event.tags.device;
      delete event.tags.device_id;
    }
    if (event.user) {
      delete event.user.id;
    }
    if (event.breadcrumbs) {
      event.breadcrumbs = event.breadcrumbs.filter(b => b.category === 'log');
    }
    return event;
  },
  beforeBreadcrumb(breadcrumb) {
    // Only keep our custom log breadcrumbs, discard everything else
    if (breadcrumb.category === 'log') {
      return breadcrumb;
    }
    return null;
  }
});


installQuickCrypto();

const makeErrorHandler = store => (e, isFatal) => {
  if (isFatal) {
    store.dispatch(
      Analytics.track('Crashed App', {
        build: GIT_COMMIT_HASH,
        version: APP_VERSION,
      }),
    );
    const errStr = e instanceof Error ? e.message : JSON.stringify(e);
    store.dispatch(LogActions.persistLog(LogActions.error(errStr)));
    Sentry.captureException(e, {level: 'fatal'});
    Alert.alert(
      'Unexpected error occurred',
      `
        Error: ${errStr}
        `,
      [
        {
          text: 'Close',
        },
      ],
    );
  }
};

const makeNativeExceptionHandler = store => () => {
  store.dispatch(
    Analytics.track('Crashed App', {
      build: GIT_COMMIT_HASH,
      version: APP_VERSION,
    }),
  );
};

configureReanimatedLogger({
  level: ReanimatedLogLevel.warn,
  strict: false,
});

// Android can mount ReduxProvider twice due to Activity recreation edge cases.
// Only the first instance initializes the store — subsequent mounts render nothing.
let reduxProviderMounted = false;

const ReduxProvider = () => {
  const [isPrimary] = useState(() => {
    if (reduxProviderMounted) {
      return false;
    }
    reduxProviderMounted = true;
    return true;
  });

  useEffect(() => {
    return () => {
      if (isPrimary) {
        reduxProviderMounted = false;
      }
    };
  }, [isPrimary]);

  const [storeReady, setStoreReady] = useState(false);
  const [{store: reduxStore, persistor: reduxPersistor}, setStore] = useState({
    store: null,
    persistor: null,
  });

  useEffect(() => {
    if (!isPrimary) {
      return;
    }

    let cancelled = false;

    getStore().then(({store, persistor}) => {
      if (cancelled) {
        return;
      }

      setStore({store, persistor});
      setStoreReady(true);
      setJSExceptionHandler(makeErrorHandler(store), true);
      setNativeExceptionHandler(makeNativeExceptionHandler(store));
    });

    return () => {
      cancelled = true;
    };
  }, [isPrimary]);

  if (!isPrimary || !storeReady) {
    return null;
  }

  return (
    <Provider store={reduxStore}>
      <PersistGate loading={null} persistor={reduxPersistor}>
        {storeRehydrated => (storeRehydrated ? <AppWrapper /> : null)}
      </PersistGate>
    </Provider>
  );
};

const AppWrapper = () => {
  const colorScheme = useAppSelector(({APP}) => APP.colorScheme);
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const updateTheme = () => {
      if (colorScheme === 'dark') {
        setIsDark(true);
      } else if (colorScheme === 'light') {
        setIsDark(false);
      } else {
        setIsDark(Appearance.getColorScheme() === 'dark');
      }
    };

    updateTheme();

    const subscription = Appearance.addChangeListener(({colorScheme: newScheme}) => {
      if (colorScheme === null) {
        setIsDark(newScheme === 'dark');
      }
    });

    return () => subscription.remove();
  }, [colorScheme]);

  const theme = isDark ? BitPayDarkTheme : BitPayLightTheme;

  return (
    <ThemeProvider theme={theme}>
      <SafeAreaProvider style={{backgroundColor: theme.colors.background}}>
        <StatusBar
          animated
          barStyle={isDark ? 'light-content' : 'dark-content'}
          backgroundColor="transparent"
          translucent
        />
        <GestureHandlerRootView style={{flex: 1}}>
          <TokenProvider>
            <LogProvider>
              <OngoingProcessProvider>
                <BottomSheetModalProvider>
                  <BottomSheetProvider>
                    <PaymentSentProvider>
                      <DklsWorkerHost />
                      <AppInitialization>
                        <Root />
                      </AppInitialization>
                    </PaymentSentProvider>
                  </BottomSheetProvider>
                </BottomSheetModalProvider>
              </OngoingProcessProvider>
            </LogProvider>
          </TokenProvider>
        </GestureHandlerRootView>
      </SafeAreaProvider>
    </ThemeProvider>
  );
};

AppRegistry.registerComponent(appName, () => Sentry.wrap(ReduxProvider));