feat: move durability warning out of main App view

anoma · Sep 4, 2024 · 391529c · 391529c
1 parent b5d5b5a
commit 391529c
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 37 deletions.
diff --git a/apps/extension/src/App/App.tsx b/apps/extension/src/App/App.tsx
@@ -1,14 +1,37 @@
 import { Container } from "@namada/components";
 import { useVaultContext } from "context/VaultContext";
+import { useRequester } from "hooks/useRequester";
+import { CheckDurabilityMsg } from "provider";
+import { useEffect, useState } from "react";
 import { matchPath, useLocation } from "react-router-dom";
+import { Ports } from "router";
 import { AppContent } from "./AppContent";
 import { AppHeader } from "./Common/AppHeader";
 import { Login } from "./Login";
 import routes from "./routes";
 
+const STORE_DURABILITY_INFO =
+  'Store is not durable. This might cause problems when persisting data on disk.\
+ To fix this issue, please navigate to "about:config" and set "dom.indexedDB.experimental" to true.';
+
 export const App: React.FC = () => {
   const location = useLocation();
 
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const requester = useRequester();
+
+  useEffect(() => {
+    void (async () => {
+      const isDurable = await requester.sendMessage(
+        Ports.Background,
+        new CheckDurabilityMsg()
+      );
+      if (!isDurable) {
+        setWarnings([...warnings, STORE_DURABILITY_INFO]);
+      }
+    })();
+  }, []);
+
   const { lockStatus, unlock, passwordInitialized } = useVaultContext();
 
   const displayReturnButton = (): boolean => {
@@ -39,12 +62,13 @@ export const App: React.FC = () => {
             !displayReturnButton()
           }
           returnButton={displayReturnButton()}
+          warnings={warnings}
         />
       }
     >
       {shouldLock ?
         <Login onLogin={unlock} />
-      : <AppContent />}
+      : <AppContent warnings={warnings} />}
     </Container>
   );
 };
diff --git a/apps/extension/src/App/AppContent.tsx b/apps/extension/src/App/AppContent.tsx
@@ -1,13 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
-import { Alert, Stack } from "@namada/components";
+import { Stack } from "@namada/components";
 import { DerivedAccount } from "@namada/types";
 import { useAccountContext, useVaultContext } from "context";
 import { useQuery } from "hooks";
-import { useRequester } from "hooks/useRequester";
-import { CheckDurabilityMsg } from "provider/messages";
-import { Ports } from "router";
 import { openSetupTab } from "utils";
 import {
   DeleteAccount,
@@ -17,24 +14,21 @@ import {
 } from "./Accounts";
 import { ParentAccounts } from "./Accounts/ParentAccounts";
 import { ChangePassword, ConnectedSites, Network } from "./Settings";
+import { Warnings } from "./Settings/Warnings";
 import { Setup } from "./Setup";
 import routes from "./routes";
 import { LoadingStatus } from "./types";
 
-const STORE_DURABILITY_INFO =
-  'Store is not durable. This might cause problems when persisting data on disk.\
- To fix this issue, please navigate to "about:config" and set "dom.indexedDB.experimental" to true.';
-
-export const AppContent = (): JSX.Element => {
+type Props = {
+  warnings?: string[];
+};
+export const AppContent = ({ warnings }: Props): JSX.Element => {
   const { accounts, status: accountLoadingStatus } = useAccountContext();
   const { passwordInitialized } = useVaultContext();
 
   const query = useQuery();
   const redirect = query.get("redirect");
   const navigate = useNavigate();
-  const requester = useRequester();
-
-  const [isDurable, setIsDurable] = useState<boolean | undefined>();
 
   const getStartPage = (accounts: DerivedAccount[]): string => {
     return accounts.length === 0 ? routes.setup() : routes.viewAccountList();
@@ -61,22 +55,8 @@ export const AppContent = (): JSX.Element => {
     }
   }, [accounts, passwordInitialized, accountLoadingStatus]);
 
-  useEffect(() => {
-    void (async () => {
-      const isDurable = await requester.sendMessage(
-        Ports.Background,
-        new CheckDurabilityMsg()
-      );
-      setIsDurable(isDurable);
-    })();
-  }, []);
-
   return (
     <Stack className="py-5" full gap={6}>
-      {isDurable === false && (
-        <Alert type="warning">{STORE_DURABILITY_INFO}</Alert>
-      )}
-
       <Routes>
         <Route path={"/"} element={<></>} />
         <Route path={routes.setup()} element={<Setup />} />
@@ -90,6 +70,10 @@ export const AppContent = (): JSX.Element => {
           }
         />
         <Route path={routes.network()} element={<Network />} />
+        <Route
+          path={routes.warnings()}
+          element={<Warnings warnings={warnings} />}
+        />
         {/* Routes that depend on a parent account existing in storage */}
         {accounts.length > 0 && (
           <>

diff --git a/apps/extension/src/App/Common/AppHeader.tsx b/apps/extension/src/App/Common/AppHeader.tsx
@@ -9,12 +9,14 @@ type AppHeaderProps = {
   returnButton: boolean;
   settingsButton: boolean;
   lockButton: boolean;
+  warnings?: string[];
 };
 
 export const AppHeader = ({
   returnButton,
   settingsButton,
   lockButton,
+  warnings,
 }: AppHeaderProps): JSX.Element => {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
@@ -50,7 +52,11 @@ export const AppHeader = ({
           <GoGear />
         </i>
       )}
-      <AppHeaderNavigation onClose={() => setOpen(false)} open={open} />
+      <AppHeaderNavigation
+        onClose={() => setOpen(false)}
+        open={open}
+        warnings={warnings}
+      />
     </>
   );
 };
diff --git a/apps/extension/src/App/Common/AppHeaderNavigation.tsx b/apps/extension/src/App/Common/AppHeaderNavigation.tsx
@@ -3,17 +3,19 @@ import routes from "App/routes";
 import clsx from "clsx";
 import { useVaultContext } from "context";
 import { FaDiscord, FaXTwitter } from "react-icons/fa6";
-import { GoQuestion } from "react-icons/go";
+import { GoAlert, GoQuestion } from "react-icons/go";
 import { useNavigate } from "react-router-dom";
 
 type AppHeaderNavigationProps = {
   open: boolean;
   onClose: () => void;
+  warnings?: string[];
 };
 
 export const AppHeaderNavigation = ({
   open,
   onClose,
+  warnings,
 }: AppHeaderNavigationProps): JSX.Element => {
   const { lock } = useVaultContext();
   const navigate = useNavigate();
@@ -47,6 +49,20 @@ export const AppHeaderNavigation = ({
           { "!translate-x-0": open }
         )}
       >
+        {warnings && warnings.length > 0 && (
+          <i
+            className={clsx(
+              "text-[1.85em] cursor-pointer leading-[0] absolute left-0 px-6 py-5 not-italic",
+              "top-0 transition-colors duration-100 ease-out select-none hover:text-black active:top-px"
+            )}
+            role="button"
+            aria-label="Warnings menu"
+            onClick={() => goTo(routes.warnings)}
+          >
+            <GoAlert />
+          </i>
+        )}
+
         <i
           className={clsx(
             "text-[1.85em] cursor-pointer leading-[0] absolute right-0 px-5 py-8 not-italic",
@@ -106,14 +122,21 @@ export const AppHeaderNavigation = ({
                 <FaXTwitter />
               </a>
             </Stack>
-            <a
-              href="https://discord.com/channels/833618405537218590/1074984397599678534"
-              target="_blank"
-              className="transition-colors hover:text-cyan"
-              rel="noreferrer nofollow"
+            <Stack
+              as="ul"
+              gap={4}
+              direction="horizontal"
+              className="items-center"
             >
-              <GoQuestion />
-            </a>
+              <a
+                href="https://discord.com/channels/833618405537218590/1074984397599678534"
+                target="_blank"
+                className="transition-colors hover:text-cyan"
+                rel="noreferrer nofollow"
+              >
+                <GoQuestion />
+              </a>
+            </Stack>
           </footer>
         </div>
       </nav>

diff --git a/apps/extension/src/App/Settings/Warnings.tsx b/apps/extension/src/App/Settings/Warnings.tsx
@@ -0,0 +1,23 @@
+import { Alert, GapPatterns, Stack } from "@namada/components";
+import { PageHeader } from "App/Common";
+import clsx from "clsx";
+
+type Props = {
+  warnings?: string[];
+};
+
+export const Warnings = ({ warnings }: Props): JSX.Element => {
+  return (
+    <Stack gap={GapPatterns.TitleContent} full>
+      <PageHeader title="Warnings" />
+      <Stack className="justify-top" full gap={GapPatterns.FormFields}>
+        {warnings &&
+          warnings.map((warning, i) => (
+            <Alert key={i} type="warning" className={clsx("max-w-84")}>
+              {warning}
+            </Alert>
+          ))}
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/apps/extension/src/App/routes.ts b/apps/extension/src/App/routes.ts
@@ -6,6 +6,7 @@ export default {
   changePassword: (): string => `/change-password`,
   connectedSites: (): string => `/connected-sites`,
   network: (): string => `/network`,
+  warnings: (): string => `/warnings`,
   viewAccountList: () => `/accounts/view`,
   viewAccountMnemonic: (accountId: string = ":accountId") =>
     `/accounts/mnemonic/${accountId}`,