fix: issue 230

nervosnetwork · Jul 25, 2023 · 1c2c3db · 1c2c3db
1 parent b1bf050
commit 1c2c3db
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 160 deletions.
diff --git a/packages/neuron-ui/src/components/NFTSend/NFTSend.module.scss b/packages/neuron-ui/src/components/NFTSend/NFTSend.module.scss
@@ -1,89 +1,24 @@
 @import '../../styles/mixin.scss';
 
-.title {
-  @include page-title;
-}
-
-.card {
-  background: #fff;
-  padding: 20px;
-  margin: 20px auto;
-  border-radius: 6px;
-  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.12);
-}
+.container {
+  width: 648px;
 
-.send {
-  display: flex;
-  flex-direction: column;
-  padding: 15px 30px 20px;
-
-  .address {
-    grid-area: address;
-  }
-
-  .description {
-    grid-area: description;
-  }
-
-  .descriptionField {
-    & > div {
-      border-color: transparent transparent #aaa !important;
-    }
-  }
-  .remoteError {
-    display: flex;
-    align-items: center;
-    height: 15px;
-    padding-bottom: 15px;
-    grid-area: remote-error;
-    font-size: 0.75rem;
-    color: #d50000;
-    svg {
-      width: 15px;
-      height: 15px;
-      margin-right: 5px;
-    }
+  .textFieldClass {
+    margin-bottom: 10px;
   }
 }
 
-.footer {
+.remoteError {
   display: flex;
-  justify-content: flex-end;
-}
-
-.modal {
-  @include overlay;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
   align-items: center;
-  &[hidden] {
-    display: none;
-  }
-  h2 {
-    @include dialog-title;
-  }
-  .passwordDialog {
-    @include dialog-container;
-    background: #fff;
-    padding: 49px 73px;
-  }
-  .dialogFooter {
-    @include dialog-footer;
-    button {
-      margin-left: 5px;
-    }
+  height: 15px;
+  padding-bottom: 15px;
+  grid-area: remote-error;
+  font-size: 0.75rem;
+  color: #d50000;
+  svg {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
   }
 }
-
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-}
diff --git a/packages/neuron-ui/src/components/NFTSend/index.tsx b/packages/neuron-ui/src/components/NFTSend/index.tsx
@@ -1,13 +1,11 @@
 import React, { useState, useCallback, useReducer, useMemo, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
 import { useState as useGlobalState, useDispatch, AppActions } from 'states'
 import { isMainnet as isMainnetUtil, isSuccessResponse, validateAddress } from 'utils'
 import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats'
 import TextField from 'widgets/TextField'
+import Dialog from 'widgets/Dialog'
 import { generateNFTSendTransaction } from 'services/remote'
-import Button from 'widgets/Button'
-import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { isErrorWithI18n } from 'exceptions'
 import styles from './NFTSend.module.scss'
 
@@ -36,8 +34,20 @@ const reducer: React.Reducer<typeof initState, { type: Fields; payload: string }
   }
 }
 
-const NFTSend = () => {
-  const { nftId } = useParams<{ nftId: string }>()
+const NFTSend = ({
+  onCancel,
+  cell,
+}: {
+  onCancel: () => void
+  cell: {
+    nftId: string
+    outPoint: {
+      index: string
+      txHash: string
+    }
+  }
+}) => {
+  const { nftId, outPoint } = cell
   const {
     wallet: { id: walletId },
     app: {
@@ -95,15 +105,13 @@ const NFTSend = () => {
             actionType: 'send-nft',
           },
         })
+
+        onCancel()
       }
     },
     [isSubmittable, globalDispatch, walletId]
   )
 
-  const location = useLocation()
-
-  const outPoint = location.state?.outPoint
-
   useEffect(() => {
     const clearTimer = () => {
       if (timerRef.current) {
@@ -144,44 +152,36 @@ const NFTSend = () => {
   }, [isSubmittable, globalDispatch, sendState, walletId, outPoint, suggestFeeRate])
 
   return (
-    <div>
-      <div className={styles.title}>{`#${nftId} mNFT`}</div>
-      <form onSubmit={onSubmit}>
-        <div className={styles.card}>
-          <div className={styles.send}>
-            <TextField
-              label={t('s-udt.send.address')}
-              value={sendState.address}
-              required
-              field={Fields.Address}
-              onChange={onInput}
-              error={addressError}
-            />
-            <div className={styles.description}>
-              <TextField
-                label={t('s-udt.send.description')}
-                value={sendState.description}
-                field={Fields.Description}
-                onChange={onInput}
-                placeholder={t('s-udt.send.click-to-edit')}
-                className={styles.descriptionField}
-              />
-            </div>
-            <div className={styles.remoteError}>
-              {remoteError ? (
-                <>
-                  <Attention />
-                  {remoteError}
-                </>
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </form>
-      <div className={styles.footer}>
-        <Button type="submit" label={t('s-udt.send.submit')} onClick={onSubmit} disabled={!isSubmittable} />
+    <Dialog
+      show
+      title={`${t('special-assets.transfer-nft')} #${nftId} mNFT`}
+      disabled={!isSubmittable}
+      onCancel={onCancel}
+      onConfirm={onSubmit}
+      confirmText={t('wizard.next')}
+    >
+      <div className={styles.container}>
+        <TextField
+          className={styles.textFieldClass}
+          label={t('migrate-sudt.address')}
+          placeholder={t('s-udt.send.input-address')}
+          value={sendState.address}
+          rows={sendState.address ? 2 : 1}
+          field={Fields.Address}
+          onChange={onInput}
+          error={addressError}
+        />
+        <TextField
+          label={t('s-udt.send.description')}
+          value={sendState.description}
+          field={Fields.Description}
+          onChange={onInput}
+          placeholder={t('s-udt.send.input-description')}
+          className={styles.descriptionField}
+          error={remoteError}
+        />
       </div>
-    </div>
+    </Dialog>
   )
 }
 

diff --git a/packages/neuron-ui/src/components/SpecialAssetList/hooks.ts b/packages/neuron-ui/src/components/SpecialAssetList/hooks.ts
@@ -15,7 +15,7 @@ import {
   useDialogWrapper,
   useDidMount,
 } from 'utils'
-import { MS_PER_EPOCHS } from 'utils/const'
+import { MILLISECONDS } from 'utils/const'
 import { AssetInfo, ChequeAssetInfo, NFTType } from '.'
 
 export const useMigrate = () => {
@@ -131,8 +131,8 @@ export const useGetSpecialAssetColumnInfo = ({
         target: Number(targetEpochInfo.number) + Math.min(targetEpochFraction, 1),
         current: Number(currentEpochInfo.number) + Number(currentEpochInfo.index) / Number(currentEpochInfo.length),
       }
-      targetTime = bestKnownBlockTimestamp + (epochsInfo.target - epochsInfo.current) * MS_PER_EPOCHS
-      if (epochsInfo.target - epochsInfo.current > 0) {
+      targetTime = bestKnownBlockTimestamp + (epochsInfo.target - epochsInfo.current) * MILLISECONDS
+      if (epochsInfo.target > epochsInfo.current) {
         status = 'locked-asset'
       } else {
         status = 'claim-asset'

diff --git a/packages/neuron-ui/src/components/SpecialAssetList/index.tsx b/packages/neuron-ui/src/components/SpecialAssetList/index.tsx
@@ -34,6 +34,7 @@ import SUDTMigrateDialog from 'components/SUDTMigrateDialog'
 import SUDTMigrateToNewAccountDialog from 'components/SUDTMigrateToNewAccountDialog'
 import SUDTMigrateToExistAccountDialog from 'components/SUDTMigrateToExistAccountDialog'
 import PageContainer from 'components/PageContainer'
+import NFTSend from 'components/NFTSend'
 import { useGetAssetAccounts, useGetSpecialAssetColumnInfo } from './hooks'
 
 import styles from './specialAssetList.module.scss'
@@ -109,6 +110,16 @@ const SpecialAssetList = () => {
   const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState<boolean>(false)
   const [isNewAccountDialogOpen, setIsNewAccountDialogOpen] = useState<boolean>(false)
   const [isExistAccountDialogOpen, setIsExistAccountDialogOpen] = useState<boolean>(false)
+  const [nFTSendCell, setNFTSendCell] = useState<
+    | {
+        nftId: string
+        outPoint: {
+          index: string
+          txHash: string
+        }
+      }
+    | undefined
+  >()
   const [migrateTokenInfo, setMigrateTokenInfo] = useState<Controller.GetTokenInfoList.TokenInfo | undefined>()
 
   const onClickMigrate = useCallback(
@@ -290,10 +301,9 @@ const SpecialAssetList = () => {
         return
       }
       if (cell.customizedAssetInfo.type === 'NFT') {
-        navigate(`${RoutePath.NFTSend}/${nftFormatter(cell.type?.args, true)}`, {
-          state: {
-            outPoint: cell.outPoint,
-          },
+        setNFTSendCell({
+          nftId: nftFormatter(cell.type?.args, true),
+          outPoint: cell.outPoint,
         })
         return
       }
@@ -509,6 +519,8 @@ const SpecialAssetList = () => {
           isLightClient={isLightClient}
         />
       )}
+
+      {nFTSendCell ? <NFTSend cell={nFTSendCell} onCancel={() => setNFTSendCell(undefined)} /> : null}
     </PageContainer>
   )
 }

diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
@@ -954,6 +954,8 @@
         "title": "Send",
         "address": "Send to",
         "address-placeholder": "Please input address",
+        "input-address": "Please input address",
+        "input-description": "Please input description, optional",
         "amount": "Amount",
         "amount-placeholder": "Please input amount",
         "description": "Description",

diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
@@ -924,6 +924,8 @@
         "title": "轉帳",
         "address": "收款地址",
         "address-placeholder": "請輸入收款地址",
+        "input-address": "請輸入地址",
+        "input-description": "請輸入備註，選填",
         "amount": "转账金額",
         "amount-placeholder": "請輸入转账金額",
         "description": "備註",

diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
@@ -946,6 +946,8 @@
         "title": "转账",
         "address": "收款地址",
         "address-placeholder": "请输入收款地址",
+        "input-address": "请输入地址",
+        "input-description": "请输入转账，选填",
         "amount": "转账金额",
         "amount-placeholder": "请输入转账金额",
         "description": "备注",

diff --git a/packages/neuron-ui/src/router.tsx b/packages/neuron-ui/src/router.tsx
@@ -20,7 +20,6 @@ import SUDTAccountList from 'components/SUDTAccountList'
 import SUDTSend from 'components/SUDTSend'
 import ImportHardware from 'components/ImportHardware'
 import OfflineSign from 'components/OfflineSign'
-import NFTSend from 'components/NFTSend'
 import Settings from 'components/Settings'
 import SignAndVerify from 'components/SignAndVerify'
 import MultisigAddress from 'components/MultisigAddress'
@@ -245,31 +244,6 @@ const mainRouterConfig: RouteObject[] = [
         ),
         children: [...toolsRouters],
       },
-      {
-        path: RoutePath.NFTSend,
-        children: [
-          {
-            path: '',
-            element: (
-              <>
-                <NFTSend />
-                <Outlet />
-              </>
-            ),
-            children: [...toolsRouters],
-          },
-          {
-            path: ':nftId',
-            element: (
-              <>
-                <NFTSend />
-                <Outlet />
-              </>
-            ),
-            children: [...toolsRouters],
-          },
-        ],
-      },
       {
         path: RoutePath.Settings,
         element: (

diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts
@@ -70,4 +70,4 @@ export const LIGHT_NETWORK_TYPE = 2
 export const METHOD_NOT_FOUND = -32601
 
 export const MAX_M_N_NUMBER = 255
-export const MS_PER_EPOCHS = 4 * 60 * 60 * 1000
+export const MILLISECONDS = HOURS_PER_EPOCH * 60 * 60 * 1000
diff --git a/packages/neuron-ui/src/utils/enums.ts b/packages/neuron-ui/src/utils/enums.ts
@@ -28,7 +28,6 @@ export enum RoutePath {
   SpecialAssets = '/special-assets',
   SUDTAccountList = '/s-udt/accounts',
   SUDTSend = '/s-udt/send',
-  NFTSend = '/nft',
   ImportHardware = '/import-hardware',
   OfflineSign = 'offline-sign',
   SignVerify = 'sign-verify',