wallet-ext: bottom navigation bar

* moved current header to the new navigation bar using new icons

wallet/src/ui/app/components/navigation/Navigation.module.scss

@@ -0,0 +1,56 @@
+@use '_variables' as v;
+@use '_values' as values;
+
+.container {
+    display: flex;
+    flex-flow: row nowrap;
+    background-color: v.use(v.$colors-nav-background-color);
+    backdrop-filter: v.use(v.$colors-nav-background-filter);
+    height: values.$sizing-nav-height;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    align-items: center;
+    justify-content: stretch;
+    padding: 5px 10px;
+    overflow: hidden;
+}
+
+.link {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    padding: 6px 6px 14px;
+    text-decoration: none;
+    color: v.use(v.$colors-nav-item-color);
+    user-select: none;
+    flex-grow: 1;
+    flex-basis: 80px;
+
+    &.active {
+        color: v.use(v.$colors-nav-item-highlighted-color);
+    }
+}
+
+.icon {
+    font-size: 32px;
+    margin-bottom: 2px;
+
+    .active > & {
+        color: v.use(v.$colors-nav-item-icon-highlighted-color);
+        background-clip: text;
+        background-image: v.use(
+            v.$colors-nav-item-icon-highlighted-gradient-color
+        );
+    }
+}
+
+.title {
+    font-size: 13px;
+    line-height: 12px;
+    font-weight: 600;
+
+    .active > & {
+        font-weight: 700;
+    }
+}

wallet/src/ui/app/components/navigation/index.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+import { memo } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import Icon, { SuiIcons } from '_components/icon';
+
+import st from './Navigation.module.scss';
+
+function makeLinkCls({ isActive }: { isActive: boolean }) {
+    return cl(st.link, { [st.active]: isActive });
+}
+
+export type NavigationProps = {
+    className?: string;
+};
+
+function Navigation({ className }: NavigationProps) {
+    return (
+        <nav className={cl(st.container, className)}>
+            <NavLink to="./tokens" className={makeLinkCls} title="Tokens">
+                <Icon className={st.icon} icon={SuiIcons.Tokens} />
+                <span className={st.title}>Coins</span>
+            </NavLink>
+            <NavLink to="./nfts" className={makeLinkCls} title="NFTs">
+                <Icon className={st.icon} icon={SuiIcons.Nfts} />
+                <span className={st.title}>NFTs</span>
+            </NavLink>
+            <NavLink
+                to="./transactions"
+                className={makeLinkCls}
+                title="Transactions"
+            >
+                <Icon className={st.icon} icon={SuiIcons.History} />
+                <span className={st.title}>Activity</span>
+            </NavLink>
+            <NavLink to="./settings" className={makeLinkCls} title="Settings">
+                <Icon className={st.icon} icon={SuiIcons.Apps} />
+                <span className={st.title}>Settings</span>
+            </NavLink>
+        </nav>
+    );
+}
+
+export default memo(Navigation);

wallet/src/ui/app/pages/home/Home.module.scss

@@ -22,12 +22,18 @@
     flex-flow: column nowrap;
     align-items: center;
     background: v.use(v.$colors-main-content-background);
-    padding: 25px;
     border-radius: 20px 20px 0 0;
     flex-grow: 1;
     box-shadow: v.use(v.$shadows-main-content);
+    overflow: hidden;
+    position: relative;
+}
+
+.main {
     overflow: auto;
-    max-height: 100%;
+    padding: 25px;
+    padding-bottom: calc(v.use(v.$sizing-nav-height-placeholder) + 12px);
+    flex-grow: 1;
 }
 
 .logo {

wallet/src/ui/app/pages/home/index.tsx

@@ -5,9 +5,9 @@ import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { of, filter, switchMap, from, defer, repeat } from 'rxjs';
 
-import Header from '_components/header';
 import Loading from '_components/loading';
 import Logo from '_components/logo';
+import Navigation from '_components/navigation';
 import { useInitializedGuard, useAppDispatch } from '_hooks';
 import PageLayout from '_pages/layout';
 import { fetchAllOwnedObjects } from '_redux/slices/sui-objects';
@@ -41,8 +41,10 @@ const HomePage = () => {
                         <Logo className={st.logo} txt={true} />
                     </div>
                     <div className={st.content}>
-                        <Header />
-                        <Outlet />
+                        <main className={st.main}>
+                            <Outlet />
+                        </main>
+                        <Navigation />
                     </div>
                 </div>
             </Loading>

wallet/src/ui/app/pages/layout/Layout.module.scss

@@ -1,13 +1,19 @@
-@use '_values/dimensions';
+@use '_values' as val;
+@use '_variables' as v;
 
 .container {
     display: flex;
     align-items: center;
     flex-flow: column nowrap;
+    @include v.set(v.$sizing-nav-height-placeholder, val.$sizing-nav-height);
 
-    &.forced-popup-dimensions,
+    &.nav-hidden {
+        @include v.set(v.$sizing-nav-height-placeholder, 0);
+    }
+
+    &.forced-popup-size,
     :global(.is-popup) & {
-        width: dimensions.$popup-width;
-        height: dimensions.$popup-height;
+        width: val.$sizing-popup-width;
+        height: val.$sizing-popup-height;
     }
 }

wallet/src/ui/app/pages/layout/index.tsx

@@ -5,7 +5,8 @@ import cl from 'classnames';
 import { memo } from 'react';
 
 import Loading from '_components/loading';
-import { useFullscreenGuard } from '_hooks';
+import { useAppSelector, useFullscreenGuard } from '_hooks';
+import { getNavIsVisible } from '_redux/slices/app';
 
 import type { ReactNode } from 'react';
 
@@ -23,11 +24,13 @@ function PageLayout({
     children,
 }: PageLayoutProps) {
     const guardLoading = useFullscreenGuard(forceFullscreen);
+    const isNavVisible = useAppSelector(getNavIsVisible);
     return (
         <Loading loading={guardLoading}>
             <div
                 className={cl(st.container, {
-                    [st.forcedPopupDimensions]: limitToPopUpSize,
+                    [st.forcedPopupSize]: limitToPopUpSize,
+                    [st.navHidden]: !isNavVisible,
                 })}
             >
                 {children}

wallet/src/ui/app/redux/slices/app/index.ts

@@ -11,18 +11,21 @@ import { getTransactionsByAddress } from '_redux/slices/txresults';
 
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { API_ENV } from '_app/ApiProvider';
+import type { RootState } from '_redux/RootReducer';
 import type { AppThunkConfig } from '_store/thunk-extras';
 
 type AppState = {
     appType: AppType;
     apiEnv: API_ENV;
     showHideNetwork: boolean;
+    navVisible: boolean;
 };
 
 const initialState: AppState = {
     appType: AppType.unknown,
     apiEnv: DEFAULT_API_ENV,
     showHideNetwork: false,
+    navVisible: true,
 };
 
 // On network change, set setNewJsonRpcProvider, fetch all owned objects, and fetch all transactions
@@ -64,11 +67,19 @@ const slice = createSlice({
         setNetworkSelector: (state, { payload }: PayloadAction<boolean>) => {
             state.showHideNetwork = !payload;
         },
+        setNavVisibility: (
+            state,
+            { payload: isVisible }: PayloadAction<boolean>
+        ) => {
+            state.navVisible = isVisible;
+        },
     },
 
     initialState,
 });
 
-export const { initAppType, setApiEnv, setNetworkSelector } = slice.actions;
+export const { initAppType, setApiEnv, setNetworkSelector, setNavVisibility } =
+    slice.actions;
+export const getNavIsVisible = ({ app }: RootState) => app.navVisible;
 
 export default slice.reducer;

wallet/src/ui/styles/themes/dark.scss

@@ -9,4 +9,10 @@ $values: (
     c-var.$main-content-background: #0d1f36,
     c-var.$text-on-main-content-background: c-val.$white,
     shadows.$main-content: 0 0 49px rgb(103 103 103 / 13%),
+    c-var.$nav-background-color: #4e545b33,
+    c-var.$nav-background-filter: blur(25px),
+    c-var.$nav-item-color: c-val.$sui-steel-blue,
+    c-var.$nav-item-highlighted-color: c-val.$white,
+    c-var.$nav-item-icon-highlighted-color: c-val.$sui-blue,
+    c-var.$nav-item-icon-highlighted-gradient-color: none,
 );

wallet/src/ui/styles/themes/index.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use './light';
 @use './dark';
+@use '_variables' as v;
 
 @mixin apply-theme($name, $values, $default-values) {
     @each $variable, $default-value in $default-values {
@@ -9,7 +10,7 @@
             $final-value: map.get($values, $variable);
         }
 
-        #{$variable}: $final-value;
+        @include v.set($variable, $final-value);
     }
 }
 

wallet/src/ui/styles/themes/light.scss

@@ -13,4 +13,11 @@ $values: (
         0 0 44px rgb(0 0 0 / 5%),
         0 0 6px rgb(0 0 0 / 2%),
     ),
+    c-var.$nav-background-color: #dde3eb33,
+    c-var.$nav-background-filter: blur(25px),
+    c-var.$nav-item-color: c-val.$gray-60,
+    c-var.$nav-item-highlighted-color: c-val.$gray-95,
+    c-var.$nav-item-icon-highlighted-color: transparent,
+    c-var.$nav-item-icon-highlighted-gradient-color:
+        linear-gradient(135deg, #589aea 0%, #4c75a6 100%),
 );

wallet/src/ui/styles/values/colors.scss

@@ -6,3 +6,5 @@ $gray-70: #898d93;
 $gray-75: #767a81;
 $gray-95: #2a3645;
 $gray-100: #182435;
+$sui-blue: #6fbcf0;
+$sui-steel-blue: #a0b6c3;

wallet/src/ui/styles/values/index.scss

@@ -1,2 +1,2 @@
-@forward './dimensions' as dimensions-*;
+@forward './sizing' as sizing-*;
 @forward './colors' as colors-*;

wallet/src/ui/styles/values/dimensions.scss → wallet/src/ui/styles/values/sizing.scss

@@ -1,2 +1,3 @@
 $popup-width: 360px;
 $popup-height: 595px;
+$nav-height: 76px;

wallet/src/ui/styles/variables/colors.scss

@@ -3,3 +3,9 @@ $background-color: '--colors-background-color';
 $text-on-background: '--colors-text-on-background';
 $main-content-background: '--colors-main-content-background';
 $text-on-main-content-background: '--colors-text-on-main-content-background';
+$nav-background-color: '--colors-nav-background-color';
+$nav-background-filter: '--colors-nav-background-filter';
+$nav-item-color: '--colors-nav-item-color';
+$nav-item-highlighted-color: '--colors-nav-item-highlighted-color';
+$nav-item-icon-highlighted-color: '--colors-nav-item-icon-highlighted-color';
+$nav-item-icon-highlighted-gradient-color: '--colors-nav-item-icon-highlighted-gradient-color';

wallet/src/ui/styles/variables/index.scss

@@ -1,6 +1,11 @@
 @forward './colors' as colors-*;
 @forward './shadows' as shadows-*;
+@forward './sizing' as sizing-*;
 
 @function use($variable) {
     @return var(#{$variable});
 }
+
+@mixin set($variable, $value) {
+    #{$variable}: $value;
+}

wallet/src/ui/styles/variables/sizing.scss

@@ -0,0 +1 @@
+$nav-height-placeholder: '--sizing-navigation-placeholder-height';