From 33b53b43d5eb2d7570c2071f8cf6fdbea4d9d426 Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Thu, 3 Aug 2023 12:02:13 +0800
Subject: [PATCH] feat(ui-ux): hide bottom nagivation when EMV network is
 selected (#4011)

* feat(ui-ux): hide bottom nagivation when EMV network is selected

* future proof condition
---
 .../AppNavigator/BottomTabNavigator.tsx       | 97 +++++++++++--------
 1 file changed, 54 insertions(+), 43 deletions(-)

diff --git a/mobile-app/app/screens/AppNavigator/BottomTabNavigator.tsx b/mobile-app/app/screens/AppNavigator/BottomTabNavigator.tsx
index e79ef958cb..874a0cfe48 100644
--- a/mobile-app/app/screens/AppNavigator/BottomTabNavigator.tsx
+++ b/mobile-app/app/screens/AppNavigator/BottomTabNavigator.tsx
@@ -10,6 +10,7 @@ import {
   PortfolioIcon,
 } from "@screens/WalletNavigator/assets/BottomNavIcon";
 import { useThemeContext } from "@waveshq/walletkit-ui";
+import { DomainType, useDomainContext } from "@contexts/DomainContext";
 import { PortfolioNavigator } from "./screens/Portfolio/PortfolioNavigator";
 import { DexNavigator } from "./screens/Dex/DexNavigator";
 import { LoansNavigator } from "./screens/Loans/LoansNavigator";
@@ -41,6 +42,7 @@ const getTabBarLabel = ({
 
 export function BottomTabNavigator(): JSX.Element {
   const { isLight } = useThemeContext();
+  const { domain } = useDomainContext();
   return (
     <>
       <OceanInterface />
@@ -54,7 +56,8 @@ export function BottomTabNavigator(): JSX.Element {
             "px-5 py-2 h-16 border-t",
             { "bg-mono-light-v2-00 border-mono-light-v2-100": isLight },
             { "bg-mono-dark-v2-00 border-mono-dark-v2-100": !isLight },
-            { "pt-1 pb-4 h-24": Platform.OS === "ios" }
+            { "pt-1 pb-4 h-24": Platform.OS === "ios" },
+            { hidden: domain !== DomainType.DFI }
           ),
           tabBarActiveTintColor: getColor("brand-v2-500"),
           tabBarInactiveTintColor: isLight
@@ -80,50 +83,58 @@ export function BottomTabNavigator(): JSX.Element {
           }}
         />
 
-        <BottomTab.Screen
-          component={DexNavigator}
-          name="DEX"
-          options={{
-            tabBarLabel: ({ focused, color }) =>
-              getTabBarLabel({
-                focused,
-                color,
-                title: translate("BottomTabNavigator", "DEX"),
-              }),
-            tabBarTestID: "bottom_tab_dex",
-            tabBarIcon: ({ color }) => <DEXIcon color={color} size={24} />,
-          }}
-        />
+        {domain === DomainType.DFI && (
+          <>
+            <BottomTab.Screen
+              component={DexNavigator}
+              name="DEX"
+              options={{
+                tabBarLabel: ({ focused, color }) =>
+                  getTabBarLabel({
+                    focused,
+                    color,
+                    title: translate("BottomTabNavigator", "DEX"),
+                  }),
+                tabBarTestID: "bottom_tab_dex",
+                tabBarIcon: ({ color }) => <DEXIcon color={color} size={24} />,
+              }}
+            />
 
-        <BottomTab.Screen
-          component={LoansNavigator}
-          name="Loans"
-          options={{
-            tabBarLabel: ({ focused, color }) =>
-              getTabBarLabel({
-                focused,
-                color,
-                title: translate("BottomTabNavigator", "Loans"),
-              }),
-            tabBarTestID: "bottom_tab_loans",
-            tabBarIcon: ({ color }) => <LoansIcon color={color} size={24} />,
-          }}
-        />
+            <BottomTab.Screen
+              component={LoansNavigator}
+              name="Loans"
+              options={{
+                tabBarLabel: ({ focused, color }) =>
+                  getTabBarLabel({
+                    focused,
+                    color,
+                    title: translate("BottomTabNavigator", "Loans"),
+                  }),
+                tabBarTestID: "bottom_tab_loans",
+                tabBarIcon: ({ color }) => (
+                  <LoansIcon color={color} size={24} />
+                ),
+              }}
+            />
 
-        <BottomTab.Screen
-          component={AuctionsNavigator}
-          name="Auctions"
-          options={{
-            tabBarLabel: ({ focused, color }) =>
-              getTabBarLabel({
-                focused,
-                color,
-                title: translate("BottomTabNavigator", "Auctions"),
-              }),
-            tabBarTestID: "bottom_tab_auctions",
-            tabBarIcon: ({ color }) => <AuctionsIcon color={color} size={24} />,
-          }}
-        />
+            <BottomTab.Screen
+              component={AuctionsNavigator}
+              name="Auctions"
+              options={{
+                tabBarLabel: ({ focused, color }) =>
+                  getTabBarLabel({
+                    focused,
+                    color,
+                    title: translate("BottomTabNavigator", "Auctions"),
+                  }),
+                tabBarTestID: "bottom_tab_auctions",
+                tabBarIcon: ({ color }) => (
+                  <AuctionsIcon color={color} size={24} />
+                ),
+              }}
+            />
+          </>
+        )}
       </BottomTab.Navigator>
     </>
   );