diff --git a/packages/neuron-ui/src/components/NFTSend/NFTSend.module.scss b/packages/neuron-ui/src/components/NFTSend/NFTSend.module.scss index 1e1bacf3b3..561200de55 100644 --- 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 index 14ecba7c79..48545d5402 100644 --- 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 { - 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 ( -
-
{`#${nftId} mNFT`}
-
-
-
- -
- -
-
- {remoteError ? ( - <> - - {remoteError} - - ) : null} -
-
-
-
-
-
+ ) } diff --git a/packages/neuron-ui/src/components/SpecialAssetList/hooks.ts b/packages/neuron-ui/src/components/SpecialAssetList/hooks.ts index 126e2713e6..93819fccb6 100644 --- 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 index a8a1aca083..3917f8350d 100644 --- 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(false) const [isNewAccountDialogOpen, setIsNewAccountDialogOpen] = useState(false) const [isExistAccountDialogOpen, setIsExistAccountDialogOpen] = useState(false) + const [nFTSendCell, setNFTSendCell] = useState< + | { + nftId: string + outPoint: { + index: string + txHash: string + } + } + | undefined + >() const [migrateTokenInfo, setMigrateTokenInfo] = useState() 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 ? setNFTSendCell(undefined)} /> : null} ) } diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json index 231749a64f..9450151e06 100644 --- 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 index 9085da6488..4a437feb2e 100644 --- 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 index 3a8320a3f5..2d00fcaf72 100644 --- 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 index 0a701cf31e..44c0ba3c58 100644 --- 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: ( - <> - - - - ), - children: [...toolsRouters], - }, - { - path: ':nftId', - element: ( - <> - - - - ), - children: [...toolsRouters], - }, - ], - }, { path: RoutePath.Settings, element: ( diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts index 8517319924..25b89b8587 100644 --- 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 index 91406db039..3d132c5cb5 100644 --- 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',