From 2515fa8ad2d21c078708e01b898e743a9ffa384f Mon Sep 17 00:00:00 2001 From: qwang1113 Date: Fri, 27 Oct 2023 15:02:07 +0800 Subject: [PATCH 1/2] fix: remove nft market codes --- packages/engine/src/managers/nft.ts | 4 - packages/kit-bg/src/services/ServiceNFT.ts | 171 +------- .../Root/Main/Tab/routes/AppRootTabHome.ts | 5 - .../Root/Main/Tab/routes/AppRootTabNFT.ts | 44 -- .../kit/src/routes/Root/Modal/NFTMarket.tsx | 5 - packages/kit/src/routes/routesEnum.ts | 3 - packages/kit/src/routes/types.ts | 8 - .../NFTMarket/CollectionDetail/AssetsList.tsx | 411 ------------------ .../CollectionDetail/CollectionInfo.tsx | 153 ------- .../CollectionDetail/Screen/index.tsx | 102 ----- .../CollectionDetail/Screen/index.web.tsx | 181 -------- .../CollectionDetail/TransactionList.tsx | 361 --------------- .../NFTMarket/CollectionDetail/context.ts | 34 -- .../NFTMarket/CollectionDetail/index.tsx | 186 -------- .../views/NFTMarket/CollectionDetail/type.ts | 13 - .../views/NFTMarket/DateSelector/index.tsx | 71 --- .../src/views/NFTMarket/Home/Banner/index.tsx | 65 --- .../Home/LiveMinting/Container/Desktop.tsx | 163 ------- .../Home/LiveMinting/Container/Mobile.tsx | 108 ----- .../NFTMarket/Home/LiveMinting/context.ts | 25 -- .../NFTMarket/Home/LiveMinting/index.tsx | 200 --------- .../CollectionCard/CollectionCard.native.tsx | 53 --- .../CollectionCard/CollectionCard.tsx | 63 --- .../Home/NotableCollections/EmptyView.tsx | 40 -- .../Home/NotableCollections/index.tsx | 133 ------ .../views/NFTMarket/Home/PageHeader/index.tsx | 142 ------ .../Stats/MarketCap/Container/Desktop.tsx | 142 ------ .../Home/Stats/MarketCap/Container/Mobile.tsx | 115 ----- .../NFTMarket/Home/Stats/MarketCap/index.tsx | 53 --- .../Home/Stats/Ranking/Container/Desktop.tsx | 317 -------------- .../Home/Stats/Ranking/Container/Mobile.tsx | 28 +- .../NFTMarket/Home/Stats/Ranking/index.tsx | 62 --- .../src/views/NFTMarket/Home/Stats/context.ts | 29 -- .../src/views/NFTMarket/Home/Stats/index.tsx | 238 ---------- packages/kit/src/views/NFTMarket/Home/hook.ts | 41 +- .../kit/src/views/NFTMarket/Home/index.tsx | 87 ---- .../views/NFTMarket/LiveMintingList/index.tsx | 87 ---- .../Modals/NFTAttributesModal/context.ts | 20 - .../Modals/NFTAttributesModal/index.tsx | 257 ----------- .../Modals/NFTAttributesModal/refs.ts | 81 ---- .../kit/src/views/NFTMarket/Modals/type.ts | 13 +- .../src/views/NFTMarket/StatsList/index.tsx | 76 ---- .../EVMAsset/EVMAssetDetailContent.tsx | 108 ++--- 43 files changed, 50 insertions(+), 4448 deletions(-) delete mode 100644 packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabNFT.ts delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/AssetsList.tsx delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/CollectionInfo.tsx delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.web.tsx delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/TransactionList.tsx delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/context.ts delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/CollectionDetail/type.ts delete mode 100644 packages/kit/src/views/NFTMarket/DateSelector/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Banner/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/LiveMinting/Container/Desktop.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/LiveMinting/Container/Mobile.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/LiveMinting/context.ts delete mode 100644 packages/kit/src/views/NFTMarket/Home/LiveMinting/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/NotableCollections/CollectionCard/CollectionCard.native.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/NotableCollections/CollectionCard/CollectionCard.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/NotableCollections/EmptyView.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/NotableCollections/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/PageHeader/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/MarketCap/Container/Desktop.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/MarketCap/Container/Mobile.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/MarketCap/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/Ranking/Container/Desktop.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/Ranking/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/context.ts delete mode 100644 packages/kit/src/views/NFTMarket/Home/Stats/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Home/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/LiveMintingList/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Modals/NFTAttributesModal/context.ts delete mode 100644 packages/kit/src/views/NFTMarket/Modals/NFTAttributesModal/index.tsx delete mode 100644 packages/kit/src/views/NFTMarket/Modals/NFTAttributesModal/refs.ts delete mode 100644 packages/kit/src/views/NFTMarket/StatsList/index.tsx diff --git a/packages/engine/src/managers/nft.ts b/packages/engine/src/managers/nft.ts index fb6500b73a2..75292274f59 100644 --- a/packages/engine/src/managers/nft.ts +++ b/packages/engine/src/managers/nft.ts @@ -30,10 +30,6 @@ import { IDecodedTxActionType, IDecodedTxDirection } from '../vaults/types'; import { isAllNetworks } from './network'; -export function getNFTListKey(accountId: string, networkId: string) { - return `${accountId.toLowerCase()}-${networkId}`.toLowerCase(); -} - export const isCollectibleSupportedChainId = (networkId?: string) => { if (!networkId) return false; if (isAllNetworks(networkId)) return true; diff --git a/packages/kit-bg/src/services/ServiceNFT.ts b/packages/kit-bg/src/services/ServiceNFT.ts index 4480ab656a5..9c3d803fd01 100644 --- a/packages/kit-bg/src/services/ServiceNFT.ts +++ b/packages/kit-bg/src/services/ServiceNFT.ts @@ -4,26 +4,19 @@ import simpleDb from '@onekeyhq/engine/src/dbs/simple/simpleDb'; import { getFiatEndpoint } from '@onekeyhq/engine/src/endpoint'; import { OneKeyInternalError } from '@onekeyhq/engine/src/errors'; import * as nft from '@onekeyhq/engine/src/managers/nft'; -import { NFTDataType, getNFTListKey } from '@onekeyhq/engine/src/managers/nft'; -import type { Account } from '@onekeyhq/engine/src/types/account'; +import { NFTDataType } from '@onekeyhq/engine/src/managers/nft'; import type { Collection, - CollectionAttribute, MarketPlace, - NFTAsset, NFTAssetMeta, NFTBTCAssetModel, NFTListItems, - NFTMarketCapCollection, NFTMarketRanking, NFTPNL, NFTServiceResp, NFTTransaction, } from '@onekeyhq/engine/src/types/nft'; -import { - setNFTPriceType, - setNFTSymbolPrice, -} from '@onekeyhq/kit/src/store/reducers/nft'; +import { setNFTPriceType } from '@onekeyhq/kit/src/store/reducers/nft'; import { EOverviewScanTaskType } from '@onekeyhq/kit/src/views/Overview/types'; import { backgroundClass, @@ -75,27 +68,6 @@ class ServiceNFT extends ServiceBase { return data; } - @backgroundMethod() - async getCollectionAttributes({ - chain, - contractAddress, - }: { - chain: string; - contractAddress: string; - }) { - const urlParams = new URLSearchParams({ chain, contractAddress }); - const url = `${this.baseUrl}/collection/attributes?${urlParams.toString()}`; - - const { data, success } = await this.client - .get>(url) - .then((resp) => resp.data) - .catch(() => ({ success: false, data: [] })); - if (!success) { - return undefined; - } - return data; - } - @backgroundMethod() async searchCollections({ chain, name }: { chain: string; name: string }) { const url = `${this.baseUrl}/collection/search?chain=${chain}&name=${name}`; @@ -109,61 +81,6 @@ class ServiceNFT extends ServiceBase { return data; } - @backgroundMethod() - async getCollectionAssets({ - chain, - contractAddress, - cursor, - limit = 50, - }: { - chain: string; - contractAddress: string; - cursor?: string; - limit?: number; - }) { - let url = `${this.baseUrl}/collection/assets?chain=${chain}&contractAddress=${contractAddress}&limit=${limit}`; - if (cursor) { - url += `&cursor=${cursor}`; - } - const { data, success } = await this.client - .get< - NFTServiceResp<{ total: number; next: string; content: NFTAsset[] }> - >(url) - .then((resp) => resp.data) - .catch(() => ({ - success: false, - data: { total: 0, next: undefined, content: [] as NFTAsset[] }, - })); - if (!success) { - return undefined; - } - return data; - } - - @backgroundMethod() - async getAssetsWithAttributes(params: { - chain: string; - contractAddress: string; - attributes: any[]; - limit?: number; - cursor?: string; - }) { - const apiUrl = `${this.baseUrl}/assets/attributes`; - const { data, success } = await this.client - .post< - NFTServiceResp<{ total: number; next: string; content: NFTAsset[] }> - >(apiUrl, params) - .then((resp) => resp.data) - .catch(() => ({ - success: false, - data: { total: 0, next: undefined, content: [] as NFTAsset[] }, - })); - if (!success) { - return undefined; - } - return data; - } - @backgroundMethod() async getCollectionTransactions({ chain, @@ -209,30 +126,6 @@ class ServiceNFT extends ServiceBase { return data; } - @backgroundMethod() - async getMarketCapCollection({ - chain, - limit, - }: { - chain?: string; - limit?: number; - }) { - let url = `${this.baseUrl}/market/marketCap?chain=${ - chain ?? OnekeyNetwork.eth - }`; - if (limit) { - url += `&limit=${limit}`; - } - const { data, success } = await this.client - .get>(url) - .then((resp) => resp.data) - .catch(() => ({ success: false, data: [] as NFTMarketCapCollection[] })); - if (!success) { - return []; - } - return data; - } - @backgroundMethod() async getMarketRanking({ chain, time }: { chain?: string; time?: string }) { const url = `${this.baseUrl}/market/ranking?chain=${ @@ -248,34 +141,6 @@ class ServiceNFT extends ServiceBase { return data; } - @backgroundMethod() - async getMarketCollection() { - const url = `${this.baseUrl}/market/collection`; - const { data, success } = await this.client - .get>(url) - .then((resp) => resp.data) - .catch(() => ({ success: false, data: [] as Collection[] })); - if (!success) { - return []; - } - return data; - } - - @backgroundMethod() - async getLiveMinting({ chain, limit }: { chain?: string; limit?: number }) { - const url = `${this.baseUrl}/market/liveMint?chain=${ - chain ?? OnekeyNetwork.eth - }&limit=${limit ?? 5}`; - const { data, success } = await this.client - .get>(url) - .then((resp) => resp.data) - .catch(() => ({ success: false, data: [] as NFTAsset[] })); - if (!success) { - return []; - } - return data; - } - @backgroundMethod() async batchAsset(params: { ignoreError?: boolean; @@ -326,23 +191,6 @@ class ServiceNFT extends ServiceBase { return data; } - @backgroundMethod() - async batchLocalCollection({ - networkId, - account, - }: { - networkId: string; - account: Account; - }): Promise { - const key = getNFTListKey(account.address, networkId); - const items = await simpleDb.nft.getNFTs(key); - if (items) { - const { engine } = this.backgroundApi; - const vault = await engine.getVault({ networkId, accountId: account.id }); - return vault.getUserNFTAssets({ serviceData: items }); - } - } - @backgroundMethod() async fetchNFT({ accountId, @@ -388,21 +236,6 @@ class ServiceNFT extends ServiceBase { return nft.getAllAssetsFromLocal(params); } - @backgroundMethod() - async fetchSymbolPrice(networkId: string) { - const price = await nft.getNFTSymbolPrice(networkId); - if (price) { - const { dispatch } = this.backgroundApi; - dispatch( - setNFTSymbolPrice({ - networkId, - price, - }), - ); - return price; - } - } - @backgroundMethod() updatePriceType(priceType: 'floorPrice' | 'lastSalePrice') { const { dispatch } = this.backgroundApi; diff --git a/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabHome.ts b/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabHome.ts index 0f9981eae25..d6883f18059 100644 --- a/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabHome.ts +++ b/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabHome.ts @@ -3,7 +3,6 @@ import { withTabLayout } from '@onekeyhq/components/src/Layout/withTabLayout'; import { toFocusedLazy } from '../../../../../components/LazyRenderWhenFocus'; import BulkSender from '../../../../../views/BulkSender'; import FullTokenList from '../../../../../views/FullTokenList/FullTokenList'; -import NFTMarketCollectionScreen from '../../../../../views/NFTMarket/CollectionDetail'; import PNLDetailScreen from '../../../../../views/NFTMarket/PNL/PNLDetail'; import OverviewDefiListScreen from '../../../../../views/Overview'; import RevokePage from '../../../../../views/Revoke'; @@ -49,10 +48,6 @@ const config: TabRouteConfig = { name: HomeRoutes.RevokeRedirect2, component: RevokeRedirectPage, }, - { - name: HomeRoutes.NFTMarketCollectionScreen, - component: NFTMarketCollectionScreen, - }, { name: HomeRoutes.NFTPNLScreen, component: PNLDetailScreen, diff --git a/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabNFT.ts b/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabNFT.ts deleted file mode 100644 index a27601c6d4d..00000000000 --- a/packages/kit/src/routes/Root/Main/Tab/routes/AppRootTabNFT.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { withTabLayout } from '@onekeyhq/components/src/Layout/withTabLayout'; - -import { toFocusedLazy } from '../../../../../components/LazyRenderWhenFocus'; -import NFTMarketCollectionScreen from '../../../../../views/NFTMarket/CollectionDetail'; -import NFTMarket from '../../../../../views/NFTMarket/Home'; -import NFTMarketLiveMintingList from '../../../../../views/NFTMarket/LiveMintingList'; -import PNLDetailScreen from '../../../../../views/NFTMarket/PNL/PNLDetail'; -import NFTMarketStatsList from '../../../../../views/NFTMarket/StatsList'; -import { HomeRoutes, TabRoutes } from '../../../../routesEnum'; - -import { tabRoutesConfigBaseMap } from './tabRoutes.base'; - -import type { TabRouteConfig } from '../../../../types'; - -const name = TabRoutes.NFT; -const config: TabRouteConfig = { - ...tabRoutesConfigBaseMap[name], - component: withTabLayout( - toFocusedLazy(NFTMarket, { - rootTabName: name, - }), - name, - ), - children: [ - { - name: HomeRoutes.NFTMarketStatsList, - component: NFTMarketStatsList, - }, - { - name: HomeRoutes.NFTMarketLiveMintingList, - component: NFTMarketLiveMintingList, - }, - { - name: HomeRoutes.NFTMarketCollectionScreen, - component: NFTMarketCollectionScreen, - }, - { - name: HomeRoutes.NFTPNLScreen, - component: PNLDetailScreen, - alwaysShowBackButton: true, - }, - ], -}; -export default config; diff --git a/packages/kit/src/routes/Root/Modal/NFTMarket.tsx b/packages/kit/src/routes/Root/Modal/NFTMarket.tsx index 1827e2c8aab..e77a02d28bf 100644 --- a/packages/kit/src/routes/Root/Modal/NFTMarket.tsx +++ b/packages/kit/src/routes/Root/Modal/NFTMarket.tsx @@ -2,7 +2,6 @@ import { useIsVerticalLayout } from '@onekeyhq/components'; import CalculatorModal from '../../../views/NFTMarket/Modals/Calculator'; import MarketPlaceList from '../../../views/NFTMarket/Modals/Calculator/MarketPlaceList'; -import NFTAttributesModal from '../../../views/NFTMarket/Modals/NFTAttributesModal'; import NFTSearchModal from '../../../views/NFTMarket/Modals/NFTSearchModal'; import ShareNFTPNLModal from '../../../views/NFTMarket/Modals/Share'; import { NFTMarketRoutes } from '../../../views/NFTMarket/Modals/type'; @@ -14,10 +13,6 @@ import type { NFTMarketRoutesParams } from '../../../views/NFTMarket/Modals/type const NFTMarketNavigator = createStackNavigator(); const modalRoutes = [ - { - name: NFTMarketRoutes.FilterModal, - component: NFTAttributesModal, - }, { name: NFTMarketRoutes.SearchModal, component: NFTSearchModal, diff --git a/packages/kit/src/routes/routesEnum.ts b/packages/kit/src/routes/routesEnum.ts index 275a26948f4..3706d53d042 100644 --- a/packages/kit/src/routes/routesEnum.ts +++ b/packages/kit/src/routes/routesEnum.ts @@ -51,9 +51,6 @@ export enum HomeRoutes { BulkSender = 'BulkSender', // **** NFT Tab - NFTMarketStatsList = 'NFTMarketStatsList', - NFTMarketLiveMintingList = 'NFTMarketLiveMintingList', - NFTMarketCollectionScreen = 'NFTMarketCollectionScreen', NFTPNLScreen = 'NFTPNLScreen', // **** Me Tab diff --git a/packages/kit/src/routes/types.ts b/packages/kit/src/routes/types.ts index 096ba84c79f..c638ba2cafc 100644 --- a/packages/kit/src/routes/types.ts +++ b/packages/kit/src/routes/types.ts @@ -162,14 +162,6 @@ export type HomeRoutesParams = { marketTokenId: string; }; [HomeRoutes.Revoke]: undefined; - [HomeRoutes.NFTMarketStatsList]: { network: Network; selectedIndex?: number }; - [HomeRoutes.NFTMarketLiveMintingList]: { network: Network }; - [HomeRoutes.NFTMarketCollectionScreen]: { - networkId: string; - contractAddress: string; - collection?: Collection; - title?: string; - }; [HomeRoutes.RevokeRedirect]: undefined; [HomeRoutes.RevokeRedirect2]: undefined; [HomeRoutes.NFTPNLScreen]: undefined; diff --git a/packages/kit/src/views/NFTMarket/CollectionDetail/AssetsList.tsx b/packages/kit/src/views/NFTMarket/CollectionDetail/AssetsList.tsx deleted file mode 100644 index e04f57ba0c7..00000000000 --- a/packages/kit/src/views/NFTMarket/CollectionDetail/AssetsList.tsx +++ /dev/null @@ -1,411 +0,0 @@ -import type { FC } from 'react'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; - -import { useNavigation } from '@react-navigation/native'; -import { Column, Row } from 'native-base'; -import { TouchableOpacity } from 'react-native'; - -import { - Box, - CustomSkeleton, - Skeleton, - Text, - useIsVerticalLayout, - useUserDevice, -} from '@onekeyhq/components'; -import { Tabs } from '@onekeyhq/components/src/CollapsibleTabView'; -import type { NFTAsset } from '@onekeyhq/engine/src/types/nft'; -import type { CollectiblesRoutesParams } from '@onekeyhq/kit/src/routes/Root/Modal/Collectibles'; -import { ModalRoutes, RootRoutes } from '@onekeyhq/kit/src/routes/routesEnum'; -import type { ModalScreenProps } from '@onekeyhq/kit/src/routes/types'; - -import backgroundApiProxy from '../../../background/instance/backgroundApiProxy'; -import { useGridListLayout } from '../../../hooks/useGridListLayout'; -import { useIsMounted } from '../../../hooks/useIsMounted'; -import { CollectiblesModalRoutes } from '../../../routes/routesEnum'; -import NFTListImage from '../../Wallet/NFT/NFTList/NFTListImage'; - -import { useCollectionDetailContext } from './context'; - -import type { ListProps } from './type'; -import type { ListRenderItem } from 'react-native'; - -export function getRequestLimit(numberColumn: number) { - switch (numberColumn) { - case 3: - return 45; - case 4: - return 48; - case 5: - return 50; - default: // 6 - return 48; - } -} -type FooterProps = { - margin: number; - cardWidth: number; - numColumns: number; - marginBottom: number; -}; - -const MAX_PAGE_CONTAINER_WIDTH = 992; - -export const NFTLoadingView: FC = ({ - numColumns, - margin, - cardWidth, - marginBottom, -}) => { - const numRows = 2; - - const rowArray = new Array(numRows).fill(0); - const colArray = new Array(numColumns).fill(0); - const isSmallScreen = useIsVerticalLayout(); - return ( - - {rowArray.map((col, rowIndex) => ( - - {colArray.map((row, colIndex) => ( - - - - - - - ))} - - ))} - - ); -}; -type NavigationProps = ModalScreenProps; - -export const AssetListCell: FC<{ - onPress: () => void; - asset: NFTAsset; - cardWidth: number; - margin?: number; - marginBottom?: number; -}> = ({ asset, cardWidth, margin, marginBottom, ...props }) => { - let name = ''; - if (asset.name && asset.name.length > 0) { - name = asset.name; - } else { - name = `#${asset.tokenId as string}`; - } - let price = ''; - if (asset.latestTradePrice && typeof asset.latestTradePrice === 'number') { - price = `${asset.latestTradePrice} ${asset.latestTradeSymbol as string}`; - } - const { onPress } = props; - const isSmallScreen = useIsVerticalLayout(); - - return ( - - - - - {name} - - {price ? ( - - {price} - - ) : null} - - - ); -}; -const AssetsList = ({ - contractAddress, - networkId, - ListHeaderComponent, -}: ListProps) => { - const isSmallScreen = useIsVerticalLayout(); - const { screenWidth } = useUserDevice(); - const isMounted = useIsMounted(); - const navigation = useNavigation(); - - const context = useCollectionDetailContext()?.context; - const setContext = useCollectionDetailContext()?.setContext; - const cursor = useRef(); - const cursorOfFilter = useRef(); - const { serviceNFT } = backgroundApiProxy; - - const padding = isSmallScreen ? 16 : 32; - const marginBottom = isSmallScreen ? 16 : 24; - const margin = isSmallScreen ? 8 : 24; - const pageWidth = isSmallScreen - ? screenWidth - 16 * 2 - : Math.min(MAX_PAGE_CONTAINER_WIDTH, screenWidth - 224 - padding * 2); - - const { cardWidth, numColumns } = useGridListLayout({ - maxCardWidth: 145, - numColumns: 3, - margin, - pageWidth, - }); - - const getData = useCallback( - async (param: { - chain: string; - contractAddress: string; - cursor?: string; - limit?: number; - }) => { - const data = await serviceNFT.getCollectionAssets(param); - if (data?.content) { - cursor.current = data.next; - if (setContext) { - setContext((ctx) => { - if (context?.refreshing) { - return { ...ctx, assetList: data.content }; - } - return { ...ctx, assetList: ctx.assetList.concat(data?.content) }; - }); - } - } - }, - [context?.refreshing, serviceNFT, setContext], - ); - - useEffect(() => { - (() => { - if ( - context?.selectedIndex === 0 && - isMounted && - context?.attributes.length === 0 - ) { - if (context?.refreshing) { - cursor.current = undefined; - } - if (cursor.current !== null) { - getData({ - chain: networkId, - contractAddress, - cursor: cursor.current, - limit: getRequestLimit(numColumns), - }).then(() => { - if (setContext) { - setContext((ctx) => ({ ...ctx, refreshing: false })); - } - }); - } - } - })(); - }, [ - context?.attributes.length, - context?.refreshing, - context?.selectedIndex, - contractAddress, - getData, - isMounted, - networkId, - numColumns, - setContext, - ]); - - const getDataWithAttributes = useCallback( - async (param: { - chain: string; - contractAddress: string; - attributes: any[]; - cursor?: string; - limit?: number; - }) => { - const data = await serviceNFT.getAssetsWithAttributes(param); - if (data?.content) { - cursorOfFilter.current = data.next; - if (setContext) { - setContext((ctx) => { - if (context?.refreshing) { - return { ...ctx, filterAssetList: data.content }; - } - return { - ...ctx, - filterAssetList: ctx.filterAssetList.concat(data?.content), - }; - }); - } - } - }, - [context?.refreshing, serviceNFT, setContext], - ); - - useEffect(() => { - (() => { - if ( - context?.selectedIndex === 0 && - isMounted && - context?.attributes.length > 0 - ) { - if (context?.refreshing) { - cursorOfFilter.current = undefined; - if (setContext) { - setContext((ctx) => ({ ...ctx, filterAssetList: [] })); - } - } - if (cursorOfFilter.current !== null) { - getDataWithAttributes({ - chain: networkId, - attributes: context.attributes, - contractAddress, - cursor: cursorOfFilter.current, - limit: getRequestLimit(numColumns), - }).then(() => { - if (setContext) { - setContext((ctx) => ({ ...ctx, refreshing: false })); - } - }); - } - } - })(); - }, [ - context?.attributes, - context?.refreshing, - context?.selectedIndex, - contractAddress, - getDataWithAttributes, - isMounted, - networkId, - numColumns, - setContext, - ]); - - const handleSelectAsset = useCallback( - (asset: NFTAsset) => { - if (!networkId) return; - navigation.navigate(RootRoutes.Modal, { - screen: ModalRoutes.Collectibles, - params: { - screen: CollectiblesModalRoutes.NFTDetailModal, - params: { - asset, - networkId, - isOwner: false, - }, - }, - }); - }, - [navigation, networkId], - ); - - const renderItem: ListRenderItem = useCallback( - ({ item }) => ( - { - handleSelectAsset(item); - }} - asset={item} - cardWidth={cardWidth} - /> - ), - [cardWidth, handleSelectAsset], - ); - - const FooterView = useMemo( - () => ( - - ), - [cardWidth, margin, marginBottom, numColumns], - ); - - const assetList = useMemo(() => { - if (context) { - if (context?.attributes?.length > 0) { - return context?.filterAssetList; - } - return context?.assetList; - } - return []; - }, [context]); - - const onEndReached = useCallback(() => { - if (context) { - if (context?.attributes.length === 0 && cursor.current !== null) { - getData({ - chain: networkId, - contractAddress, - cursor: cursor.current, - limit: getRequestLimit(numColumns), - }); - } - if (context?.attributes.length > 0 && cursorOfFilter.current !== null) { - getDataWithAttributes({ - chain: networkId, - attributes: context.attributes, - contractAddress, - cursor: cursorOfFilter.current, - limit: getRequestLimit(numColumns), - }); - } - } - }, [ - context, - contractAddress, - getData, - getDataWithAttributes, - networkId, - numColumns, - ]); - - const ListFooterComponent = useCallback(() => { - if (context) { - if ( - (cursor.current !== null && context?.attributes.length === 0) || - (cursorOfFilter.current !== null && context?.attributes.length > 0) - ) { - return FooterView; - } - } - return ; - }, [FooterView, context]); - - return ( - `${item.tokenId as string}`} - onEndReached={onEndReached} - /> - ); -}; - -export default AssetsList; diff --git a/packages/kit/src/views/NFTMarket/CollectionDetail/CollectionInfo.tsx b/packages/kit/src/views/NFTMarket/CollectionDetail/CollectionInfo.tsx deleted file mode 100644 index e681df29150..00000000000 --- a/packages/kit/src/views/NFTMarket/CollectionDetail/CollectionInfo.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import type { ComponentProps, FC } from 'react'; -import { useEffect, useMemo } from 'react'; - -import { useIntl } from 'react-intl'; - -import { Box, Text, useIsVerticalLayout } from '@onekeyhq/components'; - -import { useNavigation } from '../../../hooks'; -import CollectionLogo from '../CollectionLogo'; -import { PriceString } from '../PriceText'; - -import { useCollectionDetailContext } from './context'; - -const CollectionInfo: FC> = ({ ...props }) => { - const context = useCollectionDetailContext()?.context; - const collection = context?.collection; - const name = collection?.contractName ?? collection?.name ?? ''; - const intl = useIntl(); - const isVerticalLayout = useIsVerticalLayout(); - const navigation = useNavigation(); - - useEffect(() => { - if (!isVerticalLayout) { - navigation.setOptions({ title: name }); - } - }, [isVerticalLayout, name, navigation]); - - const statsIndex = useMemo( - () => [ - !isVerticalLayout - ? { - key: intl.formatMessage({ - id: 'content__items', - }), - value: collection?.itemsTotal, - } - : null, - { - key: intl.formatMessage({ - id: 'content__owners', - }), - value: collection?.ownersTotal, - }, - { - key: intl.formatMessage({ - id: 'content__floor', - }), - value: PriceString({ - price: collection?.floorPrice, - symbol: collection?.priceSymbol, - networkId: context?.networkId, - }), - }, - { - key: intl.formatMessage({ - id: 'content__blue_chip_rates', - }), - value: collection?.blueChip?.next_blue_chip_probability, - }, - { - key: intl.formatMessage( - { - id: 'content__int_hours_volume', - }, - { 0: 24 }, - ), - value: PriceString({ - price: collection?.volume24h, - symbol: collection?.priceSymbol, - networkId: context?.networkId, - }), - }, - ], - [ - collection?.blueChip?.next_blue_chip_probability, - collection?.floorPrice, - collection?.itemsTotal, - collection?.ownersTotal, - collection?.priceSymbol, - collection?.volume24h, - context?.networkId, - intl, - isVerticalLayout, - ], - ); - - const Description = ( - - {collection?.description || - intl.formatMessage({ id: 'content__no_description' })} - - ); - - return ( - - - - - - {name || '–'} - - - {isVerticalLayout ? ( - - {intl.formatMessage( - { - id: 'content__int_items', - }, - { 0: collection?.itemsTotal }, - )} - - ) : ( - Description - )} - - - - - {isVerticalLayout ? {Description} : null} - - - {statsIndex.map((item) => - item ? ( - - - {item.key} - - - {item.value || '-'} - - - ) : null, - )} - - - ); -}; - -export default CollectionInfo; diff --git a/packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.tsx b/packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.tsx deleted file mode 100644 index 99a8e7f25f5..00000000000 --- a/packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useEffect, useMemo, useRef } from 'react'; - -import { useRoute } from '@react-navigation/core'; -import { useIntl } from 'react-intl'; - -import type { ForwardRefHandle } from '@onekeyhq/app/src/views/NestedTabView/NestedTabView'; -import { Box, useIsVerticalLayout, useUserDevice } from '@onekeyhq/components'; -import { Tabs } from '@onekeyhq/components/src/CollapsibleTabView'; -import platformEnv from '@onekeyhq/shared/src/platformEnv'; - -import AssetsList from '../AssetsList'; -import CollectionInfo from '../CollectionInfo'; -import { useCollectionDetailContext } from '../context'; -import TransactionList from '../TransactionList'; -import { TabEnum } from '../type'; - -import type { HomeRoutes } from '../../../../routes/routesEnum'; -import type { HomeRoutesParams } from '../../../../routes/types'; -import type { RouteProp } from '@react-navigation/core'; - -const Screen = () => { - const intl = useIntl(); - - const route = - useRoute< - RouteProp - >(); - const { networkId, contractAddress } = route.params; - const isVerticalLayout = useIsVerticalLayout(); - const { screenWidth, screenHeight } = useUserDevice(); - - const context = useCollectionDetailContext()?.context; - const setContext = useCollectionDetailContext()?.setContext; - - let headerHeight = isVerticalLayout ? 296 : 216; - if (platformEnv.isNativeIOSPad) { - headerHeight = screenWidth < screenHeight ? 264 : 216; - } - - const ref = useRef(null); - - const tabsHeader = useMemo( - () => ( - - - - ), - [headerHeight], - ); - - useEffect(() => { - if (context?.refreshing) { - ref?.current?.setRefreshing(context.refreshing); - } - }, [context?.refreshing]); - - return ( - { - if (setContext) { - setContext((ctx) => ({ ...ctx, refreshing: true })); - } - }} - initialTabName="items" - headerView={tabsHeader} - onIndexChange={(index) => { - if (setContext) { - setContext((ctx) => ({ ...ctx, selectedIndex: index })); - } - }} - containerStyle={{ - alignSelf: 'center', - flex: 1, - }} - // scrollEnabled={false} - > - - - - - - - - ); -}; - -export default Screen; diff --git a/packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.web.tsx b/packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.web.tsx deleted file mode 100644 index 23945132a4e..00000000000 --- a/packages/kit/src/views/NFTMarket/CollectionDetail/Screen/index.web.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import type { ComponentProps, FC } from 'react'; -import { memo } from 'react'; - -import { useRoute } from '@react-navigation/core'; -import { useIntl } from 'react-intl'; - -import { - Box, - HStack, - Pressable, - Text, - useIsVerticalLayout, -} from '@onekeyhq/components'; - -import AssetsList from '../AssetsList'; -import CollectionInfo from '../CollectionInfo'; -import { useCollectionDetailContext } from '../context'; -import TransactionList, { - ListHeader as BaseTransactionListHeader, -} from '../TransactionList'; -import { TabEnum } from '../type'; - -import type { HomeRoutes } from '../../../../routes/routesEnum'; -import type { HomeRoutesParams } from '../../../../routes/types'; -import type { RouteProp } from '@react-navigation/core'; - -const MemoCollectionInfo = memo(CollectionInfo); - -type TabBarProps = { - items: { title: string; label: string }[]; - selectedIndex?: number; - itemWidth?: string; - onChange: (index: number) => void; -} & ComponentProps; - -const TabBar: FC = ({ - items, - itemWidth, - selectedIndex, - onChange, - ...ContainerProps -}) => ( - - - - {items.map((item, index) => { - const isActive = index === selectedIndex; - return ( - { - onChange(index); - }} - > - {({ isHovered, isPressed }) => ( - - {item.title} - - )} - - ); - })} - - -); - -const AssetHeader = () => { - const intl = useIntl(); - const isSmallScreen = useIsVerticalLayout(); - - const context = useCollectionDetailContext()?.context; - const setContext = useCollectionDetailContext()?.setContext; - return ( - - - { - if (setContext) { - setContext((ctx) => ({ ...ctx, selectedIndex: index })); - } - }} - items={[ - { - title: intl.formatMessage({ id: 'content__items' }), - label: TabEnum.Items, - }, - { - title: intl.formatMessage({ id: 'content__sales' }), - label: TabEnum.Sales, - }, - ]} - /> - - ); -}; - -const TransactionHeader = () => { - const intl = useIntl(); - const context = useCollectionDetailContext()?.context; - const setContext = useCollectionDetailContext()?.setContext; - return ( - - - { - if (setContext) { - setContext((ctx) => ({ ...ctx, selectedIndex: index })); - } - }} - items={[ - { - title: intl.formatMessage({ id: 'content__items' }), - label: TabEnum.Items, - }, - { - title: intl.formatMessage({ id: 'content__sales' }), - label: TabEnum.Sales, - }, - ]} - /> - - - ); -}; - -const AssetsListHeader = () => ; -const TransactionListHeader = () => ; - -const Screen = () => { - const route = - useRoute< - RouteProp - >(); - const { networkId, contractAddress } = route.params; - const context = useCollectionDetailContext()?.context; - - return ( - <> - {context?.selectedIndex === 0 ? ( - - ) : ( - - )} - - ); -}; - -export default Screen; diff --git a/packages/kit/src/views/NFTMarket/CollectionDetail/TransactionList.tsx b/packages/kit/src/views/NFTMarket/CollectionDetail/TransactionList.tsx deleted file mode 100644 index d3704239e07..00000000000 --- a/packages/kit/src/views/NFTMarket/CollectionDetail/TransactionList.tsx +++ /dev/null @@ -1,361 +0,0 @@ -import type { FC } from 'react'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; - -import { Row } from 'native-base'; -import { useIntl } from 'react-intl'; - -import { - Box, - CustomSkeleton, - FlatList, - Icon, - ListItem, - Pressable, - Skeleton, - Text, - useIsVerticalLayout, -} from '@onekeyhq/components'; -import type { Network } from '@onekeyhq/engine/src/types/network'; -import type { NFTTransaction } from '@onekeyhq/engine/src/types/nft'; -import useOpenBlockBrowser from '@onekeyhq/kit/src/hooks/useOpenBlockBrowser'; - -import backgroundApiProxy from '../../../background/instance/backgroundApiProxy'; -import { useNetworks } from '../../../hooks/redux'; -import useFormatDate from '../../../hooks/useFormatDate'; -import { useIsMounted } from '../../../hooks/useIsMounted'; -import NFTListImage from '../../Wallet/NFT/NFTList/NFTListImage'; - -import { useCollectionDetailContext } from './context'; - -import type { ListProps } from './type'; -import type { ListRenderItem } from 'react-native'; - -const Footer: FC = () => ( - <> - {[1, 2, 3, 4, 5].map(() => ( - - - - - , - description: , - }} - /> - , - }} - /> - - ))} - -); - -export const ListHeader = () => { - const intl = useIntl(); - const isSmallScreen = useIsVerticalLayout(); - if (isSmallScreen) { - return null; - } - return ( - - - - - - - - ); -}; - -const MobileCell: FC<{ item: NFTTransaction }> = ({ item }) => { - const { formatDistanceToNow } = useFormatDate(); - - let name = `# ${item.asset?.tokenId ?? ''}`; - if (item.asset?.name && item.asset?.name.length > 0) { - name = item.asset?.name; - } - return ( - - {item.asset && ( - - )} - - - - ); -}; - -const DesktopCell: FC<{ network?: Network; item: NFTTransaction }> = ({ - network, - item, -}) => { - let name = `# ${item.asset?.tokenId ?? ''}`; - if (item.asset?.name && item.asset?.name.length > 0) { - name = item.asset?.name; - } - const { formatDistanceToNow } = useFormatDate(); - const { openAddressDetails } = useOpenBlockBrowser(network); - - return ( - - - {item.asset && ( - - )} - - - { - openAddressDetails(item.send); - }} - flex={1} - justifyContent="center" - > - - {item.send} - - - ), - }} - /> - - { - openAddressDetails(item.receive); - }} - flex={1} - justifyContent="center" - > - - {item.receive} - - - ), - }} - /> - - - ); -}; - -const TransactionList: FC = ({ - contractAddress, - networkId, - ListHeaderComponent, -}) => { - const isSmallScreen = useIsVerticalLayout(); - - const context = useCollectionDetailContext()?.context; - const setContext = useCollectionDetailContext()?.setContext; - const cursor = useRef(); - - const { serviceNFT } = backgroundApiProxy; - const isMounted = useIsMounted(); - - const getData = useCallback( - async (param: { - chain: string; - contractAddress: string; - cursor?: string; - eventTypes?: string; - showAsset?: boolean; - }) => { - const data = await serviceNFT.getCollectionTransactions(param); - if (data?.content) { - cursor.current = data.next; - if (setContext) { - setContext((ctx) => { - if (context?.refreshing) { - return { ...ctx, txList: data.content }; - } - return { ...ctx, txList: ctx.txList.concat(data?.content) }; - }); - } - } - }, - [context?.refreshing, serviceNFT, setContext], - ); - useEffect(() => { - (() => { - if (context?.selectedIndex === 1 && isMounted) { - if (context?.refreshing) { - cursor.current = undefined; - } - if (cursor.current !== null) { - getData({ - chain: networkId, - contractAddress, - cursor: cursor.current, - eventTypes: 'sale', - showAsset: true, - }).then(() => { - if (setContext) { - setContext((ctx) => ({ ...ctx, refreshing: false })); - } - }); - } - } - })(); - }, [ - context?.refreshing, - context?.selectedIndex, - contractAddress, - getData, - isMounted, - networkId, - setContext, - ]); - - const networks = useNetworks(); - const currentNetwork = useMemo( - () => networks.find((n) => n.id === networkId), - [networkId, networks], - ); - - const renderItem: ListRenderItem = useCallback( - ({ item }) => { - if (isSmallScreen) { - return ; - } - return ; - }, - [currentNetwork, isSmallScreen], - ); - - const footer = useCallback(() => { - if (cursor.current !== null) { - return