feat: per-app browser tabs prefix (#1442)

Signed-off-by: Norman Meier <[email protected]>

apps/gnotribe/App.tsx

@@ -9,6 +9,7 @@ const config: AppConfig = {
   forceDAppsList: ["feed", "organizations"],
   defaultNetworkId: "gno-test5",
   homeScreen: "Feed",
+  browserTabsPrefix: "Gnotribe - ",
   logo,
 };
 

apps/teritori/App.tsx

@@ -4,6 +4,7 @@ import AppRoot from "@/dapp-root/App";
 const config: AppConfig = {
   defaultNetworkId: "teritori",
   homeScreen: "Home",
+  browserTabsPrefix: "Teritori - ",
 };
 
 export const App: React.FC = () => {

packages/components/navigation/Navigator.tsx

@@ -13,7 +13,7 @@ import { AppMode } from "@/utils/types/app-mode";
 export const Navigator: React.FC = () => {
   const [appMode] = useAppMode();
   const [isLoading] = useOnboardedStatus();
-  const { homeScreen } = useAppConfig();
+  const { homeScreen, browserTabsPrefix } = useAppConfig();
 
   const { Nav, navigatorScreenOptions } = getNav(appMode as AppMode);
 
@@ -29,7 +29,7 @@ export const Navigator: React.FC = () => {
       }
       screenOptions={navigatorScreenOptions as any} // FIXME: upgrade to expo-router
     >
-      {getNormalModeScreens({ appMode: appMode as AppMode })}
+      {getNormalModeScreens({ appMode, browserTabsPrefix })}
       {appMode === "mini" ? getMiniModeScreens() : null}
     </Nav.Navigator>
   );

packages/components/navigation/getNormalModeScreens.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { platformScreens } from "./platformSpecific";
-import { getNav, screenTitle } from "./util";
+import { getPlatformScreens } from "./platformSpecific";
+import { getNav } from "./util";
 
 import { BurnCapitalScreen } from "@/screens/BurnCapital/BurnCapitalScreen";
 import { ComingSoonScreen } from "@/screens/ComingSoon/ComingSoon";
@@ -70,9 +70,17 @@ 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 }) => {
+export const getNormalModeScreens = ({
+  appMode,
+  browserTabsPrefix,
+}: {
+  appMode: AppMode;
+  browserTabsPrefix: string;
+}) => {
   const { Nav } = getNav(appMode);
 
+  const screenTitle = (title: string) => browserTabsPrefix + title;
+
   return (
     <>
       <Nav.Screen
@@ -542,7 +550,7 @@ export const getNormalModeScreens = ({ appMode }: { appMode: AppMode }) => {
         component={RakkiScreen}
         options={{ header: () => null, title: screenTitle("Rakki") }}
       />
-      {platformScreens}
+      {getPlatformScreens(screenTitle)}
     </>
   );
 };

packages/components/navigation/platformSpecific.tsx

@@ -1 +1,6 @@
-export const platformScreens: JSX.Element = <></>;
+import React from "react";
+
+// this can't be a FC because using an intermediary component makes the Navigator crash
+export const getPlatformScreens: (
+  screenTitle: (title: string) => string,
+) => JSX.Element = () => <></>;

packages/components/navigation/platformSpecific.web.tsx

@@ -1,12 +1,15 @@
 // axelar libs imported by the bridge screen are breaking the ios CI
 
-import { getNav, screenTitle } from "./util";
+import { getNav } from "./util";
 
 import { RiotGameBridgeScreen } from "@/screens/RiotGame/RiotGameBridgeScreen";
 
 const { Nav } = getNav("normal");
 
-export const platformScreens: JSX.Element = (
+// this can't be a FC because using an intermediary component makes the Navigator crash
+export const getPlatformScreens: (
+  screenTitle: (title: string) => string,
+) => JSX.Element = (screenTitle) => (
   <>
     <Nav.Screen
       name="RiotGameBridge"

packages/components/navigation/util.tsx

@@ -25,5 +25,3 @@ export const getNav = (appMode: AppMode) => {
     };
   }
 };
-
-export const screenTitle = (title: string) => "Teritori - " + title;

packages/context/AppConfigProvider.tsx

@@ -10,9 +10,11 @@ export interface AppConfig {
   forceDAppsList?: string[];
   defaultNetworkId: string;
   homeScreen: keyof RootStackParamList;
+  browserTabsPrefix: string;
   logo?: React.FC<SvgProps>;
 }
 const defaultValue: AppConfig = {
+  browserTabsPrefix: "Teritori - ",
   defaultNetworkId: "teritori",
   homeScreen: "Home",
 };

packages/screens/Governance/GovernanceProposal/GovernanceProposalScreen.tsx

@@ -9,6 +9,7 @@ import { GovernanceVoteHeader } from "./GovernanceVoteHeader/GovernanceVoteHeade
 import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { SpacerColumn } from "@/components/spacer";
+import { useAppConfig } from "@/context/AppConfigProvider";
 import { useGetProposal } from "@/hooks/governance/useGetProposal";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import { NetworkKind } from "@/networks";
@@ -23,14 +24,15 @@ export const GovernanceProposalScreen: ScreenFC<"GovernanceProposal"> = ({
 }) => {
   const selectedNetworkId = useSelectedNetworkId();
   const navigation = useAppNavigation();
+  const { browserTabsPrefix } = useAppConfig();
   const proposal = useGetProposal(selectedNetworkId, id);
   const headerTitle =
     "#" + proposal?.proposal_id + " " + proposal?.content.title;
   useEffect(() => {
     navigation.setOptions({
-      title: `Teritori - Governance: ${headerTitle || ""}`,
+      title: `${browserTabsPrefix}Governance: ${headerTitle || ""}`,
     });
-  }, [navigation, id, headerTitle]);
+  }, [navigation, id, headerTitle, browserTabsPrefix]);
 
   return (
     <ScreenContainer

packages/screens/Marketplace/NFTDetailScreen.tsx

@@ -9,6 +9,7 @@ import { ScreenContainer } from "@/components/ScreenContainer";
 import { NFTMainInfo } from "@/components/nftDetails/NFTMainInfo";
 import { SpacerColumn } from "@/components/spacer";
 import { Tabs } from "@/components/tabs/Tabs";
+import { useAppConfig } from "@/context/AppConfigProvider";
 import { initialToast, useFeedbacks } from "@/context/FeedbacksProvider";
 import { Wallet } from "@/context/WalletsProvider";
 import { NftMarketplaceClient } from "@/contracts-clients/nft-marketplace/NftMarketplace.client";
@@ -265,12 +266,13 @@ export const NFTDetailScreen: ScreenFC<"NFTDetail"> = ({
   const [network] = parseNftId(id);
   const { info } = useNFTInfo(id);
   const navigation = useAppNavigation();
+  const { browserTabsPrefix } = useAppConfig();
 
   useEffect(() => {
     navigation.setOptions({
-      title: `Teritori - NFT: ${info?.name}`,
+      title: `${browserTabsPrefix}NFT: ${info?.name}`,
     });
-  }, [info?.name, navigation]);
+  }, [info?.name, navigation, browserTabsPrefix]);
 
   return (
     <ScreenContainer

packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx

@@ -20,6 +20,7 @@ import {
   ScreenContainer,
   ScreenContainerProps,
 } from "@/components/ScreenContainer";
+import { useAppConfig } from "@/context/AppConfigProvider";
 import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection";
 import { useNSUserInfo } from "@/hooks/useNSUserInfo";
 import { NetworkKind, parseUserId } from "@/networks";
@@ -41,6 +42,8 @@ export const UserPublicProfileScreen: ScreenFC<"UserPublicProfile"> = ({
   const [network, userAddress] = parseUserId(id);
   useForceNetworkSelection(network?.id);
   const { metadata, notFound } = useNSUserInfo(id);
+  const { browserTabsPrefix } = useAppConfig();
+
   const screenContainerOtherProps: Partial<ScreenContainerProps> =
     useMemo(() => {
       return {
@@ -62,9 +65,9 @@ export const UserPublicProfileScreen: ScreenFC<"UserPublicProfile"> = ({
 
   useEffect(() => {
     navigation.setOptions({
-      title: `Teritori - User: ${metadata.tokenId || userAddress}`,
+      title: `${browserTabsPrefix}User: ${metadata.tokenId || userAddress}`,
     });
-  }, [navigation, userAddress, metadata.tokenId]);
+  }, [navigation, userAddress, metadata.tokenId, browserTabsPrefix]);
 
   if (
     (tabKey && !uppTabItems[tabKey]) ||