feat: Create new wallet for new ui

.github/workflows/unit_tests.yml

@@ -40,7 +40,7 @@ jobs:
           path: |
             node_modules
             */*/node_modules
-          key: 2022-05-07-${{ runner.os }}-${{ hashFiles('**/yarn.lock')}}
+          key: 2022-09-09-${{ runner.os }}-${{ hashFiles('**/yarn.lock')}}
 
       - name: Install libudev
         if: matrix.os == 'ubuntu-20.04'

packages/neuron-ui/public/css/fonts.css

@@ -7,3 +7,15 @@
   font-family: 'SourceCodePro-Regular';
   src: url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
 }
+
+@font-face {
+  font-family: 'ProximaNova-Regular';
+  src: url('../fonts/ProximaNova-Regular.otf') format('opentype'),
+      url('../fonts//Proximanova-Regular.ttf') format('opentype');
+}
+
+@font-face {
+  font-family: 'ProximaNova-Semibold';
+  src: url('../fonts/ProximaNova-Semibold.otf') format('opentype'),
+      url('../fonts/ProximaNova-Semibold.ttf') format('opentype');
+}

packages/neuron-ui/src/components/ImportHardware/common.ts

@@ -16,7 +16,7 @@ export interface Model {
 }
 
 export interface ImportHardwareState {
-  model?: Model
+  model?: Model | null
   extendedPublicKey?: {
     publicKey: string
     chainCode: string

packages/neuron-ui/src/components/ImportHardware/confirming.tsx

@@ -45,7 +45,7 @@ const Confirming = ({ dispatch }: { dispatch: React.Dispatch<ActionType> }) => {
         </span>
         <div className={styles.message}>{t('import-hardware.actions.confirm')}</div>
       </section>
-      <footer className={styles.footer}>
+      <footer className={styles.dialogFooter}>
         <Button type="cancel" label={t('import-hardware.actions.back')} onClick={onBack} />
       </footer>
     </div>

packages/neuron-ui/src/components/ImportHardware/detect-device.tsx

@@ -2,9 +2,9 @@ import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import { getDevices, getDeviceFirmwareVersion, getDeviceCkbAppVersion, connectDevice } from 'services/remote'
-import { isSuccessResponse, useDidMount, errorFormatter } from 'utils'
+import { isSuccessResponse, errorFormatter, useDidMount } from 'utils'
 import { ReactComponent as SuccessInfo } from 'widgets/Icons/SuccessInfo.svg'
-import { ReactComponent as FailedInfo } from 'widgets/Icons/FailedInfo.svg'
+import { Error } from 'widgets/Icons/icon'
 import {
   CkbAppNotFoundException,
   ConnectFailedException,
@@ -16,30 +16,28 @@ import { ImportStep, ActionType, Model } from './common'
 import styles from './findDevice.module.scss'
 
 const Info = (
-  { isError, isScaning, msg }: { isError?: boolean; isScaning?: boolean; msg: string } = {
+  { isError, isWaiting, msg }: { isError?: boolean; isWaiting?: boolean; msg: string } = {
     isError: false,
-    isScaning: false,
+    isWaiting: false,
     msg: '',
   }
 ) => {
-  const [t] = useTranslation()
   if (isError) {
     return (
       <>
-        <div className={styles.info}>
+        <div className={styles.errorInfo}>
           <span>
-            <FailedInfo />
+            <Error type="error" />
           </span>
           <span className={styles.error}>{msg}</span>
         </div>
-        <div className={styles.aborted}>{t('import-hardware.abort')}</div>
       </>
     )
   }
   return (
     <div className={styles.info}>
-      <span>{isScaning ? null : <SuccessInfo />}</span>
-      <span className={isScaning ? styles.scaning : ''}>{msg}</span>
+      <span>{isWaiting ? null : <SuccessInfo />}</span>
+      <span>{msg}</span>
     </div>
   )
 }
@@ -117,17 +115,16 @@ const DetectDevice = ({ dispatch, model }: { dispatch: React.Dispatch<ActionType
       <section className={styles.detect}>
         <h3 className={styles.model}>{productName}</h3>
         {errorMsg ? <Info isError msg={errorMsg} /> : null}
-        {scaning ? <Info isScaning={scaning} msg={t('import-hardware.waiting')} /> : null}
+        {scaning ? <Info isWaiting={scaning} msg={t('import-hardware.waiting')} /> : null}
         {firmwareVersion && !errorMsg && !scaning ? (
           <Info msg={t('import-hardware.firmware-version', { version: firmwareVersion })} />
         ) : null}
         {appVersion ? <Info msg={t('import-hardware.app-version', { version: appVersion })} /> : null}
       </section>
-      <footer className={styles.footer}>
-        <Button type="cancel" label={t('import-hardware.actions.back')} onClick={onBack} />
-        {errorMsg ? (
-          <Button type="ok" label={t('import-hardware.actions.rescan')} onClick={findDevice} />
-        ) : (
+      <footer className={styles.dialogFooter}>
+        <Button type="cancel" label={t('import-hardware.actions.cancel')} onClick={onBack} />
+        {!scaning && errorMsg && <Button type="ok" label={t('import-hardware.actions.rescan')} onClick={findDevice} />}
+        {!scaning && !errorMsg && (
           <Button type="submit" label={t('import-hardware.actions.next')} onClick={onNext} disabled={!ready} />
         )}
       </footer>

packages/neuron-ui/src/components/ImportHardware/findDevice.module.scss

@@ -1,26 +1,47 @@
 @import '../../styles/mixin.scss';
 
-.dialog {
-  @include dialog-container;
-  padding: 30px 50px;
-  min-height: 245px;
-  width: 600px;
+.importHardwareRoot {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 96px;
 
   .container {
-    height: 220px;
     display: flex;
     flex-direction: column;
+    align-items: center;
 
-    .main {
-      flex: 1;
+    .selectDevice {
+      display: flex;
+      flex-direction: column;
+
+      input {
+        text-align: left;
+      }
+    }
+
+    .attention {
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--notice-text-color);
+      display: flex;
+      align-items: center;
+        & > svg {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+        }
     }
 
     .action {
-      @extend .main;
+      flex: 1;
       text-align: center;
       .message {
         margin-top: 26px;
         font-weight: bold;
+        color: var(--main-text-color);
       }
 
       +.footer {
@@ -40,29 +61,33 @@
     }
 
     .detect {
-      @extend .main;
-      margin-left: 20px;
+      text-align: center;
     }
   }
 
-  .model {
-    font-weight: bold;
-    font-size: 14px;
-    margin-top: 0;
-  }
-
   &::backdrop {
     @include overlay;
   }
 
   .footer {
-    @include dialog-footer;
+    @include form-footer;
     flex-shrink: 0;
 
     button {
       margin-left: 10px;
     }
   }
+
+  .dialogFooter {
+    @include dialog-footer;
+    margin-top: 45px;
+
+    button {
+      &:not(:first-child) {
+        margin-left: 22px;
+      }
+    }
+  }
 }
 
 @keyframes rotating {
@@ -74,10 +99,12 @@
   }
 }
 
+.errorInfo,
 .info {
-  font-size: 13px;
-  color: #888;
+  font-size: 14px;
+  color: var(--secondary-text-color);
   display: flex;
+  margin-top: 19px;
 
   svg {
     width: 14px;
@@ -88,27 +115,45 @@
   }
 
   .error {
-    color: #d03a3a;
+    color: var(--error-color);
     word-wrap:break-word;
   }
+}
 
-  .scaning {
-    margin-left: 18px;
-  }
+.errorInfo {
+  font-size: 16px;
+  word-break: break-all;
 }
 
 .aborted {
-  font-size: 13px;
-  color: #888;
-  position: relative;
-  left: 18px;
+  font-size: 14px;
+  color: var(--secondary-text-color);
+  margin: 8px 0 0;
 }
 
 .title {
-  font-size: 1.125rem;
-  line-height: 1.375rem;
-  font-weight: bold;
-  letter-spacing: 0.9px;
-  margin: 0;
-  margin-bottom: 26px;
+  @include header-title;
+  margin-bottom: 8px;
+}
+
+.dialog {
+  @include dialog-container;
+
+  .container {
+    .title {
+      font-size: 20px;
+    }
+
+    .model {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 18px;
+      margin-top: 12px;
+      color: var(--main-text-color);
+    }
+  }
+}
+
+.alert {
+  width: 100%;
 }

packages/neuron-ui/src/components/ImportHardware/import-error.tsx

@@ -32,7 +32,7 @@ const ImportError = ({
           <CopyZone content={errorMsg}>{errorMsg}</CopyZone>
         </div>
       </section>
-      <footer className={styles.footer}>
+      <footer className={styles.dialogFooter}>
         <Button type="cancel" label={t('import-hardware.actions.back')} onClick={onBack} />
       </footer>
     </div>

packages/neuron-ui/src/components/ImportHardware/import-success.tsx

@@ -20,7 +20,7 @@ const ImportSuccess = ({ dispatch }: { dispatch: React.Dispatch<ActionType> }) =
         </span>
         <div className={styles.message}>{t('import-hardware.actions.success')}</div>
       </section>
-      <footer className={styles.footer}>
+      <footer className={styles.dialogFooter}>
         <Button type="cancel" label={t('import-hardware.actions.close')} onClick={onClose} />
       </footer>
     </div>

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

@@ -1,5 +1,5 @@
-import React, { useRef, useEffect, useReducer } from 'react'
-import Experimental from 'widgets/ExperimentalRibbon'
+import React, { useEffect, useReducer } from 'react'
+import { useDialogWrapper } from 'utils'
 import Comfirming from './confirming'
 import ImportError from './import-error'
 import SelectModel from './select-model'
@@ -16,17 +16,41 @@ const reducer: React.Reducer<ImportHardwareState, ActionType> = (state, action)
 
 const Content = () => {
   const [importHardwareStates, dispatch] = useReducer(reducer, { step: ImportStep.ImportHardware })
+  const { dialogRef, openDialog, closeDialog } = useDialogWrapper()
+  useEffect(() => {
+    if (!dialogRef) {
+      return
+    }
+    if (
+      importHardwareStates.step === ImportStep.ImportHardware ||
+      importHardwareStates.step === ImportStep.NameWallet
+    ) {
+      closeDialog()
+    } else {
+      openDialog()
+    }
+  }, [importHardwareStates.step, dialogRef, closeDialog, openDialog])
   switch (importHardwareStates.step) {
     case ImportStep.ImportHardware:
-      return <SelectModel dispatch={dispatch} />
     case ImportStep.DetectDevice:
-      return <DetectDevice dispatch={dispatch} model={importHardwareStates.model!} />
     case ImportStep.Comfirming:
-      return <Comfirming dispatch={dispatch} />
     case ImportStep.Error:
-      return <ImportError dispatch={dispatch} error={importHardwareStates.error} />
     case ImportStep.Success:
-      return <ImportSuccess dispatch={dispatch} />
+      return (
+        <>
+          <SelectModel dispatch={dispatch} />
+          <dialog ref={dialogRef} className={styles.dialog}>
+            {ImportStep.DetectDevice === importHardwareStates.step && (
+              <DetectDevice dispatch={dispatch} model={importHardwareStates.model!} />
+            )}
+            {ImportStep.Comfirming === importHardwareStates.step && <Comfirming dispatch={dispatch} />}
+            {ImportStep.Error === importHardwareStates.step && (
+              <ImportError dispatch={dispatch} error={importHardwareStates.error} />
+            )}
+            {ImportStep.Success === importHardwareStates.step && <ImportSuccess dispatch={dispatch} />}
+          </dialog>
+        </>
+      )
     case ImportStep.NameWallet:
       return (
         <NameWallet
@@ -41,18 +65,10 @@ const Content = () => {
 }
 
 const ImportHardware = () => {
-  const dialogRef = useRef<HTMLDialogElement | null>(null)
-  const EXPERIMENTAL_TAG = 'import-hardware'
-
-  useEffect(() => {
-    dialogRef.current!.showModal()
-  }, [])
-
   return (
-    <dialog ref={dialogRef} className={styles.dialog}>
-      <Experimental tag={EXPERIMENTAL_TAG} showRibbon={false} message="messages.experimental-message-hardware" />
+    <div className={styles.importHardwareRoot}>
       <Content />
-    </dialog>
+    </div>
   )
 }