Merge pull request #2855 from nervosnetwork/develop

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

@@ -170,7 +170,7 @@ function calculatePercent(amount: string, total: string) {
   return +((BigInt(PERCENT_100) * BigInt(amount)) / BigInt(total)).toString()
 }
 
-export const useDepositValue = (balance: string) => {
+export const useDepositValue = (balance: string, showDepositDialog: boolean) => {
   const [depositValue, setDepositValue] = useState(`${MIN_DEPOSIT_AMOUNT}`)
   const [slidePercent, setSlidePercent] = useState(
     calculatePercent(CKBToShannonFormatter(`${MIN_DEPOSIT_AMOUNT}`), balance)
@@ -209,6 +209,12 @@ export const useDepositValue = (balance: string) => {
     setDepositValue(`${MIN_DEPOSIT_AMOUNT}`)
     setSlidePercent(calculatePercent(CKBToShannonFormatter(`${MIN_DEPOSIT_AMOUNT}`), balance))
   }, [balance])
+  useEffect(() => {
+    if (showDepositDialog) {
+      resetDepositValue()
+    }
+    // ignore resetDepositValue changed, only showDepositDialog from false -> true reset
+  }, [showDepositDialog])
   return {
     onChangeDepositValue,
     setDepositValue,

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { Slider } from 'office-ui-fabric-react'
 import { Trans, useTranslation } from 'react-i18next'
 import TextField from 'widgets/TextField'
@@ -57,8 +57,10 @@ const DepositDialog = ({
   const [t] = useTranslation()
   const disabled = !isTxGenerated
   const { isBalanceReserved, onIsBalanceReservedChange, setIsBalanceReserved } = useBalanceReserved()
-  const { depositValue, onChangeDepositValue, slidePercent, onSliderChange, resetDepositValue } =
-    useDepositValue(balance)
+  const { depositValue, onChangeDepositValue, slidePercent, onSliderChange, resetDepositValue } = useDepositValue(
+    balance,
+    show
+  )
   const { errorMessage, maxDepositValue } = useGenerateDaoDepositTx({
     walletID,
     isBalanceReserved,
@@ -69,6 +71,16 @@ const DepositDialog = ({
   })
   const onConfirm = useOnDepositDialogSubmit({ onCloseDepositDialog, walletID })
   const onCancel = useOnDepositDialogCancel({ onCloseDepositDialog, resetDepositValue, setIsBalanceReserved })
+  const onSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+      if (disabled) {
+        return
+      }
+      onConfirm()
+    },
+    [disabled, onConfirm]
+  )
 
   return (
     <Dialog
@@ -83,7 +95,7 @@ const DepositDialog = ({
       {isDepositing ? (
         <Spinner size={SpinnerSize.large} />
       ) : (
-        <form>
+        <form onSubmit={onSubmit}>
           <label className={styles.depositValueLabel} htmlFor="depositValue">{`${t(
             'nervos-dao.deposit-amount'
           )}`}</label>

packages/neuron-ui/src/components/History/RowExtend.tsx

@@ -51,7 +51,7 @@ const RowExtend = ({ column, columns, isMainnet, id, bestBlockNumber }: RowExten
   )
 
   const { blockNumber, hash, description } = column
-  const confirmations = 1 + bestBlockNumber - +blockNumber
+  const confirmations = blockNumber ? 1 + bestBlockNumber - +blockNumber : 0
   const confirmationsLabel = confirmations > 1000 ? '1,000+' : localNumberFormatter(confirmations)
   const isSelected = localDescription.key === column.hash
   const onCopy = useCallback(() => {

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import Pagination from 'widgets/Pagination'
 import SUDTAvatar from 'widgets/SUDTAvatar'
 import Button from 'widgets/Button'
@@ -11,7 +11,7 @@ import { Download, Search, ArrowNext } from 'widgets/Icons/icon'
 import PageContainer from 'components/PageContainer'
 import TransactionStatusWrap from 'components/TransactionStatusWrap'
 import FormattedTokenAmount from 'components/FormattedTokenAmount'
-import { getDisplayName, isTonkenInfoStandardUAN } from 'components/UANDisplay'
+import { UANTokenName, isTonkenInfoStandardUAN } from 'components/UANDisplay'
 import { useState as useGlobalState, useDispatch } from 'states'
 import { exportTransactions } from 'services/remote'
 
@@ -76,7 +76,7 @@ const History = () => {
   const handleTransactionInfo = (tx: State.Transaction) => {
     let name = '--'
     let amount = '--'
-    let typeLabel = '--'
+    let typeLabel: React.ReactNode = '--'
     let sudtAmount = ''
     let showWithUANFormatter = false
 
@@ -92,7 +92,12 @@ const History = () => {
       if (['create', 'destroy'].includes(tx.type)) {
         // create/destroy an account
         showWithUANFormatter = isTonkenInfoStandardUAN(tx.sudtInfo.sUDT.tokenName, tx.sudtInfo.sUDT.symbol)
-        typeLabel = `${t(`history.${tx.type}`, { name: getDisplayName(name, tx.sudtInfo.sUDT.symbol) })}`
+        typeLabel = (
+          <Trans
+            i18nKey={`history.${tx.type}SUDT`}
+            components={[<UANTokenName name={tx.sudtInfo.sUDT.tokenName} symbol={tx.sudtInfo.sUDT.symbol} />]}
+          />
+        )
       } else {
         // send/receive to/from an account
         const type = +tx.sudtInfo.amount <= 0 ? 'send' : 'receive'

packages/neuron-ui/src/components/SUDTAccountList/sUDTAccountList.module.scss

@@ -57,7 +57,7 @@
   container-type: inline-size;
   @container (max-width: 968px) {
     .list {
-      grid-template-columns: repeat(3, auto);
+      grid-template-columns: repeat(3, 33%);
     }
   }
 }

packages/neuron-ui/src/components/SUDTAccountPile/sUDTAccountPile.module.scss

@@ -9,6 +9,7 @@
 
   .info {
     flex: 1;
+    max-width: calc(100% - 48px);
     .baseInfo {
       cursor: pointer;
     }

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

@@ -17,7 +17,8 @@ const SUDTMigrateToExistAccountDialog = ({
   isMainnet,
   walletID,
   isLightClient,
-  onCancel,
+  onCloseDialog,
+  onBack,
   onSuccess,
 }: {
   cell: SpecialAssetCell
@@ -26,7 +27,8 @@ const SUDTMigrateToExistAccountDialog = ({
   isMainnet: boolean
   walletID: string
   isLightClient: boolean
-  onCancel: () => void
+  onCloseDialog: () => void
+  onBack: () => void
   onSuccess: (text: string) => void
 }) => {
   const [t] = useTranslation()
@@ -56,7 +58,7 @@ const SUDTMigrateToExistAccountDialog = ({
       outPoint: cell.outPoint,
       acpAddress: address,
     }).then(res => {
-      onCancel()
+      onCloseDialog()
       if (isSuccessResponse(res)) {
         if (res.result) {
           dispatch({
@@ -87,14 +89,14 @@ const SUDTMigrateToExistAccountDialog = ({
         })
       }
     })
-  }, [cell.outPoint, address, t, onCancel, dispatch, walletID])
+  }, [cell.outPoint, address, t, onCloseDialog, dispatch, walletID])
 
   return (
     <Dialog
       className={styles.container}
       show
       title={t('migrate-sudt.transfer-to-exist-account.title')}
-      onCancel={onCancel}
+      onCancel={onBack}
       cancelText={t('migrate-sudt.back')}
       confirmText={t('migrate-sudt.next')}
       onConfirm={onSubmit}

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

@@ -23,14 +23,16 @@ const SUDTMigrateToNewAccountDialog = ({
   tokenInfo: findTokenInfo,
   sUDTAccounts,
   walletID,
-  onCancel,
+  onCloseDialog,
+  onBack,
   onSuccess,
 }: {
   cell: SpecialAssetCell
   tokenInfo?: Controller.GetTokenInfoList.TokenInfo
   sUDTAccounts: State.SUDTAccount[]
   walletID: string
-  onCancel: () => void
+  onCloseDialog: () => void
+  onBack: () => void
   onSuccess: (text: string) => void
 }) => {
   const [t] = useTranslation()
@@ -51,7 +53,7 @@ const SUDTMigrateToNewAccountDialog = ({
     generateSudtMigrateAcpTx({
       outPoint: cell.outPoint,
     }).then(res => {
-      onCancel()
+      onCloseDialog()
       if (isSuccessResponse(res)) {
         if (res.result) {
           dispatch({
@@ -91,7 +93,7 @@ const SUDTMigrateToNewAccountDialog = ({
         })
       }
     })
-  }, [cell, t, onCancel, walletID, tokenInfo, dispatch, sudtAmount])
+  }, [cell, t, onCloseDialog, walletID, tokenInfo, dispatch, sudtAmount])
 
   const renderList = fields.map(field => {
     return field.key === 'balance' ? (
@@ -123,7 +125,7 @@ const SUDTMigrateToNewAccountDialog = ({
       className={styles.container}
       show
       title={t('migrate-sudt.turn-into-new-account.title')}
-      onCancel={onCancel}
+      onCancel={onBack}
       cancelText={t('migrate-sudt.cancel')}
       confirmText={t('migrate-sudt.confirm')}
       onConfirm={onSubmit}

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

@@ -68,7 +68,7 @@ const SUDTReceiveDialog = ({ data, onClose }: { data: DataProps; onClose?: () =>
     >
       <div className={styles.container}>
         <Alert status="warn" className={styles.notification}>
-          {t('s-udt.receive.notation', { symbol: getDisplaySymbol(tokenName || '', symbol || '') })}
+          <span>{t('s-udt.receive.notation', { symbol: getDisplaySymbol(tokenName || '', symbol || '') })}</span>
         </Alert>
         <div className={styles.info}>
           <SUDTAvatar type="logo" />

packages/neuron-ui/src/components/SUDTReceiveDialog/sUDTReceiveDialog.module.scss

@@ -24,6 +24,7 @@
   border-radius: 16px;
   column-gap: 16px;
   .right {
+    max-width: calc(100% - 48px);
     .accountName {
       font-weight: 500;
       font-size: 14px;
@@ -43,23 +44,26 @@
 }
 
 .notification {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 32px;
   height: 32px;
   text-align: center;
   color: var(--notice-text-color);
   display: flex;
   justify-content: center;
   align-items: center;
   word-break: break-word;
-  margin: 0;
+  margin: 0 4px;
   background-color: var(--warn-background-color);
 
   svg {
     margin-right: 4px;
     flex-shrink: 0;
   }
+  & > span {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 32px;
+    @include text-overflow-ellipsis;
+  }
   .symbol {
     display: inline-flex;
     margin: 0 2px;

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

@@ -121,6 +121,12 @@ const SpecialAssetList = () => {
   )
 
   const onCloseDialog = useCallback(() => {
+    setIsExistAccountDialogOpen(false)
+    setIsNewAccountDialogOpen(false)
+    setIsMigrateDialogOpen(false)
+  }, [setIsNewAccountDialogOpen, setIsExistAccountDialogOpen, setIsMigrateDialogOpen])
+
+  const onBack = useCallback(() => {
     setIsExistAccountDialogOpen(false)
     setIsNewAccountDialogOpen(false)
     setIsMigrateDialogOpen(true)
@@ -522,7 +528,8 @@ const SpecialAssetList = () => {
           sUDTAccounts={sUDTAccounts}
           walletID={id}
           tokenInfo={migrateTokenInfo}
-          onCancel={onCloseDialog}
+          onCloseDialog={onCloseDialog}
+          onBack={onBack}
           onSuccess={handleActionSuccess}
         />
       ) : null}
@@ -534,7 +541,8 @@ const SpecialAssetList = () => {
           sUDTAccounts={sUDTAccounts}
           isMainnet={isMainnet}
           walletID={id}
-          onCancel={onCloseDialog}
+          onCloseDialog={onCloseDialog}
+          onBack={onBack}
           isLightClient={isLightClient}
           onSuccess={handleActionSuccess}
         />

packages/neuron-ui/src/components/UANDisplay/index.module.scss

@@ -4,6 +4,7 @@
   @include tooltip;
   white-space: nowrap;
   display: inline-flex;
+  max-width: calc(100px + (100vw - 1200px) / 2);
 
   & > span {
     @include text-overflow-ellipsis;
@@ -15,6 +16,7 @@
   @include tooltip;
   white-space: nowrap;
   display: inline-flex;
+  max-width: calc(180px + (100vw - 1200px) / 2);
 
   & > span {
     @include text-overflow-ellipsis;

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

@@ -305,7 +305,9 @@
       "copy-balance": "复制余额",
       "copy-address": "复制地址",
       "create": "创建 {{name}} 资产账户",
-      "destroy": "销毁 {{name}} 资产账户"
+      "destroy": "销毁 {{name}} 资产账户",
+      "createSUDT": "创建 <0></0> 资产账户",
+      "destroySUDT": "销毁 <0></0> 资产账户"
     },
     "transaction": {
       "window-title": "交易: {{hash}}",

packages/neuron-ui/src/states/stateProvider/actionCreators/sudt.ts

@@ -10,10 +10,10 @@ import { addNotification } from './app'
 
 export const sendCreateSUDTAccountTransaction =
   (params: Controller.SendCreateSUDTAccountTransaction.Params) => async (dispatch: StateDispatch) =>
-    sendTxBaseAction(sendCreateAccountTx, params, dispatch, addNotification)
+    sendTxBaseAction(sendCreateAccountTx, params, dispatch)
 
 export const sendSUDTTransaction = (params: Controller.SendSUDTTransaction.Params) => async (dispatch: StateDispatch) =>
-  sendTxBaseAction(sendSUDTTx, params, dispatch, addNotification)
+  sendTxBaseAction(sendSUDTTx, params, dispatch)
 
 export const migrateAcp = (params: Controller.MigrateAcp.Params) => async (dispatch: StateDispatch) => {
   dispatch({

packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts

@@ -74,7 +74,7 @@ export const setCurrentWallet = (id: string) => (dispatch: StateDispatch) => {
 }
 
 export const sendTransaction = (params: Controller.SendTransactionParams) => async (dispatch: StateDispatch) =>
-  sendTxBaseAction(sendTx, params, dispatch, addNotification)
+  sendTxBaseAction(sendTx, params, dispatch)
 
 export const updateAddressListAndBalance =
   (params: Controller.GetAddressesByWalletIDParams) => (dispatch: StateDispatch) => {

packages/neuron-ui/src/utils/baseActions.ts

@@ -1,20 +1,19 @@
-import { AppActions } from 'states'
+import { AppActions, showGlobalAlertDialog } from 'states'
 import { isSuccessResponse } from './is'
 import { ErrorCode, ResponseCode } from './enums'
 
-export const sendTxBaseAction = async (sendMethod: any, params: any, dispatch: any, addNotification: any) => {
+export const sendTxBaseAction = async (sendMethod: any, params: any, dispatch: any) => {
   dispatch({ type: AppActions.UpdateLoadings, payload: { sending: true } })
   try {
     const res = await sendMethod(params)
     if (isSuccessResponse(res)) {
       dispatch({ type: AppActions.DismissPasswordRequest })
     } else if (res.status !== ErrorCode.PasswordIncorrect && res.status !== ErrorCode.SignTransactionFailed) {
-      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,
+      showGlobalAlertDialog({
+        type: 'failed',
+        title: typeof res.message === 'string' ? res.message : res.message.content,
+        message: typeof res.message === 'string' ? undefined : res.message.meta,
+        action: 'ok',
       })(dispatch)
       dispatch({ type: AppActions.DismissPasswordRequest })
     }

packages/neuron-ui/src/widgets/SUDTAvatar/sUDTAvatar.module.scss

@@ -8,6 +8,7 @@
   background-color: var(--table-head-border-color);
   font-size: 20px;
   text-transform: uppercase;
+  flex-shrink: 0;
 
   img {
     width: 24px;