feat: New design for Neuron-Send

packages/neuron-ui/package.json

@@ -43,20 +43,22 @@
     "@nervosnetwork/ckb-sdk-core": "0.103.1",
     "@nervosnetwork/ckb-sdk-utils": "0.103.1",
     "canvg": "2.0.0",
+    "clsx": "1.2.1",
     "i18next": "21.10.0",
     "immer": "9.0.16",
     "jsqr": "1.4.0",
     "office-ui-fabric-react": "7.199.6",
     "primereact": "8.7.1",
     "qr.js": "0.0.0",
     "react": "17.0.2",
-    "react-router-dom": "6.4.1",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
+    "react-router-dom": "6.4.1",
     "react-transition-group": "4.4.5",
     "sass": "1.56.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.20.5",
     "@babel/preset-typescript": "7.18.6",
     "@storybook/addon-actions": "6.5.12",
     "@storybook/addon-essentials": "6.5.12",
@@ -71,7 +73,6 @@
     "@storybook/react": "6.5.12",
     "@storybook/testing-library": "0.0.13",
     "@types/enzyme": "3.10.12",
-    "@babel/plugin-proposal-private-property-in-object": "7.20.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/node": "18.11.17",
     "@types/react": "17.0.53",
@@ -94,8 +95,8 @@
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "react-test-renderer": "16.12.0",
-    "webpack": "5.74.0",
-    "storybook-addon-react-router-v6": "0.2.1"
+    "storybook-addon-react-router-v6": "0.2.1",
+    "webpack": "5.74.0"
   },
   "resolutions": {
     "react-i18next": ">=11.16.4"

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

@@ -1,12 +1,13 @@
-import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react'
+import React, { useState, useCallback, useMemo, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import TextField from 'widgets/TextField'
-import Spinner from 'widgets/Spinner'
 import HardwareSign from 'components/HardwareSign'
 import { ReactComponent as Attention } from 'widgets/Icons/ExperimentalAttention.svg'
-import { useDialog, ErrorCode, RoutePath, isSuccessResponse, errorFormatter } from 'utils'
+import { ErrorCode, RoutePath, isSuccessResponse, errorFormatter } from 'utils'
+import Dialog from 'widgets/Dialog'
+import { Export, Sign } from 'widgets/Icons/icon'
 
 import {
   useState as useGlobalState,
@@ -28,7 +29,6 @@ import {
   invokeShowErrorMessage,
 } from 'services/remote'
 import { PasswordIncorrectException } from 'exceptions'
-import DropdownButton from 'widgets/DropdownButton'
 import styles from './passwordRequest.module.scss'
 
 const PasswordRequest = () => {
@@ -46,7 +46,6 @@ const PasswordRequest = () => {
   const dispatch = useDispatch()
   const [t] = useTranslation()
   const navigate = useNavigate()
-  const dialogRef = useRef<HTMLDialogElement | null>(null)
 
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
@@ -101,8 +100,6 @@ const PasswordRequest = () => {
     }
   }, [signType, generatedTx, onDismiss, description, experimental])
 
-  useDialog({ show: actionType, dialogRef, onClose: onDismiss })
-
   const wallet = useMemo(() => wallets.find(w => w.id === walletID), [walletID, wallets])
 
   const isLoading =
@@ -354,14 +351,6 @@ const PasswordRequest = () => {
     }
   }, [description, dispatch, experimental, generatedTx, onDismiss, password, signType, t, walletID, multisigConfig])
 
-  const dropdownList = [
-    {
-      text: t('offline-sign.sign-and-export'),
-      onClick: signAndExportFromGenerateTx,
-      disabled: !password,
-    },
-  ]
-
   if (!wallet) {
     return null
   }
@@ -377,11 +366,18 @@ const PasswordRequest = () => {
       />
     )
   }
-
   return (
-    <dialog ref={dialogRef} className={styles.dialog}>
+    <Dialog
+      show={!!actionType}
+      title={t(`password-request.${actionType}.title`)}
+      onCancel={onDismiss}
+      onConfirm={onSubmit}
+      disabled={disabled}
+      isLoading={isLoading}
+      cancelText={t('common.cancel')}
+      confirmText={t('common.confirm')}
+    >
       <form onSubmit={onSubmit}>
-        <h2 className={styles.title}>{t(`password-request.${actionType}.title`)}</h2>
         {[
           'unlock',
           'create-sudt-account',
@@ -413,33 +409,30 @@ const PasswordRequest = () => {
             title={t('password-request.password')}
             onChange={onChange}
             autoFocus
-            required
             className={styles.passwordInput}
             error={error}
           />
         )}
-        <div className={styles.footer}>
-          {signType !== OfflineSignType.Invalid ? (
-            <div className={styles.left}>
-              <DropdownButton
-                mainBtnLabel={t('offline-sign.export')}
-                mainBtnOnClick={exportTransaction}
-                mainBtnDisabled={isLoading}
-                list={currentWallet.isWatchOnly ? [] : dropdownList}
-              />
-            </div>
-          ) : null}
-          <div className={styles.right}>
-            <Button label={t('common.cancel')} type="cancel" onClick={onDismiss} />
-            {signType === OfflineSignType.SendFromMultisigOnlySig || currentWallet.isWatchOnly || (
-              <Button label={t('common.confirm')} type="submit" disabled={disabled}>
-                {isLoading ? <Spinner /> : (t('common.confirm') as string)}
+        {signType !== OfflineSignType.Invalid ? (
+          <div className={styles.footer}>
+            <Button type="text" onClick={exportTransaction} disabled={isLoading}>
+              {t('offline-sign.export')} <Export />
+            </Button>
+            {!currentWallet.isWatchOnly && (
+              <Button
+                type="text"
+                className={!password ? styles['sign-disabled'] : ''}
+                onClick={signAndExportFromGenerateTx}
+                disabled={!password}
+                loading
+              >
+                {t('offline-sign.sign-and-export')} <Sign />
               </Button>
             )}
           </div>
-        </div>
+        ) : null}
       </form>
-    </dialog>
+    </Dialog>
   )
 }
 

packages/neuron-ui/src/components/PasswordRequest/passwordRequest.module.scss

@@ -1,51 +1,29 @@
 @import '../../styles/mixin.scss';
 
-.dialog {
-  @include dialog-container;
-  padding: 49px 73px;
-
-  &::backdrop {
-    @include overlay;
-  }
-}
 
 .footer {
   @include dialog-footer;
 
   margin-top: 10px;
   button:last-of-type {
     margin-left: 9px;
+    font-size: px(14);
   }
 
-  .left {
-    button {
-      margin: 0;
+  .sign-disabled {
+    color: var(--button-cancel-color);
+    svg {
+      g, 
+      path {
+        fill: var(--button-cancel-color)
+      }
     }
   }
-
-  .right {
-    display: flex;
-    flex: 1;
-    justify-content: flex-end;
-  }
-}
-
-.title {
-  font-size: 1.125rem;
-  line-height: 1.375rem;
-  font-weight: bold;
-  letter-spacing: 0.9px;
-  margin: 0;
-
-  &:after {
-    display: inline;
-    content: ':';
-  }
 }
 
 .walletName {
   @include bold-text;
-  color: var(--nervos-green);
+  color: var(--main-text-color);
 }
 
 .passwordInput {