wallet-ext: home/main view design update

* use new design for main view and make content container scroll instead of the whole view
* move network-switch to settings page

wallet/configs/ts/tsconfig.common.json

@@ -26,6 +26,7 @@
             "_store": ["./src/ui/app/redux/store/"],
             "_store/*": ["./src/ui/app/redux/store/*"],
             "_hooks": ["./src/ui/app/hooks/"],
+            "_pages/*": ["./src/ui/app/pages/*"],
             "_components/*": ["./src/ui/app/components/*"],
             "_messaging/*": ["./src/shared/messaging/*"],
             "_messages": ["./src/shared/messaging/messages/"],

wallet/src/ui/app/components/logo/Logo.module.scss

@@ -2,6 +2,7 @@
     display: inline-flex;
     flex-flow: row nowrap;
     align-items: center;
+    color: #6fbcf0;
 }
 
 .image {
@@ -33,7 +34,6 @@
 .txt {
     margin-left: 5px;
     font-weight: 700;
-    color: #6fbcf0;
 
     &.normal {
         font-size: 15px;

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

@@ -10,13 +10,14 @@ const cl = classnames.bind(st);
 type LogoProps = {
     size?: 'normal' | 'big' | 'bigger' | 'huge';
     txt?: boolean;
+    className?: string;
 };
 
-const Logo = ({ size = 'normal', txt = false }: LogoProps) => {
+const Logo = ({ size = 'normal', txt = false, className }: LogoProps) => {
     return (
-        <div className={cl('container')}>
+        <div className={cl('container', className)}>
             <span className={cl('image', size)} />
-            {txt ? <span className={cl('txt', size)}>SUI wallet</span> : null}
+            {txt ? <span className={cl('txt', size)}>sui</span> : null}
         </div>
     );
 };

wallet/src/ui/app/components/network-switch/Network.module.scss

@@ -49,8 +49,7 @@
     min-height: 100px;
     width: 250px;
     border-radius: 10px;
-    margin-right: 23px;
-    top: 56px;
+    top: 25px;
     box-shadow: 1px 1px 3px 0 #d1d9e1;
     cursor: auto;
     font-family: 'Space Mono', monospace;

wallet/src/ui/app/hooks/useFullscreenGuard.ts

@@ -7,12 +7,12 @@ import useAppSelector from './useAppSelector';
 import { AppType } from '_redux/slices/app/AppType';
 import { openInNewTab } from '_shared/utils';
 
-export default function useFullscreenGuard() {
+export default function useFullscreenGuard(enabled: boolean) {
     const appType = useAppSelector((state) => state.app.appType);
     useEffect(() => {
-        if (appType === AppType.popup) {
+        if (enabled && appType === AppType.popup) {
             openInNewTab().finally(() => window.close());
         }
-    }, [appType]);
-    return appType === AppType.unknown;
+    }, [appType, enabled]);
+    return !enabled && appType === AppType.unknown;
 }

wallet/src/ui/app/index.tsx

@@ -4,24 +4,25 @@
 import { useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { DappTxApprovalPage } from './pages/dapp-tx-approval';
-import HomePage from './pages/home';
-import NftsPage from './pages/home/nfts';
-import SettingsPage from './pages/home/settings';
-import TokensPage from './pages/home/tokens';
-import TransactionsPage from './pages/home/transactions';
-import InitializePage from './pages/initialize';
-import BackupPage from './pages/initialize/backup';
-import CreatePage from './pages/initialize/create';
-import ImportPage from './pages/initialize/import';
-import SelectPage from './pages/initialize/select';
-import SiteConnectPage from './pages/site-connect';
-import TransactionDetailsPage from './pages/transaction-details';
-import TransferCoinPage from './pages/transfer-coin';
-import TransferNFTPage from './pages/transfer-nft';
-import WelcomePage from './pages/welcome';
 import { AppType } from './redux/slices/app/AppType';
 import { useAppDispatch, useAppSelector } from '_hooks';
+import { DappTxApprovalPage } from '_pages/dapp-tx-approval';
+import HomePage, {
+    NftsPage,
+    SettingsPage,
+    TokensPage,
+    TransactionDetailsPage,
+    TransactionsPage,
+    TransferCoinPage,
+    TransferNFTPage,
+} from '_pages/home';
+import InitializePage from '_pages/initialize';
+import BackupPage from '_pages/initialize/backup';
+import CreatePage from '_pages/initialize/create';
+import ImportPage from '_pages/initialize/import';
+import SelectPage from '_pages/initialize/select';
+import SiteConnectPage from '_pages/site-connect';
+import WelcomePage from '_pages/welcome';
 import { loadAccountFromStorage } from '_redux/slices/account';
 import { loadNetworkFromStorage } from '_redux/slices/app';
 

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

@@ -1,58 +1,35 @@
-.logo {
-    width: 60px;
-}
+@use '_variables' as v;
 
 .container {
     display: flex;
     flex-flow: column nowrap;
-    width: 400px;
-    padding-bottom: 12px;
-    min-height: 450px;
-
-    :global(.is-popup) & {
-        min-height: 400px;
-        width: 350px;
-        padding-bottom: 0;
-    }
+    flex-grow: 1;
+    width: 100%;
+    max-height: 100%;
 }
 
-.outer-container {
+.header {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    padding: 8px 12px;
-    justify-content: space-between;
+    padding: 0 15px;
+    justify-content: center;
+    min-height: 52px;
 }
 
-.inner-container {
+.content {
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
-    background-color: #d1d9e1;
-    padding: 22px;
-    border-radius: 2px;
-    flex: 1;
-    box-shadow: 0 0 3px 0 #365876;
-
-    :global(.is-popup) & {
-        padding: 12px;
-        box-shadow: none;
-    }
-}
-
-.network {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    margin-left: 10px;
+    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: auto;
+    max-height: 100%;
 }
 
-.network-icon {
-    font-size: 10px;
-}
-
-.network-name {
-    color: #000;
-    font-weight: 300;
-    margin-left: 4px;
+.logo {
+    color: v.use(v.$colors-text-on-background);
 }

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

@@ -8,8 +8,8 @@ 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 NetworkSwitch from '_components/network-switch';
 import { useInitializedGuard, useAppDispatch } from '_hooks';
+import PageLayout from '_pages/layout';
 import { fetchAllOwnedObjects } from '_redux/slices/sui-objects';
 
 import st from './Home.module.scss';
@@ -34,19 +34,27 @@ const HomePage = () => {
     }, [guardChecking, dispatch]);
 
     return (
-        <Loading loading={guardChecking}>
-            <div className={st.container}>
-                <div className={st['outer-container']}>
-                    <Logo txt={true} />
-                    <NetworkSwitch />
+        <PageLayout limitToPopUpSize={true}>
+            <Loading loading={guardChecking}>
+                <div className={st.container}>
+                    <div className={st.header}>
+                        <Logo className={st.logo} txt={true} />
+                    </div>
+                    <div className={st.content}>
+                        <Header />
+                        <Outlet />
+                    </div>
                 </div>
-                <div className={st['inner-container']}>
-                    <Header />
-                    <Outlet />
-                </div>
-            </div>
-        </Loading>
+            </Loading>
+        </PageLayout>
     );
 };
 
 export default HomePage;
+export { default as NftsPage } from './nfts';
+export { default as SettingsPage } from './settings';
+export { default as TokensPage } from './tokens';
+export { default as TransactionDetailsPage } from './transaction-details';
+export { default as TransactionsPage } from './transactions';
+export { default as TransferCoinPage } from './transfer-coin';
+export { default as TransferNFTPage } from './transfer-nft';

wallet/src/ui/app/pages/home/settings/SettingsPage.module.scss

@@ -37,3 +37,7 @@
     align-self: stretch;
     margin-top: 6px;
 }
+
+.network {
+    position: relative;
+}

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

@@ -10,6 +10,7 @@ import ExplorerLink from '_components/explorer-link';
 import { ExplorerLinkType } from '_components/explorer-link/ExplorerLinkType';
 import ExternalLink from '_components/external-link';
 import LoadingIndicator from '_components/loading/LoadingIndicator';
+import Network from '_components/network-switch';
 import { useAppDispatch } from '_hooks';
 import { logout } from '_redux/slices/account';
 import { mintDemoNFT } from '_redux/slices/sui-objects';
@@ -57,6 +58,9 @@ function SettingsPage() {
     }, [mintStatus]);
     return (
         <div className={st.container}>
+            <div className={(st.item, st.network)}>
+                <Network />
+            </div>
             <div className={st.item}>
                 <ExplorerLink
                     className="btn"

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

@@ -11,7 +11,7 @@ import type { TxResultState } from '_redux/slices/txresults';
 
 import st from './Transactions.module.scss';
 
-function TransactionPage() {
+function TransactionsPage() {
     const dispatch = useAppDispatch();
     const txByAddress: TxResultState[] = useAppSelector(
         ({ txresults }) => txresults.latestTx
@@ -33,4 +33,4 @@ function TransactionPage() {
     ) : null;
 }
 
-export default memo(TransactionPage);
+export default memo(TransactionsPage);

wallet/src/ui/app/pages/transfer-coin/TransferCoinForm.tsx → wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm.tsx

@@ -15,7 +15,7 @@ import {
 } from '_redux/slices/sui-objects/Coin';
 import { balanceFormatOptions } from '_shared/formatting';
 
-import type { FormValues } from './';
+import type { FormValues } from '.';
 
 import st from './TransferCoinForm.module.scss';
 

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

@@ -5,25 +5,26 @@ import { Outlet } from 'react-router-dom';
 
 import Loading from '_components/loading';
 import Logo from '_components/logo';
-import { useFullscreenGuard, useInitializedGuard } from '_hooks';
+import { useInitializedGuard } from '_hooks';
+import PageLayout from '_pages/layout';
 
 import st from './InitializePage.module.scss';
 
 const InitializePage = () => {
     const checkingInitialized = useInitializedGuard(false);
-    const checkingFullscreen = useFullscreenGuard();
-    const guardChecking = checkingFullscreen || checkingInitialized;
     return (
-        <Loading loading={guardChecking}>
-            <div className={st.container}>
-                <div className={st.header}>
-                    <Logo size="normal" />
+        <PageLayout forceFullscreen={true}>
+            <Loading loading={checkingInitialized}>
+                <div className={st.container}>
+                    <div className={st.header}>
+                        <Logo size="normal" />
+                    </div>
+                    <div className={st.content}>
+                        <Outlet />
+                    </div>
                 </div>
-                <div className={st.content}>
-                    <Outlet />
-                </div>
-            </div>
-        </Loading>
+            </Loading>
+        </PageLayout>
     );
 };
 

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

@@ -0,0 +1,13 @@
+@use '_values/dimensions';
+
+.container {
+    display: flex;
+    align-items: center;
+    flex-flow: column nowrap;
+
+    &.forced-popup-dimensions,
+    :global(.is-popup) & {
+        width: dimensions.$popup-width;
+        height: dimensions.$popup-height;
+    }
+}

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

@@ -0,0 +1,39 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+import { memo } from 'react';
+
+import Loading from '_components/loading';
+import { useFullscreenGuard } from '_hooks';
+
+import type { ReactNode } from 'react';
+
+import st from './Layout.module.scss';
+
+export type PageLayoutProps = {
+    limitToPopUpSize?: boolean;
+    forceFullscreen?: boolean;
+    children: ReactNode | ReactNode[];
+};
+
+function PageLayout({
+    limitToPopUpSize = false,
+    forceFullscreen = false,
+    children,
+}: PageLayoutProps) {
+    const guardLoading = useFullscreenGuard(forceFullscreen);
+    return (
+        <Loading loading={guardLoading}>
+            <div
+                className={cl(st.container, {
+                    [st.forcedPopupDimensions]: limitToPopUpSize,
+                })}
+            >
+                {children}
+            </div>
+        </Loading>
+    );
+}
+
+export default memo(PageLayout);