Add page container component for all page.

packages/neuron-ui/src/components/Overview/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import Balance from 'components/Balance'
-
+import PageContainer from 'components/PageContainer'
 import { showTransactionDetails } from 'services/remote'
 import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states'
 
@@ -18,6 +18,7 @@ import {
   getCurrentUrl,
   getSyncStatus,
   nftFormatter,
+  useFirstLoadApp,
 } from 'utils'
 
 import { UANTokenName, UANTonkenSymbol } from 'components/UANDisplay'
@@ -56,6 +57,7 @@ const genTypeLabel = (
 
 const Overview = () => {
   const {
+    app: { pageNotice },
     wallet: { id, balance = '' },
     chain: {
       syncState: { cacheTipBlockNumber, bestKnownBlockNumber, bestKnownBlockTimestamp },
@@ -68,6 +70,7 @@ const Overview = () => {
   const dispatch = useDispatch()
   const [t] = useTranslation()
   const navigate = useNavigate()
+  useFirstLoadApp(dispatch)
 
   const syncStatus = getSyncStatus({
     bestKnownBlockNumber,
@@ -267,28 +270,30 @@ const Overview = () => {
   }, [recentItems, cacheTipBlockNumber, bestKnownBlockNumber, t, onRecentActivityDoubleClick])
 
   return (
-    <div className={styles.overview}>
-      <h1 className={styles.pageTitle}>{t('navbar.overview')}</h1>
-      <div className={styles.balance}>
-        <Balance balance={balance} connectionStatus={connectionStatus} syncStatus={syncStatus} />
-      </div>
+    <PageContainer head={t('navbar.overview')} notice={pageNotice}>
+      <div className={styles.overview}>
+        <h1 className={styles.pageTitle}>{t('navbar.overview')}</h1>
+        <div className={styles.balance}>
+          <Balance balance={balance} connectionStatus={connectionStatus} syncStatus={syncStatus} />
+        </div>
 
-      <h2 className={styles.recentActivitiesTitle}>{t('overview.recent-activities')}</h2>
-      {items.length ? (
-        <>
-          {RecentActivites}
-          {items.length > 10 ? (
-            <div className={styles.linkToHistory}>
-              <span role="link" onClick={onGoToHistory} onKeyPress={() => {}} tabIndex={0}>
-                {t('overview.more')}
-              </span>
-            </div>
-          ) : null}
-        </>
-      ) : (
-        <div className={styles.noActivities}>{t('overview.no-recent-activities')}</div>
-      )}
-    </div>
+        <h2 className={styles.recentActivitiesTitle}>{t('overview.recent-activities')}</h2>
+        {items.length ? (
+          <>
+            {RecentActivites}
+            {items.length > 10 ? (
+              <div className={styles.linkToHistory}>
+                <span role="link" onClick={onGoToHistory} onKeyPress={() => {}} tabIndex={0}>
+                  {t('overview.more')}
+                </span>
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <div className={styles.noActivities}>{t('overview.no-recent-activities')}</div>
+        )}
+      </div>
+    </PageContainer>
   )
 }
 

packages/neuron-ui/src/components/PageContainer/index.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ErrorCode, getExplorerUrl, isMainnet, isSuccessResponse, localNumberFormatter } from 'utils'
+import Alert from 'widgets/Alert'
+import { Close } from 'widgets/Icons/icon'
+import { ReactComponent as Sun } from 'widgets/Icons/Sun.svg'
+import { ReactComponent as Moon } from 'widgets/Icons/Moon.svg'
+import SyncStatusComponent from 'components/SyncStatus'
+import { AppActions, useDispatch, useState as useGlobalState } from 'states'
+import { isDark, openExternal, setTheme as setThemeAPI } from 'services/remote'
+import Tooltip from 'widgets/Tooltip'
+import { Migrate } from 'services/subjects'
+import styles from './pageContainer.module.scss'
+
+const PageHeadNotice = ({ notice }: { notice: State.PageNotice }) => {
+  const [t] = useTranslation()
+  return (
+    <Alert status={notice.status} className={styles.notice} key={notice.i18nKey}>
+      {t(notice.i18nKey)}
+    </Alert>
+  )
+}
+
+const getNetworkTypeLable = (type: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string) => {
+  switch (type) {
+    case 'ckb': {
+      return 'settings.network.mainnet'
+    }
+    case 'ckb_testnet': {
+      return 'settings.network.testnet'
+    }
+    default: {
+      return 'settings.network.devnet'
+    }
+  }
+}
+
+type ComponentProps = { head: React.ReactNode; notice?: State.PageNotice; className?: string }
+const PageContainer: React.FC<ComponentProps> = props => {
+  const {
+    app: { showWaitForFullySynced },
+    chain: {
+      syncState: { bestKnownBlockNumber, cacheTipBlockNumber, syncStatus, isLookingValidTarget, validTarget },
+      connectionStatus,
+      networkID,
+    },
+    settings: { networks },
+  } = useGlobalState()
+  const { children, head, notice, className } = props
+  const [t] = useTranslation()
+  const dispatch = useDispatch()
+  const closeSyncNotice = useCallback(() => {
+    dispatch({
+      type: AppActions.HideWaitForFullySynced,
+    })
+  }, [dispatch])
+  const [theme, setTheme] = useState<'dark' | 'light'>()
+  useEffect(() => {
+    isDark().then(res => {
+      if (isSuccessResponse(res)) {
+        setTheme(res.result ? 'dark' : 'light')
+      }
+    })
+  })
+  const onSetTheme = useCallback(() => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setThemeAPI(newTheme).then(res => {
+      if (isSuccessResponse(res)) {
+        setTheme(newTheme)
+      }
+    })
+  }, [theme])
+  const network = useMemo(() => networks.find(n => n.id === networkID), [networks, networkID])
+  const netWorkTypeLabel = useMemo(() => (network ? getNetworkTypeLable(network.chain) : ''), [network])
+  const [syncPercents, syncBlockNumbers] = useMemo(() => {
+    const bestBlockNumber = Math.max(cacheTipBlockNumber, bestKnownBlockNumber)
+    return [
+      bestBlockNumber > 0 && cacheTipBlockNumber > 0
+        ? `${+((cacheTipBlockNumber * 100) / bestBlockNumber).toFixed(2)}%`
+        : '0',
+      `${cacheTipBlockNumber >= 0 ? localNumberFormatter(cacheTipBlockNumber) : '-'} / ${
+        bestBlockNumber >= 0 ? localNumberFormatter(bestBlockNumber) : '-'
+      }`,
+    ]
+  }, [cacheTipBlockNumber, bestKnownBlockNumber])
+  const onOpenValidTarget = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.stopPropagation()
+      const explorerUrl = getExplorerUrl(isMainnet(networks, networkID))
+      openExternal(`${explorerUrl}/block/${validTarget}`)
+    },
+    [networks, networkID, validTarget]
+  )
+  const [isMigrate, setIsMigrate] = useState(false)
+  useEffect(() => {
+    const migrateSubscription = Migrate.subscribe(migrateStatus => {
+      setIsMigrate(migrateStatus === 'migrating')
+    })
+    return () => {
+      migrateSubscription.unsubscribe()
+    }
+  }, [])
+  return (
+    <div className={`${styles.page} ${className || ''}`}>
+      <div className={styles.head}>
+        {head}
+        <div className={styles.rightContent}>
+          <Tooltip tip={t(theme === 'dark' ? 'common.switch-to-light' : 'common.switch-to-dark')} showTriangle>
+            {theme === 'dark' ? <Sun onClick={onSetTheme} /> : <Moon onClick={onSetTheme} />}
+          </Tooltip>
+          <span className={styles.network}>
+            {network ? (
+              <>
+                {t(netWorkTypeLabel)}
+                &nbsp;
+                <span className={styles.name}>{network.name}</span>
+              </>
+            ) : (
+              t('settings.setting-tabs.network')
+            )}
+          </span>
+          <div className={styles.syncStatus}>
+            <SyncStatusComponent
+              syncStatus={syncStatus}
+              connectionStatus={connectionStatus}
+              syncPercents={syncPercents}
+              syncBlockNumbers={syncBlockNumbers}
+              isLookingValidTarget={isLookingValidTarget}
+              onOpenValidTarget={onOpenValidTarget}
+              isMigrate={isMigrate}
+            />
+          </div>
+        </div>
+        {notice && <PageHeadNotice notice={notice} />}
+      </div>
+      {showWaitForFullySynced && (
+        <Alert status="warn" className={styles.syncNotification}>
+          {t(`messages.codes.${ErrorCode.WaitForFullySynced}`)}
+          <Close className={styles.close} onClick={closeSyncNotice} />
+        </Alert>
+      )}
+      {children}
+    </div>
+  )
+}
+
+PageContainer.displayName = 'PageContainer'
+export default PageContainer

packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss

@@ -0,0 +1,102 @@
+.page {
+  background: var(--main-background-color);
+  color: var(--main-text-color);
+  padding: 0 24px 24px;
+  position: relative;
+
+  .head {
+    display: flex;
+    align-items: center;
+    height: 72px;
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    justify-content: space-between;
+
+    .rightContent {
+      display: flex;
+      align-items: center;
+
+      .network {
+        font-weight: 500;
+        color: #666;
+        font-size: 14px;
+        margin: 0 8px;
+      }
+
+      .syncStatus {
+        height: 32px;
+        background-color: #FFFFFF99;
+        color: var(--main-text-color);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 400;
+        padding: 0 10px;
+        z-index: 11;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: #2D3534;
+        }
+      }
+    }
+  }
+}
+
+@keyframes hidden {
+  from {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    visibility: visible;
+    opacity: 0;
+  }
+}
+
+.notice {
+  position: absolute;
+  background-color: var(--notice-background-color);
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 12px;
+  font-weight: 500;
+  font-size: 14px;
+  text-align: center;
+  min-width: 300px;
+  padding: 14px 36px;
+  animation: 2s hidden 1 ease-in-out;
+  visibility: hidden;
+  justify-content: center;
+  & > svg {
+    margin-right: 4px;
+  }
+}
+
+.syncNotification {
+  background: var(--warn-background-color);
+  border-radius: 16px;
+  padding: 10px 0;
+  font-weight: 500;
+  font-size: 14px;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 16px;
+  z-index: 10;
+
+  & > svg {
+    margin-right: 4px;
+  }
+
+  .close {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+}