Merge pull request #1904 from nervosnetwork/refactor/disabled-sign-and-export-button

Disable sign and export button when the device is not connected

Author: kellyshang

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

@@ -315,12 +315,16 @@ const HardwareSign = ({
 
   const dialogClass = `${styles.dialog} ${wallet.isHD ? styles.hd : ''}`
 
-  const dropdownList = [
-    {
-      text: t('offline-sign.sign-and-export'),
-      onClick: signAndExportFromGenerateTx,
-    },
-  ]
+  const dropdownList = useMemo(() => {
+    return [
+      {
+        text: t('offline-sign.sign-and-export'),
+        onClick: signAndExportFromGenerateTx,
+        disabled: status === disconnectStatus,
+        disabledMsg: disconnectStatus,
+      },
+    ]
+  }, [signAndExportFromGenerateTx, status, disconnectStatus, t])
 
   let container = (
     <div className={styles.container}>

packages/neuron-ui/src/widgets/DropdownButton/dropdownButton.module.scss

@@ -26,6 +26,10 @@
         background-color: #d1d1d1;
         font-weight: bold;
       }
+
+      &:disabled {
+        cursor: not-allowed !important;
+      }
     }
   }
 

packages/neuron-ui/src/widgets/DropdownButton/index.tsx

@@ -7,7 +7,7 @@ interface DropdownButtonProps {
   mainBtnOnClick: () => void
   mainBtnLabel: string
   mainBtnDisabled: boolean
-  list: { text: string; onClick: () => void }[]
+  list: { text: string; onClick: () => void; disabled?: boolean; disabledMsg?: string }[]
 }
 
 const DropdownButton = ({ mainBtnLabel, mainBtnOnClick, mainBtnDisabled, list }: DropdownButtonProps) => {
@@ -20,9 +20,15 @@ const DropdownButton = ({ mainBtnLabel, mainBtnOnClick, mainBtnDisabled, list }:
         </button>
         {!mainBtnDisabled ? (
           <div className={styles.content}>
-            {list.map(({ text, onClick }) => {
+            {list.map(({ text, onClick, disabled, disabledMsg }) => {
               return (
-                <button type="button" onClick={onClick} key={text}>
+                <button
+                  title={disabled ? disabledMsg : text}
+                  type="button"
+                  onClick={onClick}
+                  key={text}
+                  disabled={disabled}
+                >
                   {text}
                 </button>
               )