TW-1110 Change Wert popup UI and UX

src/components/newsletter-modal-tracker.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { ModalsEnum } from 'src/navigator/enums/modals.enum';
+import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
+import { shouldShowNewsletterModalAction } from 'src/store/newsletter/newsletter-actions';
+import { setStartModalAllowedAction } from 'src/store/settings/settings-actions';
+
+const navigationStateFallback = { routes: [], index: 0 };
+
+export const NewsletterModalTracker = () => {
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+  const { routes, index } = navigation.getState() ?? navigationStateFallback;
+  const routeName = routes[index]?.name ?? '';
+  const prevRouteNameRef = useRef('');
+
+  useEffect(() => {
+    if (routeName !== ModalsEnum.Newsletter && prevRouteNameRef.current === ModalsEnum.Newsletter) {
+      dispatch(setStartModalAllowedAction(true));
+      dispatch(shouldShowNewsletterModalAction(false));
+    }
+    prevRouteNameRef.current = routeName;
+  }, [dispatch, routeName]);
+
+  return null;
+};

src/hooks/root-hooks/index.ts

@@ -3,8 +3,7 @@ import { useFirebaseApp } from './use-firebase-app';
 import { usePushNotifications } from './use-push-notifications';
 import { useQuickActions } from './use-quick-actions';
 import { useResetKeychainOnInstall } from './use-reset-keychain-on-install';
-import { useResetLoading } from './use-reset-loading';
-import { useResetOnRampOverlay } from './use-reset-on-ramp-overlay';
+import { useResetPermanentInitialSettings } from './use-reset-permanent-initial-settings';
 import { useScamlistLoading } from './use-scamlist-loading';
 import { useStorageAnalytics } from './use-storage-analytics';
 import { useWhitelistLoading } from './use-whitelist-loading';
@@ -16,11 +15,9 @@ export const useRootHooks = () => {
   useScamlistLoading();
   useCollectiblesDetailsLoading();
   useQuickActions();
-  useResetLoading();
+  useResetPermanentInitialSettings();
   useResetKeychainOnInstall();
 
   useFirebaseApp();
   usePushNotifications();
-
-  useResetOnRampOverlay();
 };

src/hooks/root-hooks/use-reset-permanent-initial-settings.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { resetPermanentInitialSettingsAction } from 'src/store/settings/settings-actions';
+
+export const useResetPermanentInitialSettings = () => {
+  const dispatch = useDispatch();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => void dispatch(resetPermanentInitialSettingsAction()), []);
+};

src/interfaces/account-state.interface.ts

@@ -9,7 +9,6 @@ export interface AccountStateInterface {
   tokensList: AccountTokenInterface[];
   dcpTokensList: AccountTokenInterface[];
   removedTokensList: string[];
-  tezosBalanceLoading?: boolean;
 }
 
 export const initialAccountState: AccountStateInterface = {
@@ -25,6 +24,5 @@ export const initialAccountState: AccountStateInterface = {
     balance: '0',
     visibility: VisibilityEnum.Visible
   })),
-  removedTokensList: [],
-  tezosBalanceLoading: false
+  removedTokensList: []
 };

src/navigator/root-stack.tsx

@@ -1,17 +1,14 @@
 import { PortalProvider } from '@gorhom/portal';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { BigNumber } from 'bignumber.js';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useState } from 'react';
 
 import { useModalOptions } from 'src/components/header/use-modal-options.util';
 import { Loader } from 'src/components/loader/loader';
+import { NewsletterModalTracker } from 'src/components/newsletter-modal-tracker';
 import { isIOS } from 'src/config/system';
-import { OnRampOverlayState } from 'src/enums/on-ramp-overlay-state.enum';
 import { useRootHooks } from 'src/hooks/root-hooks';
 import { useAppSplash } from 'src/hooks/use-app-splash.hook';
-import { useCanUseOnRamp } from 'src/hooks/use-can-use-on-ramp.hook';
 import { useDevicePasscode } from 'src/hooks/use-device-passcode.hook';
 import { useNetworkInfo } from 'src/hooks/use-network-info.hook';
 import { AddAssetModal } from 'src/modals/add-asset-modal/add-asset-modal';
@@ -45,15 +42,9 @@ import { EnterPassword } from 'src/screens/enter-password/enter-password';
 import { ForceUpdate } from 'src/screens/force-update/force-update';
 import { PassCode } from 'src/screens/passcode/passcode';
 import { useAppLock } from 'src/shelter/app-lock/app-lock';
-import { shouldShowNewsletterModalAction } from 'src/store/newsletter/newsletter-actions';
 import { useIsAppCheckFailed, useIsForceUpdateNeeded } from 'src/store/security/security-selectors';
-import { setOnRampOverlayStateAction } from 'src/store/settings/settings-actions';
-import { useIsOnRampHasBeenShownBeforeSelector, useIsShowLoaderSelector } from 'src/store/settings/settings-selectors';
-import {
-  useCurrentAccountTezosBalance,
-  useCurrentAccountTezosBalanceLoadingSelector,
-  useIsAuthorisedSelector
-} from 'src/store/wallet/wallet-selectors';
+import { useIsShowLoaderSelector } from 'src/store/settings/settings-selectors';
+import { useIsAuthorisedSelector } from 'src/store/wallet/wallet-selectors';
 
 import { CurrentRouteNameContext } from './current-route-name.context';
 import { ModalsEnum, ModalsParamList } from './enums/modals.enum';
@@ -72,13 +63,8 @@ export const RootStackScreen = () => {
   const { isLocked } = useAppLock();
   const isShowLoader = useIsShowLoaderSelector();
   const isAuthorised = useIsAuthorisedSelector();
-  const canUseOnRamp = useCanUseOnRamp();
   const { isDcpNode } = useNetworkInfo();
 
-  const balance = useCurrentAccountTezosBalance();
-  const balanceLoading = useCurrentAccountTezosBalanceLoadingSelector();
-  const isOnRampHasBeenShownBefore = useIsOnRampHasBeenShownBeforeSelector();
-
   useRootHooks();
 
   const isSplash = useAppSplash();
@@ -90,27 +76,10 @@ export const RootStackScreen = () => {
   const screenOptions = useStackNavigationOptions();
 
   const [currentRouteName, setCurrentRouteName] = useState<ScreensEnum>(ScreensEnum.Welcome);
-  const [shouldShowStartRampOverlayIfNoTez, setShouldShowStartRampOverlayIfNoTez] = useState(false);
 
   const handleNavigationContainerStateChange = () =>
     setCurrentRouteName(globalNavigationRef.current?.getCurrentRoute()?.name as ScreensEnum);
 
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (shouldShowStartRampOverlayIfNoTez && new BigNumber(balance).isZero() && balanceLoading === false) {
-      dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Start));
-      setShouldShowStartRampOverlayIfNoTez(false);
-    }
-  }, [balance, balanceLoading, dispatch, shouldShowStartRampOverlayIfNoTez]);
-
-  const beforeRemove = useCallback(() => {
-    dispatch(shouldShowNewsletterModalAction(false));
-    if (canUseOnRamp && !isOnRampHasBeenShownBefore) {
-      setShouldShowStartRampOverlayIfNoTez(true);
-    }
-  }, [canUseOnRamp, dispatch, isOnRampHasBeenShownBefore]);
-
   return (
     <NavigationContainer
       ref={globalNavigationRef}
@@ -204,7 +173,6 @@ export const RootStackScreen = () => {
               name={ModalsEnum.Newsletter}
               component={Newsletter}
               options={useModalOptions('Newsletter')}
-              listeners={{ beforeRemove }}
             />
             <RootStack.Screen
               name={ModalsEnum.InAppBrowser}
@@ -255,6 +223,7 @@ export const RootStackScreen = () => {
         </CurrentRouteNameContext.Provider>
       </PortalProvider>
 
+      <NewsletterModalTracker />
       {isSplash && <SplashModal />}
       {isAuthorised && isLocked && <EnterPassword />}
       {!isPasscode && <PassCode />}

src/screens/wallet/on-ramp-overlay/on-ramp-overlay.tsx

@@ -9,8 +9,8 @@ import { useBottomSheetController } from 'src/components/bottom-sheet/use-bottom
 import { Divider } from 'src/components/divider/divider';
 import { IconNameEnum } from 'src/components/icon/icon-name.enum';
 import { OnRampOverlayState } from 'src/enums/on-ramp-overlay-state.enum';
-import { setIsOnRampHasBeenShownBeforeAction, setOnRampOverlayStateAction } from 'src/store/settings/settings-actions';
-import { useOnRampOverlayStateSelector } from 'src/store/settings/settings-selectors';
+import { setOnRampOverlayStateAction, setStartModalAllowedAction } from 'src/store/settings/settings-actions';
+import { useOnRampOverlayStateSelector, useStartModalAllowedSelector } from 'src/store/settings/settings-selectors';
 import { useCurrentAccountPkhSelector } from 'src/store/wallet/wallet-selectors';
 import { formatSize } from 'src/styles/format-size';
 import { openUrl } from 'src/utils/linking';
@@ -21,11 +21,11 @@ import { OnRampSmileButton } from './on-ramp-smile-button/on-ramp-smile-button';
 import { OnRampTextButton } from './on-ramp-text-button/on-ramp-text-button';
 import { getWertLink } from './utils/get-wert-link.util';
 
-interface OnRampAnimatedProps {
+interface OverlayBodyProps {
   isStart: boolean;
 }
 
-const OverlayBody = memo<Pick<OnRampAnimatedProps, 'isStart'>>(({ isStart }) => {
+const OverlayBody = memo<OverlayBodyProps>(({ isStart }) => {
   const styles = useOnRampOverlayStyles();
   const dropdownBottomSheetStyles = useDropdownBottomSheetStyles();
   const dispatch = useDispatch();
@@ -34,7 +34,6 @@ const OverlayBody = memo<Pick<OnRampAnimatedProps, 'isStart'>>(({ isStart }) =>
   const handleOnRampButtonPress = useCallback(
     (amount = 0) => {
       dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Closed));
-      dispatch(setIsOnRampHasBeenShownBeforeAction(true));
       openUrl(getWertLink(publicKeyHash, amount));
     },
     [dispatch, publicKeyHash]
@@ -100,17 +99,23 @@ const OverlayBody = memo<Pick<OnRampAnimatedProps, 'isStart'>>(({ isStart }) =>
 export const OnRampOverlay = () => {
   const bottomSheetController = useBottomSheetController();
   const onRampOverlayState = useOnRampOverlayStateSelector();
+  const startModalAllowed = useStartModalAllowedSelector();
   const dispatch = useDispatch();
   const isStart = onRampOverlayState === OnRampOverlayState.Start;
-  const isOnRampPossibility = onRampOverlayState !== OnRampOverlayState.Closed;
   const isFocused = useIsFocused();
 
-  useEffect(
-    () => (isFocused && isOnRampPossibility ? bottomSheetController.open() : bottomSheetController.close()),
-    [bottomSheetController, isFocused, isOnRampPossibility]
-  );
+  useEffect(() => {
+    isFocused &&
+    (onRampOverlayState === OnRampOverlayState.Continue ||
+      (onRampOverlayState === OnRampOverlayState.Start && startModalAllowed))
+      ? bottomSheetController.open()
+      : bottomSheetController.close();
+  }, [bottomSheetController, isFocused, onRampOverlayState, startModalAllowed]);
 
-  const handleCancel = useCallback(() => dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Closed)), [dispatch]);
+  const handleCancel = useCallback(() => {
+    dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Closed));
+    dispatch(setStartModalAllowedAction(false));
+  }, [dispatch]);
 
   return (
     <BottomSheet

src/store/settings/settings-actions.ts

@@ -30,6 +30,8 @@ export const showLoaderAction = createAction('settings/SHOW_LOADER_ACTION');
 export const hideLoaderAction = createAction('settings/HIDE_LOADER_ACTION');
 export const setIsShowLoaderAction = createAction<boolean>('settings/SET_IS_SHOW_LOADER_ACTION');
 
+export const resetPermanentInitialSettingsAction = createAction('settings/RESET_PERMANENT_INITIAL_SETTINGS');
+
 export const setIsApkBuildLaunchEventFired = createAction<boolean>('settings/SET_IS_APK_BUILD_LAUNCH_EVENT_FIRED');
 
 export const setIsPushNotificationsEnabledEventFired = createAction<boolean>(
@@ -43,12 +45,11 @@ export const madeCloudBackupAction = createAction<void>('settings/MADE_CLOUD_BAC
 export const setOnRampOverlayStateAction = createAction<OnRampOverlayState>(
   'settings/SET_ON_RAMP_OVERLAY_STATE_ACTION'
 );
-export const setIsOnRampHasBeenShownBeforeAction = createAction<boolean>(
-  'settings/SET_IS_ON_RAMP_HAS_BEEN_SHOWN_BEFORE_ACTION'
-);
 
 export const walletOpenedAction = createAction<void>('settings/APPLICATION_OPENED_ACTION');
 
 export const switchIsShowCollectibleInfoAction = createAction('settings/SET_IS_SHOW_COLLECTIBLE_INFO_ACTION');
 
 export const setIsInAppUpdateAvailableAction = createAction<boolean>('settings/SET_IS_IN_APP_UPDATE_AVAILABLE_ACTION');
+
+export const setStartModalAllowedAction = createAction<boolean>('settings/NEWSLETTER_SEEN_ACTION');

src/store/settings/settings-reducers.ts

@@ -1,5 +1,6 @@
 import { createReducer } from '@reduxjs/toolkit';
 
+import { OnRampOverlayState } from 'src/enums/on-ramp-overlay-state.enum';
 import { DCP_RPC } from 'src/utils/rpc/rpc-list';
 
 import { resetKeychainOnInstallAction } from '../root-state.actions';
@@ -24,11 +25,12 @@ import {
   madeManualBackupAction,
   madeCloudBackupAction,
   setOnRampOverlayStateAction,
-  setIsOnRampHasBeenShownBeforeAction,
   setIsApkBuildLaunchEventFired,
   setIsPushNotificationsEnabledEventFired,
   switchIsShowCollectibleInfoAction,
-  setIsInAppUpdateAvailableAction
+  setIsInAppUpdateAvailableAction,
+  resetPermanentInitialSettingsAction,
+  setStartModalAllowedAction
 } from './settings-actions';
 import { SettingsState, settingsInitialState } from './settings-state';
 import { alterCustomRPC } from './utils';
@@ -38,6 +40,16 @@ export const settingsReducers = createReducer<SettingsState>(settingsInitialStat
 
   builder.addCase(setIsShowLoaderAction, (state, { payload: isShowLoader }) => ({ ...state, isShowLoader }));
 
+  builder.addCase(resetPermanentInitialSettingsAction, state => {
+    state.isShowLoader = false;
+    state.onRampOverlayState = OnRampOverlayState.Closed;
+    state.startModalAllowed = false;
+  });
+
+  builder.addCase(setStartModalAllowedAction, (state, { payload: newStartModalAllowed }) => {
+    state.startModalAllowed = newStartModalAllowed;
+  });
+
   builder.addCase(setIsBiometricsEnabled, (state, { payload: isBiometricsEnabled }) => ({
     ...state,
     isBiometricsEnabled
@@ -131,10 +143,6 @@ export const settingsReducers = createReducer<SettingsState>(settingsInitialStat
 
     return state;
   });
-  builder.addCase(setIsOnRampHasBeenShownBeforeAction, (state, { payload: isOnRampHasBeenShownBefore }) => ({
-    ...state,
-    isOnRampHasBeenShownBefore
-  }));
 
   builder.addCase(walletOpenedAction, state => ({
     ...state,

src/store/settings/settings-selectors.ts

@@ -63,12 +63,11 @@ export const useIsInAppUpdateAvailableSelector = () => useSelector(({ settings }
 
 export const useIsShowCollectibleInfoSelector = () => useSelector(({ settings }) => settings.isShowCollectibleInfo);
 
-export const useIsOnRampHasBeenShownBeforeSelector = () =>
-  useSelector(({ settings }) => settings.isOnRampHasBeenShownBefore);
-
 export const useAssetExchangeRate = (slug: string) => {
   const assetUsdExchangeRate = useSelector(state => state.currency.usdToTokenRates.data[slug]);
   const fiatToUsdRate = useFiatToUsdRateSelector();
 
   return isDefined(assetUsdExchangeRate) && isDefined(fiatToUsdRate) ? assetUsdExchangeRate * fiatToUsdRate : undefined;
 };
+
+export const useStartModalAllowedSelector = () => useSelector(({ settings }) => settings.startModalAllowed);

src/store/settings/settings-state.mock.ts

@@ -21,9 +21,9 @@ export const mockSettingsState: SettingsState = {
   isShowLoader: false,
   isManualBackupMade: true,
   isCloudBackupMade: true,
+  startModalAllowed: false,
   onRampOverlayState: OnRampOverlayState.Closed,
   applicationOpenCounter: 1,
-  isOnRampHasBeenShownBefore: false,
   isApkBuildLaunchEventFired: false,
   isPushNotificationsEnabledEventFired: false,
   isShowCollectibleInfo: false,

src/store/settings/settings-state.ts

@@ -25,8 +25,10 @@ export interface SettingsState {
   isCloudBackupMade: boolean;
   /** @deprecated */
   isOnRampPossibility?: boolean;
+  startModalAllowed: boolean;
   onRampOverlayState: OnRampOverlayState;
-  isOnRampHasBeenShownBefore: boolean;
+  /** @deprecated */
+  isOnRampHasBeenShownBefore?: boolean;
   applicationOpenCounter: number;
   /** @deprecated */
   isEnableAdsBanner?: boolean;
@@ -53,8 +55,8 @@ export const settingsInitialState: SettingsState = {
   isManualBackupMade: true,
   isCloudBackupMade: true,
   applicationOpenCounter: 0,
+  startModalAllowed: false,
   onRampOverlayState: OnRampOverlayState.Closed,
-  isOnRampHasBeenShownBefore: false,
   isApkBuildLaunchEventFired: false,
   isPushNotificationsEnabledEventFired: false,
   isShowCollectibleInfo: false,