Merge pull request anoma#21 from heliaxdev/feat/17/settings_accounts_…

…and_navigation

# 17 settings/accounts screen and navigation

packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components/macro";
+
+export const AccountOverviewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;

packages/anoma-wallet/src/App/AccountOverview/AccountOverview.tsx

@@ -0,0 +1,20 @@
+import { NavigationContainer } from "components/NavigationContainer";
+import { Heading, HeadingLevel } from "components/Heading";
+import { AccountOverviewContainer } from "./AccountOverview.components";
+
+export const AccountOverview = (): JSX.Element => {
+  return (
+    <AccountOverviewContainer>
+      <NavigationContainer>
+        <Heading level={HeadingLevel.One}>AccountOverview</Heading>
+      </NavigationContainer>
+      <a
+        href="https://github.com/anoma/spec/blob/master/src/architecture/namada/web-wallet/user-interfaces.md#accountoverview-1"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        AccountOverview
+      </a>
+    </AccountOverviewContainer>
+  );
+};

packages/anoma-wallet/src/App/AccountOverview/index.ts

@@ -0,0 +1 @@
+export { AccountOverview } from "./AccountOverview";

packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts → packages/anoma-wallet/src/App/App.components.ts

@@ -1,63 +1,63 @@
 import styled from "styled-components/macro";
 import { motion } from "framer-motion";
 
-export const MainSectionContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: center;
-  // TODO: maybe this is too hacky? maybe there could be just another div
-  // behind the main one with transform: translate(-4px, 4px);
-  box-sizing: border-box;
-  background-color: ${(props) => props.theme.colors.background2};
-  padding: ${(props) =>
-    props.theme.themeConfigurations.isLightMode ? "0 32px" : "4px 36px 0 32px"};
-  height: 620px;
-  width: 480px;
-  border-radius: 24px;
-  overflow-x: hidden;
-  ${(props) =>
-    props.theme.themeConfigurations.isLightMode
-      ? `border: solid 4px ${props.theme.colors.border}`
-      : ""};
-  border-left: solid 8px ${(props) => props.theme.colors.border};
-  border-bottom: solid 8px ${(props) => props.theme.colors.border};
-  transition: background-color 0.3s linear;
-`;
-
 export const MotionContainer = styled(motion.div)`
+  display: flex;
   height: 100%;
+  width: 100%;
   box-sizing: border-box;
-  padding: 0 0 64px 0;
 `;
-export const TopSection = styled.section`
+
+export const AppContainer = styled.div`
   display: flex;
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
+  flex-direction: column;
+
+  height: 100%;
   width: 100%;
-  margin: 32px 0;
+  background-color: ${(props) => props.theme.colors.background1};
+  transition: all 0.3s linear;
 `;
 
-export const TopSectionHeaderContainer = styled.section`
+export const TopSection = styled.section`
   display: flex;
   justify-content: center;
-  width: 100%;
   align-items: center;
+  height: 120px;
+  width: 100%;
 `;
 
-export const TopSectionButtonContainer = styled.section`
+export const BottomSection = styled.section`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 48px;
-  min-height: 50px;
+  height: calc(100% - 120px);
+  width: 100%;
 `;
 
-export const RouteContainer = styled.div`
+export const ContentContainer = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  overflow: scroll;
-  width: 100%;
-  height: 100%;
+  // TODO: maybe this is too hacky? maybe there could be just another div
+  // behind the main one with transform: translate(-4px, 4px);
+  box-sizing: border-box;
+  background-color: ${(props) => props.theme.colors.background2};
+  padding: ${(props) =>
+    props.theme.themeConfigurations.isLightMode
+      ? "16px 32px 32px"
+      : "20px 36px 32px 32px"};
+  height: 620px;
+  width: 480px;
+  border-radius: 24px;
+  overflow-x: hidden;
+  ${(props) =>
+    props.theme.themeConfigurations.isLightMode
+      ? `border: solid 4px ${props.theme.colors.border}`
+      : ""};
+  border-left: solid 8px ${(props) => props.theme.colors.border};
+  border-bottom: solid 8px ${(props) => props.theme.colors.border};
+  transition: background-color 0.3s linear;
 `;

packages/anoma-wallet/src/App/App.tsx

@@ -1,14 +1,28 @@
 /* eslint-disable max-len */
 import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
+
+// internal
 import { TopNavigation } from "./TopNavigation";
-import { MainSection } from "./MainSection";
-import { AccountCreation } from "./AccountCreation";
+// import { AccountCreation } from "./AccountCreation";
+import { TopLevelRoute } from "./types";
+import {
+  Settings,
+  SettingsAccounts,
+  SettingsWalletSettings,
+  SettingsAccountSettings,
+  SettingsAccountCreation,
+} from "./Settings";
+import { StakingAndGovernance } from "./StakingAndGovernance";
+import { AccountOverview } from "./AccountOverview";
 import {
   AppContainer,
-  MainSectionContainer,
   TopSection,
-} from "./styledComponents";
+  BottomSection,
+  ContentContainer,
+  MotionContainer,
+} from "./App.components";
 import { ThemeProvider } from "styled-components/macro";
 import { darkColors, lightColors, Theme } from "utils/theme";
 
@@ -24,9 +38,32 @@ const getTheme = (isLightMode: boolean): Theme => {
   return theme;
 };
 
+const AnimatedTransition = (props: {
+  children: React.ReactNode;
+  elementKey: string;
+}): JSX.Element => {
+  const { children, elementKey } = props;
+  return (
+    <MotionContainer
+      key={elementKey}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {children}
+    </MotionContainer>
+  );
+};
+
 function App(): JSX.Element {
   const [isLightMode, setIsLightMode] = React.useState(true);
   const theme = getTheme(isLightMode);
+  const fakeAccounts = [
+    "fake1l7dgf0m623ayll8vdyf6n7gxm3tz7mt7x443m0",
+    "fakej3n4340m623ayll8vdyf6n7gxm3tz7mt74m5th0",
+    "fakelg45lt5m623ayll8vdyf6n7gxm3tz7mtrenrer0",
+  ];
   return (
     <BrowserRouter>
       <ThemeProvider theme={theme}>
@@ -37,12 +74,87 @@ function App(): JSX.Element {
               setIsLightMode={setIsLightMode}
             />
           </TopSection>
-          <MainSectionContainer>
-            <Routes>
-              <Route path="/" element={<MainSection />} />
-              <Route path="/account-creation/*" element={<AccountCreation />} />
-            </Routes>
-          </MainSectionContainer>
+          <BottomSection>
+            <AnimatePresence exitBeforeEnter>
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <ContentContainer>
+                      <Outlet />
+                    </ContentContainer>
+                  }
+                >
+                  <Route
+                    path={TopLevelRoute.Wallet}
+                    element={
+                      <AnimatedTransition elementKey={TopLevelRoute.Wallet}>
+                        <AccountOverview />
+                      </AnimatedTransition>
+                    }
+                  />
+                  <Route
+                    path={TopLevelRoute.StakingAndGovernance}
+                    element={
+                      <AnimatedTransition
+                        elementKey={TopLevelRoute.StakingAndGovernance}
+                      >
+                        <StakingAndGovernance />
+                      </AnimatedTransition>
+                    }
+                  />
+                  <Route
+                    path={TopLevelRoute.Settings}
+                    element={
+                      <AnimatedTransition elementKey={TopLevelRoute.Settings}>
+                        <Settings />
+                      </AnimatedTransition>
+                    }
+                  />
+                  <Route
+                    path={TopLevelRoute.SettingsAccounts}
+                    element={
+                      <AnimatedTransition
+                        elementKey={TopLevelRoute.SettingsAccounts}
+                      >
+                        <SettingsAccounts accounts={fakeAccounts} />
+                      </AnimatedTransition>
+                    }
+                  />
+                  <Route
+                    path={TopLevelRoute.SettingsWalletSettings}
+                    element={
+                      <AnimatedTransition
+                        elementKey={TopLevelRoute.SettingsWalletSettings}
+                      >
+                        <SettingsWalletSettings />
+                      </AnimatedTransition>
+                    }
+                  />
+                  <Route
+                    path={`${TopLevelRoute.SettingsAccountSettings}/:accountAlias`}
+                    element={
+                      <AnimatedTransition
+                        elementKey={TopLevelRoute.SettingsWalletSettings}
+                      >
+                        <SettingsAccountSettings />
+                      </AnimatedTransition>
+                    }
+                  />
+                  <Route
+                    path={`${TopLevelRoute.SettingsAccountCreation}/*`}
+                    element={
+                      <AnimatedTransition
+                        elementKey={TopLevelRoute.SettingsAccountCreation}
+                      >
+                        <SettingsAccountCreation />
+                      </AnimatedTransition>
+                    }
+                  />
+                </Route>
+              </Routes>
+            </AnimatePresence>
+          </BottomSection>
         </AppContainer>
       </ThemeProvider>
     </BrowserRouter>

packages/anoma-wallet/src/App/Settings/Settings.components.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components/macro";
+
+export const SettingsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;

packages/anoma-wallet/src/App/Settings/Settings.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import { NavigationContainer } from "components/NavigationContainer";
+import { TopLevelRoute } from "App/types";
+import { Button, ButtonVariant } from "components/Button";
+import { Heading, HeadingLevel } from "components/Heading";
+import { SettingsContainer } from "./Settings.components";
+
+/**
+ * This is the root component for Settings, it contains further screens that are
+ * being navigated to from here (or directly from some other locations in the app).
+ */
+export const Settings = (): JSX.Element => {
+  const navigate = useNavigate();
+  return (
+    <SettingsContainer>
+      <NavigationContainer>
+        <Heading level={HeadingLevel.Two}>Settings</Heading>
+      </NavigationContainer>
+
+      {/* accounts button */}
+      <Button
+        onClick={() => navigate(TopLevelRoute.SettingsAccounts)}
+        variant={ButtonVariant.Contained}
+        style={{ minWidth: "50%" }}
+      >
+        Accounts
+      </Button>
+
+      {/* wallet settings */}
+      <Button
+        onClick={() => navigate(TopLevelRoute.SettingsWalletSettings)}
+        variant={ButtonVariant.Contained}
+        style={{ minWidth: "50%" }}
+      >
+        Wallet Settings
+      </Button>
+    </SettingsContainer>
+  );
+};