wallet-ext: staging api env (MystenLabs#2381)

my0419 · Jun 2, 2022 · 8bb4de5 · 8bb4de5
1 parent 9e32d85
commit 8bb4de5
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 12 deletions.
diff --git a/wallet/configs/environment/.env.defaults b/wallet/configs/environment/.env.defaults
@@ -1,8 +1,10 @@
 # Default values for some env variables. Use .env to add/change variables for the
 # current environment.
 
-API_ENV=devNet
-API_ENDPOINT_LOCAL=http://127.0.0.1:5001
-API_ENDPOINT_DEV_NET=https://gateway.devnet.sui.io
+API_ENV=staging
+API_ENDPOINT_LOCAL=http://127.0.0.1:5001/
+API_ENDPOINT_DEV_NET=https://gateway.devnet.sui.io/
+API_ENDPOINT_STAGING=https://gateway.staging.sui.io/
 EXPLORER_URL_LOCAL=http://localhost:8080/
 EXPLORER_URL_DEV_NET=https://explorer.devnet.sui.io/
+EXPLORER_URL_STAGING=https://explorer.staging.sui.io/
diff --git a/wallet/src/ui/app/ApiProvider.ts b/wallet/src/ui/app/ApiProvider.ts
@@ -8,11 +8,23 @@ import type { Ed25519Keypair } from '@mysten/sui.js';
 export enum API_ENV {
     local = 'local',
     devNet = 'devNet',
+    staging = 'staging',
 }
 
+type EnvInfo = {
+    name: string;
+    color: string;
+};
+export const API_ENV_TO_INFO: Record<API_ENV, EnvInfo> = {
+    [API_ENV.local]: { name: 'Local', color: '#000' },
+    [API_ENV.devNet]: { name: 'DevNet', color: '#666' },
+    [API_ENV.staging]: { name: 'Staging', color: '#999' },
+};
+
 export const ENV_TO_API: Record<API_ENV, string | undefined> = {
     [API_ENV.local]: process.env.API_ENDPOINT_LOCAL,
     [API_ENV.devNet]: process.env.API_ENDPOINT_DEV_NET,
+    [API_ENV.staging]: process.env.API_ENDPOINT_STAGING,
 };
 
 function getDefaultApiEnv() {

diff --git a/wallet/src/ui/app/components/logo/Logo.module.scss b/wallet/src/ui/app/components/logo/Logo.module.scss
@@ -1,5 +1,7 @@
 .container {
     display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
 .image {
@@ -27,3 +29,25 @@
         height: 120px;
     }
 }
+
+.txt {
+    margin-left: 5px;
+    font-weight: 700;
+    color: #6fbcf0;
+
+    &.normal {
+        font-size: 15px;
+    }
+
+    &.big {
+        font-size: 20px;
+    }
+
+    &.bigger {
+        font-size: 25px;
+    }
+
+    &.huge {
+        font-size: 30px;
+    }
+}
diff --git a/wallet/src/ui/app/components/logo/index.tsx b/wallet/src/ui/app/components/logo/index.tsx
@@ -9,12 +9,14 @@ const cl = classnames.bind(st);
 
 type LogoProps = {
     size?: 'normal' | 'big' | 'bigger' | 'huge';
+    txt?: boolean;
 };
 
-const Logo = ({ size = 'normal' }: LogoProps) => {
+const Logo = ({ size = 'normal', txt = false }: LogoProps) => {
     return (
         <div className={cl('container')}>
             <span className={cl('image', size)} />
+            {txt ? <span className={cl('txt', size)}>SUI wallet</span> : null}
         </div>
     );
 };

diff --git a/wallet/src/ui/app/pages/home/Home.module.scss b/wallet/src/ui/app/pages/home/Home.module.scss
@@ -5,11 +5,54 @@
 .container {
     display: flex;
     flex-flow: column nowrap;
+    width: 400px;
+    padding-bottom: 12px;
+    min-height: calc(100vh - 12px);
+
+    :global(.is-popup) & {
+        min-height: 400px;
+        width: 350px;
+        padding-bottom: 0;
+    }
+}
+
+.outer-container {
+    display: flex;
+    flex-flow: row nowrap;
     align-items: center;
-    width: 350px;
-    padding: 12px;
+    padding: 8px 12px;
+    justify-content: space-between;
+}
+
+.inner-container {
+    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) & {
-        min-height: 300px;
+        padding: 12px;
+        box-shadow: none;
     }
 }
+
+.network {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-left: 10px;
+}
+
+.network-icon {
+    font-size: 10px;
+}
+
+.network-name {
+    color: #000;
+    font-weight: 300;
+    margin-left: 4px;
+}
diff --git a/wallet/src/ui/app/pages/home/index.tsx b/wallet/src/ui/app/pages/home/index.tsx
@@ -1,13 +1,16 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Outlet } from 'react-router-dom';
 import { of, filter, switchMap, from, defer, repeat } from 'rxjs';
 
+import { API_ENV_TO_INFO } from '_app/ApiProvider';
+import BsIcon from '_components/bs-icon';
 import Header from '_components/header';
 import Loading from '_components/loading';
-import { useInitializedGuard, useAppDispatch } from '_hooks';
+import Logo from '_components/logo';
+import { useInitializedGuard, useAppDispatch, useAppSelector } from '_hooks';
 import { fetchAllOwnedObjects } from '_redux/slices/sui-objects';
 
 import st from './Home.module.scss';
@@ -30,11 +33,35 @@ const HomePage = () => {
             .subscribe();
         return () => sub.unsubscribe();
     }, [guardChecking, dispatch]);
+    const selectedApiEnv = useAppSelector(({ app }) => app.apiEnv);
+    const netColor = useMemo(
+        () =>
+            selectedApiEnv
+                ? { color: API_ENV_TO_INFO[selectedApiEnv].color }
+                : {},
+        [selectedApiEnv]
+    );
     return (
         <Loading loading={guardChecking}>
             <div className={st.container}>
-                <Header />
-                <Outlet />
+                <div className={st['outer-container']}>
+                    <Logo txt={true} />
+                    {selectedApiEnv ? (
+                        <div className={st.network} style={netColor}>
+                            <BsIcon
+                                icon="circle-fill"
+                                className={st['network-icon']}
+                            />
+                            <span className={st['network-name']}>
+                                {API_ENV_TO_INFO[selectedApiEnv].name}
+                            </span>
+                        </div>
+                    ) : null}
+                </div>
+                <div className={st['inner-container']}>
+                    <Header />
+                    <Outlet />
+                </div>
             </div>
         </Loading>
     );

diff --git a/wallet/src/ui/app/redux/slices/app/index.ts b/wallet/src/ui/app/redux/slices/app/index.ts
@@ -4,15 +4,19 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 import { AppType } from './AppType';
+import { DEFAULT_API_ENV } from '_app/ApiProvider';
 
 import type { PayloadAction } from '@reduxjs/toolkit';
+import type { API_ENV } from '_app/ApiProvider';
 
 type AppState = {
     appType: AppType;
+    apiEnv: API_ENV | null;
 };
 
 const initialState: AppState = {
     appType: AppType.unknown,
+    apiEnv: DEFAULT_API_ENV,
 };
 
 const slice = createSlice({
@@ -21,10 +25,13 @@ const slice = createSlice({
         initAppType: (state, { payload }: PayloadAction<AppType>) => {
             state.appType = payload;
         },
+        setApiEnv: (state, { payload }: PayloadAction<API_ENV>) => {
+            state.apiEnv = payload;
+        },
     },
     initialState,
 });
 
-export const { initAppType } = slice.actions;
+export const { initAppType, setApiEnv } = slice.actions;
 
 export default slice.reducer;
diff --git a/wallet/src/ui/app/redux/slices/sui-objects/Explorer.ts b/wallet/src/ui/app/redux/slices/sui-objects/Explorer.ts
@@ -8,6 +8,7 @@ import type { ObjectId, TransactionDigest } from '@mysten/sui.js';
 const API_ENV_TO_EXPLORER_URL: Record<API_ENV, string | undefined> = {
     [API_ENV.local]: process.env.EXPLORER_URL_LOCAL,
     [API_ENV.devNet]: process.env.EXPLORER_URL_DEV_NET,
+    [API_ENV.staging]: process.env.EXPLORER_URL_STAGING,
 };
 
 function getDefaultUrl() {