diff --git a/packages/anoma-wallet/src/App/AccountCreation/index.ts b/packages/anoma-wallet/src/App/AccountCreation/index.ts deleted file mode 100644 index 30874c6879d..00000000000 --- a/packages/anoma-wallet/src/App/AccountCreation/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AccountCreation } from "./AccountCreation"; diff --git a/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts b/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts new file mode 100644 index 00000000000..fe6019aec88 --- /dev/null +++ b/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%; +`; diff --git a/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.tsx b/packages/anoma-wallet/src/App/AccountOverview/AccountOverview.tsx new file mode 100644 index 00000000000..d675869390d --- /dev/null +++ b/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 ( + + + AccountOverview + + + AccountOverview + + + ); +}; diff --git a/packages/anoma-wallet/src/App/AccountOverview/index.ts b/packages/anoma-wallet/src/App/AccountOverview/index.ts new file mode 100644 index 00000000000..6fbc7b6310e --- /dev/null +++ b/packages/anoma-wallet/src/App/AccountOverview/index.ts @@ -0,0 +1 @@ +export { AccountOverview } from "./AccountOverview"; diff --git a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts b/packages/anoma-wallet/src/App/App.components.ts similarity index 72% rename from packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts rename to packages/anoma-wallet/src/App/App.components.ts index 28c7b66d2a3..d88c95c8db8 100644 --- a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.components.ts +++ b/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; `; diff --git a/packages/anoma-wallet/src/App/App.tsx b/packages/anoma-wallet/src/App/App.tsx index ba8c562dd93..448334e2a83 100644 --- a/packages/anoma-wallet/src/App/App.tsx +++ b/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 ( + + {children} + + ); +}; + function App(): JSX.Element { const [isLightMode, setIsLightMode] = React.useState(true); const theme = getTheme(isLightMode); + const fakeAccounts = [ + "fake1l7dgf0m623ayll8vdyf6n7gxm3tz7mt7x443m0", + "fakej3n4340m623ayll8vdyf6n7gxm3tz7mt74m5th0", + "fakelg45lt5m623ayll8vdyf6n7gxm3tz7mtrenrer0", + ]; return ( @@ -37,12 +74,87 @@ function App(): JSX.Element { setIsLightMode={setIsLightMode} /> - - - } /> - } /> - - + + + + + + + } + > + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + diff --git a/packages/anoma-wallet/src/App/MainSection/index.ts b/packages/anoma-wallet/src/App/MainSection_delete/index.ts similarity index 100% rename from packages/anoma-wallet/src/App/MainSection/index.ts rename to packages/anoma-wallet/src/App/MainSection_delete/index.ts diff --git a/packages/anoma-wallet/src/App/MainSection/mainSection.components.ts b/packages/anoma-wallet/src/App/MainSection_delete/mainSection.components.ts similarity index 100% rename from packages/anoma-wallet/src/App/MainSection/mainSection.components.ts rename to packages/anoma-wallet/src/App/MainSection_delete/mainSection.components.ts diff --git a/packages/anoma-wallet/src/App/MainSection/mainSection.tsx b/packages/anoma-wallet/src/App/MainSection_delete/mainSection.tsx similarity index 100% rename from packages/anoma-wallet/src/App/MainSection/mainSection.tsx rename to packages/anoma-wallet/src/App/MainSection_delete/mainSection.tsx diff --git a/packages/anoma-wallet/src/App/Settings/Settings.components.ts b/packages/anoma-wallet/src/App/Settings/Settings.components.ts new file mode 100644 index 00000000000..aea810b01d6 --- /dev/null +++ b/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%; +`; diff --git a/packages/anoma-wallet/src/App/Settings/Settings.tsx b/packages/anoma-wallet/src/App/Settings/Settings.tsx new file mode 100644 index 00000000000..e52d3c82867 --- /dev/null +++ b/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 ( + + + Settings + + + {/* accounts button */} + + + {/* wallet settings */} + + + ); +}; diff --git a/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.components.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.components.ts new file mode 100644 index 00000000000..86398df3abd --- /dev/null +++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.components.ts @@ -0,0 +1,53 @@ +import styled from "styled-components/macro"; +import { motion } from "framer-motion"; + +export const AccountCreationContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + box-sizing: border-box; + background-color: ${(props) => props.theme.colors.background2}; + padding: ${(props) => + props.theme.themeConfigurations.isLightMode ? "0 32px" : "4px 36px 0 32px"}; + height: 100%; + width: 480px; + overflow-x: hidden; + transition: background-color 0.3s linear; +`; + +export const MotionContainer = styled(motion.div)` + height: 100%; + box-sizing: border-box; +`; +export const TopSection = styled.section` + display: flex; + justify-content: start; + align-items: center; + width: 100%; + margin: 32px 0; +`; + +export const TopSectionHeaderContainer = styled.section` + display: flex; + justify-content: center; + width: 100%; + align-items: center; +`; + +export const TopSectionButtonContainer = styled.section` + display: flex; + justify-content: center; + align-items: center; + width: 48px; + min-height: 50px; +`; + +export const RouteContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + overflow: scroll; + width: 100%; + height: 100%; +`; diff --git a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.tsx b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.tsx similarity index 63% rename from packages/anoma-wallet/src/App/AccountCreation/AccountCreation.tsx rename to packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.tsx index 0034b6c5be9..8b5a3f3a0b8 100644 --- a/packages/anoma-wallet/src/App/AccountCreation/AccountCreation.tsx +++ b/packages/anoma-wallet/src/App/Settings/SettingsAccountCreation/AccountCreation.tsx @@ -1,11 +1,22 @@ -import React from "react"; +import React, { useContext } from "react"; import { Routes, Route, useNavigate, useLocation } from "react-router-dom"; +import { AnimatePresence } from "framer-motion"; +import { ThemeContext } from "styled-components"; + +import { + KeyPair, + Mnemonic, + MnemonicLength, +} from "@anoma-wallet/key-management"; + +import { Button } from "components/ButtonTemporary"; +import { Icon, IconName } from "components/Icon"; import { TopLevelRoute, LOCAL_STORAGE_MASTER_KEY_PAIR_STORAGE_VALUE, LOCAL_STORAGE_MASTER_KEY_PAIR_ALIAS, } from "App/types"; -import { KeyPair, Mnemonic } from "@anoma-wallet/key-management"; + import { Start, AccountInformation, @@ -15,11 +26,8 @@ import { Completion, } from "./Steps"; import { AccountCreationRoute, accountCreationSteps } from "./types"; -import { AnimatePresence } from "framer-motion"; -import { useContext } from "react"; -import { ThemeContext } from "styled-components"; import { - MainSectionContainer, + AccountCreationContainer, TopSection, TopSectionHeaderContainer, TopSectionButtonContainer, @@ -27,14 +35,21 @@ import { MotionContainer, } from "./AccountCreation.components"; -import { Button } from "components/ButtonTemporary"; -import { Icon, IconName } from "components/Icon"; - -const AnimatedTransition = (props: { - children: React.ReactNode; +type AnimatedTransitionProps = { elementKey: string; + // the actual page content that slides in/out + children: React.ReactElement; + // consumer has a logic that decides if the transition is from left to right or the opposite animationFromRightToLeft: boolean; -}): JSX.Element => { +}; + +/** + * this is a utility to facilitate the animated transitions (slide from side). + * This should be extracted to it's own component along the other transition types. TODO + */ +const AnimatedTransition = ( + props: AnimatedTransitionProps +): React.ReactElement => { const { children, elementKey, animationFromRightToLeft } = props; return ( (); const [stepIndex, setStepIndex] = React.useState(0); - const isLastIndex = accountCreationSteps.length - 1 === stepIndex; const themeContext = useContext(ThemeContext); const navigate = useNavigate(); - // [1] <- |[2]| <- [3] + // this is for keeping tract about to what direction the view will disappear + // when the screen is rendered we cannot know if it should leave to left or right + // so we can set this by user hovering on next or back buttons + // TODO: if user uses the browsers back button we cannot do this correctly + // defaults left to right [1] <- |[2]| <- [3] const [animationFromRightToLeft, setAnimationFromRightToLeft] = React.useState(true); + // we need the location to figure out if the routes ends with "/initiate" + // to indicate a starting of a new flow const location = useLocation(); + + // info for disabling the back button in the last step + const isLastIndex = accountCreationSteps.length - 1 === stepIndex; + + // this is a temp as the designs are not final, coloring SVG icon with this const backButtonIconStrokeColor = themeContext.themeConfigurations.isLightMode ? themeContext.colors.border : "black"; - // eslint-disable-next-line react-hooks/exhaustive-deps React.useEffect(() => { - if ( - window.location.pathname === - `${TopLevelRoute.AccountCreation}/${AccountCreationRoute.Initiate}` - ) { - setAccountCreationDetails(defaultAccountCreationDetails); - setStepIndex(0); - setSeedPhrase([]); - navigate(AccountCreationRoute.Start); - } - }); + // at the load we redirect to the first step + // this way we do not need to expose the flow routes to outside + navigate(AccountCreationRoute.Start); + }, []); const navigateToNext = (): void => { - if (stepIndex >= accountCreationSteps.length - 1) return; setStepIndex((stepIndex) => stepIndex + 1); navigate(`${accountCreationSteps[stepIndex + 1]}`); }; const navigateToPrevious = (): void => { - if (stepIndex === 0) return; + // if we are on the first step and the user clicks back + // we leave the whole flow + if (stepIndex === 0) { + navigate(TopLevelRoute.SettingsAccounts); + return; + } + setStepIndex((stepIndex) => { return stepIndex - 1; }); @@ -102,21 +131,16 @@ function AccountCreation(): JSX.Element { }; return ( - + {!isLastIndex && ( + + + ); + })} + + + + + + ); +}; diff --git a/packages/anoma-wallet/src/App/Settings/SettingsAccounts/index.ts b/packages/anoma-wallet/src/App/Settings/SettingsAccounts/index.ts new file mode 100644 index 00000000000..91a9174772c --- /dev/null +++ b/packages/anoma-wallet/src/App/Settings/SettingsAccounts/index.ts @@ -0,0 +1 @@ +export { SettingsAccounts } from "./SettingsAccounts"; diff --git a/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.components.ts b/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.components.ts new file mode 100644 index 00000000000..48a4ba657fc --- /dev/null +++ b/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.components.ts @@ -0,0 +1,10 @@ +import styled from "styled-components/macro"; + +export const SettingsWalletSettingsContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + width: 100%; + height: 100%; +`; diff --git a/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx b/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx new file mode 100644 index 00000000000..cd1d393fdee --- /dev/null +++ b/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx @@ -0,0 +1,27 @@ +import { useNavigate } from "react-router-dom"; +import { NavigationContainer } from "components/NavigationContainer"; +import { Heading, HeadingLevel } from "components/Heading"; +import { SettingsWalletSettingsContainer } from "./SettingsWalletSettings.components"; + +export const SettingsWalletSettings = (): JSX.Element => { + const navigate = useNavigate(); + return ( + + { + navigate(-1); + }} + > + Wallet Settings + + + + SettingsWalletSettings + + + ); +}; diff --git a/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/index.ts b/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/index.ts new file mode 100644 index 00000000000..e9418120038 --- /dev/null +++ b/packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/index.ts @@ -0,0 +1 @@ +export { SettingsWalletSettings } from "./SettingsWalletSettings"; diff --git a/packages/anoma-wallet/src/App/Settings/index.ts b/packages/anoma-wallet/src/App/Settings/index.ts new file mode 100644 index 00000000000..7838d0d64f5 --- /dev/null +++ b/packages/anoma-wallet/src/App/Settings/index.ts @@ -0,0 +1,5 @@ +export { SettingsAccounts } from "./SettingsAccounts"; +export { SettingsWalletSettings } from "./SettingsWalletSettings"; +export { Settings } from "./Settings"; +export { SettingsAccountSettings } from "./SettingsAccountSettings"; +export { SettingsAccountCreation } from "./SettingsAccountCreation"; diff --git a/packages/anoma-wallet/src/App/StakingAndGovernance/StakingAndGovernance.components.ts b/packages/anoma-wallet/src/App/StakingAndGovernance/StakingAndGovernance.components.ts new file mode 100644 index 00000000000..bc96ed802f8 --- /dev/null +++ b/packages/anoma-wallet/src/App/StakingAndGovernance/StakingAndGovernance.components.ts @@ -0,0 +1,10 @@ +import styled from "styled-components/macro"; + +export const StakingAndGovernanceContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + width: 100%; + height: 100%; +`; diff --git a/packages/anoma-wallet/src/App/StakingAndGovernance/StakingAndGovernance.tsx b/packages/anoma-wallet/src/App/StakingAndGovernance/StakingAndGovernance.tsx new file mode 100644 index 00000000000..6fb939b33d6 --- /dev/null +++ b/packages/anoma-wallet/src/App/StakingAndGovernance/StakingAndGovernance.tsx @@ -0,0 +1,20 @@ +import { NavigationContainer } from "components/NavigationContainer"; +import { Heading, HeadingLevel } from "components/Heading"; +import { StakingAndGovernanceContainer } from "./StakingAndGovernance.components"; + +export const StakingAndGovernance = (): JSX.Element => { + return ( + + + Staking & Governance + + + StakingAndGovernance + + + ); +}; diff --git a/packages/anoma-wallet/src/App/StakingAndGovernance/index.ts b/packages/anoma-wallet/src/App/StakingAndGovernance/index.ts new file mode 100644 index 00000000000..4f11c305cfe --- /dev/null +++ b/packages/anoma-wallet/src/App/StakingAndGovernance/index.ts @@ -0,0 +1 @@ +export { StakingAndGovernance } from "./StakingAndGovernance"; diff --git a/packages/anoma-wallet/src/App/TopNavigation/topNavigation.components.ts b/packages/anoma-wallet/src/App/TopNavigation/topNavigation.components.ts index 84afea305a7..1b91d75decc 100644 --- a/packages/anoma-wallet/src/App/TopNavigation/topNavigation.components.ts +++ b/packages/anoma-wallet/src/App/TopNavigation/topNavigation.components.ts @@ -1,47 +1,90 @@ -import styled from "styled-components/macro"; +import styled, { + css, + FlattenSimpleInterpolation, +} from "styled-components/macro"; export const TopNavigationContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: 120px; + padding: 32px 32px 0; + box-sizing: border-box; +`; + +export const TopNavigationContainerRow = styled.div` display: flex; justify-content: space-between; align-items: center; width: 100%; - padding: 0 32px; `; -export const LeftSection = styled.div` +export const TopNavigationContainerSecondRow = styled( + TopNavigationContainerRow +)` + justify-content: center; +`; + +const Section = styled.div` display: flex; - justify-content: start; + justify-content: center; align-items: center; - width: 50%; - max-width: 280px; `; -export const RightSection = styled.div` - display: flex; +export const LeftSection = styled(Section)` + justify-content: start; + width: 15%; +`; + +export const MiddleSection = styled(Section)` + justify-content: center; + width: 70%; +`; + +export const RightSection = styled(Section)` justify-content: end; - align-items: center; - width: 50%; - max-width: 280px; + width: 15%; `; -export const HelpButton = styled.button` +const isSelected = (): FlattenSimpleInterpolation => { + return css` + transition: font-weight 0.1s ease-out, stroke-width 0.1s ease-out; + font-weight: 700; + & path { + stroke-width: 2; + } + `; +}; + +export const MenuItem = styled.button<{ isSelected?: boolean }>` all: unset; cursor: pointer; display: flex; - justify-content: end; + justify-content: center; align-items: center; - margin: 0 32px 0 0; + margin: 0 16px; + & path { + stroke-width: 1; + } + width: 25%; + ${(props) => (props.isSelected ? isSelected() : "")} +`; + +export const StakingAndGovernanceMenuItem = styled(MenuItem)` + @media only screen and (min-width: 1024px) { + min-width: 250px; + } `; -export const HelpTextContainer = styled.div` +export const MenuItemTextContainer = styled.div` display: flex; - justify-content: end; + justify-content: center; align-items: center; margin: 0 16px; color: ${(props) => props.theme.colors.textPrimary}; `; -export const HelpIconContainer = styled.div` +export const MenuItemIconContainer = styled.div` display: flex; justify-content: end; align-items: center; @@ -56,3 +99,16 @@ export const ColorModeContainer = styled.div` export const LogoContainer = styled.div` cursor: pointer; `; + +export const OnlyInSmall = styled.div` + display: flex; + @media only screen and (min-width: 1024px) { + display: none; + } +`; +export const OnlyInMedium = styled.div` + display: flex; + @media only screen and (max-width: 1024px) { + display: none; + } +`; diff --git a/packages/anoma-wallet/src/App/TopNavigation/topNavigation.tsx b/packages/anoma-wallet/src/App/TopNavigation/topNavigation.tsx index 95c0669eaec..d137d52a8f8 100644 --- a/packages/anoma-wallet/src/App/TopNavigation/topNavigation.tsx +++ b/packages/anoma-wallet/src/App/TopNavigation/topNavigation.tsx @@ -1,28 +1,91 @@ import React from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useLocation, NavigateFunction } from "react-router-dom"; import { TopLevelRoute } from "App/types"; -import { AccountCreationRoute } from "App/AccountCreation/types"; import { Image, ImageName } from "components/Image"; import { Icon, IconName } from "components/Icon"; import { Toggle } from "components/Toggle"; import { TopNavigationContainer, LeftSection, + MiddleSection, RightSection, - HelpButton, - HelpIconContainer, - HelpTextContainer, + MenuItem, + StakingAndGovernanceMenuItem, + MenuItemIconContainer, + MenuItemTextContainer, ColorModeContainer, LogoContainer, + OnlyInSmall, + OnlyInMedium, + TopNavigationContainerRow, + TopNavigationContainerSecondRow, } from "./topNavigation.components"; +/** + * this is rendered in one of 2 places depending of the screen size + */ +const TopNavigationMenuItems = (props: { + navigate: NavigateFunction; +}): React.ReactElement => { + const { navigate } = props; + const location = useLocation(); + return ( + <> + {/* Wallet */} + { + navigate(`${TopLevelRoute.Wallet}`); + }} + isSelected={location.pathname === TopLevelRoute.Wallet} + > + + + + Wallet + + + {/* Staking & Governance */} + { + navigate(`${TopLevelRoute.StakingAndGovernance}`); + }} + isSelected={location.pathname === TopLevelRoute.StakingAndGovernance} + > + + + + Staking & Governance + + + {/* Settings */} + {/* The below is not really type safe, but enums do not + allow computed strings, so have to figure out something + TODO + TopLevelRoute { + SettingsAccounts = `${TopLevelRoute.Settings}/accounts` + } + */} + { + navigate(`${TopLevelRoute.Settings}`); + }} + isSelected={location.pathname.startsWith(TopLevelRoute.Settings)} + > + + + + Settings + + + ); +}; + type TopNavigationProps = { // this is for the toggle isLightMode: boolean; // cb for telling parent to change hte color in context setIsLightMode: React.Dispatch>; }; - // top nav of the app, this is likely always visible. function TopNavigation(props: TopNavigationProps): JSX.Element { const { isLightMode, setIsLightMode } = props; @@ -40,56 +103,59 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { return ( - - { - navigate(`${TopLevelRoute.Home}`); - }} - > - - - + + + { + navigate(`${TopLevelRoute.Home}`); + }} + > + + + - - {/* TODO: extract to Button component*/} - {/* keys button */} - { - navigate( - `${TopLevelRoute.AccountCreation}/${AccountCreationRoute.Initiate}` - ); - }} - > - - - - Keys - - {/* help button */} - { - alert("Help not implemented yet"); - }} - > - - - - Help - - - + + + + + + + {/* TODO: extract to Button component*/} + + {/* help button */} + { - setIsLightMode((isLightMode) => !isLightMode); + alert("Help not implemented yet"); }} - circleElementEnabled={circleElementEnabled} - circleElementDisabled={circleElementDisabled} - /> - - + style={{ margin: "0 32px 0" }} + > + + + + Help + + + + { + setIsLightMode((isLightMode) => !isLightMode); + }} + circleElementEnabled={circleElementEnabled} + circleElementDisabled={circleElementDisabled} + /> + + + + + + + + ); } diff --git a/packages/anoma-wallet/src/App/styledComponents.ts b/packages/anoma-wallet/src/App/styledComponents.ts deleted file mode 100644 index b069bbaa5ed..00000000000 --- a/packages/anoma-wallet/src/App/styledComponents.ts +++ /dev/null @@ -1,27 +0,0 @@ -import styled from "styled-components/macro"; - -export const AppContainer = styled.div` - display: flex; - flex-direction: column; - - height: 100%; - - background-color: ${(props) => props.theme.colors.background1}; - transition: all 0.3s linear; -`; - -export const TopSection = styled.section` - display: flex; - justify-content: center; - align-items: center; - height: 80px; - width: 100%; -`; - -export const MainSectionContainer = styled.section` - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; -`; diff --git a/packages/anoma-wallet/src/App/types.ts b/packages/anoma-wallet/src/App/types.ts index 3011b28e73b..dbd0e8198f5 100644 --- a/packages/anoma-wallet/src/App/types.ts +++ b/packages/anoma-wallet/src/App/types.ts @@ -1,6 +1,14 @@ +const SETTINGS = ""; + export enum TopLevelRoute { Home = "/", - AccountCreation = "/account-creation", + Wallet = "/wallet", + StakingAndGovernance = "/staking-and-governance", + Settings = "/settings", + SettingsAccounts = "/settings/accounts", + SettingsAccountCreation = "/settings/account-creation", + SettingsWalletSettings = "/settings/wallet-settings", + SettingsAccountSettings = "/settings/account-settings", } export const LOCAL_STORAGE_MASTER_KEY_PAIR_ALIAS = "accountAlias"; diff --git a/packages/anoma-wallet/src/components/Button/button.tsx b/packages/anoma-wallet/src/components/Button/button.tsx index f427d74d112..62acdce245c 100644 --- a/packages/anoma-wallet/src/components/Button/button.tsx +++ b/packages/anoma-wallet/src/components/Button/button.tsx @@ -1,20 +1,43 @@ /* eslint-disable max-len */ -import { ContainedAltButton, ContainedButton, OutlinedButton, SmallButton } from "./button.components"; -import { ButtonVariant } from "./types" +import { + ContainedAltButton, + ContainedButton, + OutlinedButton, + SmallButton, +} from "./button.components"; +import { ButtonVariant } from "./types"; export type ButtonProps = { - variant: ButtonVariant; - onClick?: React.MouseEventHandler -} + variant: ButtonVariant; + onClick?: React.MouseEventHandler; + style?: React.CSSProperties; +}; export const Button: React.FC = (props): JSX.Element => { - switch(props.variant) { - case ButtonVariant.Contained: - return {props.children} - case ButtonVariant.ContainedAlternative: - return {props.children} - case ButtonVariant.Outlined: - return {props.children} - case ButtonVariant.Small: - return {props.children} - } -} + const { variant = ButtonVariant.Contained, onClick, style, children } = props; + switch (variant) { + case ButtonVariant.Contained: + return ( + + {children} + + ); + case ButtonVariant.ContainedAlternative: + return ( + + {children} + + ); + case ButtonVariant.Outlined: + return ( + + {children} + + ); + case ButtonVariant.Small: + return ( + + {children} + + ); + } +}; diff --git a/packages/anoma-wallet/src/components/Heading/Heading.tsx b/packages/anoma-wallet/src/components/Heading/Heading.tsx new file mode 100644 index 00000000000..f2b57ceafdd --- /dev/null +++ b/packages/anoma-wallet/src/components/Heading/Heading.tsx @@ -0,0 +1,12 @@ +import { BaseHeading } from "./heading.components"; +import { HeadingLevel } from "./types"; + +type HeadingProps = { + level: HeadingLevel; + children: React.ReactNode; +}; + +export const Heading = (props: HeadingProps): JSX.Element => { + const { level, children } = props; + return {children}; +}; diff --git a/packages/anoma-wallet/src/components/Heading/heading.components.ts b/packages/anoma-wallet/src/components/Heading/heading.components.ts index b8205a85aaa..3060b9dea1c 100644 --- a/packages/anoma-wallet/src/components/Heading/heading.components.ts +++ b/packages/anoma-wallet/src/components/Heading/heading.components.ts @@ -1,13 +1,6 @@ import styled from "styled-components/macro"; -import { HeadingLevel } from "./types"; -export type HeadingProps = { - level: HeadingLevel; -}; - -export const Heading = styled.h2.attrs(({ level }) => ({ - as: `h${level + 1}`, -}))` +export const BaseHeading = styled.h1` font-weight: 700; color: ${(props) => props.theme.colors.textPrimary}; `; diff --git a/packages/anoma-wallet/src/components/Heading/index.ts b/packages/anoma-wallet/src/components/Heading/index.ts index 3c3bc782d7e..73b8beacc5a 100644 --- a/packages/anoma-wallet/src/components/Heading/index.ts +++ b/packages/anoma-wallet/src/components/Heading/index.ts @@ -1,2 +1,2 @@ export { HeadingLevel } from "./types"; -export { Heading } from "./heading.components"; +export { Heading } from "./Heading"; diff --git a/packages/anoma-wallet/src/components/Heading/types.ts b/packages/anoma-wallet/src/components/Heading/types.ts index 495085ecefe..24022882f7d 100644 --- a/packages/anoma-wallet/src/components/Heading/types.ts +++ b/packages/anoma-wallet/src/components/Heading/types.ts @@ -1,8 +1,8 @@ export enum HeadingLevel { - One, - Two, - Three, - Four, - Five, - Six, + One = "h1", + Two = "h2", + Three = "h3", + Four = "h4", + Five = "h5", + Six = "h6", } diff --git a/packages/anoma-wallet/src/components/Icon/assets/briefcase.svg b/packages/anoma-wallet/src/components/Icon/assets/briefcase.svg new file mode 100644 index 00000000000..87aa40cf127 --- /dev/null +++ b/packages/anoma-wallet/src/components/Icon/assets/briefcase.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/anoma-wallet/src/components/Icon/assets/settings.svg b/packages/anoma-wallet/src/components/Icon/assets/settings.svg new file mode 100644 index 00000000000..7819c7c947b --- /dev/null +++ b/packages/anoma-wallet/src/components/Icon/assets/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/anoma-wallet/src/components/Icon/assets/thumbs-up.svg b/packages/anoma-wallet/src/components/Icon/assets/thumbs-up.svg new file mode 100644 index 00000000000..b319a5f79b4 --- /dev/null +++ b/packages/anoma-wallet/src/components/Icon/assets/thumbs-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/anoma-wallet/src/components/Icon/icon.tsx b/packages/anoma-wallet/src/components/Icon/icon.tsx index 682f1081da7..d2378909c0e 100644 --- a/packages/anoma-wallet/src/components/Icon/icon.tsx +++ b/packages/anoma-wallet/src/components/Icon/icon.tsx @@ -8,7 +8,10 @@ import { ReactComponent as ChevronRight } from "./assets/chevron-right.svg"; import { ReactComponent as ChevronDown } from "./assets/chevron-down.svg"; import { ReactComponent as ChevronLeft } from "./assets/chevron-left.svg"; import { ReactComponent as EyeDark } from "./assets/eye-dark.svg"; -import { ReactComponent as EyeHiddenDark } from "./assets/eye-hidden-dark.svg" +import { ReactComponent as EyeHiddenDark } from "./assets/eye-hidden-dark.svg"; +import { ReactComponent as ThumbsUp } from "./assets/thumbs-up.svg"; +import { ReactComponent as Briefcase } from "./assets/briefcase.svg"; +import { ReactComponent as Settings } from "./assets/settings.svg"; import { IconName, IconSize } from "./types"; @@ -37,6 +40,9 @@ const icons: Record = { [IconName.ChevronLeft]: ChevronLeft, [IconName.Eye]: EyeDark, [IconName.EyeHidden]: EyeHiddenDark, + [IconName.ThumbsUp]: ThumbsUp, + [IconName.Briefcase]: Briefcase, + [IconName.Settings]: Settings, }; /** diff --git a/packages/anoma-wallet/src/components/Icon/types.ts b/packages/anoma-wallet/src/components/Icon/types.ts index 7ed51d610de..7d592db6f75 100644 --- a/packages/anoma-wallet/src/components/Icon/types.ts +++ b/packages/anoma-wallet/src/components/Icon/types.ts @@ -11,6 +11,9 @@ export enum IconName { ChevronLeft, EyeHidden, Eye, + ThumbsUp, + Briefcase, + Settings, } export enum IconSize { diff --git a/packages/anoma-wallet/src/components/NavigationContainer/NavigationContainer.components.ts b/packages/anoma-wallet/src/components/NavigationContainer/NavigationContainer.components.ts new file mode 100644 index 00000000000..9dc19e22166 --- /dev/null +++ b/packages/anoma-wallet/src/components/NavigationContainer/NavigationContainer.components.ts @@ -0,0 +1,13 @@ +import styled from "styled-components/macro"; + +export const NavigationContainerContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; + margin: 0 0 16px 0; +`; +export const MainRow = styled.div<{ center?: boolean }>` + display: flex; + width: 100%; + ${(props) => (props.center ? "justify-content: center;" : "")} +`; diff --git a/packages/anoma-wallet/src/components/NavigationContainer/NavigationContainer.tsx b/packages/anoma-wallet/src/components/NavigationContainer/NavigationContainer.tsx new file mode 100644 index 00000000000..d080222bc32 --- /dev/null +++ b/packages/anoma-wallet/src/components/NavigationContainer/NavigationContainer.tsx @@ -0,0 +1,60 @@ +import { useContext } from "react"; +import { Button, ButtonVariant } from "components/Button"; +import { ThemeContext } from "styled-components"; +import { Icon, IconName } from "components/Icon"; +import { + NavigationContainerContainer, + MainRow, +} from "./NavigationContainer.components"; + +type NavigationContainerProps = { + // the content of the header TODO: change this to string once the designs are final + children: React.ReactElement; + + // this will be called at back button press, if not passed no button rendered + onBackButtonClick?: () => void; +}; + +/** + * This is a generic compoment that has only one purpose, to be the header/navigation row in the + * container displaying the page content. Likely we should include this with a new component that + * packs more functionality once the designs are more final: + * * this header + * * the whole container + * * the navigating with animations + * + * This had 2 modes, + * 1. if onBackButtonClick is passed, there will be a back button. + * 2. otherwise renders without back button and the header is centered + */ +export const NavigationContainer = ( + props: NavigationContainerProps +): React.ReactElement => { + const { children, onBackButtonClick } = props; + const themeContext = useContext(ThemeContext); + const backButtonIconStrokeColor = themeContext.themeConfigurations.isLightMode + ? themeContext.colors.border + : "black"; + + const noButton = typeof onBackButtonClick === "undefined"; + return ( + + + {onBackButtonClick && ( + + )} + + {children} + + + ); +}; diff --git a/packages/anoma-wallet/src/components/NavigationContainer/index.ts b/packages/anoma-wallet/src/components/NavigationContainer/index.ts new file mode 100644 index 00000000000..6cbc76554f5 --- /dev/null +++ b/packages/anoma-wallet/src/components/NavigationContainer/index.ts @@ -0,0 +1 @@ +export { NavigationContainer } from "./NavigationContainer"; diff --git a/packages/anoma-wallet/src/utils/theme/index.ts b/packages/anoma-wallet/src/utils/theme/index.ts index e5cc2234aec..36f5f5f5c62 100644 --- a/packages/anoma-wallet/src/utils/theme/index.ts +++ b/packages/anoma-wallet/src/utils/theme/index.ts @@ -88,7 +88,7 @@ export const darkColors: Colors = { export const lightColors: Colors = { background1: "#ffffff", background2: "#ffffff", - background3: "#ffffff", + background3: "#f2f2f2", titleColor: "#011F43", border: "#002046", borderShadow: "#002046",