diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json index 61b357f6dc..2bb23a319b 100644 --- a/packages/neuron-ui/package.json +++ b/packages/neuron-ui/package.json @@ -50,6 +50,8 @@ "last 2 chrome versions" ], "dependencies": { + "@ckb-lumos/base": "0.21.0-next.1", + "@ckb-lumos/codec": "0.21.0-next.1", "@nervosnetwork/ckb-sdk-core": "0.109.0", "@nervosnetwork/ckb-sdk-utils": "0.109.0", "canvg": "2.0.0", diff --git a/packages/neuron-ui/src/components/NFTSend/index.tsx b/packages/neuron-ui/src/components/NFTSend/index.tsx index e900dd15bb..c68e3e749e 100644 --- a/packages/neuron-ui/src/components/NFTSend/index.tsx +++ b/packages/neuron-ui/src/components/NFTSend/index.tsx @@ -1,6 +1,6 @@ -import React, { useState, useCallback, useReducer, useMemo, useRef, useEffect } from 'react' +import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useState as useGlobalState, useDispatch, AppActions } from 'states' +import { AppActions, useDispatch, useState as useGlobalState } from 'states' import { isMainnet as isMainnetUtil, isSuccessResponse, validateAddress } from 'utils' import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats' import TextField from 'widgets/TextField' @@ -8,6 +8,8 @@ import Dialog from 'widgets/Dialog' import { generateNFTSendTransaction } from 'services/remote' import { isErrorWithI18n } from 'exceptions' import styles from './NFTSend.module.scss' +import { NFTType } from '../SpecialAssetList' +import { generateSporeSendTransaction } from '../../services/remote/spore' enum Fields { Address = 'address', @@ -38,7 +40,9 @@ const NFTSend = ({ onCancel, cell, onSuccess, + nftType = NFTType.NFT, }: { + nftType?: NFTType onCancel: () => void cell: { nftId: string @@ -138,7 +142,17 @@ const NFTSend = ({ feeRate: `${suggestFeeRate}`, } - generateNFTSendTransaction(params) + const generate = (() => { + switch (nftType) { + case NFTType.Spore: { + return generateSporeSendTransaction + } + default: + return generateNFTSendTransaction + } + })() + + generate(params) .then(res => { if (isSuccessResponse(res)) { globalDispatch({ @@ -156,10 +170,15 @@ const NFTSend = ({ return clearTimer }, [isSubmittable, globalDispatch, sendState, walletId, outPoint, suggestFeeRate]) + const displayNftType = (() => { + if (nftType === NFTType.Spore) return 'Spore' + return 'mNFT' + })() + return ( { const [isExistAccountDialogOpen, setIsExistAccountDialogOpen] = useState(false) const [nFTSendCell, setNFTSendCell] = useState< | { + nftType?: NFTType nftId: string outPoint: { index: string @@ -286,6 +292,16 @@ const SpecialAssetList = () => { }) return } + if (cell.customizedAssetInfo.type === 'Spore') { + setNFTSendCell({ + // unnecessary id for the spore + nftId: cell.type?.args ?? '', + outPoint: cell.outPoint, + nftType: NFTType.Spore, + }) + return + } + const handleRes = (actionType: 'unlock' | 'withdraw-cheque' | 'claim-cheque') => (res: ControllerResponse) => { if (isSuccessResponse(res)) { @@ -392,7 +408,22 @@ const SpecialAssetList = () => { isBalance: true, minWidth: '200px', render(_, __, item, show) { - const { amount } = handleGetSpecialAssetColumnInfo(item) + const { amount, isSpore, sporeClusterInfo } = handleGetSpecialAssetColumnInfo(item) + + if (isSpore && item.type && show) { + const formattedSporeInfo = sporeFormatter({ + args: item.type.args, + data: item.data, + truncate: Infinity, + clusterName: sporeClusterInfo?.name, + }) + return ( + + {amount} + + ) + } + return show ? amount : HIDE_BALANCE }, }, @@ -413,7 +444,6 @@ const SpecialAssetList = () => { return (