fix

Author: devchenyan

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

@@ -29,7 +29,7 @@ interface PasswordDialogProps {
   show: boolean
   walletName: string
   onCancel: () => void
-  onSubmit: (pwd: string) => Promise<ControllerResponse | void>
+  onSubmit: (pwd: string) => Promise<ControllerResponse>
 }
 
 export const PasswordDialog = ({ show, walletName, onCancel, onSubmit }: PasswordDialogProps) => {
@@ -63,7 +63,7 @@ export const PasswordDialog = ({ show, walletName, onCancel, onSubmit }: Passwor
     setLoading(true)
     onSubmit(password)
       .then(res => {
-        if (res?.status === ErrorCode.PasswordIncorrect) {
+        if (res.status === ErrorCode.PasswordIncorrect) {
           setError((res.message as { content: string }).content)
         }
       })

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

@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import TextField from 'widgets/TextField'
 import Dialog from 'widgets/Dialog'
-import { ErrorCode, RoutePath, isSuccessResponse, errorFormatter } from 'utils'
+import { ErrorCode, isSuccessResponse, errorFormatter } from 'utils'
 import {
   useState as useGlobalState,
   useDispatch,
@@ -12,19 +12,21 @@ import {
   sendCreateSUDTAccountTransaction,
   sendSUDTTransaction,
 } from 'states'
-import { SignTransactionParams } from 'ckb-walletconnect-wallet-sdk'
-import { OfflineSignType, OfflineSignStatus, signAndExportTransaction } from 'services/remote'
+import { SessionRequest } from 'ckb-walletconnect-wallet-sdk'
+import { OfflineSignType, OfflineSignStatus, signAndExportTransaction, signTransactionOnly } from 'services/remote'
 import { PasswordIncorrectException } from 'exceptions'
 import styles from './wcSignTransactionDialog.module.scss'
 
 const WCSignTransactionDialog = ({
   wallet,
-  data,
+  event,
   onDismiss,
+  onApproveRequest,
 }: {
   wallet: State.Wallet
-  data: SignTransactionParams
+  event: SessionRequest
   onDismiss: () => void
+  onApproveRequest: (event: SessionRequest, options: any) => void
 }) => {
   const {
     app: {
@@ -34,6 +36,7 @@ const WCSignTransactionDialog = ({
   } = useGlobalState()
 
   const walletID = wallet.id
+  const data = event.params.request.params
   const {
     transaction,
     type: signType = OfflineSignType.Regular,
@@ -78,6 +81,22 @@ const WCSignTransactionDialog = ({
     onDismiss()
   }, [data, dispatch, onDismiss, t, password, walletID])
 
+  const sign = useCallback(async () => {
+    const res = await signTransactionOnly({
+      transaction,
+      type: signType,
+      status: signStatus,
+      walletID,
+      password,
+    })
+    if (!isSuccessResponse(res)) {
+      setError(errorFormatter(res.message, t))
+      return
+    }
+    onApproveRequest(event, res.result)
+    onDismiss()
+  }, [data, dispatch, onDismiss, t, password, walletID])
+
   const onSubmit = useCallback(
     async (e?: React.FormEvent) => {
       if (e) {
@@ -88,7 +107,7 @@ const WCSignTransactionDialog = ({
       }
       setIsSigning(true)
       if (!isBroadcast) {
-        await signAndExport()
+        await sign()
         setIsSigning(false)
         return
       }
@@ -98,10 +117,11 @@ const WCSignTransactionDialog = ({
             if (isSigning) {
               break
             }
-            await sendTransaction({ walletID, tx: transaction, description, password })(dispatch).then(({ status }) => {
-              if (isSuccessResponse({ status })) {
-                navigate(RoutePath.History)
-              } else if (status === ErrorCode.PasswordIncorrect) {
+            await sendTransaction({ walletID, tx: transaction, description, password })(dispatch).then(res => {
+              if (isSuccessResponse(res.status)) {
+                onApproveRequest(event, res.result)
+                onDismiss()
+              } else if (res.status === ErrorCode.PasswordIncorrect) {
                 throw new PasswordIncorrectException()
               }
             })
@@ -111,13 +131,11 @@ const WCSignTransactionDialog = ({
             if (isSigning) {
               break
             }
-            await sendTransaction({ walletID, tx: transaction, description, password })(dispatch).then(({ status }) => {
-              if (isSuccessResponse({ status })) {
-                dispatch({
-                  type: AppActions.SetGlobalDialog,
-                  payload: 'unlock-success',
-                })
-              } else if (status === ErrorCode.PasswordIncorrect) {
+            await sendTransaction({ walletID, tx: transaction, description, password })(dispatch).then(res => {
+              if (isSuccessResponse(res)) {
+                onApproveRequest(event, res.result)
+                onDismiss()
+              } else if (res.status === ErrorCode.PasswordIncorrect) {
                 throw new PasswordIncorrectException()
               }
             })
@@ -130,10 +148,11 @@ const WCSignTransactionDialog = ({
               tx: transaction,
               password,
             }
-            await sendCreateSUDTAccountTransaction(params)(dispatch).then(({ status }) => {
-              if (isSuccessResponse({ status })) {
-                navigate(RoutePath.History)
-              } else if (status === ErrorCode.PasswordIncorrect) {
+            await sendCreateSUDTAccountTransaction(params)(dispatch).then(res => {
+              if (isSuccessResponse(res)) {
+                onApproveRequest(event, res.result)
+                onDismiss()
+              } else if (res.status === ErrorCode.PasswordIncorrect) {
                 throw new PasswordIncorrectException()
               }
             })
@@ -145,10 +164,11 @@ const WCSignTransactionDialog = ({
               tx: transaction,
               password,
             }
-            await sendSUDTTransaction(params)(dispatch).then(({ status }) => {
-              if (isSuccessResponse({ status })) {
-                navigate(RoutePath.History)
-              } else if (status === ErrorCode.PasswordIncorrect) {
+            await sendSUDTTransaction(params)(dispatch).then(res => {
+              if (isSuccessResponse(res)) {
+                onApproveRequest(event, res.result)
+                onDismiss()
+              } else if (res.status === ErrorCode.PasswordIncorrect) {
                 throw new PasswordIncorrectException()
               }
             })
@@ -192,14 +212,10 @@ const WCSignTransactionDialog = ({
     [setPassword, setError]
   )
 
-  const title = useMemo(() => {
-    return !isBroadcast ? t('offline-sign.sign-and-export') : t('offline-sign.sign-and-broadcast')
-  }, [isBroadcast, t])
-
   return (
     <Dialog
       show
-      title={title}
+      title={t('wallet-connect.sign-confirmation')}
       onCancel={onDismiss}
       onConfirm={onSubmit}
       disabled={disabled}

packages/neuron-ui/src/components/WalletConnect/ItemComponents.tsx

@@ -1,12 +1,16 @@
 import React, { useState, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
-import { clsx } from 'utils'
+import { clsx, CONSTANTS, shannonToCKBFormatter } from 'utils'
 import { SCRIPT_BASES } from 'utils/const'
-import { Proposal, Session, SessionRequest } from 'ckb-walletconnect-wallet-sdk'
+import { scriptToAddress } from '@nervosnetwork/ckb-sdk-utils'
+import { useState as useGlobalState } from 'states'
+import { Proposal, Session, SessionRequest, SignTransactionParams } from 'ckb-walletconnect-wallet-sdk'
 import { DetailIcon } from 'widgets/Icons/icon'
 import styles from './walletConnect.module.scss'
 
+const { MAINNET_TAG } = CONSTANTS
+
 interface PrososalItemProps {
   data: Proposal
   key: string
@@ -169,10 +173,20 @@ interface TransactionItemProps {
 }
 
 export const TransactionItem = ({ data, approve, sessions, onRejectRequest, key }: TransactionItemProps) => {
+  const {
+    chain: { networkID },
+    settings: { networks },
+  } = useGlobalState()
   const [t] = useTranslation()
+  const network = networks.find(n => n.id === networkID)
+  const isMainnet = network != null && network.chain === MAINNET_TAG
   const session = sessions.find(item => item.topic === data.topic)
   const { name = '', url = '' } = session?.peer?.metadata || {}
-  const { params } = data.params.request
+  const params = data.params.request.params as SignTransactionParams
+
+  const { outputs = [], fee, description } = params.transaction
+  const firstOutputAddress = outputs.length ? scriptToAddress(outputs[0].lock, isMainnet) : ''
+  const capacity = outputs.reduce((pre, cur) => BigInt(pre) + BigInt(cur.capacity), BigInt(0)).toString()
 
   return (
     <div className={clsx(styles.itemWrap, styles.transactionItem)} key={key}>
@@ -188,20 +202,23 @@ export const TransactionItem = ({ data, approve, sessions, onRejectRequest, key
           <div>
             <h3>{t('transaction.address')}</h3>
             <p>
-              <span className={styles.address}>ckb1qrfkjktl73ljn77q...v837h2rmne7esqhxzhpm</span> (+2 addresses)
+              <span className={styles.address}>
+                {firstOutputAddress.slice(0, 16)}...{firstOutputAddress.slice(-16)}
+              </span>{' '}
+              (+{outputs.length} addresses)
             </p>
             <h3>{t('send.fee')}</h3>
-            <p>{params.transaction.fee}</p>
+            <p>{shannonToCKBFormatter(fee)}</p>
             <h3>{t('send.description')}</h3>
-            <p>{params.transaction.description}</p>
+            <p>{description}</p>
             <button type="button" className={styles.detailButton} onClick={() => {}} data-hash="hash00000">
               <DetailIcon />
               {t('wallet-connect.view-details')}
             </button>
           </div>
           <div>
             <h3>{t('transaction.amount')}</h3>
-            <p>-</p>
+            <p>{shannonToCKBFormatter(capacity)}</p>
             <h3>{t('wallet-connect.locked-period')}</h3>
             <p>-</p>
           </div>

packages/neuron-ui/src/components/WalletConnect/hooks.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 import { useState as useGlobalState } from 'states'
 import { connect, disconnect, approveSession, rejectSession, approveRequest, rejectRequest } from 'services/remote'
 import { ControllerResponse } from 'services/remote/remoteApiWrapper'
+import { SessionRequest } from 'ckb-walletconnect-wallet-sdk'
 
 export const useWalletConnect = () => {
   const {
@@ -16,10 +17,11 @@ export const useWalletConnect = () => {
     return res
   }, [])
 
-  const onDisconnect = useCallback(async e => {
-    const { topic } = e.target.dataset
-    const res: ControllerResponse = await disconnect(topic)
-    return res
+  const onDisconnect = useCallback(async (e: React.SyntheticEvent<HTMLButtonElement>) => {
+    const { topic } = e.currentTarget.dataset
+    if (topic) {
+      await disconnect(topic)
+    }
   }, [])
 
   const onApproveSession = useCallback(async (id, scriptBases) => {
@@ -30,22 +32,22 @@ export const useWalletConnect = () => {
     return res
   }, [])
 
-  const onRejectSession = useCallback(async e => {
-    const { id } = e.target.dataset
+  const onRejectSession = useCallback(async (e: React.SyntheticEvent<HTMLButtonElement>) => {
+    const { id } = e.currentTarget.dataset
     await rejectSession({ id: Number(id) })
   }, [])
 
   const onApproveRequest = useCallback(
-    async (event, options) => {
+    async (event: SessionRequest, options: any) => {
       const res: ControllerResponse = await approveRequest({ event, options })
       return res
     },
     [requests]
   )
 
   const onRejectRequest = useCallback(
-    async e => {
-      const { id } = e.target.dataset
+    async (e: React.SyntheticEvent<HTMLButtonElement>) => {
+      const { id } = e.currentTarget.dataset
       const event = requests.find(item => item.id === Number(id))
       if (event) {
         await rejectRequest({ event })

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

@@ -80,25 +80,22 @@ const WalletConnect = () => {
   const approveSignTransaction = useCallback(
     item => {
       setCurrentEvent(item)
-
       setDialogType('signTransaction')
     },
-    [onApproveRequest]
+    [setCurrentEvent, setDialogType]
   )
 
   const handleSignMessage = useCallback(
     async password => {
-      if (!currentEvent) return null
-
-      const { address, message } = currentEvent.params.request.params
+      const { address, message } = currentEvent!.params.request.params
       const res: ControllerResponse = await signMessage({
         walletID: wallet?.id ?? '',
         address,
         message,
         password,
       })
       if (isSuccessResponse(res)) {
-        onApproveRequest(currentEvent, res.result)
+        onApproveRequest(currentEvent!, res.result)
         setDialogType('')
       } else if (res.status === ErrorCode.PasswordIncorrect) {
         // pass through this kind of error
@@ -245,15 +242,17 @@ const WalletConnect = () => {
         }}
       />
 
-      <PasswordDialog
-        show={dialogType === 'pwd' && !!currentEvent}
-        walletName={wallet?.name}
-        onCancel={onDismiss}
-        onSubmit={handleSignMessage}
-      />
+      {dialogType === 'pwd' && currentEvent ? (
+        <PasswordDialog show walletName={wallet?.name} onCancel={onDismiss} onSubmit={handleSignMessage} />
+      ) : null}
 
-      {dialogType === 'signTransaction' ? (
-        <WCSignTransactionDialog wallet={wallet} onDismiss={onDismiss} data={currentEvent?.params.request.params} />
+      {dialogType === 'signTransaction' && currentEvent ? (
+        <WCSignTransactionDialog
+          wallet={wallet}
+          onDismiss={onDismiss}
+          onApproveRequest={onApproveRequest}
+          event={currentEvent}
+        />
       ) : null}
     </PageContainer>
   )

packages/neuron-ui/src/locales/en.json

@@ -1168,7 +1168,8 @@
       "sign-info": "Signature Information",
       "transfer-info": "Payment Information",
       "view-details": "View Details",
-      "locked-period": "Locked Period"
+      "locked-period": "Locked Period",
+      "sign-confirmation": "Signature Confirmation"
     }
   }
 }

packages/neuron-ui/src/locales/zh-tw.json

@@ -1139,7 +1139,8 @@
       "sign-info": "簽名信息",
       "transfer-info": "支付信息",
       "view-details": "查看詳情",
-      "locked-period": "鎖定時間"
+      "locked-period": "鎖定時間",
+      "sign-confirmation": "簽名確認"
     }
   }
 }

packages/neuron-ui/src/locales/zh.json

@@ -1160,7 +1160,8 @@
       "sign-info": "签名信息",
       "transfer-info": "支付信息",
       "view-details": "查看详情",
-      "locked-period": "锁定时间"
+      "locked-period": "锁定时间",
+      "sign-confirmation": "签名确认"
     }
   }
 }