TW-1143: Migration to native stack

ios/Podfile.lock

@@ -751,9 +751,9 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.18.2):
+  - RNScreens (3.27.0):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-RCTImage
   - RNScrypt (1.2.1):
     - React
   - RNSentry (5.9.1):
@@ -1193,7 +1193,7 @@ SPEC CHECKSUMS:
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
   RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
-  RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
+  RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
   RNScrypt: 95fdef077b482e9fdf8a761120cb69d129ef4016
   RNSentry: 0a1daa8ee81e2776f977ae8c66e67c8d85587828
   RNSha256: 80bea5b2e7005f813f6438cb41e573b3d531146c

package.json

@@ -107,7 +107,7 @@
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-restart": "^0.0.24",
     "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.18.2",
+    "react-native-screens": "^3.27.0",
     "react-native-scrypt": "^1.2.1",
     "react-native-sha256": "^1.4.8",
     "react-native-svg": "madfish-solutions/react-native-svg#41c5c2b78a9fc86aa1b0e47761123068504d9298",

src/app/app.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { LogBox } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { enableScreens } from 'react-native-screens';
+import { enableScreens, enableFreeze } from 'react-native-screens';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 
@@ -20,6 +20,7 @@ import { AppStyles } from './app.styles';
 
 initSentry();
 enableScreens();
+enableFreeze();
 LogBox.ignoreAllLogs();
 
 export const App = () => (

src/components/activity-groups-list/activity-groups-list.styles.ts

@@ -17,7 +17,8 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography
   promotionItemWrapper: {
     paddingVertical: formatSize(12),
     borderBottomWidth: formatSize(0.5),
-    borderBottomColor: colors.lines
+    borderBottomColor: colors.lines,
+    alignSelf: 'center'
   },
   centeredItem: {
     alignSelf: 'center'

src/components/activity-groups-list/activity-groups-list.tsx

@@ -9,6 +9,7 @@ import { emptyFn } from 'src/config/general';
 import { useFakeRefreshControlProps } from 'src/hooks/use-fake-refresh-control-props.hook';
 import { ActivityGroup, emptyActivity } from 'src/interfaces/activity.interface';
 import { isTheSameDay, isToday, isYesterday } from 'src/utils/date.utils';
+import { OptimalPromotionAdType } from 'src/utils/optimal.utils';
 
 import { ActivityGroupItem } from './activity-group-item/activity-group-item';
 import { ActivityGroupsListSelectors } from './activity-groups-list.selectors';
@@ -69,6 +70,7 @@ export const ActivityGroupsList: FC<Props> = ({
     () => (
       <View style={styles.promotionItemWrapper}>
         <OptimalPromotionItem
+          adType={OptimalPromotionAdType.TwMobile}
           style={styles.promotionItem}
           testID={ActivityGroupsListSelectors.promotion}
           onImageError={onOptimalPromotionError}

src/components/header-card/header-card.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import { InsetSubstitute } from '../inset-substitute/inset-substitute';
@@ -9,7 +9,7 @@ interface Props {
   style?: StyleProp<ViewStyle>;
 }
 
-export const HeaderCard: FC<Props> = ({ hasInsetTop = false, style, children }) => {
+export const HeaderCard: FC<Props> = memo(({ hasInsetTop = false, style, children }) => {
   const styles = useHeaderCardStyles();
 
   return (
@@ -18,4 +18,4 @@ export const HeaderCard: FC<Props> = ({ hasInsetTop = false, style, children })
       {children}
     </View>
   );
-};
+});

src/components/optimal-promotion-item/optimal-promotion-item.tsx

@@ -8,13 +8,14 @@ import {
   usePartnersPromoLoadingSelector,
   usePartnersPromoSelector
 } from 'src/store/partners-promotion/partners-promotion-selectors';
-import { useIsEmptyPromotion } from 'src/utils/optimal.utils';
+import { OptimalPromotionAdType, useIsEmptyPromotion } from 'src/utils/optimal.utils';
 
 import { PromotionItem } from '../promotion-item/promotion-item';
 import { TextPromotionItem } from '../text-promotion-item/text-promotion-item';
 import { OptimalPromotionVariantEnum } from './optimal-promotion-variant.enum';
 
 interface Props extends TestIdProps {
+  adType: OptimalPromotionAdType;
   style?: StyleProp<ViewStyle>;
   shouldShowCloseButton?: boolean;
   variant?: OptimalPromotionVariantEnum;
@@ -23,14 +24,15 @@ interface Props extends TestIdProps {
 }
 
 export const OptimalPromotionItem: FC<Props> = ({
+  adType,
   testID,
   style,
   shouldShowCloseButton = true,
   variant = OptimalPromotionVariantEnum.Image,
   onImageError,
   onEmptyPromotionReceived
 }) => {
-  const partnersPromotion = usePartnersPromoSelector();
+  const partnersPromotion = usePartnersPromoSelector(adType);
   const partnersPromotionLoading = usePartnersPromoLoadingSelector();
   const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector();
   const { disablePromotion } = usePromotionAfterConfirmation();

src/config/fixed-times.ts

@@ -6,6 +6,8 @@ const METADATA_SYNC_INTERVAL = 4 * BLOCK_DURATION;
 
 export const TOKENS_SYNC_INTERVAL = METADATA_SYNC_INTERVAL;
 
+export const SWAP_SYNC_INTERVAL = METADATA_SYNC_INTERVAL;
+
 export const BALANCES_SYNC_INTERVAL = BLOCK_DURATION;
 
 export const MARKET_SYNC_INTERVAL = 4 * BLOCK_DURATION;
@@ -22,4 +24,6 @@ export const RATES_SYNC_INTERVAL = LONG_INTERVAL;
 
 export const NOTIFICATIONS_SYNC_INTERVAL = LONG_INTERVAL;
 
+export const DAPPS_SYNC_INTERVAL = LONG_INTERVAL;
+
 export const APR_REFRESH_INTERVAL = 30 * ONE_MINUTE;

src/hooks/use-partners-promo.ts

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { PROMO_SYNC_INTERVAL } from 'src/config/fixed-times';
@@ -16,18 +15,6 @@ export const useIsPartnersPromoShown = () => {
   return isEnabled && !areAdsNotEnabled;
 };
 
-export const usePartnersPromoLoad = () => {
-  const promoIsShown = useIsPartnersPromoShown();
-
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (promoIsShown) {
-      dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile));
-    }
-  }, [promoIsShown]);
-};
-
 export const usePartnersPromoSync = () => {
   const promoIsShown = useIsPartnersPromoShown();
 
@@ -36,6 +23,7 @@ export const usePartnersPromoSync = () => {
   useAuthorisedInterval(
     () => {
       if (promoIsShown) {
+        dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwToken));
         dispatch(loadPartnersPromoActions.submit(OptimalPromotionAdType.TwMobile));
       }
     },

src/navigator/main-stack.tsx

@@ -16,14 +16,19 @@ import {
   RATES_SYNC_INTERVAL,
   SELECTED_BAKER_SYNC_INTERVAL,
   NOTIFICATIONS_SYNC_INTERVAL,
-  APR_REFRESH_INTERVAL
+  APR_REFRESH_INTERVAL,
+  MARKET_SYNC_INTERVAL,
+  SWAP_SYNC_INTERVAL,
+  DAPPS_SYNC_INTERVAL
 } from 'src/config/fixed-times';
 import { emptyFn } from 'src/config/general';
 import { isAndroid } from 'src/config/system';
 import { useBlockSubscription } from 'src/hooks/block-subscription/use-block-subscription.hook';
 import { useAppLockTimer } from 'src/hooks/use-app-lock-timer.hook';
 import { useAuthorisedInterval } from 'src/hooks/use-authed-interval';
 import { useNetworkInfo } from 'src/hooks/use-network-info.hook';
+import { usePartnersPromoSync } from 'src/hooks/use-partners-promo';
+import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum';
 import { About } from 'src/screens/about/about';
 import { Activity } from 'src/screens/activity/activity';
 import { Backup } from 'src/screens/backup/backup';
@@ -66,8 +71,15 @@ import { Welcome } from 'src/screens/welcome/welcome';
 import { useAppLock } from 'src/shelter/app-lock/app-lock';
 import { loadSelectedBakerActions } from 'src/store/baking/baking-actions';
 import { loadExchangeRates } from 'src/store/currency/currency-actions';
+import { useUsdToTokenRates } from 'src/store/currency/currency-selectors';
+import { loadDAppsListActions, loadTokensApyActions } from 'src/store/d-apps/d-apps-actions';
+import { loadAllFarmsAndStakesAction } from 'src/store/farms/actions';
+import { loadMarketTokensSlugsActions } from 'src/store/market/market-actions';
 import { loadNotificationsAction } from 'src/store/notifications/notifications-actions';
+import { togglePartnersPromotionAction } from 'src/store/partners-promotion/partners-promotion-actions';
+import { loadAllSavingsAndStakesAction } from 'src/store/savings/actions';
 import { useIsEnabledAdsBannerSelector, useSelectedRpcUrlSelector } from 'src/store/settings/settings-selectors';
+import { loadSwapDexesAction, loadSwapTokensAction } from 'src/store/swap/swap-actions';
 import {
   loadTokensActions,
   loadTezosBalanceActions,
@@ -77,12 +89,6 @@ import { useIsAuthorisedSelector, useSelectedAccountSelector } from 'src/store/w
 import { emptyTokenMetadata } from 'src/token/interfaces/token-metadata.interface';
 import { cloudTitle } from 'src/utils/cloud-backup';
 
-import { useUsdToTokenRates } from '../store/currency/currency-selectors';
-import { loadTokensApyActions } from '../store/d-apps/d-apps-actions';
-import { loadAllFarmsAndStakesAction } from '../store/farms/actions';
-import { togglePartnersPromotionAction } from '../store/partners-promotion/partners-promotion-actions';
-import { loadAllSavingsAndStakesAction } from '../store/savings/actions';
-import { ScreensEnum, ScreensParamList } from './enums/screens.enum';
 import { useStackNavigatorStyleOptions } from './hooks/use-stack-navigator-style-options.hook';
 import { NavigationBar } from './navigation-bar/navigation-bar';
 
@@ -135,6 +141,16 @@ export const MainStackScreen = () => {
     dispatch(loadAllSavingsAndStakesAction());
   }, APR_REFRESH_INTERVAL);
 
+  useAuthorisedInterval(() => {
+    if (isAndroid) {
+      dispatch(loadSwapTokensAction.submit());
+      dispatch(loadSwapDexesAction.submit());
+    }
+  }, SWAP_SYNC_INTERVAL);
+  useAuthorisedInterval(() => dispatch(loadDAppsListActions.submit()), DAPPS_SYNC_INTERVAL);
+  useAuthorisedInterval(() => dispatch(loadMarketTokensSlugsActions.submit()), MARKET_SYNC_INTERVAL);
+  usePartnersPromoSync();
+
   const shouldShowUnauthorizedScreens = !isAuthorised;
   const shouldShowAuthorizedScreens = isAuthorised && !isLocked;
   const shouldShowBlankScreen = isAuthorised && isLocked;

src/navigator/navigation-bar/hooks/use-navigation-bar-button.ts

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+
+import { emptyFn } from 'src/config/general';
+import { ScreensEnum } from 'src/navigator/enums/screens.enum';
+import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
+import { useColors } from 'src/styles/use-colors';
+
+import { NavigationBarButton } from '../interfaces/navigation-bar-button.interface';
+
+export const useNavigationBarButton = ({
+  focused,
+  routeName,
+  swapScreenParams,
+  disabled = false,
+  disabledOnPress = emptyFn
+}: Omit<NavigationBarButton, 'iconWidth'>) => {
+  const colors = useColors();
+  const { navigate } = useNavigation();
+
+  const color = useMemo(() => {
+    let value = colors.gray1;
+    focused && (value = colors.orange);
+    disabled && (value = colors.disabled);
+
+    return value;
+  }, [colors, focused, disabled]);
+
+  const handlePress = () => {
+    if (disabled) {
+      disabledOnPress();
+    } else {
+      if (routeName === ScreensEnum.SwapScreen) {
+        navigate(routeName, swapScreenParams);
+      } else {
+        navigate(routeName);
+      }
+    }
+  };
+
+  return {
+    color,
+    colors,
+    handlePress
+  };
+};

src/navigator/navigation-bar/hooks/use-navigation-bar.ts

@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+
+import { useNetworkInfo } from 'src/hooks/use-network-info.hook';
+import { ScreensEnum } from 'src/navigator/enums/screens.enum';
+import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
+import { showErrorToast } from 'src/toast/error-toast.utils';
+import { TokenInterface } from 'src/token/interfaces/token.interface';
+import { isDefined } from 'src/utils/is-defined';
+
+const NOT_AVAILABLE_MESSAGE = 'Not available on this RPC node';
+
+type RouteType = { params?: { token: TokenInterface } };
+type RouteParams = { name: string } & RouteType;
+
+export const useNavigationBar = (currentRouteName: ScreensEnum) => {
+  const { isDcpNode } = useNetworkInfo();
+  const { getState } = useNavigation();
+
+  const routes = getState().routes[0].state?.routes;
+  const route = getTokenParams(routes as RouteParams[]);
+  const swapScreenParams =
+    isDefined(route) && currentRouteName === ScreensEnum.TokenScreen ? { inputToken: route.params?.token } : undefined;
+
+  const isStackFocused = useCallback(
+    (screensStack: ScreensEnum[]) => isDefined(currentRouteName) && screensStack.includes(currentRouteName),
+    [currentRouteName]
+  );
+
+  const handleDisabledPress = useCallback(() => showErrorToast({ description: NOT_AVAILABLE_MESSAGE }), []);
+
+  return {
+    isDcpNode,
+    swapScreenParams,
+    isStackFocused,
+    handleDisabledPress
+  };
+};
+
+const getTokenParams = (routes: RouteParams[] | undefined): null | RouteType => {
+  let result = null;
+  if (Array.isArray(routes) && isDefined(routes)) {
+    for (const route of routes) {
+      if (route.name === ScreensEnum.TokenScreen) {
+        result = route;
+      }
+    }
+  }
+
+  return result;
+};

src/navigator/navigation-bar/interfaces/navigation-bar-button.interface.ts

@@ -0,0 +1,19 @@
+import { IconNameEnum } from 'src/components/icon/icon-name.enum';
+import { ScreensEnum, ScreensParamList } from 'src/navigator/enums/screens.enum';
+
+export interface NavigationBarButton {
+  label: string;
+  iconName: IconNameEnum;
+  iconWidth: number;
+  routeName:
+    | ScreensEnum.Wallet
+    | ScreensEnum.DApps
+    | ScreensEnum.SwapScreen
+    | ScreensEnum.Market
+    | ScreensEnum.CollectiblesHome;
+  focused: boolean;
+  disabled?: boolean;
+  showNotificationDot?: boolean;
+  swapScreenParams?: ScreensParamList[ScreensEnum.SwapScreen];
+  disabledOnPress?: EmptyFn;
+}

src/navigator/navigation-bar/navigation-bar.tsx

@@ -1,10 +1,11 @@
-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { Dimensions, View } from 'react-native';
 import { isTablet } from 'react-native-device-info';
 import Orientation, { useOrientationChange } from 'react-native-orientation-locker';
 
-import { useIsAuthorisedSelector } from '../../store/wallet/wallet-selectors';
-import { conditionalStyle } from '../../utils/conditional-style';
+import { useIsAuthorisedSelector } from 'src/store/wallet/wallet-selectors';
+import { conditionalStyle } from 'src/utils/conditional-style';
+
 import { CurrentRouteNameContext } from '../current-route-name.context';
 import { ScreensEnum } from '../enums/screens.enum';
 import { NavigationBarStyles } from './navigation-bar.styles';
@@ -20,13 +21,16 @@ const screensWithoutTabBar = [
   ScreensEnum.NotificationsItem
 ];
 
-export const NavigationBar: FC = ({ children }) => {
+export const NavigationBar = memo(({ children }) => {
   const isAuthorised = useIsAuthorisedSelector();
   const currentRouteName = useContext(CurrentRouteNameContext);
 
   const [isShowTabletNavigation, setIsShowTabletNavigation] = useState(false);
 
-  const isShowNavigationBar = isAuthorised && !screensWithoutTabBar.includes(currentRouteName);
+  const isShowNavigationBar = useMemo(
+    () => isAuthorised && !screensWithoutTabBar.includes(currentRouteName),
+    [currentRouteName, isAuthorised]
+  );
 
   useEffect(() => void (!isTablet() && Orientation.lockToPortrait()), []);
 
@@ -44,4 +48,4 @@ export const NavigationBar: FC = ({ children }) => {
       {isShowNavigationBar && !isShowTabletNavigation && <TabBar currentRouteName={currentRouteName} />}
     </View>
   );
-};
+});