fix: Offline sign error

nervosnetwork · Jul 21, 2023 · a4c849e · a4c849e
1 parent 6d60b78
commit a4c849e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 51 deletions.
diff --git a/packages/neuron-ui/src/components/OfflineSign/index.tsx b/packages/neuron-ui/src/components/OfflineSign/index.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { isSuccessResponse, RoutePath, useDidMount } from 'utils'
 import Dialog from 'widgets/Dialog'
-import { addNotification, useDispatch, useState as useGlobalState } from 'states'
+import AlertDialog from 'widgets/AlertDialog'
+import { useDispatch, useState as useGlobalState } from 'states'
 import { broadcastTransaction, getCurrentWallet, OfflineSignStatus } from 'services/remote'
 import { ReactComponent as HardWalletIcon } from 'widgets/Icons/HardWallet.svg'
 import OfflineSignDialog from '../OfflineSignDialog'
@@ -20,6 +21,7 @@ const OfflineSign = () => {
   const [isBroadCasting, setIsBroadcasting] = useState(false)
   const [t] = useTranslation()
   const dispatch = useDispatch()
+  const [errMsg, setErrMsg] = useState('')
 
   const { filePath, json } = loadedTransaction
 
@@ -60,19 +62,12 @@ const OfflineSign = () => {
       if (isSuccessResponse(res)) {
         navigate(RoutePath.History)
       } else {
-        addNotification({
-          type: 'alert',
-          timestamp: +new Date(),
-          code: res.status,
-          content: typeof res.message === 'string' ? res.message : res.message.content,
-          meta: typeof res.message === 'string' ? undefined : res.message.meta,
-        })(dispatch)
-        onBack()
+        setErrMsg(typeof res.message === 'string' ? res.message : res.message.content || '')
       }
     } finally {
       setIsBroadcasting(false)
     }
-  }, [wallet, json, navigate, dispatch, onBack])
+  }, [wallet, json, navigate, dispatch])
 
   useDidMount(() => {
     getCurrentWallet().then(res => {
@@ -93,43 +88,52 @@ const OfflineSign = () => {
   }
 
   return (
-    <Dialog
-      show={!isSigning}
-      title={t('offline-sign.title')}
-      cancelText={t('offline-sign.actions.cancel')}
-      onCancel={onBack}
-      confirmText={
-        signStatus === OfflineSignStatus.Signed ? t('offline-sign.actions.broadcast') : t('offline-sign.actions.sign')
-      }
-      isLoading={signStatus === OfflineSignStatus.Signed && isBroadCasting}
-      onConfirm={signStatus === OfflineSignStatus.Signed ? onBroadcast : onSign}
-    >
-      <div className={styles.main}>
-        <table>
-          <tbody>
-            <tr>
-              <td className={styles.first}>{t('offline-sign.json-file')}</td>
-              <td>{filePath}</td>
-            </tr>
-            <tr>
-              <td className={styles.first}>{t('offline-sign.status.label')}</td>
-              <td>{status}</td>
-            </tr>
-            <tr>
-              <td className={styles.first}>{t('offline-sign.wallet')}</td>
-              <td>
-                {wallet?.device ? <HardWalletIcon /> : null}
-                <span>{wallet?.name ?? ''}</span>
-              </td>
-            </tr>
-            <tr>
-              <td className={styles.first}>{t('offline-sign.content')}</td>
-            </tr>
-          </tbody>
-        </table>
-        <textarea disabled value={jsonContent} className={styles.textarea} />
-      </div>
-    </Dialog>
+    <>
+      <Dialog
+        show={!isSigning}
+        title={t('offline-sign.title')}
+        cancelText={t('offline-sign.actions.cancel')}
+        onCancel={onBack}
+        confirmText={
+          signStatus === OfflineSignStatus.Signed ? t('offline-sign.actions.broadcast') : t('offline-sign.actions.sign')
+        }
+        isLoading={signStatus === OfflineSignStatus.Signed && isBroadCasting}
+        onConfirm={signStatus === OfflineSignStatus.Signed ? onBroadcast : onSign}
+      >
+        <div className={styles.main}>
+          <table>
+            <tbody>
+              <tr>
+                <td className={styles.first}>{t('offline-sign.json-file')}</td>
+                <td>{filePath}</td>
+              </tr>
+              <tr>
+                <td className={styles.first}>{t('offline-sign.status.label')}</td>
+                <td>{status}</td>
+              </tr>
+              <tr>
+                <td className={styles.first}>{t('offline-sign.wallet')}</td>
+                <td>
+                  {wallet?.device ? <HardWalletIcon /> : null}
+                  <span>{wallet?.name ?? ''}</span>
+                </td>
+              </tr>
+              <tr>
+                <td className={styles.first}>{t('offline-sign.content')}</td>
+              </tr>
+            </tbody>
+          </table>
+          <textarea disabled value={jsonContent} className={styles.textarea} />
+        </div>
+      </Dialog>
+      <AlertDialog
+        show={!!errMsg}
+        title={t('message-types.alert')}
+        message={errMsg}
+        type="failed"
+        onCancel={() => setErrMsg('')}
+      />
+    </>
   )
 }
 

diff --git a/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss b/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss
@@ -4,6 +4,7 @@
   @include dialog-container;
   padding: 28px 24px 24px;
   text-align: center;
+  width: 456px;
 
   &::backdrop {
     @include overlay;
@@ -22,6 +23,7 @@
     line-height: 28px;
     margin: 0;
     color: var(--dialog-secondary-text-color);
+    word-break: break-word;
   }
 
   .actions {

diff --git a/yarn.lock b/yarn.lock
@@ -13276,7 +13276,7 @@ nopt@^6.0.0:
   dependencies:
     abbrev "^1.0.0"
 
-normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
+normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -13349,7 +13349,7 @@ npm-install-checks@^6.0.0:
   dependencies:
     semver "^7.1.1"
 
-npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
+npm-normalize-package-bin@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
   integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
@@ -16041,7 +16041,14 @@ semver-compare@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-[email protected], [email protected], semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
+[email protected]:
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
+  integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
+  dependencies:
+    lru-cache "^6.0.0"
+
+[email protected], semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
   integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
@@ -18559,7 +18566,7 @@ [email protected], yargs@^16.0.0, yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.0.1, yargs@^17.5.1, yargs@^17.6.2, yargs@^17.7.1:
+yargs@^17.0.1, yargs@^17.5.1, yargs@^17.6.2, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==