small refactor

madfish-solutions · Aug 16, 2023 · fa518bf · fa518bf
1 parent 5605708
commit fa518bf
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 39 deletions.
diff --git a/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.tsx b/src/navigator/navigation-bar/side-bar/side-bar-button/side-bar-button.tsx
@@ -20,7 +20,7 @@ interface Props {
   disabled?: boolean;
   showNotificationDot?: boolean;
   params?: ScreensParamList[ScreensEnum.SwapScreen];
-  onPress?: EmptyFn;
+  onSwapButtonPress?: EmptyFn;
   disabledOnPress?: EmptyFn;
 }
 
@@ -32,7 +32,7 @@ export const SideBarButton: FC<Props> = ({
   disabled = false,
   showNotificationDot = false,
   params,
-  onPress,
+  onSwapButtonPress,
   disabledOnPress = emptyFn
 }) => {
   const colors = useColors();
@@ -51,8 +51,8 @@ export const SideBarButton: FC<Props> = ({
     if (disabled) {
       disabledOnPress();
     } else {
-      if (onPress) {
-        onPress();
+      if (onSwapButtonPress) {
+        onSwapButtonPress();
       } else {
         // @ts-ignore
         navigate(routeName, params);

diff --git a/src/navigator/navigation-bar/side-bar/side-bar.tsx b/src/navigator/navigation-bar/side-bar/side-bar.tsx
@@ -1,5 +1,5 @@
 import { BigNumber } from 'bignumber.js';
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import { ScrollView, View } from 'react-native';
 
 import { useBottomSheetController } from 'src/components/bottom-sheet/use-bottom-sheet-controller';
@@ -37,23 +37,28 @@ export const SideBar: FC<Props> = ({ currentRouteName }) => {
   const styles = useSideBarStyles();
 
   const { isDcpNode } = useNetworkInfo();
-
   const { balance } = useTotalBalance();
-
   const { getState } = useNavigation();
 
   const swapDisclaimerOverlayController = useBottomSheetController();
-  const isSwapDisclaimerShowingSelector = useIsSwapDisclaimerShowingSelector();
+  const isSwapDisclaimerShowing = useIsSwapDisclaimerShowingSelector();
 
   const routes = getState().routes[0].state?.routes;
   const route = getTokenParams(routes as RouteParams[]);
-  const params =
+  const swapScreenParams =
     isDefined(route) && currentRouteName === ScreensEnum.TokenScreen ? { inputToken: route.params?.token } : undefined;
 
-  const isStackFocused = (screensStack: ScreensEnum[]) =>
-    isDefined(currentRouteName) && screensStack.includes(currentRouteName);
+  const isStackFocused = useCallback(
+    (screensStack: ScreensEnum[]) => isDefined(currentRouteName) && screensStack.includes(currentRouteName),
+    [currentRouteName]
+  );
+
+  const isSwapButtonDisabled = useMemo(
+    () => isDcpNode || (isIOS && new BigNumber(balance).isLessThanOrEqualTo(0)),
+    [isDcpNode, balance]
+  );
 
-  const disabledOnPress = () => showErrorToast({ description: NOT_AVAILABLE_MESSAGE });
+  const handleDisabledPress = () => showErrorToast({ description: NOT_AVAILABLE_MESSAGE });
 
   return (
     <View style={styles.container}>
@@ -72,24 +77,25 @@ export const SideBar: FC<Props> = ({ currentRouteName }) => {
             iconName={IconNameEnum.NFT}
             routeName={ScreensEnum.CollectiblesHome}
             focused={isStackFocused(nftStackScreens)}
-            disabledOnPress={disabledOnPress}
+            disabledOnPress={handleDisabledPress}
           />
           <SideBarButton
             label="Swap"
             iconName={IconNameEnum.Swap}
             routeName={ScreensEnum.SwapScreen}
+            params={swapScreenParams}
             focused={isStackFocused(swapStackScreens)}
-            disabled={isDcpNode || (isIOS && new BigNumber(balance).isLessThanOrEqualTo(0))}
-            onPress={isIOS && isSwapDisclaimerShowingSelector ? swapDisclaimerOverlayController.open : undefined}
-            disabledOnPress={isDcpNode ? disabledOnPress : undefined}
+            disabled={isSwapButtonDisabled}
+            onSwapButtonPress={isIOS && isSwapDisclaimerShowing ? swapDisclaimerOverlayController.open : undefined}
+            disabledOnPress={isDcpNode ? handleDisabledPress : undefined}
           />
           <SideBarButton
             label="DApps"
             iconName={IconNameEnum.DApps}
             routeName={ScreensEnum.DApps}
             focused={isStackFocused(dAppsStackScreens)}
-            disabled={isDcpNode || (isIOS && new BigNumber(balance).isLessThanOrEqualTo(0))}
-            disabledOnPress={isDcpNode ? disabledOnPress : undefined}
+            disabled={isDcpNode}
+            disabledOnPress={handleDisabledPress}
           />
           <SideBarButton
             label="Market"
@@ -105,7 +111,7 @@ export const SideBar: FC<Props> = ({ currentRouteName }) => {
           <InsetSubstitute type="bottom" />
         </View>
       </ScrollView>
-      <SwapDisclaimerOverlay controller={swapDisclaimerOverlayController} routeParams={params} />
+      <SwapDisclaimerOverlay controller={swapDisclaimerOverlayController} routeParams={swapScreenParams} />
     </View>
   );
 };
diff --git a/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.tsx b/src/navigator/navigation-bar/tab-bar/tab-bar-button/tab-bar-button.tsx
@@ -20,7 +20,7 @@ interface Props {
   disabled?: boolean;
   showNotificationDot?: boolean;
   params?: ScreensParamList[ScreensEnum.SwapScreen];
-  onPress?: EmptyFn;
+  onSwapButtonPress?: EmptyFn;
   disabledOnPress?: EmptyFn;
 }
 
@@ -33,7 +33,7 @@ export const TabBarButton: FC<Props> = ({
   disabled = false,
   showNotificationDot = false,
   params,
-  onPress,
+  onSwapButtonPress,
   disabledOnPress = emptyFn
 }) => {
   const colors = useColors();
@@ -52,8 +52,8 @@ export const TabBarButton: FC<Props> = ({
     if (disabled) {
       disabledOnPress();
     } else {
-      if (onPress) {
-        onPress();
+      if (onSwapButtonPress) {
+        onSwapButtonPress();
       } else {
         // @ts-ignore
         navigate(routeName, params);

diff --git a/src/navigator/navigation-bar/tab-bar/tab-bar.tsx b/src/navigator/navigation-bar/tab-bar/tab-bar.tsx
@@ -1,5 +1,5 @@
 import { BigNumber } from 'bignumber.js';
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { useBottomSheetController } from 'src/components/bottom-sheet/use-bottom-sheet-controller';
@@ -40,23 +40,28 @@ export const TabBar: FC<Props> = ({ currentRouteName }) => {
   const styles = useTabBarStyles();
 
   const { isDcpNode } = useNetworkInfo();
-
   const { balance } = useTotalBalance();
-
   const { getState } = useNavigation();
 
   const swapDisclaimerOverlayController = useBottomSheetController();
-  const isSwapDisclaimerShowingSelector = useIsSwapDisclaimerShowingSelector();
+  const isSwapDisclaimerShowing = useIsSwapDisclaimerShowingSelector();
 
   const routes = getState().routes[0].state?.routes;
   const route = getTokenParams(routes as RouteParams[]);
-  const params =
+  const swapScreenParams =
     isDefined(route) && currentRouteName === ScreensEnum.TokenScreen ? { inputToken: route.params?.token } : undefined;
 
-  const isStackFocused = (screensStack: ScreensEnum[]) =>
-    isDefined(currentRouteName) && screensStack.includes(currentRouteName);
+  const isStackFocused = useCallback(
+    (screensStack: ScreensEnum[]) => isDefined(currentRouteName) && screensStack.includes(currentRouteName),
+    [currentRouteName]
+  );
+
+  const isSwapButtonDisabled = useMemo(
+    () => isDcpNode || (isIOS && new BigNumber(balance).isLessThanOrEqualTo(0)),
+    [isDcpNode, balance]
+  );
 
-  const disabledOnPress = () => showErrorToast({ description: NOT_AVAILABLE_MESSAGE });
+  const handleDisabledPress = () => showErrorToast({ description: NOT_AVAILABLE_MESSAGE });
 
   return (
     <View style={styles.container}>
@@ -74,18 +79,18 @@ export const TabBar: FC<Props> = ({ currentRouteName }) => {
           iconWidth={formatSize(32)}
           routeName={ScreensEnum.CollectiblesHome}
           focused={isStackFocused(nftStackScreens)}
-          disabledOnPress={disabledOnPress}
+          disabledOnPress={handleDisabledPress}
         />
         <TabBarButton
           label="Swap"
           iconName={IconNameEnum.Swap}
           iconWidth={formatSize(32)}
           routeName={ScreensEnum.SwapScreen}
-          params={params}
+          params={swapScreenParams}
           focused={isStackFocused(swapStackScreens)}
-          disabled={isDcpNode || (isIOS && new BigNumber(balance).isLessThanOrEqualTo(0))}
-          onPress={isIOS && isSwapDisclaimerShowingSelector ? swapDisclaimerOverlayController.open : undefined}
-          disabledOnPress={isDcpNode ? disabledOnPress : undefined}
+          disabled={isSwapButtonDisabled}
+          onSwapButtonPress={isIOS && isSwapDisclaimerShowing ? swapDisclaimerOverlayController.open : undefined}
+          disabledOnPress={isDcpNode ? handleDisabledPress : undefined}
         />
         <TabBarButton
           label="DApps"
@@ -94,19 +99,19 @@ export const TabBar: FC<Props> = ({ currentRouteName }) => {
           routeName={ScreensEnum.DApps}
           focused={isStackFocused(dAppsStackScreens)}
           disabled={isDcpNode}
-          disabledOnPress={disabledOnPress}
+          disabledOnPress={handleDisabledPress}
         />
         <TabBarButton
           label="Market"
           iconName={IconNameEnum.Market}
           iconWidth={formatSize(32)}
           routeName={ScreensEnum.Market}
           focused={isStackFocused(marketStackScreens)}
-          disabledOnPress={disabledOnPress}
+          disabledOnPress={handleDisabledPress}
         />
       </View>
       <InsetSubstitute type="bottom" />
-      <SwapDisclaimerOverlay controller={swapDisclaimerOverlayController} routeParams={params} />
+      <SwapDisclaimerOverlay controller={swapDisclaimerOverlayController} routeParams={swapScreenParams} />
     </View>
   );
 };