From 3a610d25592de920364f00cdc5794cffc67a991c Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 18 Feb 2025 17:22:37 +1100 Subject: [PATCH 1/7] fixed: debugging the gridtab view --- src/ui/views/NFT/GridTab.tsx | 239 +++++++++++++++++++++----------- src/ui/views/NftEvm/GridTab.tsx | 214 +++++++++++++++++++--------- 2 files changed, 310 insertions(+), 143 deletions(-) diff --git a/src/ui/views/NFT/GridTab.tsx b/src/ui/views/NFT/GridTab.tsx index e674797e..0210924a 100644 --- a/src/ui/views/NFT/GridTab.tsx +++ b/src/ui/views/NFT/GridTab.tsx @@ -1,15 +1,24 @@ -/* eslint-disable indent */ -import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react'; -import { useWallet } from 'ui/utils'; -import { makeStyles } from '@mui/styles'; +import { Card, CardMedia, CardContent, Grid, Skeleton } from '@mui/material'; import { StyledEngineProvider } from '@mui/material/styles'; -import { Card, CardMedia, CardContent, Grid, Skeleton, Typography, Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React, { + useState, + useEffect, + useRef, + forwardRef, + useImperativeHandle, + useCallback, +} from 'react'; +import InfiniteScroll from 'react-infinite-scroll-component'; + +import { LLSpinner } from '@/ui/FRWComponent'; +import { useWallet } from 'ui/utils'; + +import EmptyStatus from './EmptyStatus'; import GridView from './GridView'; + // import InfiniteScroll from 'react-infinite-scroll-component'; // import InfiniteScroll from 'react-infinite-scroller'; -import { LLSpinner } from '@/ui/FRWComponent'; -import InfiniteScroll from 'react-infinite-scroll-component'; -import EmptyStatus from './EmptyStatus'; interface GridTabProps { data: Data; @@ -152,6 +161,31 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const [blockList, setBlockList] = useState([]); + const [initialized, setInitialized] = useState(false); + const initialFetchDone = useRef(false); + const addressRef = useRef(''); + + const mountedRef = useRef(true); + + const [scrollDirection, setScrollDirection] = useState('down'); + const lastScrollTop = useRef(0); + + const handleScroll = useCallback( + (e: Event) => { + if (loading) return; + const target = e.target as HTMLElement; + const scrollTop = target.scrollTop; + const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; + + if (direction !== scrollDirection) { + console.log('🔄 NFT: Scroll direction changed:', direction); + setScrollDirection(direction); + } + lastScrollTop.current = scrollTop; + }, + [scrollDirection, loading] + ); + useImperativeHandle(ref, () => ({ reload: () => { usewallet.clearNFTList(); @@ -174,7 +208,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const newList: any[] = []; list.nfts.forEach((item) => { const result = nfts.filter((nft) => nft.unique_id === item.unique_id); - if (result.length == 0) { + if (result.length === 0) { newList.push(item); } }); @@ -187,74 +221,87 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } }; - const fetchNFT = async (address: string, reload = true) => { - if (loading) { - return; - } + const { setCount } = props; - setNFTLoading(true); - try { - const response = await usewallet.refreshNft(address, 0); - if (response.nfts) { - const newList: any[] = []; - response.nfts.forEach((item) => { - const result = nfts.filter((nft) => nft.unique_id === item.unique_id); - if (result.length == 0) { - newList.push(item); - } - }); - const mergedList = [...nfts, ...newList]; - setNFTs(mergedList); - - const hasMore = mergedList.length > 0 && mergedList.length < total; - setHasMore(hasMore); - } + const fetchNFT = useCallback( + async (address: string) => { + if (!mountedRef.current) return; - props.setCount(response.nftCount); - setTotal(response.nftCount); - } finally { - setNFTLoading(false); - setHasMore(false); - } - }; + try { + const response = await usewallet.refreshNft(address); + console.log('🔄 NFT: Network response:', response); - const fetchNFTCache = async (address: string, reload = true) => { - // setNFTLoading(true); - try { - const { nfts, nftCount } = await usewallet.getNFTListCache(); - props.setCount(nftCount); - setTotal(nftCount); - setNFTs(nfts); - if (nfts.length == 0) { - // setNFTLoading(false); - fetchNFT(address); + if (!mountedRef.current) return; + + if (!response || !response.nfts) { + setNFTs([]); + setTotal(0); + setCount(0); + return; + } + + setNFTs(response.nfts); + setTotal(response.nftCount); + setCount(response.nftCount); + setHasMore(response.nfts.length < response.nftCount); + setInitialized(true); + } catch (e) { + console.error('❌ NFT: Network fetch failed:', e); + setNFTs([]); + setTotal(0); + setCount(0); } - } catch (e) { - console.log('e ->', e); - } finally { - setNFTLoading(false); - setHasMore(false); - } - }; + }, + [mountedRef, usewallet, setNFTs, setTotal, setCount, setHasMore, setInitialized] + ); - const loader = ( - - {[...Array(2).keys()].map((key) => ( - - - - - - - - - ))} - + const fetchNFTCache = useCallback( + async (address: string) => { + if (!mountedRef.current || !address) { + console.log('⏭ī¸ NFT: Skipping - invalid state'); + return; + } + + setNFTLoading(true); + + try { + const response = await usewallet.getNFTListCache(); + console.log('đŸ“Ļ NFT: Cache response:', response); + + if (!mountedRef.current) return; + + if (!response || !response.nfts || response.nfts.length === 0) { + console.log('⚠ī¸ NFT: No cached NFTs, fetching from network'); + await fetchNFT(address); + return; + } + + setNFTs(response.nfts); + setTotal(response.nftCount); + setCount(response.nftCount); + setHasMore(response.nfts.length < response.nftCount); + setInitialized(true); + } catch (e) { + console.error('❌ NFT: Cache fetch failed:', e); + if (!initialized) { + await fetchNFT(address); + } + } finally { + setNFTLoading(false); + } + }, + [ + mountedRef, + usewallet, + fetchNFT, + setNFTs, + setTotal, + setCount, + setHasMore, + setInitialized, + initialized, + setNFTLoading, + ] ); // const hasMore = (): boolean => { @@ -263,11 +310,21 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { // } useEffect(() => { - if (props.data.ownerAddress) { - fetchNFTCache(props.data.ownerAddress); - setAddress(props.data.ownerAddress); + if ( + !props.data.ownerAddress || + initialFetchDone.current || + props.data.ownerAddress === addressRef.current + ) { + console.log('⏭ī¸ NFT: Skipping - already fetched or same address'); + return; } - }, []); + + console.log('🔄 NFT: Initial load for address:', props.data.ownerAddress); + initialFetchDone.current = true; + addressRef.current = props.data.ownerAddress; + fetchNFTCache(props.data.ownerAddress); + setAddress(props.data.ownerAddress); + }, [props.data.ownerAddress, fetchNFTCache]); const extractContractAddress = (collection) => { return collection.split('.')[2]; @@ -300,6 +357,26 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { ); }; + const loader = ( + + {[...Array(2).keys()].map((key) => ( + + + + + + + + + ))} + + ); + return ( {loading ? ( @@ -322,16 +399,20 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { ) : total !== 0 ? ( {nfts && nfts.map(createGridCard)} - {nfts.length % 2 != 0 && } + {nfts.length % 2 !== 0 && } ) : ( diff --git a/src/ui/views/NftEvm/GridTab.tsx b/src/ui/views/NftEvm/GridTab.tsx index 4b22c855..f2d75225 100644 --- a/src/ui/views/NftEvm/GridTab.tsx +++ b/src/ui/views/NftEvm/GridTab.tsx @@ -1,15 +1,24 @@ -/* eslint-disable indent */ -import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react'; -import { useWallet } from 'ui/utils'; -import { makeStyles } from '@mui/styles'; -import { StyledEngineProvider } from '@mui/material/styles'; import { Card, CardMedia, CardContent, Grid, Skeleton, Typography, Box } from '@mui/material'; +import { StyledEngineProvider } from '@mui/material/styles'; +import { makeStyles } from '@mui/styles'; +import React, { + useState, + useEffect, + useRef, + forwardRef, + useImperativeHandle, + useCallback, +} from 'react'; +import InfiniteScroll from 'react-infinite-scroll-component'; + +import { LLSpinner } from '@/ui/FRWComponent'; +import { useWallet } from 'ui/utils'; + +import EmptyStatus from './EmptyStatus'; import GridView from './GridView'; + // import InfiniteScroll from 'react-infinite-scroll-component'; // import InfiniteScroll from 'react-infinite-scroller'; -import { LLSpinner } from '@/ui/FRWComponent'; -import InfiniteScroll from 'react-infinite-scroll-component'; -import EmptyStatus from './EmptyStatus'; interface GridTabProps { data: Data; @@ -151,6 +160,28 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const [blockList, setBlockList] = useState([]); + const initRef = useRef(false); + const [initialLoading, setInitialLoading] = useState(false); + const addressRef = useRef(''); + const [scrollDirection, setScrollDirection] = useState('down'); + const lastScrollTop = useRef(0); + + const handleScroll = useCallback( + (e: Event) => { + if (initialLoading) return; + const target = e.target as HTMLElement; + const scrollTop = target.scrollTop; + const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; + + if (direction !== scrollDirection) { + console.log('🔄 EVM: Scroll direction changed:', direction); + setScrollDirection(direction); + } + lastScrollTop.current = scrollTop; + }, + [scrollDirection, initialLoading] + ); + useImperativeHandle(ref, () => ({ reload: () => { usewallet.clearNFTList(); @@ -173,7 +204,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const newList: any[] = []; list.nfts.forEach((item) => { const result = nfts.filter((nft) => nft.unique_id === item.unique_id); - if (result.length == 0) { + if (result.length === 0) { newList.push(item); } }); @@ -186,55 +217,102 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } }; - const fetchNFT = async (address: string, reload = true) => { - if (loading) { - return; - } + const { setCount } = props; - setNFTLoading(true); - try { - const response = await usewallet.openapi.EvmNFTList(ownerAddress); - if (response.nfts) { - const newList: any[] = []; - response.nfts.forEach((item) => { - const result = nfts.filter((nft) => nft.unique_id === item.unique_id); - if (result.length == 0) { - newList.push(item); - } - }); - const mergedList = [...nfts, ...newList]; - setNFTs(mergedList); + const fetchNFT = useCallback( + async (address: string, reload = true) => { + if (loading) { + return; + } - const hasMore = mergedList.length > 0 && mergedList.length < total; - setHasMore(hasMore); + setNFTLoading(true); + try { + const response = await usewallet.openapi.EvmNFTList(ownerAddress); + if (response.nfts) { + const newList: any[] = []; + response.nfts.forEach((item) => { + const result = nfts.filter((nft) => nft.unique_id === item.unique_id); + if (result.length === 0) { + newList.push(item); + } + }); + const mergedList = [...nfts, ...newList]; + setNFTs(mergedList); + + const hasMore = mergedList.length > 0 && mergedList.length < total; + setHasMore(hasMore); + } + + setCount(response.nftCount); + setTotal(response.nftCount); + } finally { + setNFTLoading(false); + setHasMore(false); } + }, + [ + loading, + ownerAddress, + nfts, + total, + usewallet, + setNFTs, + setNFTLoading, + setCount, + setTotal, + setHasMore, + ] + ); - props.setCount(response.nftCount); - setTotal(response.nftCount); - } finally { - setNFTLoading(false); - setHasMore(false); - } - }; + const fetchNFTCache = useCallback( + async (address: string) => { + if (loading) { + console.log('⚠ī¸ EVM: Skipping cache fetch - already loading'); + return; + } - const fetchNFTCache = async (address: string, reload = true) => { - // setNFTLoading(true); - try { - const { nfts, nftCount } = await usewallet.openapi.EvmNFTList(address); - props.setCount(nftCount); - setTotal(nftCount); - setNFTs(nfts); - if (nfts.length == 0) { - // setNFTLoading(false); - fetchNFT(address); + console.log('🔍 EVM: Starting NFT cache fetch for:', address); + setInitialLoading(true); + + try { + console.log('📡 EVM: Making API call to fetch NFTs'); + const response = await usewallet.openapi.EvmNFTList(address); + console.log('đŸ“Ļ EVM: Received response:', { + hasNFTs: !!response?.nfts, + nftCount: response?.nftCount, + }); + + if (!response) { + console.log('⚠ī¸ EVM: No response from cache, falling back to direct fetch'); + await fetchNFT(address); + return; + } + + const { nfts, nftCount } = response; + + if (nfts?.length) { + console.log('✅ EVM: Setting NFTs:', { + count: nfts.length, + total: nftCount, + }); + setNFTs(nfts); + setTotal(nftCount); + setCount(nftCount); + setHasMore(nfts.length < nftCount); + } else { + console.log('⚠ī¸ EVM: No NFTs in cache, falling back to direct fetch'); + await fetchNFT(address); + } + } catch (e) { + console.error('❌ EVM: Cache fetch failed:', e); + await fetchNFT(address); + } finally { + console.log('🏁 EVM: Completing cache fetch'); + setInitialLoading(false); } - } catch (e) { - console.log('e ->', e); - } finally { - setNFTLoading(false); - setHasMore(false); - } - }; + }, + [loading, setInitialLoading, usewallet, fetchNFT, setNFTs, setTotal, setCount, setHasMore] + ); const loader = ( @@ -257,22 +335,27 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { ); useEffect(() => { - if (props.data.ownerAddress) { - fetchNFTCache(props.data.ownerAddress); - setAddress(props.data.ownerAddress); + if ( + !props.data.ownerAddress || + initialLoading || + props.data.ownerAddress === addressRef.current + ) { + console.log('⏭ī¸ EVM: Skipping - already fetched or same address'); + return; } - }, []); - const extractContractAddress = (collection) => { - return collection.split('.')[2]; - }; + console.log('🔄 EVM: Initial load for address:', props.data.ownerAddress); + addressRef.current = props.data.ownerAddress; + fetchNFTCache(props.data.ownerAddress); + setAddress(props.data.ownerAddress); + }, [props.data.ownerAddress, fetchNFTCache, initialLoading]); - const createGridCard = (data, index) => { + const createGridCard = (data: any, index: number) => { return ( { ) : total !== 0 ? ( {nfts && nfts.map(createGridCard)} - {nfts.length % 2 != 0 && } + {nfts.length % 2 !== 0 && ( + + )} ) : ( From b08fa3d4d09baae61c8cb6620e5a0d1bf1f139f9 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 18 Feb 2025 17:27:16 +1100 Subject: [PATCH 2/7] fixed: evm loading --- src/ui/views/NftEvm/GridTab.tsx | 82 +++++++++++++++++++-------------- 1 file changed, 47 insertions(+), 35 deletions(-) diff --git a/src/ui/views/NftEvm/GridTab.tsx b/src/ui/views/NftEvm/GridTab.tsx index f2d75225..b0febd83 100644 --- a/src/ui/views/NftEvm/GridTab.tsx +++ b/src/ui/views/NftEvm/GridTab.tsx @@ -160,15 +160,15 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const [blockList, setBlockList] = useState([]); - const initRef = useRef(false); - const [initialLoading, setInitialLoading] = useState(false); + const mountedRef = useRef(true); + const initialFetchDone = useRef(false); const addressRef = useRef(''); const [scrollDirection, setScrollDirection] = useState('down'); const lastScrollTop = useRef(0); const handleScroll = useCallback( (e: Event) => { - if (initialLoading) return; + if (loading) return; const target = e.target as HTMLElement; const scrollTop = target.scrollTop; const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; @@ -179,7 +179,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } lastScrollTop.current = scrollTop; }, - [scrollDirection, initialLoading] + [loading, scrollDirection] ); useImperativeHandle(ref, () => ({ @@ -272,7 +272,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } console.log('🔍 EVM: Starting NFT cache fetch for:', address); - setInitialLoading(true); + setNFTLoading(true); try { console.log('📡 EVM: Making API call to fetch NFTs'); @@ -308,47 +308,39 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { await fetchNFT(address); } finally { console.log('🏁 EVM: Completing cache fetch'); - setInitialLoading(false); + setNFTLoading(false); } }, - [loading, setInitialLoading, usewallet, fetchNFT, setNFTs, setTotal, setCount, setHasMore] + [loading, usewallet, fetchNFT, setNFTs, setTotal, setCount, setHasMore] ); - const loader = ( - - {[...Array(2).keys()].map((key) => ( - - - - - - - - - ))} - - ); + useEffect(() => { + mountedRef.current = true; + return () => { + mountedRef.current = false; + }; + }, []); useEffect(() => { + const currentAddress = props.data.ownerAddress; if ( - !props.data.ownerAddress || - initialLoading || - props.data.ownerAddress === addressRef.current + !currentAddress || + !mountedRef.current || + initialFetchDone.current || + currentAddress === addressRef.current ) { - console.log('⏭ī¸ EVM: Skipping - already fetched or same address'); return; } - console.log('🔄 EVM: Initial load for address:', props.data.ownerAddress); - addressRef.current = props.data.ownerAddress; - fetchNFTCache(props.data.ownerAddress); - setAddress(props.data.ownerAddress); - }, [props.data.ownerAddress, fetchNFTCache, initialLoading]); + const initFetch = async () => { + initialFetchDone.current = true; + addressRef.current = currentAddress; + await fetchNFTCache(currentAddress); + setAddress(currentAddress); + }; + + initFetch(); + }, [props.data.ownerAddress, fetchNFTCache]); const createGridCard = (data: any, index: number) => { return ( @@ -363,6 +355,26 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { ); }; + const loader = ( + + {[...Array(2).keys()].map((key) => ( + + + + + + + + + ))} + + ); + return ( {loading ? ( From f9c63280b24b82f432b19ccfe5dd4847101a3ee5 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 18 Feb 2025 17:36:39 +1100 Subject: [PATCH 3/7] fixed: show enable list --- src/ui/views/NFT/NFTList/AddList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/views/NFT/NFTList/AddList.tsx b/src/ui/views/NFT/NFTList/AddList.tsx index 740eb213..593b8c9e 100644 --- a/src/ui/views/NFT/NFTList/AddList.tsx +++ b/src/ui/views/NFT/NFTList/AddList.tsx @@ -101,12 +101,13 @@ const AddList = () => { setStatusLoading(true); try { const enabledList = await usewallet.openapi.getEnabledNFTList(); + console.log('🔄 NFT: Enabled list:', enabledList, data); if (enabledList.length > 0) { data.map((item) => { item.added = enabledList.filter( (enabled) => - enabled.contract_name === item.contract_name && enabled.address === item.address + enabled.contract_name === item.contractName && enabled.address === item.address ).length > 0; }); } From 5d4fccf0342e10058300682e11f43c16e35b1707 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 18 Feb 2025 19:52:05 +1100 Subject: [PATCH 4/7] fixed: infinite scroll --- src/ui/views/NFT/GridTab.tsx | 154 ++++++++++++++++----------- src/ui/views/NFT/NFTList/AddList.tsx | 1 - src/ui/views/NftEvm/GridTab.tsx | 96 +++++++---------- 3 files changed, 132 insertions(+), 119 deletions(-) diff --git a/src/ui/views/NFT/GridTab.tsx b/src/ui/views/NFT/GridTab.tsx index 0210924a..25a97dfe 100644 --- a/src/ui/views/NFT/GridTab.tsx +++ b/src/ui/views/NFT/GridTab.tsx @@ -1,4 +1,4 @@ -import { Card, CardMedia, CardContent, Grid, Skeleton } from '@mui/material'; +import { Card, CardMedia, CardContent, Grid, Skeleton, Box } from '@mui/material'; import { StyledEngineProvider } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; import React, { @@ -95,24 +95,21 @@ const useStyles = makeStyles(() => ({ grid: { width: '100%', margin: 0, - // paddingLeft: '15px', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignContent: 'flex-start', padding: '10px 13px', - // marginLeft: 'auto' }, scroll: { width: '100%', margin: 0, - // paddingLeft: '15px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignContent: 'flex-start', padding: '10px 13px', - // marginLeft: 'auto' + marginTop: '16px', }, cardmedia: { height: '159px', @@ -172,7 +169,6 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const handleScroll = useCallback( (e: Event) => { - if (loading) return; const target = e.target as HTMLElement; const scrollTop = target.scrollTop; const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; @@ -183,7 +179,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } lastScrollTop.current = scrollTop; }, - [scrollDirection, loading] + [scrollDirection] ); useImperativeHandle(ref, () => ({ @@ -195,31 +191,56 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { }, })); - const nextPage = async () => { - if (loadingMore) { + const nextPage = useCallback(async () => { + console.log('đŸ“Ĩ NFT: Attempting to load next page', { + loadingMore, + hasMore, + currentCount: nfts.length, + total, + }); + + if (loadingMore || !hasMore) { + console.log('⏭ī¸ NFT: Skipping next page - loading or no more items'); return; } setLoadingMore(true); const offset = nfts.length; - // pageIndex * 24; + try { - const list = await usewallet.refreshNft(ownerAddress, offset); - const newList: any[] = []; - list.nfts.forEach((item) => { - const result = nfts.filter((nft) => nft.unique_id === item.unique_id); - if (result.length === 0) { - newList.push(item); - } - }); - const mergedList = [...nfts, ...newList]; - setNFTs(mergedList); - const hasMore = mergedList.length > 0 && mergedList.length < total; - setHasMore(hasMore); + console.log('🔄 NFT: Fetching next page with offset:', offset); + const response = await usewallet.refreshNft(ownerAddress, offset); + + if (!response || !response.nfts) { + console.log('⚠ī¸ NFT: No response for next page'); + return; + } + + const newList = response.nfts.filter( + (item) => !nfts.some((nft) => nft.unique_id === item.unique_id) + ); + + console.log('✨ NFT: New items found:', newList.length); + + if (newList.length > 0) { + const mergedList = [...nfts, ...newList]; + setNFTs(mergedList); + setHasMore(mergedList.length < total); + console.log('✅ NFT: Updated list', { + newTotal: mergedList.length, + hasMore: mergedList.length < total, + }); + } else { + setHasMore(false); + console.log('⏚ī¸ NFT: No new items, stopping infinite scroll'); + } + } catch (e) { + console.error('❌ NFT: Next page fetch failed:', e); + setHasMore(false); } finally { setLoadingMore(false); } - }; + }, [loadingMore, hasMore, nfts, ownerAddress, total, usewallet]); const { setCount } = props; @@ -237,6 +258,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { setNFTs([]); setTotal(0); setCount(0); + setHasMore(false); return; } @@ -244,15 +266,20 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { setTotal(response.nftCount); setCount(response.nftCount); setHasMore(response.nfts.length < response.nftCount); - setInitialized(true); + console.log('✅ NFT: Initial fetch complete', { + itemCount: response.nfts.length, + total: response.nftCount, + hasMore: response.nfts.length < response.nftCount, + }); } catch (e) { console.error('❌ NFT: Network fetch failed:', e); setNFTs([]); setTotal(0); setCount(0); + setHasMore(false); } }, - [mountedRef, usewallet, setNFTs, setTotal, setCount, setHasMore, setInitialized] + [mountedRef, usewallet, setNFTs, setTotal, setCount, setHasMore] ); const fetchNFTCache = useCallback( @@ -379,45 +406,48 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { return ( - {loading ? ( - - {[...Array(4).keys()].map((key) => ( - - - - - - - - - ))} - - ) : total !== 0 ? ( - + + {loading ? ( - {nfts && nfts.map(createGridCard)} - {nfts.length % 2 !== 0 && } + {[...Array(4).keys()].map((key) => ( + + + + + + + + + ))} - - ) : ( - - )} + ) : total !== 0 ? ( + } + height="calc(100vh - 160px)" + style={{ + overflow: 'auto', + paddingTop: '16px', + marginTop: '-16px', + }} + scrollThreshold="100px" + > + + {nfts && nfts.map(createGridCard)} + {nfts.length % 2 !== 0 && } + + + ) : !loading && total === 0 ? ( + + ) : null} + ); }); diff --git a/src/ui/views/NFT/NFTList/AddList.tsx b/src/ui/views/NFT/NFTList/AddList.tsx index 593b8c9e..b12ec240 100644 --- a/src/ui/views/NFT/NFTList/AddList.tsx +++ b/src/ui/views/NFT/NFTList/AddList.tsx @@ -101,7 +101,6 @@ const AddList = () => { setStatusLoading(true); try { const enabledList = await usewallet.openapi.getEnabledNFTList(); - console.log('🔄 NFT: Enabled list:', enabledList, data); if (enabledList.length > 0) { data.map((item) => { item.added = diff --git a/src/ui/views/NftEvm/GridTab.tsx b/src/ui/views/NftEvm/GridTab.tsx index b0febd83..65a710a2 100644 --- a/src/ui/views/NftEvm/GridTab.tsx +++ b/src/ui/views/NftEvm/GridTab.tsx @@ -355,66 +355,50 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { ); }; - const loader = ( - - {[...Array(2).keys()].map((key) => ( - - - - - - - - - ))} - - ); - return ( - {loading ? ( - - {[...Array(4).keys()].map((key) => ( - - - - - - - - - ))} - - ) : total !== 0 ? ( - + + {loading ? ( - {nfts && nfts.map(createGridCard)} - {nfts.length % 2 !== 0 && ( - - )} + {[...Array(4).keys()].map((key) => ( + + + + + + + + + ))} - - ) : ( - - )} + ) : total !== 0 ? ( + } + height="calc(100vh - 160px)" + style={{ + overflow: 'auto', + paddingTop: '16px', + marginTop: '-16px', + }} + scrollThreshold="100px" + > + + {nfts && nfts.map(createGridCard)} + {nfts.length % 2 !== 0 && } + + + ) : !loading && total === 0 ? ( + + ) : null} + ); }); From 9615a506bf49c0a343447da19eaee5820a5dfbfb Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 18 Feb 2025 19:59:52 +1100 Subject: [PATCH 5/7] fixed: disable scrol when scroll up --- src/ui/views/NFT/GridTab.tsx | 11 +++++++++-- src/ui/views/NftEvm/GridTab.tsx | 11 +++++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/ui/views/NFT/GridTab.tsx b/src/ui/views/NFT/GridTab.tsx index 25a97dfe..b44e855a 100644 --- a/src/ui/views/NFT/GridTab.tsx +++ b/src/ui/views/NFT/GridTab.tsx @@ -152,7 +152,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const [nfts, setNFTs] = useState([]); - const [total, setTotal] = useState(0); + const [total, setTotal] = useState(1); const [hasMore, setHasMore] = useState(true); @@ -429,7 +429,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } height="calc(100vh - 160px)" style={{ @@ -438,6 +438,13 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { marginTop: '-16px', }} scrollThreshold="100px" + onScroll={(e: any) => { + const target = e.target as HTMLElement; + const scrollTop = target.scrollTop; + const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; + setScrollDirection(direction); + lastScrollTop.current = scrollTop; + }} > {nfts && nfts.map(createGridCard)} diff --git a/src/ui/views/NftEvm/GridTab.tsx b/src/ui/views/NftEvm/GridTab.tsx index 65a710a2..f1abedbb 100644 --- a/src/ui/views/NftEvm/GridTab.tsx +++ b/src/ui/views/NftEvm/GridTab.tsx @@ -154,7 +154,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const [nfts, setNFTs] = useState([]); - const [total, setTotal] = useState(0); + const [total, setTotal] = useState(1); const [hasMore, setHasMore] = useState(true); @@ -380,7 +380,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { } height="calc(100vh - 160px)" style={{ @@ -389,6 +389,13 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { marginTop: '-16px', }} scrollThreshold="100px" + onScroll={(e: any) => { + const target = e.target as HTMLElement; + const scrollTop = target.scrollTop; + const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; + setScrollDirection(direction); + lastScrollTop.current = scrollTop; + }} > {nfts && nfts.map(createGridCard)} From d44b1a97ef40ac43126c265b9717ddb60a9d37c0 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 18 Feb 2025 20:02:26 +1100 Subject: [PATCH 6/7] fixed: remove console log --- src/ui/views/NFT/GridTab.tsx | 27 +++------------------------ src/ui/views/NftEvm/GridTab.tsx | 12 +++++------- 2 files changed, 8 insertions(+), 31 deletions(-) diff --git a/src/ui/views/NFT/GridTab.tsx b/src/ui/views/NFT/GridTab.tsx index b44e855a..5cebc47a 100644 --- a/src/ui/views/NFT/GridTab.tsx +++ b/src/ui/views/NFT/GridTab.tsx @@ -169,17 +169,17 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const handleScroll = useCallback( (e: Event) => { + if (loading) return; const target = e.target as HTMLElement; const scrollTop = target.scrollTop; const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; if (direction !== scrollDirection) { - console.log('🔄 NFT: Scroll direction changed:', direction); setScrollDirection(direction); } lastScrollTop.current = scrollTop; }, - [scrollDirection] + [loading, scrollDirection] ); useImperativeHandle(ref, () => ({ @@ -192,15 +192,7 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { })); const nextPage = useCallback(async () => { - console.log('đŸ“Ĩ NFT: Attempting to load next page', { - loadingMore, - hasMore, - currentCount: nfts.length, - total, - }); - if (loadingMore || !hasMore) { - console.log('⏭ī¸ NFT: Skipping next page - loading or no more items'); return; } @@ -208,34 +200,21 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const offset = nfts.length; try { - console.log('🔄 NFT: Fetching next page with offset:', offset); const response = await usewallet.refreshNft(ownerAddress, offset); - - if (!response || !response.nfts) { - console.log('⚠ī¸ NFT: No response for next page'); - return; - } + if (!response || !response.nfts) return; const newList = response.nfts.filter( (item) => !nfts.some((nft) => nft.unique_id === item.unique_id) ); - console.log('✨ NFT: New items found:', newList.length); - if (newList.length > 0) { const mergedList = [...nfts, ...newList]; setNFTs(mergedList); setHasMore(mergedList.length < total); - console.log('✅ NFT: Updated list', { - newTotal: mergedList.length, - hasMore: mergedList.length < total, - }); } else { setHasMore(false); - console.log('⏚ī¸ NFT: No new items, stopping infinite scroll'); } } catch (e) { - console.error('❌ NFT: Next page fetch failed:', e); setHasMore(false); } finally { setLoadingMore(false); diff --git a/src/ui/views/NftEvm/GridTab.tsx b/src/ui/views/NftEvm/GridTab.tsx index f1abedbb..c65196d3 100644 --- a/src/ui/views/NftEvm/GridTab.tsx +++ b/src/ui/views/NftEvm/GridTab.tsx @@ -174,7 +174,6 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { const direction = scrollTop > lastScrollTop.current ? 'down' : 'up'; if (direction !== scrollDirection) { - console.log('🔄 EVM: Scroll direction changed:', direction); setScrollDirection(direction); } lastScrollTop.current = scrollTop; @@ -191,14 +190,14 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { }, })); - const nextPage = async () => { - if (loadingMore) { + const nextPage = useCallback(async () => { + if (loadingMore || !hasMore) { return; } setLoadingMore(true); const offset = nfts.length; - // pageIndex * 24; + try { const list = await usewallet.openapi.EvmNFTList(ownerAddress); const newList: any[] = []; @@ -210,12 +209,11 @@ const GridTab = forwardRef((props: GridTabProps, ref) => { }); const mergedList = [...nfts, ...newList]; setNFTs(mergedList); - const hasMore = mergedList.length > 0 && mergedList.length < total; - setHasMore(hasMore); + setHasMore(mergedList.length < total); } finally { setLoadingMore(false); } - }; + }, [loadingMore, hasMore, nfts, ownerAddress, total, usewallet]); const { setCount } = props; From dddbdefb195e695867c293a39adeb9e833af518d Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 19 Feb 2025 10:27:58 +1100 Subject: [PATCH 7/7] fixed: move nft user info --- src/ui/views/NftEvm/SendNFT/MoveNftConfirmation.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ui/views/NftEvm/SendNFT/MoveNftConfirmation.tsx b/src/ui/views/NftEvm/SendNFT/MoveNftConfirmation.tsx index fd61e73c..d20475cc 100644 --- a/src/ui/views/NftEvm/SendNFT/MoveNftConfirmation.tsx +++ b/src/ui/views/NftEvm/SendNFT/MoveNftConfirmation.tsx @@ -28,7 +28,7 @@ const MoveNftConfirmation = (props: SendNFTConfirmationProps) => { console.log('MoveNftConfirmation - NftEvm'); const usewallet = useWallet(); const history = useHistory(); - const { mainAddress, childAccounts, currentWallet } = useProfiles(); + const { mainAddress, childAccounts, parentWallet } = useProfiles(); const [sending, setSending] = useState(false); const [failed, setFailed] = useState(false); const [, setErrorMessage] = useState(null); @@ -155,10 +155,10 @@ const MoveNftConfirmation = (props: SendNFTConfirmationProps) => { const getChildResp = useCallback(async () => { const newWallet = { [mainAddress!]: { - name: currentWallet.name, - description: currentWallet.name, + name: parentWallet.name, + description: parentWallet.name, thumbnail: { - url: currentWallet.icon, + url: parentWallet.icon, }, }, }; @@ -170,7 +170,7 @@ const MoveNftConfirmation = (props: SendNFTConfirmationProps) => { if (firstWalletAddress) { setSelectedChildAccount(walletList[firstWalletAddress]); } - }, [mainAddress, currentWallet, childAccounts]); + }, [mainAddress, parentWallet, childAccounts]); useEffect(() => { getChildResp();