feat: fix issues of new ui (#2708)

* fix: new ui issues * fix: Cannot find module * fix: new ui issues_159_182 * fix: issues_182 * fix: issues * fix: ui issues * fix: issue_159 * fix: issue_194 * fix: issue_175_193 * fix: updater * fix: errorMsg * fix: issue_159 * fix: test error * fix: bugs * fix: downloadUpdate
nervosnetwork · Jul 5, 2023 · 29c8594 · 29c8594 · github-actions · Jul 5, 2023
1 parent 6133f1f
commit 29c8594
Show file tree

Hide file tree

Showing 65 changed files with 777 additions and 388 deletions.
diff --git a/packages/neuron-ui/src/components/ClearCache/clearCache.module.scss b/packages/neuron-ui/src/components/ClearCache/clearCache.module.scss
@@ -6,21 +6,16 @@
 }
 
 .clearDialog {
-  @include dialog-container;
   height: 180px;
   width: 360px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  &::backdrop {
-    @include overlay;
-  }
   p {
-    margin-top: 24px;
     font-weight: 500;
     font-size: 16px;
-    color: var(--main-text-color)
+    color: var(--main-text-color);
   }
 }
 
@@ -40,19 +35,10 @@
     display: block;
     margin-bottom: 24px;
     color: var(--main-text-color);
+
+    .highlight {
+      color: var(--primary-color);
+    }
   }
-  input[type="checkbox"] {
-    display: none;
-    margin-right: 8px;
-  }
-  input[type="checkbox"]+span {
-    display: inline-block;
-    padding-left: 26px;
-    line-height: 20px;
-    background: url('../../widgets/Icons/Checkbox.svg') no-repeat left top;
-              user-select: none;
-  }
-  input[type="checkbox"]:checked+span {
-    background: url('../../widgets/Icons/CheckboxSelected.svg') no-repeat left top;
-  }
+  @include checkbox;
 }
diff --git a/packages/neuron-ui/src/components/ClearCache/index.tsx b/packages/neuron-ui/src/components/ClearCache/index.tsx
@@ -2,10 +2,11 @@ import React, { useEffect, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Spinner from 'widgets/Spinner'
 import Dialog from 'widgets/Dialog'
+import Toast from 'widgets/Toast'
 import { StateDispatch, addPopup } from 'states'
 import { clearCellCache } from 'services/remote'
 import { cacheClearDate } from 'services/localCache'
-import { isSuccessResponse, uniformTimeFormatter, useDialogWrapper } from 'utils'
+import { isSuccessResponse, uniformTimeFormatter } from 'utils'
 import styles from './clearCache.module.scss'
 
 const I18N_PATH = 'settings.clear-cache'
@@ -31,8 +32,7 @@ const ClearCacheDialog = ({
   const [isClearing, setIsClearing] = useState(false)
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [isRebuild, setIsRebuild] = useState(false)
-
-  const { isDialogOpen: isCleanDialogOpen, openDialog, closeDialog, dialogRef: clearDialogRef } = useDialogWrapper()
+  const [notice, setNotice] = useState('')
 
   const showDialog = useCallback(() => {
     setIsDialogOpen(true)
@@ -59,7 +59,6 @@ const ClearCacheDialog = ({
   }, [isDialogOpen, setIsRebuild])
 
   const handleSubmit = useCallback(() => {
-    openDialog()
     setIsDialogOpen(false)
     setIsClearing(true)
     clearCellCache({ resetIndexerData: isRebuild })
@@ -69,11 +68,11 @@ const ClearCacheDialog = ({
           const date = uniformTimeFormatter(Date.now()).substr(0, 10)
           cacheClearDate.save(date)
           setClearedDate(date)
+          setNotice(t('settings.data.clear-success'))
         }
       })
       .finally(() => {
         setIsClearing(false)
-        closeDialog()
       })
   }, [dispatch, setClearedDate, setIsDialogOpen, isRebuild])
 
@@ -91,36 +90,36 @@ const ClearCacheDialog = ({
         </button>
       </div>
 
-      {isCleanDialogOpen ? (
-        <dialog ref={clearDialogRef} className={styles.clearDialog}>
+      <Dialog show={isClearing} showHeader={false} showFooter={false}>
+        <div className={styles.clearDialog}>
           <Spinner size={3} />
           <p>{t('settings.data.clearing-cache')}</p>
-        </dialog>
-      ) : null}
+        </div>
+      </Dialog>
 
       <Dialog
         show={isDialogOpen}
         title={t(`${I18N_PATH}.title`)}
         onConfirm={handleSubmit}
         onCancel={dismissDialog}
-        confirmText={t(`${I18N_PATH}.buttons.ok`)}
+        confirmText={t('settings.data.confirm-clear')}
         confirmProps={{ id: IDs.submitClearCache }}
       >
         <div className={styles.options}>
           <label htmlFor={IDs.refreshCacheOption}>
             <input type="checkbox" id={IDs.refreshCacheOption} checked disabled />
-            <span>{t(`${I18N_PATH}.options.refresh.label`)}</span>
+            <span className={styles.highlight}>{t(`${I18N_PATH}.options.refresh.label`)}</span>
           </label>
-          {
-            hideRebuild ? null : (
-              <label htmlFor={IDs.rebuildCacheOption}>
-                <input type="checkbox" id={IDs.rebuildCacheOption} checked={isRebuild} onChange={toggleIsRebuild} />
-                <span>{t(`${I18N_PATH}.options.rebuild.label`)}</span>
-              </label>
-            )
-          }
+          {hideRebuild ? null : (
+            <label htmlFor={IDs.rebuildCacheOption}>
+              <input type="checkbox" id={IDs.rebuildCacheOption} checked={isRebuild} onChange={toggleIsRebuild} />
+              <span>{t(`${I18N_PATH}.options.rebuild.label`)}</span>
+            </label>
+          )}
         </div>
       </Dialog>
+
+      <Toast content={notice} onDismiss={() => setNotice('')} />
     </>
   )
 }

diff --git a/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss b/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss
@@ -14,7 +14,6 @@
       svg {
         margin: 4px 0 0 4px;
         cursor: pointer;
-
         g,
         path {
           fill: var(--main-text-color);
@@ -52,9 +51,12 @@
         height: 100%;
         background: var(--input-disabled-color);
         border: 1px solid var(--divide-line-color);
-        &:hover {
+        &:hover:not([disabled]) {
           color: var(--primary-color);
         }
+        &[disabled] {
+          cursor: not-allowed;
+        }
       }
     }
 
@@ -175,6 +177,10 @@
     line-height: 24px;
     color: var(--warn-text-color);
 
+    @media (prefers-color-scheme: dark) {
+      border: none;
+    }
+
     svg {
       margin-right: 4px;
       width: 14px;
@@ -196,5 +202,11 @@
     &:last-of-type {
       margin-left: 24px;
     }
+    svg {
+      g,
+      path {
+        fill: var(--primary-color);
+      }
+    }
   }
 }
diff --git a/packages/neuron-ui/src/components/DataSetting/hooks.ts b/packages/neuron-ui/src/components/DataSetting/hooks.ts
@@ -18,6 +18,8 @@ export const useDataPath = () => {
   const [prevPath, setPrevPath] = useState<string>()
   const [currentPath, setCurrentPath] = useState<string | undefined>()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [faidMessage, setFaidMessage] = useState('')
+
   useDidMount(() => {
     getCkbNodeDataPath().then(res => {
       if (isSuccessResponse(res)) {
@@ -49,6 +51,7 @@ export const useDataPath = () => {
   }, [setIsDialogOpen, type])
   const onConfirm = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
+      setFaidMessage('')
       const { dataset } = e.currentTarget
       setIsSaving(true)
       setSavingType(dataset.syncType)
@@ -60,6 +63,8 @@ export const useDataPath = () => {
           if (isSuccessResponse(res)) {
             setPrevPath(currentPath)
             setIsDialogOpen(false)
+          } else {
+            setFaidMessage(typeof res.message === 'string' ? res.message : res.message.content!)
           }
         })
         .finally(() => {
@@ -78,6 +83,8 @@ export const useDataPath = () => {
     isSaving,
     savingType,
     isDialogOpen,
+    faidMessage,
+    setFaidMessage,
   }
 }
 

diff --git a/packages/neuron-ui/src/components/DataSetting/index.tsx b/packages/neuron-ui/src/components/DataSetting/index.tsx
@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useState, useMemo } from 'react'
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import ClearCache from 'components/ClearCache'
 import { ReactComponent as AttentionOutline } from 'widgets/Icons/AttentionOutline.svg'
 import { useDispatch, useState as useGlobalState } from 'states'
 import { shell } from 'electron'
-import Spinner from 'widgets/Spinner'
 import { getIsCkbRunExternal } from 'services/remote'
 import { isSuccessResponse } from 'utils'
 import Tooltip from 'widgets/Tooltip'
 import Dialog from 'widgets/Dialog'
+import AlertDialog from 'widgets/AlertDialog'
 import { LIGHT_NETWORK_TYPE } from 'utils/const'
 import { useDataPath } from './hooks'
 
@@ -42,7 +42,20 @@ const PathItem = ({
 const DataSetting = () => {
   const dispatch = useDispatch()
   const [t] = useTranslation()
-  const { onSetting, prevPath, currentPath, isDialogOpen, onCancel, onConfirm, isSaving, savingType } = useDataPath()
+  const {
+    onSetting,
+    prevPath,
+    currentPath,
+    isDialogOpen,
+    onCancel,
+    onConfirm,
+    isSaving,
+    savingType,
+    faidMessage,
+    setFaidMessage,
+  } = useDataPath()
+
+  const resyncRef = useRef<HTMLButtonElement | null>(null)
 
   const openPath = useCallback(() => {
     if (prevPath) {
@@ -71,15 +84,25 @@ const DataSetting = () => {
     <>
       <div className={styles.root}>
         <div className={styles.leftContainer}>
-          <div className={styles.label}>
-            <div>{t('settings.data.ckb-node-data')}</div>
-            <Tooltip tip={<p className={styles.tooltip}>{t('settings.data.disabled-set-path')}</p>} showTriangle>
-              <AttentionOutline />
-            </Tooltip>
-          </div>
+          {isLightClient ? null : (
+            <div className={styles.label}>
+              <div>{t('settings.data.ckb-node-data')}</div>
+              <Tooltip
+                placement="top"
+                tip={<p className={styles.tooltip}>{t('settings.data.disabled-set-path')}</p>}
+                showTriangle
+              >
+                <AttentionOutline />
+              </Tooltip>
+            </div>
+          )}
           <div className={styles.label}>
             <div>{t('settings.data.cache')}</div>
-            <Tooltip tip={<p className={styles.tooltip}>{t('settings.data.clear-cache-description')}</p>} showTriangle>
+            <Tooltip
+              placement="top"
+              tip={<p className={styles.tooltip}>{t('settings.data.clear-cache-description')}</p>}
+              showTriangle
+            >
               <AttentionOutline />
             </Tooltip>
           </div>
@@ -107,20 +130,16 @@ const DataSetting = () => {
 
           <div className={styles.footer}>
             <Button
+              ref={resyncRef}
               disabled={isSaving}
               className={styles.footerBtn}
               data-sync-type="resync"
               data-resync="true"
               label={t('settings.data.re-sync')}
               type="primary"
               onClick={onConfirm}
-            >
-              {isSaving && savingType === 'resync' ? (
-                <Spinner label={t('settings.data.re-sync')} labelPosition="right" />
-              ) : (
-                t('settings.data.re-sync')
-              )}
-            </Button>
+              loading={isSaving && savingType === 'resync'}
+            />
 
             <Button
               disabled={isSaving}
@@ -129,16 +148,22 @@ const DataSetting = () => {
               label={t('settings.data.move-data-finish')}
               type="primary"
               onClick={onConfirm}
-            >
-              {isSaving && savingType === 'move' ? (
-                <Spinner label={t('settings.data.move-data-finish')} labelPosition="right" />
-              ) : (
-                t('settings.data.move-data-finish')
-              )}
-            </Button>
+              loading={isSaving && savingType === 'move'}
+            />
           </div>
         </div>
       </Dialog>
+
+      <AlertDialog
+        show={!!faidMessage}
+        title={t('settings.data.ckb-node-data')}
+        message={faidMessage}
+        type="warning"
+        onCancel={() => setFaidMessage('')}
+        onOk={() => {
+          resyncRef?.current?.click()
+        }}
+      />
     </>
   )
 }

diff --git a/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss b/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss
@@ -36,6 +36,7 @@ $action-button-width: 11.25rem;
 }
 
 .install {
+  width: 648px;
   display: grid;
   grid-template:
     'note action' auto
@@ -97,6 +98,7 @@ $action-button-width: 11.25rem;
 }
 
 .processWrap {
+  width: 648px;
   .title {
     font-weight: 500;
     font-size: 16px;