fix(mini-mode): navigation (#960)

* fix(DAppStore): Fix navigation in DAppsList component, disallow external apps Since the native wallet is only available in app and not in the web * modified Navigater component and placed normal and mini navigator on same stack fixed dapp store apps onPress navigation * fix: getNav on platform specific * removed view seed screen from normal navigation screen * feat(DAppStore): update import paths in getFromFile.ts (fix/mini-navigation) * feat(DAppStore): update DApp title in getFromFile query - Update the title of the DApp "toriwallet" to "Teritori OS Wallet" in the getFromFile query. * feat(DAppStore): hide Osmosis in Teritori OS Mobile mode * feat(DAppStore): show native wallet only on mobile. In the web show wallet manager * fix rebase conflict * fixed unused exports --------- Co-authored-by: Eng. Juan Combetto <[email protected]>
TERITORI · Feb 21, 2024 · ec83b99 · ec83b99
1 parent 2b017c5
commit ec83b99
Show file tree

Hide file tree

Showing 20 changed files with 227 additions and 167 deletions.
diff --git a/assets/icons/feed-gray.svg b/assets/icons/feed-gray.svg
diff --git a/packages/components/navigation/Navigator.tsx b/packages/components/navigation/Navigator.tsx
@@ -1,13 +1,34 @@
-import { MiniModeNavigator } from "./MiniModeNavigator";
-import { NormalModeNavigator } from "./NormalModeNavigator";
+import { Platform } from "react-native";
+
+import { Sidebar } from "./Sidebar";
+import { getMiniModeScreens } from "./getMiniModeScreens";
+import { getNormalModeScreens } from "./getNormalModeScreens";
+import { getNav } from "./util";
 
 import { useAppMode } from "@/hooks/useAppMode";
+import { useOnboardedStatus } from "@/hooks/useOnboardStatus";
+import { AppMode } from "@/utils/types/app-mode";
 
-export const Navigator = () => {
+export const Navigator: React.FC = () => {
   const [appMode] = useAppMode();
+  const [isLoading] = useOnboardedStatus();
+
+  const { Nav, navigatorScreenOptions } = getNav(appMode as AppMode);
 
-  if (appMode === "mini") {
-    return <MiniModeNavigator />;
+  if (isLoading && appMode === "mini") {
+    return null;
   }
-  return <NormalModeNavigator />;
+
+  return (
+    <Nav.Navigator
+      initialRouteName={appMode === "mini" ? "MiniTabs" : "Home"}
+      drawerContent={() =>
+        Platform.OS === "web" || appMode === "mini" ? null : <Sidebar />
+      }
+      screenOptions={navigatorScreenOptions as any} // FIXME: upgrade to expo-router
+    >
+      {getNormalModeScreens({ appMode: appMode as AppMode })}
+      {appMode === "mini" ? getMiniModeScreens() : null}
+    </Nav.Navigator>
+  );
 };
diff --git a/...mponents/navigation/MiniModeNavigator.tsx → ...ponents/navigation/getMiniModeScreens.tsx b/...mponents/navigation/MiniModeNavigator.tsx → ...ponents/navigation/getMiniModeScreens.tsx
@@ -10,9 +10,6 @@ import { RootStackParamList } from "../../utils/navigation";
 import { neutral00, secondaryColor } from "../../utils/style/colors";
 import { TabBarIcon } from "../TabBarIcon";
 
-import { useOnboardedStatus } from "@/hooks/useOnboardStatus";
-import { FeedPostViewScreen } from "@/screens/FeedPostView/FeedPostViewScreen";
-import { NFTDetailScreen } from "@/screens/Marketplace/NFTDetailScreen";
 import AboutScreen from "@/screens/Mini/About/AboutScreen";
 import AddAddressBookScreen from "@/screens/Mini/AddressBook/AddAddressBookScreen";
 import AddressBookScreen from "@/screens/Mini/AddressBook/AddressBookScreen";
@@ -49,12 +46,8 @@ import SelectTokenScreen from "@/screens/Mini/Wallet/SelectTokenScreen";
 import SendToriScreen from "@/screens/Mini/Wallet/SendToriScreen";
 import SendingToriScreen from "@/screens/Mini/Wallet/SendingToriScreen";
 import TransactionDetailScreen from "@/screens/Mini/Wallet/TransactionDetailScreen";
-import { CreatePassword } from "@/screens/Wallet/Screens/CreatePassword";
 import { CreatePasswordWallet } from "@/screens/Wallet/Screens/CreatePasswordWallet";
 import { CreateWalletScreen } from "@/screens/Wallet/Screens/CreateWalletScreen";
-import { ImportWallet } from "@/screens/Wallet/Screens/ImportWallet";
-import NativeWallet from "@/screens/Wallet/Screens/NativeWallet";
-import { SuccessScreen } from "@/screens/Wallet/Screens/SucessScreen";
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 const Tab = createBottomTabNavigator<RootStackParamList>();
@@ -94,15 +87,9 @@ const MainTab = () => {
   );
 };
 
-export const MiniModeNavigator = () => {
-  const [isLoading, isOnboarded] = useOnboardedStatus();
-
-  if (isLoading) return null;
-
+export const getMiniModeScreens = () => {
   return (
-    <Stack.Navigator
-      initialRouteName={!isOnboarded ? "ModeSelection" : "NativeWallet"}
-    >
+    <>
       <Stack.Screen
         name="ModeSelection"
         component={ModeSelectionScreen}
@@ -116,24 +103,13 @@ export const MiniModeNavigator = () => {
           title: "",
         }}
       />
-      <Stack.Screen
-        name="NativeWallet"
-        component={NativeWallet}
-        options={{ header: () => null, title: "Wallet Create" }}
-      />
+
       <Stack.Screen
         name="MiniTabs"
         options={{ header: () => null }}
         component={MainTab}
       />
-      <Stack.Screen
-        name="ImportWallet"
-        component={ImportWallet}
-        options={{
-          header: () => null,
-          title: "Import Wallet with Seed",
-        }}
-      />
+
       <Stack.Screen
         name="CreateWallet"
         component={CreateWalletScreen}
@@ -150,14 +126,7 @@ export const MiniModeNavigator = () => {
           title: "Create Password",
         }}
       />
-      <Stack.Screen
-        name="CreatePassword"
-        component={CreatePassword}
-        options={{
-          header: () => null,
-          title: "Create Password",
-        }}
-      />
+
       <Stack.Screen
         name="Conversation"
         component={ConversationScreeen}
@@ -166,14 +135,7 @@ export const MiniModeNavigator = () => {
           title: "Chat",
         }}
       />
-      <Stack.Screen
-        name="SuccessScreen"
-        component={SuccessScreen}
-        options={{
-          header: () => null,
-          title: "All Set",
-        }}
-      />
+
       <Stack.Screen
         name="MiniProfile"
         component={ProfileScreen}
@@ -436,16 +398,6 @@ export const MiniModeNavigator = () => {
           title: "",
         }}
       />
-      <Stack.Screen
-        name="FeedPostView"
-        component={FeedPostViewScreen}
-        options={{ header: () => null, title: "Feed", animation: "fade" }}
-      />
-      <Stack.Screen
-        name="NFTDetail"
-        component={NFTDetailScreen}
-        options={{ header: () => null, title: "NFT" }}
-      />
-    </Stack.Navigator>
+    </>
   );
 };
diff --git a/...onents/navigation/NormalModeNavigator.tsx → ...nents/navigation/getNormalModeScreens.tsx b/...onents/navigation/NormalModeNavigator.tsx → ...nents/navigation/getNormalModeScreens.tsx
@@ -1,9 +1,7 @@
 import React from "react";
-import { Platform } from "react-native";
 
-import { Sidebar } from "./Sidebar";
 import { platformScreens } from "./platformSpecific";
-import { Nav, navigatorScreenOptions, screenTitle } from "./util";
+import { getNav, screenTitle } from "./util";
 
 import { AdministrationDashboardScreen } from "@/screens/AdministrationDashboard/AdministrationDashboardScreen";
 import { AllProjectAdministrationDashScreen } from "@/screens/AllProjectAdministrationDash/AllProjectAdministrationDashScreen";
@@ -60,19 +58,19 @@ import NativeWallet from "@/screens/Wallet/Screens/NativeWallet";
 import { SuccessScreen } from "@/screens/Wallet/Screens/SucessScreen";
 import { WalletManagerScreen } from "@/screens/WalletManager/WalletManagerScreen";
 import { WalletManagerWalletsScreen } from "@/screens/WalletManager/WalletsScreen";
+import { AppMode } from "@/utils/types/app-mode";
+
+export const getNormalModeScreens = ({ appMode }: { appMode: AppMode }) => {
+  const { Nav } = getNav(appMode);
 
-export const NormalModeNavigator: React.FC = () => {
   return (
-    <Nav.Navigator
-      initialRouteName="Home"
-      drawerContent={() => (Platform.OS === "web" ? null : <Sidebar />)}
-      screenOptions={navigatorScreenOptions as any} // FIXME: upgrade to expo-router
-    >
+    <>
       <Nav.Screen
         name="Home"
         component={HomeScreen}
         options={{ header: () => null, title: screenTitle("Home") }}
       />
+
       <Nav.Screen
         name="MyCollection"
         component={MyCollectionScreen}
@@ -448,6 +446,6 @@ export const NormalModeNavigator: React.FC = () => {
         }}
       />
       {platformScreens}
-    </Nav.Navigator>
+    </>
   );
 };
diff --git a/packages/components/navigation/platformSpecific.web.tsx b/packages/components/navigation/platformSpecific.web.tsx
@@ -1,9 +1,11 @@
 // axelar libs imported by the bridge screen are breaking the ios CI
 
-import { Nav, screenTitle } from "./util";
+import { getNav, screenTitle } from "./util";
 
 import { RiotGameBridgeScreen } from "@/screens/RiotGame/RiotGameBridgeScreen";
 
+const { Nav } = getNav("normal");
+
 export const platformScreens: JSX.Element = (
   <>
     <Nav.Screen

diff --git a/packages/components/navigation/util.tsx b/packages/components/navigation/util.tsx
@@ -5,9 +5,10 @@ import { Platform } from "react-native";
 import { RootStackParamList } from "@/utils/navigation";
 import { neutral00 } from "@/utils/style/colors";
 import { fullSidebarWidth } from "@/utils/style/layout";
+import { AppMode } from "@/utils/types/app-mode";
 
-const getNav = () => {
-  if (Platform.OS === "web") {
+export const getNav = (appMode: AppMode) => {
+  if (Platform.OS === "web" || appMode === "mini") {
     return {
       Nav: createNativeStackNavigator<RootStackParamList>(),
       navigatorScreenOptions: {},
@@ -26,5 +27,3 @@ const getNav = () => {
 };
 
 export const screenTitle = (title: string) => "Teritori - " + title;
-
-export const { Nav, navigatorScreenOptions } = getNav();