feat: Add navigation go back button to every page.

TERITORI · Sep 25, 2023 · 69385d1 · 69385d1
1 parent a8e9eb1
commit 69385d1
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 21 deletions.
diff --git a/packages/components/ScreenContainer/index.tsx b/packages/components/ScreenContainer/index.tsx
@@ -16,6 +16,7 @@ import { useIsMobile } from "../../hooks/useIsMobile";
 import { useMaxResolution } from "../../hooks/useMaxResolution";
 import { NetworkFeature, NetworkInfo, NetworkKind } from "../../networks";
 import { DAppStoreData } from "../../screens/DAppStore/components/DAppStoreData";
+import { useAppNavigation } from "../../utils/navigation";
 import { neutral33 } from "../../utils/style/colors";
 import {
   getResponsiveScreenContainerMarginHorizontal,
@@ -64,6 +65,16 @@ export const ScreenContainer: React.FC<{
   forceNetworkFeatures,
 }) => {
   const { height } = useWindowDimensions();
+  const navigation = useAppNavigation();
+
+  if (!onBackPress) {
+    onBackPress = navigation.canGoBack()
+      ? () => {
+          navigation.goBack();
+        }
+      : undefined;
+  }
+
   const hasMargin = !noMargin;
   const hasScroll = !noScroll;
   const { width: screenWidth } = useMaxResolution({
@@ -124,7 +135,9 @@ export const ScreenContainer: React.FC<{
 
         <View style={{ width: "100%", flex: 1 }}>
           {/*==== Header*/}
-          <Header onBackPress={onBackPress}>{headerChildren}</Header>
+          {headerChildren && (
+            <Header onBackPress={onBackPress}>{headerChildren}</Header>
+          )}
 
           <View
             style={{ width: "100%", flexDirection: "row", flex: 1, height }}

diff --git a/packages/screens/Launchpad/LaunchpadApplyScreen.tsx b/packages/screens/Launchpad/LaunchpadApplyScreen.tsx
@@ -9,7 +9,7 @@ import {
 import { BrandText } from "../../components/BrandText";
 import { ScreenContainer } from "../../components/ScreenContainer";
 import { SpacerColumn, SpacerRow } from "../../components/spacer";
-import { ScreenFC, useAppNavigation } from "../../utils/navigation";
+import { ScreenFC } from "../../utils/navigation";
 import { neutral77 } from "../../utils/style/colors";
 import {
   fontSemibold14,
@@ -37,12 +37,10 @@ const BUTTONS: LaunchpadButtonProps[] = [
 ];
 
 export const LaunchpadApplyScreen: ScreenFC<"LaunchpadApply"> = () => {
-  const navigation = useAppNavigation();
   return (
     <ScreenContainer
       headerChildren={<BrandText style={fontSemibold20}>Launchpad</BrandText>}
       responsive
-      onBackPress={() => navigation.navigate("Launchpad")}
     >
       <LaunchpadBanner />
       <SpacerColumn size={2} />

diff --git a/packages/screens/Launchpad/LaunchpadScreen.tsx b/packages/screens/Launchpad/LaunchpadScreen.tsx
@@ -13,19 +13,17 @@ import { CollectionsCarouselHeader } from "../../components/carousels/Collection
 import { CollectionGallery } from "../../components/collections/CollectionGallery";
 import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
 import { getNetwork } from "../../networks";
-import { ScreenFC, useAppNavigation } from "../../utils/navigation";
+import { ScreenFC } from "../../utils/navigation";
 import { fontSemibold20 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 
 export const LaunchpadScreen: ScreenFC<"Launchpad"> = () => {
   const selectedNetworkId = useSelectedNetworkId();
-  const navigation = useAppNavigation();
 
   return (
     <ScreenContainer
       headerChildren={<BrandText style={fontSemibold20}>Launchpad</BrandText>}
       responsive
-      onBackPress={() => navigation.navigate("Launchpad")}
     >
       <View
         style={{

diff --git a/packages/screens/Marketplace/CollectionScreen.tsx b/packages/screens/Marketplace/CollectionScreen.tsx
@@ -17,7 +17,7 @@ import {
   setShowFilters,
 } from "../../store/slices/marketplaceFilters";
 import { useAppDispatch } from "../../store/store";
-import { ScreenFC, useAppNavigation } from "../../utils/navigation";
+import { ScreenFC } from "../../utils/navigation";
 import { neutral00, neutral33 } from "../../utils/style/colors";
 import { fontSemibold20 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
@@ -30,7 +30,7 @@ export const CollectionScreen: ScreenFC<"Collection"> = ({ route }) => {
     SortDirection.SORT_DIRECTION_ASCENDING
   );
   const [network] = parseCollectionId(id);
-  const navigation = useAppNavigation();
+
   const { width } = useMaxResolution({
     responsive: true,
     noMargin: false,
@@ -59,7 +59,6 @@ export const CollectionScreen: ScreenFC<"Collection"> = ({ route }) => {
         </BrandText>
       }
       responsive
-      onBackPress={() => navigation.navigate("Marketplace")}
       forceNetworkId={network?.id}
     >
       <View

diff --git a/packages/screens/Marketplace/MarketplaceScreen.tsx b/packages/screens/Marketplace/MarketplaceScreen.tsx
@@ -25,7 +25,7 @@ import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
 import { NetworkFeature, selectableNetworks } from "../../networks";
 import { selectAreTestnetsEnabled } from "../../store/slices/settings";
 import { prettyPrice } from "../../utils/coins";
-import { ScreenFC, useAppNavigation } from "../../utils/navigation";
+import { ScreenFC } from "../../utils/navigation";
 import {
   errorColor,
   mineShaftColor,
@@ -81,7 +81,6 @@ const TABLE_ROWS = {
 };
 
 export const MarketplaceScreen: ScreenFC<"Marketplace"> = () => {
-  const navigation = useAppNavigation();
   const selectedNetworkId = useSelectedNetworkId();
   const areTestnetsEnabled = useSelector(selectAreTestnetsEnabled);
 
@@ -146,7 +145,6 @@ export const MarketplaceScreen: ScreenFC<"Marketplace"> = () => {
         <BrandText style={fontSemibold20}>NFT Marketplace</BrandText>
       }
       responsive
-      onBackPress={() => navigation.navigate("Marketplace")}
     >
       <View
         style={{

diff --git a/packages/screens/RiotGame/component/RiotGameHeader.tsx b/packages/screens/RiotGame/component/RiotGameHeader.tsx
@@ -17,6 +17,7 @@ import { NetworkSelector } from "../../../components/NetworkSelector/NetworkSele
 import { SVG } from "../../../components/SVG";
 import { Separator } from "../../../components/Separator";
 import { ConnectWalletButton } from "../../../components/TopMenu/ConnectWalletButton";
+import { BackButton } from "../../../components/navigation/components/BackButton";
 import { TopLogo } from "../../../components/navigation/components/TopLogo";
 import { SpacerRow } from "../../../components/spacer";
 import { useForceNetworkKind } from "../../../hooks/useForceNetworkKind";
@@ -112,8 +113,9 @@ export const RiotGameHeader: React.FC<RiotGameHeaderProps> = ({
   return (
     <View style={styles.outerContainer}>
       <View style={styles.innerContainer}>
-        <View>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
           <TopLogo />
+          <BackButton onPress={() => navigation.navigate("Home")} />
         </View>
 
         <ScrollView

diff --git a/packages/screens/TeritoriNameService/TNSHomeScreen.tsx b/packages/screens/TeritoriNameService/TNSHomeScreen.tsx
@@ -146,7 +146,6 @@ export const TNSHomeScreen: ScreenFC<"TNSHome"> = ({ route }) => {
         <BrandText style={fontSemibold20}>Name Service</BrandText>
       }
       responsive
-      onBackPress={() => navigation.navigate("TNSHome")}
       forceNetworkKind={NetworkKind.Cosmos}
     >
       <View

diff --git a/packages/screens/WalletManager/WalletManagerScreen.tsx b/packages/screens/WalletManager/WalletManagerScreen.tsx
@@ -11,7 +11,7 @@ import { MainConnectWalletButton } from "../../components/connectWallet/MainConn
 import { useAreThereWallets } from "../../hooks/useAreThereWallets";
 import { useMaxResolution } from "../../hooks/useMaxResolution";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
-import { ScreenFC, useAppNavigation } from "../../utils/navigation";
+import { ScreenFC } from "../../utils/navigation";
 import { neutral33 } from "../../utils/style/colors";
 import { fontSemibold20 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
@@ -20,15 +20,13 @@ export const WalletManagerScreen: ScreenFC<"WalletManager"> = () => {
   const selectedWallet = useSelectedWallet();
   const areThereWallets = useAreThereWallets();
   const { height } = useMaxResolution();
-  const navigation = useAppNavigation();
 
   return (
     <ScreenContainer
       headerChildren={
         <BrandText style={fontSemibold20}>Wallet Manager</BrandText>
       }
       responsive
-      onBackPress={() => navigation.navigate("WalletManager")}
     >
       {areThereWallets ? (
         <View

diff --git a/packages/screens/WalletManager/WalletsScreen.tsx b/packages/screens/WalletManager/WalletsScreen.tsx
@@ -13,7 +13,7 @@ import { PrimaryButton } from "../../components/buttons/PrimaryButton";
 import { ConnectWalletModal } from "../../components/connectWallet/ConnectWalletModal";
 import { useRewards } from "../../hooks/useRewards";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
-import { ScreenFC, useAppNavigation } from "../../utils/navigation";
+import { ScreenFC } from "../../utils/navigation";
 import { walletProviderToNetworkKind } from "../../utils/network";
 import { neutral33, neutralA3, secondaryColor } from "../../utils/style/colors";
 import { fontSemibold20 } from "../../utils/style/fonts";
@@ -107,7 +107,6 @@ export const WalletManagerWalletsScreen: ScreenFC<
 > = () => {
   const [showConnectModal, setShowConnectModal] = useState(false);
   const selectedWallet = useSelectedWallet();
-  const navigation = useAppNavigation();
 
   // TODO: Handle multiple wallets addresses
   const { totalsRewards, claimReward } = useRewards(selectedWallet?.userId);
@@ -141,7 +140,6 @@ export const WalletManagerWalletsScreen: ScreenFC<
         <BrandText style={fontSemibold20}>Wallet Manager</BrandText>
       }
       responsive
-      onBackPress={() => navigation.navigate("WalletManager")}
     >
       <View
         style={{