Staking, Governance, Public Goods Funding - Refactoring menu (anoma#46)

* Add sub menu * Add possibility to use a separate theme that is depending on current navigation route * Set the theme to be set to light mode and hide color mode toggle on entering Staking TopLevelMenu * Add menu highlight to mobile menu * Move settings icon and color mode toggle to less prominent location * Refactor routing to be able to use Location in App.tsx * corrected a UI bug where alignment was incorrect in 2nd level menu * Fixed broken UI in initial account creation based on PR feedback * Fixed main container height based on PR feedback
phy-chain · Sep 1, 2022 · cb6e20a · cb6e20a
1 parent 269a3da
commit cb6e20a
Show file tree

Hide file tree

Showing 14 changed files with 543 additions and 214 deletions.
diff --git a/...src/App/AccountCreation/Steps/SeedPhraseConfirmation/SeedPhraseConfirmation.components.ts b/...src/App/AccountCreation/Steps/SeedPhraseConfirmation/SeedPhraseConfirmation.components.ts
@@ -30,16 +30,13 @@ export const AccountInformationViewUpperPartContainer = styled.div`
 export const AccountInformationForm = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: flex-start;
-  height: 100%;
   width: 100%;
 `;
 
 export const DescriptionAndInputContainer = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: flex-start;
   height: 100%;
   width: 100%;

diff --git a/apps/namada-interface/src/App/AccountCreation/Steps/Start/Start.components.ts b/apps/namada-interface/src/App/AccountCreation/Steps/Start/Start.components.ts
@@ -3,7 +3,6 @@ import styled from "styled-components/macro";
 export const StartViewContainer = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   height: 100%;
 `;

diff --git a/apps/namada-interface/src/App/AccountOverview/AccountOverview.components.ts b/apps/namada-interface/src/App/AccountOverview/AccountOverview.components.ts
@@ -21,7 +21,6 @@ const getColor = (
   }
 };
 export const AccountOverviewContainer = styled.div`
-  display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
@@ -67,6 +66,7 @@ export const AccountTab = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 52px;
   color: ${(props) => props.theme.colors.utility2.main80};
   background-color: ${(props) => props.theme.colors.utility1.main60};
   font-size: 14px;

diff --git a/apps/namada-interface/src/App/App.components.ts b/apps/namada-interface/src/App/App.components.ts
@@ -7,6 +7,8 @@ enum ComponentColor {
   BackgroundColor,
 }
 
+const topSectionHeight = "164px";
+
 const getColor = (
   color: ComponentColor,
   theme: DesignConfiguration
@@ -61,15 +63,15 @@ export const TopSection = styled.section`
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  height: 120px;
+  height: ${topSectionHeight};
   width: 100%;
 `;
 
 export const BottomSection = styled.section`
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  height: calc(100% - 120px);
+  height: calc(100% - ${topSectionHeight});
   width: 100%;
 `;
 

diff --git a/apps/namada-interface/src/App/App.tsx b/apps/namada-interface/src/App/App.tsx
@@ -1,18 +1,13 @@
 /* eslint-disable max-len */
 import { useState, useEffect } from "react";
-import {
-  unstable_HistoryRouter as HistoryRouter,
-  Routes,
-  Route,
-  Outlet,
-} from "react-router-dom";
+import { Routes, Route, Outlet, useLocation, Location } from "react-router-dom";
 import { createBrowserHistory } from "history";
 import { AnimatePresence } from "framer-motion";
 import { ThemeProvider } from "styled-components/macro";
 
 // internal
 import { getTheme } from "utils/theme";
-import { TopLevelRoute } from "./types";
+import { TopLevelRoute, locationToTopLevelRoute } from "./types";
 
 import { TopNavigation } from "./TopNavigation";
 import { AccountCreation } from "./AccountCreation";
@@ -51,13 +46,22 @@ export const AnimatedTransition = (props: {
   );
 };
 
+// based on location we decide whether to use placeholder theme
+const getShouldUsePlaceholderTheme = (location: Location): boolean => {
+  const topLevelRoute = locationToTopLevelRoute(location);
+  const isStaking = topLevelRoute === TopLevelRoute.Staking;
+  return isStaking;
+};
+
 function App(): JSX.Element {
   const [isLightMode, setIsLightMode] = useState(true);
-
+  const location = useLocation();
   const [password, setPassword] = useState<string>();
   const [store, setStore] = useState<AppStore>();
   const [persistor, setPersistor] = useState<Persistor>();
-  const theme = getTheme(isLightMode);
+
+  const ShouldUsePlaceholderTheme = getShouldUsePlaceholderTheme(location);
+  const theme = getTheme(isLightMode, ShouldUsePlaceholderTheme);
 
   useEffect(() => {
     if (store) {
@@ -67,21 +71,19 @@ function App(): JSX.Element {
 
   if (password && store && persistor) {
     return (
-      <HistoryRouter history={history}>
-        <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
+        <Provider store={store}>
           <GlobalStyles isLightMode={isLightMode} />
           <AppContainer data-testid="AppContainer">
             <TopSection>
-              <Provider store={store}>
-                <TopNavigation
-                  isLightMode={isLightMode}
-                  setIsLightMode={setIsLightMode}
-                  isLoggedIn={!!password}
-                  persistor={persistor}
-                  store={store}
-                  logout={() => setPassword(undefined)}
-                />
-              </Provider>
+              <TopNavigation
+                isLightMode={isLightMode}
+                setIsLightMode={setIsLightMode}
+                isLoggedIn={!!password}
+                persistor={persistor}
+                store={store}
+                logout={() => setPassword(undefined)}
+              />
             </TopSection>
             <BottomSection>
               <AnimatePresence exitBeforeEnter>
@@ -93,71 +95,68 @@ function App(): JSX.Element {
               </AnimatePresence>
             </BottomSection>
           </AppContainer>
-        </ThemeProvider>
-      </HistoryRouter>
+        </Provider>
+      </ThemeProvider>
     );
   }
 
   /**
    * Unlock Wallet & Create Master Seed flow:
    */
   return (
-    <HistoryRouter history={history}>
-      <ThemeProvider theme={theme}>
-        <GlobalStyles isLightMode={isLightMode} />
-        <AppContainer data-testid="AppContainer">
-          <TopSection>
-            <TopNavigation
-              isLightMode={isLightMode}
-              setIsLightMode={setIsLightMode}
-              logout={() => setPassword(undefined)}
-            />
-          </TopSection>
-          <BottomSection>
-            <AnimatePresence exitBeforeEnter>
-              <Routes>
+    <ThemeProvider theme={theme}>
+      <GlobalStyles isLightMode={isLightMode} />
+      <AppContainer data-testid="AppContainer">
+        <TopSection>
+          <TopNavigation
+            isLightMode={isLightMode}
+            setIsLightMode={setIsLightMode}
+            logout={() => setPassword(undefined)}
+          />
+        </TopSection>
+        <BottomSection>
+          <AnimatePresence exitBeforeEnter>
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <ContentContainer>
+                    <Outlet />
+                  </ContentContainer>
+                }
+              >
                 <Route
-                  path="/"
+                  path={""}
                   element={
-                    <ContentContainer>
-                      <Outlet />
-                    </ContentContainer>
+                    <Login
+                      setPassword={setPassword}
+                      // set store is dehydrating the whole
+                      // state once the user gives a password
+                      setStore={(password) => setStore(makeStore(password))}
+                    />
                   }
-                >
-                  <Route
-                    path={""}
-                    element={
-                      <Login
+                />
+                <Route
+                  path={`${TopLevelRoute.AccountCreation}/*`}
+                  element={
+                    <AnimatedTransition
+                      elementKey={TopLevelRoute.AccountCreation}
+                    >
+                      <AccountCreation
+                        store={store}
                         setPassword={setPassword}
                         setStore={(password) => setStore(makeStore(password))}
                       />
-                    }
-                  />
-                  <Route
-                    path={`${TopLevelRoute.AccountCreation}/*`}
-                    element={
-                      <AnimatedTransition
-                        elementKey={TopLevelRoute.AccountCreation}
-                      >
-                        <AccountCreation
-                          store={store}
-                          setPassword={setPassword}
-                          setStore={(password) => setStore(makeStore(password))}
-                        />
-                      </AnimatedTransition>
-                    }
-                  />
-                  <Route
-                    path={"*"}
-                    element={<Redirect password={password} />}
-                  />
-                </Route>
-              </Routes>
-            </AnimatePresence>
-          </BottomSection>
-        </AppContainer>
-      </ThemeProvider>
-    </HistoryRouter>
+                    </AnimatedTransition>
+                  }
+                />
+                <Route path={"*"} element={<Redirect password={password} />} />
+              </Route>
+            </Routes>
+          </AnimatePresence>
+        </BottomSection>
+      </AppContainer>
+    </ThemeProvider>
   );
 }
 

diff --git a/apps/namada-interface/src/App/AppRoutes.tsx b/apps/namada-interface/src/App/AppRoutes.tsx
@@ -127,11 +127,9 @@ const AppRoutes = ({ store, persistor, password }: Props): JSX.Element => {
                 }
               />
               <Route
-                path={TopLevelRoute.StakingAndGovernance}
+                path={`${TopLevelRoute.Staking}/*`}
                 element={
-                  <AnimatedTransition
-                    elementKey={TopLevelRoute.StakingAndGovernance}
-                  >
+                  <AnimatedTransition elementKey={TopLevelRoute.Staking}>
                     <StakingAndGovernance />
                   </AnimatedTransition>
                 }

diff --git a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx
@@ -1,13 +1,61 @@
+import { useEffect } from "react";
 import { NavigationContainer } from "components/NavigationContainer";
 import { Heading, HeadingLevel } from "components/Heading";
-import { StakingAndGovernanceContainer } from "./StakingAndGovernance.components";
+import { Routes, Route, useLocation, useNavigate } from "react-router-dom";
 
+import { StakingAndGovernanceContainer } from "./StakingAndGovernance.components";
+import {
+  TopLevelRoute,
+  StakingAndGovernanceSubRoute,
+  locationToStakingAndGovernanceSubRoute,
+} from "App/types";
 export const StakingAndGovernance = (): JSX.Element => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // we need one of the sub routes, staking alone has nothing
+  const stakingAndGovernanceSubRoute =
+    locationToStakingAndGovernanceSubRoute(location);
+  useEffect(() => {
+    if (!!!stakingAndGovernanceSubRoute) {
+      navigate(
+        `${TopLevelRoute.Staking}${StakingAndGovernanceSubRoute.Staking}`
+      );
+    }
+  });
+
   return (
     <StakingAndGovernanceContainer>
       <NavigationContainer>
         <Heading level={HeadingLevel.One}>Staking & Governance</Heading>
       </NavigationContainer>
+      <Routes>
+        <Route path="*" element={<div>*</div>} />
+        <Route
+          path={StakingAndGovernanceSubRoute.Staking}
+          element={
+            <div style={{ color: "white" }}>
+              StakingAndGovernanceSubRoute.Staking
+            </div>
+          }
+        />
+        <Route
+          path={StakingAndGovernanceSubRoute.Governance}
+          element={
+            <div style={{ color: "white" }}>
+              StakingAndGovernanceSubRoute.Governance
+            </div>
+          }
+        />
+        <Route
+          path={StakingAndGovernanceSubRoute.PublicGoodsFunding}
+          element={
+            <div style={{ color: "white" }}>
+              StakingAndGovernanceSubRoute.PublicGoodsFunding
+            </div>
+          }
+        />
+      </Routes>
       <a
         href="https://github.com/anoma/spec/blob/master/src/architecture/namada/web-wallet/user-interfaces.md#stakingandgovernance-1"
         target="_blank"