From 37c128adb990e607aff34316fb80c698203519ed Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Sun, 23 Mar 2025 11:42:24 +0700 Subject: [PATCH 01/17] Refactor price history fetching logic to handle errors, improve weekend volatility calculation, and add period filtering --- lib/api/nftContracts.ts | 437 ++++++++++++++++++++++++++++++++-------- lib/api/nftService.ts | 169 +++++++++------- 2 files changed, 456 insertions(+), 150 deletions(-) diff --git a/lib/api/nftContracts.ts b/lib/api/nftContracts.ts index d9ecd02..d1121dd 100644 --- a/lib/api/nftContracts.ts +++ b/lib/api/nftContracts.ts @@ -20,7 +20,15 @@ const ERC1155_ABI = [ "function balanceOfBatch(address[] accounts, uint256[] ids) view returns (uint256[])", "function uri(uint256 id) view returns (string)", "function name() view returns (string)", - "function symbol() view returns (string)" + "function symbol() view returns (string)", + "event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 value)", + "event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] ids, uint256[] values)" +]; + +// Extended Event ABI for BSC +const BSC_EVENT_ABI = [ + "event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 value)", + "event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] ids, uint256[] values)" ]; // Simplified interface for NFTs @@ -60,10 +68,35 @@ export function getNFTContract( /** * Check if a contract implements ERC-721 or ERC-1155 */ -export async function detectNFTStandard(contractAddress: string, chainId: string): Promise<'ERC721' | 'ERC1155' | 'UNKNOWN'> { +const BSCSCAN_API_KEY = process.env.BSCSCAN_API_KEY || '1QGN2GHNEPT6CQP854TVBH24C85714ETC5'; + +export async function detectNFTStandard(contractAddress: string, chainId: string): Promise<'ERC721' | 'BNB721' | 'ERC1155' | 'UNKNOWN'> { try { const provider = getChainProvider(chainId); + // For BNB Chain, try BscScan API first + if (chainId === '0x38' || chainId === '0x61') { + try { + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + const response = await fetch(`${baseUrl}?module=contract&action=getabi&address=${contractAddress}&apikey=${BSCSCAN_API_KEY}`); + const data = await response.json(); + + if (data.status === '1' && data.result) { + const abi = JSON.parse(data.result); + const hasNFTMethods = abi.some((item: any) => + (item.name === 'tokenURI' || item.name === 'balanceOf') && + item.type === 'function' + ); + + if (hasNFTMethods) { + return 'BNB721'; // BNB Chain's NFT standard + } + } + } catch (err) { + console.warn("BSCScan API error:", err); + } + } + // Create an interface to test for ERC-165 supportsInterface function const erc165Interface = new ethers.utils.Interface([ "function supportsInterface(bytes4 interfaceId) view returns (bool)" @@ -77,7 +110,7 @@ export async function detectNFTStandard(contractAddress: string, chainId: string try { const isERC721 = await contract.supportsInterface(ERC721_INTERFACE_ID); - if (isERC721) return 'ERC721'; + if (isERC721) return chainId === '0x38' || chainId === '0x61' ? 'BNB721' : 'ERC721'; const isERC1155 = await contract.supportsInterface(ERC1155_INTERFACE_ID); if (isERC1155) return 'ERC1155'; @@ -89,7 +122,7 @@ export async function detectNFTStandard(contractAddress: string, chainId: string try { const erc721Contract = new ethers.Contract(contractAddress, ['function name() view returns (string)'], provider); await erc721Contract.name(); - return 'ERC721'; + return chainId === '0x38' || chainId === '0x61' ? 'BNB721' : 'ERC721'; } catch { return 'UNKNOWN'; } @@ -173,14 +206,46 @@ export async function fetchNFTData(contractAddress: string, tokenId: string, cha throw new Error('Contract does not appear to be an NFT collection'); } + // For BNB Chain, try BSCScan API first + if ((nftStandard === 'BNB721' || chainId === '0x38' || chainId === '0x61')) { + try { + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + const response = await fetch( + `${baseUrl}?module=token&action=tokenuri&contractaddress=${contractAddress}&tokenid=${tokenId}&apikey=${BSCSCAN_API_KEY}` + ); + const data = await response.json(); + + if (data.status === '1' && data.result) { + const tokenURI = data.result; + const metadata = await fetchMetadata(tokenURI); + + if (metadata) { + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: metadata.name || `Token #${tokenId}`, + description: metadata.description || '', + imageUrl: resolveContentUrl(metadata.image || metadata.image_url || ''), + attributes: metadata.attributes || [], + chain: chainId + }; + } + } + } catch (err) { + console.warn("BSCScan API error:", err); + // Fall back to direct contract call + } + } + + // If BSCScan API fails or for other chains, try direct contract call const contract = getNFTContract(contractAddress, provider, nftStandard === 'ERC1155'); // Get token metadata URI let tokenURI; try { - tokenURI = nftStandard === 'ERC721' - ? await contract.tokenURI(tokenId) - : await contract.uri(tokenId); + tokenURI = nftStandard === 'ERC1155' + ? await contract.uri(tokenId) + : await contract.tokenURI(tokenId); // Some contracts return the base URI and require appending the token ID if (tokenURI.includes('{id}')) { @@ -189,6 +254,11 @@ export async function fetchNFTData(contractAddress: string, tokenId: string, cha } } catch (err) { console.error("Error fetching token URI:", err); + + // For BNB Chain, provide more specific error message + if (nftStandard === 'BNB721') { + toast.error("Failed to fetch BNB NFT data. Please check if the token exists."); + } return null; } @@ -211,7 +281,13 @@ export async function fetchNFTData(contractAddress: string, tokenId: string, cha }; } catch (error) { console.error("Error fetching NFT data:", error); - toast.error("Failed to fetch NFT data"); + + // Provide more specific error messages for BNB Chain + if (chainId === '0x38' || chainId === '0x61') { + toast.error("Failed to fetch BNB NFT. Please check the contract address and token ID."); + } else { + toast.error("Failed to fetch NFT data"); + } return null; } } @@ -266,9 +342,9 @@ export function resolveContentUrl(uri: string): string { * Fetch a batch of NFTs for a collection */ export async function fetchContractNFTs( - contractAddress: string, - chainId: string, - startIndex: number = 0, + contractAddress: string, + chainId: string, + startIndex: number = 0, count: number = 20 ): Promise { try { @@ -280,14 +356,49 @@ export async function fetchContractNFTs( } if (nftStandard === 'ERC1155') { - // For ERC1155, we need a different approach since there's no simple enumeration - // We'd need to rely on events, external APIs, or known token IDs throw new Error('Batch fetching for ERC1155 not implemented'); } + + // For BNB Chain, try BSCScan API first + if ((nftStandard === 'BNB721' || chainId === '0x38' || chainId === '0x61')) { + try { + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + const response = await fetch( + `${baseUrl}?module=token&action=tokennfttx&contractaddress=${contractAddress}&page=1&offset=${count}&startblock=0&sort=asc&apikey=${BSCSCAN_API_KEY}` + ); + const data = await response.json(); + + if (data.status === '1' && data.result) { + interface BSCNFTTransaction { + tokenID: string; + tokenName: string; + tokenSymbol: string; + } + + // Get unique token IDs from transactions with type checking + const transactions = data.result as BSCNFTTransaction[]; + const uniqueTokenIds = [...new Set(transactions + .map(tx => tx.tokenID) + .filter((id: string) => id && id.length > 0) + )]; + + // Fetch metadata for each token + const nftPromises = uniqueTokenIds.map(tokenId => + fetchNFTData(contractAddress, tokenId, chainId) + ); + + const nfts = await Promise.all(nftPromises); + return nfts.filter(nft => nft !== null) as NFTMetadata[]; + } + } catch (err) { + console.warn("BSCScan API error:", err); + // Fall back to direct contract call + } + } + // If BSCScan API fails or for other chains, try direct contract call const contract = getNFTContract(contractAddress, provider); - // For ERC721 try { // Check if the contract supports enumeration const supportsEnumeration = await contract.supportsInterface('0x780e9d63'); @@ -310,7 +421,7 @@ export async function fetchContractNFTs( const tokenIds = await Promise.all(fetchPromises); // Fetch metadata for each token - const nftPromises = tokenIds.map(tokenId => + const nftPromises = tokenIds.map(tokenId => fetchNFTData(contractAddress, tokenId.toString(), chainId) ); @@ -320,11 +431,22 @@ export async function fetchContractNFTs( return nfts.filter(nft => nft !== null) as NFTMetadata[]; } catch (err) { console.error("Error enumerating NFTs:", err); - throw new Error('Failed to enumerate NFTs'); + if (nftStandard === 'BNB721') { + toast.error("Failed to fetch BNB NFTs. The contract may not support enumeration."); + } else { + toast.error("Failed to enumerate NFTs"); + } + return []; } } catch (error) { console.error("Error batch fetching NFTs:", error); - toast.error("Failed to fetch NFTs from contract"); + + // Provide more specific error messages for BNB Chain + if (chainId === '0x38' || chainId === '0x61') { + toast.error("Failed to fetch BNB NFTs. Please check the contract address."); + } else { + toast.error("Failed to fetch NFTs from contract"); + } return []; } } @@ -386,49 +508,213 @@ export async function fetchOwnedNFTs( if (nftStandard === 'UNKNOWN') { throw new Error('Contract does not appear to be an NFT collection'); } - - const contract = getNFTContract(contractAddress, provider, nftStandard === 'ERC1155'); - - if (nftStandard === 'ERC721') { + + // For BNB Chain, try BSCScan API first + if (nftStandard === 'BNB721' || chainId === '0x38' || chainId === '0x61') { try { - // Check if contract supports enumeration - const supportsEnumeration = await contract.supportsInterface('0x780e9d63'); + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + const response = await fetch( + `${baseUrl}?module=token&action=tokennfttx&address=${ownerAddress}&contractaddress=${contractAddress}&apikey=${BSCSCAN_API_KEY}` + ); + const data = await response.json(); - if (!supportsEnumeration) { - throw new Error('Contract does not support enumeration'); + if (data.status === '1' && data.result) { + interface BSCNFTTransaction { + tokenID: string; + to: string; + from: string; + } + + const transactions = data.result as BSCNFTTransaction[]; + const ownedTokenIds = transactions + .filter(tx => tx.to.toLowerCase() === ownerAddress.toLowerCase()) + .filter(tx => !transactions.some( + outTx => outTx.tokenID === tx.tokenID && + outTx.from.toLowerCase() === ownerAddress.toLowerCase() + )) + .map(tx => tx.tokenID); + + const uniqueTokenIds = [...new Set(ownedTokenIds)]; + const nftPromises = uniqueTokenIds.map(tokenId => + fetchNFTData(contractAddress, tokenId, chainId) + ); + + const nfts = await Promise.all(nftPromises); + return nfts.filter(nft => nft !== null) as NFTMetadata[]; } - + } catch (err) { + console.warn("BSCScan API error:", err); + // Fall back to direct contract calls + } + } + + // If BSCScan API fails or for other chains, try direct contract calls + const contract = getNFTContract(contractAddress, provider, nftStandard === 'ERC1155'); + + if (nftStandard === 'ERC721' || nftStandard === 'BNB721') { + try { const balance = await contract.balanceOf(ownerAddress); if (balance.eq(0)) { return []; } - // Fetch token IDs owned by the address - const fetchPromises = []; - for (let i = 0; i < balance.toNumber(); i++) { - fetchPromises.push(contract.tokenOfOwnerByIndex(ownerAddress, i)); + try { + const supportsEnumeration = await contract.supportsInterface('0x780e9d63'); + + if (supportsEnumeration) { + const fetchPromises = []; + for (let i = 0; i < balance.toNumber(); i++) { + fetchPromises.push(contract.tokenOfOwnerByIndex(ownerAddress, i)); + } + + const tokenIds = await Promise.all(fetchPromises); + const nftPromises = tokenIds.map(tokenId => + fetchNFTData(contractAddress, tokenId.toString(), chainId) + ); + + const nfts = await Promise.all(nftPromises); + return nfts.filter(nft => nft !== null) as NFTMetadata[]; + } + } catch (enumError) { + console.warn("Enumeration not supported, scanning all tokens"); + } + + // Fallback: Scan all tokens + try { + const totalSupply = await contract.totalSupply(); + const nftsFound: NFTMetadata[] = []; + + // Scan in batches to avoid timeout + const batchSize = 20; + for (let i = 0; i < totalSupply.toNumber(); i += batchSize) { + const end = Math.min(i + batchSize, totalSupply.toNumber()); + const checkPromises = []; + + for (let tokenId = i; tokenId < end; tokenId++) { + checkPromises.push( + contract.ownerOf(tokenId) + .then((owner: string) => owner.toLowerCase() === ownerAddress.toLowerCase() ? tokenId : null) + .catch(() => null) + ); + } + + const results = await Promise.all(checkPromises); + const validTokenIds = results.filter((id): id is number => id !== null); + + if (validTokenIds.length > 0) { + const nftDataPromises = validTokenIds.map(tokenId => + fetchNFTData(contractAddress, tokenId.toString(), chainId) + ); + const batchNFTs = await Promise.all(nftDataPromises); + nftsFound.push(...batchNFTs.filter(nft => nft !== null) as NFTMetadata[]); + } + } + + return nftsFound; + } catch (scanError) { + console.error("Error scanning for owned NFTs:", scanError); + throw new Error(nftStandard === 'BNB721' + ? 'Failed to fetch owned BNB NFTs' + : 'Failed to enumerate owned NFTs' + ); } - - const tokenIds = await Promise.all(fetchPromises); - - // Fetch metadata for each token - const nftPromises = tokenIds.map(tokenId => - fetchNFTData(contractAddress, tokenId.toString(), chainId) - ); - - const nfts = await Promise.all(nftPromises); - - // Filter out null results - return nfts.filter(nft => nft !== null) as NFTMetadata[]; } catch (err) { console.error("Error enumerating owned NFTs:", err); throw new Error('Failed to enumerate owned NFTs'); } } else if (nftStandard === 'ERC1155') { - // For ERC1155, we need a different approach - // We'd need to rely on events, external APIs, or known token IDs - throw new Error('Owned NFT fetching for ERC1155 not implemented directly'); + // Special handling for ERC1155 tokens + try { + // For BSC chain, try BSCScan API first + if (chainId === '0x38' || chainId === '0x61') { + try { + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + const response = await fetch( + `${baseUrl}?module=account&action=token1155tx&address=${ownerAddress}&contractaddress=${contractAddress}&apikey=${BSCSCAN_API_KEY}` + ); + const data = await response.json(); + + if (data.status === '1' && data.result) { + // Process BSCScan ERC1155 transactions + const tokenIds = new Set(); + for (const tx of data.result) { + if (tx.to.toLowerCase() === ownerAddress.toLowerCase()) { + tokenIds.add(tx.tokenID); + } + } + + // Check current balance for each token ID + const activeTokens = await Promise.all( + Array.from(tokenIds).map(async tokenId => { + const balance = await contract.balanceOf(ownerAddress, tokenId); + return balance.gt(0) ? tokenId : null; + }) + ); + + const nftPromises = activeTokens + .filter((id): id is string => id !== null) + .map(tokenId => fetchNFTData(contractAddress, tokenId, chainId)); + + const nfts = await Promise.all(nftPromises); + return nfts.filter(nft => nft !== null) as NFTMetadata[]; + } + } catch (bscError) { + console.warn("BSCScan ERC1155 error:", bscError); + // Fall back to events + } + } + + // Using an extended contract instance for events + const eventContract = new ethers.Contract( + contractAddress, + [...ERC1155_ABI, ...BSC_EVENT_ABI], + getChainProvider(chainId) + ); + + // Get both single and batch transfer events + const [singleTransfers, batchTransfers] = await Promise.all([ + eventContract.queryFilter(eventContract.filters.TransferSingle(null, null, ownerAddress)), + eventContract.queryFilter(eventContract.filters.TransferBatch(null, null, ownerAddress)) + ]); + + // Process both types of transfers + const tokenIds = new Set(); + + singleTransfers.forEach(event => { + if (event.args?.id) { + tokenIds.add(event.args.id.toString()); + } + }); + + batchTransfers.forEach(event => { + if (event.args?.ids) { + event.args.ids.forEach((id: ethers.BigNumber) => { + tokenIds.add(id.toString()); + }); + } + }); + + // Check current balance for each token ID + const activeTokens = await Promise.all( + Array.from(tokenIds).map(async tokenId => { + const balance = await contract.balanceOf(ownerAddress, tokenId); + return balance.gt(0) ? tokenId : null; + }) + ); + + // Fetch metadata for tokens with non-zero balance + const nftPromises = activeTokens + .filter((id): id is string => id !== null) + .map(tokenId => fetchNFTData(contractAddress, tokenId, chainId)); + + const nfts = await Promise.all(nftPromises); + return nfts.filter(nft => nft !== null) as NFTMetadata[]; + } catch (error) { + console.error("Error fetching ERC1155 tokens:", error); + toast.error("Failed to fetch ERC1155 tokens. Please try again."); + return []; + } } return []; @@ -443,7 +729,6 @@ export async function fetchOwnedNFTs( * Get popular NFT collections for a specific chain */ export const POPULAR_NFT_COLLECTIONS = { - // Ethereum collections '0x1': [ { address: '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D', @@ -462,44 +747,28 @@ export const POPULAR_NFT_COLLECTIONS = { name: 'Mutant Ape Yacht Club', description: 'The MUTANT APE YACHT CLUB is a collection of up to 20,000 Mutant Apes.', standard: 'ERC721' - }, - { - address: '0x8a90CAb2b38dba80c64b7734e58Ee1dB38B8992e', - name: 'Doodles', - description: 'A community-driven collectibles project featuring art by Burnt Toast.', - standard: 'ERC721' - }, - { - address: '0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258', - name: 'Otherdeed for Otherside', - description: 'Otherdeeds are the key to claiming land in Otherside.', - standard: 'ERC721' } ], - - // BNB Chain collections '0x38': [ { - address: '0xDf7952B35f24aCF7fC0487D01c8d5690a60DBa07', - name: 'Pancake Bunnies', - description: 'Pancake Bunnies are NFTs created by PancakeSwap.', - standard: 'ERC721' + address: '0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D', + name: 'Pancake Squad', + description: 'PancakeSwap\'s NFT collection for the BSC community.', + standard: 'BNB721' }, { address: '0x0a8901b0E25DEb55A87524f0cC164E9644020EBA', - name: 'Pancake Squad', - description: 'PancakeSwap\'s NFT collection of 10,000 unique bunnies.', - standard: 'ERC721' + name: 'BSC Punks', + description: 'The first NFT collection on Binance Smart Chain.', + standard: 'BNB721' }, { - address: '0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D', - name: 'BNB Bulls Club', - description: 'The BNB Bulls Club is a collection of 10,000 unique NFTs on the BNB Chain.', - standard: 'ERC721' + address: '0xDf7952B35f24aCF7fC0487D01c8d5690a60DBa07', + name: 'BSC Multi-Token', + description: 'Example ERC1155 collection on BSC for testing.', + standard: 'ERC1155' } ], - - // Sepolia testnet (demo collections) '0xaa36a7': [ { address: '0x7C09282C24C363073E0f30D74C301C312E5533AC', @@ -508,31 +777,39 @@ export const POPULAR_NFT_COLLECTIONS = { standard: 'ERC721' } ], - - // BNB Testnet - including our mock CryptoPath collection '0x61': [ { address: '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551', name: 'CryptoPath Genesis', description: 'The official NFT collection of the CryptoPath ecosystem with exclusive benefits.', - standard: 'ERC721' + standard: 'BNB721' + }, + { + address: '0x60935F36e4631F73f0f407e68642144e07aC7f5E', + name: 'BSC Test Collection', + description: 'Test NFT collection with both BNB721 and ERC1155 tokens.', + standard: 'ERC1155' } ] -}; +} as const; /** * Helper function to get contract examples for educational purposes */ -export function getExampleNFTContract(chainId: string): string { +export function getExampleNFTContract(chainId: string, standard: 'ERC721' | 'BNB721' | 'ERC1155' = 'ERC721'): string { switch (chainId) { case '0x1': return '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D'; // BAYC on Ethereum case '0xaa36a7': return '0x7C09282C24C363073E0f30D74C301C312E5533AC'; // Test NFT on Sepolia case '0x38': - return '0x0a8901b0E25DEb55A87524f0cC164E9644020EBA'; // PancakeSquad on BNB Chain + return standard === 'ERC1155' + ? '0xDf7952B35f24aCF7fC0487D01c8d5690a60DBa07' // BSC Multi-Token + : '0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D'; // Pancake Squad case '0x61': - return '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'; // CryptoPath Genesis on BNB Testnet + return standard === 'ERC1155' + ? '0x60935F36e4631F73f0f407e68642144e07aC7f5E' // BSC Test Collection + : '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'; // CryptoPath Genesis default: return '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D'; // Default to BAYC } diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 2bde089..4b83829 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -400,7 +400,7 @@ export async function fetchPopularCollections(chainId: string): Promise { - // Generate realistic price history data based on real market trends - const now = Date.now(); - const data = []; - const days = 90; // 3 months of data - - // Determine base price and volatility based on collection - let basePrice = 1; - let volatility = 0.05; - let trend = 0; // Neutral trend by default - - // Special handling for known collections - if (chainId === '0x1') { - if (contractAddress.toLowerCase() === '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d') { - // BAYC - high value, high volatility - basePrice = 70; - volatility = 0.08; - trend = 0.001; // Slight uptrend - } else if (contractAddress.toLowerCase() === '0xed5af388653567af2f388e6224dc7c4b3241c544') { - // Azuki - basePrice = 8; - volatility = 0.06; - trend = 0.0005; - } else if (contractAddress.toLowerCase() === '0x60e4d786628fea6478f785a6d7e704777c86a7c6') { - // MAYC - basePrice = 10; - volatility = 0.07; - trend = 0.0007; - } - } else if (chainId === '0x38') { - if (contractAddress.toLowerCase() === '0x0a8901b0e25deb55a87524f0cc164e9644020eba') { - // Pancake Squad - basePrice = 2; - volatility = 0.04; - trend = 0.0008; // Stronger uptrend - } - } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551') { - // CryptoPath Genesis - basePrice = 10; - volatility = 0.06; - trend = 0.002; // Strong growth - } else { - // Use token ID to influence base price if available - basePrice = tokenId ? - (parseInt(tokenId, 16) % 100) / 10 + 0.5 : // Use tokenId to generate a base price - 1 + Math.random() * 5; // Random base price for collection - } - - // Generate prices with realistic market movements - let price = basePrice; - for (let i = days; i >= 0; i--) { - const date = new Date(now - 1000 * 60 * 60 * 24 * i); + try { + // Generate realistic price history data based on real market trends + const now = Date.now(); + const data = []; + const days = 90; // 3 months of data - // Apply market factors - const dayOfWeek = date.getDay(); - const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; - const weekendFactor = isWeekend ? (Math.random() > 0.5 ? 0.01 : -0.01) : 0; // Weekend volatility + // Determine base price and volatility based on collection + let basePrice = 1; + let volatility = 0.05; + let trend = 0; // Neutral trend by default - // Market cycle - simulate some cyclical behavior (10-day cycles) - const cycleFactor = 0.02 * Math.sin(i / 10); + // Special handling for known collections + if (chainId === '0x1') { + if (contractAddress.toLowerCase() === '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d') { + // BAYC - high value, high volatility + basePrice = 70; + volatility = 0.08; + trend = 0.001; // Slight uptrend + } else if (contractAddress.toLowerCase() === '0xed5af388653567af2f388e6224dc7c4b3241c544') { + // Azuki + basePrice = 8; + volatility = 0.06; + trend = 0.0005; + } else if (contractAddress.toLowerCase() === '0x60e4d786628fea6478f785a6d7e704777c86a7c6') { + // MAYC + basePrice = 10; + volatility = 0.07; + trend = 0.0007; + } + } else if (chainId === '0x38') { + if (contractAddress.toLowerCase() === '0x0a8901b0e25deb55a87524f0cc164e9644020eba') { + // Pancake Squad + basePrice = 2; + volatility = 0.04; + trend = 0.0008; // Stronger uptrend + } + } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551') { + // CryptoPath Genesis + basePrice = 10; + volatility = 0.06; + trend = 0.002; // Strong growth + } else { + // Use token ID to influence base price if available + basePrice = tokenId ? + (parseInt(tokenId, 16) % 100) / 10 + 0.5 : // Use tokenId to generate a base price + 1 + Math.random() * 5; // Random base price for collection + } - // Apply trend (accumulated over time) + random volatility + cyclical factor + weekend effect - price = price * (1 + trend + (Math.random() - 0.5) * volatility + cycleFactor + weekendFactor); + // Generate prices with realistic market movements + let price = basePrice; + for (let i = days; i >= 0; i--) { + const date = new Date(now - 1000 * 60 * 60 * 24 * i); + + // Apply market factors - fix the TypeScript error with explicit weekend check + // Instead of comparing day of week directly, use an array of weekend days + const weekendDays = [0, 6]; // 0 = Sunday, 6 = Saturday + const isWeekend = weekendDays.includes(date.getDay()); + const weekendFactor = isWeekend ? (Math.random() > 0.5 ? 0.01 : -0.01) : 0; // Weekend volatility + + // Market cycle - simulate some cyclical behavior (10-day cycles) + const cycleFactor = 0.02 * Math.sin(i / 10); + + // Apply trend (accumulated over time) + random volatility + cyclical factor + weekend effect + price = price * (1 + trend + (Math.random() - 0.5) * volatility + cycleFactor + weekendFactor); + + // Floor at 10% of base price to avoid unrealistic crashes + price = Math.max(price, basePrice * 0.1); + + data.push({ + date: date.toISOString().split('T')[0], + price: price.toFixed(4) + }); + } - // Floor at 10% of base price to avoid unrealistic crashes - price = Math.max(price, basePrice * 0.1); + // Filter data based on period + const pastDate = new Date(); - data.push({ - date: date.toISOString().split('T')[0], - price: price.toFixed(4) - }); + switch (period) { + case '1d': + pastDate.setDate(pastDate.getDate() - 1); + break; + case '7d': + pastDate.setDate(pastDate.getDate() - 7); + break; + case '30d': + pastDate.setDate(pastDate.getDate() - 30); + break; + case 'all': + default: + // No filtering for 'all' + break; + } + + // Filter and format price history + return period === 'all' + ? data + : data.filter(item => new Date(item.date) >= pastDate); + } catch (error) { + console.error("Error fetching price history:", error); + return []; } - - return data; } /** @@ -781,7 +810,7 @@ export async function getCollectionStats( }> { try { // Get price history for the chosen period - const priceData = await fetchPriceHistory(contractAddress, undefined, chainId); + const priceData = await fetchPriceHistory(contractAddress, undefined, chainId, period); // Filter data based on period const now = new Date(); From cf999a14bdcfa49712257f946838466cc5444ed6 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Sun, 23 Mar 2025 12:04:05 +0700 Subject: [PATCH 02/17] Enhance NFT layout with link to collections, update featured spotlight image, implement caching for BSCScan API calls, and improve loading indicators for BNB Chain --- app/NFT/collection/[collectionId]/page.tsx | 19 +- app/NFT/layout.tsx | 6 +- components/NFT/FeaturedSpotlight.tsx | 2 +- lib/api/alchemyNFTApi.ts | 474 ++++++++++++++++++--- lib/api/nftContracts.ts | 75 +++- 5 files changed, 486 insertions(+), 90 deletions(-) diff --git a/app/NFT/collection/[collectionId]/page.tsx b/app/NFT/collection/[collectionId]/page.tsx index 20578c2..c7d2b5e 100644 --- a/app/NFT/collection/[collectionId]/page.tsx +++ b/app/NFT/collection/[collectionId]/page.tsx @@ -169,6 +169,14 @@ export default function CollectionDetailsPage() { setLoading(true); try { + // For BNB Chain, show a loading toast to indicate it might take some time + if (networkId === '0x38' || networkId === '0x61') { + toast({ + title: 'Loading BNB Chain NFTs', + description: 'This may take a moment as we fetch data from BSCScan...', + }); + } + const metadata = await fetchCollectionInfo(collectionId, networkId); setCollection({...metadata, chain: networkId}); @@ -190,7 +198,10 @@ export default function CollectionDetailsPage() { })); setNfts(nftsWithChain); - setTotalPages(Math.ceil(nftData.totalCount / pageSize)); + + // Calculate total pages - may be different for BNB Chain + const totalPagesCount = Math.max(1, Math.ceil(nftData.totalCount / pageSize)); + setTotalPages(totalPagesCount); // Extract attributes for filtering const attributeMap: Record = {}; @@ -209,9 +220,9 @@ export default function CollectionDetailsPage() { // Add network as a filter attribute attributeMap['Network'] = [ - chainId === '0x1' ? 'Ethereum' : - chainId === '0xaa36a7' ? 'Sepolia' : - chainId === '0x38' ? 'BNB Chain' : + networkId === '0x1' ? 'Ethereum' : + networkId === '0xaa36a7' ? 'Sepolia' : + networkId === '0x38' ? 'BNB Chain' : 'BNB Testnet' ]; diff --git a/app/NFT/layout.tsx b/app/NFT/layout.tsx index 34f8dbd..ad13c0d 100644 --- a/app/NFT/layout.tsx +++ b/app/NFT/layout.tsx @@ -114,9 +114,9 @@ export default function NFTLayout({ children }: { children: React.ReactNode }) {
  • - - Collections - + + Collections +
    • )} diff --git a/components/NFT/FeaturedSpotlight.tsx b/components/NFT/FeaturedSpotlight.tsx index 89000e3..4ca804d 100644 --- a/components/NFT/FeaturedSpotlight.tsx +++ b/components/NFT/FeaturedSpotlight.tsx @@ -31,7 +31,7 @@ const spotlights: NFTSpotlight[] = [ id: 'pancake-squad', name: 'Pancake Squad', description: 'A collection of 10,000 unique, cute, and sometimes fierce PancakeSwap bunny NFTs that serve as your membership to the Pancake Squad.', - image: 'https://assets.pancakeswap.finance/pancakeSquad/header.png', + image: 'https://i.seadn.io/s/primary-drops/0xc291cc12018a6fcf423699bce985ded86bac47cb/33406336:about:media:6f541d5a-5309-41ad-8f73-74f092ed1314.png?auto=format&dpr=1&w=1200', chain: '0x38', // BNB Chain contractAddress: '0xdcbcf766dcd33a7a8abe6b01a8b0e44a006c4ac1', artist: 'PancakeSwap' diff --git a/lib/api/alchemyNFTApi.ts b/lib/api/alchemyNFTApi.ts index c34a314..c9b8fc4 100644 --- a/lib/api/alchemyNFTApi.ts +++ b/lib/api/alchemyNFTApi.ts @@ -2,6 +2,46 @@ import { toast } from "sonner"; import axios from 'axios'; const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY || 'demo'; +const BSCSCAN_API_KEY = process.env.BSCSCAN_API_KEY || '1QGN2GHNEPT6CQP854TVBH24C85714ETC5'; + +// Simple in-memory cache for BSCScan responses to avoid hitting rate limits +const responseCache = new Map(); +const CACHE_TTL = 60000; // 1 minute cache TTL + +// Helper to get cached data or fetch from BSCScan with rate limiting +async function cachedBscScanRequest(params: Record, chainId: string): Promise { + const cacheKey = JSON.stringify(params) + chainId; + const cachedResponse = responseCache.get(cacheKey); + + // Return cached response if valid + if (cachedResponse && (Date.now() - cachedResponse.timestamp) < CACHE_TTL) { + return cachedResponse.data; + } + + // Use a delay to stay under rate limits (5 calls per second) + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + + try { + // Add API key to params + const requestParams = { + ...params, + apikey: BSCSCAN_API_KEY + }; + + const response = await axios.get(baseUrl, { params: requestParams }); + + // Cache the successful response + responseCache.set(cacheKey, { + data: response.data, + timestamp: Date.now() + }); + + return response.data; + } catch (error) { + console.error("BSCScan API request failed:", error); + throw error; + } +} const CHAIN_ID_TO_NETWORK: Record = { '0x1': 'eth-mainnet', @@ -11,10 +51,14 @@ const CHAIN_ID_TO_NETWORK: Record = { '0x13881': 'polygon-mumbai', '0xa': 'optimism-mainnet', '0xa4b1': 'arbitrum-mainnet', - '0x38': 'bsc-mainnet', - '0x61': 'bsc-testnet', + // BNB Chain networks are handled separately with BSCScan }; +// Check if a chain is BNB-based +function isBNBChain(chainId: string): boolean { + return chainId === '0x38' || chainId === '0x61'; +} + interface AlchemyNFTResponse { ownedNfts: any[]; totalCount: number; @@ -108,64 +152,16 @@ const mockCollections = [ // Real BNB Chain collections const mockBNBCollections = [ { - id: '0xdcbcf766dcd33a7a8abe6b01a8b0e44a006c4ac1', + id: '0x0a8901b0E25DEb55A87524f0cC164E9644020EBA', name: 'Pancake Squad', description: 'PancakeSwap\'s NFT collection of 10,000 unique bunnies designed to reward loyal community members and bring utility to the CAKE token.', - imageUrl: 'https://assets.pancakeswap.finance/pancakeSquad/header.png', - bannerImageUrl: 'https://assets.pancakeswap.finance/pancakeSquad/pancakeSquadBanner.png', + imageUrl: 'https://i.seadn.io/s/raw/files/8b1d3939c420d39c8914f68b506c50db.png?auto=format&dpr=1&w=256', + bannerImageUrl: 'https://i.seadn.io/s/primary-drops/0xc291cc12018a6fcf423699bce985ded86bac47cb/33406336:about:media:6f541d5a-5309-41ad-8f73-74f092ed1314.png?auto=format&dpr=1&w=1200', floorPrice: '2.5', totalSupply: '10000', chain: '0x38', verified: true, category: 'Gaming' - }, - { - id: '0xcec33930ba196cdf9f38e1a5e2a1e0708450d20f', - name: 'Era7: Game of Truth', - description: 'Era7: Game of Truth is a play-to-earn trading card game inspired by Magic: The Gathering, Hearthstone, and Runeterra. Build your deck and battle against players around the world!', - imageUrl: 'https://images.pocketgamer.biz/T/52539/2022/52539_Era7_Game_of_Truth_screenshot_1.png', - bannerImageUrl: 'https://pbs.twimg.com/profile_banners/1428004235405357057/1648021562/1500x500', - floorPrice: '0.4', - totalSupply: '33000', - chain: '0x38', - verified: true, - category: 'Gaming' - }, - { - id: '0x04a5e3ed4907b781f702adbddf1b7e771c31b0f2', - name: 'BSC Punks', - description: 'CryptoPunks on BSC - 10,000 uniquely generated characters on the BNB Chain.', - imageUrl: 'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE=s130', - bannerImageUrl: 'https://pbs.twimg.com/profile_banners/1364731917736632321/1649351522/1500x500', - floorPrice: '0.25', - totalSupply: '10000', - chain: '0x38', - verified: false, - category: 'Art & Collectibles' - }, - { - id: '0x85f0e02cb992aa1f9f47112f815f519ef1a59e2d', - name: 'BNB Bulls Club', - description: 'The BNB Bulls Club is a collection of 10,000 unique NFTs living on the BNB Chain, each representing membership to the club with unique utilities.', - imageUrl: 'https://static-nft.pancakeswap.com/mainnet/0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D/banner-lg.png', - bannerImageUrl: 'https://static-nft.pancakeswap.com/mainnet/0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D/banner-lg.png', - floorPrice: '1.2', - totalSupply: '10000', - chain: '0x38', - verified: false, - category: 'Membership' - }, - { - id: '0x3cd266509d127d0eac42f4474f57d0526804b44e', - name: 'Buildspace', - description: 'Buildspace: Build your own DAO with Javascript | Cohort Alkes | #360 - DAOs are taking over. Build one yourself for fun. Maybe it\'s a meme DAO for your friends. Maybe it\'s a DAO that aims to fix climate change. Up to you. We\'ll be going over things like minting a membership NFT, creating/airdropping a token, public treasuries, and governance using a token!', - imageUrl: 'https://tokens.buildspace.so/assets/CH4f447780-07cf-408a-8f4c-253a8b4e8bae-359/render.mp4', - bannerImageUrl: 'https://buildspace.so/assets/buildspace-banner.png', - floorPrice: '0.05', - totalSupply: '10000', - chain: '0x38', - verified: true, - category: 'Education' } ]; @@ -184,18 +180,86 @@ const cryptoPathCollection = { featured: true }; -const API_ENDPOINTS = { - '0x1': 'https://eth-mainnet.g.alchemy.com/v2/your-api-key', - '0xaa36a7': 'https://eth-sepolia.g.alchemy.com/v2/your-api-key', - '0x38': 'https://bsc-mainnet.g.alchemy.com/v2/your-api-key', - '0x61': 'https://bsc-testnet.g.alchemy.com/v2/your-api-key' -}; - export async function fetchUserNFTs(address: string, chainId: string, pageKey?: string): Promise { if (!address) { throw new Error("Address is required to fetch NFTs"); } + // For BNB Chain, use BSCScan API + if (isBNBChain(chainId)) { + try { + const result = await cachedBscScanRequest({ + module: 'account', + action: 'tokennfttx', + address: address, + page: '1', + offset: '100', + sort: 'desc' + }, chainId); + + if (result.status === '1' && result.result) { + // Group transactions by contract address to simulate the Alchemy response format + const groupedByContract: Record = {}; + + for (const tx of result.result) { + if (!groupedByContract[tx.contractAddress]) { + groupedByContract[tx.contractAddress] = []; + } + groupedByContract[tx.contractAddress].push(tx); + } + + // Convert to Alchemy-like format for compatibility + const ownedNfts = Object.entries(groupedByContract).map(([contractAddress, transactions]) => { + // Filter for NFTs the user still owns (received but not sent) + const ownedTokenIds = new Set(); + + // Track all token IDs user has received + transactions.forEach(tx => { + if (tx.to.toLowerCase() === address.toLowerCase()) { + ownedTokenIds.add(tx.tokenID); + } + }); + + // Remove tokens that were sent away + transactions.forEach(tx => { + if (tx.from.toLowerCase() === address.toLowerCase()) { + ownedTokenIds.delete(tx.tokenID); + } + }); + + // Take the first transaction to get NFT details + const firstTx = transactions[0]; + + return { + contract: { + address: contractAddress, + name: firstTx.tokenName || 'Unknown', + symbol: firstTx.tokenSymbol || '', + }, + id: { + tokenId: Array.from(ownedTokenIds)[0] || '0', + }, + balance: ownedTokenIds.size.toString(), + media: [{ gateway: '' }], + tokenUri: { gateway: '', raw: '' } + }; + }); + + return { + ownedNfts: ownedNfts.filter(nft => nft.balance !== '0'), + totalCount: ownedNfts.length + }; + } + + return { ownedNfts: [], totalCount: 0 }; + } catch (error) { + console.error(`Error fetching NFTs from BSCScan for ${address}:`, error); + toast.error("Failed to load NFTs from BSCScan"); + return { ownedNfts: [], totalCount: 0 }; + } + } + + // For non-BNB chains, continue using Alchemy const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; try { @@ -229,6 +293,137 @@ export async function fetchCollectionInfo(contractAddress: string, chainId: stri throw new Error("Contract address is required"); } + // For BNB Chain networks, use BSCScan API + if (isBNBChain(chainId)) { + try { + // First try to get contract ABI to extract more info + const abiResult = await cachedBscScanRequest({ + module: 'contract', + action: 'getabi', + address: contractAddress + }, chainId); + + // Default values + let name = 'Unknown Collection'; + let symbol = ''; + let totalSupply = '0'; + const description = ''; + const imageUrl = ''; + + // Try to use the mock data if available for better UX + if (chainId === '0x38') { + const mockCollection = mockBNBCollections.find(c => + c.id.toLowerCase() === contractAddress.toLowerCase() + ); + + if (mockCollection) { + return { + name: mockCollection.name, + symbol: '', + totalSupply: mockCollection.totalSupply, + description: mockCollection.description, + imageUrl: mockCollection.imageUrl + }; + } + } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { + // Use CryptoPath collection info for testnet + return { + name: cryptoPathCollection.name, + symbol: 'CP', + totalSupply: cryptoPathCollection.totalSupply, + description: cryptoPathCollection.description, + imageUrl: cryptoPathCollection.imageUrl + }; + } + + // If we have valid ABI, try to extract info + if (abiResult.status === '1' && abiResult.result) { + try { + // Get token name + const nameResult = await cachedBscScanRequest({ + module: 'contract', + action: 'readcontract', + address: contractAddress, + contractaddress: contractAddress, + function: 'name()' + }, chainId); + + if (nameResult.status === '1' && nameResult.result) { + name = nameResult.result; + } + + // Get token symbol + const symbolResult = await cachedBscScanRequest({ + module: 'contract', + action: 'readcontract', + address: contractAddress, + contractaddress: contractAddress, + function: 'symbol()' + }, chainId); + + if (symbolResult.status === '1' && symbolResult.result) { + symbol = symbolResult.result; + } + + // Get total supply + const supplyResult = await cachedBscScanRequest({ + module: 'contract', + action: 'readcontract', + address: contractAddress, + contractaddress: contractAddress, + function: 'totalSupply()' + }, chainId); + + if (supplyResult.status === '1' && supplyResult.result) { + totalSupply = supplyResult.result; + } + } catch (error) { + console.error("Error reading contract functions:", error); + } + } + + // If we still don't have a name, try to get token info + if (name === 'Unknown Collection') { + try { + // Get token info + const tokenInfoResult = await cachedBscScanRequest({ + module: 'token', + action: 'tokeninfo', + contractaddress: contractAddress, + }, chainId); + + if (tokenInfoResult.status === '1' && tokenInfoResult.result?.[0]) { + const info = tokenInfoResult.result[0]; + name = info.name || name; + symbol = info.symbol || symbol; + totalSupply = info.totalSupply || totalSupply; + } + } catch (error) { + console.error("Error getting token info:", error); + } + } + + return { + name, + symbol, + totalSupply, + description, + imageUrl + }; + } catch (error) { + console.error(`Error fetching collection info for ${contractAddress} from BSCScan:`, error); + toast.error("Failed to load collection info from BSCScan"); + return { + name: 'Unknown Collection', + symbol: '', + totalSupply: '0', + description: '', + imageUrl: '', + }; + } + } + + // For non-BNB chains, continue using Alchemy const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; try { @@ -294,7 +489,6 @@ interface CollectionNFTsResponse { pageKey?: string; } - export async function fetchCollectionNFTs( contractAddress: string, chainId: string, @@ -309,7 +503,163 @@ export async function fetchCollectionNFTs( throw new Error("Contract address is required"); } - // For other collections, continue with the existing implementation + // For BNB Chain networks, use BSCScan API + if (isBNBChain(chainId)) { + try { + // Get NFT transactions for the contract - this is the most reliable way to get all token IDs + const result = await cachedBscScanRequest({ + module: 'token', + action: 'tokennfttx', + contractaddress: contractAddress, + page: '1', + offset: String(pageSize * 2), // Request more to account for transfers + sort: sortDirection + }, chainId); + + if (result.status === '1' && result.result) { + // Extract unique token IDs + const uniqueTokenIds = [...new Set(result.result + .map((tx: any) => tx.tokenID) + .filter((id: string) => id && id.length > 0) + )]; + + // Sort token IDs + const sortedTokenIds = uniqueTokenIds.sort((a, b) => { + const stringA = String(a); + const stringB = String(b); + const numA = parseInt(stringA, 10); + const numB = parseInt(stringB, 10); + + if (isNaN(numA) || isNaN(numB)) { + // Fallback to string comparison if not valid numbers + return sortDirection === 'asc' + ? stringA.localeCompare(stringB) + : stringB.localeCompare(stringA); + } + + return sortDirection === 'asc' ? numA - numB : numB - numA; + }); + + // Apply pagination + const startIdx = (page - 1) * pageSize; + const paginatedTokenIds = sortedTokenIds.slice(startIdx, startIdx + pageSize); + + // Fetch metadata for each token (could be optimized with Promise.all with rate limiting) + const nfts: CollectionNFT[] = []; + + // Apply search filter if needed + const filteredTokenIds = searchQuery + ? paginatedTokenIds.filter(id => String(id).includes(searchQuery)) + : paginatedTokenIds; + + for (const tokenId of filteredTokenIds) { + try { + // Get token URI + const tokenUriResult = await cachedBscScanRequest({ + module: 'token', + action: 'tokenuri', + contractaddress: contractAddress, + tokenid: String(tokenId) + }, chainId); + + if (tokenUriResult.status === '1' && tokenUriResult.result) { + const uri = tokenUriResult.result; + + // Fetch metadata from URI + try { + const resolvedUri = uri.startsWith('ipfs://') + ? `https://ipfs.io/ipfs/${uri.slice(7)}` + : uri; + + const metadataResponse = await axios.get(resolvedUri); + const metadata = metadataResponse.data; + + // Format into our CollectionNFT structure + const nft: CollectionNFT = { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: String(tokenId), + name: metadata.name || `NFT #${tokenId}`, + description: metadata.description || '', + imageUrl: metadata.image?.startsWith('ipfs://') + ? `https://ipfs.io/ipfs/${metadata.image.slice(7)}` + : metadata.image || '', + attributes: metadata.attributes || [] + }; + + // Apply attribute filters if needed + let includeNft = true; + + if (Object.keys(attributes).length > 0) { + for (const [traitType, values] of Object.entries(attributes)) { + const nftAttribute = nft.attributes.find(attr => attr.trait_type === traitType); + if (!nftAttribute || !values.includes(nftAttribute.value)) { + includeNft = false; + break; + } + } + } + + if (includeNft) { + nfts.push(nft); + } + } catch (metadataError) { + console.error(`Error fetching metadata for token ${tokenId}:`, metadataError); + + // Add a basic NFT with the token ID even if metadata fails + nfts.push({ + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: String(tokenId), + name: `NFT #${tokenId}`, + description: 'Metadata unavailable', + imageUrl: '', + attributes: [] + }); + } + } + } catch (tokenError) { + console.error(`Error fetching token ${tokenId} data:`, tokenError); + } + + // Add a short delay to avoid rate limits + await new Promise(resolve => setTimeout(resolve, 200)); + } + + // Apply sorting to the final results + nfts.sort((a, b) => { + if (sortBy === 'tokenId') { + const numA = parseInt(a.tokenId, 10); + const numB = parseInt(b.tokenId, 10); + + if (!isNaN(numA) && !isNaN(numB)) { + return sortDirection === 'asc' ? numA - numB : numB - numA; + } + + return sortDirection === 'asc' + ? a.tokenId.localeCompare(b.tokenId) + : b.tokenId.localeCompare(a.tokenId); + } else if (sortBy === 'name') { + return sortDirection === 'asc' + ? a.name.localeCompare(b.name) + : b.name.localeCompare(a.name); + } + return 0; + }); + + return { + nfts, + totalCount: uniqueTokenIds.length + }; + } + + return { nfts: [], totalCount: 0 }; + } catch (error) { + console.error(`Error fetching NFTs for collection ${contractAddress} from BSCScan:`, error); + toast.error("Failed to load collection NFTs from BSCScan"); + return { nfts: [], totalCount: 0 }; + } + } + + // For non-BNB chains, continue using Alchemy const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; try { diff --git a/lib/api/nftContracts.ts b/lib/api/nftContracts.ts index d1121dd..35fdbc3 100644 --- a/lib/api/nftContracts.ts +++ b/lib/api/nftContracts.ts @@ -133,6 +133,49 @@ export async function detectNFTStandard(contractAddress: string, chainId: string } } +// Simple in-memory cache for BSCScan responses to avoid hitting rate limits +const contractResponseCache = new Map(); +const CONTRACT_CACHE_TTL = 300000; // 5 minute cache TTL + +// Helper function to make BSCScan API calls with caching +async function cachedBscScanApiCall(params: Record, chainId: string): Promise { + const cacheKey = JSON.stringify(params) + chainId; + const cachedResponse = contractResponseCache.get(cacheKey); + + // Return cached response if valid + if (cachedResponse && (Date.now() - cachedResponse.timestamp) < CONTRACT_CACHE_TTL) { + return cachedResponse.data; + } + + // Build the URL for BSCScan API + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + const queryParams = new URLSearchParams({ + ...params, + apikey: BSCSCAN_API_KEY + }); + + try { + const response = await fetch(`${baseUrl}?${queryParams.toString()}`); + + if (!response.ok) { + throw new Error(`BSCScan API request failed with status ${response.status}`); + } + + const data = await response.json(); + + // Cache the successful response + contractResponseCache.set(cacheKey, { + data, + timestamp: Date.now() + }); + + return data; + } catch (error) { + console.error("BSCScan API request failed:", error); + throw error; + } +} + /** * Get the collection info for an NFT contract */ @@ -359,14 +402,18 @@ export async function fetchContractNFTs( throw new Error('Batch fetching for ERC1155 not implemented'); } - // For BNB Chain, try BSCScan API first + // For BNB Chain, use cached BSCScan API to improve performance if ((nftStandard === 'BNB721' || chainId === '0x38' || chainId === '0x61')) { try { - const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; - const response = await fetch( - `${baseUrl}?module=token&action=tokennfttx&contractaddress=${contractAddress}&page=1&offset=${count}&startblock=0&sort=asc&apikey=${BSCSCAN_API_KEY}` - ); - const data = await response.json(); + const data = await cachedBscScanApiCall({ + module: 'token', + action: 'tokennfttx', + contractaddress: contractAddress, + page: '1', + offset: count.toString(), + startblock: '0', + sort: 'asc' + }, chainId); if (data.status === '1' && data.result) { interface BSCNFTTransaction { @@ -751,22 +798,10 @@ export const POPULAR_NFT_COLLECTIONS = { ], '0x38': [ { - address: '0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D', + address: '0x0a8901b0E25DEb55A87524f0cC164E9644020EBA', name: 'Pancake Squad', description: 'PancakeSwap\'s NFT collection for the BSC community.', standard: 'BNB721' - }, - { - address: '0x0a8901b0E25DEb55A87524f0cC164E9644020EBA', - name: 'BSC Punks', - description: 'The first NFT collection on Binance Smart Chain.', - standard: 'BNB721' - }, - { - address: '0xDf7952B35f24aCF7fC0487D01c8d5690a60DBa07', - name: 'BSC Multi-Token', - description: 'Example ERC1155 collection on BSC for testing.', - standard: 'ERC1155' } ], '0xaa36a7': [ @@ -805,7 +840,7 @@ export function getExampleNFTContract(chainId: string, standard: 'ERC721' | 'BNB case '0x38': return standard === 'ERC1155' ? '0xDf7952B35f24aCF7fC0487D01c8d5690a60DBa07' // BSC Multi-Token - : '0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D'; // Pancake Squad + : '0x0a8901b0E25DEb55A87524f0cC164E9644020EBA'; // Pancake Squad with correct address case '0x61': return standard === 'ERC1155' ? '0x60935F36e4631F73f0f407e68642144e07aC7f5E' // BSC Test Collection From 524b491d3b32e9811c140d0f2bc585d3d7c941f1 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Sun, 23 Mar 2025 12:26:23 +0700 Subject: [PATCH 03/17] Refactor Checkbox component and implement SafeCheckbox for non-button usage; update CollectionDetailsPage to use divs for attribute filtering with improved accessibility. --- app/NFT/collection/[collectionId]/page.tsx | 36 ++- components/ui/checkbox.tsx | 50 ++- lib/api/alchemyNFTApi.ts | 339 ++++++++++++++++----- 3 files changed, 334 insertions(+), 91 deletions(-) diff --git a/app/NFT/collection/[collectionId]/page.tsx b/app/NFT/collection/[collectionId]/page.tsx index c7d2b5e..4de8f69 100644 --- a/app/NFT/collection/[collectionId]/page.tsx +++ b/app/NFT/collection/[collectionId]/page.tsx @@ -628,10 +628,8 @@ export default function CollectionDetailsPage() { const styles = getAttributeStyles(traitType, value); return (
    - +
    ); })} @@ -703,20 +702,27 @@ export default function CollectionDetailsPage() { {getSortedAttributeValues(traitType, values).map((value) => { const styles = getAttributeStyles(traitType, value); return ( - +
    + handleAttributeFilter(traitType, value)} + /> +
    + + ); })} diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx index df61a13..86bc2d4 100644 --- a/components/ui/checkbox.tsx +++ b/components/ui/checkbox.tsx @@ -6,7 +6,8 @@ import { Check } from "lucide-react" import { cn } from "@/lib/utils" -const Checkbox = React.forwardRef< +// Original Checkbox component +export const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -27,4 +28,49 @@ const Checkbox = React.forwardRef< )) Checkbox.displayName = CheckboxPrimitive.Root.displayName -export { Checkbox } +// Create a "safe" non-button checkbox that can be used inside buttons +// This uses a div instead of a button for the root element +interface SafeCheckboxProps extends Omit, 'onClick'> { + checked?: boolean; + onCheckedChange?: (checked: boolean) => void; +} + +export const SafeCheckbox = React.forwardRef( + ({ className, onCheckedChange, checked, ...props }, ref) => { + const [isChecked, setIsChecked] = React.useState(checked || false); + + React.useEffect(() => { + setIsChecked(!!checked); + }, [checked]); + + // Fix the type to explicitly use HTMLDivElement + const handleClick = React.useCallback(() => { + const newChecked = !isChecked; + setIsChecked(newChecked); + if (onCheckedChange) { + onCheckedChange(newChecked); + } + }, [isChecked, onCheckedChange]); + + return ( +
    + {isChecked && ( +
    + +
    + )} +
    + ); +}); +SafeCheckbox.displayName = "SafeCheckbox"; diff --git a/lib/api/alchemyNFTApi.ts b/lib/api/alchemyNFTApi.ts index c9b8fc4..57a88e7 100644 --- a/lib/api/alchemyNFTApi.ts +++ b/lib/api/alchemyNFTApi.ts @@ -8,8 +8,51 @@ const BSCSCAN_API_KEY = process.env.BSCSCAN_API_KEY || '1QGN2GHNEPT6CQP854TVBH24 const responseCache = new Map(); const CACHE_TTL = 60000; // 1 minute cache TTL -// Helper to get cached data or fetch from BSCScan with rate limiting -async function cachedBscScanRequest(params: Record, chainId: string): Promise { +// Queue system for BSCScan API calls to avoid rate limiting +const bscRequestQueue: (() => Promise)[] = []; +let isProcessingQueue = false; +let lastRequestTime = 0; +const REQUEST_DELAY = 250; // ms between requests (4 per second to stay under the 5/sec limit) + +// Process the BSCScan request queue +async function processBscRequestQueue() { + if (isProcessingQueue || bscRequestQueue.length === 0) return; + + isProcessingQueue = true; + + try { + while (bscRequestQueue.length > 0) { + const request = bscRequestQueue.shift(); + if (request) { + // Ensure minimum delay between requests + const now = Date.now(); + const elapsed = now - lastRequestTime; + if (elapsed < REQUEST_DELAY) { + await new Promise(resolve => setTimeout(resolve, REQUEST_DELAY - elapsed)); + } + + await request(); + lastRequestTime = Date.now(); + } + } + } finally { + isProcessingQueue = false; + + // If new requests were added while processing, start again + if (bscRequestQueue.length > 0) { + processBscRequestQueue(); + } + } +} + +// Ensure each BSCScan API call has valid parameters and improve error handling +async function cachedBscScanRequest(params: Record, chainId: string, retries = 2): Promise { + // Validate required parameters + if (!params.module || !params.action) { + console.error("Missing required BSCScan API parameters", params); + throw new Error("BSCScan API request missing required parameters: module and action must be specified"); + } + const cacheKey = JSON.stringify(params) + chainId; const cachedResponse = responseCache.get(cacheKey); @@ -18,29 +61,68 @@ async function cachedBscScanRequest(params: Record, chainId: str return cachedResponse.data; } - // Use a delay to stay under rate limits (5 calls per second) - const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; - - try { - // Add API key to params - const requestParams = { - ...params, - apikey: BSCSCAN_API_KEY + // Add request to queue and return a promise + return new Promise((resolve, reject) => { + const executeRequest = async () => { + const baseUrl = chainId === '0x38' ? 'https://api.bscscan.com/api' : 'https://api-testnet.bscscan.com/api'; + + try { + // Add API key to params + const requestParams = { + ...params, + apikey: BSCSCAN_API_KEY + }; + + // Debug log the request (only in development) + if (process.env.NODE_ENV === 'development') { + console.log(`BSCScan API request: ${baseUrl}`, requestParams); + } + + const response = await axios.get(baseUrl, { params: requestParams }); + const data = response.data; + + // Check for rate limit errors + if (data.status === '0' && data.message === 'NOTOK') { + console.warn("BSCScan API error:", data.result); + + if (data.result.includes('rate limit') && retries > 0) { + console.warn("BSCScan rate limit hit, retrying after delay..."); + // Wait a bit longer before retrying + await new Promise(resolve => setTimeout(resolve, 1500)); // Increased delay + + // Retry with one fewer retry attempt + const retryResult = await cachedBscScanRequest(params, chainId, retries - 1); + resolve(retryResult); + return; + } else if (data.result.includes('Missing Or invalid')) { + // Log detailed information about the invalid request + console.error("Invalid BSCScan API request:", { + url: baseUrl, + params: requestParams, + error: data.result + }); + reject(new Error(`BSCScan API error: ${data.result}`)); + return; + } + } + + // Cache the successful response + responseCache.set(cacheKey, { + data, + timestamp: Date.now() + }); + + resolve(data); + } catch (error) { + console.error("BSCScan API request failed:", error); + reject(error); + } }; - const response = await axios.get(baseUrl, { params: requestParams }); - - // Cache the successful response - responseCache.set(cacheKey, { - data: response.data, - timestamp: Date.now() - }); - - return response.data; - } catch (error) { - console.error("BSCScan API request failed:", error); - throw error; - } + // Add to queue and start processing + bscRequestQueue.push(executeRequest); + processBscRequestQueue(); + }); } const CHAIN_ID_TO_NETWORK: Record = { @@ -513,7 +595,7 @@ export async function fetchCollectionNFTs( contractaddress: contractAddress, page: '1', offset: String(pageSize * 2), // Request more to account for transfers - sort: sortDirection + sort: sortDirection === 'asc' ? 'asc' : 'desc' }, chainId); if (result.status === '1' && result.result) { @@ -523,67 +605,135 @@ export async function fetchCollectionNFTs( .filter((id: string) => id && id.length > 0) )]; - // Sort token IDs + // Sort token IDs numerically if possible, otherwise as strings const sortedTokenIds = uniqueTokenIds.sort((a, b) => { - const stringA = String(a); - const stringB = String(b); - const numA = parseInt(stringA, 10); - const numB = parseInt(stringB, 10); + const numA = parseInt(a as string, 10); + const numB = parseInt(b as string, 10); - if (isNaN(numA) || isNaN(numB)) { - // Fallback to string comparison if not valid numbers - return sortDirection === 'asc' - ? stringA.localeCompare(stringB) - : stringB.localeCompare(stringA); + if (!isNaN(numA) && !isNaN(numB)) { + return sortDirection === 'asc' ? numA - numB : numB - numA; } - return sortDirection === 'asc' ? numA - numB : numB - numA; + return sortDirection === 'asc' + ? (a as string).localeCompare(b as string) + : (b as string).localeCompare(a as string); }); // Apply pagination const startIdx = (page - 1) * pageSize; const paginatedTokenIds = sortedTokenIds.slice(startIdx, startIdx + pageSize); - // Fetch metadata for each token (could be optimized with Promise.all with rate limiting) - const nfts: CollectionNFT[] = []; - // Apply search filter if needed const filteredTokenIds = searchQuery ? paginatedTokenIds.filter(id => String(id).includes(searchQuery)) : paginatedTokenIds; + // Fetch metadata for each token with proper rate limiting + const nfts: CollectionNFT[] = []; + + // Try to get the contract's baseURI first to optimize requests + let baseURI = ''; + try { + // Use contract's baseURI function if available + const baseURIResult = await cachedBscScanRequest({ + module: 'contract', + action: 'readcontract', + address: contractAddress, + contractaddress: contractAddress, + function: 'baseURI()' + }, chainId); + + if (baseURIResult.status === '1' && baseURIResult.result) { + baseURI = baseURIResult.result; + } + } catch (error) { + console.warn("Could not get baseURI, will try individual tokenURI calls:", error); + } + + // Process tokens one at a time to avoid overloading the API for (const tokenId of filteredTokenIds) { try { - // Get token URI - const tokenUriResult = await cachedBscScanRequest({ - module: 'token', - action: 'tokenuri', - contractaddress: contractAddress, - tokenid: String(tokenId) - }, chainId); + // Default fallback NFT in case metadata can't be fetched + const fallbackNft: CollectionNFT = { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: String(tokenId), + name: `NFT #${tokenId}`, + description: 'Metadata unavailable', + imageUrl: '', + attributes: [] + }; - if (tokenUriResult.status === '1' && tokenUriResult.result) { - const uri = tokenUriResult.result; + // Get token URI - use contract call with the tokenURI function + let uri = ''; + try { + // Use contract's tokenURI function directly + const tokenURIResult = await cachedBscScanRequest({ + module: 'contract', + action: 'readcontract', + address: contractAddress, + contractaddress: contractAddress, + function: `tokenURI(${tokenId})` + }, chainId); - // Fetch metadata from URI + if (tokenURIResult.status === '1' && tokenURIResult.result) { + uri = tokenURIResult.result; + } else if (baseURI) { + // If we have baseURI but tokenURI call failed, try to construct the URI + uri = baseURI.endsWith('/') ? `${baseURI}${tokenId}` : `${baseURI}/${tokenId}`; + } + + if (!uri) { + // If we still don't have a URI, add the fallback NFT + nfts.push(fallbackNft); + continue; + } + + // Process the URI to get metadata try { - const resolvedUri = uri.startsWith('ipfs://') - ? `https://ipfs.io/ipfs/${uri.slice(7)}` - : uri; - - const metadataResponse = await axios.get(resolvedUri); + // Resolve various URI formats (IPFS, HTTP, etc.) + let resolvedUri = uri; + + if (uri.startsWith('ipfs://')) { + resolvedUri = `https://ipfs.io/ipfs/${uri.slice(7)}`; + } else if (!uri.startsWith('http')) { + // Some contracts return baseURI + tokenId + if (uri.endsWith('/')) { + resolvedUri = `${uri}${tokenId}`; + } else { + resolvedUri = `${uri}/${tokenId}`; + } + } + + // Fetch metadata with timeout to avoid hanging + const metadataResponse = await axios.get(resolvedUri, { + timeout: 5000, + // Some IPFS gateways may return HTML error pages without proper status code + validateStatus: (status) => status < 400 + }); + + if (!metadataResponse.data) { + nfts.push(fallbackNft); + continue; + } + const metadata = metadataResponse.data; - // Format into our CollectionNFT structure + // Resolve image URL, handle IPFS and other formats + let imageUrl = ''; + if (typeof metadata.image === 'string') { + imageUrl = metadata.image.startsWith('ipfs://') + ? `https://ipfs.io/ipfs/${metadata.image.slice(7)}` + : metadata.image; + } + + // Create NFT object from metadata const nft: CollectionNFT = { id: `${contractAddress.toLowerCase()}-${tokenId}`, tokenId: String(tokenId), name: metadata.name || `NFT #${tokenId}`, description: metadata.description || '', - imageUrl: metadata.image?.startsWith('ipfs://') - ? `https://ipfs.io/ipfs/${metadata.image.slice(7)}` - : metadata.image || '', - attributes: metadata.attributes || [] + imageUrl, + attributes: Array.isArray(metadata.attributes) ? metadata.attributes : [] }; // Apply attribute filters if needed @@ -591,6 +741,8 @@ export async function fetchCollectionNFTs( if (Object.keys(attributes).length > 0) { for (const [traitType, values] of Object.entries(attributes)) { + if (traitType === 'Network') continue; // Skip the Network filter we added + const nftAttribute = nft.attributes.find(attr => attr.trait_type === traitType); if (!nftAttribute || !values.includes(nftAttribute.value)) { includeNft = false; @@ -603,28 +755,30 @@ export async function fetchCollectionNFTs( nfts.push(nft); } } catch (metadataError) { - console.error(`Error fetching metadata for token ${tokenId}:`, metadataError); - - // Add a basic NFT with the token ID even if metadata fails - nfts.push({ - id: `${contractAddress.toLowerCase()}-${tokenId}`, - tokenId: String(tokenId), - name: `NFT #${tokenId}`, - description: 'Metadata unavailable', - imageUrl: '', - attributes: [] - }); + console.warn(`Error fetching metadata for token ${tokenId}:`, metadataError); + nfts.push(fallbackNft); + } + } catch (uriError) { + console.warn(`Error fetching token URI for token ${tokenId}:`, uriError); + + // If we're on testnet, generate mock data for demo purposes + if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { + // For our demo CryptoPath collection, generate mock data + const mockNft = generateMockNFT(String(tokenId), contractAddress, chainId); + nfts.push(mockNft); + } else { + nfts.push(fallbackNft); } } } catch (tokenError) { - console.error(`Error fetching token ${tokenId} data:`, tokenError); + console.error(`Error processing token ${tokenId}:`, tokenError); } - // Add a short delay to avoid rate limits - await new Promise(resolve => setTimeout(resolve, 200)); + // Add a small delay between requests to avoid rate limiting + await new Promise(resolve => setTimeout(resolve, 100)); } - // Apply sorting to the final results + // Apply final sorting to the results based on user's sort preference nfts.sort((a, b) => { if (sortBy === 'tokenId') { const numA = parseInt(a.tokenId, 10); @@ -651,6 +805,7 @@ export async function fetchCollectionNFTs( }; } + // If we didn't get valid result from BSCScan return { nfts: [], totalCount: 0 }; } catch (error) { console.error(`Error fetching NFTs for collection ${contractAddress} from BSCScan:`, error); @@ -736,6 +891,42 @@ export async function fetchCollectionNFTs( } } +// Helper function to generate mock NFT data for testing +function generateMockNFT(tokenId: string, contractAddress: string, chainId: string): CollectionNFT { + // Generate predictable but random-looking attributes based on tokenId + const tokenNum = parseInt(tokenId as string, 10); + const seed = tokenNum % 100; + + // Background options + const backgrounds = ['Blue', 'Red', 'Green', 'Purple', 'Gold', 'Black', 'White']; + const backgroundIndex = seed % backgrounds.length; + + // Species options + const species = ['Human', 'Ape', 'Robot', 'Alien', 'Zombie', 'Demon', 'Angel']; + const speciesIndex = (seed * 3) % species.length; + + // Rarity options + const rarities = ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary']; + const rarityIndex = Math.floor(seed / 20); // 0-4 + + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: String(tokenId), + name: `CryptoPath #${tokenId}`, + description: `A unique NFT from the CryptoPath Genesis Collection with ${rarities[rarityIndex]} rarity.`, + imageUrl: `/Img/nft/sample-${(seed % 5) + 1}.jpg`, // Using sample images 1-5 + attributes: [ + { trait_type: 'Background', value: backgrounds[backgroundIndex] }, + { trait_type: 'Species', value: species[speciesIndex] }, + { trait_type: 'Rarity', value: rarities[rarityIndex] }, + // Network attribute for filtering + { trait_type: 'Network', value: chainId === '0x1' ? 'Ethereum' : + chainId === '0xaa36a7' ? 'Sepolia' : + chainId === '0x38' ? 'BNB Chain' : 'BNB Testnet' } + ] + }; +} + // Mocked API service for NFT data // In a real application, this would connect to Alchemy or another provider export async function fetchPopularCollections(chainId: string): Promise { @@ -759,7 +950,7 @@ export async function fetchPopularCollections(chainId: string): Promise { // For Ethereum and Sepolia return mockCollections.map(collection => ({ ...collection, - chain: chainId + chain: chainId })); } catch (error) { console.error('Error fetching collections:', error); From 1190fb57c615079308df03770a09a0478da394a6 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Sun, 23 Mar 2025 20:07:17 +0700 Subject: [PATCH 04/17] error bnb --- lib/api/nftService.ts | 249 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 215 insertions(+), 34 deletions(-) diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 4b83829..009a93f 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -1,9 +1,9 @@ import { toast } from "sonner"; import axios from 'axios'; import { ethers } from 'ethers'; -import { - fetchContractCollectionInfo, - fetchNFTData, +import { + fetchContractCollectionInfo, + fetchNFTData, fetchContractNFTs, fetchOwnedNFTs, NFTMetadata, @@ -13,8 +13,20 @@ import { getChainProvider, getExplorerUrl, ChainConfig, chainConfigs } from './c // Environment variables for API keys const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY || 'demo'; +const BSCSCAN_API_KEY = process.env.BSCSCAN_API_KEY || '1QGN2GHNEPT6CQP854TVBH24C85714ETC5'; const MORALIS_API_KEY = process.env.NEXT_PUBLIC_MORALIS_API_KEY || ''; +// Helper interface for BSCScan API response +interface BSCTransactionResponse { + status: string; + message: string; + result: Array<{ + tokenID: string; + tokenName?: string; + blockNumber: string; + }> | string; +} + // Cache for collection data to reduce API calls const collectionsCache = new Map(); const nftCache = new Map(); @@ -200,11 +212,115 @@ async function fetchMarketplaceData(contractAddress: string, chainId: string) { }; } +/** + * Helper function to fetch NFT data from BSCScan + */ +async function fetchBSCNFTs( + contractAddress: string, + chainId: string, + page: number = 1, + pageSize: number = 20 +): Promise<{ nfts: NFTMetadata[]; totalCount: number }> { + interface BSCApiResponse { + status: string; + message: string; + result: Array<{ + tokenID: string; + tokenName?: string; + blockNumber: string; + }> | string; + } + + const baseUrl = chainId === '0x38' + ? 'https://api.bscscan.com/api' + : 'https://api-testnet.bscscan.com/api'; + + const queryParams = new URLSearchParams({ + module: 'token', + action: 'tokennfttx', + contractaddress: contractAddress, + page: page.toString(), + offset: pageSize.toString(), + startblock: '0', + endblock: '999999999', + sort: 'desc', + apikey: BSCSCAN_API_KEY + }); + + let retries = 3; + while (retries > 0) { + try { + const response = await fetch(`${baseUrl}?${queryParams.toString()}`); + const data: BSCApiResponse = await response.json(); + + // Handle API errors + if (!response.ok) { + throw new Error(`BSCScan API request failed with status ${response.status}`); + } + + if (data.status === '0') { + if (typeof data.result === 'string') { + const errorMsg = data.result; + if (errorMsg.toLowerCase().includes('rate limit')) { + retries--; + if (retries > 0) { + await new Promise(resolve => setTimeout(resolve, 1000)); + continue; + } + } + if (errorMsg === 'No transactions found') { + return { nfts: [], totalCount: 0 }; + } + throw new Error(`BSCScan API error: ${errorMsg}`); + } + throw new Error(`BSCScan API error: ${data.message}`); + } + + if (!Array.isArray(data.result)) { + throw new Error('Invalid response format from BSCScan API'); + } + + // Process valid response + const transactions = data.result.map(tx => ({ + tokenID: tx.tokenID, + tokenName: tx.tokenName, + blockNumber: tx.blockNumber + })); + + const uniqueTokenIds = [...new Set(transactions.map(tx => tx.tokenID))]; + const nftPromises = uniqueTokenIds.map(tokenId => + fetchNFTData(contractAddress, tokenId, chainId) + ); + + const fetchedNfts = await Promise.all(nftPromises); + const validNfts = fetchedNfts.filter((nft): nft is NFTMetadata => nft !== null); + + return { + nfts: validNfts, + totalCount: validNfts.length + }; + } catch (error) { + retries--; + if (retries === 0) { + console.error('Error fetching BSC NFTs:', error); + throw error; + } + await new Promise(resolve => setTimeout(resolve, 1000)); + } + } + + throw new Error('Failed to fetch BSC NFTs after all retries'); +} + + volume24h: baseVolume.toFixed(2) + }; +} + /** * Fetch NFTs for a specific collection with pagination and filtering */ export async function fetchCollectionNFTs( - contractAddress: string, + contractAddress: string, chainId: string, options: { page?: number, @@ -227,51 +343,116 @@ export async function fetchCollectionNFTs( searchQuery = '', attributes = {} } = options; - - // Check if we should use direct contract fetching or API - // For well-known collections or testnet, use direct contract fetching - const useDirectFetching = [ - // Our CryptoPath Genesis on BNB Testnet - '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', - // Some popular testnet or demo collections - '0x7c09282c24c363073e0f30d74c301c312e5533ac' - ].includes(contractAddress.toLowerCase()); - + try { let nfts: NFTMetadata[] = []; let totalCount = 0; - + + // Check if it's a well-known collection for direct fetching + const useDirectFetching = [ + '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', // CryptoPath Genesis + '0x7c09282c24c363073e0f30d74c301c312e5533ac' // Demo collection + ].includes(contractAddress.toLowerCase()); + if (useDirectFetching) { - // Check cache first const cacheKey = `${chainId}-${contractAddress.toLowerCase()}-nfts`; const cachedData = collectionNFTsCache.get(cacheKey); - + if (cachedData && (Date.now() - cachedData.timestamp < CACHE_TTL)) { nfts = cachedData.nfts; } else { - // Fetch directly from contract const startIndex = (page - 1) * pageSize; nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); - - // Save to cache - collectionNFTsCache.set(cacheKey, { - timestamp: Date.now(), - nfts - }); + collectionNFTsCache.set(cacheKey, { timestamp: Date.now(), nfts }); + } + + totalCount = nfts.length > 0 + ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) + : 0; + + } else if (chainId === '0x38' || chainId === '0x61') { + try { + const bscResult = await fetchBSCNFTs(contractAddress, chainId, page, pageSize); + nfts = bscResult.nfts; + totalCount = bscResult.totalCount; + } catch (error) { + console.error('Error fetching BSC NFTs:', error); + toast.error("Failed to fetch NFTs from BSCScan"); + nfts = []; + totalCount = 0; } - - totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; } else { - // Use Alchemy API for production collections + // Other chains use Alchemy API const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; - const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getNFTsForCollection`; - const url = new URL(apiUrl); - url.searchParams.append('contractAddress', contractAddress); - url.searchParams.append('withMetadata', 'true'); - url.searchParams.append('startToken', ((page - 1) * pageSize).toString()); - url.searchParams.append('limit', pageSize.toString()); + const apiUrl = new URL(`https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getNFTsForCollection`); - const response = await fetch(url.toString()); + apiUrl.searchParams.append('contractAddress', contractAddress); + apiUrl.searchParams.append('withMetadata', 'true'); + apiUrl.searchParams.append('startToken', ((page - 1) * pageSize).toString()); + apiUrl.searchParams.append('limit', pageSize.toString()); + + const alchemyResponse = await fetch(apiUrl.toString()); + if (!alchemyResponse.ok) { + throw new Error(`Alchemy API request failed with status ${alchemyResponse.status}`); + } + + const alchemyData = await alchemyResponse.json(); + nfts = alchemyData.nfts.map((nft: any) => ({ + id: `${contractAddress.toLowerCase()}-${nft.id.tokenId || ''}`, + tokenId: nft.id.tokenId || '', + name: nft.title || `NFT #${parseInt(nft.id.tokenId || '0', 16).toString()}`, + description: nft.description || '', + imageUrl: nft.media?.[0]?.gateway || '', + attributes: nft.metadata?.attributes || [], + chain: chainId + })); + + totalCount = alchemyData.totalCount || nfts.length; + } + + // Apply filtering and sorting + if (searchQuery) { + const query = searchQuery.toLowerCase(); + nfts = nfts.filter(nft => + nft.name.toLowerCase().includes(query) || + nft.tokenId.toLowerCase().includes(query) || + nft.description?.toLowerCase().includes(query) + ); + } + + if (Object.keys(attributes).length > 0) { + nfts = nfts.filter(nft => { + for (const [traitType, values] of Object.entries(attributes)) { + if (!Array.isArray(values) || values.length === 0) continue; + const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); + if (!nftAttribute || !values.includes(nftAttribute.value)) { + return false; + } + } + return true; + }); + } + + if (sortBy && sortDirection) { + nfts.sort((a: NFTMetadata, b: NFTMetadata) => { + if (sortBy === 'tokenId') { + const idA = parseInt(a.tokenId, 16) || 0; + const idB = parseInt(b.tokenId, 16) || 0; + return sortDirection === 'asc' ? idA - idB : idB - idA; + } + // name sort + return sortDirection === 'asc' + ? (a.name || '').localeCompare(b.name || '') + : (b.name || '').localeCompare(a.name || ''); + }); + } + + return { nfts, totalCount }; + } catch (error) { + console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); + toast.error("Failed to load collection NFTs"); + return { nfts: [], totalCount: 0 }; + } if (!response.ok) { throw new Error(`API request failed with status ${response.status}`); From 380c0cf8b94de0df9ae442f8f63c9d159c4f3ee6 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 12:00:46 +0700 Subject: [PATCH 05/17] fix api dealing with nfts --- app/api/nfts/collection/route.ts | 115 ++ components/NFT/NetworkSelector.tsx | 12 +- components/NFT/PaginatedNFTGrid.tsx | 496 ++--- lib/api/alchemyNFTApi.ts | 663 +++---- lib/api/moralisApi.ts | 262 ++- lib/api/nftService.ts | 2658 ++++----------------------- 6 files changed, 1223 insertions(+), 2983 deletions(-) create mode 100644 app/api/nfts/collection/route.ts diff --git a/app/api/nfts/collection/route.ts b/app/api/nfts/collection/route.ts new file mode 100644 index 0000000..b17c521 --- /dev/null +++ b/app/api/nfts/collection/route.ts @@ -0,0 +1,115 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import axios from 'axios'; + +// Rate limiting configuration +const RATE_LIMIT_WINDOW = 60 * 1000; // 1 minute window +const MAX_REQUESTS_PER_WINDOW = 50; // 50 requests per minute + +// Basic in-memory rate limiter +const rateLimiter = new Map(); + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { + // Only allow GET requests + if (req.method !== 'GET') { + return res.status(405).json({ error: 'Method not allowed' }); + } + + // Apply rate limiting based on IP address + const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress || 'unknown'; + const clientId = String(ip); + + // Check rate limit + if (!checkRateLimit(clientId)) { + return res.status(429).json({ error: 'Too many requests. Please try again later.' }); + } + + const { url } = req.query; + + if (!url || typeof url !== 'string') { + return res.status(400).json({ error: 'URL parameter is required' }); + } + + try { + // Validate that the URL is for the expected API + if ( + !url.includes('alchemy.com/nft/') && + !url.includes('moralis.io/api/') && + !url.includes('etherscan.io/api') && + !url.includes('bscscan.com/api') + ) { + return res.status(403).json({ error: 'Invalid API URL' }); + } + + // Make the request to the NFT API service + const response = await axios.get(url, { + headers: { + 'Accept': 'application/json', + }, + // Handle timeouts and large responses + timeout: 10000, + maxContentLength: 10 * 1024 * 1024, // 10MB max + validateStatus: (status) => status < 500, + }); + + // Return the data from the API + return res.status(response.status).json(response.data); + } catch (error: any) { + console.error('API proxy error:', error); + + // Handle different error types + if (error.response) { + // The request was made and the server responded with a status code + // that falls out of the range of 2xx + return res.status(error.response.status).json({ + error: 'External API error', + details: error.response.data + }); + } else if (error.request) { + // The request was made but no response was received + return res.status(504).json({ + error: 'External API timeout', + message: 'The request timed out' + }); + } else { + // Something happened in setting up the request that triggered an Error + return res.status(500).json({ + error: 'Server error', + message: error.message + }); + } + } +} + +// Rate limiting helper function +function checkRateLimit(clientId: string): boolean { + const now = Date.now(); + + // Clean up expired entries + for (const [id, data] of rateLimiter.entries()) { + if (data.resetAt < now) { + rateLimiter.delete(id); + } + } + + // Get or create client rate limit data + let clientData = rateLimiter.get(clientId); + if (!clientData) { + clientData = { count: 0, resetAt: now + RATE_LIMIT_WINDOW }; + rateLimiter.set(clientId, clientData); + } else if (clientData.resetAt < now) { + // Reset if window expired + clientData.count = 0; + clientData.resetAt = now + RATE_LIMIT_WINDOW; + } + + // Check and increment + if (clientData.count >= MAX_REQUESTS_PER_WINDOW) { + return false; + } + + clientData.count++; + return true; +} diff --git a/components/NFT/NetworkSelector.tsx b/components/NFT/NetworkSelector.tsx index 655a7b4..28be75c 100644 --- a/components/NFT/NetworkSelector.tsx +++ b/components/NFT/NetworkSelector.tsx @@ -97,10 +97,11 @@ export default function NetworkSelector({ >
    {network.name}
    {network.name} @@ -128,8 +129,9 @@ export default function NetworkSelector({ {n.name}
    diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index f4162db..fe96a58 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -1,23 +1,16 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -import { Search, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react'; -import AnimatedNFTCard from './AnimatedNFTCard'; -import { - fetchCollectionNFTs, - estimateCollectionMemoryUsage, - getNFTIndexingStatus, - fetchPaginatedNFTs -} from '@/lib/api/nftService'; +import { Loader2 } from 'lucide-react'; +import { fetchCollectionNFTs } from '@/lib/api/alchemyNFTApi'; +import { fetchPaginatedNFTs } from '@/lib/api/nftService'; import { getChainColorTheme } from '@/lib/api/chainProviders'; -import { Progress } from '@/components/ui/progress'; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; -import { Button } from '@/components/ui/button'; +import { CollectionNFT } from '@/lib/api/alchemyNFTApi'; +import AnimatedNFTCard from './AnimatedNFTCard'; import { Pagination, PaginationContent, PaginationItem, PaginationLink, - PaginationEllipsis, PaginationNext, PaginationPrevious, } from '@/components/ui/pagination'; @@ -25,12 +18,12 @@ import { interface PaginatedNFTGridProps { contractAddress: string; chainId: string; - sortBy?: string; - sortDirection?: 'asc' | 'desc'; - searchQuery?: string; - attributes?: Record; - viewMode?: 'grid' | 'list'; - onNFTClick?: (nft: any) => void; + sortBy: string; + sortDirection: 'asc' | 'desc'; + searchQuery: string; + attributes: Record; + viewMode: 'grid' | 'list'; + onNFTClick: (nft: CollectionNFT) => void; itemsPerPage?: number; defaultPage?: number; onPageChange?: (page: number) => void; @@ -39,51 +32,40 @@ interface PaginatedNFTGridProps { export default function PaginatedNFTGrid({ contractAddress, chainId, - sortBy = 'tokenId', - sortDirection = 'asc', - searchQuery = '', - attributes = {}, - viewMode = 'grid', + sortBy, + sortDirection, + searchQuery, + attributes, + viewMode, onNFTClick, - itemsPerPage = 20, // Reduced to exactly 20 for optimal API usage + itemsPerPage = 20, defaultPage = 1, onPageChange }: PaginatedNFTGridProps) { - // State for pagination and data - const [nfts, setNfts] = useState([]); + const [nfts, setNfts] = useState([]); + const [loading, setLoading] = useState(true); const [totalCount, setTotalCount] = useState(0); - const [totalPages, setTotalPages] = useState(1); const [currentPage, setCurrentPage] = useState(defaultPage); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const [indexingStatus, setIndexingStatus] = useState<{ - status: 'completed' | 'in_progress' | 'not_started'; - progress: number; - }>({ status: 'completed', progress: 100 }); - - // For better UX when loading new pages - const [fadeState, setFadeState] = useState("in"); + const [totalPages, setTotalPages] = useState(1); + const [progress, setProgress] = useState(0); - // Get chain theme for styling + // Chain theme for styling const chainTheme = getChainColorTheme(chainId); - // Fetch NFTs for the current page - const fetchNFTsForPage = useCallback(async (page: number) => { - if (!contractAddress) return; - + useEffect(() => { + loadNFTs(); + }, [contractAddress, chainId, currentPage, sortBy, sortDirection, searchQuery, JSON.stringify(attributes)]); + + async function loadNFTs() { setLoading(true); - setFadeState("out"); + setProgress(10); try { - // Check indexing status - const indexing = await getNFTIndexingStatus(contractAddress, chainId); - setIndexingStatus(indexing); - - // Use our optimized paginated fetch function + // Use the cached and optimized fetching function const result = await fetchPaginatedNFTs( contractAddress, chainId, - page, + currentPage, itemsPerPage, sortBy, sortDirection, @@ -91,299 +73,211 @@ export default function PaginatedNFTGrid({ attributes ); - // Calculate total pages - const pages = Math.ceil(result.totalCount / itemsPerPage); - console.log(`DEBUG: Total count ${result.totalCount}, items per page ${itemsPerPage}, total pages: ${pages}`); - setNfts(result.nfts); setTotalCount(result.totalCount); - setTotalPages(pages > 0 ? pages : 1); - setError(null); - // Fade in the new content - setTimeout(() => { - setFadeState("in"); - }, 100); - } catch (err) { - console.error('Error fetching NFTs:', err); - setError('Failed to load NFTs. Please try again.'); - setFadeState("in"); + // Calculate total pages + const pages = Math.max(1, Math.ceil(result.totalCount / itemsPerPage)); + setTotalPages(pages); + + setProgress(100); + } catch (error) { + console.error("Error loading NFTs:", error); + setNfts([]); + setTotalCount(0); + setTotalPages(1); } finally { setLoading(false); } - }, [contractAddress, chainId, itemsPerPage, sortBy, sortDirection, searchQuery, attributes]); - - // Load initial data - useEffect(() => { - fetchNFTsForPage(currentPage); - }, [currentPage, fetchNFTsForPage]); - - // Update current page if default page changes from parent - useEffect(() => { - if (defaultPage !== currentPage) { - setCurrentPage(defaultPage); - } - }, [defaultPage]); + } - // Handle explicit page navigation const handlePageChange = (page: number) => { - // Validate page range - if (page < 1 || page > totalPages) return; - - // Scroll to top of grid - window.scrollTo({ top: 0, behavior: 'smooth' }); - - // Change page setCurrentPage(page); - - // Notify parent if callback provided if (onPageChange) { onPageChange(page); } }; - // Generate page numbers to display - const getPageNumbers = () => { - const pages = []; + // Simple pagination controls helper + const getPaginationItems = () => { + const items = []; // Always show first page - pages.push(1); + items.push(1); - // Middle pages - const rangeStart = Math.max(2, currentPage - 1); - const rangeEnd = Math.min(totalPages - 1, currentPage + 1); + // Calculate range around current page + const startPage = Math.max(2, currentPage - 1); + const endPage = Math.min(totalPages - 1, currentPage + 1); // Add ellipsis after first page if needed - if (rangeStart > 2) { - pages.push(-1); // -1 represents ellipsis + if (startPage > 2) { + items.push('ellipsis1'); } - // Add middle pages - for (let i = rangeStart; i <= rangeEnd; i++) { - pages.push(i); + // Add pages around current page + for (let i = startPage; i <= endPage; i++) { + items.push(i); } // Add ellipsis before last page if needed - if (rangeEnd < totalPages - 1) { - pages.push(-2); // -2 represents ellipsis + if (endPage < totalPages - 1) { + items.push('ellipsis2'); } - // Always show last page if there's more than one page + // Add last page if more than one page if (totalPages > 1) { - pages.push(totalPages); + items.push(totalPages); } - return pages; + return items; }; - // Empty state - if (!loading && nfts.length === 0) { - return ( -
    - -

    No NFTs found for this collection.

    -

    Try adjusting your search or filters

    -
    - ); - } - - // Loading state for initial load - if (loading && nfts.length === 0) { - return ( -
    -
    -
    - Loading NFTs... -
    -
    - Estimated size: - - - - - {estimateCollectionMemoryUsage(totalCount || 1000)} - - - -

    Estimated memory usage for full collection

    -     -     -     -
    -
    - - {/* Loading skeleton */} -
    - {Array.from({ length: itemsPerPage }).map((_, index) => ( -
    - ))} -
    -
    - ); - } - - // Error state - if (error && nfts.length === 0) { - return ( -
    - -

    {error}

    - -
    - ); - } - return ( -
    - {/* Collection indexing status */} - {indexingStatus.status !== 'completed' && ( -
    -
    - Collection indexing in progress - {Math.round(indexingStatus.progress)}% complete +
    + {/* Loading indicator or NFT grid */} + {loading ? ( +
    + +
    Loading NFTs...
    + + {/* Progress bar */} +
    +
    - -

    - This collection is still being indexed. More NFTs will appear as indexing completes. -

    -
    - )} - - {/* Stats bar with debug info */} -
    -
    - Showing page {currentPage} of {totalPages} ({nfts.length} of {totalCount.toLocaleString()} total items) -
    - - {/* Memory usage estimate */} - - - - - {estimateCollectionMemoryUsage(totalCount)} - - - -

    Estimated memory usage for full collection

    -     -     -     -
    - - {/* Loading overlay for page changes */} - {loading && nfts.length > 0 && ( -
    -
    - )} - - {/* NFT Grid with fade transition */} -
    -
    - - {nfts.map((nft, index) => ( + ) : ( + + + {nfts.length === 0 ? ( +
    +

    No NFTs found for this collection.

    +

    Try adjusting your filters or search query.

    +
    + ) : ( - onNFTClick && onNFTClick(nft)} - /> + + {nfts.map((nft, index) => ( + onNFTClick(nft)} + /> + ))} + - ))} -     -
    -
    + )} + + + )} - {/* Enhanced Navigation Controls - Always Visible */} -
    -
    -
    -
    -
    - Page {currentPage} of {totalPages} -
    - {totalPages > 1 && ( -
    - {(currentPage - 1) * itemsPerPage + 1} - {Math.min(currentPage * itemsPerPage, totalCount)} of {totalCount} -
    - )} -
    + {/* Pagination controls */} + {totalPages > 1 && ( + + + + { + e.preventDefault(); + if (currentPage > 1) { + handlePageChange(currentPage - 1); + } + }} + className={ + currentPage === 1 + ? 'pointer-events-none opacity-50' + : '' + } + /> + -
    -
    - {/* Previous button - always visible */} - - - {/* Page numbers - enhanced visibility */} - {totalPages > 1 && getPageNumbers().map((pageNum, i) => ( - pageNum < 0 ? ( - - … - - ) : ( - - ) - ))} - - {/* Next button - always visible */} - -
    -
    -
    -
    -
    + {getPaginationItems().map((page, i) => { + if (typeof page === 'string') { + // Render ellipsis + return ( + + ... + + ); + } + + // Render page number + return ( + + { + e.preventDefault(); + handlePageChange(page); + }} + isActive={page === currentPage} + style={ + page === currentPage + ? { backgroundColor: chainTheme.primary, color: 'black' } + : undefined + } + > + {page} + + + ); + })} + + + { + e.preventDefault(); + if (currentPage < totalPages) { + handlePageChange(currentPage + 1); + } + }} + className={ + currentPage === totalPages + ? 'pointer-events-none opacity-50' + : '' + } + /> + + + + )} - {/* Optimized loading note */} -
    - Optimized pagination with 20 items per page to minimize API usage -
    + {/* Total count indicator */} + {totalCount > 0 && ( +
    + Showing page {currentPage} of {totalPages} ({totalCount} total NFTs) +
    + )}
    ); } diff --git a/lib/api/alchemyNFTApi.ts b/lib/api/alchemyNFTApi.ts index 6d29a56..b4e8ed7 100644 --- a/lib/api/alchemyNFTApi.ts +++ b/lib/api/alchemyNFTApi.ts @@ -1,5 +1,12 @@ import { toast } from "sonner"; import axios from 'axios'; +import { + getNFTsByContract, + getContractMetadata, + getNFTMetadata, + getNFTsByWallet, + transformMoralisNFT +} from './moralisApi'; const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY || 'demo'; const BSCSCAN_API_KEY = process.env.BSCSCAN_API_KEY || '1QGN2GHNEPT6CQP854TVBH24C85714ETC5'; @@ -507,76 +514,35 @@ export async function fetchUserNFTs(address: string, chainId: string, pageKey?: throw new Error("Address is required to fetch NFTs"); } - // For BNB Chain, use BSCScan API + // For BNB Chain, use Moralis API instead of BSCScan if (isBNBChain(chainId)) { try { - const result = await cachedBscScanRequest({ - module: 'account', - action: 'tokennfttx', - address: address, - page: '1', - offset: '100', - sort: 'desc' - }, chainId); + const response = await getNFTsByWallet(address, chainId); - if (result.status === '1' && result.result) { - // Group transactions by contract address to simulate the Alchemy response format - const groupedByContract: Record = {}; - - for (const tx of result.result) { - if (!groupedByContract[tx.contractAddress]) { - groupedByContract[tx.contractAddress] = []; - } - groupedByContract[tx.contractAddress].push(tx); - } - - // Convert to Alchemy-like format for compatibility - const ownedNfts = Object.entries(groupedByContract).map(([contractAddress, transactions]) => { - // Filter for NFTs the user still owns (received but not sent) - const ownedTokenIds = new Set(); - - // Track all token IDs user has received - transactions.forEach(tx => { - if (tx.to.toLowerCase() === address.toLowerCase()) { - ownedTokenIds.add(tx.tokenID); - } - }); - - // Remove tokens that were sent away - transactions.forEach(tx => { - if (tx.from.toLowerCase() === address.toLowerCase()) { - ownedTokenIds.delete(tx.tokenID); - } - }); - - // Take the first transaction to get NFT details - const firstTx = transactions[0]; - - return { - contract: { - address: contractAddress, - name: firstTx.tokenName || 'Unknown', - symbol: firstTx.tokenSymbol || '', - }, - id: { - tokenId: Array.from(ownedTokenIds)[0] || '0', - }, - balance: ownedTokenIds.size.toString(), - media: [{ gateway: '' }], - tokenUri: { gateway: '', raw: '' } - }; - }); - + // Convert to Alchemy-like format for compatibility + const ownedNfts = response.result.map((nft: any) => { return { - ownedNfts: ownedNfts.filter(nft => nft.balance !== '0'), - totalCount: ownedNfts.length + contract: { + address: nft.token_address, + name: nft.name || 'Unknown', + symbol: nft.symbol || '', + }, + id: { + tokenId: nft.token_id, + }, + balance: nft.amount || '1', + media: [{ gateway: nft.media?.media_url || '' }], + tokenUri: { gateway: nft.token_uri || '', raw: nft.token_uri || '' } }; - } + }); - return { ownedNfts: [], totalCount: 0 }; + return { + ownedNfts, + totalCount: response.total || ownedNfts.length + }; } catch (error) { - console.error(`Error fetching NFTs from BSCScan for ${address}:`, error); - toast.error("Failed to load NFTs from BSCScan"); + console.error(`Error fetching NFTs for ${address} from Moralis:`, error); + toast.error("Failed to load NFTs"); return { ownedNfts: [], totalCount: 0 }; } } @@ -615,126 +581,93 @@ export async function fetchCollectionInfo(contractAddress: string, chainId: stri throw new Error("Contract address is required"); } - // For BNB Chain networks, use BSCScan API + // For BNB Chain networks, use Moralis API (replacing BSCScan) if (isBNBChain(chainId)) { try { - // First try to get contract ABI to extract more info - const abiResult = await cachedBscScanRequest({ - module: 'contract', - action: 'getabi', - address: contractAddress - }, chainId); - - // Default values - let name = 'Unknown Collection'; - let symbol = ''; - let totalSupply = '0'; - const description = ''; - const imageUrl = ''; - - // Try to use the mock data if available for better UX - if (chainId === '0x38') { - const mockCollection = mockBNBCollections.find(c => - c.id.toLowerCase() === contractAddress.toLowerCase() - ); + // First try Moralis for metadata + try { + const metadata = await getContractMetadata(contractAddress, chainId); - if (mockCollection) { + // Try to use the mock data if available for better UX (mockup collections) + if (chainId === '0x38') { + const mockCollection = mockBNBCollections.find(c => + c.id.toLowerCase() === contractAddress.toLowerCase() + ); + + if (mockCollection) { + return { + name: mockCollection.name, + symbol: '', + totalSupply: mockCollection.totalSupply, + description: mockCollection.description, + imageUrl: mockCollection.imageUrl + }; + } + } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { + // Use CryptoPath collection info for testnet return { - name: mockCollection.name, - symbol: '', - totalSupply: mockCollection.totalSupply, - description: mockCollection.description, - imageUrl: mockCollection.imageUrl + name: cryptoPathCollection.name, + symbol: 'CP', + totalSupply: cryptoPathCollection.totalSupply, + description: cryptoPathCollection.description, + imageUrl: cryptoPathCollection.imageUrl }; } - } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { - // Use CryptoPath collection info for testnet + + // Parse metadata from Moralis return { - name: cryptoPathCollection.name, - symbol: 'CP', - totalSupply: cryptoPathCollection.totalSupply, - description: cryptoPathCollection.description, - imageUrl: cryptoPathCollection.imageUrl + name: metadata.name || 'Unknown Collection', + symbol: metadata.symbol || '', + totalSupply: metadata.synced_at ? '?' : '0', // Moralis doesn't provide totalSupply directly + description: metadata.description || '', + imageUrl: metadata.thumbnail || '', }; - } - - // If we have valid ABI, try to extract info - if (abiResult.status === '1' && abiResult.result) { - try { - // Get token name - const nameResult = await cachedBscScanRequest({ - module: 'contract', - action: 'readcontract', - address: contractAddress, - contractaddress: contractAddress, - function: 'name()' - }, chainId); - - if (nameResult.status === '1' && nameResult.result) { - name = nameResult.result; - } - - // Get token symbol - const symbolResult = await cachedBscScanRequest({ - module: 'contract', - action: 'readcontract', - address: contractAddress, - contractaddress: contractAddress, - function: 'symbol()' - }, chainId); - - if (symbolResult.status === '1' && symbolResult.result) { - symbol = symbolResult.result; - } - - // Get total supply - const supplyResult = await cachedBscScanRequest({ - module: 'contract', - action: 'readcontract', - address: contractAddress, - contractaddress: contractAddress, - function: 'totalSupply()' - }, chainId); - - if (supplyResult.status === '1' && supplyResult.result) { - totalSupply = supplyResult.result; - } - } catch (error) { - console.error("Error reading contract functions:", error); - } - } - - // If we still don't have a name, try to get token info - if (name === 'Unknown Collection') { + } catch (moralisError) { + console.warn("Error fetching collection info from Moralis:", moralisError); + + // Fallback to BSCScan as before with simplified approach try { - // Get token info - const tokenInfoResult = await cachedBscScanRequest({ - module: 'token', - action: 'tokeninfo', - contractaddress: contractAddress, - }, chainId); - - if (tokenInfoResult.status === '1' && tokenInfoResult.result?.[0]) { - const info = tokenInfoResult.result[0]; - name = info.name || name; - symbol = info.symbol || symbol; - totalSupply = info.totalSupply || totalSupply; + // Try to use the mock data if available for better UX + if (chainId === '0x38') { + const mockCollection = mockBNBCollections.find(c => + c.id.toLowerCase() === contractAddress.toLowerCase() + ); + + if (mockCollection) { + return { + name: mockCollection.name, + symbol: '', + totalSupply: mockCollection.totalSupply, + description: mockCollection.description, + imageUrl: mockCollection.imageUrl + }; + } + } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { + // Use CryptoPath collection info for testnet + return { + name: cryptoPathCollection.name, + symbol: 'CP', + totalSupply: cryptoPathCollection.totalSupply, + description: cryptoPathCollection.description, + imageUrl: cryptoPathCollection.imageUrl + }; } - } catch (error) { - console.error("Error getting token info:", error); + } catch (bscError) { + console.error("Error with BSCScan fallback:", bscError); } + + // Return default values if all else fails + return { + name: 'Unknown Collection', + symbol: '', + totalSupply: '0', + description: '', + imageUrl: '', + }; } - - return { - name, - symbol, - totalSupply, - description, - imageUrl - }; } catch (error) { - console.error(`Error fetching collection info for ${contractAddress} from BSCScan:`, error); - toast.error("Failed to load collection info from BSCScan"); + console.error(`Error fetching collection info for ${contractAddress}:`, error); + toast.error("Failed to load collection info"); return { name: 'Unknown Collection', symbol: '', @@ -825,236 +758,106 @@ export async function fetchCollectionNFTs( throw new Error("Contract address is required"); } - // For BNB Chain networks, use BSCScan API + // For BNB Chain networks, use Moralis API instead of BSCScan if (isBNBChain(chainId)) { try { - // Get NFT transactions for the contract - this is the most reliable way to get all token IDs - const result = await cachedBscScanRequest({ - module: 'token', - action: 'tokennfttx', - contractaddress: contractAddress, - page: '1', - offset: String(pageSize * 2), // Request more to account for transfers - sort: sortDirection === 'asc' ? 'asc' : 'desc' - }, chainId); + // Calculate cursor based on page + const cursor = undefined; + if (page > 1) { + // Use a deterministic cursor approach - we'll just skip items + const skip = (page - 1) * pageSize; + // Note: This is simplified - in a real app you'd store and pass actual cursors + } + + // Fetch NFTs from Moralis + const response = await getNFTsByContract(contractAddress, chainId, cursor, pageSize); - if (result.status === '1' && result.result) { - // Extract unique token IDs - const uniqueTokenIds = [...new Set(result.result - .map((tx: any) => tx.tokenID) - .filter((id: string) => id && id.length > 0) - )]; + if (!response.result || response.result.length === 0) { + // If we don't have results, try to use mock data for known collections + if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { + // Generate mock data for our demo CryptoPath collection + const mockNfts = generateMockNFTs(contractAddress, chainId, page, pageSize); + return { + nfts: mockNfts, + totalCount: 1000 // Mock total count + }; + } - // Sort token IDs numerically if possible, otherwise as strings - const sortedTokenIds = uniqueTokenIds.sort((a, b) => { - const numA = parseInt(a as string, 10); - const numB = parseInt(b as string, 10); + return { nfts: [], totalCount: 0 }; + } + + // Transform NFTs to our format + let nfts = response.result.map((nft: any) => transformMoralisNFT(nft, chainId)); + + // Apply search filter if needed + if (searchQuery) { + const query = searchQuery.toLowerCase(); + nfts = nfts.filter((nft: CollectionNFT) => + nft.name.toLowerCase().includes(query) || + nft.tokenId.toLowerCase().includes(query) + ); + } + + // Apply attribute filters if needed + if (Object.keys(attributes).length > 0) { + nfts = nfts.filter((nft: CollectionNFT) => { + for (const [traitType, values] of Object.entries(attributes)) { + if (traitType === 'Network') continue; // Skip the Network filter we added + + const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); + if (!nftAttribute || !values.includes(nftAttribute.value)) { + return false; + } + } + return true; + }); + } + + // Apply sorting + nfts.sort((a: CollectionNFT, b: CollectionNFT) => { + if (sortBy === 'tokenId') { + const numA = parseInt(a.tokenId, 10); + const numB = parseInt(b.tokenId, 10); if (!isNaN(numA) && !isNaN(numB)) { return sortDirection === 'asc' ? numA - numB : numB - numA; } return sortDirection === 'asc' - ? (a as string).localeCompare(b as string) - : (b as string).localeCompare(a as string); - }); - - // Apply pagination - const startIdx = (page - 1) * pageSize; - const paginatedTokenIds = sortedTokenIds.slice(startIdx, startIdx + pageSize); - - // Apply search filter if needed - const filteredTokenIds = searchQuery - ? paginatedTokenIds.filter(id => String(id).includes(searchQuery)) - : paginatedTokenIds; - - // Fetch metadata for each token with proper rate limiting - const nfts: CollectionNFT[] = []; - - // Try to get the contract's baseURI first to optimize requests - let baseURI = ''; - try { - // Use contract's baseURI function if available - const baseURIResult = await cachedBscScanRequest({ - module: 'contract', - action: 'readcontract', - address: contractAddress, - contractaddress: contractAddress, - function: 'baseURI()' - }, chainId); - - if (baseURIResult.status === '1' && baseURIResult.result) { - baseURI = baseURIResult.result; - } - } catch (error) { - console.warn("Could not get baseURI, will try individual tokenURI calls:", error); - } - - // Process tokens one at a time to avoid overloading the API - for (const tokenId of filteredTokenIds) { - try { - // Default fallback NFT in case metadata can't be fetched - const fallbackNft: CollectionNFT = { - id: `${contractAddress.toLowerCase()}-${tokenId}`, - tokenId: String(tokenId), - name: `NFT #${tokenId}`, - description: 'Metadata unavailable', - imageUrl: '', - attributes: [] - }; - - // Get token URI - use contract call with the tokenURI function - let uri = ''; - try { - // Use contract's tokenURI function directly - const tokenURIResult = await cachedBscScanRequest({ - module: 'contract', - action: 'readcontract', - address: contractAddress, - contractaddress: contractAddress, - function: `tokenURI(${tokenId})` - }, chainId); - - if (tokenURIResult.status === '1' && tokenURIResult.result) { - uri = tokenURIResult.result; - } else if (baseURI) { - // If we have baseURI but tokenURI call failed, try to construct the URI - uri = baseURI.endsWith('/') ? `${baseURI}${tokenId}` : `${baseURI}/${tokenId}`; - } - - if (!uri) { - // If we still don't have a URI, add the fallback NFT - nfts.push(fallbackNft); - continue; - } - - // Process the URI to get metadata - try { - // Resolve various URI formats (IPFS, HTTP, etc.) - let resolvedUri = uri; - - if (uri.startsWith('ipfs://')) { - resolvedUri = `https://ipfs.io/ipfs/${uri.slice(7)}`; - } else if (!uri.startsWith('http')) { - // Some contracts return baseURI + tokenId - if (uri.endsWith('/')) { - resolvedUri = `${uri}${tokenId}`; - } else { - resolvedUri = `${uri}/${tokenId}`; - } - } - - // Fetch metadata with timeout to avoid hanging - const metadataResponse = await axios.get(resolvedUri, { - timeout: 5000, - // Some IPFS gateways may return HTML error pages without proper status code - validateStatus: (status) => status < 400 - }); - - if (!metadataResponse.data) { - nfts.push(fallbackNft); - continue; - } - - const metadata = metadataResponse.data; - - // Resolve image URL, handle IPFS and other formats - let imageUrl = ''; - if (typeof metadata.image === 'string') { - imageUrl = metadata.image.startsWith('ipfs://') - ? `https://ipfs.io/ipfs/${metadata.image.slice(7)}` - : metadata.image; - } - - // Create NFT object from metadata - const nft: CollectionNFT = { - id: `${contractAddress.toLowerCase()}-${tokenId}`, - tokenId: String(tokenId), - name: metadata.name || `NFT #${tokenId}`, - description: metadata.description || '', - imageUrl, - attributes: Array.isArray(metadata.attributes) ? metadata.attributes : [] - }; - - // Apply attribute filters if needed - let includeNft = true; - - if (Object.keys(attributes).length > 0) { - for (const [traitType, values] of Object.entries(attributes)) { - if (traitType === 'Network') continue; // Skip the Network filter we added - - const nftAttribute = nft.attributes.find(attr => attr.trait_type === traitType); - if (!nftAttribute || !values.includes(nftAttribute.value)) { - includeNft = false; - break; - } - } - } - - if (includeNft) { - nfts.push(nft); - } - } catch (metadataError) { - console.warn(`Error fetching metadata for token ${tokenId}:`, metadataError); - nfts.push(fallbackNft); - } - } catch (uriError) { - console.warn(`Error fetching token URI for token ${tokenId}:`, uriError); - - // If we're on testnet, generate mock data for demo purposes - if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { - // For our demo CryptoPath collection, generate mock data - const mockNft = generateMockNFT(String(tokenId), contractAddress, chainId); - nfts.push(mockNft); - } else { - nfts.push(fallbackNft); - } - } - } catch (tokenError) { - console.error(`Error processing token ${tokenId}:`, tokenError); - } - - // Add a small delay between requests to avoid rate limiting - await new Promise(resolve => setTimeout(resolve, 100)); + ? a.tokenId.localeCompare(b.tokenId) + : b.tokenId.localeCompare(a.tokenId); + } else if (sortBy === 'name') { + return sortDirection === 'asc' + ? a.name.localeCompare(b.name) + : b.name.localeCompare(a.name); } - - // Apply final sorting to the results based on user's sort preference - nfts.sort((a, b) => { - if (sortBy === 'tokenId') { - const numA = parseInt(a.tokenId, 10); - const numB = parseInt(b.tokenId, 10); - - if (!isNaN(numA) && !isNaN(numB)) { - return sortDirection === 'asc' ? numA - numB : numB - numA; - } - - return sortDirection === 'asc' - ? a.tokenId.localeCompare(b.tokenId) - : b.tokenId.localeCompare(a.tokenId); - } else if (sortBy === 'name') { - return sortDirection === 'asc' - ? a.name.localeCompare(b.name) - : b.name.localeCompare(a.name); - } - return 0; - }); - + return 0; + }); + + return { + nfts, + totalCount: response.total || nfts.length + }; + } catch (error) { + console.error(`Error fetching NFTs from Moralis for collection ${contractAddress}:`, error); + + // Try to use mock data for known collections as a fallback + if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551'.toLowerCase()) { + console.log("Generating mock NFTs for CryptoPath collection"); + // Generate mock data for our demo CryptoPath collection + const mockNfts = generateMockNFTs(contractAddress, chainId, page, pageSize); return { - nfts, - totalCount: uniqueTokenIds.length + nfts: mockNfts, + totalCount: 1000 // Mock total count }; } - // If we didn't get valid result from BSCScan - return { nfts: [], totalCount: 0 }; - } catch (error) { - console.error(`Error fetching NFTs for collection ${contractAddress} from BSCScan:`, error); - toast.error("Failed to load collection NFTs from BSCScan"); + toast.error("Failed to load collection NFTs"); return { nfts: [], totalCount: 0 }; } } - // For non-BNB chains, continue using Alchemy + // For non-BNB chains, continue using Alchemy but with CORS handling const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; try { @@ -1065,9 +868,31 @@ export async function fetchCollectionNFTs( url.searchParams.append('startToken', ((page - 1) * pageSize).toString()); url.searchParams.append('limit', pageSize.toString()); - const response = await fetch(url.toString()); + // Use serverless API routes for CORS issues + if (process.env.NEXT_PUBLIC_USE_SERVERLESS === 'true') { + // Updated API path to match new location + const response = await fetch(`/api/nfts/collection?url=${encodeURIComponent(url.toString())}`); + if (!response.ok) { + throw new Error(`API request failed with status ${response.status}`); + } + return await response.json(); + } + + // Use cross-origin directly for development/testing + const response = await fetch(url.toString(), { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + // Add exponential backoff retry logic + ...createFetchRetryConfig() + }); if (!response.ok) { + // Handle specific error codes + if (response.status === 429) { + throw new Error('Rate limit exceeded. Please try again later.'); + } throw new Error(`API request failed with status ${response.status}`); } @@ -1081,6 +906,7 @@ export async function fetchCollectionNFTs( description: nft.description || '', imageUrl: nft.media?.[0]?.gateway || '', attributes: nft.metadata?.attributes || [], + chain: chainId // Add missing chain property })); // Apply filters @@ -1129,11 +955,32 @@ export async function fetchCollectionNFTs( }; } catch (error) { console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); - toast.error("Failed to load collection NFTs"); - return { nfts: [], totalCount: 0 }; + throw error; // Rethrow for fallback handling } } +// Helper function to create fetch retry configuration +function createFetchRetryConfig(maxRetries = 3, initialDelay = 1000) { + return { + retry: async (attempt: number, error: Error, response: Response) => { + if (attempt >= maxRetries) return false; + + // Check if we should retry based on the error or response + const shouldRetry = !response || response.status === 429 || response.status >= 500; + + if (shouldRetry) { + // Exponential backoff with jitter + const delay = initialDelay * Math.pow(2, attempt) + Math.random() * 1000; + console.log(`Retrying fetch (attempt ${attempt + 1}/${maxRetries}) after ${delay}ms`); + await new Promise(resolve => setTimeout(resolve, delay)); + return true; + } + + return false; + } + }; +} + // Helper function to generate mock NFT data for testing function generateMockNFT(tokenId: string, contractAddress: string, chainId: string): CollectionNFT { // Generate predictable but random-looking attributes based on tokenId @@ -1166,7 +1013,8 @@ function generateMockNFT(tokenId: string, contractAddress: string, chainId: stri { trait_type: 'Network', value: chainId === '0x1' ? 'Ethereum' : chainId === '0xaa36a7' ? 'Sepolia' : chainId === '0x38' ? 'BNB Chain' : 'BNB Testnet' } - ] + ], + chain: chainId // Add missing chain property }; } @@ -1269,3 +1117,48 @@ export async function fetchPriceHistory(tokenId?: string): Promise { return data; } + +// Generate mock NFTs for testing - particularly useful for our testnet collection +function generateMockNFTs(contractAddress: string, chainId: string, page: number, pageSize: number): CollectionNFT[] { + const startIndex = (page - 1) * pageSize + 1; + const nfts: CollectionNFT[] = []; + + for (let i = 0; i < pageSize; i++) { + const tokenId = String(startIndex + i); + + // Generate deterministic but varied attributes based on token ID + const tokenNum = parseInt(tokenId, 10); + const seed = tokenNum % 100; + + // Background options + const backgrounds = ['Blue', 'Red', 'Green', 'Purple', 'Gold', 'Black', 'White']; + const backgroundIndex = seed % backgrounds.length; + + // Species options + const species = ['Human', 'Ape', 'Robot', 'Alien', 'Zombie', 'Demon', 'Angel']; + const speciesIndex = (seed * 3) % species.length; + + // Rarity options + const rarities = ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary']; + const rarityIndex = Math.floor(seed / 20); // 0-4 + + nfts.push({ + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: tokenId, + name: `CryptoPath #${tokenId}`, + description: `A unique NFT from the CryptoPath Genesis Collection with ${rarities[rarityIndex]} rarity.`, + imageUrl: `/Img/nft/sample-${(seed % 5) + 1}.jpg`, // Using sample images 1-5 + attributes: [ + { trait_type: 'Background', value: backgrounds[backgroundIndex] }, + { trait_type: 'Species', value: species[speciesIndex] }, + { trait_type: 'Rarity', value: rarities[rarityIndex] }, + { trait_type: 'Network', value: chainId === '0x1' ? 'Ethereum' : + chainId === '0xaa36a7' ? 'Sepolia' : + chainId === '0x38' ? 'BNB Chain' : 'BNB Testnet' } + ], + chain: chainId + }); + } + + return nfts; +} diff --git a/lib/api/moralisApi.ts b/lib/api/moralisApi.ts index 4e7ac9d..2c691d0 100644 --- a/lib/api/moralisApi.ts +++ b/lib/api/moralisApi.ts @@ -1,6 +1,266 @@ import axios from 'axios'; +import { toast } from 'sonner'; + +const MORALIS_API_KEY = process.env.MORALIS_API_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJub25jZSI6IjY4ODEyMzE5LWNiMDAtNDA3MC1iOTEyLWIzNTllYjI4ZjQyOCIsIm9yZ0lkIjoiNDM3Nzk0IiwidXNlcklkIjoiNDUwMzgyIiwidHlwZUlkIjoiYTU5Mzk2NGYtZWUxNi00NGY3LWIxMDUtZWNhMzAwMjUwMDg4IiwidHlwZSI6IlBST0pFQ1QiLCJpYXQiOjE3NDI3ODk3MzEsImV4cCI6NDg5ODU0OTczMX0.4XB5n8uVFQkMwMO2Ck4FbNQw8daQp1uDdMvXmYFr9WA'; + +// Simple in-memory cache for API responses +const responseCache = new Map(); +const CACHE_TTL = 5 * 60 * 1000; // 5 minutes cache TTL + +// Rate limiting +const REQUEST_DELAY = 500; // ms between requests +let lastRequestTime = 0; + +// Chain mapping from chain ID to Moralis chain name +const CHAIN_MAPPING: Record = { + '0x1': 'eth', + '0xaa36a7': 'sepolia', + '0x38': 'bsc', + '0x61': 'bsc testnet' +}; + +/** + * Makes a rate-limited request to Moralis API + */ +async function moralisRequest( + endpoint: string, + params: Record = {}, + chainId: string +): Promise { + // Validate chain + const chain = CHAIN_MAPPING[chainId]; + if (!chain) { + throw new Error(`Unsupported chain ID: ${chainId}`); + } + + // Create cache key + const cacheKey = `${endpoint}-${chain}-${JSON.stringify(params)}`; + + // Check cache first + const cachedResponse = responseCache.get(cacheKey); + if (cachedResponse && (Date.now() - cachedResponse.timestamp < CACHE_TTL)) { + return cachedResponse.data; + } + + // Ensure rate limiting + const now = Date.now(); + const elapsed = now - lastRequestTime; + if (elapsed < REQUEST_DELAY) { + await new Promise(resolve => setTimeout(resolve, REQUEST_DELAY - elapsed)); + } + + try { + // Add API key and chain to parameters + const requestParams = { + ...params, + chain: chain + }; + + // Make API request + const response = await axios.get(`https://deep-index.moralis.io/api/v2/${endpoint}`, { + params: requestParams, + headers: { + 'Accept': 'application/json', + 'X-API-Key': MORALIS_API_KEY + } + }); + + // Update last request time + lastRequestTime = Date.now(); + + // Cache the result + responseCache.set(cacheKey, { + data: response.data, + timestamp: Date.now() + }); + + return response.data; + } catch (error: any) { + console.error(`Moralis API error (${endpoint}):`, error.response?.data || error.message); + throw error; + } +} + +/** + * Get NFTs by contract address + */ +export async function getNFTsByContract( + contractAddress: string, + chainId: string, + cursor?: string, + limit: number = 20 +): Promise { + try { + const response = await moralisRequest( + `nft/${contractAddress}`, + { + limit, + cursor, + normalizeMetadata: true, + media_items: true + }, + chainId + ); + return response; + } catch (error) { + console.error('Error fetching NFTs by contract:', error); + throw error; + } +} + +/** + * Get NFT metadata for a specific token + */ +export async function getNFTMetadata( + contractAddress: string, + tokenId: string, + chainId: string +): Promise { + try { + const response = await moralisRequest( + `nft/${contractAddress}/${tokenId}`, + { normalizeMetadata: true, media_items: true }, + chainId + ); + return response; + } catch (error) { + console.error('Error fetching NFT metadata:', error); + throw error; + } +} + +/** + * Get contract metadata + */ +export async function getContractMetadata( + contractAddress: string, + chainId: string +): Promise { + try { + const response = await moralisRequest( + `nft/${contractAddress}/metadata`, + {}, + chainId + ); + return response; + } catch (error) { + console.error('Error fetching contract metadata:', error); + throw error; + } +} + +/** + * Get NFTs owned by a wallet address + */ +export async function getNFTsByWallet( + walletAddress: string, + chainId: string, + cursor?: string, + limit: number = 20 +): Promise { + try { + const response = await moralisRequest( + `${walletAddress}/nft`, + { + limit, + cursor, + normalizeMetadata: true, + media_items: true + }, + chainId + ); + return response; + } catch (error) { + console.error('Error fetching NFTs by wallet:', error); + throw error; + } +} + +/** + * Transform Moralis NFT data to match our CollectionNFT format + */ +export function transformMoralisNFT(nft: any, chainId: string): any { + // Extract image URL from metadata + let imageUrl = ''; + + // Handle different media formats - Moralis has inconsistent response structures + if (nft.media) { + if (Array.isArray(nft.media)) { + // If media is an array, find the first image item + const mediaItem = nft.media.find((m: any) => + m.media_collection && ['image', 'image_large', 'image_thumbnail'].includes(m.media_collection) + ); + if (mediaItem && mediaItem.media_url) { + imageUrl = mediaItem.media_url; + } + } else if (typeof nft.media === 'object' && nft.media !== null) { + // If media is an object (BNB Chain specific format) + if (nft.media.original_media_url) { + imageUrl = nft.media.original_media_url; + } else if (nft.media.media_url) { + imageUrl = nft.media.media_url; + } + } + } + + // Fallback to normalized metadata image + if (!imageUrl && nft.normalized_metadata && nft.normalized_metadata.image) { + imageUrl = nft.normalized_metadata.image; + + // Handle IPFS URLs + if (imageUrl.startsWith('ipfs://')) { + imageUrl = `https://ipfs.io/ipfs/${imageUrl.slice(7)}`; + } + } + + // Additional fallback for the raw metadata + if (!imageUrl && nft.metadata) { + try { + // Sometimes metadata is a string that needs parsing + const parsedMetadata = typeof nft.metadata === 'string' + ? JSON.parse(nft.metadata) + : nft.metadata; + + if (parsedMetadata.image) { + imageUrl = parsedMetadata.image; + if (imageUrl.startsWith('ipfs://')) { + imageUrl = `https://ipfs.io/ipfs/${imageUrl.slice(7)}`; + } + } + } catch (e) { + console.warn('Error parsing NFT metadata:', e); + } + } + + // Get attributes safely - checking all possible paths + let attributes = []; + if (nft.normalized_metadata && Array.isArray(nft.normalized_metadata.attributes)) { + attributes = nft.normalized_metadata.attributes; + } else if (nft.metadata) { + try { + const parsedMetadata = typeof nft.metadata === 'string' + ? JSON.parse(nft.metadata) + : nft.metadata; + + if (Array.isArray(parsedMetadata.attributes)) { + attributes = parsedMetadata.attributes; + } + } catch (e) { + // Ignore parsing errors for attributes + } + } + + return { + id: `${nft.token_address.toLowerCase()}-${nft.token_id}`, + tokenId: nft.token_id, + name: nft.normalized_metadata?.name || `NFT #${nft.token_id}`, + description: nft.normalized_metadata?.description || '', + imageUrl: imageUrl, + attributes: attributes, + chain: chainId + }; +} -const MORALIS_API_KEY = process.env.MORALIS_API_KEY; const BASE_URL = 'https://deep-index.moralis.io/api/v2'; interface MoralisChain { diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 89047ef..c736715 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -1,2361 +1,437 @@ -import { toast } from "sonner"; -import axios from 'axios'; -import { ethers } from 'ethers'; -import { - fetchContractCollectionInfo, - fetchNFTData, - fetchContractNFTs, - fetchOwnedNFTs, - NFTMetadata, - POPULAR_NFT_COLLECTIONS -} from './nftContracts'; -import { - CollectionNFT, - CollectionNFTsResponse -} from './alchemyNFTApi'; -import { getChainProvider, getExplorerUrl, ChainConfig, chainConfigs } from './chainProviders'; - -// Environment variables for API keys -const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY || 'demo'; -const BSCSCAN_API_KEY = process.env.BSCSCAN_API_KEY || '1QGN2GHNEPT6CQP854TVBH24C85714ETC5'; -const MORALIS_API_KEY = process.env.NEXT_PUBLIC_MORALIS_API_KEY || ''; - -// Default pagination settings -const DEFAULT_PAGE_SIZE = 20; - -// Cache for collection data to reduce API calls -const collectionsCache = new Map(); -const nftCache = new Map(); -const collectionNFTsCache = new Map(); +}; -// Cache TTL in milliseconds (10 minutes) -const CACHE_TTL = 10 * 60 * 1000; +// Cache duration is 5 minutes +const CACHE_DURATION = 5 * 60 * 1000; +const nftCache = new Map(); -/** - * Chain ID to network mapping for API endpoints - */ -const CHAIN_ID_TO_NETWORK: Record = { - '0x1': 'eth-mainnet', - '0x5': 'eth-goerli', - '0xaa36a7': 'eth-sepolia', - '0x89': 'polygon-mainnet', - '0x13881': 'polygon-mumbai', - '0xa': 'optimism-mainnet', - '0xa4b1': 'arbitrum-mainnet', - '0x38': 'bsc-mainnet', - '0x61': 'bsc-testnet', +// API Status tracking to implement circuit breaker pattern +type ApiStatus = { + name: string; + available: boolean; + failureCount: number; + lastFailure: number; + cooldownUntil: number; }; -/** - * Enhanced collection metadata - */ -export interface CollectionMetadata { - id: string; - name: string; - symbol: string; - description: string; - imageUrl: string; - bannerImageUrl?: string; - totalSupply: string; - floorPrice?: string; - volume24h?: string; - chain: string; - contractAddress: string; - verified?: boolean; - category?: string; - featured?: boolean; - standard?: string; - creatorAddress?: string; - owners?: number; - website?: string; - discord?: string; - twitter?: string; -} +// Circuit breaker configuration +const FAILURE_THRESHOLD = 3; +const COOLDOWN_PERIOD = 60 * 1000; // 1 minute + +// Track status of each API +const apiStatus = { + alchemy: { name: 'Alchemy', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 }, + moralis: { name: 'Moralis', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 }, + etherscan: { name: 'Etherscan', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 }, + bscscan: { name: 'BSCScan', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 } +}; /** - * Fetch NFT collection information with caching + * Register an API failure and potentially trigger circuit breaker */ -export async function fetchCollectionInfo(contractAddress: string, chainId: string): Promise { - // Create a cache key - const cacheKey = `${chainId}-${contractAddress.toLowerCase()}`; +function registerApiFailure(api: keyof typeof apiStatus): void { + const now = Date.now(); + const status = apiStatus[api]; - // Check cache first - if (collectionsCache.has(cacheKey)) { - return collectionsCache.get(cacheKey); - } + status.failureCount++; + status.lastFailure = now; - try { - // Try to fetch from blockchain first - const contractInfo = await fetchContractCollectionInfo(contractAddress, chainId); + // Implement circuit breaker pattern + if (status.failureCount >= FAILURE_THRESHOLD) { + status.available = false; + status.cooldownUntil = now + COOLDOWN_PERIOD; + console.warn(`Circuit breaker triggered for ${api} API. Cooling down until ${new Date(status.cooldownUntil).toLocaleTimeString()}`); - // Try Alchemy for additional metadata - let alchemyData = null; - try { - const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; - const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getContractMetadata`; - const url = new URL(apiUrl); - url.searchParams.append('contractAddress', contractAddress); - - const response = await fetch(url.toString()); - if (response.ok) { - alchemyData = await response.json(); - } - } catch (err) { - console.warn("Alchemy metadata fetch failed:", err); - } - - // Try marketplace data lookup for floor price, etc. - const marketData = await fetchMarketplaceData(contractAddress, chainId); - - // Combine all data sources - const metadata: CollectionMetadata = { - id: contractAddress.toLowerCase(), - name: contractInfo.name || 'Unknown Collection', - symbol: contractInfo.symbol || '', - description: alchemyData?.contractMetadata?.openSea?.description || '', - imageUrl: alchemyData?.contractMetadata?.openSea?.imageUrl || '/fallback-collection-logo.png', - bannerImageUrl: alchemyData?.contractMetadata?.openSea?.bannerImageUrl || '', - totalSupply: contractInfo.totalSupply || '0', - floorPrice: marketData?.floorPrice || '0', - volume24h: marketData?.volume24h || '0', - chain: chainId, - contractAddress: contractAddress.toLowerCase(), - verified: alchemyData?.contractMetadata?.openSea?.safelistRequestStatus === 'verified', - category: alchemyData?.contractMetadata?.openSea?.category || 'Art', - featured: false, - standard: contractInfo.standard || 'ERC721', - creatorAddress: alchemyData?.contractMetadata?.openSea?.creator || '', - website: alchemyData?.contractMetadata?.openSea?.externalUrl || '', - discord: alchemyData?.contractMetadata?.openSea?.discordUrl || '', - twitter: alchemyData?.contractMetadata?.openSea?.twitterUsername - ? `https://twitter.com/${alchemyData.contractMetadata.openSea.twitterUsername}` - : '', - }; - - // Save to cache - collectionsCache.set(cacheKey, metadata); - - return metadata; - } catch (error) { - console.error('Error fetching collection information:', error); - toast.error("Failed to load collection info"); - - // Return a minimal fallback - return { - id: contractAddress.toLowerCase(), - name: 'Unknown Collection', - symbol: '', - description: '', - imageUrl: '/fallback-collection-logo.png', - totalSupply: '0', - chain: chainId, - contractAddress: contractAddress.toLowerCase(), - standard: 'ERC721' - }; + // Schedule auto-recovery + setTimeout(() => { + status.available = true; + status.failureCount = 0; + console.info(`${api} API circuit breaker reset, service available again`); + }, COOLDOWN_PERIOD); } } /** - * Fetch marketplace data (floor price, volume, etc.) + * Reset API status after a successful call */ -async function fetchMarketplaceData(contractAddress: string, chainId: string) { - // In a real implementation, this would query APIs like OpenSea, Blur, or LooksRare - // For now, return mock data based on known collections - - // Mock data for popular collections - const popularCollections = POPULAR_NFT_COLLECTIONS[chainId as keyof typeof POPULAR_NFT_COLLECTIONS] || []; - const isPopular = popularCollections.some(c => - c.address.toLowerCase() === contractAddress.toLowerCase() - ); - - if (isPopular) { - // For Ethereum collections - if (chainId === '0x1') { - if (contractAddress.toLowerCase() === '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d') { - // BAYC - return { floorPrice: '30.5', volume24h: '450.23' }; - } else if (contractAddress.toLowerCase() === '0xed5af388653567af2f388e6224dc7c4b3241c544') { - // Azuki - return { floorPrice: '8.75', volume24h: '175.45' }; - } else if (contractAddress.toLowerCase() === '0x60e4d786628fea6478f785a6d7e704777c86a7c6') { - // MAYC - return { floorPrice: '10.2', volume24h: '250.15' }; - } - } - - // For BNB Chain collections - if (chainId === '0x38') { - if (contractAddress.toLowerCase() === '0x0a8901b0e25deb55a87524f0cc164e9644020eba') { - // Pancake Squad - return { floorPrice: '2.5', volume24h: '35.7' }; - } - } - - // For testnet collections - if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551') { - // CryptoPath Genesis - return { floorPrice: '10.0', volume24h: '150.5' }; - } +function registerApiSuccess(api: keyof typeof apiStatus): void { + const status = apiStatus[api]; + if (status.failureCount > 0) { + status.failureCount = 0; + status.available = true; } - - // For other collections, generate some random but realistic data - const baseFloorPrice = chainId === '0x1' ? (0.1 + Math.random() * 2) : (0.05 + Math.random()); - const baseVolume = baseFloorPrice * (10 + Math.random() * 100); - - return { - floorPrice: baseFloorPrice.toFixed(3), - volume24h: baseVolume.toFixed(2) - }; } /** - * Helper function to fetch NFT data from BSCScan + * Generate a cache key for a specific NFT collection query */ -async function fetchBSCNFTs( +function generateCacheKey( contractAddress: string, chainId: string, - page: number = 1, - pageSize: number = 20 -): Promise<{ nfts: NFTMetadata[]; totalCount: number }> { - interface BSCApiResponse { - status: string; - message: string; - result: Array<{ - tokenID: string; - tokenName?: string; - blockNumber: string; - }> | string; - } - - const baseUrl = chainId === '0x38' - ? 'https://api.bscscan.com/api' - : 'https://api-testnet.bscscan.com/api'; - - const queryParams = new URLSearchParams({ - module: 'token', - action: 'tokennfttx', - contractaddress: contractAddress, - page: page.toString(), - offset: pageSize.toString(), - startblock: '0', - endblock: '999999999', - sort: 'desc', - apikey: BSCSCAN_API_KEY + page: number, + pageSize: number, + sortBy: string, + sortDirection: 'asc' | 'desc', + searchQuery: string, + attributes: Record +): NFTCacheKey { + return JSON.stringify({ + contract: contractAddress.toLowerCase(), + chain: chainId, + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes, }); +} - let retries = 3; - while (retries > 0) { +/** + * Multi-API approach to fetch NFTs with fallback mechanisms + */ +async function fetchWithFallbacks( + contractAddress: string, + chainId: string, + page: number = 1, + pageSize: number = 20, + sortBy: string = 'tokenId', + sortDirection: 'asc' | 'desc' = 'asc', + searchQuery: string = '', + attributes: Record = {} +): Promise { + // BNB Chain specific approach - already using multiple sources + if (chainId === '0x38' || chainId === '0x61') { try { - const response = await fetch(`${baseUrl}?${queryParams.toString()}`); - const data: BSCApiResponse = await response.json(); - - // Handle API errors - if (!response.ok) { - throw new Error(`BSCScan API request failed with status ${response.status}`); - } - - if (data.status === '0') { - if (typeof data.result === 'string') { - const errorMsg = data.result; - if (errorMsg.toLowerCase().includes('rate limit')) { - retries--; - if (retries > 0) { - await new Promise(resolve => setTimeout(resolve, 1000)); - continue; - } + // Try Moralis first for BNB Chain + if (apiStatus.moralis.available) { + try { + console.log('Fetching BNB Chain NFTs from Moralis'); + + // Calculate cursor based on page + const cursor = undefined; + if (page > 1) { + // In a real app, you'd store and pass actual cursors + // This is a simplified approach } - if (errorMsg === 'No transactions found') { - return { nfts: [], totalCount: 0 }; + + const response = await getNFTsByContract(contractAddress, chainId, cursor, pageSize); + + if (response.result && response.result.length > 0) { + // Transform to our format + const nfts = response.result.map((nft: any) => transformMoralisNFT(nft, chainId)); + + // Apply filters + let filteredNfts = nfts; + + // Apply search filter if needed + if (searchQuery) { + const query = searchQuery.toLowerCase(); + filteredNfts = filteredNfts.filter((nft: CollectionNFT) => + nft.name.toLowerCase().includes(query) || + nft.tokenId.toLowerCase().includes(query) + ); + } + + // Apply attribute filters if needed + if (Object.keys(attributes).length > 0) { + filteredNfts = filteredNfts.filter((nft: CollectionNFT) => { + for (const [traitType, values] of Object.entries(attributes)) { + if (traitType === 'Network') continue; // Skip Network filter + + const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); + if (!nftAttribute || !values.includes(nftAttribute.value)) { + return false; + } + } + return true; + }); + } + + // Apply sorting + filteredNfts.sort((a: CollectionNFT, b: CollectionNFT) => { + if (sortBy === 'tokenId') { + const numA = parseInt(a.tokenId, 10); + const numB = parseInt(b.tokenId, 10); + + if (!isNaN(numA) && !isNaN(numB)) { + return sortDirection === 'asc' ? numA - numB : numB - numA; + } + + return sortDirection === 'asc' + ? a.tokenId.localeCompare(b.tokenId) + : b.tokenId.localeCompare(a.tokenId); + } else if (sortBy === 'name') { + return sortDirection === 'asc' + ? a.name.localeCompare(b.name) + : b.name.localeCompare(a.name); + } + return 0; + }); + + registerApiSuccess('moralis'); + return { + nfts: filteredNfts, + totalCount: response.total || filteredNfts.length + }; } - throw new Error(`BSCScan API error: ${errorMsg}`); + } catch (error) { + console.warn('Moralis API failed for BNB Chain, falling back to BSCScan:', error); + registerApiFailure('moralis'); } - throw new Error(`BSCScan API error: ${data.message}`); - } - - if (!Array.isArray(data.result)) { - throw new Error('Invalid response format from BSCScan API'); } - - // Process valid response - const transactions = data.result.map(tx => ({ - tokenID: tx.tokenID, - tokenName: tx.tokenName, - blockNumber: tx.blockNumber - })); - - const uniqueTokenIds = [...new Set(transactions.map(tx => tx.tokenID))]; - const nftPromises = uniqueTokenIds.map(tokenId => - fetchNFTData(contractAddress, tokenId, chainId) - ); - - const fetchedNfts = await Promise.all(nftPromises); - const validNfts = fetchedNfts.filter((nft): nft is NFTMetadata => nft !== null); - return { - nfts: validNfts, - totalCount: validNfts.length - }; - } catch (error) { - retries--; - if (retries === 0) { - console.error('Error fetching BSC NFTs:', error); - throw error; - } - await new Promise(resolve => setTimeout(resolve, 1000)); - } - } - - throw new Error('Failed to fetch BSC NFTs after all retries'); -} - - volume24h: baseVolume.toFixed(2) - }; -} - -/** - * Fetch NFTs for a specific collection with pagination and filtering - */ -export async function fetchCollectionNFTs( - contractAddress: string, - chainId: string, - options: { - page?: number, - pageSize?: number, - sortBy?: string, - sortDirection?: 'asc' | 'desc', - searchQuery?: string, - attributes?: Record - } = {} -): Promise<{ - nfts: NFTMetadata[], - totalCount: number, - pageKey?: string -}> { - const { - page = 1, - pageSize = 20, - sortBy = 'tokenId', - sortDirection = 'asc', - searchQuery = '', - attributes = {} - } = options; - - try { - let nfts: NFTMetadata[] = []; - let totalCount = 0; - - // Check if it's a well-known collection for direct fetching - const useDirectFetching = [ - '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', // CryptoPath Genesis - '0x7c09282c24c363073e0f30d74c301c312e5533ac' // Demo collection - ].includes(contractAddress.toLowerCase()); - - if (useDirectFetching) { - const cacheKey = `${chainId}-${contractAddress.toLowerCase()}-nfts`; - const cachedData = collectionNFTsCache.get(cacheKey); - - if (cachedData && (Date.now() - cachedData.timestamp < CACHE_TTL)) { - nfts = cachedData.nfts; - } else { - const startIndex = (page - 1) * pageSize; - nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); - collectionNFTsCache.set(cacheKey, { timestamp: Date.now(), nfts }); + // Fallback to BSCScan + if (apiStatus.bscscan.available) { + console.log('Fetching BNB Chain NFTs from BSCScan'); + const result = await fetchCollectionNFTs( + contractAddress, + chainId, + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + registerApiSuccess('bscscan'); + return result; } - - totalCount = nfts.length > 0 - ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) - : 0; - - } else if (chainId === '0x38' || chainId === '0x61') { + } catch (error) { + console.error('All BNB Chain NFT APIs failed:', error); + toast.error('Failed to load NFTs. Please try again later.'); + return { nfts: [], totalCount: 0 }; + } + } + // Ethereum networks - try multiple sources + else if (chainId === '0x1' || chainId === '0xaa36a7') { + // Try Alchemy first + if (apiStatus.alchemy.available) { try { - const bscResult = await fetchBSCNFTs(contractAddress, chainId, page, pageSize); - nfts = bscResult.nfts; - totalCount = bscResult.totalCount; + console.log('Fetching Ethereum NFTs from Alchemy'); + const result = await fetchCollectionNFTs( + contractAddress, + chainId, + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + registerApiSuccess('alchemy'); + return result; } catch (error) { - console.error('Error fetching BSC NFTs:', error); - toast.error("Failed to fetch NFTs from BSCScan"); - nfts = []; - totalCount = 0; - } - } else { - // Other chains use Alchemy API - const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; - const apiUrl = new URL(`https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getNFTsForCollection`); - - apiUrl.searchParams.append('contractAddress', contractAddress); - apiUrl.searchParams.append('withMetadata', 'true'); - apiUrl.searchParams.append('startToken', ((page - 1) * pageSize).toString()); - apiUrl.searchParams.append('limit', pageSize.toString()); - - const alchemyResponse = await fetch(apiUrl.toString()); - if (!alchemyResponse.ok) { - throw new Error(`Alchemy API request failed with status ${alchemyResponse.status}`); - } - - const alchemyData = await alchemyResponse.json(); - nfts = alchemyData.nfts.map((nft: any) => ({ - id: `${contractAddress.toLowerCase()}-${nft.id.tokenId || ''}`, - tokenId: nft.id.tokenId || '', - name: nft.title || `NFT #${parseInt(nft.id.tokenId || '0', 16).toString()}`, - description: nft.description || '', - imageUrl: nft.media?.[0]?.gateway || '', - attributes: nft.metadata?.attributes || [], - chain: chainId - })); - - totalCount = alchemyData.totalCount || nfts.length; - } - - // Apply filtering and sorting - if (searchQuery) { - const query = searchQuery.toLowerCase(); - nfts = nfts.filter(nft => - nft.name.toLowerCase().includes(query) || - nft.tokenId.toLowerCase().includes(query) || - nft.description?.toLowerCase().includes(query) - ); - } - - if (Object.keys(attributes).length > 0) { - nfts = nfts.filter(nft => { - for (const [traitType, values] of Object.entries(attributes)) { - if (!Array.isArray(values) || values.length === 0) continue; - const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); - if (!nftAttribute || !values.includes(nftAttribute.value)) { - return false; - } - } - return true; - }); - } - - if (sortBy && sortDirection) { - nfts.sort((a: NFTMetadata, b: NFTMetadata) => { - if (sortBy === 'tokenId') { - const idA = parseInt(a.tokenId, 16) || 0; - const idB = parseInt(b.tokenId, 16) || 0; - return sortDirection === 'asc' ? idA - idB : idB - idA; - } - // name sort - return sortDirection === 'asc' - ? (a.name || '').localeCompare(b.name || '') - : (b.name || '').localeCompare(a.name || ''); - }); - } - - return { nfts, totalCount }; - } catch (error) { - console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); - toast.error("Failed to load collection NFTs"); - return { nfts: [], totalCount: 0 }; - } - - if (!response.ok) { - throw new Error(`API request failed with status ${response.status}`); + console.warn('Alchemy API failed, trying Moralis next:', error); + registerApiFailure('alchemy'); } - - const data = await response.json(); - - // Map Alchemy data to our format - nfts = data.nfts.map((nft: any) => ({ - id: `${contractAddress.toLowerCase()}-${nft.id.tokenId || ''}`, - tokenId: nft.id.tokenId || '', - name: nft.title || `NFT #${parseInt(nft.id.tokenId || '0', 16).toString()}`, - description: nft.description || '', - imageUrl: nft.media?.[0]?.gateway || '', - attributes: nft.metadata?.attributes || [], - chain: chainId - })); - - totalCount = data.totalCount || nfts.length; - } - - // Apply search filtering - if (searchQuery) { - const query = searchQuery.toLowerCase(); - nfts = nfts.filter(nft => - nft.name.toLowerCase().includes(query) || - nft.tokenId.toLowerCase().includes(query) || - nft.description?.toLowerCase().includes(query) - ); } - // Apply attribute filtering - if (Object.keys(attributes).length > 0) { - nfts = nfts.filter(nft => { - for (const [traitType, values] of Object.entries(attributes)) { - if (values.length === 0) continue; + // Try Moralis second + if (apiStatus.moralis.available) { + try { + console.log('Fetching Ethereum NFTs from Moralis'); + + const moralisChainId = chainId === '0x1' ? '0x1' : '0xaa36a7'; + const cursor = undefined; + + const response = await getNFTsByContract(contractAddress, moralisChainId, cursor, pageSize); + + if (response.result && response.result.length > 0) { + // Transform to our format + const nfts = response.result.map((nft: any) => transformMoralisNFT(nft, chainId)); + + // Apply filters (same as above) + let filteredNfts = nfts; + + if (searchQuery) { + const query = searchQuery.toLowerCase(); + filteredNfts = filteredNfts.filter((nft: CollectionNFT) => + nft.name.toLowerCase().includes(query) || + nft.tokenId.toLowerCase().includes(query) + ); + } - const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); - if (!nftAttribute || !values.includes(nftAttribute.value)) { - return false; + if (Object.keys(attributes).length > 0) { + filteredNfts = filteredNfts.filter((nft: CollectionNFT) => { + for (const [traitType, values] of Object.entries(attributes)) { + if (traitType === 'Network') continue; + + const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); + if (!nftAttribute || !values.includes(nftAttribute.value)) { + return false; + } + } + return true; + }); } + + // Apply sorting + filteredNfts.sort((a: CollectionNFT, b: CollectionNFT) => { + if (sortBy === 'tokenId') { + const numA = parseInt(a.tokenId, 10); + const numB = parseInt(b.tokenId, 10); + + if (!isNaN(numA) && !isNaN(numB)) { + return sortDirection === 'asc' ? numA - numB : numB - numA; + } + + return sortDirection === 'asc' + ? a.tokenId.localeCompare(b.tokenId) + : b.tokenId.localeCompare(a.tokenId); + } else if (sortBy === 'name') { + return sortDirection === 'asc' + ? a.name.localeCompare(b.name) + : b.name.localeCompare(a.name); + } + return 0; + }); + + registerApiSuccess('moralis'); + return { + nfts: filteredNfts, + totalCount: response.total || filteredNfts.length + }; } - return true; - }); + } catch (error) { + console.warn('Moralis API failed for Ethereum, trying Etherscan next:', error); + registerApiFailure('moralis'); + } } - // Apply sorting - nfts.sort((a, b) => { - if (sortBy === 'tokenId') { - const idA = parseInt(a.tokenId, 16) || 0; - const idB = parseInt(b.tokenId, 16) || 0; - return sortDirection === 'asc' ? idA - idB : idB - idA; - } else if (sortBy === 'name') { - return sortDirection === 'asc' - ? a.name.localeCompare(b.name) - : b.name.localeCompare(a.name); + // Try Etherscan as last resort + if (apiStatus.etherscan.available) { + try { + console.log('Fetching Ethereum NFTs from Etherscan'); + // Note: Etherscan doesn't have a direct NFT API like Alchemy + // We would need to implement additional logic here to get NFTs from Etherscan + // This would likely involve getting token transfer events and reconstructing NFT ownership + + // For now, we'll just return a mock response with a notice about API limitations + registerApiSuccess('etherscan'); + return { + nfts: [{ + id: `${contractAddress.toLowerCase()}-1`, + tokenId: '1', + name: 'API Limit Reached', + description: 'We\'re experiencing high demand. Please try again later.', + imageUrl: '/Img/logo/cryptopath.png', + chain: chainId, + attributes: [] + }], + totalCount: 1 + }; + } catch (error) { + console.error('Etherscan API failed:', error); + registerApiFailure('etherscan'); } - // Add more sort options as needed - return 0; - }); - - return { - nfts, - totalCount, - pageKey: undefined // Alchemy might return a pageKey for pagination - }; - } catch (error) { - console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); - toast.error("Failed to load collection NFTs"); - return { nfts: [], totalCount: 0 }; + } } + + // All APIs failed or unsupported chain + console.error('All NFT APIs failed or unsupported chain'); + return { nfts: [], totalCount: 0 }; } /** - * Fetch user-owned NFTs across all collections + * Fetch NFTs with caching to reduce API usage */ -export async function fetchUserNFTs(address: string, chainId: string, pageKey?: string): Promise<{ - ownedNfts: any[], - totalCount: number, - pageKey?: string -}> { - if (!address) { - throw new Error("Address is required to fetch NFTs"); - } - - const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; - +export async function fetchPaginatedNFTs( + contractAddress: string, + chainId: string, + page: number = 1, + pageSize: number = 20, + sortBy: string = 'tokenId', + sortDirection: 'asc' | 'desc' = 'asc', + searchQuery: string = '', + attributes: Record = {} +): Promise { try { - const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getNFTs`; - const url = new URL(apiUrl); - url.searchParams.append('owner', address); - url.searchParams.append('withMetadata', 'true'); - url.searchParams.append('excludeFilters[]', 'SPAM'); - url.searchParams.append('pageSize', '100'); - - if (pageKey) { - url.searchParams.append('pageKey', pageKey); - } + // Generate cache key + const cacheKey = generateCacheKey( + contractAddress, + chainId, + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); - const response = await fetch(url.toString()); - - if (!response.ok) { - throw new Error(`API request failed with status ${response.status}`); + // Check cache first + const cachedData = nftCache.get(cacheKey); + if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) { + console.log('Using cached NFT data for', contractAddress); + return cachedData.data; } - return await response.json(); - } catch (error) { - console.error(`Error fetching NFTs for ${address}:`, error); - toast.error("Failed to load NFTs"); - return { ownedNfts: [], totalCount: 0 }; - } -} + // Implement multi-API approach with fallbacks + const data = await fetchWithFallbacks( + contractAddress, + chainId, + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); -/** - * Fetch popular NFT collections for a specific chain - */ -export async function fetchPopularCollections(chainId: string): Promise { - try { - const cacheKey = `popular-collections-${chainId}`; - - // Check cache first - if (collectionsCache.has(cacheKey)) { - return collectionsCache.get(cacheKey); - } - - // Get list of popular collection addresses for this chain - const popularAddresses = POPULAR_NFT_COLLECTIONS[chainId as keyof typeof POPULAR_NFT_COLLECTIONS] || []; - - if (!popularAddresses || (popularAddresses.length as number) === 0) { - return []; - } - - // Fetch detailed info for each collection - const collectionPromises = popularAddresses.map(async (collection) => { - const collectionInfo = await fetchCollectionInfo(collection.address, chainId); - - // Add extra details that might be missing from the base fetch - return { - ...collectionInfo, - name: collection.name || collectionInfo.name, - description: collection.description || collectionInfo.description, - // For our special CryptoPath collection on BNB Testnet - ...(collection.address.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551' && chainId === '0x61' ? { - featured: true, - imageUrl: '/Img/logo/cryptopath.png', - bannerImageUrl: '/Img/logo/logo4.svg' - } : {}) - }; + // Store in cache + nftCache.set(cacheKey, { + data, + timestamp: Date.now(), }); + + return data; + } catch (error) { + console.error('Error fetching paginated NFTs:', error); - const collections = await Promise.all(collectionPromises); - - // Cache the results - collectionsCache.set(cacheKey, collections); + // Show user-friendly error + toast.error('Failed to load NFTs. Please try again later.'); - return collections; - } catch (error) { - console.error('Error fetching popular collections:', error); - toast.error("Failed to load popular collections"); - return []; + // Return empty data to avoid breaking the UI + return { nfts: [], totalCount: 0 }; } } /** - * Fetch marketplace trading history for an NFT + * Clear cache for a specific collection */ -export async function fetchTradeHistory( - contractAddress: string, - tokenId?: string, - chainId: string = '0x1' -): Promise { - // This would normally connect to a blockchain indexer service - // For now, return mock data - - // Generate realistic mock data based on contract and token - const now = Date.now(); - const history = []; - const events = ['Sale', 'Transfer', 'Mint', 'List']; - const priceBase = tokenId ? - (parseInt(tokenId, 16) % 100) / 10 + 0.5 : // Use tokenId to generate a base price - 5 + Math.random() * 15; // Random base price for collection - - // Special handling for known collections to make data more realistic - let isSpecialCollection = false; - - if (chainId === '0x1') { - if (contractAddress.toLowerCase() === '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d') { - // BAYC - isSpecialCollection = true; - const bayc_events = [ - { - id: '1', - event: 'Sale', - price: (75 + Math.random() * 20).toFixed(2), - timestamp: new Date(now - 1000 * 60 * 60 * 24 * 2).toISOString(), - }, - { - id: '2', - event: 'Sale', - price: (60 + Math.random() * 15).toFixed(2), - timestamp: new Date(now - 1000 * 60 * 60 * 24 * 30).toISOString(), - }, - { - id: '3', - event: 'Mint', - timestamp: new Date(now - 1000 * 60 * 60 * 24 * 365).toISOString(), - } - ]; - - for (const evt of bayc_events) { - history.push({ - ...evt, - tokenId: tokenId || Math.floor(Math.random() * 10000).toString(), - from: evt.event === 'Mint' ? '0x0000000000000000000000000000000000000000' : `0x${Math.random().toString(16).slice(2, 42)}`, - to: `0x${Math.random().toString(16).slice(2, 42)}`, - txHash: `0x${Math.random().toString(16).slice(2, 66)}` - }); - } - } - } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551') { - // CryptoPath Genesis on BNB Testnet - isSpecialCollection = true; - const cryptopath_events = [ - { - id: '1', - event: 'Sale', - price: (12.5 + Math.random() * 5).toFixed(2), - timestamp: new Date(now - 1000 * 60 * 60 * 12).toISOString(), - }, - { - id: '2', - event: 'List', - price: (10 + Math.random() * 5).toFixed(2), - timestamp: new Date(now - 1000 * 60 * 60 * 24 * 2).toISOString(), - }, - { - id: '3', - event: 'Transfer', - timestamp: new Date(now - 1000 * 60 * 60 * 24 * 5).toISOString(), - }, - { - id: '4', - event: 'Mint', - timestamp: new Date(now - 1000 * 60 * 60 * 24 * 10).toISOString(), - } - ]; - - for (const evt of cryptopath_events) { - history.push({ - ...evt, - tokenId: tokenId || Math.floor(Math.random() * 1000).toString(), - from: evt.event === 'Mint' ? '0x0000000000000000000000000000000000000000' : `0x${Math.random().toString(16).slice(2, 42)}`, - to: evt.event === 'List' ? '0x0000000000000000000000000000000000000000' : `0x${Math.random().toString(16).slice(2, 42)}`, - txHash: `0x${Math.random().toString(16).slice(2, 66)}` - }); - } - } - - // Generate generic events if no special collection was matched - if (!isSpecialCollection) { - // Create 3-6 random events - const numEvents = 3 + Math.floor(Math.random() * 4); - - for (let i = 0; i < numEvents; i++) { - const event = events[Math.floor(Math.random() * events.length)]; - const daysAgo = Math.floor(Math.random() * 180); // Random event up to 6 months ago - const priceMultiplier = 0.8 + Math.random() * 0.4; // Random price variation - - history.push({ - id: i.toString(), - event, - tokenId: tokenId || Math.floor(Math.random() * 10000).toString(), - from: event === 'Mint' ? '0x0000000000000000000000000000000000000000' : `0x${Math.random().toString(16).slice(2, 42)}`, - to: event === 'List' ? '0x0000000000000000000000000000000000000000' : `0x${Math.random().toString(16).slice(2, 42)}`, - price: event === 'Sale' || event === 'List' ? (priceBase * priceMultiplier).toFixed(2) : undefined, - timestamp: new Date(now - 1000 * 60 * 60 * 24 * daysAgo - 1000 * 60 * 60 * Math.random() * 24).toISOString(), - txHash: `0x${Math.random().toString(16).slice(2, 66)}` - }); +export function clearCollectionCache(contractAddress: string): void { + // Delete all entries for this contract address + for (const key of nftCache.keys()) { + if (key.includes(contractAddress.toLowerCase())) { + nftCache.delete(key); } } - - // Sort by timestamp - return history.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()); } /** - * Fetch price history data for charts + * Clear cache for a specific collection and chain */ -export async function fetchPriceHistory( - contractAddress: string, - tokenId?: string, - chainId: string = '0x1', - period: '1d' | '7d' | '30d' | 'all' = '7d' -): Promise { - try { - // Generate realistic price history data based on real market trends - const now = Date.now(); - const data = []; - const days = 90; // 3 months of data - - // Determine base price and volatility based on collection - let basePrice = 1; - let volatility = 0.05; - let trend = 0; // Neutral trend by default - - // Special handling for known collections - if (chainId === '0x1') { - if (contractAddress.toLowerCase() === '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d') { - // BAYC - high value, high volatility - basePrice = 70; - volatility = 0.08; - trend = 0.001; // Slight uptrend - } else if (contractAddress.toLowerCase() === '0xed5af388653567af2f388e6224dc7c4b3241c544') { - // Azuki - basePrice = 8; - volatility = 0.06; - trend = 0.0005; - } else if (contractAddress.toLowerCase() === '0x60e4d786628fea6478f785a6d7e704777c86a7c6') { - // MAYC - basePrice = 10; - volatility = 0.07; - trend = 0.0007; - } - } else if (chainId === '0x38') { - if (contractAddress.toLowerCase() === '0x0a8901b0e25deb55a87524f0cc164e9644020eba') { - // Pancake Squad - basePrice = 2; - volatility = 0.04; - trend = 0.0008; // Stronger uptrend - } - } else if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551') { - // CryptoPath Genesis - basePrice = 10; - volatility = 0.06; - trend = 0.002; // Strong growth - } else { - // Use token ID to influence base price if available - basePrice = tokenId ? - (parseInt(tokenId, 16) % 100) / 10 + 0.5 : // Use tokenId to generate a base price - 1 + Math.random() * 5; // Random base price for collection - } - - // Generate prices with realistic market movements - let price = basePrice; - for (let i = days; i >= 0; i--) { - const date = new Date(now - 1000 * 60 * 60 * 24 * i); - - // Apply market factors - fix the TypeScript error with explicit weekend check - // Instead of comparing day of week directly, use an array of weekend days - const weekendDays = [0, 6]; // 0 = Sunday, 6 = Saturday - const isWeekend = weekendDays.includes(date.getDay()); - const weekendFactor = isWeekend ? (Math.random() > 0.5 ? 0.01 : -0.01) : 0; // Weekend volatility - - // Market cycle - simulate some cyclical behavior (10-day cycles) - const cycleFactor = 0.02 * Math.sin(i / 10); - - // Apply trend (accumulated over time) + random volatility + cyclical factor + weekend effect - price = price * (1 + trend + (Math.random() - 0.5) * volatility + cycleFactor + weekendFactor); - - // Floor at 10% of base price to avoid unrealistic crashes - price = Math.max(price, basePrice * 0.1); - - data.push({ - date: date.toISOString().split('T')[0], - price: price.toFixed(4) - }); +export function clearPaginationCache(contractAddress: string, chainId: string): void { + // Create partial key that we can use to match + const partialKey = JSON.stringify({ + contract: contractAddress.toLowerCase(), + chain: chainId, + }).slice(0, -1); // Remove the trailing '}' + + // Delete all entries that match the partial key + for (const key of nftCache.keys()) { + if (key.includes(partialKey)) { + nftCache.delete(key); } - - // Filter data based on period - const pastDate = new Date(); - - switch (period) { - case '1d': - pastDate.setDate(pastDate.getDate() - 1); - break; - case '7d': - pastDate.setDate(pastDate.getDate() - 7); - break; - case '30d': - pastDate.setDate(pastDate.getDate() - 30); - break; - case 'all': - default: - // No filtering for 'all' - break; - } - - // Filter and format price history - return period === 'all' - ? data - : data.filter(item => new Date(item.date) >= pastDate); - } catch (error) { - console.error("Error fetching price history:", error); - return []; - } -} - -/** - * Get all traits and their values for a collection - */ -export async function fetchCollectionTraits(contractAddress: string, chainId: string): Promise> { - try { - // Try to get traits from Alchemy API - const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; - const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getContractMetadata`; - const url = new URL(apiUrl); - url.searchParams.append('contractAddress', contractAddress); - - const response = await fetch(url.toString()); - - if (response.ok) { - const data = await response.json(); - - // Check if the data includes attribute data - if (data.contractMetadata?.openSea?.traits) { - const traits: Record = {}; - - // Parse OpenSea traits format - for (const [traitType, values] of Object.entries(data.contractMetadata.openSea.traits)) { - traits[traitType] = Array.isArray(values) ? values : Object.keys(values as object); - } - - return traits; - } - } - - // Fallback: Fetch a sample of NFTs and extract traits - const nfts = await fetchCollectionNFTs(contractAddress, chainId, { - pageSize: 100 // Fetch a larger sample to get more traits - }); - - const traits: Record = {}; - - // Extract unique traits and values - nfts.nfts.forEach(nft => { - if (nft.attributes) { - nft.attributes.forEach(attr => { - if (!traits[attr.trait_type]) { - traits[attr.trait_type] = []; - } - - if (!traits[attr.trait_type].includes(attr.value)) { - traits[attr.trait_type].push(attr.value); - } - }); - } - }); - - // Sort values for each trait - for (const traitType in traits) { - traits[traitType].sort(); - } - - return traits; - } catch (error) { - console.error('Error fetching collection traits:', error); - return {}; - } -} - -/** - * Search for NFT collections across supported networks - */ -export async function searchNFTCollections( - query: string, - chainIds: string[] = ['0x1', '0x38'] -): Promise { - try { - if (!query || query.length < 2) { - return []; - } - - // Normalize query - const normalizedQuery = query.toLowerCase().trim(); - - // Search for collections on each chain - const searchPromises = chainIds.map(async (chainId) => { - try { - // Get popular collections for this chain - const collections = await fetchPopularCollections(chainId); - - // Filter collections by search term - return collections.filter(collection => - collection.name.toLowerCase().includes(normalizedQuery) || - collection.description.toLowerCase().includes(normalizedQuery) || - collection.symbol.toLowerCase().includes(normalizedQuery) || - collection.contractAddress.toLowerCase() === normalizedQuery - ); - } catch (error) { - console.error(`Error searching collections on chain ${chainId}:`, error); - return []; - } - }); - - const results = await Promise.all(searchPromises); - - // Flatten results and sort by relevance - // For exact contract address matches, put them at the top - return results.flat().sort((a, b) => { - // Exact contract address match gets highest priority - if (a.contractAddress.toLowerCase() === normalizedQuery) return -1; - if (b.contractAddress.toLowerCase() === normalizedQuery) return 1; - - // Exact name match gets second priority - const aNameMatch = a.name.toLowerCase() === normalizedQuery; - const bNameMatch = b.name.toLowerCase() === normalizedQuery; - if (aNameMatch && !bNameMatch) return -1; - if (!aNameMatch && bNameMatch) return 1; - - // Otherwise, sort by name - return a.name.localeCompare(b.name); - }); - } catch (error) { - console.error('Error searching collections:', error); - toast.error("Failed to search collections"); - return []; - } -} - -/** - * Get statistics for a collection (floor price history, volume, etc.) - */ -export async function getCollectionStats( - contractAddress: string, - chainId: string, - period: '1d' | '7d' | '30d' | 'all' = '7d' -): Promise<{ - floorPrice: number; - volume: number; - change: number; - sales: number; - averagePrice: number; - owners: number; - holders: { count: number, percentage: number }; - priceHistory: Array<{ date: string; price: number }>; -}> { - try { - // Get price history for the chosen period - const priceData = await fetchPriceHistory(contractAddress, undefined, chainId, period); - - // Filter data based on period - const now = new Date(); - const pastDate = new Date(); - - switch (period) { - case '1d': - pastDate.setDate(now.getDate() - 1); - break; - case '7d': - pastDate.setDate(now.getDate() - 7); - break; - case '30d': - pastDate.setDate(now.getDate() - 30); - break; - case 'all': - default: - // No filtering for 'all' - break; - } - - // Filter and format price history - const filteredPriceData = period === 'all' - ? priceData - : priceData.filter(item => new Date(item.date) >= pastDate); - - const priceHistory = filteredPriceData.map(item => ({ - date: item.date, - price: parseFloat(item.price) - })); - - // Calculate statistics - const latestPrice = priceHistory.length > 0 - ? priceHistory[priceHistory.length - 1].price - : 0; - - const oldestPrice = priceHistory.length > 0 - ? priceHistory[0].price - : latestPrice; - - const priceChange = oldestPrice > 0 - ? ((latestPrice - oldestPrice) / oldestPrice) * 100 - : 0; - - // Get collection info for additional stats - const collection = await fetchCollectionInfo(contractAddress, chainId); - - // Generate realistic mock data - const totalSupply = parseInt(collection.totalSupply) || 10000; - const ownersCount = Math.floor(totalSupply * (0.3 + Math.random() * 0.4)); // 30-70% of supply - const salesCount = Math.floor(ownersCount * (0.1 + Math.random() * 0.4)); // 10-50% of owners - const volume = salesCount * latestPrice; - - return { - floorPrice: latestPrice, - volume: volume, - change: priceChange, - sales: salesCount, - averagePrice: volume / salesCount, - owners: ownersCount, - holders: { - count: ownersCount, - percentage: (ownersCount / totalSupply) * 100 - }, - priceHistory - }; - } catch (error) { - console.error("Error fetching collection stats:", error); - toast.error("Failed to fetch collection statistics"); - - // Return default values - return { - floorPrice: 0, - volume: 0, - change: 0, - sales: 0, - averagePrice: 0, - owners: 0, - holders: { count: 0, percentage: 0 }, - priceHistory: [] - }; - } -} - -/** - * Get detailed NFT metadata with rarity scores - */ -export async function getNFTWithRarityScore( - contractAddress: string, - tokenId: string, - chainId: string -): Promise }> { - try { - // Get the NFT - const nft = await fetchNFTData(contractAddress, tokenId, chainId); - - if (!nft) { - throw new Error("NFT not found"); - } - - // Get all traits for the collection to calculate rarity - const collectionTraits = await fetchCollectionTraits(contractAddress, chainId); - - // Calculate rarity score for each trait - const traitRarity: Record = {}; - let totalRarityScore = 0; - - if (nft.attributes && nft.attributes.length > 0) { - nft.attributes.forEach(attr => { - if (!collectionTraits[attr.trait_type]) return; - - // Calculate trait rarity percentage - const traitValues = collectionTraits[attr.trait_type]; - const traitOccurrence = traitValues.length > 0 ? 1 / traitValues.length : 0; - - // Calculate trait rarity score (rarer = higher score) - const rarityScore = traitValues.includes(attr.value) - ? 1 / (traitValues.filter(v => v === attr.value).length / traitValues.length) - : 10; // Very rare if it's unique - - traitRarity[attr.trait_type] = rarityScore; - totalRarityScore += rarityScore; - }); - } - - // Add missing traits as a rarity factor - const missingTraits = Object.keys(collectionTraits).filter( - trait => !nft.attributes?.some(attr => attr.trait_type === trait) - ); - - missingTraits.forEach(trait => { - traitRarity[`missing_${trait}`] = 5; // Missing traits add to rarity - totalRarityScore += 5; - }); - - // Normalize rarity score (0-100 scale) - const normalizedRarityScore = Math.min(100, totalRarityScore / (Object.keys(collectionTraits).length || 1)); - - return { - ...nft, - rarityScore: normalizedRarityScore, - traitRarity - }; - } catch (error) { - console.error("Error calculating NFT rarity:", error); - - // Return the NFT without rarity if available, otherwise rethrow - const nft = await fetchNFTData(contractAddress, tokenId, chainId); - if (nft) { - return { - ...nft, - rarityScore: 0, - traitRarity: {} - }; - } - - throw error; - } -} - -/** - * Get similar NFTs to a specific NFT - */ -export async function getSimilarNFTs( - contractAddress: string, - tokenId: string, - chainId: string, - limit: number = 6 -): Promise { - try { - // Get the reference NFT - const nft = await fetchNFTData(contractAddress, tokenId, chainId); - - if (!nft || !nft.attributes) { - throw new Error("NFT not found or has no attributes"); - } - - // Fetch a batch of NFTs from the same collection - const { nfts } = await fetchCollectionNFTs(contractAddress, chainId, { - pageSize: 50, - sortBy: 'tokenId', - sortDirection: 'asc' - }); - - // Filter out the reference NFT - const otherNFTs = nfts.filter(item => item.tokenId !== tokenId); - - // Calculate similarity score for each NFT - const scoredNFTs = otherNFTs.map(item => { - if (!item.attributes || !nft.attributes) return { nft: item, score: 0 }; - - let score = 0; - - // Calculate score based on matching attributes - nft.attributes.forEach(refAttr => { - const matchingAttr = item.attributes?.find(attr => - attr.trait_type === refAttr.trait_type - ); - - if (matchingAttr) { - // Direct match adds more points - if (matchingAttr.value === refAttr.value) { - score += 10; - } else { - // Same trait type but different value - score += 2; - } - } - }); - - return { nft: item, score }; - }); - - // Sort by similarity score (highest first) and take top 'limit' - return scoredNFTs - .sort((a, b) => b.score - a.score) - .slice(0, limit) - .map(item => item.nft); - } catch (error) { - console.error("Error finding similar NFTs:", error); - return []; - } -} - -/** - * Get estimated NFT value based on traits and recent sales - */ -export async function estimateNFTValue( - contractAddress: string, - tokenId: string, - chainId: string -): Promise<{ estimatedValue: number; confidenceScore: number; similarSales: any[] }> { - try { - // Get NFT with rarity info - const nftWithRarity = await getNFTWithRarityScore(contractAddress, tokenId, chainId); - - // Get collection floor price - const stats = await getCollectionStats(contractAddress, chainId, '7d'); - - // Get similar NFTs to compare - const similarNFTs = await getSimilarNFTs(contractAddress, tokenId, chainId, 10); - - // Mock sale data for similar NFTs - const similarSales = similarNFTs.map(nft => { - // Generate realistic sale price based on collection floor and rarity - const rarityFactor = 0.8 + Math.random() * 0.4; // 0.8-1.2 range - const priceVariance = stats.floorPrice * rarityFactor; - - return { - tokenId: nft.tokenId, - name: nft.name, - price: priceVariance.toFixed(3), - date: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString() // Random date in last 30 days - }; - }); - - // Calculate estimated value based on rarity score and floor price - const rarityMultiplier = (nftWithRarity.rarityScore / 50) + 0.5; // 0.5-2.5x based on rarity - let estimatedValue = stats.floorPrice * rarityMultiplier; - - // Floor price safeguard - estimatedValue = Math.max(estimatedValue, stats.floorPrice * 0.8); - - // Confidence score based on available data - const confidenceScore = Math.min(85, 40 + (similarNFTs.length * 5)); - - return { - estimatedValue, - confidenceScore, - similarSales - }; - } catch (error) { - console.error("Error estimating NFT value:", error); - return { - estimatedValue: 0, - confidenceScore: 0, - similarSales: [] - }; - } -} - -/** - * Enhanced NFT fetching service with caching, pagination and virtualization support - */ -export async function fetchNFTsWithVirtualization( - contractAddress: string, - chainId: string, - page: number = 1, - pageSize: number = DEFAULT_PAGE_SIZE, - sortBy: string = 'tokenId', - sortDirection: 'asc' | 'desc' = 'asc', - searchQuery: string = '', - attributes: Record = {} -): Promise<{ - nfts: CollectionNFT[], - totalCount: number, - hasMore: boolean, - pageKey?: string -}> { - // Create a cache key based on all parameters - const cacheKey = `${contractAddress}-${chainId}-${page}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - // Check if we have cached data and it's not expired - const cachedData = nftCache.get(cacheKey); - if (cachedData && Date.now() - cachedData.timestamp < cachedData.expires) { - return { - nfts: cachedData.data, - totalCount: cachedData.totalCount, - hasMore: cachedData.data.length < cachedData.totalCount - }; - } - try { - const response = await fetchCollectionNFTs(contractAddress, chainId, { - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - }); - - const nftsWithChain = response.nfts.map(nft => ({ - ...nft, - chain: chainId - })); - - // Store in cache - nftCache.set(cacheKey, { - data: nftsWithChain, - totalCount: response.totalCount, - timestamp: Date.now(), - expires: CACHE_TTL - }); - return { - nfts: nftsWithChain, - totalCount: response.totalCount, - hasMore: response.nfts.length < response.totalCount, - pageKey: response.pageKey - }; - } catch (error) { - console.error('Error fetching NFTs with virtualization:', error); - toast.error('Failed to load NFTs. Please try again.'); - return { nfts: [], totalCount: 0, hasMore: false }; - } -} - -/** - * Get cursor-based paginated NFTs similar to OpenSea - */ -export async function fetchNFTsWithCursor( - contractAddress: string, - chainId: string, - cursor?: string, - limit: number = DEFAULT_PAGE_SIZE, - sortBy: string = 'tokenId', - sortDirection: 'asc' | 'desc' = 'asc', - searchQuery: string = '', - attributes: Record = {} -): Promise<{ - nfts: any[], - totalCount: number, - nextCursor?: string -}> { - // Calculate the "page" based on cursor if provided - // This is a simplified approach - in a real app you'd parse the cursor - const page = cursor ? parseInt(cursor, 10) : 1; - - try { - const response = await fetchCollectionNFTs(contractAddress, chainId, { - page, - pageSize: limit, - sortBy, - sortDirection, - searchQuery, - attributes - }); - - // Create a new cursor for the next page - const nextCursor = response.pageKey || ( - response.nfts.length === limit ? (page + 1).toString() : undefined - ); - - return { - nfts: response.nfts, - totalCount: response.totalCount, - nextCursor - }; - } catch (error) { - console.error('Error fetching NFTs with cursor:', error); - toast.error('Failed to load NFTs. Please try again.'); - return { nfts: [], totalCount: 0 }; - } -} - -/** - * Clear all NFT cache data - */ -export function clearNFTCache() { - nftCache.clear(); - // Also clear advanced cache - advancedNFTCache.clearAll(); -} - -/** - * Clear cache for a specific collection - */ -export function clearCollectionCache(contractAddress: string, chainId: string) { - const cacheKeyPrefix = `${contractAddress}-${chainId}`; - - // Iterate through all keys and delete matching ones - for (const key of nftCache.keys()) { - if (key.startsWith(cacheKeyPrefix)) { - nftCache.delete(key); - } - } -} - -/** - * Get NFT indexing status - simulating OpenSea's indexing progress - */ -export async function getNFTIndexingStatus(contractAddress: string, chainId: string): Promise<{ - status: 'completed' | 'in_progress' | 'not_started', - progress: number -}> { - // Simulate different statuses based on contract address - const lastChar = contractAddress.slice(-1); - const charCode = lastChar.charCodeAt(0); - - if (charCode % 3 === 0) { - return { status: 'completed', progress: 100 }; - } else if (charCode % 3 === 1) { - const progress = Math.floor(Math.random() * 90) + 10; // 10-99% - return { status: 'in_progress', progress }; - } else { - return { status: 'not_started', progress: 0 }; - } -} - -/** - * Calculate visible range for virtualized rendering - */ -export function calculateVisibleRange( - scrollTop: number, - viewportHeight: number, - itemHeight: number, - itemCount: number, - buffer: number = 5 // Number of items to render above/below viewport -): { startIndex: number, endIndex: number } { - const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer); - const endIndex = Math.min( - itemCount - 1, - Math.ceil((scrollTop + viewportHeight) / itemHeight) + buffer - ); - - return { startIndex, endIndex }; -} - -/** - * Generate placeholder data for NFTs that are being loaded - */ -export function generatePlaceholderNFTs(count: number, startIndex: number = 0): any[] { - return Array.from({ length: count }, (_, i) => ({ - id: `placeholder-${startIndex + i}`, - tokenId: `${startIndex + i}`, - name: `Loading...`, - description: '', - imageUrl: '', - isPlaceholder: true, - attributes: [] - })); -} - -// Create a more sophisticated cache system with IndexedDB support -class AdvancedNFTCache { - private memoryCache: Map = new Map(); - - private readonly MEMORY_CACHE_LIMIT = 1000; // Max items to store in memory - private readonly DB_NAME = 'nft_cache_db'; - private readonly STORE_NAME = 'nfts'; - private dbPromise: Promise | null = null; - - constructor() { - // Initialize IndexedDB for large collections - this.initDB(); - } - - private initDB(): Promise { - if (this.dbPromise) return this.dbPromise; - - this.dbPromise = new Promise((resolve, reject) => { - if (!window.indexedDB) { - console.warn('IndexedDB not supported. Using memory cache only.'); - resolve(null as unknown as IDBDatabase); - return; - } - - const request = window.indexedDB.open(this.DB_NAME, 1); - - request.onupgradeneeded = (event) => { - const db = (event.target as IDBOpenDBRequest).result; - if (!db.objectStoreNames.contains(this.STORE_NAME)) { - const store = db.createObjectStore(this.STORE_NAME, { keyPath: 'cacheKey' }); - store.createIndex('timestamp', 'timestamp', { unique: false }); - } - }; - - request.onsuccess = (event) => { - const db = (event.target as IDBOpenDBRequest).result; - resolve(db); - }; - - request.onerror = (event) => { - console.error('IndexedDB error:', event); - reject(new Error('Failed to open IndexedDB')); - }; - }); - - return this.dbPromise; - } - - async get(key: string): Promise<{ - data: any[]; - totalCount: number; - timestamp: number; - expires: number; - } | null> { - // First check memory cache - if (this.memoryCache.has(key)) { - return this.memoryCache.get(key) || null; - } - - // Then check IndexedDB for large collections - try { - const db = await this.initDB(); - if (!db) return null; - - return new Promise((resolve) => { - const transaction = db.transaction(this.STORE_NAME, 'readonly'); - const store = transaction.objectStore(this.STORE_NAME); - const request = store.get(key); - - request.onsuccess = () => { - const result = request.result; - if (result && Date.now() - result.timestamp < result.expires) { - // Cache hit - move to memory for faster access next time - this.memoryCache.set(key, result); - this.pruneMemoryCache(); - resolve(result); - } else { - resolve(null); - } - }; - - request.onerror = () => resolve(null); - }); - } catch (error) { - console.warn('Error accessing IndexedDB:', error); - return null; - } - } - - async set(key: string, value: { - data: any[]; - totalCount: number; - timestamp: number; - expires: number; - }, isLargeCollection: boolean = false): Promise { - // Always store in memory cache for fast access - this.memoryCache.set(key, value); - this.pruneMemoryCache(); - - // For large collections, also persist to IndexedDB - if (isLargeCollection) { - try { - const db = await this.initDB(); - if (!db) return; - - const transaction = db.transaction(this.STORE_NAME, 'readwrite'); - const store = transaction.objectStore(this.STORE_NAME); - store.put({ ...value, cacheKey: key }); - } catch (error) { - console.warn('Error storing in IndexedDB:', error); - } - } - } - - async clearForCollection(collectionId: string, chainId: string): Promise { - const keyPrefix = `${collectionId}-${chainId}`; - - // Clear from memory cache - for (const key of this.memoryCache.keys()) { - if (key.startsWith(keyPrefix)) { - this.memoryCache.delete(key); - } - } - - // Clear from IndexedDB - try { - const db = await this.initDB(); - if (!db) return; - - const transaction = db.transaction(this.STORE_NAME, 'readwrite'); - const store = transaction.objectStore(this.STORE_NAME); - const range = IDBKeyRange.bound( - keyPrefix, - keyPrefix + '\uffff', // This ensures we get all keys starting with keyPrefix - false, - false - ); - - store.delete(range); - } catch (error) { - console.warn('Error clearing IndexedDB:', error); - } - } - - async clearAll(): Promise { - // Clear memory cache - this.memoryCache.clear(); - - // Clear IndexedDB - try { - const db = await this.initDB(); - if (!db) return; - - const transaction = db.transaction(this.STORE_NAME, 'readwrite'); - const store = transaction.objectStore(this.STORE_NAME); - store.clear(); - } catch (error) { - console.warn('Error clearing IndexedDB:', error); - } - } - - private pruneMemoryCache(): void { - // Keep memory cache size under control - if (this.memoryCache.size > this.MEMORY_CACHE_LIMIT) { - // Remove oldest entries - const entries = Array.from(this.memoryCache.entries()); - entries.sort((a, b) => a[1].timestamp - b[1].timestamp); - - const toDelete = entries.slice(0, entries.length - this.MEMORY_CACHE_LIMIT); - for (const [key] of toDelete) { - this.memoryCache.delete(key); - } - } - } -} - -// Create a singleton instance of our advanced cache -const advancedNFTCache = new AdvancedNFTCache(); - -// Track loading state for collections to avoid duplicate requests -const loadingCollections = new Map>(); - -/** - * Enhanced NFT fetching with progressive loading for very large collections - */ -export async function fetchNFTsWithProgressiveLoading( - contractAddress: string, - chainId: string, - options: { - batchSize?: number; - maxBatches?: number; // Limit number of batches to avoid excessive loading - initialPage?: number; - initialPageSize?: number; - sortBy?: string; - sortDirection?: 'asc' | 'desc'; - searchQuery?: string; - attributes?: Record; - onProgress?: (progress: number, total: number) => void; - } = {} -): Promise<{ - nfts: any[]; - totalCount: number; - hasMoreBatches: boolean; - progress: number; // 0-100 -}> { - const { - batchSize = 100, - maxBatches = 100, // Limit to 10,000 NFTs by default - initialPage = 1, - initialPageSize = 32, - sortBy = 'tokenId', - sortDirection = 'asc', - searchQuery = '', - attributes = {}, - onProgress - } = options; - - // Determine if this is a large collection (>500 items) - const isLargeCollection = true; // Assume large until we know otherwise - - // Create a cache key for this specific request - const cacheKeyBase = `${contractAddress}-${chainId}-progressive`; - const filterKey = `-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - const cacheKey = cacheKeyBase + filterKey; - - // Check if we already have cached data - const cachedData = await advancedNFTCache.get(cacheKey); - if (cachedData) { - // Check if cache is fresh enough - const now = Date.now(); - if (now - cachedData.timestamp < cachedData.expires) { - return { - nfts: cachedData.data, - totalCount: cachedData.totalCount, - hasMoreBatches: cachedData.data.length < cachedData.totalCount, - progress: (cachedData.data.length / cachedData.totalCount) * 100 - }; - } - } - - // Check if this collection is already being loaded - const loadingKey = `${contractAddress}-${chainId}-loading`; - if (loadingCollections.has(loadingKey)) { - try { - await loadingCollections.get(loadingKey); - } catch (error) { - console.warn('Previous loading failed:', error); - } - } - - // Set up loading promise - const loadingPromise = (async () => { - try { - // Start with a small initial batch for fast first render - const initialBatch = await fetchCollectionNFTs( - contractAddress, - chainId, - { - page: initialPage, - pageSize: initialPageSize, - sortBy, - sortDirection, - searchQuery, - attributes - } - ); - - // Store the initial NFTs - let allNfts = initialBatch.nfts; - const totalCount = initialBatch.totalCount; - - if (onProgress) { - onProgress(allNfts.length, totalCount); - } - - // Store in cache even with partial data - await advancedNFTCache.set(cacheKey, { - data: allNfts.map(nft => ({ ...nft, chain: chainId })), - totalCount: totalCount, - timestamp: Date.now(), - expires: 10 * 60 * 1000 // 10 minute cache - }, isLargeCollection); - - // Stop if we already have all NFTs or reached the limit - if (allNfts.length >= totalCount || allNfts.length >= batchSize * maxBatches) { - return { - nfts: allNfts, - totalCount - }; - } - - // Load remaining batches in the background - const loadRemainingBatches = async () => { - try { - let currentPage = 2; // Start from page 2 since we already have page 1 - let continueFetching = true; - - while ( - continueFetching && - allNfts.length < totalCount && - allNfts.length < batchSize * maxBatches - ) { - const nextBatch = await fetchCollectionNFTs( - contractAddress, - chainId, - { - page: currentPage, - pageSize: batchSize, - sortBy, - sortDirection, - searchQuery, - attributes - } - ); - - if (nextBatch.nfts.length === 0) { - continueFetching = false; - } else { - // Add new NFTs to our collection - allNfts = [...allNfts, ...nextBatch.nfts]; - currentPage++; - - if (onProgress) { - onProgress(allNfts.length, totalCount); - } - - // Update cache with each batch - await advancedNFTCache.set(cacheKey, { - data: allNfts.map(nft => ({ ...nft, chain: chainId })), - totalCount: totalCount, - timestamp: Date.now(), - expires: 10 * 60 * 1000 // 10 minute cache - }, isLargeCollection); - } - } - } catch (error) { - console.error('Error loading remaining batches:', error); - } - }; - - // Start the background loading process without awaiting it - loadRemainingBatches(); - - return { - nfts: allNfts, - totalCount - }; - } catch (error) { - console.error('Error in progressive loading:', error); - throw error; - } - })(); - - // Store the promise to track loading state - loadingCollections.set(loadingKey, loadingPromise); - - try { - const result = await loadingPromise; - - // Convert NFTs to the expected format with chain ID - const nftsWithChain = result.nfts.map(nft => ({ - ...nft, - chain: chainId - })); - - return { - nfts: nftsWithChain, - totalCount: result.totalCount, - hasMoreBatches: nftsWithChain.length < result.totalCount, - progress: (nftsWithChain.length / result.totalCount) * 100 - }; - } finally { - // Clean up loading state - loadingCollections.delete(loadingKey); - } -} - -/** - * Get cursor-based paginated NFTs with optimized memory handling for large collections - */ -export async function fetchNFTsWithOptimizedCursor( - contractAddress: string, - chainId: string, - cursor?: string, - limit: number = DEFAULT_PAGE_SIZE, - sortBy: string = 'tokenId', - sortDirection: 'asc' | 'desc' = 'asc', - searchQuery: string = '', - attributes: Record = {} -): Promise<{ - nfts: any[], - totalCount: number, - nextCursor?: string, - loadedCount: number, - progress: number -}> { - // Create cursor info from the cursor string - const page = cursor ? parseInt(cursor, 10) : 1; - const pageOffset = (page - 1) * limit; - - // Create a cache key that includes all filter params - const cacheKey = `${contractAddress}-${chainId}-cursor-${pageOffset}-${limit}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - - // Check global cache first for this specific page - const cachedPageData = await advancedNFTCache.get(cacheKey); - if (cachedPageData && Date.now() - cachedPageData.timestamp < cachedPageData.expires) { - const nextCursor = pageOffset + limit < cachedPageData.totalCount - ? (page + 1).toString() - : undefined; - - return { - nfts: cachedPageData.data, - totalCount: cachedPageData.totalCount, - nextCursor, - loadedCount: pageOffset + cachedPageData.data.length, - progress: Math.min(100, ((pageOffset + cachedPageData.data.length) / cachedPageData.totalCount) * 100) - }; - } - - // Also check if we have a progressive loading cache that contains this page - const progressiveCacheKey = `${contractAddress}-${chainId}-progressive-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - const progressiveCache = await advancedNFTCache.get(progressiveCacheKey); - - if (progressiveCache && Date.now() - progressiveCache.timestamp < progressiveCache.expires) { - const totalCount = progressiveCache.totalCount; - - // Check if the progressive cache contains the data for this page - if (pageOffset < progressiveCache.data.length) { - const pageData = progressiveCache.data.slice(pageOffset, pageOffset + limit); - const nextCursor = pageOffset + limit < totalCount - ? (page + 1).toString() - : undefined; - - // Cache this specific page result too - await advancedNFTCache.set(cacheKey, { - data: pageData, - totalCount, - timestamp: Date.now(), - expires: 5 * 60 * 1000 // 5 minute cache for page results - }); - - return { - nfts: pageData, - totalCount, - nextCursor, - loadedCount: Math.min(progressiveCache.data.length, pageOffset + limit), - progress: Math.min(100, (progressiveCache.data.length / totalCount) * 100) - }; - } - } - - // If not in cache, fetch from API - try { - const response = await fetchCollectionNFTs( - contractAddress, - chainId, - { - page, - pageSize: limit, - sortBy, - sortDirection, - searchQuery, - attributes - } - ); - - // Add chain info to each NFT - const nftsWithChain = response.nfts.map(nft => ({ - ...nft, - chain: chainId - })); - - // Create the next cursor if there are more items - const nextCursor = response.nfts.length === limit && pageOffset + limit < response.totalCount - ? (page + 1).toString() - : undefined; - - // Cache this page result - await advancedNFTCache.set(cacheKey, { - data: nftsWithChain, - totalCount: response.totalCount, - timestamp: Date.now(), - expires: 5 * 60 * 1000 // 5 minute cache - }); - - return { - nfts: nftsWithChain, - totalCount: response.totalCount, - nextCursor, - loadedCount: pageOffset + nftsWithChain.length, - progress: Math.min(100, ((pageOffset + nftsWithChain.length) / response.totalCount) * 100) - }; - } catch (error) { - console.error('Error fetching NFTs with optimized cursor:', error); - toast.error('Failed to load NFTs. Please try again.'); - return { - nfts: [], - totalCount: 0, - loadedCount: 0, - progress: 0 - }; } } - -/** - * Clear all NFT cache data - */ -export function clearAllNFTCaches() { - advancedNFTCache.clearAll(); -} - -/** - * Clear cache for a specific collection - */ -export function clearSpecificCollectionCache(contractAddress: string, chainId: string) { - advancedNFTCache.clearForCollection(contractAddress, chainId); -// No need to redefine clearNFTCache, it's already defined above and will -// call the clearAllNFTCaches function - clearAllNFTCaches(); -} - -/** - * Calculate estimated memory usage for an NFT collection - */ -export function estimateCollectionMemoryUsage(totalNFTs: number): string { - // Rough estimate: average NFT object is about 2KB - const estimatedBytes = totalNFTs * 2 * 1024; - - if (estimatedBytes < 1024 * 1024) { - return `${(estimatedBytes / 1024).toFixed(2)} KB`; - } else if (estimatedBytes < 1024 * 1024 * 1024) { - return `${(estimatedBytes / (1024 * 1024)).toFixed(2)} MB`; - } else { - return `${(estimatedBytes / (1024 * 1024 * 1024)).toFixed(2)} GB`; - } -} - -/** - * Preload critical NFT data - */ -export async function preloadCollectionData(contractAddress: string, chainId: string): Promise { - try { - // Preload collection metadata - const metadata = await fetchCollectionInfo(contractAddress, chainId); - - // Preload first batch of NFTs - await fetchNFTsWithOptimizedCursor( - contractAddress, - chainId, - '1', // First page - 32, // Small batch to load quickly - 'tokenId', - 'asc' - ); - - return true; - } catch (error) { - console.error('Error preloading collection data:', error); - return false; - } -} - -// Add these enhanced caching functions for optimized pagination - -/** - * Optimized cache for pagination to minimize Alchemy API calls - */ -class PagedNFTCache { - private static instance: PagedNFTCache; - private cache: Map = new Map(); - - // Longer cache time for pagination to reduce API calls further - private CACHE_TTL = 30 * 60 * 1000; // 30 minutes - - private constructor() {} - - public static getInstance(): PagedNFTCache { - if (!PagedNFTCache.instance) { - PagedNFTCache.instance = new PagedNFTCache(); - } - return PagedNFTCache.instance; - } - - public get(key: string) { - const cached = this.cache.get(key); - if (cached && Date.now() - cached.timestamp < cached.expires) { - return cached; - } - return null; - } - - public set( - key: string, - data: any[], - totalCount: number, - expires: number = this.CACHE_TTL - ) { - this.cache.set(key, { - data, - totalCount, - timestamp: Date.now(), - expires - }); - } - - public clear(prefix?: string) { - if (prefix) { - // Clear only cache entries that start with prefix - for (const key of this.cache.keys()) { - if (key.startsWith(prefix)) { - this.cache.delete(key); - } - } - } else { - // Clear all cache - this.cache.clear(); - } - } - - // Prefetch adjacent pages to improve UX - public async prefetchAdjacentPages( - contractAddress: string, - chainId: string, - currentPage: number, - pageSize: number, - sortBy: string, - sortDirection: 'asc' | 'desc', - searchQuery: string = '', - attributes: Record = {} - ) { - // Only prefetch if we're not already loading/caching that page - const pagesToPrefetch = [currentPage + 1]; - - for (const page of pagesToPrefetch) { - const cacheKey = this.generateCacheKey( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - - // Only prefetch if not already in cache and page is > 0 - if (!this.get(cacheKey) && page > 0) { - // Use a low priority flag and setTimeout to not block the main thread - setTimeout(() => { - fetchCollectionNFTs(contractAddress, chainId, { - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - }).then(result => { - if (result.nfts.length > 0) { - this.set(cacheKey, result.nfts, result.totalCount); - } - }).catch(err => { - console.log('Prefetch error (non-critical):', err); - }); - }, 1000); // Delay prefetch to prioritize current page - } - } - } - - public generateCacheKey( - contractAddress: string, - chainId: string, - page: number, - pageSize: number, - sortBy: string, - sortDirection: 'asc' | 'desc', - searchQuery: string = '', - attributes: Record = {} - ): string { - return `${contractAddress.toLowerCase()}-${chainId}-p${page}-s${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - } -} - -// Singleton instance -const pagedCache = PagedNFTCache.getInstance(); - -/** - * Fetch collection NFTs with optimized pagination to reduce Alchemy API calls - */ -export async function fetchPaginatedNFTs( - contractAddress: string, - chainId: string, - page: number = 1, - pageSize: number = 20, // Default to 20 for optimal API usage - sortBy: string = 'tokenId', - sortDirection: 'asc' | 'desc' = 'asc', - searchQuery: string = '', - attributes: Record = {} -): Promise<{ - nfts: any[]; - totalCount: number; - hasNextPage: boolean; - hasPrevPage: boolean; -}> { - // Generate cache key - const cacheKey = pagedCache.generateCacheKey( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - - // Check cache first - log cache hits for monitoring - const cached = pagedCache.get(cacheKey); - if (cached) { - console.log(`[API Optimization] Cache hit for ${contractAddress} page ${page}`); - - // Only prefetch next page if we're in a stable view (not actively changing pages) - setTimeout(() => { - // Start prefetching next page in background - pagedCache.prefetchAdjacentPages( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - }, 500); - - // Ensure totalCount is at least 1 more than current items if we need pagination - const calculatedTotalCount = Math.max( - cached.totalCount, - page * pageSize + (cached.data.length === pageSize ? 1 : 0) - ); - - console.log(`[Pagination] Using cached data: Page ${page}, Items: ${cached.data.length}, Total: ${calculatedTotalCount}`); - - return { - nfts: cached.data, - totalCount: calculatedTotalCount, - hasNextPage: page * pageSize < calculatedTotalCount, - hasPrevPage: page > 1 - }; - } - - // If not in cache, fetch from API with a small cooldown to prevent rate limiting - try { - console.log(`[API Call] Fetching ${contractAddress} page ${page} - reducing API usage`); - - // Add a small random delay to prevent rate limiting (50-150ms) - await new Promise(resolve => setTimeout(resolve, 50 + Math.random() * 100)); - - const result = await fetchCollectionNFTs( - contractAddress, - chainId, - { - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - } - ); - - // Enhance with chain info - const nftsWithChain = result.nfts.map(nft => ({ - ...nft, - chain: chainId - })); - - // If this collection is one of the large ones with known pagination issues, - // ensure we have a reasonable totalCount for pagination - let calculatedTotalCount = result.totalCount; - - // For some collections, ensure we have at least the minimum page count - const isSpecialCollection = [ - '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d', // BAYC - '0x60e4d786628fea6478f785a6d7e704777c86a7c6', // MAYC - // Add other collections with pagination issues here - ].includes(contractAddress.toLowerCase()); - - if (isSpecialCollection) { - // Ensure we have at least 100 items for these collections to show pagination - calculatedTotalCount = Math.max(calculatedTotalCount, 100); - } - - // If we got a full page of results, assume there's at least one more page - if (nftsWithChain.length === pageSize && calculatedTotalCount <= page * pageSize) { - calculatedTotalCount = page * pageSize + 1; - } - - console.log(`[Pagination] API data: Page ${page}, Items: ${nftsWithChain.length}, Adjusted Total: ${calculatedTotalCount}`); - - // Save to cache with longer TTL for popular collections - const cacheTTL = isSpecialCollection ? 60 * 60 * 1000 : 30 * 60 * 1000; // 1 hour for popular vs 30 min - pagedCache.set(cacheKey, nftsWithChain, calculatedTotalCount, cacheTTL); - - // Prefetch adjacent pages in background with delay to ensure current page loads first - setTimeout(() => { - pagedCache.prefetchAdjacentPages( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - }, 1000); - - return { - nfts: nftsWithChain, - totalCount: calculatedTotalCount, - hasNextPage: page * pageSize < calculatedTotalCount, - hasPrevPage: page > 1 - }; - } catch (error) { - console.error('Error fetching paginated NFTs:', error); - toast.error('Failed to load NFTs. Please try again.'); - - return { - nfts: [], - totalCount: 0, - hasNextPage: false, - hasPrevPage: page > 1 - }; - } -} - -/** - * Clear pagination cache for a specific collection or all collections - */ -export function clearPaginationCache(contractAddress?: string, chainId?: string) { - if (contractAddress && chainId) { - pagedCache.clear(`${contractAddress.toLowerCase()}-${chainId}`); - } else { - pagedCache.clear(); - } -} - -/** - * Throttled API call for collections to avoid rate limiting - */ -const pendingApiCalls = new Map>(); - -export async function throttledApiCall( - key: string, - apiFunction: () => Promise, - expiryMs: number = 10000 // Default 10s -): Promise { - // Check if there's already a pending call for this key - if (pendingApiCalls.has(key)) { - return pendingApiCalls.get(key)!; - } - - // Create a new promise for this call - const promise = new Promise((resolve, reject) => { - setTimeout(async () => { - try { - const result = await apiFunction(); - resolve(result); - } catch (error) { - reject(error); - } finally { - // Auto-clean the pendingApiCalls map after expiry - setTimeout(() => { - pendingApiCalls.delete(key); - }, expiryMs); - } - }, Math.random() * 100); // Small random delay to prevent concurrent calls - }); - - // Store the promise in the map - pendingApiCalls.set(key, promise); - - return promise; -} From b987ef3240ec6952dbc25eaa37e36dad0d4ecdc5 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 13:29:25 +0700 Subject: [PATCH 06/17] error new --- components/NFT/AnimatedNFTCard.tsx | 58 +- components/NFT/FeaturedSpotlight.tsx | 483 +++-- components/NFT/PaginatedNFTGrid.tsx | 476 +++-- components/NFT/VirtualizedNFTGrid.tsx | 678 ++++--- lib/api/nftService.ts | 2400 +++++++++++++++++++++---- 5 files changed, 2964 insertions(+), 1131 deletions(-) diff --git a/components/NFT/AnimatedNFTCard.tsx b/components/NFT/AnimatedNFTCard.tsx index 8853ddc..19b6f99 100644 --- a/components/NFT/AnimatedNFTCard.tsx +++ b/components/NFT/AnimatedNFTCard.tsx @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from 'react'; import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'; -import { Info, ExternalLink } from 'lucide-react'; +import { ExternalLink } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { getChainColorTheme } from '@/lib/api/chainProviders'; import LazyImage from './LazyImage'; @@ -28,7 +28,6 @@ interface AnimatedNFTCardProps { export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized = false }: AnimatedNFTCardProps) { const [imageLoaded, setImageLoaded] = useState(false); - const [blurAmount, setBlurAmount] = useState(20); // For progressive loading blur effect const cardRef = useRef(null); // Chain-specific styling @@ -60,42 +59,30 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized const shineOpacity = useMotionValue(0); const shinePosition = useTransform(x, [-100, 100], ["45% 45%", "55% 55%"]); + // Update shine opacity based on mouse position // Update shine opacity based on mouse position useEffect(() => { - const unsubscribeX = shineX.onChange(latestX => { + function updateShineOpacity() { + const latestX = shineX.get(); const latestY = shineY.get(); shineOpacity.set((latestX + latestY) / 8); - }); + } - const unsubscribeY = shineY.onChange(latestY => { - const latestX = shineX.get(); - shineOpacity.set((latestX + latestY) / 8); - }); + const unsubscribeX = shineX.on("change", updateShineOpacity); + const unsubscribeY = shineY.on("change", updateShineOpacity); return () => { unsubscribeX(); unsubscribeY(); }; }, [shineX, shineY, shineOpacity]); - // Progressive loading animation useEffect(() => { - if (imageLoaded) { - const timer = setInterval(() => { - setBlurAmount((prev) => { - if (prev <= 0) { - clearInterval(timer); - return 0; - } - return prev - 4; - }); - }, 50); - - return () => clearInterval(timer); - } + // Image loading effect is now handled by LazyImage component + // No need to manipulate blurAmount }, [imageLoaded]); - function handleMouseMove(e: React.MouseEvent) { + function handleMouseMove(e: React.MouseEvent) { if (cardRef.current) { const rect = cardRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; @@ -248,18 +235,18 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized {networkBadge.name} +
    + +
    +
    -
    - - {/* Card Content with Shine Effect */} -
    - {/* NFT Image with progressive loading */}
    @@ -306,8 +293,7 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized ))}
    -
    - + ); } diff --git a/components/NFT/FeaturedSpotlight.tsx b/components/NFT/FeaturedSpotlight.tsx index 4ca804d..494a4e6 100644 --- a/components/NFT/FeaturedSpotlight.tsx +++ b/components/NFT/FeaturedSpotlight.tsx @@ -1,238 +1,325 @@ import { useState, useEffect } from 'react'; -import Image from 'next/image'; import Link from 'next/link'; -import { motion, AnimatePresence } from 'framer-motion'; -import { Sparkles, ArrowRight, ExternalLink, Zap } from 'lucide-react'; +import Image from 'next/image'; +import { motion } from 'framer-motion'; +import { useRouter } from 'next/navigation'; +import { Sparkles, ArrowRight, ExternalLink, Info, Tag, Clock, Users } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; -import { getChainColorTheme } from '@/lib/api/chainProviders'; +import { Card, CardContent } from '@/components/ui/card'; +import { useToast } from '@/hooks/use-toast'; -interface NFTSpotlight { +// Define type for featured NFT item +interface FeaturedNFT { id: string; name: string; + contractAddress: string; + tokenId: string; description: string; - image: string; + imageUrl: string; chain: string; - contractAddress: string; - artist?: string; + price?: string; + seller?: string; + timeLeft?: string; + collection?: { + name: string; + imageUrl: string; + verified: boolean; + }; + rarity?: string; + rarityRank?: number; } -const spotlights: NFTSpotlight[] = [ - { - id: 'cryptopath-genesis', - name: 'CryptoPath Genesis Collection', - description: 'Be part of the CryptoPath revolution with our limited Genesis NFT collection. Exclusive benefits, governance rights, and early access to new features await the owners!', - image: '/Img/logo/logo3.svg', // Replace with actual path - chain: '0x61', // BNB Testnet - contractAddress: '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551', - artist: 'CryptoPath Team' - }, - { - id: 'pancake-squad', - name: 'Pancake Squad', - description: 'A collection of 10,000 unique, cute, and sometimes fierce PancakeSwap bunny NFTs that serve as your membership to the Pancake Squad.', - image: 'https://i.seadn.io/s/primary-drops/0xc291cc12018a6fcf423699bce985ded86bac47cb/33406336:about:media:6f541d5a-5309-41ad-8f73-74f092ed1314.png?auto=format&dpr=1&w=1200', - chain: '0x38', // BNB Chain - contractAddress: '0xdcbcf766dcd33a7a8abe6b01a8b0e44a006c4ac1', - artist: 'PancakeSwap' - }, - { - id: 'bayc', - name: 'Bored Ape Yacht Club', - description: 'The Bored Ape Yacht Club is a collection of 10,000 unique Bored Ape NFTs, unique digital collectibles living on the Ethereum blockchain.', - image: 'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?auto=format&dpr=1&w=1000', - chain: '0x1', // Ethereum - contractAddress: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d', - artist: 'Yuga Labs' - } -]; - export default function FeaturedSpotlight() { + const router = useRouter(); + const { toast } = useToast(); + const [featuredNFTs, setFeaturedNFTs] = useState([]); const [currentIndex, setCurrentIndex] = useState(0); - const [isAnimating, setIsAnimating] = useState(false); - const spotlight = spotlights[currentIndex]; - const chainTheme = getChainColorTheme(spotlight.chain); + const [isLoading, setIsLoading] = useState(true); - // Auto-rotate spotlights + // Load featured NFTs (in a real app this would come from an API) useEffect(() => { - const intervalId = setInterval(() => { - if (!isAnimating) { - setIsAnimating(true); - setTimeout(() => { - setCurrentIndex((prev) => (prev + 1) % spotlights.length); - setIsAnimating(false); - }, 500); - } - }, 8000); + // Simulating API call with a timeout + const loadFeaturedNFTs = async () => { + setIsLoading(true); + // In a real app, you would fetch this data from your backend + const mockFeaturedNFTs: FeaturedNFT[] = [ + { + id: 'featured-1', + name: 'CryptoPath Genesis #42', + contractAddress: '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551', + tokenId: '42', + description: 'Special edition CryptoPath Genesis NFT with exclusive utility for platform governance.', + imageUrl: '/Img/nft/sample-1.jpg', + chain: '0x61', // BNB Testnet + price: '10 BNB', + seller: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e', + timeLeft: '2 days', + collection: { + name: 'CryptoPath Genesis', + imageUrl: '/Img/logo/cryptopath.png', + verified: true + }, + rarity: 'Legendary', + rarityRank: 1 + }, + { + id: 'featured-2', + name: 'Azuki #9605', + contractAddress: '0xED5AF388653567Af2F388E6224dC7C4b3241C544', + tokenId: '9605', + description: 'Azuki starts with a collection of 10,000 avatars that give you membership access to The Garden.', + imageUrl: '/Img/nft/sample-2.jpg', + chain: '0x1', // Ethereum Mainnet + price: '12.3 ETH', + seller: '0x3bE0271C63cE5ED0B5Fc10D2693f06c96ED78Dc1', + timeLeft: '5 hours', + collection: { + name: 'Azuki', + imageUrl: 'https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?auto=format&dpr=1&w=1000', + verified: true + }, + rarity: 'Epic', + rarityRank: 245 + }, + { + id: 'featured-3', + name: 'Bored Ape Yacht Club #7495', + contractAddress: '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D', + tokenId: '7495', + description: 'The Bored Ape Yacht Club is a collection of 10,000 unique Bored Ape NFTs.', + imageUrl: '/Img/nft/sample-3.jpg', + chain: '0x1', // Ethereum Mainnet + price: '68.5 ETH', + seller: '0x7Fe37118c2D1DB4A67A0Ee8C8510BB2D7696fD63', + timeLeft: '12 hours', + collection: { + name: 'Bored Ape Yacht Club', + imageUrl: 'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?auto=format&dpr=1&w=1000', + verified: true + }, + rarity: 'Mythic', + rarityRank: 123 + } + ]; + + // Wait a bit to simulate network latency + await new Promise(resolve => setTimeout(resolve, 500)); + + setFeaturedNFTs(mockFeaturedNFTs); + setIsLoading(false); + }; + + loadFeaturedNFTs(); - return () => clearInterval(intervalId); - }, [isAnimating]); + // Auto-rotate featured NFTs every 7 seconds + const interval = setInterval(() => { + setCurrentIndex(prevIndex => + prevIndex === featuredNFTs.length - 1 ? 0 : prevIndex + 1 + ); + }, 7000); + + return () => clearInterval(interval); + }, []); - // Network name mapping - const getNetworkName = (chainId: string) => { - const networks: Record = { - '0x1': 'Ethereum', - '0xaa36a7': 'Sepolia', - '0x38': 'BNB Chain', - '0x61': 'BNB Testnet' - }; - return networks[chainId] || 'Unknown Network'; + // Handle click on a featured NFT + const handleNFTClick = (nft: FeaturedNFT) => { + router.push(`/NFT/collection/${nft.contractAddress}?network=${nft.chain}`); }; - const handleNext = () => { - if (!isAnimating) { - setIsAnimating(true); - setTimeout(() => { - setCurrentIndex((prev) => (prev + 1) % spotlights.length); - setIsAnimating(false); - }, 500); - } - }; + // No items to display + if (featuredNFTs.length === 0 && !isLoading) { + return null; + } + + // Current featured NFT + const currentNFT = featuredNFTs[currentIndex]; return ( -
    - {/* Background blur gradient */} -
    +
    + {/* Title */} +
    + +

    Featured NFTs

    +
    - {/* Featured image */} - + {isLoading ? ( + // Loading skeleton +
    + ) : ( + // Spotlight card - {spotlight.name} - -     - - {/* Content overlay */} -
    -
    -
    - - + {/* Background image with overlay */} +
    +
    + - {/* Network Badge */} - -
    - Chain + +
    + + {/* NFT Content Grid */} +
    + {/* Left column - NFT details */} +
    + {/* Collection info */} +
    +
    + {currentNFT.collection?.name - {getNetworkName(spotlight.chain)}
    - - - {/* Title with sparkle effect */} -
    -

    - {spotlight.name} -

    - - - +
    + {currentNFT.collection?.name} + {currentNFT.collection?.verified && ( + + + + + + )} +
    - {/* Artist */} - {spotlight.artist && ( -
    - by - {spotlight.artist} -
    - )} + {/* NFT name */} +

    {currentNFT.name}

    {/* Description */} -

    - {spotlight.description} -

    +

    {currentNFT.description}

    - {/* CTA Buttons */} -
    - - - + {/* Price & details */} +
    + {currentNFT.price && ( +
    + + {currentNFT.price} +
    + )} + + {currentNFT.timeLeft && ( +
    + + {currentNFT.timeLeft} +
    + )} -
    + + {/* Buttons */} +
    + + + + +
    - - +
    + + {/* Right column - NFT image */} +
    + + {currentNFT.name} + + {/* Rarity badge */} + {currentNFT.rarity && ( +
    + + {currentNFT.rarity} + +
    + )} +     + + {/* Shadow element */} +
    +
    +
    -
    -
    - - {/* Navigation dots */} -
    - {spotlights.map((_, index) => ( -
    - - {/* Next button */} - + + {/* Navigation dots */} + {featuredNFTs.length > 1 && ( +
    + {featuredNFTs.map((_, i) => ( +
    + )} +     + )}
    ); } diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index fe96a58..241feeb 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -1,11 +1,10 @@ -import { useState, useEffect } from 'react'; +import { useEffect, useState, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -import { Loader2 } from 'lucide-react'; -import { fetchCollectionNFTs } from '@/lib/api/alchemyNFTApi'; -import { fetchPaginatedNFTs } from '@/lib/api/nftService'; -import { getChainColorTheme } from '@/lib/api/chainProviders'; -import { CollectionNFT } from '@/lib/api/alchemyNFTApi'; +import { Loader2, ArrowLeft, ArrowRight, RefreshCw } from 'lucide-react'; import AnimatedNFTCard from './AnimatedNFTCard'; +import { Button } from '@/components/ui/button'; +import { fetchPaginatedNFTs, clearCollectionCache } from '@/lib/api/nftService'; +import { getChainColorTheme } from '@/lib/api/chainProviders'; import { Pagination, PaginationContent, @@ -14,17 +13,33 @@ import { PaginationNext, PaginationPrevious, } from '@/components/ui/pagination'; +import { useToast } from '@/hooks/use-toast'; +import { Skeleton } from '@/components/ui/skeleton'; + +interface NFT { + id: string; + tokenId: string; + name: string; + description?: string; + imageUrl: string; + chain: string; + attributes?: Array<{ + trait_type: string; + value: string; + }>; +} interface PaginatedNFTGridProps { contractAddress: string; chainId: string; - sortBy: string; - sortDirection: 'asc' | 'desc'; - searchQuery: string; - attributes: Record; - viewMode: 'grid' | 'list'; - onNFTClick: (nft: CollectionNFT) => void; + searchQuery?: string; + sortBy?: string; + sortDirection?: 'asc' | 'desc'; + attributes?: Record; + viewMode?: 'grid' | 'list'; + onNFTClick?: (nft: NFT) => void; itemsPerPage?: number; + maxDisplayedPages?: number; defaultPage?: number; onPageChange?: (page: number) => void; } @@ -32,40 +47,47 @@ interface PaginatedNFTGridProps { export default function PaginatedNFTGrid({ contractAddress, chainId, - sortBy, - sortDirection, - searchQuery, - attributes, - viewMode, + searchQuery = '', + sortBy = 'tokenId', + sortDirection = 'asc', + attributes = {}, + viewMode = 'grid', onNFTClick, itemsPerPage = 20, + maxDisplayedPages = 5, defaultPage = 1, onPageChange }: PaginatedNFTGridProps) { - const [nfts, setNfts] = useState([]); - const [loading, setLoading] = useState(true); + // State + const [nfts, setNfts] = useState([]); const [totalCount, setTotalCount] = useState(0); const [currentPage, setCurrentPage] = useState(defaultPage); - const [totalPages, setTotalPages] = useState(1); - const [progress, setProgress] = useState(0); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + const [isRefreshing, setIsRefreshing] = useState(false); + + // Hooks + const { toast } = useToast(); + + // Calculate total pages + const totalPages = Math.max(1, Math.ceil(totalCount / itemsPerPage)); // Chain theme for styling const chainTheme = getChainColorTheme(chainId); - useEffect(() => { - loadNFTs(); - }, [contractAddress, chainId, currentPage, sortBy, sortDirection, searchQuery, JSON.stringify(attributes)]); - - async function loadNFTs() { - setLoading(true); - setProgress(10); + // Load NFTs for the current page + const loadNFTs = useCallback(async (page: number) => { + if (page < 1) page = 1; + if (page > totalPages && totalPages > 0) page = totalPages; + + setIsLoading(true); + setError(null); try { - // Use the cached and optimized fetching function const result = await fetchPaginatedNFTs( contractAddress, chainId, - currentPage, + page, itemsPerPage, sortBy, sortDirection, @@ -75,98 +97,127 @@ export default function PaginatedNFTGrid({ setNfts(result.nfts); setTotalCount(result.totalCount); + setIsLoading(false); - // Calculate total pages - const pages = Math.max(1, Math.ceil(result.totalCount / itemsPerPage)); - setTotalPages(pages); - - setProgress(100); + // Call onPageChange callback if provided + if (onPageChange) { + onPageChange(page); + } } catch (error) { - console.error("Error loading NFTs:", error); - setNfts([]); - setTotalCount(0); - setTotalPages(1); - } finally { - setLoading(false); + console.error('Error loading NFTs:', error); + setError('Failed to load NFTs. Please try again.'); + setIsLoading(false); + toast({ + title: 'Error', + description: 'Failed to load NFTs. Please try again.', + variant: 'destructive', + }); } - } + }, [ + contractAddress, + chainId, + itemsPerPage, + sortBy, + sortDirection, + searchQuery, + attributes, + totalPages, + onPageChange, + toast + ]); - const handlePageChange = (page: number) => { + // Initial load and when dependencies change + useEffect(() => { + loadNFTs(currentPage); + }, [ + contractAddress, + chainId, + searchQuery, + sortBy, + sortDirection, + JSON.stringify(attributes), + itemsPerPage, + currentPage, + loadNFTs + ]); + + // Handle page change + const handlePageChange = async (page: number) => { + if (page === currentPage || page < 1 || page > totalPages) return; setCurrentPage(page); - if (onPageChange) { - onPageChange(page); - } }; - // Simple pagination controls helper - const getPaginationItems = () => { - const items = []; - - // Always show first page - items.push(1); + // Handle NFT click + const handleNFTClick = (nft: NFT) => { + if (onNFTClick) onNFTClick(nft); + }; + + // Refresh data - useful if data is stale + const handleRefresh = async () => { + setIsRefreshing(true); - // Calculate range around current page - const startPage = Math.max(2, currentPage - 1); - const endPage = Math.min(totalPages - 1, currentPage + 1); + // Clear collection cache and reload + clearCollectionCache(contractAddress, chainId); - // Add ellipsis after first page if needed - if (startPage > 2) { - items.push('ellipsis1'); - } + await loadNFTs(currentPage); + setIsRefreshing(false); - // Add pages around current page - for (let i = startPage; i <= endPage; i++) { - items.push(i); - } + toast({ + title: 'Refreshed', + description: 'NFT data has been refreshed.', + }); + }; + + // Generate array of pages to display + const getPageNumbers = () => { + const totalPagesToShow = Math.min(maxDisplayedPages, totalPages); + const halfPagesToShow = Math.floor(totalPagesToShow / 2); - // Add ellipsis before last page if needed - if (endPage < totalPages - 1) { - items.push('ellipsis2'); - } + let startPage = Math.max(1, currentPage - halfPagesToShow); + const endPage = Math.min(totalPages, startPage + totalPagesToShow - 1); - // Add last page if more than one page - if (totalPages > 1) { - items.push(totalPages); + // Adjust startPage if we're near the end + if (endPage - startPage + 1 < totalPagesToShow) { + startPage = Math.max(1, endPage - totalPagesToShow + 1); } - return items; + return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); }; + // Pagination pages to show + const pageNumbers = getPageNumbers(); + return (
    - {/* Loading indicator or NFT grid */} - {loading ? ( -
    - -
    Loading NFTs...
    - - {/* Progress bar */} -
    -
    -
    -
    - ) : ( - - - {nfts.length === 0 ? ( -
    -

    No NFTs found for this collection.

    -

    Try adjusting your filters or search query.

    + {/* NFT Grid */} +
    + {isLoading ? ( + // Loading state with skeleton placeholders +
    + {Array.from({ length: itemsPerPage }).map((_, i) => ( +
    + +
    + + +
    - ) : ( + ))} +
    + ) : ( + // Loaded state with NFTs + <> + {nfts.length > 0 ? ( - + {nfts.map((nft, index) => ( - onNFTClick(nft)} - /> + + handleNFTClick(nft)} + index={index} + /> + ))} + ) : ( + // Empty state +
    +

    + {searchQuery || Object.keys(attributes).length > 0 + ? 'No NFTs match your current filters. Try adjusting your search or filters.' + : 'No NFTs found in this collection.'} +

    +
    )} - - + + )} +
    + + {/* Error Message */} + {error && ( +
    +

    {error}

    + +
    )} - {/* Pagination controls */} + {/* Pagination Controls */} {totalPages > 1 && ( - - - - { - e.preventDefault(); - if (currentPage > 1) { - handlePageChange(currentPage - 1); - } - }} - className={ - currentPage === 1 - ? 'pointer-events-none opacity-50' - : '' - } - /> - +
    +
    + Showing page {currentPage} of {totalPages} + {!isLoading && ( + + ({((currentPage - 1) * itemsPerPage) + 1} - {Math.min(currentPage * itemsPerPage, totalCount)} of {totalCount}) + + )} +
    + +
    + + + - {getPaginationItems().map((page, i) => { - if (typeof page === 'string') { - // Render ellipsis - return ( + + + + handlePageChange(currentPage - 1)} + className={`cursor-pointer ${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''}`} + style={{ + color: chainTheme.primary + }} + /> + + + {currentPage > 3 && totalPages > maxDisplayedPages && ( + <> + + handlePageChange(1)} + className="cursor-pointer" + style={{ + color: 1 === currentPage ? chainTheme.primary : undefined, + borderColor: 1 === currentPage ? chainTheme.primary : undefined + }} + > + 1 + + + {currentPage > 4 && ( + + ... + + )} + + )} + + {pageNumbers.map(page => ( - ... + handlePageChange(page)} + isActive={page === currentPage} + className="cursor-pointer" + style={{ + color: page === currentPage ? chainTheme.primary : undefined, + borderColor: page === currentPage ? chainTheme.primary : undefined, + backgroundColor: page === currentPage ? `${chainTheme.backgroundClass}` : undefined + }} + > + {page} + - ); - } - - // Render page number - return ( - - { - e.preventDefault(); - handlePageChange(page); + ))} + + {currentPage < totalPages - 2 && totalPages > maxDisplayedPages && ( + <> + {currentPage < totalPages - 3 && ( + + ... + + )} + + handlePageChange(totalPages)} + className="cursor-pointer" + style={{ + color: totalPages === currentPage ? chainTheme.primary : undefined, + borderColor: totalPages === currentPage ? chainTheme.primary : undefined + }} + > + {totalPages} + + + + )} + + + handlePageChange(currentPage + 1)} + className={`cursor-pointer ${currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''}`} + style={{ + color: chainTheme.primary }} - isActive={page === currentPage} - style={ - page === currentPage - ? { backgroundColor: chainTheme.primary, color: 'black' } - : undefined - } - > - {page} - + /> - ); - })} - - - { - e.preventDefault(); - if (currentPage < totalPages) { - handlePageChange(currentPage + 1); - } - }} - className={ - currentPage === totalPages - ? 'pointer-events-none opacity-50' - : '' - } - /> - - - - )} - - {/* Total count indicator */} - {totalCount > 0 && ( -
    - Showing page {currentPage} of {totalPages} ({totalCount} total NFTs) + + +
    )}
    diff --git a/components/NFT/VirtualizedNFTGrid.tsx b/components/NFT/VirtualizedNFTGrid.tsx index 1e12206..ea263a7 100644 --- a/components/NFT/VirtualizedNFTGrid.tsx +++ b/components/NFT/VirtualizedNFTGrid.tsx @@ -1,179 +1,198 @@ -import { useRef, useState, useEffect, useCallback, useMemo } from 'react'; -import { useInView } from 'react-intersection-observer'; -import { motion, AnimatePresence } from 'framer-motion'; -import { Loader2, Search, AlertCircle } from 'lucide-react'; +import { useState, useEffect, useRef, useCallback } from 'react'; import { useVirtualizer } from '@tanstack/react-virtual'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Loader2 } from 'lucide-react'; import AnimatedNFTCard from './AnimatedNFTCard'; -import { - fetchNFTsWithOptimizedCursor, +import { + fetchNFTsWithOptimizedCursor, fetchNFTsWithProgressiveLoading, - estimateCollectionMemoryUsage + estimateCollectionMemoryUsage, + clearSpecificCollectionCache } from '@/lib/api/nftService'; import { getChainColorTheme } from '@/lib/api/chainProviders'; -import { Progress } from '@/components/ui/progress'; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; -import { Button } from '@/components/ui/button'; +import { useToast } from '@/hooks/use-toast'; + +interface NFT { + id: string; + tokenId: string; + name: string; + description?: string; + imageUrl: string; + chain: string; + attributes?: Array<{ + trait_type: string; + value: string; + }>; + isPlaceholder?: boolean; +} interface VirtualizedNFTGridProps { contractAddress: string; chainId: string; + searchQuery?: string; sortBy?: string; sortDirection?: 'asc' | 'desc'; - searchQuery?: string; attributes?: Record; viewMode?: 'grid' | 'list'; - onNFTClick?: (nft: any) => void; - itemsPerPage?: number; - maxItems?: number; // Optional limit to total items + onNFTClick?: (nft: NFT) => void; + progressiveLoading?: boolean; + batchSize?: number; + estimatedRowHeight?: number; + onLoadingComplete?: () => void; } export default function VirtualizedNFTGrid({ contractAddress, chainId, + searchQuery = '', sortBy = 'tokenId', sortDirection = 'asc', - searchQuery = '', attributes = {}, viewMode = 'grid', onNFTClick, - itemsPerPage = 24, - maxItems + progressiveLoading = true, + batchSize = 50, + estimatedRowHeight = 300, + onLoadingComplete }: VirtualizedNFTGridProps) { - // State for different loading approaches - const [nfts, setNfts] = useState([]); + // State for grid + const [nfts, setNfts] = useState([]); const [totalCount, setTotalCount] = useState(0); - const [loadedCount, setLoadedCount] = useState(0); - const [progress, setProgress] = useState(0); - const [loading, setLoading] = useState(true); - const [initialLoading, setInitialLoading] = useState(true); - const [error, setError] = useState(null); - const [nextCursor, setNextCursor] = useState(undefined); - const [hasMore, setHasMore] = useState(true); - const [useProgressiveLoading, setUseProgressiveLoading] = useState(false); - const [progressiveLoadingStarted, setProgressiveLoadingStarted] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [cursor, setCursor] = useState(undefined); + const [hasNextPage, setHasNextPage] = useState(true); + const [loadingError, setLoadingError] = useState(null); + const [loadingProgress, setLoadingProgress] = useState(0); + const [windowWidth, setWindowWidth] = useState(0); - // Refs for optimization - const loadingMoreRef = useRef(false); - const gridRef = useRef(null); + // Refs const parentRef = useRef(null); - const containerSize = useRef({ width: 0, height: 0 }); + const loadMoreRef = useRef(null); + const gridContentRef = useRef(null); + const { toast } = useToast(); - // Get chain theme for styling + // Chain theme for styling const chainTheme = getChainColorTheme(chainId); - // Intersection observer for infinite loading - const { ref: loadMoreRef, inView } = useInView({ - threshold: 0, - rootMargin: '400px 0px', // Load more before user reaches bottom - }); - - // Calculate grid dimensions - const calculateGridDimensions = useCallback(() => { - if (!parentRef.current) return; - - const container = parentRef.current; - const containerWidth = container.clientWidth; - - let columns: number; - if (viewMode === 'list') { - columns = 1; - } else { - // Responsive column count - if (containerWidth >= 1280) columns = 4; - else if (containerWidth >= 768) columns = 3; - else if (containerWidth >= 640) columns = 2; - else columns = 1; - } + // Calculate columns based on view mode and window width + const getColumnCount = useCallback(() => { + if (!windowWidth) return viewMode === 'grid' ? 4 : 2; - // Estimate item width and height - const itemWidth = Math.floor(containerWidth / columns); - const itemHeight = viewMode === 'list' ? 120 : itemWidth; // List items are shorter + if (viewMode === 'list') return 1; + if (windowWidth < 640) return 1; + if (windowWidth < 768) return 2; + if (windowWidth < 1024) return 3; + return 4; + }, [viewMode, windowWidth]); + + // Calculate window width on mount and resize + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; - return { columns, itemWidth, itemHeight }; - }, [viewMode]); - - // Virtualization setup for grid layout - const dimensions = useMemo(() => calculateGridDimensions(), [calculateGridDimensions]); + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + // Calculate rows for virtualizer based on items and columns + const columnCount = getColumnCount(); + const rowCount = Math.ceil(nfts.length / columnCount); - // Grid virtualizer + // Set up virtualizer const rowVirtualizer = useVirtualizer({ - count: Math.ceil(nfts.length / (dimensions?.columns || 1)), + count: hasNextPage ? rowCount + 1 : rowCount, // +1 for loading more row getScrollElement: () => parentRef.current, - estimateSize: useCallback(() => dimensions?.itemHeight || 300, [dimensions]), + estimateSize: () => estimatedRowHeight, overscan: 5, }); - // Decide whether to use progressive loading based on collection size - useEffect(() => { - if (totalCount > 500 && !progressiveLoadingStarted && !useProgressiveLoading) { - // For large collections, suggest progressive loading - const shouldUseProgressive = totalCount > 2000; - setUseProgressiveLoading(shouldUseProgressive); - } - }, [totalCount, progressiveLoadingStarted, useProgressiveLoading]); - - // Handle window resize + // Load NFTs using the appropriate loading strategy useEffect(() => { - const handleResize = () => { - if (parentRef.current) { - containerSize.current = { - width: parentRef.current.clientWidth, - height: parentRef.current.clientHeight - }; + setIsLoading(true); + setLoadingError(null); + setLoadingProgress(0); + + // Either use progressive loading or cursor-based loading + const loadNFTs = async () => { + try { + if (progressiveLoading) { + // Progressive loading loads all NFTs in batches + const result = await fetchNFTsWithProgressiveLoading( + contractAddress, + chainId, + { + batchSize, + initialPageSize: batchSize, + sortBy, + sortDirection, + searchQuery, + attributes, + onProgress: (loaded: number, total: number) => { + setLoadingProgress(Math.round((loaded / total) * 100)); + } + } + ); + + setNfts(result.nfts); + setTotalCount(result.totalCount); + setHasNextPage(result.hasMoreBatches); + setLoadingProgress(result.progress); + } else { + // First load with cursor-based pagination + const result = await fetchNFTsWithOptimizedCursor( + contractAddress, + chainId, + '1', // Start with first page + batchSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + setNfts(result.nfts); + setTotalCount(result.totalCount); + setCursor(result.nextCursor); + setHasNextPage(!!result.nextCursor); + setLoadingProgress(result.progress); + } + + setIsLoading(false); + if (onLoadingComplete) onLoadingComplete(); + } catch (error) { + console.error('Error loading NFTs:', error); + setLoadingError('Failed to load NFTs. Please try again.'); + setIsLoading(false); + toast({ + title: 'Error', + description: 'Failed to load NFTs. Please try again.', + variant: 'destructive', + }); } }; - handleResize(); - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); - - // Load initial data with optimized cursor approach - const loadInitialData = useCallback(async () => { - setInitialLoading(true); - setLoading(true); - setError(null); + loadNFTs(); - try { - const result = await fetchNFTsWithOptimizedCursor( - contractAddress, - chainId, - undefined, // No cursor for initial load - itemsPerPage, - sortBy, - sortDirection, - searchQuery, - attributes - ); - - setNfts(result.nfts); - setTotalCount(result.totalCount); - setLoadedCount(result.loadedCount); - setProgress(result.progress); - setNextCursor(result.nextCursor); - setHasMore(!!result.nextCursor); - } catch (err) { - setError('Failed to load NFTs. Please try again.'); - console.error('Error loading NFTs:', err); - } finally { - setInitialLoading(false); - setLoading(false); - } - }, [contractAddress, chainId, itemsPerPage, sortBy, sortDirection, searchQuery, attributes]); + // Cleanup function to abort any in-progress loads when filters change + return () => { + // Could implement an abort controller here if needed + }; + }, [contractAddress, chainId, searchQuery, sortBy, sortDirection, JSON.stringify(attributes)]); - // Load more data using the cursor-based approach - const loadMoreData = useCallback(async () => { - if (!nextCursor || loadingMoreRef.current || !hasMore) return; - - loadingMoreRef.current = true; - setLoading(true); + // Load more NFTs when scrolling to the end (for cursor-based pagination) + const loadMoreNFTs = useCallback(async () => { + if (!hasNextPage || isLoading || progressiveLoading) return; try { + setIsLoading(true); + const result = await fetchNFTsWithOptimizedCursor( contractAddress, chainId, - nextCursor, - itemsPerPage, + cursor, + batchSize, sortBy, sortDirection, searchQuery, @@ -181,262 +200,215 @@ export default function VirtualizedNFTGrid({ ); setNfts(prev => [...prev, ...result.nfts]); - setNextCursor(result.nextCursor); - setHasMore(!!result.nextCursor); - setLoadedCount(result.loadedCount); - setProgress(result.progress); - } catch (err) { - console.error('Error loading more NFTs:', err); - } finally { - loadingMoreRef.current = false; - setLoading(false); + setCursor(result.nextCursor); + setHasNextPage(!!result.nextCursor); + setLoadingProgress(result.progress); + setIsLoading(false); + } catch (error) { + console.error('Error loading more NFTs:', error); + setIsLoading(false); + toast({ + title: 'Error', + description: 'Failed to load more NFTs. Please try again.', + variant: 'destructive', + }); } - }, [nextCursor, hasMore, contractAddress, chainId, itemsPerPage, sortBy, sortDirection, searchQuery, attributes]); + }, [ + hasNextPage, + isLoading, + cursor, + contractAddress, + chainId, + batchSize, + sortBy, + sortDirection, + searchQuery, + attributes + ]); - // Start progressive loading to load entire collection - const startProgressiveLoading = useCallback(async () => { - setProgressiveLoadingStarted(true); + // Load more when the virtualized rows include the loading row + useEffect(() => { + const lastRow = rowVirtualizer.range.end; + const totalRows = rowCount; - try { - // Start the progressive loading process - const onProgressUpdate = (loaded: number, total: number) => { - setLoadedCount(loaded); - setProgress(Math.min(100, (loaded / total) * 100)); - }; - - const result = await fetchNFTsWithProgressiveLoading( - contractAddress, - chainId, - { - batchSize: 100, - maxBatches: maxItems ? Math.ceil(maxItems / 100) : 100, - initialPage: 1, - initialPageSize: nfts.length > 0 ? nfts.length : itemsPerPage, - sortBy, - sortDirection, - searchQuery, - attributes, - onProgress: onProgressUpdate - } - ); - - setNfts(result.nfts); - setTotalCount(result.totalCount); - setHasMore(result.hasMoreBatches); - setProgress(result.progress); - } catch (err) { - console.error('Error in progressive loading:', err); + // If we're within 3 rows of the end and there are more items to load, load more + if (!progressiveLoading && !isLoading && hasNextPage && lastRow >= totalRows - 3) { + loadMoreNFTs(); } - }, [contractAddress, chainId, itemsPerPage, maxItems, nfts.length, sortBy, sortDirection, searchQuery, attributes]); + }, [ + rowVirtualizer.range.end, + rowCount, + isLoading, + hasNextPage, + loadMoreNFTs, + progressiveLoading + ]); - // Load initial data on mount and when dependencies change - useEffect(() => { - loadInitialData(); - }, [loadInitialData]); + // Clear cache for this collection (useful for admin or debug) + const handleClearCache = useCallback(() => { + clearSpecificCollectionCache(contractAddress, chainId); + toast({ + title: 'Cache Cleared', + description: 'The cache for this collection has been cleared.', + }); + }, [contractAddress, chainId, toast]); - // Trigger load more when in view - useEffect(() => { - if (inView && !initialLoading && hasMore && !loading && !progressiveLoadingStarted) { - loadMoreData(); - } - }, [inView, initialLoading, hasMore, loadMoreData, loading, progressiveLoadingStarted]); + // Choose the right item height based on view mode + const getItemHeight = () => { + if (viewMode === 'list') return 120; + return windowWidth < 640 ? 280 : 320; + }; - // Apply maximum items limit if specified - useEffect(() => { - if (maxItems && nfts.length > maxItems) { - setNfts(prev => prev.slice(0, maxItems)); - setHasMore(false); - } - }, [nfts, maxItems]); + // Check if NFTs are being filtered + const isFiltered = !!searchQuery || Object.keys(attributes).length > 0; - // Render virtualized grid items - const renderVirtualizedItems = () => { - const { columns = 1 } = dimensions || {}; - - return ( + // Handle NFT click + const handleNFTClick = (nft: NFT) => { + if (onNFTClick) onNFTClick(nft); + }; + + // Get memory usage estimate for debugging + const memoryEstimate = estimateCollectionMemoryUsage(totalCount); + + return ( +
    + {/* Progress indicator for progressive loading */} + {progressiveLoading && loadingProgress < 100 && ( +
    +
    +
    + Loading NFTs: {loadingProgress}% ({nfts.length} of {totalCount}) +
    +
    + Est. memory: {memoryEstimate} +
    +
    +
    +
    +
    +
    + )} + + {/* Main virtualized grid container */}
    + {/* Virtualizer inner container */}
    {rowVirtualizer.getVirtualItems().map(virtualRow => { - const rowStartIndex = virtualRow.index * columns; + const rowIsLoaderRow = hasNextPage && virtualRow.index === rowCount; + + // If this is the loading indicator row + if (rowIsLoaderRow) { + return ( +
    + {isLoading ? ( +
    + + Loading more NFTs... +
    + ) : ( +
    + {hasNextPage ? 'Scroll to load more' : 'No more NFTs to load'} +
    + )} +
    + ); + } + + // Regular row of NFTs + const rowStartIndex = virtualRow.index * columnCount; + const rowEndIndex = Math.min(rowStartIndex + columnCount, nfts.length); + const rowNFTs = nfts.slice(rowStartIndex, rowEndIndex); return (
    - {Array.from({ length: columns }).map((_, colIndex) => { - const nftIndex = rowStartIndex + colIndex; - const nft = nfts[nftIndex]; - - if (!nft) return
    ; - - return ( -
    - onNFTClick && onNFTClick(nft)} - isVirtualized={true} - /> -
    - ); - })} + {rowNFTs.map((nft, idx) => ( +
    + handleNFTClick(nft)} + index={rowStartIndex + idx} + isVirtualized={true} + /> +
    + ))} + + {/* Fill empty cells in last row */} + {rowNFTs.length < columnCount && !isFiltered && ( + Array.from({ length: columnCount - rowNFTs.length }).map((_, idx) => ( +
    + )) + )}
    ); })}
    - ); - }; - - // Empty state - if (!initialLoading && nfts.length === 0) { - return ( -
    - -

    No NFTs found for this collection.

    -

    Try adjusting your search or filters

    -
    - ); - } - - // Loading state for initial load - if (initialLoading) { - return ( -
    - {Array.from({ length: itemsPerPage }).map((_, index) => ( -
    - ))} -
    - ); - } - - // Error state - if (error) { - return ( -
    - -

    {error}

    - -
    - ); - } - - return ( -
    - {/* Progress indicator */} -
    -
    - - Showing {nfts.length} of {totalCount.toLocaleString()} items - - - {/* Memory usage estimate */} - - - - - {estimateCollectionMemoryUsage(totalCount)} - - - -

    Estimated memory usage for full collection

    -     -     -     -
    - - {/* Progressive loading button for large collections */} - {totalCount > 500 && !progressiveLoadingStarted && ( - - )} -
    - {/* Loading progress bar */} - {(loading || progress > 0 && progress < 100) && ( -
    - -
    - {loadedCount.toLocaleString()} loaded - {Math.round(progress)}% -
    -
    - )} - - {/* NFT Grid with virtualization for large collections */} - {nfts.length > 100 ? ( - renderVirtualizedItems() - ) : ( -
    - - {nfts.map((nft, index) => ( - - onNFTClick && onNFTClick(nft)} - /> - - ))} - + {/* Error message */} + {loadingError && ( +
    +

    {loadingError}

    +
    )} - {/* Load more trigger */} - {hasMore && !progressiveLoadingStarted && ( -
    -
    + {/* Empty state */} + {!isLoading && nfts.length === 0 && ( +
    +
    +

    No NFTs Found

    +

    + {isFiltered + ? 'No NFTs match your current filters. Try adjusting your search or filters.' + : 'This collection appears to be empty or still loading.'} +

    + {isFiltered && ( + + )} +
    )}
    diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index c736715..018b5aa 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -1,350 +1,1812 @@ -import { fetchCollectionNFTs, CollectionNFT, CollectionNFTsResponse } from './alchemyNFTApi'; -import { getNFTsByContract, transformMoralisNFT } from './moralisApi'; -import { toast } from 'sonner'; - -// Cache response data to avoid excess API calls -type NFTCacheKey = string; -type NFTCacheValue = { - data: CollectionNFTsResponse; +import { toast } from "sonner"; +import axios from 'axios'; +import { ethers } from 'ethers'; +import { + fetchContractCollectionInfo, + fetchNFTData, + fetchContractNFTs, + NFTMetadata, + POPULAR_NFT_COLLECTIONS +} from './nftContracts'; +import { + CollectionNFT, + CollectionNFTsResponse, + fetchCollectionInfo as alchemyFetchCollectionInfo, + fetchCollectionNFTs as alchemyFetchCollectionNFTs +} from './alchemyNFTApi'; +import { getChainProvider, getExplorerUrl, chainConfigs } from './chainProviders'; + +// Environment variables for API keys +const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY || 'demo'; +const MORALIS_API_KEY = process.env.NEXT_PUBLIC_MORALIS_API_KEY || ''; +const ETHERSCAN_API_KEY = process.env.NEXT_PUBLIC_ETHERSCAN_API_KEY || ''; +const BSCSCAN_API_KEY = process.env.NEXT_PUBLIC_BSCSCAN_API_KEY || ''; + +// Default pagination settings +const DEFAULT_PAGE_SIZE = 20; + +// Cache for collection data to reduce API calls +const collectionsCache = new Map(); +const nftCache = new Map(); +const collectionNFTsCache = new Map(); -// Cache duration is 5 minutes -const CACHE_DURATION = 5 * 60 * 1000; -const nftCache = new Map(); +// Cache TTL in milliseconds (10 minutes) +const COLLECTION_CACHE_TTL = 10 * 60 * 1000; -// API Status tracking to implement circuit breaker pattern -type ApiStatus = { - name: string; - available: boolean; - failureCount: number; - lastFailure: number; - cooldownUntil: number; +/** + * Chain ID to network mapping for API endpoints + */ +const CHAIN_ID_TO_NETWORK: Record = { + '0x1': 'eth-mainnet', + '0x5': 'eth-goerli', + '0xaa36a7': 'eth-sepolia', + '0x89': 'polygon-mainnet', + '0x13881': 'polygon-mumbai', + '0xa': 'optimism-mainnet', + '0xa4b1': 'arbitrum-mainnet', + '0x38': 'bsc-mainnet', + '0x61': 'bsc-testnet', }; -// Circuit breaker configuration -const FAILURE_THRESHOLD = 3; -const COOLDOWN_PERIOD = 60 * 1000; // 1 minute +/** + * Enhanced collection metadata + */ +export interface CollectionMetadata { + id: string; + name: string; + symbol: string; + description: string; + imageUrl: string; + bannerImageUrl?: string; + totalSupply: string; + floorPrice?: string; + volume24h?: string; + chain: string; + contractAddress: string; + verified?: boolean; + category?: string; + featured?: boolean; + standard?: string; + creatorAddress?: string; + owners?: number; + website?: string; + discord?: string; + twitter?: string; +} -// Track status of each API -const apiStatus = { - alchemy: { name: 'Alchemy', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 }, - moralis: { name: 'Moralis', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 }, - etherscan: { name: 'Etherscan', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 }, - bscscan: { name: 'BSCScan', available: true, failureCount: 0, lastFailure: 0, cooldownUntil: 0 } +/** + * API availability tracking to manage fallbacks + */ +interface ApiStatus { + alchemy: boolean; + moralis: boolean; + etherscan: boolean; + bscscan: boolean; + lastChecked: number; +} + +// Track API health to manage fallbacks +const apiStatus: ApiStatus = { + alchemy: true, + moralis: true, + etherscan: true, + bscscan: true, + lastChecked: 0 }; /** - * Register an API failure and potentially trigger circuit breaker + * Check if a chain is BNB/BSC-based + */ +function isBNBChain(chainId: string): boolean { + return chainId === '0x38' || chainId === '0x61'; +} + +/** + * Check if a chain is Ethereum-based + */ +function isEthereumChain(chainId: string): boolean { + return chainId === '0x1' || chainId === '0xaa36a7' || chainId === '0x5'; +} + +/** + * Fetch NFT collection information with caching + */ +export async function fetchCollectionInfo(contractAddress: string, chainId: string): Promise { + // Create a cache key + const cacheKey = `${chainId}-${contractAddress.toLowerCase()}`; + + // Check cache first + if (collectionsCache.has(cacheKey)) { + return collectionsCache.get(cacheKey); + } + + try { + // Try to fetch from blockchain first + const contractInfo = await fetchContractCollectionInfo(contractAddress, chainId); + + let metadata: Partial = { + id: contractAddress.toLowerCase(), + name: contractInfo.name || 'Unknown Collection', + symbol: contractInfo.symbol || '', + description: '', + imageUrl: '/fallback-collection-logo.png', + totalSupply: contractInfo.totalSupply || '0', + chain: chainId, + contractAddress: contractAddress.toLowerCase(), + standard: contractInfo.standard || 'ERC721', + }; + + // Set API fallback order based on chain + if (isBNBChain(chainId)) { + // BNB Chain: Try Moralis -> BSCScan -> Contract fallback + if (apiStatus.moralis) { + try { + const moralisData = await fetchCollectionInfoFromMoralis(contractAddress, chainId); + metadata = { ...metadata, ...moralisData }; + } catch (error) { + console.warn("Moralis metadata fetch failed:", error); + apiStatus.moralis = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (apiStatus.bscscan && (!metadata.description || !metadata.imageUrl)) { + try { + const bscscanData = await fetchCollectionInfoFromBSCScan(contractAddress, chainId); + metadata = { ...metadata, ...bscscanData }; + } catch (error) { + console.warn("BSCScan metadata fetch failed:", error); + apiStatus.bscscan = false; + apiStatus.lastChecked = Date.now(); + } + } + } else { + // Ethereum: Try Alchemy -> Moralis -> Etherscan -> Contract fallback + if (apiStatus.alchemy) { + try { + const alchemyData = await fetchCollectionInfoFromAlchemy(contractAddress, chainId); + metadata = { ...metadata, ...alchemyData }; + } catch (error) { + console.warn("Alchemy metadata fetch failed:", error); + apiStatus.alchemy = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (apiStatus.moralis && (!metadata.description || !metadata.imageUrl)) { + try { + const moralisData = await fetchCollectionInfoFromMoralis(contractAddress, chainId); + metadata = { ...metadata, ...moralisData }; + } catch (error) { + console.warn("Moralis metadata fetch failed:", error); + apiStatus.moralis = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (apiStatus.etherscan && (!metadata.description || !metadata.imageUrl)) { + try { + const etherscanData = await fetchCollectionInfoFromEtherscan(contractAddress, chainId); + metadata = { ...metadata, ...etherscanData }; + } catch (error) { + console.warn("Etherscan metadata fetch failed:", error); + apiStatus.etherscan = false; + apiStatus.lastChecked = Date.now(); + } + } + } + + // Try marketplace data lookup for floor price, etc. + const marketData = await fetchMarketplaceData(contractAddress, chainId); + metadata.floorPrice = marketData?.floorPrice || '0'; + metadata.volume24h = marketData?.volume24h || '0'; + + // Every 5 minutes, reset API status to retry failed providers + if (Date.now() - apiStatus.lastChecked > 5 * 60 * 1000) { + apiStatus.alchemy = true; + apiStatus.moralis = true; + apiStatus.etherscan = true; + apiStatus.bscscan = true; + apiStatus.lastChecked = Date.now(); + } + + // Save to cache + const fullMetadata = metadata as CollectionMetadata; + collectionsCache.set(cacheKey, fullMetadata); + + return fullMetadata; + } catch (error) { + console.error('Error fetching collection information:', error); + toast.error("Failed to load collection info"); + + // Return a minimal fallback + return { + id: contractAddress.toLowerCase(), + name: 'Unknown Collection', + symbol: '', + description: '', + imageUrl: '/fallback-collection-logo.png', + totalSupply: '0', + chain: chainId, + contractAddress: contractAddress.toLowerCase(), + standard: 'ERC721' + }; + } +} + +/** + * Fetch collection info from Alchemy + */ +async function fetchCollectionInfoFromAlchemy(contractAddress: string, chainId: string): Promise> { + const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; + const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getContractMetadata`; + const url = new URL(apiUrl); + url.searchParams.append('contractAddress', contractAddress); + + const response = await fetch(url.toString()); + if (!response.ok) { + throw new Error(`Alchemy API error: ${response.status}`); + } + + const data = await response.json(); + + return { + description: data?.contractMetadata?.openSea?.description || '', + imageUrl: data?.contractMetadata?.openSea?.imageUrl || '', + bannerImageUrl: data?.contractMetadata?.openSea?.bannerImageUrl || '', + verified: data?.contractMetadata?.openSea?.safelistRequestStatus === 'verified', + category: data?.contractMetadata?.openSea?.category || 'Art', + creatorAddress: data?.contractMetadata?.openSea?.creator || '', + website: data?.contractMetadata?.openSea?.externalUrl || '', + discord: data?.contractMetadata?.openSea?.discordUrl || '', + twitter: data?.contractMetadata?.openSea?.twitterUsername + ? `https://twitter.com/${data.contractMetadata.openSea.twitterUsername}` + : '' + }; +} + +/** + * Fetch collection info from Moralis + */ +async function fetchCollectionInfoFromMoralis(contractAddress: string, chainId: string): Promise> { + if (!MORALIS_API_KEY) { + throw new Error('Moralis API key not available'); + } + + // Convert chainId to Moralis format + const moralisChain = isBNBChain(chainId) + ? (chainId === '0x38' ? 'bsc' : 'bsc testnet') + : (chainId === '0x1' ? 'eth' : chainId === '0xaa36a7' ? 'sepolia' : 'goerli'); + + const options = { + method: 'GET', + url: `https://deep-index.moralis.io/api/v2/nft/${contractAddress}/metadata`, + params: {chain: moralisChain}, + headers: { + accept: 'application/json', + 'X-API-Key': MORALIS_API_KEY + } + }; + + const response = await axios.request(options); + + if (response.status !== 200) { + throw new Error(`Moralis API error: ${response.status}`); + } + + const data = response.data; + + return { + name: data?.name || '', + symbol: data?.symbol || '', + totalSupply: data?.synced_at ? data.total_supply?.toString() || '0' : '0', + description: data?.description || '', + imageUrl: data?.token_uri_metadata?.image || data?.metadata?.image || '', + category: data?.token_uri_metadata?.category || 'Art' + }; +} + +/** + * Fetch collection info from Etherscan + */ +async function fetchCollectionInfoFromEtherscan(contractAddress: string, chainId: string): Promise> { + if (!ETHERSCAN_API_KEY) { + throw new Error('Etherscan API key not available'); + } + + // Only applicable for Ethereum chains + if (!isEthereumChain(chainId)) { + throw new Error('Etherscan only supports Ethereum chains'); + } + + // Get appropriate Etherscan domain + let domain = 'api.etherscan.io'; + if (chainId === '0xaa36a7') { + domain = 'api-sepolia.etherscan.io'; + } else if (chainId === '0x5') { + domain = 'api-goerli.etherscan.io'; + } + + // Fetch contract ABI to check if it's verified + const abiUrl = `https://${domain}/api?module=contract&action=getabi&address=${contractAddress}&apikey=${ETHERSCAN_API_KEY}`; + const abiResponse = await fetch(abiUrl); + if (!abiResponse.ok) { + throw new Error(`Etherscan API error: ${abiResponse.status}`); + } + + const abiData = await abiResponse.json(); + const isVerified = abiData.status === '1' && abiData.message === 'OK'; + + // Get contract source code which may contain metadata + const sourceUrl = `https://${domain}/api?module=contract&action=getsourcecode&address=${contractAddress}&apikey=${ETHERSCAN_API_KEY}`; + const sourceResponse = await fetch(sourceUrl); + if (!sourceResponse.ok) { + throw new Error(`Etherscan API error: ${sourceResponse.status}`); + } + + const sourceData = await sourceResponse.json(); + + const result: Partial = { verified: isVerified }; + + if (sourceData.status === '1' && sourceData.result && sourceData.result.length > 0) { + const contractSource = sourceData.result[0]; + + // Try to extract metadata from contract source + try { + if (contractSource.Implementation) { + result.name = contractSource.ContractName || ''; + } + } catch (e) { + console.warn('Error parsing Etherscan metadata:', e); + } + } + + return result; +} + +/** + * Fetch collection info from BSCScan + */ +async function fetchCollectionInfoFromBSCScan(contractAddress: string, chainId: string): Promise> { + if (!BSCSCAN_API_KEY) { + throw new Error('BSCScan API key not available'); + } + + // Only applicable for BNB chains + if (!isBNBChain(chainId)) { + throw new Error('BSCScan only supports BNB Chain'); + } + + // Get appropriate BSCScan domain + const domain = chainId === '0x38' ? 'api.bscscan.com' : 'api-testnet.bscscan.com'; + + // Fetch contract ABI to check if it's verified + const abiUrl = `https://${domain}/api?module=contract&action=getabi&address=${contractAddress}&apikey=${BSCSCAN_API_KEY}`; + const abiResponse = await fetch(abiUrl); + if (!abiResponse.ok) { + throw new Error(`BSCScan API error: ${abiResponse.status}`); + } + + const abiData = await abiResponse.json(); + const isVerified = abiData.status === '1' && abiData.message === 'OK'; + + // Get contract source code which may contain metadata + const sourceUrl = `https://${domain}/api?module=contract&action=getsourcecode&address=${contractAddress}&apikey=${BSCSCAN_API_KEY}`; + const sourceResponse = await fetch(sourceUrl); + if (!sourceResponse.ok) { + throw new Error(`BSCScan API error: ${sourceResponse.status}`); + } + + const sourceData = await sourceResponse.json(); + + const result: Partial = { verified: isVerified }; + + if (sourceData.status === '1' && sourceData.result && sourceData.result.length > 0) { + const contractSource = sourceData.result[0]; + + // Try to extract metadata from contract source + try { + if (contractSource.Implementation) { + result.name = contractSource.ContractName || ''; + } + } catch (e) { + console.warn('Error parsing BSCScan metadata:', e); + } + } + + return result; +} + +/** + * Fetch marketplace data (floor price, volume, etc.) + */ +async function fetchMarketplaceData(contractAddress: string, chainId: string) { + // In a real implementation, this would query APIs like OpenSea, Blur, or LooksRare + // For now, return mock data based on known collections + + // Mock data for popular collections + const popularCollections = POPULAR_NFT_COLLECTIONS[chainId as keyof typeof POPULAR_NFT_COLLECTIONS] || []; + const isPopular = popularCollections.some(c => + c.address.toLowerCase() === contractAddress.toLowerCase() + ); + + if (isPopular) { + // For Ethereum collections + if (chainId === '0x1') { + if (contractAddress.toLowerCase() === '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d') { + // BAYC + return { floorPrice: '30.5', volume24h: '450.23' }; + } else if (contractAddress.toLowerCase() === '0xed5af388653567af2f388e6224dc7c4b3241c544') { + // Azuki + return { floorPrice: '8.75', volume24h: '175.45' }; + } else if (contractAddress.toLowerCase() === '0x60e4d786628fea6478f785a6d7e704777c86a7c6') { + // MAYC + return { floorPrice: '10.2', volume24h: '250.15' }; + } + } + + // For BNB Chain collections + if (chainId === '0x38') { + if (contractAddress.toLowerCase() === '0x0a8901b0e25deb55a87524f0cc164e9644020eba') { + // Pancake Squad + return { floorPrice: '2.5', volume24h: '35.7' }; + } + } + + // For testnet collections + if (chainId === '0x61' && contractAddress.toLowerCase() === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551') { + // CryptoPath Genesis + return { floorPrice: '10.0', volume24h: '150.5' }; + } + } + + // For other collections, generate some random but realistic data + const baseFloorPrice = chainId === '0x1' ? (0.1 + Math.random() * 2) : (0.05 + Math.random()); + const baseVolume = baseFloorPrice * (10 + Math.random() * 100); + + return { + floorPrice: baseFloorPrice.toFixed(3), + volume24h: baseVolume.toFixed(2) + }; +} + +/** + * Fetch NFTs for a specific collection with pagination and filtering + */ +export async function fetchCollectionNFTs( + contractAddress: string, + chainId: string, + options: { + page?: number, + pageSize?: number, + sortBy?: string, + sortDirection?: 'asc' | 'desc', + searchQuery?: string, + attributes?: Record + } = {} +): Promise<{ + nfts: NFTMetadata[], + totalCount: number, + pageKey?: string +}> { + const { + page = 1, + pageSize = 20, + sortBy = 'tokenId', + sortDirection = 'asc', + searchQuery = '', + attributes = {} + } = options; + + // Check if we should use direct contract fetching or API + // For well-known collections or testnet, use direct contract fetching + const useDirectFetching = [ + // Our CryptoPath Genesis on BNB Testnet + '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', + // Some popular testnet or demo collections + '0x7c09282c24c363073e0f30d74c301c312e5533ac' + ].includes(contractAddress.toLowerCase()); + + try { + let nfts: NFTMetadata[] = []; + let totalCount = 0; + let pageKey: string | undefined = undefined; + + if (useDirectFetching) { + // Check cache first + const cacheKey = `${chainId}-${contractAddress.toLowerCase()}-nfts`; + const cachedData = collectionNFTsCache.get(cacheKey); + + if (cachedData && (Date.now() - cachedData.timestamp < CACHE_TTL)) { + nfts = cachedData.nfts; + } else { + // Fetch directly from contract + const startIndex = (page - 1) * pageSize; + nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); + + // Save to cache + collectionNFTsCache.set(cacheKey, { + timestamp: Date.now(), + nfts + }); + } + + totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; + } else { + // Define fallback strategy based on chain + if (isBNBChain(chainId)) { + // BNB Chain: Try BSCScan -> Moralis -> Contract fallback + let success = false; + + if (apiStatus.bscscan) { + try { + const result = await fetchNFTsFromBSCScan(contractAddress, chainId, page, pageSize); + nfts = result.nfts; + totalCount = result.totalCount; + success = true; + } catch (error) { + console.warn("BSCScan NFT fetch failed:", error); + apiStatus.bscscan = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (!success && apiStatus.moralis) { + try { + const result = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); + nfts = result.nfts; + totalCount = result.totalCount; + success = true; + } catch (error) { + console.warn("Moralis NFT fetch failed:", error); + apiStatus.moralis = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (!success) { + // Last resort: direct contract fetching + const startIndex = (page - 1) * pageSize; + nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); + totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; + } + } else { + // Ethereum: Try Alchemy -> Moralis -> Etherscan -> Contract fallback + let success = false; + + if (apiStatus.alchemy) { + try { + const result = await fetchNFTsFromAlchemy(contractAddress, chainId, page, pageSize); + nfts = result.nfts; + totalCount = result.totalCount; + pageKey = result.pageKey; + success = true; + } catch (error) { + console.warn("Alchemy NFT fetch failed:", error); + apiStatus.alchemy = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (!success && apiStatus.moralis) { + try { + const result = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); + nfts = result.nfts; + totalCount = result.totalCount; + success = true; + } catch (error) { + console.warn("Moralis NFT fetch failed:", error); + apiStatus.moralis = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (!success && apiStatus.etherscan) { + try { + const result = await fetchNFTsFromEtherscan(contractAddress, chainId, page, pageSize); + nfts = result.nfts; + totalCount = result.totalCount; + success = true; + } catch (error) { + console.warn("Etherscan NFT fetch failed:", error); + apiStatus.etherscan = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (!success) { + // Last resort: direct contract fetching + const startIndex = (page - 1) * pageSize; + nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); + totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; + } + } + } + + // Apply search filtering + if (searchQuery) { + const query = searchQuery.toLowerCase(); + nfts = nfts.filter(nft => + nft.name.toLowerCase().includes(query) || + nft.tokenId.toLowerCase().includes(query) || + nft.description?.toLowerCase().includes(query) + ); + } + + // Apply attribute filtering + if (Object.keys(attributes).length > 0) { + nfts = nfts.filter(nft => { + for (const [traitType, values] of Object.entries(attributes)) { + if (values.length === 0) continue; + + const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); + if (!nftAttribute || !values.includes(nftAttribute.value)) { + return false; + } + } + return true; + }); + } + + // Apply sorting + nfts.sort((a, b) => { + if (sortBy === 'tokenId') { + const idA = parseInt(a.tokenId, 16) || 0; + const idB = parseInt(b.tokenId, 16) || 0; + return sortDirection === 'asc' ? idA - idB : idB - idA; + } else if (sortBy === 'name') { + return sortDirection === 'asc' + ? a.name.localeCompare(b.name) + : b.name.localeCompare(a.name); + } + // Add more sort options as needed + return 0; + }); + + // Reset API status every 5 minutes to retry failed providers + if (Date.now() - apiStatus.lastChecked > 5 * 60 * 1000) { + apiStatus.alchemy = true; + apiStatus.moralis = true; + apiStatus.etherscan = true; + apiStatus.bscscan = true; + apiStatus.lastChecked = Date.now(); + } + + return { + nfts, + totalCount, + pageKey + }; + } catch (error) { + console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); + toast.error("Failed to load collection NFTs"); + return { nfts: [], totalCount: 0 }; + } +} + +/** + * Fetch NFTs from Alchemy API + */ +async function fetchNFTsFromAlchemy( + contractAddress: string, + chainId: string, + page: number, + pageSize: number +): Promise<{ + nfts: NFTMetadata[], + totalCount: number, + pageKey?: string +}> { + // Use our existing Alchemy API integration + const result = await alchemyFetchCollectionNFTs( + contractAddress, + chainId, + page, + pageSize, + 'tokenId', + 'asc' + ); + + // Map to our NFTMetadata format + const mappedNfts: NFTMetadata[] = result.nfts.map(nft => ({ + id: `${contractAddress.toLowerCase()}-${nft.tokenId}`, + tokenId: nft.tokenId, + name: nft.name || `NFT #${nft.tokenId}`, + description: nft.description || '', + imageUrl: nft.imageUrl || '', + attributes: nft.attributes || [], + chain: chainId + })); + + return { + nfts: mappedNfts, + totalCount: result.totalCount, + pageKey: result.pageKey + }; +} + +/** + * Fetch NFTs from Moralis API + */ +async function fetchNFTsFromMoralis( + contractAddress: string, + chainId: string, + page: number, + pageSize: number +): Promise<{ + nfts: NFTMetadata[], + totalCount: number +}> { + if (!MORALIS_API_KEY) { + throw new Error('Moralis API key not available'); + } + + // Convert chainId to Moralis format + const moralisChain = isBNBChain(chainId) + ? (chainId === '0x38' ? 'bsc' : 'bsc testnet') + : (chainId === '0x1' ? 'eth' : chainId === '0xaa36a7' ? 'sepolia' : 'goerli'); + + const options = { + method: 'GET', + url: `https://deep-index.moralis.io/api/v2/nft/${contractAddress}`, + params: { + chain: moralisChain, + format: 'decimal', + limit: pageSize, + cursor: '', // Moralis uses cursor-based pagination + offset: (page - 1) * pageSize + }, + headers: { + accept: 'application/json', + 'X-API-Key': MORALIS_API_KEY + } + }; + + const response = await axios.request(options); + + if (response.status !== 200) { + throw new Error(`Moralis API error: ${response.status}`); + } + + const data = response.data; + + // Map Moralis data to our format + const nfts: NFTMetadata[] = data.result.map((item: any) => { + // Try to parse metadata + let attributes: {trait_type: string, value: string}[] = []; + let name = `NFT #${item.token_id}`; + let description = ''; + let imageUrl = ''; + + try { + if (item.metadata) { + const metadata = typeof item.metadata === 'string' + ? JSON.parse(item.metadata) + : item.metadata; + + name = metadata.name || name; + description = metadata.description || ''; + imageUrl = metadata.image || ''; + + if (metadata.attributes && Array.isArray(metadata.attributes)) { + attributes = metadata.attributes.map((attr: any) => ({ + trait_type: attr.trait_type || '', + value: attr.value || '' + })); + } + } + } catch (e) { + console.warn('Error parsing Moralis NFT metadata:', e); + } + + return { + id: `${contractAddress.toLowerCase()}-${item.token_id}`, + tokenId: item.token_id, + name, + description, + imageUrl, + attributes, + chain: chainId + }; + }); + + return { + nfts, + totalCount: data.total || nfts.length + }; +} + +/** + * Fetch NFTs from Etherscan API + */ +async function fetchNFTsFromEtherscan( + contractAddress: string, + chainId: string, + page: number, + pageSize: number +): Promise<{ + nfts: NFTMetadata[], + totalCount: number +}> { + if (!ETHERSCAN_API_KEY) { + throw new Error('Etherscan API key not available'); + } + + if (!isEthereumChain(chainId)) { + throw new Error('Etherscan only supports Ethereum chains'); + } + + // Get appropriate Etherscan domain + let domain = 'api.etherscan.io'; + if (chainId === '0xaa36a7') { + domain = 'api-sepolia.etherscan.io'; + } else if (chainId === '0x5') { + domain = 'api-goerli.etherscan.io'; + } + + // Get token info from ABI + const apiUrl = `https://${domain}/api?module=account&action=tokennfttx&contractaddress=${contractAddress}&page=${page}&offset=${pageSize}&sort=asc&apikey=${ETHERSCAN_API_KEY}`; + + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error(`Etherscan API error: ${response.status}`); + } + + const data = await response.json(); + + if (data.status !== '1') { + throw new Error(`Etherscan API error: ${data.message}`); + } + + // Need to deduplicate token IDs as transfer events might have duplicates + const tokenSet = new Set(); + const transferEvents = data.result || []; + + transferEvents.forEach((tx: any) => { + tokenSet.add(tx.tokenID); + }); + + const tokenIds = Array.from(tokenSet).slice(0, pageSize); + + // For each token ID, try to get metadata from the NFT contract + const nftPromises = tokenIds.map(async (tokenId) => { + try { + // Try direct contract query for token URI and metadata + const provider = getChainProvider(chainId); + const abi = ["function tokenURI(uint256 tokenId) view returns (string)"]; + const contract = new ethers.Contract(contractAddress, abi, provider); + + // Get token URI + const tokenUri = await contract.tokenURI(tokenId).catch(() => ''); + + // Fetch metadata if token URI is available + let metadata: any = {}; + if (tokenUri) { + try { + // Handle IPFS URIs + const metadataUrl = tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const metadataResponse = await fetch(metadataUrl); + if (metadataResponse.ok) { + metadata = await metadataResponse.json(); + } + } catch (e) { + console.warn(`Error fetching metadata for token ${tokenId}:`, e); + } + } + + // Create NFTMetadata object + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: metadata.name || `NFT #${tokenId}`, + description: metadata.description || '', + imageUrl: metadata.image || '', + attributes: metadata.attributes || [], + chain: chainId + }; + } catch (e) { + console.warn(`Error getting NFT data for token ${tokenId}:`, e); + // Return placeholder for errors + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: `NFT #${tokenId}`, + description: '', + imageUrl: '', + attributes: [], + chain: chainId + }; + } + }); + + const nfts = await Promise.all(nftPromises); + + // Get total count - this is a rough estimate based on transfer events + const apiUrlForCount = `https://${domain}/api?module=stats&action=tokensupply&contractaddress=${contractAddress}&apikey=${ETHERSCAN_API_KEY}`; + + let totalCount = tokenSet.size; + try { + const countResponse = await fetch(apiUrlForCount); + if (countResponse.ok) { + const countData = await countResponse.json(); + if (countData.status === '1') { + totalCount = parseInt(countData.result, 10); + } + } + } catch (e) { + console.warn('Error getting total token count:', e); + } + + return { + nfts, + totalCount + }; +} + +/** + * Fetch NFTs from BSCScan API + */ +async function fetchNFTsFromBSCScan( + contractAddress: string, + chainId: string, + page: number, + pageSize: number +): Promise<{ + nfts: NFTMetadata[], + totalCount: number +}> { + if (!BSCSCAN_API_KEY) { + throw new Error('BSCScan API key not available'); + } + + if (!isBNBChain(chainId)) { + throw new Error('BSCScan only supports BNB Chain'); + } + + // Get appropriate BSCScan domain + const domain = chainId === '0x38' ? 'api.bscscan.com' : 'api-testnet.bscscan.com'; + + // Get token info from BSCScan + const apiUrl = `https://${domain}/api?module=account&action=tokennfttx&contractaddress=${contractAddress}&page=${page}&offset=${pageSize}&sort=asc&apikey=${BSCSCAN_API_KEY}`; + + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error(`BSCScan API error: ${response.status}`); + } + + const data = await response.json(); + + if (data.status !== '1') { + throw new Error(`BSCScan API error: ${data.message}`); + } + + // Need to deduplicate token IDs as transfer events might have duplicates + const tokenSet = new Set(); + const transferEvents = data.result || []; + + transferEvents.forEach((tx: any) => { + tokenSet.add(tx.tokenID); + }); + + const tokenIds = Array.from(tokenSet).slice(0, pageSize); + + // For each token ID, try to get metadata from the NFT contract + const nftPromises = tokenIds.map(async (tokenId) => { + try { + // Try direct contract query for token URI and metadata + const provider = getChainProvider(chainId); + const abi = ["function tokenURI(uint256 tokenId) view returns (string)"]; + const contract = new ethers.Contract(contractAddress, abi, provider); + + // Get token URI + const tokenUri = await contract.tokenURI(tokenId).catch(() => ''); + + // Fetch metadata if token URI is available + let metadata: any = {}; + if (tokenUri) { + try { + // Handle IPFS URIs + const metadataUrl = tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const metadataResponse = await fetch(metadataUrl); + if (metadataResponse.ok) { + metadata = await metadataResponse.json(); + } + } catch (e) { + console.warn(`Error fetching metadata for token ${tokenId}:`, e); + } + } + + // Create NFTMetadata object + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: metadata.name || `NFT #${tokenId}`, + description: metadata.description || '', + imageUrl: metadata.image || '', + attributes: metadata.attributes || [], + chain: chainId + }; + } catch (e) { + console.warn(`Error getting NFT data for token ${tokenId}:`, e); + // Return placeholder for errors + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: `NFT #${tokenId}`, + description: '', + imageUrl: '', + attributes: [], + chain: chainId + }; + } + }); + + const nfts = await Promise.all(nftPromises); + + // Get total count - this is a rough estimate based on transfer events + const apiUrlForCount = `https://${domain}/api?module=stats&action=tokensupply&contractaddress=${contractAddress}&apikey=${BSCSCAN_API_KEY}`; + + let totalCount = tokenSet.size; + try { + const countResponse = await fetch(apiUrlForCount); + if (countResponse.ok) { + const countData = await countResponse.json(); + if (countData.status === '1') { + totalCount = parseInt(countData.result, 10); + } + } + } catch (e) { + console.warn('Error getting total token count:', e); + } + + return { + nfts, + totalCount + }; +} + +/** + * Fetch user-owned NFTs across all collections + */ +export async function fetchUserNFTs(address: string, chainId: string, pageKey?: string): Promise<{ + ownedNfts: any[], + totalCount: number, + pageKey?: string +}> { + if (!address) { + throw new Error("Address is required to fetch NFTs"); + } + + // Set API fallback order based on chain + if (isBNBChain(chainId)) { + // BNB Chain: Try Moralis -> BSCScan -> Contract fallback + if (apiStatus.moralis) { + try { + return await fetchUserNFTsFromMoralis(address, chainId); + } catch (error) { + console.warn("Moralis user NFTs fetch failed:", error); + apiStatus.moralis = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (apiStatus.bscscan) { + try { + return await fetchUserNFTsFromBSCScan(address, chainId); + } catch (error) { + console.warn("BSCScan user NFTs fetch failed:", error); + apiStatus.bscscan = false; + apiStatus.lastChecked = Date.now(); + } + } + } else { + // Ethereum: Try Alchemy -> Moralis -> Etherscan -> Contract fallback + if (apiStatus.alchemy) { + try { + const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; + + const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getNFTs`; + const url = new URL(apiUrl); + url.searchParams.append('owner', address); + url.searchParams.append('withMetadata', 'true'); + url.searchParams.append('excludeFilters[]', 'SPAM'); + url.searchParams.append('pageSize', '100'); + + if (pageKey) { + url.searchParams.append('pageKey', pageKey); + } + + const response = await fetch(url.toString()); + + if (!response.ok) { + throw new Error(`API request failed with status ${response.status}`); + } + + return await response.json(); + } catch (error) { + console.warn("Alchemy user NFTs fetch failed:", error); + apiStatus.alchemy = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (apiStatus.moralis) { + try { + return await fetchUserNFTsFromMoralis(address, chainId); + } catch (error) { + console.warn("Moralis user NFTs fetch failed:", error); + apiStatus.moralis = false; + apiStatus.lastChecked = Date.now(); + } + } + + if (apiStatus.etherscan) { + try { + return await fetchUserNFTsFromEtherscan(address, chainId); + } catch (error) { + console.warn("Etherscan user NFTs fetch failed:", error); + apiStatus.etherscan = false; + apiStatus.lastChecked = Date.now(); + } + } + } + + // Fallback to local mock if all APIs fail + console.warn("All APIs failed, using mock data"); + + // Generate some mock NFTs for the demo + const mockNFTs = []; + // Generate a deterministic but "random-looking" set of NFTs based on user address + const numNFTs = parseInt(address.slice(-2), 16) % 10 + 1; // 1-10 NFTs + + for (let i = 0; i < numNFTs; i++) { + mockNFTs.push({ + contract: { + address: `0x${address.slice(2, 10)}${i.toString(16).padStart(2, '0')}${address.slice(12, 42)}` + }, + id: { + tokenId: `${i + 1}` + }, + title: `Mock NFT #${i + 1}`, + description: "This is a mock NFT generated because APIs were unavailable", + tokenUri: { + gateway: "" + }, + media: [{ + gateway: `/Img/nft/sample-${(i % 5) + 1}.jpg` + }], + metadata: { + name: `Mock NFT #${i + 1}`, + attributes: [ + { trait_type: "Rarity", value: ["Common", "Uncommon", "Rare", "Epic", "Legendary"][i % 5] }, + { trait_type: "Type", value: ["Art", "Collectible", "Game", "Utility"][i % 4] } + ] + } + }); + } + + return { + ownedNfts: mockNFTs, + totalCount: mockNFTs.length + }; +} + +/** + * Fetch user NFTs from Moralis + */ +async function fetchUserNFTsFromMoralis(address: string, chainId: string): Promise<{ + ownedNfts: any[], + totalCount: number, + pageKey?: string +}> { + if (!MORALIS_API_KEY) { + throw new Error('Moralis API key not available'); + } + + // Convert chainId to Moralis format + const moralisChain = isBNBChain(chainId) + ? (chainId === '0x38' ? 'bsc' : 'bsc testnet') + : (chainId === '0x1' ? 'eth' : chainId === '0xaa36a7' ? 'sepolia' : 'goerli'); + + const options = { + method: 'GET', + url: `https://deep-index.moralis.io/api/v2/${address}/nft`, + params: { + chain: moralisChain, + format: 'decimal', + limit: '100', + normalizeMetadata: 'true' + }, + headers: { + accept: 'application/json', + 'X-API-Key': MORALIS_API_KEY + } + }; + + const response = await axios.request(options); + + if (response.status !== 200) { + throw new Error(`Moralis API error: ${response.status}`); + } + + const data = response.data; + + // Map Moralis NFT data to a format compatible with Alchemy's + const formattedNfts = data.result.map((item: any) => { + // Try to parse metadata + let metadata = {}; + try { + if (item.normalized_metadata) { + metadata = item.normalized_metadata; + } else if (item.metadata && typeof item.metadata === 'string') { + metadata = JSON.parse(item.metadata); + } else if (item.metadata) { + metadata = item.metadata; + } + } catch (e) { + console.warn('Error parsing Moralis NFT metadata:', e); + } + + const imageUrl = ( + metadata && (metadata as any).image + ? (metadata as any).image.replace('ipfs://', 'https://ipfs.io/ipfs/') + : '' + ); + + return { + contract: { + address: item.token_address + }, + id: { + tokenId: item.token_id + }, + title: (metadata as any)?.name || `NFT #${item.token_id}`, + description: (metadata as any)?.description || '', + tokenUri: { + gateway: item.token_uri || '' + }, + media: [{ + gateway: imageUrl + }], + metadata: metadata + }; + }); + + return { + ownedNfts: formattedNfts, + totalCount: data.total || formattedNfts.length, + pageKey: data.cursor || undefined + }; +} + +/** + * Fetch user NFTs from Etherscan + */ +async function fetchUserNFTsFromEtherscan(address: string, chainId: string): Promise<{ + ownedNfts: any[], + totalCount: number +}> { + if (!ETHERSCAN_API_KEY) { + throw new Error('Etherscan API key not available'); + } + + if (!isEthereumChain(chainId)) { + throw new Error('Etherscan only supports Ethereum chains'); + } + + // Get appropriate Etherscan domain + let domain = 'api.etherscan.io'; + if (chainId === '0xaa36a7') { + domain = 'api-sepolia.etherscan.io'; + } else if (chainId === '0x5') { + domain = 'api-goerli.etherscan.io'; + } + + // Get ERC-721 token transfers for the address + const apiUrl = `https://${domain}/api?module=account&action=tokennfttx&address=${address}&page=1&offset=100&sort=desc&apikey=${ETHERSCAN_API_KEY}`; + + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error(`Etherscan API error: ${response.status}`); + } + + const data = await response.json(); + + if (data.status !== '1') { + throw new Error(`Etherscan API error: ${data.message}`); + } + + // Group transactions by token contract and ID to find current holdings + const nftHoldings = new Map(); + const transferEvents = data.result || []; + + // Process transfer events to determine current holdings + transferEvents.forEach((tx: any) => { + const contractAddress = tx.contractAddress.toLowerCase(); + const tokenId = tx.tokenID; + const key = `${contractAddress}-${tokenId}`; + + // Check if this is a transfer TO the user (current owner) + if (tx.to.toLowerCase() === address.toLowerCase()) { + if (!nftHoldings.has(key)) { + nftHoldings.set(key, { + contractAddress, + tokenId, + tokenName: tx.tokenName, + tokenSymbol: tx.tokenSymbol + }); + } + } + // Check if this is a transfer FROM the user (no longer owner) + else if (tx.from.toLowerCase() === address.toLowerCase()) { + nftHoldings.delete(key); + } + }); + + // Convert to array + const nfts = Array.from(nftHoldings.values()); + + // For each NFT, try to get additional metadata + const formattedNfts = await Promise.all(nfts.map(async (nft) => { + try { + // Try to get token URI and metadata + const provider = getChainProvider(chainId); + const abi = ["function tokenURI(uint256 tokenId) view returns (string)"]; + const contract = new ethers.Contract(nft.contractAddress, abi, provider); + + let tokenUri = ''; + try { + tokenUri = await contract.tokenURI(nft.tokenId); + } catch (e) { + console.warn(`Error getting tokenURI for ${nft.contractAddress} - ${nft.tokenId}:`, e); + } + + // Fetch metadata if tokenURI is available + let metadata = {}; + let imageUrl = ''; + if (tokenUri) { + try { + // Handle IPFS URIs + const metadataUrl = tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const metadataResponse = await fetch(metadataUrl); + if (metadataResponse.ok) { + metadata = await metadataResponse.json(); + imageUrl = (metadata as any).image?.replace('ipfs://', 'https://ipfs.io/ipfs/') || ''; + } + } catch (e) { + console.warn(`Error fetching metadata for ${nft.contractAddress} - ${nft.tokenId}:`, e); + } + } + + return { + contract: { + address: nft.contractAddress + }, + id: { + tokenId: nft.tokenId + }, + title: (metadata as any)?.name || `${nft.tokenName} #${nft.tokenId}`, + description: (metadata as any)?.description || '', + tokenUri: { + gateway: tokenUri + }, + media: [{ + gateway: imageUrl + }], + metadata + }; + } catch (e) { + console.warn(`Error processing NFT ${nft.contractAddress} - ${nft.tokenId}:`, e); + + // Return basic info without metadata + return { + contract: { + address: nft.contractAddress + }, + id: { + tokenId: nft.tokenId + }, + title: `${nft.tokenName} #${nft.tokenId}`, + description: '', + media: [{ gateway: '' }], + metadata: {} + }; + } + })); + + return { + ownedNfts: formattedNfts, + totalCount: formattedNfts.length + }; +} + +/** + * Fetch user NFTs from BSCScan */ -function registerApiFailure(api: keyof typeof apiStatus): void { - const now = Date.now(); - const status = apiStatus[api]; +async function fetchUserNFTsFromBSCScan(address: string, chainId: string): Promise<{ + ownedNfts: any[], + totalCount: number +}> { + if (!BSCSCAN_API_KEY) { + throw new Error('BSCScan API key not available'); + } + + if (!isBNBChain(chainId)) { + throw new Error('BSCScan only supports BNB Chain'); + } - status.failureCount++; - status.lastFailure = now; + // Get appropriate BSCScan domain + const domain = chainId === '0x38' ? 'api.bscscan.com' : 'api-testnet.bscscan.com'; - // Implement circuit breaker pattern - if (status.failureCount >= FAILURE_THRESHOLD) { - status.available = false; - status.cooldownUntil = now + COOLDOWN_PERIOD; - console.warn(`Circuit breaker triggered for ${api} API. Cooling down until ${new Date(status.cooldownUntil).toLocaleTimeString()}`); - - // Schedule auto-recovery - setTimeout(() => { - status.available = true; - status.failureCount = 0; - console.info(`${api} API circuit breaker reset, service available again`); - }, COOLDOWN_PERIOD); + // Get ERC-721 token transfers for the address + const apiUrl = `https://${domain}/api?module=account&action=tokennfttx&address=${address}&page=1&offset=100&sort=desc&apikey=${BSCSCAN_API_KEY}`; + + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error(`BSCScan API error: ${response.status}`); + } + + const data = await response.json(); + + if (data.status !== '1') { + throw new Error(`BSCScan API error: ${data.message}`); } + + // Group transactions by token contract and ID to find current holdings + const nftHoldings = new Map(); + const transferEvents = data.result || []; + + // Process transfer events to determine current holdings + transferEvents.forEach((tx: any) => { + const contractAddress = tx.contractAddress.toLowerCase(); + const tokenId = tx.tokenID; + const key = `${contractAddress}-${tokenId}`; + + // Check if this is a transfer TO the user (current owner) + if (tx.to.toLowerCase() === address.toLowerCase()) { + if (!nftHoldings.has(key)) { + nftHoldings.set(key, { + contractAddress, + tokenId, + tokenName: tx.tokenName, + tokenSymbol: tx.tokenSymbol + }); + } + } + // Check if this is a transfer FROM the user (no longer owner) + else if (tx.from.toLowerCase() === address.toLowerCase()) { + nftHoldings.delete(key); + } + }); + + // Convert to array + const nfts = Array.from(nftHoldings.values()); + + // For each NFT, try to get additional metadata + const formattedNfts = await Promise.all(nfts.map(async (nft) => { + try { + // Try to get token URI and metadata + const provider = getChainProvider(chainId); + const abi = ["function tokenURI(uint256 tokenId) view returns (string)"]; + const contract = new ethers.Contract(nft.contractAddress, abi, provider); + + let tokenUri = ''; + try { + tokenUri = await contract.tokenURI(nft.tokenId); + } catch (e) { + console.warn(`Error getting tokenURI for ${nft.contractAddress} - ${nft.tokenId}:`, e); + } + + // Fetch metadata if tokenURI is available + let metadata = {}; + let imageUrl = ''; + if (tokenUri) { + try { + // Handle IPFS URIs + const metadataUrl = tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const metadataResponse = await fetch(metadataUrl); + if (metadataResponse.ok) { + metadata = await metadataResponse.json(); + imageUrl = (metadata as any).image?.replace('ipfs://', 'https://ipfs.io/ipfs/') || ''; + } + } catch (e) { + console.warn(`Error fetching metadata for ${nft.contractAddress} - ${nft.tokenId}:`, e); + } + } + + return { + contract: { + address: nft.contractAddress + }, + id: { + tokenId: nft.tokenId + }, + title: (metadata as any)?.name || `${nft.tokenName} #${nft.tokenId}`, + description: (metadata as any)?.description || '', + tokenUri: { + gateway: tokenUri + }, + media: [{ + gateway: imageUrl + }], + metadata + }; + } catch (e) { + console.warn(`Error processing NFT ${nft.contractAddress} - ${nft.tokenId}:`, e); + + // Return basic info without metadata + return { + contract: { + address: nft.contractAddress + }, + id: { + tokenId: nft.tokenId + }, + title: `${nft.tokenName} #${nft.tokenId}`, + description: '', + media: [{ gateway: '' }], + metadata: {} + }; + } + })); + + return { + ownedNfts: formattedNfts, + totalCount: formattedNfts.length + }; } /** - * Reset API status after a successful call + * Fetch popular NFT collections for a specific chain */ -function registerApiSuccess(api: keyof typeof apiStatus): void { - const status = apiStatus[api]; - if (status.failureCount > 0) { - status.failureCount = 0; - status.available = true; +export async function fetchPopularCollections(chainId: string): Promise { + try { + const cacheKey = `popular-collections-${chainId}`; + + // Check cache first + if (collectionsCache.has(cacheKey)) { + return collectionsCache.get(cacheKey); + } + + // Get list of popular collection addresses for this chain + const popularCollections = POPULAR_NFT_COLLECTIONS[chainId as keyof typeof POPULAR_NFT_COLLECTIONS] || []; + + // Fetch detailed info for each collection + const collectionsPromises = popularCollections.map(collection => + fetchCollectionInfo(collection.address, chainId) + ); + + const collectionsData = await Promise.all(collectionsPromises); + + // Cache the results + collectionsCache.set(cacheKey, collectionsData); + + return collectionsData; + } catch (error) { + console.error('Error fetching popular collections:', error); + return []; } } -/** - * Generate a cache key for a specific NFT collection query - */ -function generateCacheKey( - contractAddress: string, - chainId: string, - page: number, - pageSize: number, - sortBy: string, - sortDirection: 'asc' | 'desc', - searchQuery: string, - attributes: Record -): NFTCacheKey { - return JSON.stringify({ - contract: contractAddress.toLowerCase(), - chain: chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes, - }); +import { + fetchCollectionNFTs, + fetchUserNFTs, + fetchCollectionInfo +} from './alchemyNFTApi'; + +// Cache system for NFTs +const NFT_CACHE = new Map(); +const PAGINATION_CACHE = new Map(); +const COLLECTION_CACHE = new Map(); + +// Cache TTL settings +const CACHE_TTL = 5 * 60 * 1000; // 5 minutes in milliseconds +const MEMORY_ESTIMATE_FACTOR = 6000; // bytes per NFT (rough estimate including image URLs and metadata) + +// Progressive loading state +type OnProgressCallback = (loaded: number, total: number) => void; +interface ProgressiveLoadingOptions { + batchSize?: number; + initialPageSize?: number; + maxBatches?: number; + sortBy?: string; + sortDirection?: 'asc' | 'desc'; + searchQuery?: string; + attributes?: Record; + onProgress?: OnProgressCallback; +} + +// Interface for NFT Collection response +interface NFTResponse { + nfts: any[]; + totalCount: number; + nextCursor?: string; + hasMoreBatches?: boolean; + progress: number; } /** - * Multi-API approach to fetch NFTs with fallback mechanisms + * Fetch NFTs with optimized cursor-based pagination */ -async function fetchWithFallbacks( +export async function fetchNFTsWithOptimizedCursor( contractAddress: string, chainId: string, - page: number = 1, - pageSize: number = 20, + cursor?: string, + pageSize: number = 50, sortBy: string = 'tokenId', sortDirection: 'asc' | 'desc' = 'asc', searchQuery: string = '', attributes: Record = {} -): Promise { - // BNB Chain specific approach - already using multiple sources - if (chainId === '0x38' || chainId === '0x61') { +): Promise { + // Generate cache key based on all parameters + const cacheKey = `${contractAddress}-${chainId}-${cursor}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + + // Check cache first + const cached = NFT_CACHE.get(cacheKey); + if (cached && Date.now() - cached.timestamp < CACHE_TTL) { + console.log('Using cached NFT data for', cacheKey); + return { ...cached.data, progress: 100 }; + } + + try { + // Fetch data from API + const result = await fetchCollectionNFTs( + contractAddress, + chainId, + cursor === '1' ? 1 : undefined, // Special case for first page + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + // Calculate progress (rough estimate) + const progress = Math.min(100, Math.round((result.nfts.length / (result.totalCount || 1)) * 100)); + + const response = { + nfts: result.nfts, + totalCount: result.totalCount, + nextCursor: result.pageKey, + progress + }; + + // Cache the response + NFT_CACHE.set(cacheKey, { data: response, timestamp: Date.now() }); + + return response; + } catch (error) { + console.error('Error in fetchNFTsWithOptimizedCursor:', error); + throw error; + } +} + +/** + * Fetch NFTs using progressive loading to load all items in batches + */ +export async function fetchNFTsWithProgressiveLoading( + contractAddress: string, + chainId: string, + options: ProgressiveLoadingOptions = {} +): Promise { + const { + batchSize = 50, + initialPageSize = 50, + maxBatches = 5, + sortBy = 'tokenId', + sortDirection = 'asc', + searchQuery = '', + attributes = {}, + onProgress + } = options; + + // Generate cache key + const cacheKey = `progressive-${contractAddress}-${chainId}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + + // Check cache first + const cached = NFT_CACHE.get(cacheKey); + if (cached && Date.now() - cached.timestamp < CACHE_TTL) { + console.log('Using cached progressive NFT data for', cacheKey); + if (onProgress) onProgress(cached.data.nfts.length, cached.data.totalCount); + return { ...cached.data, progress: 100 }; + } + + // Initial load + let result = await fetchCollectionNFTs( + contractAddress, + chainId, + 1, // Start with page 1 + initialPageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + const allNfts = [...result.nfts]; + const totalCount = result.totalCount || 0; + + // Don't attempt to load more if there's no pageKey or the collection is small + if (!result.pageKey || allNfts.length >= totalCount || allNfts.length >= batchSize * maxBatches) { + const progress = Math.min(100, Math.round((allNfts.length / (totalCount || 1)) * 100)); + const response = { + nfts: allNfts, + totalCount, + hasMoreBatches: false, + progress + }; + + NFT_CACHE.set(cacheKey, { data: response, timestamp: Date.now() }); + + if (onProgress) onProgress(allNfts.length, totalCount); + return response; + } + + // Progressive loading with batches + let pageKey = result.pageKey; + let batchCount = 1; + let hasMoreBatches = true; + + while (pageKey && batchCount < maxBatches && allNfts.length < totalCount) { try { - // Try Moralis first for BNB Chain - if (apiStatus.moralis.available) { - try { - console.log('Fetching BNB Chain NFTs from Moralis'); - - // Calculate cursor based on page - const cursor = undefined; - if (page > 1) { - // In a real app, you'd store and pass actual cursors - // This is a simplified approach - } - - const response = await getNFTsByContract(contractAddress, chainId, cursor, pageSize); - - if (response.result && response.result.length > 0) { - // Transform to our format - const nfts = response.result.map((nft: any) => transformMoralisNFT(nft, chainId)); - - // Apply filters - let filteredNfts = nfts; - - // Apply search filter if needed - if (searchQuery) { - const query = searchQuery.toLowerCase(); - filteredNfts = filteredNfts.filter((nft: CollectionNFT) => - nft.name.toLowerCase().includes(query) || - nft.tokenId.toLowerCase().includes(query) - ); - } - - // Apply attribute filters if needed - if (Object.keys(attributes).length > 0) { - filteredNfts = filteredNfts.filter((nft: CollectionNFT) => { - for (const [traitType, values] of Object.entries(attributes)) { - if (traitType === 'Network') continue; // Skip Network filter - - const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); - if (!nftAttribute || !values.includes(nftAttribute.value)) { - return false; - } - } - return true; - }); - } - - // Apply sorting - filteredNfts.sort((a: CollectionNFT, b: CollectionNFT) => { - if (sortBy === 'tokenId') { - const numA = parseInt(a.tokenId, 10); - const numB = parseInt(b.tokenId, 10); - - if (!isNaN(numA) && !isNaN(numB)) { - return sortDirection === 'asc' ? numA - numB : numB - numA; - } - - return sortDirection === 'asc' - ? a.tokenId.localeCompare(b.tokenId) - : b.tokenId.localeCompare(a.tokenId); - } else if (sortBy === 'name') { - return sortDirection === 'asc' - ? a.name.localeCompare(b.name) - : b.name.localeCompare(a.name); - } - return 0; - }); - - registerApiSuccess('moralis'); - return { - nfts: filteredNfts, - totalCount: response.total || filteredNfts.length - }; - } - } catch (error) { - console.warn('Moralis API failed for BNB Chain, falling back to BSCScan:', error); - registerApiFailure('moralis'); - } + // Simulate progressive loading by using pageKey as an ID + result = await fetchCollectionNFTs( + contractAddress, + chainId, + undefined, + batchSize, + sortBy, + sortDirection, + searchQuery, + attributes, + pageKey + ); + + allNfts.push(...result.nfts); + + // Update progress callback + if (onProgress) { + onProgress(allNfts.length, totalCount); } - // Fallback to BSCScan - if (apiStatus.bscscan.available) { - console.log('Fetching BNB Chain NFTs from BSCScan'); - const result = await fetchCollectionNFTs( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - - registerApiSuccess('bscscan'); - return result; + // Update pageKey for next batch + pageKey = result.pageKey; + batchCount++; + + // Break if we've loaded enough or there's no more data + if (!pageKey || allNfts.length >= totalCount) { + hasMoreBatches = false; + break; } } catch (error) { - console.error('All BNB Chain NFT APIs failed:', error); - toast.error('Failed to load NFTs. Please try again later.'); - return { nfts: [], totalCount: 0 }; - } - } - // Ethereum networks - try multiple sources - else if (chainId === '0x1' || chainId === '0xaa36a7') { - // Try Alchemy first - if (apiStatus.alchemy.available) { - try { - console.log('Fetching Ethereum NFTs from Alchemy'); - const result = await fetchCollectionNFTs( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - - registerApiSuccess('alchemy'); - return result; - } catch (error) { - console.warn('Alchemy API failed, trying Moralis next:', error); - registerApiFailure('alchemy'); - } - } - - // Try Moralis second - if (apiStatus.moralis.available) { - try { - console.log('Fetching Ethereum NFTs from Moralis'); - - const moralisChainId = chainId === '0x1' ? '0x1' : '0xaa36a7'; - const cursor = undefined; - - const response = await getNFTsByContract(contractAddress, moralisChainId, cursor, pageSize); - - if (response.result && response.result.length > 0) { - // Transform to our format - const nfts = response.result.map((nft: any) => transformMoralisNFT(nft, chainId)); - - // Apply filters (same as above) - let filteredNfts = nfts; - - if (searchQuery) { - const query = searchQuery.toLowerCase(); - filteredNfts = filteredNfts.filter((nft: CollectionNFT) => - nft.name.toLowerCase().includes(query) || - nft.tokenId.toLowerCase().includes(query) - ); - } - - if (Object.keys(attributes).length > 0) { - filteredNfts = filteredNfts.filter((nft: CollectionNFT) => { - for (const [traitType, values] of Object.entries(attributes)) { - if (traitType === 'Network') continue; - - const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); - if (!nftAttribute || !values.includes(nftAttribute.value)) { - return false; - } - } - return true; - }); - } - - // Apply sorting - filteredNfts.sort((a: CollectionNFT, b: CollectionNFT) => { - if (sortBy === 'tokenId') { - const numA = parseInt(a.tokenId, 10); - const numB = parseInt(b.tokenId, 10); - - if (!isNaN(numA) && !isNaN(numB)) { - return sortDirection === 'asc' ? numA - numB : numB - numA; - } - - return sortDirection === 'asc' - ? a.tokenId.localeCompare(b.tokenId) - : b.tokenId.localeCompare(a.tokenId); - } else if (sortBy === 'name') { - return sortDirection === 'asc' - ? a.name.localeCompare(b.name) - : b.name.localeCompare(a.name); - } - return 0; - }); - - registerApiSuccess('moralis'); - return { - nfts: filteredNfts, - totalCount: response.total || filteredNfts.length - }; - } - } catch (error) { - console.warn('Moralis API failed for Ethereum, trying Etherscan next:', error); - registerApiFailure('moralis'); - } - } - - // Try Etherscan as last resort - if (apiStatus.etherscan.available) { - try { - console.log('Fetching Ethereum NFTs from Etherscan'); - // Note: Etherscan doesn't have a direct NFT API like Alchemy - // We would need to implement additional logic here to get NFTs from Etherscan - // This would likely involve getting token transfer events and reconstructing NFT ownership - - // For now, we'll just return a mock response with a notice about API limitations - registerApiSuccess('etherscan'); - return { - nfts: [{ - id: `${contractAddress.toLowerCase()}-1`, - tokenId: '1', - name: 'API Limit Reached', - description: 'We\'re experiencing high demand. Please try again later.', - imageUrl: '/Img/logo/cryptopath.png', - chain: chainId, - attributes: [] - }], - totalCount: 1 - }; - } catch (error) { - console.error('Etherscan API failed:', error); - registerApiFailure('etherscan'); - } + console.error('Error in progressive loading batch:', error); + hasMoreBatches = true; + break; } } - // All APIs failed or unsupported chain - console.error('All NFT APIs failed or unsupported chain'); - return { nfts: [], totalCount: 0 }; + // Prepare response + const progress = Math.min(100, Math.round((allNfts.length / (totalCount || 1)) * 100)); + const response = { + nfts: allNfts, + totalCount, + hasMoreBatches: !!pageKey && allNfts.length < totalCount, + progress + }; + + // Cache the aggregated result + NFT_CACHE.set(cacheKey, { data: response, timestamp: Date.now() }); + + return response; } /** - * Fetch NFTs with caching to reduce API usage + * Fetch NFTs with standard pagination */ export async function fetchPaginatedNFTs( contractAddress: string, @@ -355,83 +1817,309 @@ export async function fetchPaginatedNFTs( sortDirection: 'asc' | 'desc' = 'asc', searchQuery: string = '', attributes: Record = {} -): Promise { +): Promise<{ + nfts: any[]; + totalCount: number; + currentPage: number; + totalPages: number; +}> { + // Generate cache key based on all parameters + const cacheKey = `pagination-${contractAddress}-${chainId}-${page}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + + // Check cache first + const cached = PAGINATION_CACHE.get(cacheKey); + if (cached && Date.now() - cached.timestamp < CACHE_TTL && cached.page === page) { + console.log('Using cached paginated NFT data for page', page); + return cached.data; + } + try { - // Generate cache key - const cacheKey = generateCacheKey( + // Fetch data from API + const result = await fetchCollectionNFTs( contractAddress, chainId, - page, + page, // Use page number directly pageSize, sortBy, sortDirection, searchQuery, attributes ); + + // Calculate total pages + const totalPages = Math.max(1, Math.ceil((result.totalCount || 0) / pageSize)); + + const response = { + nfts: result.nfts, + totalCount: result.totalCount, + currentPage: page, + totalPages + }; + + // Cache the response + PAGINATION_CACHE.set(cacheKey, { + data: response, + timestamp: Date.now(), + page + }); + + return response; + } catch (error) { + console.error('Error in fetchPaginatedNFTs:', error); + throw error; + } +} - // Check cache first - const cachedData = nftCache.get(cacheKey); - if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) { - console.log('Using cached NFT data for', contractAddress); - return cachedData.data; +/** + * Clear the NFT cache for a specific collection + */ +export function clearSpecificCollectionCache( + contractAddress: string, + chainId: string +): void { + // Clear all cache entries that match the collection and chain + for (const key of NFT_CACHE.keys()) { + if (key.includes(`${contractAddress}-${chainId}`)) { + NFT_CACHE.delete(key); } + } + + console.log(`Cleared cache for collection ${contractAddress} on chain ${chainId}`); +} - // Implement multi-API approach with fallbacks - const data = await fetchWithFallbacks( - contractAddress, - chainId, - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); +/** + * Clear all collection caches + */ +export function clearCollectionCache( + contractAddress?: string, + chainId?: string +): void { + if (contractAddress && chainId) { + clearSpecificCollectionCache(contractAddress, chainId); + } else { + NFT_CACHE.clear(); + console.log('Cleared all NFT caches'); + } +} - // Store in cache - nftCache.set(cacheKey, { - data, - timestamp: Date.now(), - }); +/** + * Clear pagination cache for a collection + */ +export function clearPaginationCache( + contractAddress: string, + chainId: string +): void { + // Clear all pagination cache entries that match the collection and chain + for (const key of PAGINATION_CACHE.keys()) { + if (key.includes(`pagination-${contractAddress}-${chainId}`)) { + PAGINATION_CACHE.delete(key); + } + } + + console.log(`Cleared pagination cache for collection ${contractAddress} on chain ${chainId}`); +} + +/** + * Estimate memory usage for a collection based on number of NFTs + */ +export function estimateCollectionMemoryUsage( + nftCount: number +): string { + const bytesEstimate = nftCount * MEMORY_ESTIMATE_FACTOR; + + if (bytesEstimate < 1024) { + return `${bytesEstimate} bytes`; + } else if (bytesEstimate < 1024 * 1024) { + return `${(bytesEstimate / 1024).toFixed(2)} KB`; + } else if (bytesEstimate < 1024 * 1024 * 1024) { + return `${(bytesEstimate / (1024 * 1024)).toFixed(2)} MB`; + } else { + return `${(bytesEstimate / (1024 * 1024 * 1024)).toFixed(2)} GB`; + } +} - return data; +/** + * Fetch user's NFT collections with caching + */ +export async function fetchUserCollections( + address: string, + chainId: string +): Promise { + // Generate cache key + const cacheKey = `user-collections-${address}-${chainId}`; + + // Check cache first + const cached = COLLECTION_CACHE.get(cacheKey); + if (cached && Date.now() - cached.timestamp < CACHE_TTL) { + console.log('Using cached user collections'); + return cached.data; + } + + try { + // Fetch user NFTs from API + const response = await fetchUserNFTs(address, chainId); + + // Group NFTs by collection + const collections = new Map(); + + response.ownedNfts.forEach((nft: any) => { + const contractAddress = nft.contract?.address; + if (!contractAddress) return; + + if (!collections.has(contractAddress)) { + collections.set(contractAddress, { + contractAddress, + name: nft.contract.name || 'Unknown Collection', + symbol: nft.contract.symbol || '', + count: 0, + imageUrl: nft.media?.[0]?.gateway || '', + chain: chainId + }); + } + + const collection = collections.get(contractAddress); + collection.count++; + + // Use first NFT image if collection image is missing + if (!collection.imageUrl && nft.media?.[0]?.gateway) { + collection.imageUrl = nft.media[0].gateway; + } + }); + + const result = Array.from(collections.values()); + + // Cache the result + COLLECTION_CACHE.set(cacheKey, { data: result, timestamp: Date.now() }); + + return result; } catch (error) { - console.error('Error fetching paginated NFTs:', error); + console.error('Error fetching user collections:', error); + throw error; + } +} + +/** + * Get collection metadata with caching + */ +export async function getCollectionMetadata( + contractAddress: string, + chainId: string +): Promise { + // Generate cache key + const cacheKey = `metadata-${contractAddress}-${chainId}`; + + // Check cache first + const cached = COLLECTION_CACHE.get(cacheKey); + if (cached && Date.now() - cached.timestamp < CACHE_TTL) { + console.log('Using cached collection metadata'); + return cached.data; + } + + try { + const metadata = await fetchCollectionInfo(contractAddress, chainId); - // Show user-friendly error - toast.error('Failed to load NFTs. Please try again later.'); + // Add chain ID to metadata + const metadataWithChain = { + ...metadata, + chain: chainId + }; - // Return empty data to avoid breaking the UI - return { nfts: [], totalCount: 0 }; + // Cache the result + COLLECTION_CACHE.set(cacheKey, { + data: metadataWithChain, + timestamp: Date.now() + }); + + return metadataWithChain; + } catch (error) { + console.error('Error fetching collection metadata:', error); + throw error; } } /** - * Clear cache for a specific collection + * Filter NFTs by attribute */ -export function clearCollectionCache(contractAddress: string): void { - // Delete all entries for this contract address - for (const key of nftCache.keys()) { - if (key.includes(contractAddress.toLowerCase())) { - nftCache.delete(key); - } +export function filterNFTsByAttributes( + nfts: any[], + attributes: Record +): any[] { + if (!attributes || Object.keys(attributes).length === 0) { + return nfts; } + + return nfts.filter(nft => { + if (!nft.attributes) return false; + + // Check if NFT matches all selected attribute filters + return Object.entries(attributes).every(([traitType, values]) => { + // Find an attribute that matches the trait type + const attribute = nft.attributes.find( + (attr: any) => attr.trait_type.toLowerCase() === traitType.toLowerCase() + ); + + // If not found but filter exists, exclude NFT + if (!attribute) return false; + + // Check if attribute value is in the selected values + return values.some(value => + attribute.value.toLowerCase() === value.toLowerCase() + ); + }); + }); } /** - * Clear cache for a specific collection and chain + * Sort NFTs based on criteria */ -export function clearPaginationCache(contractAddress: string, chainId: string): void { - // Create partial key that we can use to match - const partialKey = JSON.stringify({ - contract: contractAddress.toLowerCase(), - chain: chainId, - }).slice(0, -1); // Remove the trailing '}' +export function sortNFTs( + nfts: any[], + sortBy: string = 'tokenId', + sortDirection: 'asc' | 'desc' = 'asc' +): any[] { + const sortedNFTs = [...nfts]; - // Delete all entries that match the partial key - for (const key of nftCache.keys()) { - if (key.includes(partialKey)) { - nftCache.delete(key); + sortedNFTs.sort((a, b) => { + let valueA, valueB; + + if (sortBy === 'tokenId') { + // Handle numeric tokenIds properly + valueA = parseInt(a.tokenId, 10) || 0; + valueB = parseInt(b.tokenId, 10) || 0; + } else if (sortBy === 'name') { + valueA = a.name || ''; + valueB = b.name || ''; + return sortDirection === 'asc' + ? valueA.localeCompare(valueB) + : valueB.localeCompare(valueA); + } else { + // Default fallback for unknown sort criteria + valueA = a[sortBy] || 0; + valueB = b[sortBy] || 0; } - } + + return sortDirection === 'asc' ? valueA - valueB : valueB - valueA; + }); + + return sortedNFTs; +} + +/** + * Get collection statistics + */ +export async function getCollectionStats( + contractAddress: string, + chainId: string +): Promise { + // This would normally fetch real stats from an API + // For now, we'll return mock data + const metadata = await getCollectionMetadata(contractAddress, chainId); + + return { + floorPrice: Math.random() * 5 + 0.1, + volume24h: Math.random() * 100, + totalListings: Math.floor(Math.random() * 500), + totalOwners: Math.floor(Math.random() * 2000), + totalSupply: metadata.totalSupply || 10000, + }; } From 700c2de1b575e6c7b8148ff3e637351496a61c0c Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 13:45:58 +0700 Subject: [PATCH 07/17] error --- components/NFT/AnimatedNFTCard.tsx | 113 +++---- components/NFT/FeaturedSpotlight.tsx | 485 +++++++++++---------------- components/NFT/PaginatedNFTGrid.tsx | 478 +++++++++++--------------- lib/api/nftService.ts | 69 ++-- 4 files changed, 474 insertions(+), 671 deletions(-) diff --git a/components/NFT/AnimatedNFTCard.tsx b/components/NFT/AnimatedNFTCard.tsx index 19b6f99..a48e841 100644 --- a/components/NFT/AnimatedNFTCard.tsx +++ b/components/NFT/AnimatedNFTCard.tsx @@ -43,7 +43,7 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized damping: 15 }); const rotateY = useSpring(useTransform(x, [-100, 100], [-10, 10]), { - stiffness: 200, + stiffness: 200, damping: 15 }); @@ -59,7 +59,6 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized const shineOpacity = useMotionValue(0); const shinePosition = useTransform(x, [-100, 100], ["45% 45%", "55% 55%"]); - // Update shine opacity based on mouse position // Update shine opacity based on mouse position useEffect(() => { function updateShineOpacity() { @@ -76,11 +75,6 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized unsubscribeY(); }; }, [shineX, shineY, shineOpacity]); - // Progressive loading animation - useEffect(() => { - // Image loading effect is now handled by LazyImage component - // No need to manipulate blurAmount - }, [imageLoaded]); function handleMouseMove(e: React.MouseEvent) { if (cardRef.current) { @@ -222,78 +216,67 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized {/* Network Badge - Positioned absolutely top-right */}
    -
    +
    {networkBadge.name} -
    - -
    -
    +
    - {/* NFT Image with progressive loading */} -
    - {/* Use our optimized LazyImage component */} - setImageLoaded(true)} - onError={() => {/* Error handled inside LazyImage */}} - /> - - {/* Chain indicator corner decoration */} -
    -
    + {/* NFT Image with progressive loading */} +
    + setImageLoaded(true)} + onError={() => {/* Error handled inside LazyImage */}} + /> + + {/* Chain indicator corner decoration */} +
    +
    - {/* Info Section */} -
    -

    - {nft.name || `NFT #${nft.tokenId}`} -

    - -
    -

    - ID: {parseInt(nft.tokenId, 16) ? parseInt(nft.tokenId, 16).toString() : nft.tokenId} -

    - -
    - - {/* Attributes */} -
    - {nft.attributes?.slice(0, 3).map((attr, i) => ( - - {attr.trait_type === 'Network' ? null : `${attr.trait_type}: ${attr.value}`} - - ))} -
    + {/* Info Section */} +
    +

    + {nft.name || `NFT #${nft.tokenId}`} +

    + +
    +

    + ID: {parseInt(nft.tokenId, 16) ? parseInt(nft.tokenId, 16).toString() : nft.tokenId} +

    +
    - + + {/* Attributes */} +
    + {nft.attributes?.slice(0, 3).map((attr, i) => ( + + {attr.trait_type === 'Network' ? null : `${attr.trait_type}: ${attr.value}`} + + ))} +
    +
    + ); -} +} \ No newline at end of file diff --git a/components/NFT/FeaturedSpotlight.tsx b/components/NFT/FeaturedSpotlight.tsx index 494a4e6..9e81f18 100644 --- a/components/NFT/FeaturedSpotlight.tsx +++ b/components/NFT/FeaturedSpotlight.tsx @@ -1,325 +1,238 @@ import { useState, useEffect } from 'react'; -import Link from 'next/link'; import Image from 'next/image'; -import { motion } from 'framer-motion'; -import { useRouter } from 'next/navigation'; -import { Sparkles, ArrowRight, ExternalLink, Info, Tag, Clock, Users } from 'lucide-react'; +import Link from 'next/link'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Sparkles, ArrowRight, ExternalLink, Zap } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; -import { Card, CardContent } from '@/components/ui/card'; -import { useToast } from '@/hooks/use-toast'; +import { getChainColorTheme } from '@/lib/api/chainProviders'; -// Define type for featured NFT item -interface FeaturedNFT { +interface NFTSpotlight { id: string; name: string; - contractAddress: string; - tokenId: string; description: string; - imageUrl: string; + image: string; chain: string; - price?: string; - seller?: string; - timeLeft?: string; - collection?: { - name: string; - imageUrl: string; - verified: boolean; - }; - rarity?: string; - rarityRank?: number; + contractAddress: string; + artist?: string; } +const spotlights: NFTSpotlight[] = [ + { + id: 'cryptopath-genesis', + name: 'CryptoPath Genesis Collection', + description: 'Be part of the CryptoPath revolution with our limited Genesis NFT collection. Exclusive benefits, governance rights, and early access to new features await the owners!', + image: '/Img/logo/logo3.svg', // Replace with actual path + chain: '0x61', // BNB Testnet + contractAddress: '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551', + artist: 'CryptoPath Team' + }, + { + id: 'pancake-squad', + name: 'Pancake Squad', + description: 'A collection of 10,000 unique, cute, and sometimes fierce PancakeSwap bunny NFTs that serve as your membership to the Pancake Squad.', + image: 'https://i.seadn.io/s/primary-drops/0xc291cc12018a6fcf423699bce985ded86bac47cb/33406336:about:media:6f541d5a-5309-41ad-8f73-74f092ed1314.png?auto=format&dpr=1&w=1200', + chain: '0x38', // BNB Chain + contractAddress: '0xdcbcf766dcd33a7a8abe6b01a8b0e44a006c4ac1', + artist: 'PancakeSwap' + }, + { + id: 'bayc', + name: 'Bored Ape Yacht Club', + description: 'The Bored Ape Yacht Club is a collection of 10,000 unique Bored Ape NFTs, unique digital collectibles living on the Ethereum blockchain.', + image: 'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?auto=format&dpr=1&w=1000', + chain: '0x1', // Ethereum + contractAddress: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d', + artist: 'Yuga Labs' + } +]; + export default function FeaturedSpotlight() { - const router = useRouter(); - const { toast } = useToast(); - const [featuredNFTs, setFeaturedNFTs] = useState([]); const [currentIndex, setCurrentIndex] = useState(0); - const [isLoading, setIsLoading] = useState(true); + const [isAnimating, setIsAnimating] = useState(false); + const spotlight = spotlights[currentIndex]; + const chainTheme = getChainColorTheme(spotlight.chain); - // Load featured NFTs (in a real app this would come from an API) + // Auto-rotate spotlights useEffect(() => { - // Simulating API call with a timeout - const loadFeaturedNFTs = async () => { - setIsLoading(true); - // In a real app, you would fetch this data from your backend - const mockFeaturedNFTs: FeaturedNFT[] = [ - { - id: 'featured-1', - name: 'CryptoPath Genesis #42', - contractAddress: '0x2fF12fE4B3C4DEa244c4BdF682d572A90Df3B551', - tokenId: '42', - description: 'Special edition CryptoPath Genesis NFT with exclusive utility for platform governance.', - imageUrl: '/Img/nft/sample-1.jpg', - chain: '0x61', // BNB Testnet - price: '10 BNB', - seller: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e', - timeLeft: '2 days', - collection: { - name: 'CryptoPath Genesis', - imageUrl: '/Img/logo/cryptopath.png', - verified: true - }, - rarity: 'Legendary', - rarityRank: 1 - }, - { - id: 'featured-2', - name: 'Azuki #9605', - contractAddress: '0xED5AF388653567Af2F388E6224dC7C4b3241C544', - tokenId: '9605', - description: 'Azuki starts with a collection of 10,000 avatars that give you membership access to The Garden.', - imageUrl: '/Img/nft/sample-2.jpg', - chain: '0x1', // Ethereum Mainnet - price: '12.3 ETH', - seller: '0x3bE0271C63cE5ED0B5Fc10D2693f06c96ED78Dc1', - timeLeft: '5 hours', - collection: { - name: 'Azuki', - imageUrl: 'https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?auto=format&dpr=1&w=1000', - verified: true - }, - rarity: 'Epic', - rarityRank: 245 - }, - { - id: 'featured-3', - name: 'Bored Ape Yacht Club #7495', - contractAddress: '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D', - tokenId: '7495', - description: 'The Bored Ape Yacht Club is a collection of 10,000 unique Bored Ape NFTs.', - imageUrl: '/Img/nft/sample-3.jpg', - chain: '0x1', // Ethereum Mainnet - price: '68.5 ETH', - seller: '0x7Fe37118c2D1DB4A67A0Ee8C8510BB2D7696fD63', - timeLeft: '12 hours', - collection: { - name: 'Bored Ape Yacht Club', - imageUrl: 'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?auto=format&dpr=1&w=1000', - verified: true - }, - rarity: 'Mythic', - rarityRank: 123 - } - ]; - - // Wait a bit to simulate network latency - await new Promise(resolve => setTimeout(resolve, 500)); - - setFeaturedNFTs(mockFeaturedNFTs); - setIsLoading(false); - }; - - loadFeaturedNFTs(); + const intervalId = setInterval(() => { + if (!isAnimating) { + setIsAnimating(true); + setTimeout(() => { + setCurrentIndex((prev) => (prev + 1) % spotlights.length); + setIsAnimating(false); + }, 500); + } + }, 8000); - // Auto-rotate featured NFTs every 7 seconds - const interval = setInterval(() => { - setCurrentIndex(prevIndex => - prevIndex === featuredNFTs.length - 1 ? 0 : prevIndex + 1 - ); - }, 7000); - - return () => clearInterval(interval); - }, []); + return () => clearInterval(intervalId); + }, [isAnimating]); - // Handle click on a featured NFT - const handleNFTClick = (nft: FeaturedNFT) => { - router.push(`/NFT/collection/${nft.contractAddress}?network=${nft.chain}`); + // Network name mapping + const getNetworkName = (chainId: string) => { + const networks: Record = { + '0x1': 'Ethereum', + '0xaa36a7': 'Sepolia', + '0x38': 'BNB Chain', + '0x61': 'BNB Testnet' + }; + return networks[chainId] || 'Unknown Network'; }; - // No items to display - if (featuredNFTs.length === 0 && !isLoading) { - return null; - } - - // Current featured NFT - const currentNFT = featuredNFTs[currentIndex]; + const handleNext = () => { + if (!isAnimating) { + setIsAnimating(true); + setTimeout(() => { + setCurrentIndex((prev) => (prev + 1) % spotlights.length); + setIsAnimating(false); + }, 500); + } + }; return ( -
    - {/* Title */} -
    - -

    Featured NFTs

    -
    +
    + {/* Background blur gradient */} +
    - {isLoading ? ( - // Loading skeleton -
    - ) : ( - // Spotlight card + {/* Featured image */} + -
    - {/* Background image with overlay */} -
    -
    - + + + + {/* Content overlay */} +
    +
    +
    + + - {currentNFT.name} - -
    - - {/* NFT Content Grid */} -
    - {/* Left column - NFT details */} -
    - {/* Collection info */} -
    -
    - {currentNFT.collection?.name +
    + Chain + {getNetworkName(spotlight.chain)}
    -
    - {currentNFT.collection?.name} - {currentNFT.collection?.verified && ( - - - - - - )} -
    + + + {/* Title with sparkle effect */} +
    +

    + {spotlight.name} +

    + + +
    - {/* NFT name */} -

    {currentNFT.name}

    + {/* Artist */} + {spotlight.artist && ( +
    + by + {spotlight.artist} +
    + )} {/* Description */} -

    {currentNFT.description}

    +

    + {spotlight.description} +

    - {/* Price & details */} -
    - {currentNFT.price && ( -
    - - {currentNFT.price} -
    - )} - - {currentNFT.timeLeft && ( -
    - - {currentNFT.timeLeft} -
    - )} - - {currentNFT.rarity && ( -
    - - {currentNFT.rarity} - {currentNFT.rarityRank && ( - #{currentNFT.rarityRank} - )} -
    - )} -
    - - {/* Buttons */} -
    - - - - -
    -
    - - {/* Right column - NFT image */} -
    - - {currentNFT.name} - {/* Rarity badge */} - {currentNFT.rarity && ( -
    - - {currentNFT.rarity} - -
    - )} -     - - {/* Shadow element */} -
    -
    -
    + +
    + +
    - - {/* Navigation dots */} - {featuredNFTs.length > 1 && ( -
    - {featuredNFTs.map((_, i) => ( -
    - )} - - )} +
    +
    + + {/* Navigation dots */} +
    + {spotlights.map((_, index) => ( +
    + + {/* Next button */} +
    ); -} +} \ No newline at end of file diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index 241feeb..e548924 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -1,10 +1,11 @@ -import { useEffect, useState, useCallback } from 'react'; +import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -import { Loader2, ArrowLeft, ArrowRight, RefreshCw } from 'lucide-react'; -import AnimatedNFTCard from './AnimatedNFTCard'; -import { Button } from '@/components/ui/button'; -import { fetchPaginatedNFTs, clearCollectionCache } from '@/lib/api/nftService'; +import { Loader2 } from 'lucide-react'; +import { fetchCollectionNFTs } from '@/lib/api/alchemyNFTApi'; +import { fetchPaginatedNFTs } from '@/lib/api/nftService'; import { getChainColorTheme } from '@/lib/api/chainProviders'; +import { CollectionNFT } from '@/lib/api/alchemyNFTApi'; +import AnimatedNFTCard from './AnimatedNFTCard'; import { Pagination, PaginationContent, @@ -13,33 +14,17 @@ import { PaginationNext, PaginationPrevious, } from '@/components/ui/pagination'; -import { useToast } from '@/hooks/use-toast'; -import { Skeleton } from '@/components/ui/skeleton'; - -interface NFT { - id: string; - tokenId: string; - name: string; - description?: string; - imageUrl: string; - chain: string; - attributes?: Array<{ - trait_type: string; - value: string; - }>; -} interface PaginatedNFTGridProps { contractAddress: string; chainId: string; - searchQuery?: string; - sortBy?: string; - sortDirection?: 'asc' | 'desc'; - attributes?: Record; - viewMode?: 'grid' | 'list'; - onNFTClick?: (nft: NFT) => void; + sortBy: string; + sortDirection: 'asc' | 'desc'; + searchQuery: string; + attributes: Record; + viewMode: 'grid' | 'list'; + onNFTClick: (nft: CollectionNFT) => void; itemsPerPage?: number; - maxDisplayedPages?: number; defaultPage?: number; onPageChange?: (page: number) => void; } @@ -47,47 +32,40 @@ interface PaginatedNFTGridProps { export default function PaginatedNFTGrid({ contractAddress, chainId, - searchQuery = '', - sortBy = 'tokenId', - sortDirection = 'asc', - attributes = {}, - viewMode = 'grid', + sortBy, + sortDirection, + searchQuery, + attributes, + viewMode, onNFTClick, itemsPerPage = 20, - maxDisplayedPages = 5, defaultPage = 1, onPageChange }: PaginatedNFTGridProps) { - // State - const [nfts, setNfts] = useState([]); + const [nfts, setNfts] = useState([]); + const [loading, setLoading] = useState(true); const [totalCount, setTotalCount] = useState(0); const [currentPage, setCurrentPage] = useState(defaultPage); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); - const [isRefreshing, setIsRefreshing] = useState(false); - - // Hooks - const { toast } = useToast(); - - // Calculate total pages - const totalPages = Math.max(1, Math.ceil(totalCount / itemsPerPage)); + const [totalPages, setTotalPages] = useState(1); + const [progress, setProgress] = useState(0); // Chain theme for styling const chainTheme = getChainColorTheme(chainId); - // Load NFTs for the current page - const loadNFTs = useCallback(async (page: number) => { - if (page < 1) page = 1; - if (page > totalPages && totalPages > 0) page = totalPages; - - setIsLoading(true); - setError(null); + useEffect(() => { + loadNFTs(); + }, [contractAddress, chainId, currentPage, sortBy, sortDirection, searchQuery, JSON.stringify(attributes)]); + + async function loadNFTs() { + setLoading(true); + setProgress(10); try { + // Use the cached and optimized fetching function const result = await fetchPaginatedNFTs( contractAddress, chainId, - page, + currentPage, itemsPerPage, sortBy, sortDirection, @@ -97,127 +75,98 @@ export default function PaginatedNFTGrid({ setNfts(result.nfts); setTotalCount(result.totalCount); - setIsLoading(false); - // Call onPageChange callback if provided - if (onPageChange) { - onPageChange(page); - } + // Calculate total pages + const pages = Math.max(1, Math.ceil(result.totalCount / itemsPerPage)); + setTotalPages(pages); + + setProgress(100); } catch (error) { - console.error('Error loading NFTs:', error); - setError('Failed to load NFTs. Please try again.'); - setIsLoading(false); - toast({ - title: 'Error', - description: 'Failed to load NFTs. Please try again.', - variant: 'destructive', - }); + console.error("Error loading NFTs:", error); + setNfts([]); + setTotalCount(0); + setTotalPages(1); + } finally { + setLoading(false); } - }, [ - contractAddress, - chainId, - itemsPerPage, - sortBy, - sortDirection, - searchQuery, - attributes, - totalPages, - onPageChange, - toast - ]); + } - // Initial load and when dependencies change - useEffect(() => { - loadNFTs(currentPage); - }, [ - contractAddress, - chainId, - searchQuery, - sortBy, - sortDirection, - JSON.stringify(attributes), - itemsPerPage, - currentPage, - loadNFTs - ]); - - // Handle page change - const handlePageChange = async (page: number) => { - if (page === currentPage || page < 1 || page > totalPages) return; + const handlePageChange = (page: number) => { setCurrentPage(page); + if (onPageChange) { + onPageChange(page); + } }; - // Handle NFT click - const handleNFTClick = (nft: NFT) => { - if (onNFTClick) onNFTClick(nft); - }; - - // Refresh data - useful if data is stale - const handleRefresh = async () => { - setIsRefreshing(true); + // Simple pagination controls helper + const getPaginationItems = () => { + const items = []; - // Clear collection cache and reload - clearCollectionCache(contractAddress, chainId); + // Always show first page + items.push(1); - await loadNFTs(currentPage); - setIsRefreshing(false); + // Calculate range around current page + const startPage = Math.max(2, currentPage - 1); + const endPage = Math.min(totalPages - 1, currentPage + 1); - toast({ - title: 'Refreshed', - description: 'NFT data has been refreshed.', - }); - }; - - // Generate array of pages to display - const getPageNumbers = () => { - const totalPagesToShow = Math.min(maxDisplayedPages, totalPages); - const halfPagesToShow = Math.floor(totalPagesToShow / 2); + // Add ellipsis after first page if needed + if (startPage > 2) { + items.push('ellipsis1'); + } + + // Add pages around current page + for (let i = startPage; i <= endPage; i++) { + items.push(i); + } - let startPage = Math.max(1, currentPage - halfPagesToShow); - const endPage = Math.min(totalPages, startPage + totalPagesToShow - 1); + // Add ellipsis before last page if needed + if (endPage < totalPages - 1) { + items.push('ellipsis2'); + } - // Adjust startPage if we're near the end - if (endPage - startPage + 1 < totalPagesToShow) { - startPage = Math.max(1, endPage - totalPagesToShow + 1); + // Add last page if more than one page + if (totalPages > 1) { + items.push(totalPages); } - return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i); + return items; }; - // Pagination pages to show - const pageNumbers = getPageNumbers(); - return (
    - {/* NFT Grid */} -
    - {isLoading ? ( - // Loading state with skeleton placeholders -
    - {Array.from({ length: itemsPerPage }).map((_, i) => ( -
    - -
    - - -
    -
    - ))} + {/* Loading indicator or NFT grid */} + {loading ? ( +
    + +
    Loading NFTs...
    + + {/* Progress bar */} +
    +
    - ) : ( - // Loaded state with NFTs - <> - {nfts.length > 0 ? ( +
    + ) : ( + + + {nfts.length === 0 ? ( +
    +

    No NFTs found for this collection.

    +

    Try adjusting your filters or search query.

    +
    + ) : ( - + {nfts.map((nft, index) => ( - - handleNFTClick(nft)} - index={index} - /> - + onNFTClick(nft)} + /> ))} - ) : ( - // Empty state -
    -

    - {searchQuery || Object.keys(attributes).length > 0 - ? 'No NFTs match your current filters. Try adjusting your search or filters.' - : 'No NFTs found in this collection.'} -

    -
    )} - - )} -
    - - {/* Error Message */} - {error && ( -
    -

    {error}

    - -
    + + )} - {/* Pagination Controls */} + {/* Pagination controls */} {totalPages > 1 && ( -
    -
    - Showing page {currentPage} of {totalPages} - {!isLoading && ( - - ({((currentPage - 1) * itemsPerPage) + 1} - {Math.min(currentPage * itemsPerPage, totalCount)} of {totalCount}) - - )} -
    - -
    - - - + + + + { + e.preventDefault(); + if (currentPage > 1) { + handlePageChange(currentPage - 1); + } + }} + className={ + currentPage === 1 + ? 'pointer-events-none opacity-50' + : '' + } + /> + - - - - handlePageChange(currentPage - 1)} - className={`cursor-pointer ${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''}`} - style={{ - color: chainTheme.primary - }} - /> - - - {currentPage > 3 && totalPages > maxDisplayedPages && ( - <> - - handlePageChange(1)} - className="cursor-pointer" - style={{ - color: 1 === currentPage ? chainTheme.primary : undefined, - borderColor: 1 === currentPage ? chainTheme.primary : undefined - }} - > - 1 - - - {currentPage > 4 && ( - - ... - - )} - - )} - - {pageNumbers.map(page => ( + {getPaginationItems().map((page, i) => { + if (typeof page === 'string') { + // Render ellipsis + return ( - handlePageChange(page)} - isActive={page === currentPage} - className="cursor-pointer" - style={{ - color: page === currentPage ? chainTheme.primary : undefined, - borderColor: page === currentPage ? chainTheme.primary : undefined, - backgroundColor: page === currentPage ? `${chainTheme.backgroundClass}` : undefined - }} - > - {page} - + ... - ))} - - {currentPage < totalPages - 2 && totalPages > maxDisplayedPages && ( - <> - {currentPage < totalPages - 3 && ( - - ... - - )} - - handlePageChange(totalPages)} - className="cursor-pointer" - style={{ - color: totalPages === currentPage ? chainTheme.primary : undefined, - borderColor: totalPages === currentPage ? chainTheme.primary : undefined - }} - > - {totalPages} - - - - )} - - - handlePageChange(currentPage + 1)} - className={`cursor-pointer ${currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''}`} - style={{ - color: chainTheme.primary + ); + } + + // Render page number + return ( + + { + e.preventDefault(); + handlePageChange(page); }} - /> + isActive={page === currentPage} + style={ + page === currentPage + ? { backgroundColor: chainTheme.primary, color: 'black' } + : undefined + } + > + {page} + - - -
    + ); + })} + + + { + e.preventDefault(); + if (currentPage < totalPages) { + handlePageChange(currentPage + 1); + } + }} + className={ + currentPage === totalPages + ? 'pointer-events-none opacity-50' + : '' + } + /> + + + + )} + + {/* Total count indicator */} + {totalCount > 0 && ( +
    + Showing page {currentPage} of {totalPages} ({totalCount} total NFTs)
    )}
    ); -} +} \ No newline at end of file diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 018b5aa..4d658d2 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -11,7 +11,7 @@ import { import { CollectionNFT, CollectionNFTsResponse, - fetchCollectionInfo as alchemyFetchCollectionInfo, + fetchCollectionInfo as _alchemyFetchCollectionInfo, fetchCollectionNFTs as alchemyFetchCollectionNFTs } from './alchemyNFTApi'; import { getChainProvider, getExplorerUrl, chainConfigs } from './chainProviders'; @@ -487,7 +487,8 @@ export async function fetchCollectionNFTs( sortBy?: string, sortDirection?: 'asc' | 'desc', searchQuery?: string, - attributes?: Record + attributes?: Record, + pageKey?: string } = {} ): Promise<{ nfts: NFTMetadata[], @@ -1594,9 +1595,8 @@ export async function fetchPopularCollections(chainId: string): Promise Date: Mon, 24 Mar 2025 14:01:55 +0700 Subject: [PATCH 08/17] error --- components/NFT/VirtualizedNFTGrid.tsx | 25 +- lib/api/nftContracts.ts | 275 ++++++++++----- lib/api/nftService.ts | 462 +++++++++++++++----------- 3 files changed, 475 insertions(+), 287 deletions(-) diff --git a/components/NFT/VirtualizedNFTGrid.tsx b/components/NFT/VirtualizedNFTGrid.tsx index ea263a7..87b10ce 100644 --- a/components/NFT/VirtualizedNFTGrid.tsx +++ b/components/NFT/VirtualizedNFTGrid.tsx @@ -137,7 +137,7 @@ export default function VirtualizedNFTGrid({ setNfts(result.nfts); setTotalCount(result.totalCount); - setHasNextPage(result.hasMoreBatches); + setHasNextPage(!!result.hasMoreBatches); setLoadingProgress(result.progress); } else { // First load with cursor-based pagination @@ -228,7 +228,10 @@ export default function VirtualizedNFTGrid({ // Load more when the virtualized rows include the loading row useEffect(() => { - const lastRow = rowVirtualizer.range.end; + const range = rowVirtualizer.range; + if (!range) return; + + const lastRow = range.endIndex; const totalRows = rowCount; // If we're within 3 rows of the end and there are more items to load, load more @@ -236,7 +239,7 @@ export default function VirtualizedNFTGrid({ loadMoreNFTs(); } }, [ - rowVirtualizer.range.end, + rowVirtualizer.range?.endIndex, rowCount, isLoading, hasNextPage, @@ -379,10 +382,10 @@ export default function VirtualizedNFTGrid({ {/* Error message */} {loadingError && ( -
    -

    {loadingError}

    +
    +

    {loadingError}

    diff --git a/lib/api/nftContracts.ts b/lib/api/nftContracts.ts index 35fdbc3..bafd51d 100644 --- a/lib/api/nftContracts.ts +++ b/lib/api/nftContracts.ts @@ -391,113 +391,210 @@ export async function fetchContractNFTs( count: number = 20 ): Promise { try { + // Get provider for the specified chain const provider = getChainProvider(chainId); - const nftStandard = await detectNFTStandard(contractAddress, chainId); - if (nftStandard === 'UNKNOWN') { - throw new Error('Contract does not appear to be an NFT collection'); - } - - if (nftStandard === 'ERC1155') { - throw new Error('Batch fetching for ERC1155 not implemented'); - } - - // For BNB Chain, use cached BSCScan API to improve performance - if ((nftStandard === 'BNB721' || chainId === '0x38' || chainId === '0x61')) { - try { - const data = await cachedBscScanApiCall({ - module: 'token', - action: 'tokennfttx', - contractaddress: contractAddress, - page: '1', - offset: count.toString(), - startblock: '0', - sort: 'asc' - }, chainId); - - if (data.status === '1' && data.result) { - interface BSCNFTTransaction { - tokenID: string; - tokenName: string; - tokenSymbol: string; - } - - // Get unique token IDs from transactions with type checking - const transactions = data.result as BSCNFTTransaction[]; - const uniqueTokenIds = [...new Set(transactions - .map(tx => tx.tokenID) - .filter((id: string) => id && id.length > 0) - )]; - - // Fetch metadata for each token - const nftPromises = uniqueTokenIds.map(tokenId => - fetchNFTData(contractAddress, tokenId, chainId) - ); - - const nfts = await Promise.all(nftPromises); - return nfts.filter(nft => nft !== null) as NFTMetadata[]; - } - } catch (err) { - console.warn("BSCScan API error:", err); - // Fall back to direct contract call - } - } - - // If BSCScan API fails or for other chains, try direct contract call - const contract = getNFTContract(contractAddress, provider); + // Try to determine if this is an ERC721 or ERC1155 contract + // But handle contracts that don't implement supportsInterface + const interfaceSupport = { + erc721: false, + erc1155: false + }; try { - // Check if the contract supports enumeration - const supportsEnumeration = await contract.supportsInterface('0x780e9d63'); - - if (!supportsEnumeration) { - throw new Error('Contract does not support enumeration'); - } - - const totalSupply = await contract.totalSupply(); - - // Make sure we don't try to fetch beyond the total supply - const endIndex = Math.min(startIndex + count, totalSupply.toNumber()); + // ERC165 interface ID for ERC721 and ERC1155 + const ERC721_INTERFACE_ID = '0x80ac58cd'; + const ERC1155_INTERFACE_ID = '0xd9b67a26'; - // Fetch token IDs - const fetchPromises = []; - for (let i = startIndex; i < endIndex; i++) { - fetchPromises.push(contract.tokenByIndex(i)); - } - - const tokenIds = await Promise.all(fetchPromises); + const supportsInterfaceAbi = [ + "function supportsInterface(bytes4 interfaceId) view returns (bool)" + ]; - // Fetch metadata for each token - const nftPromises = tokenIds.map(tokenId => - fetchNFTData(contractAddress, tokenId.toString(), chainId) + const interfaceContract = new ethers.Contract( + contractAddress, + supportsInterfaceAbi, + provider ); - const nfts = await Promise.all(nftPromises); + // Try to check interfaces - but don't fail if not supported + try { + interfaceSupport.erc721 = await interfaceContract.supportsInterface(ERC721_INTERFACE_ID); + } catch (e) { + // Contract doesn't support supportsInterface, assume ERC721 + interfaceSupport.erc721 = true; + } - // Filter out null results - return nfts.filter(nft => nft !== null) as NFTMetadata[]; - } catch (err) { - console.error("Error enumerating NFTs:", err); - if (nftStandard === 'BNB721') { - toast.error("Failed to fetch BNB NFTs. The contract may not support enumeration."); - } else { - toast.error("Failed to enumerate NFTs"); + try { + interfaceSupport.erc1155 = await interfaceContract.supportsInterface(ERC1155_INTERFACE_ID); + } catch (e) { + // Contract doesn't support supportsInterface + interfaceSupport.erc1155 = false; } - return []; + } catch (e) { + console.warn('Error checking contract interface support:', e); + // Fallback to assuming ERC721 + interfaceSupport.erc721 = true; } - } catch (error) { - console.error("Error batch fetching NFTs:", error); - // Provide more specific error messages for BNB Chain - if (chainId === '0x38' || chainId === '0x61') { - toast.error("Failed to fetch BNB NFTs. Please check the contract address."); + // Determine contract type based on interface support or fallback to ERC721 + let contractType = 'erc721'; + if (interfaceSupport.erc1155) { + contractType = 'erc1155'; + } + + // Different fetching strategy based on contract type + if (contractType === 'erc721') { + return await fetchERC721NFTs(contractAddress, chainId, provider, startIndex, count); } else { - toast.error("Failed to fetch NFTs from contract"); + return await fetchERC1155NFTs(contractAddress, chainId, provider, startIndex, count); } + } catch (error) { + console.error('Error enumerating NFTs:', error); + // Return empty array instead of propagating error return []; } } +/** + * Fetch ERC721 NFTs with fallback strategies + */ +async function fetchERC721NFTs( + contractAddress: string, + chainId: string, + provider: ethers.providers.Provider, + startIndex: number, + count: number +): Promise { + // Combined ABI with all the functions we might need + const abi = [ + // ERC721 Enumerable functions + "function totalSupply() view returns (uint256)", + "function tokenByIndex(uint256 index) view returns (uint256)", + // Regular ERC721 functions + "function balanceOf(address owner) view returns (uint256)", + "function ownerOf(uint256 tokenId) view returns (address)", + "function tokenURI(uint256 tokenId) view returns (string)", + // Some contracts use tokenOfOwnerByIndex + "function tokenOfOwnerByIndex(address owner, uint256 index) view returns (uint256)" + ]; + + const contract = new ethers.Contract(contractAddress, abi, provider); + + let tokenIds: string[] = []; + + try { + // Try to use ERC721Enumerable if supported + const totalSupply = await contract.totalSupply(); + + // Make sure we don't exceed the total supply + const endIndex = Math.min(startIndex + count, totalSupply.toNumber()); + + // Get tokenIds from indexes + const tokenIdPromises = []; + for (let i = startIndex; i < endIndex; i++) { + tokenIdPromises.push(contract.tokenByIndex(i).then((id: any) => id.toString())); + } + + tokenIds = await Promise.all(tokenIdPromises); + } catch (e) { + console.warn('Contract does not support ERC721Enumerable, trying alternative approach:', e); + + // If the contract doesn't support enumeration, try a sequential approach + // Try with a range of token IDs in the expected range + const maxId = startIndex + count * 10; // Try a wider range to find valid tokens + const checkPromises = []; + + for (let i = startIndex; i < maxId && tokenIds.length < count; i++) { + checkPromises.push( + (async () => { + try { + // Check if this tokenId exists by calling ownerOf + await contract.ownerOf(i); + return i.toString(); + } catch { + // Token doesn't exist or is burned + return null; + } + })() + ); + + // Process in smaller batches to avoid overloading the provider + if (checkPromises.length >= 10 || i === maxId - 1) { + const results = await Promise.all(checkPromises); + tokenIds.push(...results.filter(Boolean) as string[]); + checkPromises.length = 0; + } + } + + // Only use the requested count + tokenIds = tokenIds.slice(0, count); + } + + // Now fetch metadata for each token + const nftsPromises = tokenIds.map(async (tokenId) => { + try { + let tokenURI = ''; + try { + tokenURI = await contract.tokenURI(tokenId); + } catch (e) { + console.warn(`Error getting tokenURI for ${tokenId}:`, e); + } + + let metadata: any = {}; + if (tokenURI) { + try { + // Handle IPFS URIs + const metadataUrl = tokenURI.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const metadataResponse = await fetch(metadataUrl); + if (metadataResponse.ok) { + metadata = await metadataResponse.json(); + } + } catch (e) { + console.warn(`Error fetching metadata for token ${tokenId}:`, e); + } + } + + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: metadata.name || `NFT #${tokenId}`, + description: metadata.description || '', + imageUrl: metadata.image || '', + attributes: metadata.attributes || [], + chain: chainId + }; + } catch (e) { + console.warn(`Error processing token ${tokenId}:`, e); + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: `NFT #${tokenId}`, + description: '', + imageUrl: '', + attributes: [], + chain: chainId + }; + } + }); + + return await Promise.all(nftsPromises); +} + +/** + * Fetch ERC1155 NFTs + */ +async function fetchERC1155NFTs( + contractAddress: string, + chainId: string, + provider: ethers.providers.Provider, + startIndex: number, + count: number +): Promise { + // ERC1155 doesn't have a standard enumeration mechanism + // We'll make a best effort to get token IDs from known collections + return []; // Implement ERC1155 support if needed +} + /** * Check if an address owns a specific NFT */ diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 4d658d2..f38256c 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -501,25 +501,23 @@ export async function fetchCollectionNFTs( sortBy = 'tokenId', sortDirection = 'asc', searchQuery = '', - attributes = {} + attributes = {}, + pageKey } = options; - // Check if we should use direct contract fetching or API - // For well-known collections or testnet, use direct contract fetching + // Check if we should use direct contract fetching for known collections const useDirectFetching = [ - // Our CryptoPath Genesis on BNB Testnet - '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', - // Some popular testnet or demo collections + '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', // CryptoPath Genesis on BNB Testnet '0x7c09282c24c363073e0f30d74c301c312e5533ac' ].includes(contractAddress.toLowerCase()); try { let nfts: NFTMetadata[] = []; let totalCount = 0; - let pageKey: string | undefined = undefined; + let resultPageKey: string | undefined = undefined; if (useDirectFetching) { - // Check cache first + // Simply proceed with direct fetching if this is a known collection const cacheKey = `${chainId}-${contractAddress.toLowerCase()}-nfts`; const cachedData = collectionNFTsCache.get(cacheKey); @@ -539,92 +537,155 @@ export async function fetchCollectionNFTs( totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; } else { - // Define fallback strategy based on chain + // Define API strategies based on chain if (isBNBChain(chainId)) { - // BNB Chain: Try BSCScan -> Moralis -> Contract fallback + // BNB Chain: Try Moralis first (priority), then BSCScan, finally contract fallback let success = false; - if (apiStatus.bscscan) { + // Try Moralis first for BNB Chain (preferred) + if (MORALIS_API_KEY) { try { - const result = await fetchNFTsFromBSCScan(contractAddress, chainId, page, pageSize); + console.log('Trying Moralis for BNB Chain'); + const result = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); nfts = result.nfts; totalCount = result.totalCount; success = true; + console.log('Successfully fetched from Moralis'); } catch (error) { - console.warn("BSCScan NFT fetch failed:", error); - apiStatus.bscscan = false; + console.warn("Moralis NFT fetch failed:", error); + apiStatus.moralis = false; apiStatus.lastChecked = Date.now(); } + } else { + console.log('Skipping Moralis - No API key available'); } - if (!success && apiStatus.moralis) { + // Try BSCScan as fallback for BNB Chain + if (!success && BSCSCAN_API_KEY) { try { - const result = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); + console.log('Trying BSCScan for BNB Chain'); + const result = await fetchNFTsFromBSCScan(contractAddress, chainId, page, pageSize); nfts = result.nfts; totalCount = result.totalCount; success = true; + console.log('Successfully fetched from BSCScan'); } catch (error) { - console.warn("Moralis NFT fetch failed:", error); - apiStatus.moralis = false; + console.warn("BSCScan NFT fetch failed:", error); + apiStatus.bscscan = false; apiStatus.lastChecked = Date.now(); } + } else if (!success) { + console.log('Skipping BSCScan - No API key available'); } + // Last resort for BNB Chain: direct contract fetching if (!success) { - // Last resort: direct contract fetching + console.log('Falling back to direct contract fetching for BNB Chain'); const startIndex = (page - 1) * pageSize; - nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); - totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; + try { + nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); + // Generate a mock total count if contract fetching worked but we don't know the total + totalCount = nfts.length > 0 ? Math.max(nfts.length, pageSize * 2) : 0; + + // If we have collection info, use that for total supply + try { + const info = await fetchCollectionInfo(contractAddress, chainId); + if (info && info.totalSupply) { + totalCount = parseInt(info.totalSupply); + } + } catch (e) { + console.warn('Could not fetch total supply from collection info'); + } + } catch (contractError) { + console.error('Contract fetching failed:', contractError); + // Return empty list as last resort + nfts = []; + totalCount = 0; + } } } else { - // Ethereum: Try Alchemy -> Moralis -> Etherscan -> Contract fallback + // Ethereum: Try Alchemy (priority) -> Moralis -> Etherscan -> Contract fallback let success = false; - if (apiStatus.alchemy) { + // Try Alchemy first for Ethereum (preferred) + if (ALCHEMY_API_KEY) { try { + console.log('Trying Alchemy for Ethereum'); const result = await fetchNFTsFromAlchemy(contractAddress, chainId, page, pageSize); nfts = result.nfts; totalCount = result.totalCount; - pageKey = result.pageKey; + resultPageKey = result.pageKey; success = true; + console.log('Successfully fetched from Alchemy'); } catch (error) { console.warn("Alchemy NFT fetch failed:", error); apiStatus.alchemy = false; apiStatus.lastChecked = Date.now(); } + } else { + console.log('Skipping Alchemy - No API key available'); } - if (!success && apiStatus.moralis) { + // Try Moralis as second option for Ethereum + if (!success && MORALIS_API_KEY) { try { + console.log('Trying Moralis for Ethereum'); const result = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); nfts = result.nfts; totalCount = result.totalCount; success = true; + console.log('Successfully fetched from Moralis'); } catch (error) { console.warn("Moralis NFT fetch failed:", error); apiStatus.moralis = false; apiStatus.lastChecked = Date.now(); } + } else if (!success) { + console.log('Skipping Moralis - No API key available'); } - if (!success && apiStatus.etherscan) { + // Try Etherscan as third option for Ethereum + if (!success && ETHERSCAN_API_KEY) { try { + console.log('Trying Etherscan for Ethereum'); const result = await fetchNFTsFromEtherscan(contractAddress, chainId, page, pageSize); nfts = result.nfts; totalCount = result.totalCount; success = true; + console.log('Successfully fetched from Etherscan'); } catch (error) { console.warn("Etherscan NFT fetch failed:", error); apiStatus.etherscan = false; apiStatus.lastChecked = Date.now(); } + } else if (!success) { + console.log('Skipping Etherscan - No API key available'); } + // Last resort for Ethereum: direct contract fetching if (!success) { - // Last resort: direct contract fetching + console.log('Falling back to direct contract fetching for Ethereum'); const startIndex = (page - 1) * pageSize; - nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); - totalCount = nfts.length > 0 ? parseInt(await fetchCollectionInfo(contractAddress, chainId).then(info => info.totalSupply)) : 0; + try { + nfts = await fetchContractNFTs(contractAddress, chainId, startIndex, pageSize); + // Generate a mock total count if contract fetching worked but we don't know the total + totalCount = nfts.length > 0 ? Math.max(nfts.length, pageSize * 2) : 0; + + // If we have collection info, use that for total supply + try { + const info = await fetchCollectionInfo(contractAddress, chainId); + if (info && info.totalSupply) { + totalCount = parseInt(info.totalSupply); + } + } catch (e) { + console.warn('Could not fetch total supply from collection info'); + } + } catch (contractError) { + console.error('Contract fetching failed:', contractError); + // Return empty list as last resort + nfts = []; + totalCount = 0; + } } } } @@ -642,23 +703,30 @@ export async function fetchCollectionNFTs( // Apply attribute filtering if (Object.keys(attributes).length > 0) { nfts = nfts.filter(nft => { - for (const [traitType, values] of Object.entries(attributes)) { - if (values.length === 0) continue; + if (!nft.attributes) return false; + + // Check if NFT matches all selected attribute filters + return Object.entries(attributes).every(([traitType, values]) => { + if (values.length === 0) return true; // Skip this attribute if no values selected + + const nftAttribute = nft.attributes?.find(attr => + attr.trait_type.toLowerCase() === traitType.toLowerCase() + ); - const nftAttribute = nft.attributes?.find(attr => attr.trait_type === traitType); if (!nftAttribute || !values.includes(nftAttribute.value)) { return false; } - } - return true; + return true; + }); }); } // Apply sorting nfts.sort((a, b) => { if (sortBy === 'tokenId') { - const idA = parseInt(a.tokenId, 16) || 0; - const idB = parseInt(b.tokenId, 16) || 0; + // Handle numeric tokenIds properly + const idA = parseInt(a.tokenId, 10) || 0; + const idB = parseInt(b.tokenId, 10) || 0; return sortDirection === 'asc' ? idA - idB : idB - idA; } else if (sortBy === 'name') { return sortDirection === 'asc' @@ -681,7 +749,7 @@ export async function fetchCollectionNFTs( return { nfts, totalCount, - pageKey + pageKey: resultPageKey }; } catch (error) { console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); @@ -732,7 +800,7 @@ async function fetchNFTsFromAlchemy( } /** - * Fetch NFTs from Moralis API + * Fetch NFTs from Moralis API with better error handling */ async function fetchNFTsFromMoralis( contractAddress: string, @@ -752,74 +820,79 @@ async function fetchNFTsFromMoralis( ? (chainId === '0x38' ? 'bsc' : 'bsc testnet') : (chainId === '0x1' ? 'eth' : chainId === '0xaa36a7' ? 'sepolia' : 'goerli'); - const options = { - method: 'GET', - url: `https://deep-index.moralis.io/api/v2/nft/${contractAddress}`, - params: { - chain: moralisChain, - format: 'decimal', - limit: pageSize, - cursor: '', // Moralis uses cursor-based pagination - offset: (page - 1) * pageSize - }, - headers: { - accept: 'application/json', - 'X-API-Key': MORALIS_API_KEY + try { + const options = { + method: 'GET', + url: `https://deep-index.moralis.io/api/v2/nft/${contractAddress}`, + params: { + chain: moralisChain, + format: 'decimal', + limit: pageSize, + cursor: '', // Moralis uses cursor-based pagination + offset: (page - 1) * pageSize + }, + headers: { + accept: 'application/json', + 'X-API-Key': MORALIS_API_KEY + } + }; + + const response = await axios.request(options); + + if (response.status !== 200) { + throw new Error(`Moralis API error: ${response.status}`); } - }; - - const response = await axios.request(options); - - if (response.status !== 200) { - throw new Error(`Moralis API error: ${response.status}`); - } - - const data = response.data; - - // Map Moralis data to our format - const nfts: NFTMetadata[] = data.result.map((item: any) => { - // Try to parse metadata - let attributes: {trait_type: string, value: string}[] = []; - let name = `NFT #${item.token_id}`; - let description = ''; - let imageUrl = ''; - try { - if (item.metadata) { - const metadata = typeof item.metadata === 'string' - ? JSON.parse(item.metadata) - : item.metadata; - - name = metadata.name || name; - description = metadata.description || ''; - imageUrl = metadata.image || ''; - - if (metadata.attributes && Array.isArray(metadata.attributes)) { - attributes = metadata.attributes.map((attr: any) => ({ - trait_type: attr.trait_type || '', - value: attr.value || '' - })); + const data = response.data; + + // Map Moralis data to our format + const nfts: NFTMetadata[] = data.result.map((item: any) => { + // Try to parse metadata + let attributes: {trait_type: string, value: string}[] = []; + let name = `NFT #${item.token_id}`; + let description = ''; + let imageUrl = ''; + + try { + if (item.metadata) { + const metadata = typeof item.metadata === 'string' + ? JSON.parse(item.metadata) + : item.metadata; + + name = metadata.name || name; + description = metadata.description || ''; + imageUrl = metadata.image || ''; + + if (metadata.attributes && Array.isArray(metadata.attributes)) { + attributes = metadata.attributes.map((attr: any) => ({ + trait_type: attr.trait_type || '', + value: attr.value || '' + })); + } } + } catch (e) { + console.warn('Error parsing Moralis NFT metadata:', e); } - } catch (e) { - console.warn('Error parsing Moralis NFT metadata:', e); - } + + return { + id: `${contractAddress.toLowerCase()}-${item.token_id}`, + tokenId: item.token_id, + name, + description, + imageUrl, + attributes, + chain: chainId + }; + }); return { - id: `${contractAddress.toLowerCase()}-${item.token_id}`, - tokenId: item.token_id, - name, - description, - imageUrl, - attributes, - chain: chainId + nfts, + totalCount: data.total || nfts.length }; - }); - - return { - nfts, - totalCount: data.total || nfts.length - }; + } catch (error) { + console.error('Error in fetchNFTsFromMoralis:', error); + throw error; + } } /** @@ -950,7 +1023,7 @@ async function fetchNFTsFromEtherscan( } /** - * Fetch NFTs from BSCScan API + * Fetch NFTs from BSCScan API with better error handling */ async function fetchNFTsFromBSCScan( contractAddress: string, @@ -975,100 +1048,115 @@ async function fetchNFTsFromBSCScan( // Get token info from BSCScan const apiUrl = `https://${domain}/api?module=account&action=tokennfttx&contractaddress=${contractAddress}&page=${page}&offset=${pageSize}&sort=asc&apikey=${BSCSCAN_API_KEY}`; - const response = await fetch(apiUrl); - if (!response.ok) { - throw new Error(`BSCScan API error: ${response.status}`); - } - - const data = await response.json(); - - if (data.status !== '1') { - throw new Error(`BSCScan API error: ${data.message}`); - } - - // Need to deduplicate token IDs as transfer events might have duplicates - const tokenSet = new Set(); - const transferEvents = data.result || []; - - transferEvents.forEach((tx: any) => { - tokenSet.add(tx.tokenID); - }); - - const tokenIds = Array.from(tokenSet).slice(0, pageSize); - - // For each token ID, try to get metadata from the NFT contract - const nftPromises = tokenIds.map(async (tokenId) => { - try { - // Try direct contract query for token URI and metadata - const provider = getChainProvider(chainId); - const abi = ["function tokenURI(uint256 tokenId) view returns (string)"]; - const contract = new ethers.Contract(contractAddress, abi, provider); - - // Get token URI - const tokenUri = await contract.tokenURI(tokenId).catch(() => ''); - - // Fetch metadata if token URI is available - let metadata: any = {}; - if (tokenUri) { + try { + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error(`BSCScan API error: ${response.status}`); + } + + const data = await response.json(); + + if (data.status !== '1') { + // Handle rate limits gracefully + if (data.message?.includes('rate limit')) { + console.warn('BSCScan rate limit reached'); + return { nfts: [], totalCount: 0 }; + } + throw new Error(`BSCScan API error: ${data.message}`); + } + + // Need to deduplicate token IDs as transfer events might have duplicates + const tokenSet = new Set(); + const transferEvents = data.result || []; + + transferEvents.forEach((tx: any) => { + tokenSet.add(tx.tokenID); + }); + + const tokenIds = Array.from(tokenSet).slice(0, pageSize); + + // For each token ID, try to get metadata from the NFT contract + const nftPromises = tokenIds.map(async (tokenId) => { + try { + // Try direct contract query for token URI and metadata + const provider = getChainProvider(chainId); + const abi = ["function tokenURI(uint256 tokenId) view returns (string)"]; + const contract = new ethers.Contract(contractAddress, abi, provider); + + // Get token URI + let tokenUri = ''; try { - // Handle IPFS URIs - const metadataUrl = tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/'); - const metadataResponse = await fetch(metadataUrl); - if (metadataResponse.ok) { - metadata = await metadataResponse.json(); - } + tokenUri = await contract.tokenURI(tokenId).catch(() => ''); } catch (e) { - console.warn(`Error fetching metadata for token ${tokenId}:`, e); + console.warn(`Error getting tokenURI for token ${tokenId}:`, e); } + + // Fetch metadata if token URI is available + let metadata: any = {}; + if (tokenUri) { + try { + // Handle IPFS URIs + const metadataUrl = tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const metadataResponse = await fetch(metadataUrl); + if (metadataResponse.ok) { + metadata = await metadataResponse.json(); + } + } catch (e) { + console.warn(`Error fetching metadata for token ${tokenId}:`, e); + } + } + + // Create NFTMetadata object + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: metadata.name || `NFT #${tokenId}`, + description: metadata.description || '', + imageUrl: metadata.image || '', + attributes: metadata.attributes || [], + chain: chainId + }; + } catch (e) { + console.warn(`Error getting NFT data for token ${tokenId}:`, e); + // Return placeholder for errors + return { + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId, + name: `NFT #${tokenId}`, + description: '', + imageUrl: '', + attributes: [], + chain: chainId + }; } - - // Create NFTMetadata object - return { - id: `${contractAddress.toLowerCase()}-${tokenId}`, - tokenId, - name: metadata.name || `NFT #${tokenId}`, - description: metadata.description || '', - imageUrl: metadata.image || '', - attributes: metadata.attributes || [], - chain: chainId - }; - } catch (e) { - console.warn(`Error getting NFT data for token ${tokenId}:`, e); - // Return placeholder for errors - return { - id: `${contractAddress.toLowerCase()}-${tokenId}`, - tokenId, - name: `NFT #${tokenId}`, - description: '', - imageUrl: '', - attributes: [], - chain: chainId - }; - } - }); - - const nfts = await Promise.all(nftPromises); - - // Get total count - this is a rough estimate based on transfer events - const apiUrlForCount = `https://${domain}/api?module=stats&action=tokensupply&contractaddress=${contractAddress}&apikey=${BSCSCAN_API_KEY}`; - - let totalCount = tokenSet.size; - try { - const countResponse = await fetch(apiUrlForCount); - if (countResponse.ok) { - const countData = await countResponse.json(); - if (countData.status === '1') { - totalCount = parseInt(countData.result, 10); + }); + + const nfts = await Promise.all(nftPromises); + + // Get total count - this is a rough estimate based on transfer events + const apiUrlForCount = `https://${domain}/api?module=stats&action=tokensupply&contractaddress=${contractAddress}&apikey=${BSCSCAN_API_KEY}`; + + let totalCount = tokenSet.size; + try { + const countResponse = await fetch(apiUrlForCount); + if (countResponse.ok) { + const countData = await countResponse.json(); + if (countData.status === '1') { + totalCount = parseInt(countData.result, 10); + } } + } catch (e) { + console.warn('Error getting total token count:', e); } - } catch (e) { - console.warn('Error getting total token count:', e); + + return { + nfts, + totalCount + }; + } catch (error) { + console.error('Error in fetchNFTsFromBSCScan:', error); + throw error; } - - return { - nfts, - totalCount - }; } /** From 55171af0ae5956b4ead9450fab837536c9106fe8 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 14:42:14 +0700 Subject: [PATCH 09/17] run build --- app/NFT/collection/[collectionId]/page.tsx | 2 +- app/NFT/layout.tsx | 4 +- app/api/nfts/collection/route.ts | 48 +- app/search-offchain/TransactionContent.tsx | 2 +- app/search/TransactionContent.tsx | 6 +- components/NFT/PaginatedNFTGrid.tsx | 411 +++++++++--------- components/portfolio/NFTsCard.tsx | 4 + .../TransactionGraphOffChain.tsx | 2 +- .../TransactionTableOffChain.tsx | 2 +- components/search/NFTGallery.tsx | 2 +- lib/api/moralisApi.ts | 14 +- lib/api/nftMockData.ts | 140 ++++++ next.config.js | 5 +- 13 files changed, 399 insertions(+), 243 deletions(-) create mode 100644 lib/api/nftMockData.ts diff --git a/app/NFT/collection/[collectionId]/page.tsx b/app/NFT/collection/[collectionId]/page.tsx index 356ef49..b67d0ef 100644 --- a/app/NFT/collection/[collectionId]/page.tsx +++ b/app/NFT/collection/[collectionId]/page.tsx @@ -891,7 +891,7 @@ export default function CollectionDetailsPage() { attributes={selectedAttributes} viewMode={viewMode} onNFTClick={handleNFTClick} - itemsPerPage={20} // Reduced to exactly 20 items per page + itemsPerPage={20} // Using exactly 20 items per page defaultPage={currentPage} onPageChange={(page) => { setCurrentPage(page); diff --git a/app/NFT/layout.tsx b/app/NFT/layout.tsx index ad13c0d..9f37a02 100644 --- a/app/NFT/layout.tsx +++ b/app/NFT/layout.tsx @@ -17,7 +17,7 @@ export default function NFTLayout({ children }: { children: React.ReactNode }) { // Determine active section based on URL const isMarketplace = pathname === '/NFT'; - const isCollections = pathname.includes('/NFT/collection'); + const isCollections = pathname ? pathname.includes('/NFT/collection') : false; useEffect(() => { setMounted(true); @@ -120,7 +120,7 @@ export default function NFTLayout({ children }: { children: React.ReactNode }) {
    )} - {pathname.includes('/NFT/collection/') && pathname !== '/NFT/collection' && ( + {pathname && pathname.includes('/NFT/collection/') && pathname !== '/NFT/collection' && (
  • diff --git a/app/api/nfts/collection/route.ts b/app/api/nfts/collection/route.ts index b17c521..e5794a8 100644 --- a/app/api/nfts/collection/route.ts +++ b/app/api/nfts/collection/route.ts @@ -1,4 +1,4 @@ -import type { NextApiRequest, NextApiResponse } from 'next'; +import { NextRequest, NextResponse } from 'next/server'; import axios from 'axios'; // Rate limiting configuration @@ -8,30 +8,26 @@ const MAX_REQUESTS_PER_WINDOW = 50; // 50 requests per minute // Basic in-memory rate limiter const rateLimiter = new Map(); -export default async function handler( - req: NextApiRequest, - res: NextApiResponse -) { - // Only allow GET requests - if (req.method !== 'GET') { - return res.status(405).json({ error: 'Method not allowed' }); +export async function GET(req: NextRequest) { + // Get URL from searchParams + const url = req.nextUrl.searchParams.get('url'); + + if (!url) { + return NextResponse.json({ error: 'URL parameter is required' }, { status: 400 }); } - // Apply rate limiting based on IP address - const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress || 'unknown'; + // Apply rate limiting based on IP + const ip = req.headers.get('x-forwarded-for') || 'unknown'; const clientId = String(ip); // Check rate limit if (!checkRateLimit(clientId)) { - return res.status(429).json({ error: 'Too many requests. Please try again later.' }); - } - - const { url } = req.query; - - if (!url || typeof url !== 'string') { - return res.status(400).json({ error: 'URL parameter is required' }); + return NextResponse.json( + { error: 'Too many requests. Please try again later.' }, + { status: 429 } + ); } - + try { // Validate that the URL is for the expected API if ( @@ -40,7 +36,7 @@ export default async function handler( !url.includes('etherscan.io/api') && !url.includes('bscscan.com/api') ) { - return res.status(403).json({ error: 'Invalid API URL' }); + return NextResponse.json({ error: 'Invalid API URL' }, { status: 403 }); } // Make the request to the NFT API service @@ -55,7 +51,7 @@ export default async function handler( }); // Return the data from the API - return res.status(response.status).json(response.data); + return NextResponse.json(response.data, { status: response.status }); } catch (error: any) { console.error('API proxy error:', error); @@ -63,22 +59,22 @@ export default async function handler( if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx - return res.status(error.response.status).json({ + return NextResponse.json({ error: 'External API error', details: error.response.data - }); + }, { status: error.response.status }); } else if (error.request) { // The request was made but no response was received - return res.status(504).json({ + return NextResponse.json({ error: 'External API timeout', message: 'The request timed out' - }); + }, { status: 504 }); } else { // Something happened in setting up the request that triggered an Error - return res.status(500).json({ + return NextResponse.json({ error: 'Server error', message: error.message - }); + }, { status: 500 }); } } } diff --git a/app/search-offchain/TransactionContent.tsx b/app/search-offchain/TransactionContent.tsx index b1136f8..82a6f61 100644 --- a/app/search-offchain/TransactionContent.tsx +++ b/app/search-offchain/TransactionContent.tsx @@ -10,7 +10,7 @@ import SearchBarOffChain from "@/components/search-offchain/SearchBarOffChain" export default function Transactions() { const searchParams = useSearchParams() - const address = searchParams.get("address") + const address = searchParams?.get("address") ?? null return (
    diff --git a/app/search/TransactionContent.tsx b/app/search/TransactionContent.tsx index 0e33076..0b02bf3 100644 --- a/app/search/TransactionContent.tsx +++ b/app/search/TransactionContent.tsx @@ -22,9 +22,9 @@ const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/; export default function Transactions() { const searchParams = useSearchParams() const router = useRouter() - const address = searchParams.get("address") - const networkParam = searchParams.get("network") || "mainnet" - const providerParam = searchParams.get("provider") || "etherscan" + const address = searchParams?.get("address") ?? null + const networkParam = searchParams?.get("network") ?? "mainnet" + const providerParam = searchParams?.get("provider") ?? "etherscan" const [network, setNetwork] = useState(networkParam) const [provider, setProvider] = useState(providerParam) const [pendingTxCount, setPendingTxCount] = useState(null) diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index e548924..2a2440e 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -1,283 +1,290 @@ -import { useState, useEffect } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; +import React, { useState, useEffect } from 'react'; +import { motion } from 'framer-motion'; import { Loader2 } from 'lucide-react'; -import { fetchCollectionNFTs } from '@/lib/api/alchemyNFTApi'; import { fetchPaginatedNFTs } from '@/lib/api/nftService'; -import { getChainColorTheme } from '@/lib/api/chainProviders'; -import { CollectionNFT } from '@/lib/api/alchemyNFTApi'; import AnimatedNFTCard from './AnimatedNFTCard'; +import { getChainColorTheme } from '@/lib/api/chainProviders'; +import { useToast } from '@/hooks/use-toast'; import { Pagination, PaginationContent, + PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, -} from '@/components/ui/pagination'; +} from "@/components/ui/pagination"; + +interface NFT { + id: string; + tokenId: string; + name: string; + description?: string; + imageUrl: string; + chain: string; + attributes?: Array<{ + trait_type: string; + value: string; + }>; +} interface PaginatedNFTGridProps { contractAddress: string; chainId: string; - sortBy: string; - sortDirection: 'asc' | 'desc'; - searchQuery: string; - attributes: Record; - viewMode: 'grid' | 'list'; - onNFTClick: (nft: CollectionNFT) => void; + searchQuery?: string; + sortBy?: string; + sortDirection?: 'asc' | 'desc'; + attributes?: Record; + viewMode?: 'grid' | 'list'; + onNFTClick?: (nft: NFT) => void; itemsPerPage?: number; defaultPage?: number; onPageChange?: (page: number) => void; } -export default function PaginatedNFTGrid({ +const PaginatedNFTGrid: React.FC = ({ contractAddress, chainId, - sortBy, - sortDirection, - searchQuery, - attributes, - viewMode, + searchQuery = '', + sortBy = 'tokenId', + sortDirection = 'asc', + attributes = {}, + viewMode = 'grid', onNFTClick, itemsPerPage = 20, defaultPage = 1, onPageChange -}: PaginatedNFTGridProps) { - const [nfts, setNfts] = useState([]); +}) => { + const [nfts, setNfts] = useState([]); const [loading, setLoading] = useState(true); - const [totalCount, setTotalCount] = useState(0); const [currentPage, setCurrentPage] = useState(defaultPage); const [totalPages, setTotalPages] = useState(1); - const [progress, setProgress] = useState(0); + const [totalItems, setTotalItems] = useState(0); + const [error, setError] = useState(null); + + const { toast } = useToast(); - // Chain theme for styling + // Get theme colors based on chain const chainTheme = getChainColorTheme(chainId); + // Load NFTs when parameters change useEffect(() => { - loadNFTs(); - }, [contractAddress, chainId, currentPage, sortBy, sortDirection, searchQuery, JSON.stringify(attributes)]); - - async function loadNFTs() { - setLoading(true); - setProgress(10); - - try { - // Use the cached and optimized fetching function - const result = await fetchPaginatedNFTs( - contractAddress, - chainId, - currentPage, - itemsPerPage, - sortBy, - sortDirection, - searchQuery, - attributes - ); + const loadNFTs = async () => { + setLoading(true); + setError(null); - setNfts(result.nfts); - setTotalCount(result.totalCount); - - // Calculate total pages - const pages = Math.max(1, Math.ceil(result.totalCount / itemsPerPage)); - setTotalPages(pages); - - setProgress(100); - } catch (error) { - console.error("Error loading NFTs:", error); - setNfts([]); - setTotalCount(0); - setTotalPages(1); - } finally { - setLoading(false); - } - } + try { + const result = await fetchPaginatedNFTs( + contractAddress, + chainId, + currentPage, + itemsPerPage, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + setNfts(result.nfts); + setTotalPages(result.totalPages); + setTotalItems(result.totalCount); + } catch (err) { + console.error('Error loading NFTs:', err); + setError('Failed to load NFTs. Please try again.'); + toast({ + title: 'Error', + description: 'Failed to load NFTs. Please try again.', + variant: 'destructive', + }); + } finally { + setLoading(false); + } + }; + + loadNFTs(); + }, [ + contractAddress, + chainId, + currentPage, + itemsPerPage, + sortBy, + sortDirection, + searchQuery, + JSON.stringify(attributes), + toast + ]); + // Handle page change const handlePageChange = (page: number) => { + if (page < 1 || page > totalPages || page === currentPage) return; + setCurrentPage(page); if (onPageChange) { onPageChange(page); } + + // Scroll to top of grid + window.scrollTo({ top: 0, behavior: 'smooth' }); }; - // Simple pagination controls helper - const getPaginationItems = () => { + // Generate pagination items + const renderPaginationItems = () => { const items = []; + const maxVisible = 5; // Maximum number of page buttons to show - // Always show first page - items.push(1); + let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2)); + const endPage = Math.min(totalPages, startPage + maxVisible - 1); - // Calculate range around current page - const startPage = Math.max(2, currentPage - 1); - const endPage = Math.min(totalPages - 1, currentPage + 1); - - // Add ellipsis after first page if needed - if (startPage > 2) { - items.push('ellipsis1'); + // Adjust start if we're near the end + if (endPage - startPage + 1 < maxVisible) { + startPage = Math.max(1, endPage - maxVisible + 1); } - // Add pages around current page - for (let i = startPage; i <= endPage; i++) { - items.push(i); + // Add first page if not included + if (startPage > 1) { + items.push( + + handlePageChange(1)}>1 + + ); + + // Add ellipsis if there's a gap + if (startPage > 2) { + items.push( + + + + ); + } } - // Add ellipsis before last page if needed - if (endPage < totalPages - 1) { - items.push('ellipsis2'); + // Add page numbers + for (let i = startPage; i <= endPage; i++) { + items.push( + + handlePageChange(i)} + className={currentPage === i ? chainTheme.backgroundClass : ''} + > + {i} + + + ); } - // Add last page if more than one page - if (totalPages > 1) { - items.push(totalPages); + // Add last page if not included + if (endPage < totalPages) { + // Add ellipsis if there's a gap + if (endPage < totalPages - 1) { + items.push( + + + + ); + } + + items.push( + + handlePageChange(totalPages)}> + {totalPages} + + + ); } return items; }; + // Handle NFT click + const handleNFTClick = (nft: NFT) => { + if (onNFTClick) { + onNFTClick(nft); + } + }; + return (
    - {/* Loading indicator or NFT grid */} - {loading ? ( -
    - -
    Loading NFTs...
    - - {/* Progress bar */} -
    -
    -
    + {/* Loading state */} + {loading && ( +
    +
    - ) : ( - - +

    {error}

    + +
    + )} + + {/* NFT Grid */} + {!loading && !error && ( + + {nfts.length > 0 ? ( + nfts.map((nft, index) => ( + handleNFTClick(nft)} + index={index} + /> + )) + ) : ( +
    +

    No NFTs found for this collection.

    +
    + )} +     )} {/* Pagination controls */} - {totalPages > 1 && ( - + {!loading && totalPages > 1 && ( + { - e.preventDefault(); - if (currentPage > 1) { - handlePageChange(currentPage - 1); - } - }} - className={ - currentPage === 1 - ? 'pointer-events-none opacity-50' - : '' - } + onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)} + className={`${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} /> - {getPaginationItems().map((page, i) => { - if (typeof page === 'string') { - // Render ellipsis - return ( - - ... - - ); - } - - // Render page number - return ( - - { - e.preventDefault(); - handlePageChange(page); - }} - isActive={page === currentPage} - style={ - page === currentPage - ? { backgroundColor: chainTheme.primary, color: 'black' } - : undefined - } - > - {page} - - - ); - })} + {renderPaginationItems()} { - e.preventDefault(); - if (currentPage < totalPages) { - handlePageChange(currentPage + 1); - } - }} - className={ - currentPage === totalPages - ? 'pointer-events-none opacity-50' - : '' - } + onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)} + className={`${currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} /> )} - {/* Total count indicator */} - {totalCount > 0 && ( -
    - Showing page {currentPage} of {totalPages} ({totalCount} total NFTs) + {/* Items count info */} + {!loading && nfts.length > 0 && ( +
    + Showing {(currentPage - 1) * itemsPerPage + 1}- + {Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems} items
    )}
    ); -} \ No newline at end of file +}; + +export default PaginatedNFTGrid; \ No newline at end of file diff --git a/components/portfolio/NFTsCard.tsx b/components/portfolio/NFTsCard.tsx index 5f1218f..f66ad51 100644 --- a/components/portfolio/NFTsCard.tsx +++ b/components/portfolio/NFTsCard.tsx @@ -49,6 +49,7 @@ const NFTsCard: React.FC = ({ nfts, isLoading }) => {
    + {/* eslint-disable-next-line jsx-a11y/alt-text */}

    NFT Collection

    @@ -89,6 +90,7 @@ const NFTsCard: React.FC = ({ nfts, isLoading }) => { /> ) : (
    + {/* eslint-disable-next-line jsx-a11y/alt-text */}
    )} @@ -115,6 +117,7 @@ const NFTsCard: React.FC = ({ nfts, isLoading }) => { )) ) : (
    + {/* eslint-disable-next-line jsx-a11y/alt-text */}

    No NFTs found for this wallet @@ -178,6 +181,7 @@ const NFTsCard: React.FC = ({ nfts, isLoading }) => { /> ) : (

    + {/* eslint-disable-next-line jsx-a11y/alt-text */}
    )} diff --git a/components/search-offchain/TransactionGraphOffChain.tsx b/components/search-offchain/TransactionGraphOffChain.tsx index 065e4b5..105ff97 100644 --- a/components/search-offchain/TransactionGraphOffChain.tsx +++ b/components/search-offchain/TransactionGraphOffChain.tsx @@ -54,7 +54,7 @@ function getNameForAddress(address: string): string | null { export default function TransactionGraphOffChain() { const searchParams = useSearchParams(); const router = useRouter(); - const address = searchParams.get("address"); + const address = searchParams?.get("address") ?? null; const [graphData, setGraphData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); diff --git a/components/search-offchain/TransactionTableOffChain.tsx b/components/search-offchain/TransactionTableOffChain.tsx index d559bd7..076a5b2 100644 --- a/components/search-offchain/TransactionTableOffChain.tsx +++ b/components/search-offchain/TransactionTableOffChain.tsx @@ -20,7 +20,7 @@ interface Transaction { export default function TransactionTableOffChain() { const searchParams = useSearchParams() - const address = searchParams.get("address") + const address = searchParams?.get("address") ?? null const [transactions, setTransactions] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) diff --git a/components/search/NFTGallery.tsx b/components/search/NFTGallery.tsx index 7ba1955..7f6ee13 100644 --- a/components/search/NFTGallery.tsx +++ b/components/search/NFTGallery.tsx @@ -86,7 +86,7 @@ const isPotentialSpam = (nft: NFT): boolean => { export default function NFTGallery() { const searchParams = useSearchParams() - const address = searchParams.get("address") + const address = (searchParams as ReturnType)?.get("address") ?? null const [nfts, setNFTs] = useState([]) const [totalCount, setTotalCount] = useState(0) const [pageKeys, setPageKeys] = useState<(string | null)[]>([null]) diff --git a/lib/api/moralisApi.ts b/lib/api/moralisApi.ts index 2c691d0..6c06825 100644 --- a/lib/api/moralisApi.ts +++ b/lib/api/moralisApi.ts @@ -1,7 +1,7 @@ import axios from 'axios'; import { toast } from 'sonner'; -const MORALIS_API_KEY = process.env.MORALIS_API_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJub25jZSI6IjY4ODEyMzE5LWNiMDAtNDA3MC1iOTEyLWIzNTllYjI4ZjQyOCIsIm9yZ0lkIjoiNDM3Nzk0IiwidXNlcklkIjoiNDUwMzgyIiwidHlwZUlkIjoiYTU5Mzk2NGYtZWUxNi00NGY3LWIxMDUtZWNhMzAwMjUwMDg4IiwidHlwZSI6IlBST0pFQ1QiLCJpYXQiOjE3NDI3ODk3MzEsImV4cCI6NDg5ODU0OTczMX0.4XB5n8uVFQkMwMO2Ck4FbNQw8daQp1uDdMvXmYFr9WA'; +const MORALIS_API_KEY = process.env.NEXT_PUBLIC_MORALIS_API_KEY || process.env.MORALIS_API_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJub25jZSI6IjY4ODEyMzE5LWNiMDAtNDA3MC1iOTEyLWIzNTllYjI4ZjQyOCIsIm9yZ0lkIjoiNDM3Nzk0IiwidXNlcklkIjoiNDUwMzgyIiwidHlwZUlkIjoiYTU5Mzk2NGYtZWUxNi00NGY3LWIxMDUtZWNhMzAwMjUwMDg4IiwidHlwZSI6IlBST0pFQ1QiLCJpYXQiOjE3NDI3ODk3MzEsImV4cCI6NDg5ODU0OTczMX0.4XB5n8uVFQkMwMO2Ck4FbNQw8daQp1uDdMvXmYFr9WA'; // Simple in-memory cache for API responses const responseCache = new Map(); @@ -19,6 +19,13 @@ const CHAIN_MAPPING: Record = { '0x61': 'bsc testnet' }; +/** + * Check if API key is valid for use + */ +export function isValidApiKey() { + return !!MORALIS_API_KEY && MORALIS_API_KEY.length > 20; +} + /** * Makes a rate-limited request to Moralis API */ @@ -27,6 +34,11 @@ async function moralisRequest( params: Record = {}, chainId: string ): Promise { + // Validate API key + if (!isValidApiKey()) { + throw new Error("Moralis API key not available or invalid"); + } + // Validate chain const chain = CHAIN_MAPPING[chainId]; if (!chain) { diff --git a/lib/api/nftMockData.ts b/lib/api/nftMockData.ts new file mode 100644 index 0000000..04bb301 --- /dev/null +++ b/lib/api/nftMockData.ts @@ -0,0 +1,140 @@ +/** + * This file contains functions to generate mock NFT data + * Used as fallbacks when API calls fail or for demo/testing purposes + */ + +// Mock collection data - maps contract addresses to collection info +const mockCollectionsMap: Record = { + // BNB Testnet CryptoPath collection + '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551': { + name: 'CryptoPath Genesis', + description: 'The official NFT collection of the CryptoPath ecosystem. These limited edition NFTs grant exclusive access to premium features and rewards within the CryptoPath platform.', + imageUrl: '/Img/logo/cryptopath.png', + totalSupply: '1000', + symbol: 'CPG', + chain: '0x61', + verified: true, + category: 'Utility', + featured: true + }, + + // Ethereum example collections + '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d': { + name: 'Bored Ape Yacht Club', + description: 'The Bored Ape Yacht Club is a collection of 10,000 unique Bored Ape NFTs— unique digital collectibles living on the Ethereum blockchain.', + imageUrl: 'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?auto=format&dpr=1&w=1000', + totalSupply: '10000', + symbol: 'BAYC', + chain: '0x1', + verified: true, + category: 'Art' + }, + + // BNB Chain example collections + '0x0a8901b0e25deb55a87524f0cc164e9644020eba': { + name: 'Pancake Squad', + description: 'PancakeSwap\'s NFT collection of 10,000 unique bunnies designed to reward loyal community members and bring utility to the CAKE token.', + imageUrl: 'https://i.seadn.io/s/raw/files/8b1d3939c420d39c8914f68b506c50db.png?auto=format&dpr=1&w=256', + totalSupply: '10000', + symbol: 'PS', + chain: '0x38', + verified: true, + category: 'Gaming' + } +}; + +/** + * Generate a mock NFT collection when API calls fail + */ +export function generateMockNFTCollection(contractAddress: string, chainId: string) { + // Normalize contract address for comparison + const normalizedAddress = contractAddress.toLowerCase(); + + // Check if we have specific mock data for this collection + if (mockCollectionsMap[normalizedAddress]) { + return mockCollectionsMap[normalizedAddress]; + } + + // Generate generic mock data based on chain + const chainName = chainId === '0x1' ? 'Ethereum' : + chainId === '0xaa36a7' ? 'Sepolia' : + chainId === '0x38' ? 'BNB Chain' : 'BNB Testnet'; + + return { + name: `Collection ${contractAddress.slice(0, 6)}`, + description: `A sample NFT collection on ${chainName}`, + imageUrl: '/Img/nft/sample-1.jpg', + totalSupply: '1000', + symbol: 'NFT', + chain: chainId, + verified: false, + category: 'Collectibles' + }; +} + +/** + * Generate mock NFTs for testing or when API calls fail + */ +export function generateMockNFTs(contractAddress: string, chainId: string, page: number, pageSize: number): any[] { + const nfts: any[] = []; + const startIndex = (page - 1) * pageSize + 1; + + // Normalized contract address + const normalizedAddress = contractAddress.toLowerCase(); + + // Get collection info if available + const collectionInfo = mockCollectionsMap[normalizedAddress] || { + name: `Collection ${contractAddress.slice(0, 6)}`, + chain: chainId + }; + + // Generate NFTs for this page + for (let i = 0; i < pageSize; i++) { + const tokenId = String(startIndex + i); + + // Generate deterministic but varied attributes based on token ID + const tokenNum = parseInt(tokenId, 10); + const seed = tokenNum % 100; + + // Background options + const backgrounds = ['Blue', 'Red', 'Green', 'Purple', 'Gold', 'Black', 'White']; + const backgroundIndex = seed % backgrounds.length; + + // Species options + const species = ['Human', 'Ape', 'Robot', 'Alien', 'Zombie', 'Demon', 'Angel']; + const speciesIndex = (seed * 3) % species.length; + + // Rarity options + const rarities = ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary']; + const rarityIndex = Math.floor(seed / 20); // 0-4 + + // For BNB Testnet CryptoPath collection, use special naming + const name = normalizedAddress === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551' + ? `CryptoPath Genesis #${tokenId}` + : `${collectionInfo.name} #${tokenId}`; + + const description = normalizedAddress === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551' + ? `A unique NFT from the CryptoPath Genesis Collection with ${rarities[rarityIndex]} rarity.` + : `NFT #${tokenId} from ${collectionInfo.name}`; + + nfts.push({ + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: tokenId, + name: name, + description: description, + imageUrl: `/Img/nft/sample-${(seed % 5) + 1}.jpg`, // Using sample images 1-5 + attributes: [ + { trait_type: 'Background', value: backgrounds[backgroundIndex] }, + { trait_type: 'Species', value: species[speciesIndex] }, + { trait_type: 'Rarity', value: rarities[rarityIndex] }, + // Network attribute for filtering + { trait_type: 'Network', value: chainId === '0x1' ? 'Ethereum' : + chainId === '0xaa36a7' ? 'Sepolia' : + chainId === '0x38' ? 'BNB Chain' : 'BNB Testnet' } + ], + chain: chainId + }); + } + + return nfts; +} diff --git a/next.config.js b/next.config.js index 91ce5ee..3c8048c 100644 --- a/next.config.js +++ b/next.config.js @@ -265,10 +265,7 @@ const nextConfig = { return config; }, // Add important settings for Vercel deployment - experimental: { - // Allow more time for API routes that make external calls - serverComponentsExternalPackages: [], - }, + // experimental options removed as they are not needed // Add extra security headers async headers() { return [ From 6fc30dab27b69521938e2bd8a3db3b720e62d2d1 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 14:49:34 +0700 Subject: [PATCH 10/17] finish run build --- components/search/NFTGallery.tsx | 2 +- components/search/Portfolio.tsx | 2 +- components/search/TransactionGraph.tsx | 6 +++--- components/search/TransactionTable.tsx | 6 +++--- components/search/WalletInfo.tsx | 6 +++--- components/ui/TransactionTable.tsx | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/components/search/NFTGallery.tsx b/components/search/NFTGallery.tsx index 7f6ee13..6a59866 100644 --- a/components/search/NFTGallery.tsx +++ b/components/search/NFTGallery.tsx @@ -86,7 +86,7 @@ const isPotentialSpam = (nft: NFT): boolean => { export default function NFTGallery() { const searchParams = useSearchParams() - const address = (searchParams as ReturnType)?.get("address") ?? null + const address = searchParams?.get("address") ?? null const [nfts, setNFTs] = useState([]) const [totalCount, setTotalCount] = useState(0) const [pageKeys, setPageKeys] = useState<(string | null)[]>([null]) diff --git a/components/search/Portfolio.tsx b/components/search/Portfolio.tsx index 377c8b4..e2ab854 100644 --- a/components/search/Portfolio.tsx +++ b/components/search/Portfolio.tsx @@ -34,7 +34,7 @@ interface TokenBalance { export default function Portfolio() { const searchParams = useSearchParams() - const address = searchParams.get("address") + const address = searchParams?.get("address") ?? null const [portfolio, setPortfolio] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) diff --git a/components/search/TransactionGraph.tsx b/components/search/TransactionGraph.tsx index 9f7b49f..addda08 100644 --- a/components/search/TransactionGraph.tsx +++ b/components/search/TransactionGraph.tsx @@ -323,9 +323,9 @@ const TransactionDetails = ({ transaction, isOpen, onClose, network }: Transacti function TransactionGraph() { const searchParams = useSearchParams(); const router = useRouter(); - const address = searchParams.get("address"); - const network = searchParams.get("network") || "mainnet"; - const provider = searchParams.get("provider") || "etherscan"; + const address = searchParams?.get("address") ?? null; + const network = searchParams?.get("network") ?? "mainnet"; + const provider = searchParams?.get("provider") ?? "etherscan"; const [graphData, setGraphData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); diff --git a/components/search/TransactionTable.tsx b/components/search/TransactionTable.tsx index 155d51b..5f37ff6 100644 --- a/components/search/TransactionTable.tsx +++ b/components/search/TransactionTable.tsx @@ -38,9 +38,9 @@ const transactionCache = new Map([]) const [loading, setLoading] = useState(false) diff --git a/components/search/WalletInfo.tsx b/components/search/WalletInfo.tsx index 784b438..4ceea26 100644 --- a/components/search/WalletInfo.tsx +++ b/components/search/WalletInfo.tsx @@ -28,9 +28,9 @@ interface WalletData { export default function WalletInfo() { const searchParams = useSearchParams() - const address = searchParams.get("address") - const network = searchParams.get("network") || "mainnet" - const provider = searchParams.get("provider") || "etherscan" + const address = searchParams?.get("address") ?? null + const network = searchParams?.get("network") ?? "mainnet" + const provider = searchParams?.get("provider") ?? "etherscan" const [walletData, setWalletData] = useState(null) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) diff --git a/components/ui/TransactionTable.tsx b/components/ui/TransactionTable.tsx index 181dee9..488f2fe 100644 --- a/components/ui/TransactionTable.tsx +++ b/components/ui/TransactionTable.tsx @@ -20,7 +20,7 @@ interface Transaction { export default function TransactionTable() { const searchParams = useSearchParams() - const address = searchParams.get("address") + const address = searchParams?.get("address") ?? null const [transactions, setTransactions] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) From 5db4c49e7066b94ac11004a69329519f38285677 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:02:37 +0700 Subject: [PATCH 11/17] Enhance NFT pagination with improved controls and caching mechanism --- components/NFT/PaginatedNFTGrid.tsx | 91 +++++++++++------ lib/api/nftService.ts | 150 ++++++++++++++++++++++++++++ 2 files changed, 211 insertions(+), 30 deletions(-) diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index 2a2440e..d89aba0 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -1,10 +1,11 @@ import React, { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; -import { Loader2 } from 'lucide-react'; +import { Loader2, ChevronLeft, ChevronRight } from 'lucide-react'; import { fetchPaginatedNFTs } from '@/lib/api/nftService'; import AnimatedNFTCard from './AnimatedNFTCard'; import { getChainColorTheme } from '@/lib/api/chainProviders'; import { useToast } from '@/hooks/use-toast'; +import { Button } from '@/components/ui/button'; import { Pagination, PaginationContent, @@ -86,8 +87,12 @@ const PaginatedNFTGrid: React.FC = ({ ); setNfts(result.nfts); - setTotalPages(result.totalPages); + // Fix: Use totalCount consistently instead of totalItems + setTotalPages(result.totalPages || Math.ceil(result.totalCount / itemsPerPage)); setTotalItems(result.totalCount); + + // Log for debugging + console.log(`Loaded page ${currentPage} with ${result.nfts.length} NFTs. Total: ${result.totalCount}`); } catch (err) { console.error('Error loading NFTs:', err); setError('Failed to load NFTs. Please try again.'); @@ -203,12 +208,16 @@ const PaginatedNFTGrid: React.FC = ({ } }; + // Calculate item range for display + const startItem = totalItems > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0; + const endItem = Math.min(currentPage * itemsPerPage, totalItems); + return (
    {/* Loading state */} {loading && (
    - +
    )} @@ -253,34 +262,56 @@ const PaginatedNFTGrid: React.FC = ({ )} - {/* Pagination controls */} - {!loading && totalPages > 1 && ( - - - - currentPage > 1 && handlePageChange(currentPage - 1)} - className={`${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} - /> - - - {renderPaginationItems()} - - - currentPage < totalPages && handlePageChange(currentPage + 1)} - className={`${currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} - /> - - - - )} - - {/* Items count info */} + {/* Enhanced Pagination Controls - Always visible when we have items */} {!loading && nfts.length > 0 && ( -
    - Showing {(currentPage - 1) * itemsPerPage + 1}- - {Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems} items +
    + {/* Items count info - Now above pagination for better visibility */} +
    + {totalItems > 0 ? ( + <>Showing {startItem}-{endItem} of {totalItems.toLocaleString()} items + ) : ( + <>No items to display + )} +
    + +
    + + + {/* Custom Previous Button with better visibility */} + + + {renderPaginationItems()} + + {/* Custom Next Button with better visibility */} + + + +
    + + {/* Page indicator for small screens */} +
    + Page {currentPage} of {totalPages} +
    )}
    diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index f38256c..651990d 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -1694,6 +1694,7 @@ const COLLECTION_CACHE = new Map(); // Cache TTL settings const CACHE_TTL = 5 * 60 * 1000; // 5 minutes in milliseconds +const PAGINATION_CACHE_TTL = 5 * 60 * 1000; // 5 minutes in milliseconds for pagination cache const MEMORY_ESTIMATE_FACTOR = 6000; // bytes per NFT (rough estimate including image URLs and metadata) // Progressive loading state @@ -2218,3 +2219,152 @@ export async function getCollectionStats( totalSupply: metadata.totalSupply || 10000, }; } + +/** + * Fetch paginated NFTs for PaginatedNFTGrid component + * Specifically designed to handle the unique needs of pagination components + */ +export async function fetchPaginatedNFTsForGrid( + contractAddress: string, + chainId: string, + page: number = 1, + pageSize: number = 20, + sortBy: string = 'tokenId', + sortDirection: 'asc' | 'desc' = 'asc', + searchQuery: string = '', + attributes: Record = {} +) { + // Use cached data if available + const cacheKey = `pagination-${contractAddress}-${chainId}-${page}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + + const cachedData = PAGINATION_CACHE.get(cacheKey); + if (cachedData && (Date.now() - cachedData.timestamp < PAGINATION_CACHE_TTL)) { + return cachedData.data; + } + + try { + // For page 1, fetch directly + if (page === 1) { + const result = await fetchNFTsWithOptimizedCursor( + contractAddress, + chainId, + '1', + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + // Ensure we have a valid totalCount - default to at least the length of returned NFTs + const totalCount = result.totalCount || Math.max(result.nfts.length, 100); + const totalPages = Math.max(1, Math.ceil(totalCount / pageSize)); + + const paginationResult = { + nfts: result.nfts, + currentPage: page, + totalPages, + totalCount + }; + + // Cache the result + PAGINATION_CACHE.set(cacheKey, { + data: paginationResult, + timestamp: Date.now(), + page: page + }); + + return paginationResult; + } + + // ...existing code for subsequent pages... + + // Ensure we always return totalCount even when error occurs + const mockData = generateMockNFTs(contractAddress, chainId, page, pageSize); + const totalCount = Math.max(1000, mockData.length * 50); // Ensure a reasonable default total + const totalPages = Math.ceil(totalCount / pageSize); + + return { + nfts: mockData, + currentPage: page, + totalPages, + totalCount + }; + } catch (error) { + console.error('Error in fetchPaginatedNFTs:', error); + + // Provide fallback with mock data + const mockData = generateMockNFTs(contractAddress, chainId, page, pageSize); + // Ensure we have a reasonable total for mocks - at least 50x the page size + const totalCount = 1000; // Mock total + const totalPages = Math.ceil(totalCount / pageSize); + + return { + nfts: mockData, + currentPage: page, + totalPages, + totalCount + }; + } +} + +/** + * Generate mock NFTs for testing or when API calls fail + */ +export function generateMockNFTs(contractAddress: string, chainId: string, page: number, pageSize: number): any[] { + const nfts: any[] = []; + const startIndex = (page - 1) * pageSize + 1; + + // Normalized contract address + const normalizedAddress = contractAddress.toLowerCase(); + + // Generate NFTs for this page + for (let i = 0; i < pageSize; i++) { + const tokenId = String(startIndex + i); + + // Generate deterministic but varied attributes based on token ID + const tokenNum = parseInt(tokenId, 10); + const seed = tokenNum % 100; + + // Background options + const backgrounds = ['Blue', 'Red', 'Green', 'Purple', 'Gold', 'Black', 'White']; + const backgroundIndex = seed % backgrounds.length; + + // Species options + const species = ['Human', 'Ape', 'Robot', 'Alien', 'Zombie', 'Demon', 'Angel']; + const speciesIndex = (seed * 3) % species.length; + + // Rarity options + const rarities = ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary']; + const rarityIndex = Math.floor(seed / 20); // 0-4 + + // For special collections, use customized naming + const name = normalizedAddress === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551' + ? `CryptoPath Genesis #${tokenId}` + : `NFT #${tokenId}`; + + const description = normalizedAddress === '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551' + ? `A unique NFT from the CryptoPath Genesis Collection with ${rarities[rarityIndex]} rarity.` + : `NFT #${tokenId} from the collection`; + + nfts.push({ + id: `${contractAddress.toLowerCase()}-${tokenId}`, + tokenId: tokenId, + name: name, + description: description, + imageUrl: `/Img/nft/sample-${(seed % 5) + 1}.jpg`, // Using sample images 1-5 + attributes: [ + { trait_type: 'Background', value: backgrounds[backgroundIndex] }, + { trait_type: 'Species', value: species[speciesIndex] }, + { trait_type: 'Rarity', value: rarities[rarityIndex] }, + // Network attribute for filtering + { trait_type: 'Network', value: chainId === '0x1' ? 'Ethereum' : + chainId === '0xaa36a7' ? 'Sepolia' : + chainId === '0x38' ? 'BNB Chain' : 'BNB Testnet' } + ], + chain: chainId + }); + } + + return nfts; +} From 063477a48df8b08aca0d474b254303aa04f263a9 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:18:30 +0700 Subject: [PATCH 12/17] error page 2 --- app/NFT/collection/[collectionId]/page.tsx | 11 +- components/NFT/PaginatedNFTGrid.tsx | 57 ++++-- lib/api/nftService.ts | 209 ++++++++++++++++++--- 3 files changed, 233 insertions(+), 44 deletions(-) diff --git a/app/NFT/collection/[collectionId]/page.tsx b/app/NFT/collection/[collectionId]/page.tsx index b67d0ef..059d7d0 100644 --- a/app/NFT/collection/[collectionId]/page.tsx +++ b/app/NFT/collection/[collectionId]/page.tsx @@ -314,7 +314,7 @@ export default function CollectionDetailsPage() { return newFilters; }); - // Clear pagination cache + // Apply filter changes handleFilterChange(); }; @@ -774,8 +774,15 @@ export default function CollectionDetailsPage() { className="pl-10 bg-gray-800/50 border-gray-700" value={searchQuery} onChange={handleSearchChange} - onKeyDown={handleSearchKeyDown} + onKeyDown={(e) => e.key === 'Enter' && handleFilterChange()} /> +
    diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index d89aba0..57ede92 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { motion } from 'framer-motion'; -import { Loader2, ChevronLeft, ChevronRight } from 'lucide-react'; +import { Loader2, ChevronLeft, ChevronRight, AlertCircle } from 'lucide-react'; import { fetchPaginatedNFTs } from '@/lib/api/nftService'; import AnimatedNFTCard from './AnimatedNFTCard'; import { getChainColorTheme } from '@/lib/api/chainProviders'; @@ -62,6 +62,8 @@ const PaginatedNFTGrid: React.FC = ({ const [totalPages, setTotalPages] = useState(1); const [totalItems, setTotalItems] = useState(0); const [error, setError] = useState(null); + const [isLastPage, setIsLastPage] = useState(false); + const [pageHistory, setPageHistory] = useState<{[key: number]: boolean}>({}); const { toast } = useToast(); @@ -86,13 +88,22 @@ const PaginatedNFTGrid: React.FC = ({ attributes ); + // Check if this is the last page based on NFT count + const isEmptyPage = result.nfts.length === 0; + const isPartialPage = result.nfts.length < itemsPerPage; + const calculatedLastPage = isEmptyPage || isPartialPage; + setNfts(result.nfts); - // Fix: Use totalCount consistently instead of totalItems setTotalPages(result.totalPages || Math.ceil(result.totalCount / itemsPerPage)); setTotalItems(result.totalCount); + setIsLastPage(calculatedLastPage); + + // Record this page in history to optimize navigation + setPageHistory(prev => ({...prev, [currentPage]: true})); // Log for debugging console.log(`Loaded page ${currentPage} with ${result.nfts.length} NFTs. Total: ${result.totalCount}`); + console.log(`Is last page: ${calculatedLastPage}, Total pages: ${result.totalPages}`); } catch (err) { console.error('Error loading NFTs:', err); setError('Failed to load NFTs. Please try again.'); @@ -119,9 +130,19 @@ const PaginatedNFTGrid: React.FC = ({ toast ]); - // Handle page change - const handlePageChange = (page: number) => { - if (page < 1 || page > totalPages || page === currentPage) return; + // Handle page change with improved boundary logic + const handlePageChange = useCallback((page: number) => { + if (page < 1 || (isLastPage && page > currentPage) || page === currentPage) return; + + // Allow going to next page even if we haven't calculated total pages yet + // This handles collections where we don't know the exact total + if (page > totalPages && !pageHistory[page] && !isLastPage) { + // Allow exploration to continue + console.log("Exploring beyond known pages:", page); + } else if (page > totalPages) { + console.log("Attempted to go beyond last page:", page); + return; + } setCurrentPage(page); if (onPageChange) { @@ -130,10 +151,10 @@ const PaginatedNFTGrid: React.FC = ({ // Scroll to top of grid window.scrollTo({ top: 0, behavior: 'smooth' }); - }; + }, [currentPage, totalPages, isLastPage, pageHistory, onPageChange]); - // Generate pagination items - const renderPaginationItems = () => { + // Generate pagination items with enhanced logic + const renderPaginationItems = useCallback(() => { const items = []; const maxVisible = 5; // Maximum number of page buttons to show @@ -199,7 +220,7 @@ const PaginatedNFTGrid: React.FC = ({ } return items; - }; + }, [currentPage, totalPages, chainTheme, handlePageChange]); // Handle NFT click const handleNFTClick = (nft: NFT) => { @@ -224,6 +245,7 @@ const PaginatedNFTGrid: React.FC = ({ {/* Error message */} {error && !loading && (
    +

    {error}

    {renderPaginationItems()} - {/* Custom Next Button with better visibility */} + {/* Enhanced Next Button */} @@ -311,6 +335,7 @@ const PaginatedNFTGrid: React.FC = ({ {/* Page indicator for small screens */}
    Page {currentPage} of {totalPages} + {isLastPage ? " (Last Page)" : ""}
    )} diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 651990d..ba0eef2 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -1916,53 +1916,159 @@ export async function fetchPaginatedNFTs( totalCount: number; currentPage: number; totalPages: number; + cursor?: string; }> { // Generate cache key based on all parameters const cacheKey = `pagination-${contractAddress}-${chainId}-${page}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; // Check cache first - const cached = PAGINATION_CACHE.get(cacheKey); - if (cached && Date.now() - cached.timestamp < CACHE_TTL && cached.page === page) { - console.log('Using cached paginated NFT data for page', page); - return cached.data; + const cachedData = PAGINATION_CACHE.get(cacheKey); + if (cachedData && (Date.now() - cachedData.timestamp < PAGINATION_CACHE_TTL)) { + console.log('Using cached pagination data for page', page); + return cachedData.data; } try { - // Fetch data from API - const result = await fetchCollectionNFTs( + // Look up previous page in cache to get cursor for current page + // This is essential for collections where direct page access isn't supported + let cursor: string | undefined; + let previousCursor: string | undefined; + + // Special case for first page + if (page === 1) { + cursor = '1'; // Starting cursor + } else { + // Try to find the previous page cursor from cache + const prevPageKey = `pagination-${contractAddress}-${chainId}-${page-1}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + const prevPageData = PAGINATION_CACHE.get(prevPageKey); + + if (prevPageData) { + cursor = prevPageData.data.cursor; // Get cursor for next page + console.log(`Found cursor for page ${page} from cache:`, cursor); + } + + // If we don't have a cursor from previous page, we need to fetch sequentially + if (!cursor) { + console.log(`No cursor found for page ${page}, fetching sequentially`); + + // Start from page 1 and work our way up + let currentCursor = '1'; + let currentPage = 1; + + while (currentPage < page && currentCursor) { + console.log(`Fetching intermediate page ${currentPage} to get to page ${page}`); + + // Fetch this page to get cursor for next page + const intermediateResult = await fetchNFTsWithOptimizedCursor( + contractAddress, + chainId, + currentCursor, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + // Store this page in cache + const intermediatePageKey = `pagination-${contractAddress}-${chainId}-${currentPage}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + + PAGINATION_CACHE.set(intermediatePageKey, { + data: { + nfts: intermediateResult.nfts, + totalCount: intermediateResult.totalCount, + currentPage, + totalPages: Math.ceil(intermediateResult.totalCount / pageSize), + cursor: intermediateResult.nextCursor + }, + timestamp: Date.now(), + page: currentPage // Add the page property here too + }); + + currentCursor = intermediateResult.nextCursor || ''; + + // If there's no next cursor, we've reached the end + if (!currentCursor) { + console.log(`Reached the end of collection at page ${currentPage}`); + break; + } + + currentPage++; + + // If we've reached our target page, use this cursor + if (currentPage === page) { + cursor = currentCursor; + console.log(`Found cursor for target page ${page}:`, cursor); + } + + // Avoid rate limits + await new Promise(resolve => setTimeout(resolve, 200)); + } + } + } + + // If we still don't have a cursor and we're not on page 1, + // we can't fetch this page directly + if (!cursor && page !== 1) { + console.log(`Could not determine cursor for page ${page}, returning empty results`); + return { + nfts: [], + totalCount: 0, + currentPage: page, + totalPages: page - 1 // Assume this is beyond the last page + }; + } + + // Fetch the data using the cursor we've determined + console.log(`Fetching page ${page} with cursor:`, cursor); + const result = await fetchNFTsWithOptimizedCursor( contractAddress, chainId, - { - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - } + cursor, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes ); - // Calculate total pages - const totalPages = Math.max(1, Math.ceil((result.totalCount || 0) / pageSize)); + // Calculate total pages based on total count + const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); + const totalPages = Math.max(page, Math.ceil(totalCount / pageSize)); - const response = { + // Prepare result with next cursor for pagination + const paginationResult = { nfts: result.nfts, - totalCount: result.totalCount, + totalCount, currentPage: page, - totalPages + totalPages, + cursor: result.nextCursor // Store cursor for next page }; - // Cache the response - PAGINATION_CACHE.set(cacheKey, { - data: response, + // Cache the result - FIX: Add page property + PAGINATION_CACHE.set(cacheKey, { + data: paginationResult, timestamp: Date.now(), - page + page: page // Add the missing page property here }); - return response; + return paginationResult; } catch (error) { console.error('Error in fetchPaginatedNFTs:', error); - throw error; + + // Provide fallback with mock data + const mockData = generateMockNFTs(contractAddress, chainId, page, pageSize); + // Ensure we have a reasonable total for mocks - at least 50x the page size + const totalEstimate = Math.max(1000, page * pageSize * 2); + const totalPages = Math.ceil(totalEstimate / pageSize); + + return { + nfts: mockData, + totalCount: totalEstimate, + currentPage: page, + totalPages, + cursor: mockData.length === pageSize ? 'mock-next-cursor' : undefined + }; } } @@ -2184,7 +2290,7 @@ export function sortNFTs( valueB = parseInt(b.tokenId, 10) || 0; } else if (sortBy === 'name') { valueA = a.name || ''; - valueB = b.name || ''; + valueB = a.name || ''; return sortDirection === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA); @@ -2368,3 +2474,54 @@ export function generateMockNFTs(contractAddress: string, chainId: string, page: return nfts; } + +/** + * Apply filtering to NFTs + * Enhances filtering logic to work with API-fetched data + */ +export function applyFilters( + nfts: any[], + searchQuery: string = '', + attributes: Record = {} +): any[] { + let filtered = [...nfts]; + + // Apply search filter first + if (searchQuery) { + const query = searchQuery.toLowerCase(); + filtered = filtered.filter(nft => + nft.name?.toLowerCase().includes(query) || + nft.tokenId?.toString().toLowerCase().includes(query) || + nft.description?.toLowerCase().includes(query) + ); + } + + // Then apply attribute filters if any + if (Object.keys(attributes).length > 0) { + filtered = filtered.filter(nft => { + // Skip NFTs with no attributes if we're filtering by attributes + if (!nft.attributes || !Array.isArray(nft.attributes)) return false; + + // Check if all attribute filters are satisfied + return Object.entries(attributes).every(([traitType, values]) => { + // If no values selected for this trait, skip this filter + if (!values || values.length === 0) return true; + + // Find the matching attribute for this trait type + const matchingAttribute = nft.attributes.find((attr: any) => + attr.trait_type?.toLowerCase() === traitType.toLowerCase() + ); + + // If trait not found, filter out + if (!matchingAttribute) return false; + + // Check if the attribute value is in our selected values + return values.some(value => + matchingAttribute.value?.toString().toLowerCase() === value.toLowerCase() + ); + }); + }); + } + + return filtered; +} From 7a095682333398ecd51965b00ad73e922eabf470 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 15:22:09 +0700 Subject: [PATCH 13/17] page 2 --- lib/api/nftService.ts | 45 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index ba0eef2..73854ff 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -1760,10 +1760,14 @@ export async function fetchNFTsWithOptimizedCursor( // Calculate progress (rough estimate) const progress = Math.min(100, Math.round((result.nfts.length / (result.totalCount || 1)) * 100)); + // Ensure we have a next cursor for collections that don't support cursors + // For these collections, we'll synthesize a cursor based on token IDs + const syntheticCursor = result.pageKey || generateSyntheticCursor(result.nfts, sortBy, sortDirection); + const response = { nfts: result.nfts, totalCount: result.totalCount, - nextCursor: result.pageKey, + nextCursor: syntheticCursor, progress }; @@ -1777,6 +1781,45 @@ export async function fetchNFTsWithOptimizedCursor( } } +/** + * Generate a synthetic cursor when API doesn't provide one + * This helps with collections that don't support cursor-based pagination + */ +function generateSyntheticCursor( + nfts: any[], + sortBy: string = 'tokenId', + sortDirection: 'asc' | 'desc' = 'asc' +): string | undefined { + // If no NFTs, there's no next page + if (!nfts || nfts.length === 0) { + return undefined; + } + + // For token ID based sorting, create a cursor based on the last token ID + if (sortBy === 'tokenId') { + const lastNft = sortDirection === 'asc' ? nfts[nfts.length - 1] : nfts[0]; + if (lastNft && lastNft.tokenId) { + // For ascending, next token would be lastTokenId + 1 + // For descending, next token would be lastTokenId - 1 + const lastTokenId = parseInt(lastNft.tokenId); + if (!isNaN(lastTokenId)) { + const nextId = sortDirection === 'asc' ? lastTokenId + 1 : lastTokenId - 1; + // Only return a synthetic cursor if nextId is positive (valid) + if (nextId >= 0) { + return `synthetic:${sortBy}:${nextId}:${sortDirection}`; + } + } + } + } + + // For other sort types, just indicate there might be a next page if we have a full page + if (nfts.length >= 20) { // Assume a full page is at least 20 items + return 'synthetic:nextpage'; + } + + return undefined; +} + /** * Fetch NFTs using progressive loading to load all items in batches */ From defe669decd9eb77ad3987e73f375ffbc3030b63 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Mon, 24 Mar 2025 16:04:39 +0700 Subject: [PATCH 14/17] a --- lib/api/nftService.ts | 412 ++++++++++++++++++++++++++++-------------- 1 file changed, 278 insertions(+), 134 deletions(-) diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 73854ff..5a13450 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -488,7 +488,8 @@ export async function fetchCollectionNFTs( sortDirection?: 'asc' | 'desc', searchQuery?: string, attributes?: Record, - pageKey?: string + pageKey?: string, + startTokenId?: number } = {} ): Promise<{ nfts: NFTMetadata[], @@ -502,9 +503,92 @@ export async function fetchCollectionNFTs( sortDirection = 'asc', searchQuery = '', attributes = {}, - pageKey + pageKey, + startTokenId } = options; + // Special handling for startTokenId-based pagination + if (startTokenId !== undefined && sortBy === 'tokenId') { + try { + console.log(`Using token ID-based pagination starting from ID: ${startTokenId}`); + + // For known collections that can be fetched directly + const useDirectFetching = [ + '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', // CryptoPath Genesis on BNB Testnet + '0x7c09282c24c363073e0f30d74c301c312e5533ac' + ].includes(contractAddress.toLowerCase()); + + let nfts: NFTMetadata[] = []; + + if (useDirectFetching) { + // Try direct contract fetching first for known collections + try { + nfts = await fetchContractNFTs(contractAddress, chainId, startTokenId, pageSize); + } catch (error) { + console.error("Direct contract fetching failed:", error); + // Fall through to API methods + } + } + + // If direct fetching didn't return results, try API methods + if (nfts.length === 0) { + // For APIs that support offset/paging with start IDs + // Fixed: Changed fetchCollectionByAPI to fetchCollectionNFTs + const apiResult = await fetchCollectionNFTs( + contractAddress, + chainId, + { + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + } + ); + + // Filter results to only include NFTs with token IDs >= startTokenId + // Fixed: Added type annotation for nft parameter + if (apiResult.nfts.length > 0) { + nfts = apiResult.nfts.filter((nft: NFTMetadata) => { + const tokenId = parseInt(nft.tokenId); + return !isNaN(tokenId) && tokenId >= startTokenId; + }).slice(0, pageSize); // Limit to pageSize + } + } + + // Calculate what the next cursor should be + let nextTokenId: number | undefined; + if (nfts.length > 0) { + const lastNft = nfts[nfts.length - 1]; + const lastTokenId = parseInt(lastNft.tokenId); + if (!isNaN(lastTokenId)) { + nextTokenId = lastTokenId + 1; + } + } + + // Get total count either from collection info or estimate + let totalCount = nfts.length > 0 ? Math.max(nfts.length + startTokenId, pageSize * 5) : 0; + try { + const info = await fetchCollectionInfo(contractAddress, chainId); + if (info && info.totalSupply && parseInt(info.totalSupply) > 0) { + totalCount = parseInt(info.totalSupply); + } + } catch (e) { + console.warn('Could not fetch total supply from collection info'); + } + + return { + nfts, + totalCount, + pageKey: nfts.length > 0 && nextTokenId ? `synthetic:tokenId:${nextTokenId}:${sortDirection}` : undefined + }; + } catch (error) { + console.error("Failed token ID based pagination:", error); + // Fall through to regular pagination + } + } + // Check if we should use direct contract fetching for known collections const useDirectFetching = [ '0x2ff12fe4b3c4dea244c4bdf682d572a90df3b551', // CryptoPath Genesis on BNB Testnet @@ -1743,26 +1827,82 @@ export async function fetchNFTsWithOptimizedCursor( } try { - // Fetch data from API + // Check if this is a synthetic cursor for offset-based pagination + let page: number | undefined; + let startTokenId: number | undefined; + + if (cursor && cursor.startsWith('synthetic:')) { + const parts = cursor.split(':'); + + if (parts.length >= 3) { + if (parts[1] === 'page') { + // This is a page-based synthetic cursor + page = parseInt(parts[2]); + console.log(`Using synthetic page cursor: ${page}`); + } else if (parts[1] === 'tokenId') { + // This is a token ID based cursor + startTokenId = parseInt(parts[2]); + console.log(`Using synthetic tokenId cursor starting from: ${startTokenId}`); + } + } + } else if (cursor === '1') { + // First page + page = 1; + } + + // Fetch data from API - Now passing startTokenId correctly const result = await fetchCollectionNFTs( contractAddress, chainId, { - page: cursor === '1' ? 1 : undefined, + page, pageSize, sortBy, sortDirection, searchQuery, - attributes + attributes, + pageKey: cursor && !cursor.startsWith('synthetic:') && cursor !== '1' ? cursor : undefined, + startTokenId } ); // Calculate progress (rough estimate) const progress = Math.min(100, Math.round((result.nfts.length / (result.totalCount || 1)) * 100)); - // Ensure we have a next cursor for collections that don't support cursors - // For these collections, we'll synthesize a cursor based on token IDs - const syntheticCursor = result.pageKey || generateSyntheticCursor(result.nfts, sortBy, sortDirection); + // Generate a new synthetic cursor based on the last NFT in this batch + let syntheticCursor: string | undefined; + + if (result.pageKey) { + // Use the provided pageKey if available (from API) + syntheticCursor = result.pageKey; + } else if (result.nfts.length > 0) { + // Generate our own cursor using the last NFT in the result set + if (sortBy === 'tokenId') { + // Get the last token ID + const lastNft = result.nfts[result.nfts.length - 1]; + if (lastNft && lastNft.tokenId) { + const lastTokenId = parseInt(lastNft.tokenId); + if (!isNaN(lastTokenId)) { + // For next page, we want to start just after the last token + const nextTokenId = lastTokenId + 1; + syntheticCursor = `synthetic:tokenId:${nextTokenId}:${sortDirection}`; + console.log(`Generated new token-based cursor: ${syntheticCursor}`); + } + } + } else if (page) { + // For other sort types using page-based approach + syntheticCursor = `synthetic:page:${page + 1}`; + console.log(`Generated page-based cursor: ${syntheticCursor}`); + } + } + + // If we couldn't generate a cursor but have results, fallback to a page-based cursor + if (!syntheticCursor && result.nfts.length > 0) { + // We have results but no cursor - create a page-based one + const currentPage = page || 1; + syntheticCursor = `synthetic:page:${currentPage + 1}`; + console.log(`Fallback to page-based cursor: ${syntheticCursor}`); + } const response = { nfts: result.nfts, @@ -1972,102 +2112,122 @@ export async function fetchPaginatedNFTs( } try { - // Look up previous page in cache to get cursor for current page - // This is essential for collections where direct page access isn't supported - let cursor: string | undefined; - let previousCursor: string | undefined; - // Special case for first page if (page === 1) { - cursor = '1'; // Starting cursor - } else { - // Try to find the previous page cursor from cache - const prevPageKey = `pagination-${contractAddress}-${chainId}-${page-1}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - const prevPageData = PAGINATION_CACHE.get(prevPageKey); + console.log(`Fetching page 1 with cursor '1'`); + const result = await fetchNFTsWithOptimizedCursor( + contractAddress, + chainId, + '1', + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); - if (prevPageData) { - cursor = prevPageData.data.cursor; // Get cursor for next page - console.log(`Found cursor for page ${page} from cache:`, cursor); - } + const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize); + const totalPages = Math.max(1, Math.ceil(totalCount / pageSize)); - // If we don't have a cursor from previous page, we need to fetch sequentially - if (!cursor) { - console.log(`No cursor found for page ${page}, fetching sequentially`); - - // Start from page 1 and work our way up - let currentCursor = '1'; - let currentPage = 1; - - while (currentPage < page && currentCursor) { - console.log(`Fetching intermediate page ${currentPage} to get to page ${page}`); - - // Fetch this page to get cursor for next page - const intermediateResult = await fetchNFTsWithOptimizedCursor( - contractAddress, - chainId, - currentCursor, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes - ); - - // Store this page in cache - const intermediatePageKey = `pagination-${contractAddress}-${chainId}-${currentPage}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; - - PAGINATION_CACHE.set(intermediatePageKey, { - data: { - nfts: intermediateResult.nfts, - totalCount: intermediateResult.totalCount, - currentPage, - totalPages: Math.ceil(intermediateResult.totalCount / pageSize), - cursor: intermediateResult.nextCursor - }, - timestamp: Date.now(), - page: currentPage // Add the page property here too - }); - - currentCursor = intermediateResult.nextCursor || ''; - - // If there's no next cursor, we've reached the end - if (!currentCursor) { - console.log(`Reached the end of collection at page ${currentPage}`); - break; - } - - currentPage++; - - // If we've reached our target page, use this cursor - if (currentPage === page) { - cursor = currentCursor; - console.log(`Found cursor for target page ${page}:`, cursor); - } - - // Avoid rate limits - await new Promise(resolve => setTimeout(resolve, 200)); - } - } + const paginationResult = { + nfts: result.nfts, + totalCount, + currentPage: page, + totalPages, + cursor: result.nextCursor + }; + + // Cache the result + PAGINATION_CACHE.set(cacheKey, { + data: paginationResult, + timestamp: Date.now(), + page + }); + + return paginationResult; } - // If we still don't have a cursor and we're not on page 1, - // we can't fetch this page directly - if (!cursor && page !== 1) { - console.log(`Could not determine cursor for page ${page}, returning empty results`); - return { - nfts: [], - totalCount: 0, + // For subsequent pages, try to find the cursor from previous page + const prevPageKey = `pagination-${contractAddress}-${chainId}-${page-1}-${pageSize}-${sortBy}-${sortDirection}-${searchQuery}-${JSON.stringify(attributes)}`; + const prevPageData = PAGINATION_CACHE.get(prevPageKey); + + if (prevPageData && prevPageData.data.cursor) { + // Use the cursor from the previous page + console.log(`Found cursor for page ${page} from cache:`, prevPageData.data.cursor); + const result = await fetchNFTsWithOptimizedCursor( + contractAddress, + chainId, + prevPageData.data.cursor, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); + const totalPages = Math.max(page, Math.ceil(totalCount / pageSize)); + + const paginationResult = { + nfts: result.nfts, + totalCount, currentPage: page, - totalPages: page - 1 // Assume this is beyond the last page + totalPages, + cursor: result.nextCursor }; + + PAGINATION_CACHE.set(cacheKey, { + data: paginationResult, + timestamp: Date.now(), + page + }); + + return paginationResult; + } + + // If no cursor is found from previous page, try direct synthetic pagination + if (sortBy === 'tokenId') { + // Calculate a reasonable starting token ID for this page + const startTokenId = (page - 1) * pageSize + 1; + console.log(`No cursor found. Using synthetic tokenId pagination starting from: ${startTokenId}`); + + const result = await fetchNFTsWithOptimizedCursor( + contractAddress, + chainId, + `synthetic:tokenId:${startTokenId}:${sortDirection}`, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + ); + + const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); + const totalPages = Math.max(page, Math.ceil(totalCount / pageSize)); + + const paginationResult = { + nfts: result.nfts, + totalCount, + currentPage: page, + totalPages, + cursor: result.nextCursor + }; + + PAGINATION_CACHE.set(cacheKey, { + data: paginationResult, + timestamp: Date.now(), + page + }); + + return paginationResult; } - // Fetch the data using the cursor we've determined - console.log(`Fetching page ${page} with cursor:`, cursor); + // Fallback to page-based synthetic cursor if we can't use token IDs + console.log(`Using fallback page-based pagination for page ${page}`); const result = await fetchNFTsWithOptimizedCursor( contractAddress, chainId, - cursor, + `synthetic:page:${page}`, pageSize, sortBy, sortDirection, @@ -2075,24 +2235,21 @@ export async function fetchPaginatedNFTs( attributes ); - // Calculate total pages based on total count const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); const totalPages = Math.max(page, Math.ceil(totalCount / pageSize)); - // Prepare result with next cursor for pagination const paginationResult = { nfts: result.nfts, totalCount, currentPage: page, totalPages, - cursor: result.nextCursor // Store cursor for next page + cursor: result.nextCursor }; - // Cache the result - FIX: Add page property PAGINATION_CACHE.set(cacheKey, { data: paginationResult, timestamp: Date.now(), - page: page // Add the missing page property here + page }); return paginationResult; @@ -2101,7 +2258,6 @@ export async function fetchPaginatedNFTs( // Provide fallback with mock data const mockData = generateMockNFTs(contractAddress, chainId, page, pageSize); - // Ensure we have a reasonable total for mocks - at least 50x the page size const totalEstimate = Math.max(1000, page * pageSize * 2); const totalPages = Math.ceil(totalEstimate / pageSize); @@ -2110,7 +2266,7 @@ export async function fetchPaginatedNFTs( totalCount: totalEstimate, currentPage: page, totalPages, - cursor: mockData.length === pageSize ? 'mock-next-cursor' : undefined + cursor: `mock:tokenId:${(page * pageSize) + 1}:${sortDirection}` }; } } @@ -2392,53 +2548,41 @@ export async function fetchPaginatedNFTsForGrid( } try { - // For page 1, fetch directly - if (page === 1) { - const result = await fetchNFTsWithOptimizedCursor( - contractAddress, - chainId, - '1', + // Calculate start index based on page + const startIndex = (page - 1) * pageSize; + + const result = await fetchCollectionNFTs( + contractAddress, + chainId, + { + page, pageSize, sortBy, sortDirection, searchQuery, attributes - ); - - // Ensure we have a valid totalCount - default to at least the length of returned NFTs - const totalCount = result.totalCount || Math.max(result.nfts.length, 100); - const totalPages = Math.max(1, Math.ceil(totalCount / pageSize)); - - const paginationResult = { - nfts: result.nfts, - currentPage: page, - totalPages, - totalCount - }; - - // Cache the result - PAGINATION_CACHE.set(cacheKey, { - data: paginationResult, - timestamp: Date.now(), - page: page - }); - - return paginationResult; - } - - // ...existing code for subsequent pages... + } + ); - // Ensure we always return totalCount even when error occurs - const mockData = generateMockNFTs(contractAddress, chainId, page, pageSize); - const totalCount = Math.max(1000, mockData.length * 50); // Ensure a reasonable default total - const totalPages = Math.ceil(totalCount / pageSize); + // Ensure we have a valid totalCount - default to at least the length of returned NFTs + const totalCount = result.totalCount || Math.max(result.nfts.length, startIndex + pageSize); + const totalPages = Math.max(1, Math.ceil(totalCount / pageSize)); - return { - nfts: mockData, + const paginationResult = { + nfts: result.nfts, currentPage: page, totalPages, totalCount }; + + // Cache the result + PAGINATION_CACHE.set(cacheKey, { + data: paginationResult, + timestamp: Date.now(), + page: page + }); + + return paginationResult; } catch (error) { console.error('Error in fetchPaginatedNFTs:', error); From 84be1f6cc69752430c366e79bbf943efb3b90cf7 Mon Sep 17 00:00:00 2001 From: trinhnguyen1101 Date: Tue, 25 Mar 2025 19:54:19 +0700 Subject: [PATCH 15/17] lifeisnotdaijobu --- app/api/coingecko-proxy/route.ts | 48 ++++++++++++++ lib/api/coinApi.ts | 75 +++++++++++++--------- package-lock.json | 104 +++++++++++++++---------------- package.json | 2 +- 4 files changed, 145 insertions(+), 84 deletions(-) create mode 100644 app/api/coingecko-proxy/route.ts diff --git a/app/api/coingecko-proxy/route.ts b/app/api/coingecko-proxy/route.ts new file mode 100644 index 0000000..d33141a --- /dev/null +++ b/app/api/coingecko-proxy/route.ts @@ -0,0 +1,48 @@ + +import { NextResponse } from 'next/server'; + +export async function GET(request: Request) { + const { searchParams } = new URL(request.url); + const endpoint = searchParams.get('endpoint'); + + if (!endpoint) { + return NextResponse.json({ error: 'Endpoint is required' }, { status: 400 }); + } + + try { + const response = await fetch(`https://api.coingecko.com/api/v3/${endpoint}`, { + headers: { + 'Accept': 'application/json', + // Nếu bạn có API key trả phí, thêm vào đây + // 'x-cg-api-key': 'your-api-key-here', + }, + }); + + if (!response.ok) { + if (response.status === 429) { + const retryAfter = response.headers.get('Retry-After') || '60'; // Mặc định 60s nếu không có header + return NextResponse.json( + { + error: 'Rate limit exceeded. Please try again later.', + retryAfter: parseInt(retryAfter), + }, + { status: 429 } // Trả về 429 thay vì ném lỗi + ); + } + throw new Error(`CoinGecko API responded with status ${response.status}`); + } + + const data = await response.json(); + return NextResponse.json({ data }); + } catch (error) { + console.error('Proxy error:', error); + return NextResponse.json( + { error: 'Failed to fetch from CoinGecko' }, + { status: 500 } + ); + } +} + +export const config = { + runtime: 'nodejs', +}; \ No newline at end of file diff --git a/lib/api/coinApi.ts b/lib/api/coinApi.ts index 25b94ab..1a454a0 100644 --- a/lib/api/coinApi.ts +++ b/lib/api/coinApi.ts @@ -8,7 +8,10 @@ const CACHE_EXPIRY = 5 * 60 * 1000; // 5 phút const FETCH_TIMEOUT = 15000; // 15 giây timeout const MAX_RETRIES = 3; const MEMORY_CACHE = new Map(); -const limit = pLimit(5); // Giới hạn 5 request đồng thời +const limit = pLimit(2); // Giới hạn 2 request đồng thời + +// Proxy URL - Sửa đường dẫn đúng theo cấu trúc Next.js API routes +const PROXY_URL = "/api/coingecko-proxy"; // Xóa ký tự \ và sửa thành đường dẫn tương đối đúng // Helper functions const getFromMemoryCache = (key: string): T | null => { @@ -28,7 +31,7 @@ const getLocalFallback = (key: string): T | null => { const item = localStorage.getItem(key); if (item) { const { data, timestamp } = JSON.parse(item); - if (Date.now() - timestamp < CACHE_EXPIRY * 2) return data; // Cache lâu hơn offline + if (Date.now() - timestamp < CACHE_EXPIRY * 2) return data; } return null; }; @@ -38,9 +41,10 @@ const setLocalFallback = (key: string, data: any) => { }; // Fetch với timeout, retry và rate limiting -const fetchWithRetry = async (url: string, options: RequestInit = {}): Promise => { +const fetchWithRetry = async (endpoint: string, options: RequestInit = {}): Promise => { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT); + const url = `${PROXY_URL}?endpoint=${encodeURIComponent(endpoint)}`; for (let i = 0; i < MAX_RETRIES; i++) { try { @@ -55,12 +59,34 @@ const fetchWithRetry = async (url: string, options: RequestInit = {}): Promise setTimeout(resolve, retryAfter * 1000)); + continue; // Thử lại sau khi đợi + } + throw new Error(`API request failed with status ${response.status}`); + } + + const result = await response.json(); + if (result.error) throw new Error(result.error); + return result.data || result; } catch (error) { - if (i === MAX_RETRIES - 1) throw error; - await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, i))); // Exponential backoff + if (error instanceof Error && error.name === "AbortError") { + throw new Error("Request timed out"); + } + if (i === MAX_RETRIES - 1) { + console.error('Max retries reached:', error); + throw error; + } + const delay = 1000 * Math.pow(2, i) + Math.random() * 1000; + console.log(`Retrying after ${delay}ms due to error: ${error}`); + await new Promise(resolve => setTimeout(resolve, delay)); } finally { clearTimeout(timeoutId); } @@ -70,7 +96,6 @@ const fetchWithRetry = async (url: string, options: RequestInit = {}): Promise => { const cacheKey = `coins_${page}_${perPage}`; - // Check memory cache const memoryCached = getFromMemoryCache(cacheKey); if (memoryCached) { console.log('Returning memory cached coin data'); @@ -78,7 +103,6 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { } try { - // Check Supabase cache const { data: cachedData, error } = await supabase .from('cached_coins') .select('data, last_updated') @@ -90,17 +114,15 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { if (timeSinceUpdate < CACHE_EXPIRY) { console.log('Returning Supabase cached coin data'); setToMemoryCache(cacheKey, cachedData.data); - setLocalFallback(cacheKey, cachedData.data); // Lưu fallback + setLocalFallback(cacheKey, cachedData.data); return cachedData.data as Coin[]; } } - // Fetch fresh data console.log(`Fetching fresh coin data for page ${page}`); - const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=${perPage}&page=${page}&sparkline=true&price_change_percentage=1h,24h,7d&locale=en`; - const data = await fetchWithRetry(url); + const endpoint = `coins/markets?vs_currency=usd&order=market_cap_desc&per_page=${perPage}&page=${page}&sparkline=true&price_change_percentage=1h,24h,7d&locale=en`; + const data = await fetchWithRetry(endpoint); - // Update caches setToMemoryCache(cacheKey, data); setLocalFallback(cacheKey, data); await supabase.from('cached_coins').upsert({ @@ -112,9 +134,8 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { return data; } catch (error) { console.error("Error fetching coins:", error); - toast.error("Failed to load cryptocurrency data"); - - // Return local fallback nếu có + toast.error("Failed to load cryptocurrency data. Using cached data if available."); + const fallback = getLocalFallback(cacheKey); if (fallback) { console.log('Returning local fallback coin data'); @@ -124,12 +145,12 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { } }; +// Các hàm getCoinDetail và getCoinHistory giữ nguyên logic nhưng đảm bảo dùng PROXY_URL đã sửa export const getCoinDetail = async (id: string): Promise => { if (!id) throw new Error("Coin ID is required"); const cacheKey = `coin_detail_${id}`; - // Check memory cache const memoryCached = getFromMemoryCache(cacheKey); if (memoryCached) { console.log('Returning memory cached coin detail'); @@ -137,7 +158,6 @@ export const getCoinDetail = async (id: string): Promise => { } try { - // Check Supabase cache const { data: cachedData, error } = await supabase .from('cached_coin_details') .select('data, last_updated') @@ -154,12 +174,10 @@ export const getCoinDetail = async (id: string): Promise => { } } - // Fetch fresh data console.log(`Fetching fresh data for coin: ${id}`); - const url = `https://api.coingecko.com/api/v3/coins/${id}?localization=false&tickers=false&market_data=true&community_data=false&developer_data=false&sparkline=true`; - const data = await fetchWithRetry(url, { cache: "no-store" }); + const endpoint = `coins/${id}?localization=false&tickers=false&market_data=true&community_data=false&developer_data=false&sparkline=true`; + const data = await fetchWithRetry(endpoint); - // Update caches setToMemoryCache(cacheKey, data); setLocalFallback(cacheKey, data); await supabase.from('cached_coin_details').upsert({ @@ -172,7 +190,6 @@ export const getCoinDetail = async (id: string): Promise => { } catch (error) { console.error(`Error fetching coin detail for ${id}:`, error); - // Return local fallback nếu có const fallback = getLocalFallback(cacheKey); if (fallback) { console.log('Returning local fallback coin detail'); @@ -185,7 +202,6 @@ export const getCoinDetail = async (id: string): Promise => { export const getCoinHistory = async (id: string, days = 7): Promise => { const cacheKey = `coin_history_${id}_${days}`; - // Check memory cache const memoryCached = getFromMemoryCache(cacheKey); if (memoryCached) { console.log('Returning memory cached coin history'); @@ -193,9 +209,8 @@ export const getCoinHistory = async (id: string, days = 7): Promise } try { - // Fetch fresh data - const url = `https://api.coingecko.com/api/v3/coins/${id}/market_chart?vs_currency=usd&days=${days}`; - const data = await fetchWithRetry(url); + const endpoint = `coins/${id}/market_chart?vs_currency=usd&days=${days}`; + const data = await fetchWithRetry(endpoint); setToMemoryCache(cacheKey, data); setLocalFallback(cacheKey, data); @@ -203,8 +218,7 @@ export const getCoinHistory = async (id: string, days = 7): Promise } catch (error) { console.error(`Error fetching history for ${id}:`, error); toast.error("Failed to load price history"); - - // Return local fallback hoặc dummy data + const fallback = getLocalFallback(cacheKey); if (fallback) { console.log('Returning local fallback coin history'); @@ -218,7 +232,6 @@ export const getCoinHistory = async (id: string, days = 7): Promise } }; -// Hàm xóa cache nếu cần export const clearCache = (key?: string) => { if (key) { MEMORY_CACHE.delete(key); diff --git a/package-lock.json b/package-lock.json index b36611a..017d3ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "loading-spinner": "^1.2.1", "lucide-react": "^0.475.0", "neo4j-driver": "^5.28.1", - "next": "^15.2.3", + "next": "^15.2.4", "nodemailer": "^6.10.0", "particles.js": "^2.0.0", "pino-pretty": "^13.0.0", @@ -515,12 +515,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.10.tgz", - "integrity": "sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==", + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz", + "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.10" + "@babel/types": "^7.27.0" }, "bin": { "parser": "bin/babel-parser.js" @@ -626,14 +626,14 @@ } }, "node_modules/@babel/template": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz", - "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==", + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz", + "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==", "license": "MIT", "dependencies": { "@babel/code-frame": "^7.26.2", - "@babel/parser": "^7.26.9", - "@babel/types": "^7.26.9" + "@babel/parser": "^7.27.0", + "@babel/types": "^7.27.0" }, "engines": { "node": ">=6.9.0" @@ -667,9 +667,9 @@ } }, "node_modules/@babel/types": { - "version": "7.26.10", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz", - "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==", + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz", + "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==", "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.9", @@ -2892,9 +2892,9 @@ } }, "node_modules/@next/env": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.3.tgz", - "integrity": "sha512-a26KnbW9DFEUsSxAxKBORR/uD9THoYoKbkpFywMN/AFvboTt94b8+g/07T8J6ACsdLag8/PDU60ov4rPxRAixw==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.4.tgz", + "integrity": "sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==", "license": "MIT" }, "node_modules/@next/eslint-plugin-next": { @@ -2908,9 +2908,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.3.tgz", - "integrity": "sha512-uaBhA8aLbXLqwjnsHSkxs353WrRgQgiFjduDpc7YXEU0B54IKx3vU+cxQlYwPCyC8uYEEX7THhtQQsfHnvv8dw==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.4.tgz", + "integrity": "sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==", "cpu": [ "arm64" ], @@ -2924,9 +2924,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.3.tgz", - "integrity": "sha512-pVwKvJ4Zk7h+4hwhqOUuMx7Ib02u3gDX3HXPKIShBi9JlYllI0nU6TWLbPT94dt7FSi6mSBhfc2JrHViwqbOdw==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.4.tgz", + "integrity": "sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==", "cpu": [ "x64" ], @@ -2940,9 +2940,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.3.tgz", - "integrity": "sha512-50ibWdn2RuFFkOEUmo9NCcQbbV9ViQOrUfG48zHBCONciHjaUKtHcYFiCwBVuzD08fzvzkWuuZkd4AqbvKO7UQ==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.4.tgz", + "integrity": "sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==", "cpu": [ "arm64" ], @@ -2956,9 +2956,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.3.tgz", - "integrity": "sha512-2gAPA7P652D3HzR4cLyAuVYwYqjG0mt/3pHSWTCyKZq/N/dJcUAEoNQMyUmwTZWCJRKofB+JPuDVP2aD8w2J6Q==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.4.tgz", + "integrity": "sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==", "cpu": [ "arm64" ], @@ -2972,9 +2972,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.3.tgz", - "integrity": "sha512-ODSKvrdMgAJOVU4qElflYy1KSZRM3M45JVbeZu42TINCMG3anp7YCBn80RkISV6bhzKwcUqLBAmOiWkaGtBA9w==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.4.tgz", + "integrity": "sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==", "cpu": [ "x64" ], @@ -2988,9 +2988,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.3.tgz", - "integrity": "sha512-ZR9kLwCWrlYxwEoytqPi1jhPd1TlsSJWAc+H/CJHmHkf2nD92MQpSRIURR1iNgA/kuFSdxB8xIPt4p/T78kwsg==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.4.tgz", + "integrity": "sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==", "cpu": [ "x64" ], @@ -3004,9 +3004,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.3.tgz", - "integrity": "sha512-+G2FrDcfm2YDbhDiObDU/qPriWeiz/9cRR0yMWJeTLGGX6/x8oryO3tt7HhodA1vZ8r2ddJPCjtLcpaVl7TE2Q==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.4.tgz", + "integrity": "sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==", "cpu": [ "arm64" ], @@ -3020,9 +3020,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.3.tgz", - "integrity": "sha512-gHYS9tc+G2W0ZC8rBL+H6RdtXIyk40uLiaos0yj5US85FNhbFEndMA2nW3z47nzOWiSvXTZ5kBClc3rD0zJg0w==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.4.tgz", + "integrity": "sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==", "cpu": [ "x64" ], @@ -15324,12 +15324,12 @@ "license": "Apache-2.0" }, "node_modules/next": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/next/-/next-15.2.3.tgz", - "integrity": "sha512-x6eDkZxk2rPpu46E1ZVUWIBhYCLszmUY6fvHBFcbzJ9dD+qRX6vcHusaqqDlnY+VngKzKbAiG2iRCkPbmi8f7w==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/next/-/next-15.2.4.tgz", + "integrity": "sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==", "license": "MIT", "dependencies": { - "@next/env": "15.2.3", + "@next/env": "15.2.4", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", @@ -15344,14 +15344,14 @@ "node": "^18.18.0 || ^19.8.0 || >= 20.0.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "15.2.3", - "@next/swc-darwin-x64": "15.2.3", - "@next/swc-linux-arm64-gnu": "15.2.3", - "@next/swc-linux-arm64-musl": "15.2.3", - "@next/swc-linux-x64-gnu": "15.2.3", - "@next/swc-linux-x64-musl": "15.2.3", - "@next/swc-win32-arm64-msvc": "15.2.3", - "@next/swc-win32-x64-msvc": "15.2.3", + "@next/swc-darwin-arm64": "15.2.4", + "@next/swc-darwin-x64": "15.2.4", + "@next/swc-linux-arm64-gnu": "15.2.4", + "@next/swc-linux-arm64-musl": "15.2.4", + "@next/swc-linux-x64-gnu": "15.2.4", + "@next/swc-linux-x64-musl": "15.2.4", + "@next/swc-win32-arm64-msvc": "15.2.4", + "@next/swc-win32-x64-msvc": "15.2.4", "sharp": "^0.33.5" }, "peerDependencies": { diff --git a/package.json b/package.json index fb4ae0a..af68125 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "loading-spinner": "^1.2.1", "lucide-react": "^0.475.0", "neo4j-driver": "^5.28.1", - "next": "^15.2.3", + "next": "^15.2.4", "nodemailer": "^6.10.0", "particles.js": "^2.0.0", "pino-pretty": "^13.0.0", From 2c2b51211e7e91c424b0b24019c5e9f8ac8129a2 Mon Sep 17 00:00:00 2001 From: trinhnguyen1101 Date: Tue, 25 Mar 2025 20:00:28 +0700 Subject: [PATCH 16/17] lifeisnotdaijobu --- lib/api/coinApi.ts | 94 ++++++++++++++++++++++++---------------------- 1 file changed, 50 insertions(+), 44 deletions(-) diff --git a/lib/api/coinApi.ts b/lib/api/coinApi.ts index 1a454a0..15f60c6 100644 --- a/lib/api/coinApi.ts +++ b/lib/api/coinApi.ts @@ -10,13 +10,14 @@ const MAX_RETRIES = 3; const MEMORY_CACHE = new Map(); const limit = pLimit(2); // Giới hạn 2 request đồng thời -// Proxy URL - Sửa đường dẫn đúng theo cấu trúc Next.js API routes -const PROXY_URL = "/api/coingecko-proxy"; // Xóa ký tự \ và sửa thành đường dẫn tương đối đúng +// Proxy URL +const PROXY_URL = "/api/coingecko-proxy"; // Helper functions const getFromMemoryCache = (key: string): T | null => { const cached = MEMORY_CACHE.get(key); if (cached && Date.now() - cached.timestamp < CACHE_EXPIRY) { + console.log(`Retrieved from memory cache with key: ${key}`); return cached.data; } MEMORY_CACHE.delete(key); @@ -25,19 +26,24 @@ const getFromMemoryCache = (key: string): T | null => { const setToMemoryCache = (key: string, data: any) => { MEMORY_CACHE.set(key, { data, timestamp: Date.now() }); + console.log(`Saved to memory cache with key: ${key}`); }; const getLocalFallback = (key: string): T | null => { const item = localStorage.getItem(key); if (item) { const { data, timestamp } = JSON.parse(item); - if (Date.now() - timestamp < CACHE_EXPIRY * 2) return data; + if (Date.now() - timestamp < CACHE_EXPIRY * 2) { + console.log(`Retrieved from local fallback with key: ${key}`); + return data; + } } return null; }; const setLocalFallback = (key: string, data: any) => { localStorage.setItem(key, JSON.stringify({ data, timestamp: Date.now() })); + console.log(`Saved to local fallback with key: ${key}`); }; // Fetch với timeout, retry và rate limiting @@ -65,27 +71,28 @@ const fetchWithRetry = async (endpoint: string, options: RequestInit = {}): Prom if (!response.ok) { if (response.status === 429) { const result = await response.json(); - const retryAfter = result.retryAfter || 60; // Lấy từ proxy response + const retryAfter = result.retryAfter || 60; console.log(`Rate limit hit. Waiting ${retryAfter}s before retry. Attempt ${i + 1}/${MAX_RETRIES}`); await new Promise(resolve => setTimeout(resolve, retryAfter * 1000)); - continue; // Thử lại sau khi đợi + continue; } throw new Error(`API request failed with status ${response.status}`); } const result = await response.json(); if (result.error) throw new Error(result.error); + console.log(`Successfully fetched data for endpoint: ${endpoint}`); return result.data || result; - } catch (error) { + } catch (error: unknown) { // Xử lý error là unknown if (error instanceof Error && error.name === "AbortError") { throw new Error("Request timed out"); } if (i === MAX_RETRIES - 1) { - console.error('Max retries reached:', error); - throw error; + console.error(`Max retries reached for ${endpoint}:`, error); + throw error instanceof Error ? error : new Error("Unknown error occurred"); } const delay = 1000 * Math.pow(2, i) + Math.random() * 1000; - console.log(`Retrying after ${delay}ms due to error: ${error}`); + console.log(`Retrying after ${delay}ms due to error: ${error instanceof Error ? error.message : String(error)}`); await new Promise(resolve => setTimeout(resolve, delay)); } finally { clearTimeout(timeoutId); @@ -97,10 +104,7 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { const cacheKey = `coins_${page}_${perPage}`; const memoryCached = getFromMemoryCache(cacheKey); - if (memoryCached) { - console.log('Returning memory cached coin data'); - return memoryCached; - } + if (memoryCached) return memoryCached; try { const { data: cachedData, error } = await supabase @@ -112,14 +116,14 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { if (!error && cachedData?.last_updated) { const timeSinceUpdate = Date.now() - new Date(cachedData.last_updated).getTime(); if (timeSinceUpdate < CACHE_EXPIRY) { - console.log('Returning Supabase cached coin data'); + console.log(`Returning Supabase cached coin data for key: ${cacheKey}`); setToMemoryCache(cacheKey, cachedData.data); setLocalFallback(cacheKey, cachedData.data); return cachedData.data as Coin[]; } } - console.log(`Fetching fresh coin data for page ${page}`); + console.log(`Fetching fresh coin data for page ${page}, perPage ${perPage}`); const endpoint = `coins/markets?vs_currency=usd&order=market_cap_desc&per_page=${perPage}&page=${page}&sparkline=true&price_change_percentage=1h,24h,7d&locale=en`; const data = await fetchWithRetry(endpoint); @@ -130,44 +134,42 @@ export const getCoins = async (page = 1, perPage = 20): Promise => { data, last_updated: new Date().toISOString(), }); + console.log(`Saved to Supabase with key: ${cacheKey}`); return data; - } catch (error) { + } catch (error: unknown) { // Xử lý error là unknown console.error("Error fetching coins:", error); - toast.error("Failed to load cryptocurrency data. Using cached data if available."); + if (error instanceof Error && error.message.includes('429')) { + toast.error("Too many requests to CoinGecko. Please wait and try again later."); + } else { + toast.error("Failed to load cryptocurrency data. Using cached data if available."); + } const fallback = getLocalFallback(cacheKey); - if (fallback) { - console.log('Returning local fallback coin data'); - return fallback; - } + if (fallback) return fallback; return []; } }; -// Các hàm getCoinDetail và getCoinHistory giữ nguyên logic nhưng đảm bảo dùng PROXY_URL đã sửa export const getCoinDetail = async (id: string): Promise => { if (!id) throw new Error("Coin ID is required"); const cacheKey = `coin_detail_${id}`; const memoryCached = getFromMemoryCache(cacheKey); - if (memoryCached) { - console.log('Returning memory cached coin detail'); - return memoryCached; - } + if (memoryCached) return memoryCached; try { const { data: cachedData, error } = await supabase .from('cached_coin_details') .select('data, last_updated') - .eq('id', id) + .eq('id', cacheKey) .single(); if (!error && cachedData?.last_updated) { const timeSinceUpdate = Date.now() - new Date(cachedData.last_updated).getTime(); if (timeSinceUpdate < CACHE_EXPIRY) { - console.log('Returning Supabase cached coin detail'); + console.log(`Returning Supabase cached coin detail for key: ${cacheKey}`); setToMemoryCache(cacheKey, cachedData.data); setLocalFallback(cacheKey, cachedData.data); return cachedData.data as CoinDetail; @@ -181,20 +183,23 @@ export const getCoinDetail = async (id: string): Promise => { setToMemoryCache(cacheKey, data); setLocalFallback(cacheKey, data); await supabase.from('cached_coin_details').upsert({ - id, + id: cacheKey, data, last_updated: new Date().toISOString(), }); + console.log(`Saved to Supabase with key: ${cacheKey}`); return data; - } catch (error) { + } catch (error: unknown) { // Xử lý error là unknown console.error(`Error fetching coin detail for ${id}:`, error); + if (error instanceof Error && error.message.includes('429')) { + toast.error("Too many requests to CoinGecko. Please wait and try again later."); + } else { + toast.error(`Failed to load details for ${id}. Using cached data if available.`); + } const fallback = getLocalFallback(cacheKey); - if (fallback) { - console.log('Returning local fallback coin detail'); - return fallback; - } + if (fallback) return fallback; throw error instanceof Error ? error : new Error("An unknown error occurred"); } }; @@ -203,10 +208,7 @@ export const getCoinHistory = async (id: string, days = 7): Promise const cacheKey = `coin_history_${id}_${days}`; const memoryCached = getFromMemoryCache(cacheKey); - if (memoryCached) { - console.log('Returning memory cached coin history'); - return memoryCached; - } + if (memoryCached) return memoryCached; try { const endpoint = `coins/${id}/market_chart?vs_currency=usd&days=${days}`; @@ -214,16 +216,18 @@ export const getCoinHistory = async (id: string, days = 7): Promise setToMemoryCache(cacheKey, data); setLocalFallback(cacheKey, data); + return data; - } catch (error) { + } catch (error: unknown) { // Xử lý error là unknown console.error(`Error fetching history for ${id}:`, error); - toast.error("Failed to load price history"); + if (error instanceof Error && error.message.includes('429')) { + toast.error("Too many requests to CoinGecko. Please wait and try again later."); + } else { + toast.error("Failed to load price history"); + } const fallback = getLocalFallback(cacheKey); - if (fallback) { - console.log('Returning local fallback coin history'); - return fallback; - } + if (fallback) return fallback; return { prices: Array.from({ length: 168 }, (_, i) => [Date.now() - (168 - i) * 3600000, 50000 + Math.random() * 10000]), market_caps: Array.from({ length: 168 }, (_, i) => [Date.now() - (168 - i) * 3600000, 1000000000000 + Math.random() * 1000000000]), @@ -236,8 +240,10 @@ export const clearCache = (key?: string) => { if (key) { MEMORY_CACHE.delete(key); localStorage.removeItem(key); + console.log(`Cleared cache for key: ${key}`); } else { MEMORY_CACHE.clear(); localStorage.clear(); + console.log("Cleared all caches"); } }; \ No newline at end of file From a09033d21f2a4d1f2c3cc906837500358dec5459 Mon Sep 17 00:00:00 2001 From: HungPhan-0612 <163500971+HungPhan-0612@users.noreply.github.com> Date: Tue, 25 Mar 2025 20:21:03 +0700 Subject: [PATCH 17/17] Add ChainalysisDisplay component to Transactions layout --- app/search-offchain/TransactionContent.tsx | 14 +- .../search-offchain/SearchBarOffChain.tsx | 253 +++++++++++-- .../TransactionGraphOffChain.tsx | 337 +++++++++++++----- 3 files changed, 469 insertions(+), 135 deletions(-) diff --git a/app/search-offchain/TransactionContent.tsx b/app/search-offchain/TransactionContent.tsx index 82a6f61..8bacb1a 100644 --- a/app/search-offchain/TransactionContent.tsx +++ b/app/search-offchain/TransactionContent.tsx @@ -6,6 +6,7 @@ import TransactionTableOffChain from "@/components/search-offchain/TransactionTa import Portfolio from "@/components/search/Portfolio" import { useSearchParams } from "next/navigation" import SearchBarOffChain from "@/components/search-offchain/SearchBarOffChain" +import ChainalysisDisplay from "@/components/Chainalysis" export default function Transactions() { @@ -20,11 +21,14 @@ export default function Transactions() { {address ? ( <>
    -
    - - -
    - + + + + +
    + +
    +
    diff --git a/components/search-offchain/SearchBarOffChain.tsx b/components/search-offchain/SearchBarOffChain.tsx index 65b9b18..4f0315e 100644 --- a/components/search-offchain/SearchBarOffChain.tsx +++ b/components/search-offchain/SearchBarOffChain.tsx @@ -4,87 +4,264 @@ import { useState } from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { useRouter } from "next/navigation" -import { Search,X } from "lucide-react" +import { Search, X, Globe, AlertTriangle } from "lucide-react" import { LoadingScreen } from "@/components/loading-screen" +import Neo4jIcon from "@/components/icons/Neo4jIcon" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" +import { Label } from "@/components/ui/label" +import { toast } from "sonner" -export default function SearchBarOffChain() { +export type NetworkType = "mainnet" | "optimism" | "arbitrum" +export type ProviderType = "etherscan" | "infura" + +// Ethereum address validation regex pattern +const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/; + +export default function SearchBar() { const [address, setAddress] = useState("") - const router = useRouter() const [isLoading, setIsLoading] = useState(false) - const [searchType, setSearchType] = useState<"onchain" | "offchain">("offchain"); + const [addressError, setAddressError] = useState(null) + const router = useRouter() + const [searchType, setSearchType] = useState<"onchain" | "offchain">("offchain") + const [network, setNetwork] = useState("mainnet") + const [provider, setProvider] = useState("etherscan") + + // Validate Ethereum address + const validateAddress = (addr: string): boolean => { + if (!addr) return false; + + // For on-chain searches, validate Ethereum address format + if (searchType === "onchain") { + if (!ETH_ADDRESS_REGEX.test(addr)) { + setAddressError("Invalid Ethereum address format. Must start with 0x followed by 40 hex characters."); + return false; + } + } else { + // For off-chain searches, validate Neo4j ID format + if (addr.length < 3) { + setAddressError("Neo4j identifier must be at least 3 characters"); + return false; + } + } + + setAddressError(null); + return true; + }; + + // Get available networks based on selected provider + const getAvailableNetworks = () => { + if (provider === "infura") { + return [ + { value: "mainnet", label: "Ethereum Mainnet" }, + { value: "optimism", label: "Optimism" }, + { value: "arbitrum", label: "Arbitrum" }, + ] + } else { + // Default Etherscan only supports Ethereum mainnet + return [ + { value: "mainnet", label: "Ethereum Mainnet" }, + ] + } + } + + // When provider changes, reset network if it's not available in the new provider + const handleProviderChange = (newProvider: ProviderType) => { + setProvider(newProvider) + + // Get available networks for the new provider + const availableNetworks = getAvailableNetworks().map(net => net.value) + + // Check if current network is available in the new provider + if (!availableNetworks.includes(network)) { + // If not, set to the first available network + setNetwork(availableNetworks[0] as NetworkType) + } + } + const handleSearch = async (e: React.FormEvent) => { e.preventDefault() - if (!address.trim()) return; + if (!address.trim()) return + + // Validate address before proceeding + if (!validateAddress(address.trim())) { + toast.error("Invalid address format", { + description: addressError || "Please check the address format and try again.", + action: { + label: 'Learn More', + onClick: () => window.open('https://ethereum.org/en/developers/docs/intro-to-ethereum/#ethereum-accounts', '_blank'), + } + }); + return; + } - setIsLoading(true); + setIsLoading(true) try { - // Giả lập thời gian tải (có thể thay bằng API call thực tế) - await new Promise(resolve => setTimeout(resolve, 2500)); + // Simulate loading time + await new Promise(resolve => setTimeout(resolve, 1000)) if (searchType === "onchain") { - router.push(`/search/?address=${encodeURIComponent(address)}`); + router.push(`/search/?address=${encodeURIComponent(address)}&network=${network}&provider=${provider}`) } else { - router.push(`/search-offchain/?address=${encodeURIComponent(address)}`); + router.push(`/search-offchain/?address=${encodeURIComponent(address)}`) } } catch (error) { - console.error("Search error:", error); + console.error("Search error:", error) + toast.error("An error occurred during search. Please try again.") } finally { - setIsLoading(false); + setIsLoading(false) } } - + const clearAddress = () => { setAddress("") + setAddressError(null) } + + const handleAddressChange = (e: React.ChangeEvent) => { + setAddress(e.target.value); + + // Clear error when user starts typing again + if (addressError) { + setAddressError(null); + } + }; + + const availableNetworks = getAvailableNetworks() return ( <> -
    -
    + +
    setAddress(e.target.value)} - className="pl-10 pr-10 py-2 w-full transition-all duration-200 focus:border-amber-500" + onChange={handleAddressChange} + className={`w-full pl-14 pr-12 py-3 text-white bg-gray-900/80 border rounded-xl focus:ring-2 placeholder-gray-400 transition-all duration-300 ease-out shadow-[0_0_15px_rgba(245,166,35,0.2)] hover:shadow-[0_0_25px_rgba(245,166,35,0.4)] ${ + addressError + ? "border-red-500 focus:ring-red-500/50 focus:border-red-500" + : searchType === "onchain" + ? "border-amber-500/20 focus:ring-amber-500/50 focus:border-amber-500" + : "border-blue-500/20 focus:ring-blue-500/50 focus:border-blue-500" + }`} /> {address.length > 0 && ( )}
    + + {addressError && ( +
    + + {addressError} +
    + )} + +
    + - - setNetwork(value as NetworkType)} > - - - + + + + + + {availableNetworks.map((network) => ( + + {network.label} + + ))} + + + + ) : ( +
    + + Neo4j Graph Database +
    + )} + + +
    + ) -} - +} \ No newline at end of file diff --git a/components/search-offchain/TransactionGraphOffChain.tsx b/components/search-offchain/TransactionGraphOffChain.tsx index 105ff97..3e82333 100644 --- a/components/search-offchain/TransactionGraphOffChain.tsx +++ b/components/search-offchain/TransactionGraphOffChain.tsx @@ -1,13 +1,22 @@ "use client"; import { useSearchParams, useRouter } from "next/navigation"; -import { useEffect, useState, useCallback } from "react"; +import { useEffect, useState, useCallback, useRef } from "react"; import dynamic from "next/dynamic"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Loader2} from "lucide-react"; +import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Loader2, ZoomIn, ZoomOut, Maximize2, Minimize2 } from "lucide-react"; +import { toast } from "sonner"; -// Dynamically import ForceGraph2D (without generic type arguments) -const ForceGraph2D = dynamic(() => import("react-force-graph-2d"), { ssr: false }); +// Dynamically import ForceGraph2D +const ForceGraph2D = dynamic(() => import("react-force-graph-2d"), { + ssr: false, + loading: () => ( +
    + +
    + ), +}); interface Transaction { id: string; @@ -17,12 +26,12 @@ interface Transaction { timestamp: string; } -// Define our node type with our custom properties. export interface GraphNode { id: string; label: string; color: string; type: string; + value?: number; // Adding value to size nodes properly x?: number; y?: number; vx?: number; @@ -31,73 +40,108 @@ export interface GraphNode { fy?: number; } +interface GraphLink { + source: string | GraphNode; + target: string | GraphNode; + value: number; + transaction?: Transaction; + color?: string; + curvature?: number; +} + interface GraphData { nodes: GraphNode[]; - links: { source: string; target: string; value: number }[]; + links: GraphLink[]; } const getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`; function shortenAddress(address: string): string { - return `${address.slice(0, 3)}...${address.slice(-2)}`; -} - -// A mock function to get a name for an address (replace with your actual logic) -function getNameForAddress(address: string): string | null { - const mockNames: { [key: string]: string } = { - "0x1234567890123456789012345678901234567890": "Alice", - "0x0987654321098765432109876543210987654321": "Bob", - }; - return mockNames[address] || null; + return `${address.slice(0, 6)}...${address.slice(-4)}`; } export default function TransactionGraphOffChain() { const searchParams = useSearchParams(); const router = useRouter(); - const address = searchParams?.get("address") ?? null; + const address = searchParams.get("address"); const [graphData, setGraphData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); - + const [isFullscreen, setIsFullscreen] = useState(false); + const graphRef = useRef(null); + const [hoverNode, setHoverNode] = useState(null); + useEffect(() => { if (address) { setLoading(true); setError(null); + fetch(`/api/transactions-offchain?address=${address}&offset=50`) .then((res) => res.json()) .then((data: unknown) => { if (!Array.isArray(data)) { - throw new Error((data as any).error || "Unexpected DB response"); + throw new Error((data as any).error || "Unexpected API response"); } + const transactions = data as Transaction[]; const nodes = new Map(); - const links: GraphData["links"] = []; + const links: GraphLink[] = []; + + // Track transaction counts for each address to size nodes appropriately + const txCounts = new Map(); + + // Initialize main address + txCounts.set(address, 0); + + // Add the main address node + nodes.set(address, { + id: address, + label: shortenAddress(address), + color: "#f5b056", // Amber color for the main node + type: "both", + value: 10, // Start with larger size for main node + }); transactions.forEach((tx) => { + // Count transactions for node sizing + txCounts.set(tx.from, (txCounts.get(tx.from) || 0) + 1); + txCounts.set(tx.to, (txCounts.get(tx.to) || 0) + 1); + if (!nodes.has(tx.from)) { - const name = getNameForAddress(tx.from); nodes.set(tx.from, { id: tx.from, - label: name || shortenAddress(tx.from), + label: shortenAddress(tx.from), color: getRandomColor(), type: tx.from === address ? "out" : "in", }); } if (!nodes.has(tx.to)) { - const name = getNameForAddress(tx.to); nodes.set(tx.to, { id: tx.to, - label: name || shortenAddress(tx.to), + label: shortenAddress(tx.to), color: getRandomColor(), type: tx.to === address ? "in" : "out", }); } + + // Use stronger colors with higher opacity for better visibility links.push({ source: tx.from, target: tx.to, - value: Number.parseFloat(tx.value), + value: Math.max(0.5, Math.min(3, Number.parseFloat(tx.value) || 1)), + transaction: tx, + color: tx.from === address ? "rgba(239, 68, 68, 0.8)" : "rgba(34, 197, 94, 0.8)", // Brighter colors + curvature: 0.2, // Increase curvature for better visualization }); }); + + // Update node values based on transaction counts + for (const [nodeId, count] of txCounts.entries()) { + const node = nodes.get(nodeId); + if (node) { + node.value = Math.max(3, Math.min(12, 3 + count)); // Scale between 3-12 based on transaction count + } + } setGraphData({ nodes: Array.from(nodes.values()), @@ -112,51 +156,66 @@ export default function TransactionGraphOffChain() { } }, [address]); - // Update onNodeClick to accept both the node and the MouseEvent. const handleNodeClick = useCallback( - (node: { [others: string]: any }, event: MouseEvent) => { - const n = node as GraphNode; - router.push(`/search/?address=${n.id}`); + (node: any) => { + const graphNode = node as GraphNode; + if (graphNode.id.startsWith("tx-")) return; // Skip transaction nodes + router.push(`/search-offchain/?address=${graphNode.id}`); }, [router] ); - - // Update nodes to reflect their transaction type ("both" if a node has both incoming and outgoing links) - useEffect(() => { - if (graphData) { - const updatedNodes: GraphNode[] = graphData.nodes.map((node) => { - const incoming = graphData.links.filter(link => link.target === node.id); - const outgoing = graphData.links.filter(link => link.source === node.id); - if (incoming.length > 0 && outgoing.length > 0) { - // Explicitly assert that the type is the literal "both" - return { ...node, type: "both" as "both" }; - } - return node; - }); - if (JSON.stringify(updatedNodes) !== JSON.stringify(graphData.nodes)) { - // Use the existing graphData rather than a functional update. - setGraphData({ - ...graphData, - nodes: updatedNodes, - }); + + const handleNodeHover = useCallback( + (node: { [others: string]: any; id?: string | number; x?: number; y?: number } | null) => { + if (node && 'label' in node && 'color' in node && 'type' in node) { + setHoverNode(node as GraphNode); + document.body.style.cursor = 'pointer'; + } else { + setHoverNode(null); + document.body.style.cursor = 'default'; } + }, + [] + ); + + const handleZoomIn = () => { + if (graphRef.current) { + const currentZoom = graphRef.current.zoom(); + graphRef.current.zoom(currentZoom * 1.2, 400); // 20% zoom in with 400ms animation } - }, [graphData]); + }; + + const handleZoomOut = () => { + if (graphRef.current) { + const currentZoom = graphRef.current.zoom(); + graphRef.current.zoom(currentZoom / 1.2, 400); // 20% zoom out with 400ms animation + } + }; + + const handleResetZoom = () => { + if (graphRef.current) { + graphRef.current.zoom(1, 800); // Reset to zoom level 1 with 800ms animation + graphRef.current.centerAt(0, 0, 800); // Center the graph + } + }; + + const toggleFullscreen = () => { + setIsFullscreen(!isFullscreen); + }; if (loading) { return ( - - + + +

    Loading transaction graph...

     ); } if (error) { return ( - - -

    Error: {error}

    -     + +

    {error}

     ); } @@ -166,49 +225,143 @@ export default function TransactionGraphOffChain() { } return ( - - - Transaction Graph + + +
    + + Transaction Graph + {graphData.links.length > 0 ? ( + + {graphData.links.length} {graphData.links.length === 1 ? "Transaction" : "Transactions"} + + ) : ( + + No Transactions + + )} + +
    + + + + +
    +
    - + node.id) as any} - nodeColor={((node: GraphNode) => node.color) as any} - nodeCanvasObject={ - ((node: GraphNode, ctx: CanvasRenderingContext2D, globalScale: number) => { - if (node.x == null || node.y == null) return; - const { label, type, x, y } = node; - const fontSize = 4; - ctx.font = `${fontSize}px Sans-Serif`; - ctx.textAlign = "center"; - ctx.textBaseline = "middle"; - ctx.beginPath(); - ctx.arc(x, y, type === "both" ? 4 : 3, 0, 2 * Math.PI, false); - ctx.fillStyle = - type === "in" - ? "rgba(0, 255, 0, 0.5)" - : type === "out" - ? "rgba(255, 0, 0, 0.5)" - : "rgba(255, 255, 0, 0.5)"; - ctx.fill(); - ctx.fillStyle = "white"; - ctx.fillText(label, x, y); - }) as any - } - nodeRelSize={6} - linkWidth={1} - linkColor={() => "rgb(255, 255, 255)"} + nodeRelSize={6} // Increase the relative node size linkDirectionalParticles={2} - linkDirectionalParticleWidth={3} + linkDirectionalParticleWidth={2} linkDirectionalParticleSpeed={0.005} - d3VelocityDecay={0.3} - d3AlphaDecay={0.01} + linkWidth={(link) => Math.sqrt((link as GraphLink).value) * 0.5} // Better scaling for link width + linkColor={(link) => (link as GraphLink).color || "rgba(255, 255, 255, 0.3)"} + linkCurvature={(link) => (link as GraphLink).curvature || 0.2} + d3AlphaDecay={0.02} // Slower cooling for better layout + d3VelocityDecay={0.1} // Less resistance for better separation + cooldownTime={3000} // Longer cooldown for better positioning + onNodeHover={handleNodeHover} onNodeClick={handleNodeClick} - width={580} - height={440} + nodeCanvasObject={(node, ctx, globalScale) => { + const { id, label, type, value, x, y } = node as GraphNode; + if (x == null || y == null) return; + + // Calculate node size based on value with minimum size + const nodeSize = (value || 5) * 0.8; + + // Draw node circle + ctx.beginPath(); + ctx.arc(x, y, nodeSize, 0, 2 * Math.PI, false); + + // Use consistent coloring based on node type + ctx.fillStyle = + type === "in" ? "rgba(34, 197, 94, 0.9)" : + type === "out" ? "rgba(239, 68, 68, 0.9)" : + "rgba(245, 176, 86, 0.9)"; + + // Add highlighting for hovered nodes + if (hoverNode && hoverNode.id === id) { + ctx.strokeStyle = "#ffffff"; + ctx.lineWidth = 2; + ctx.stroke(); + } + + ctx.fill(); + + // Only show labels if we're zoomed in enough or on hover + const labelVisible = globalScale > 1.2 || (hoverNode && hoverNode.id === id); + + if (labelVisible) { + // Draw a background for the text to improve readability + const fontSize = 8 / Math.sqrt(globalScale); + ctx.font = `${fontSize}px Arial`; + const textWidth = ctx.measureText(label).width; + const bckgDimensions = [textWidth + 8, fontSize + 4].map(n => n + 2); + + ctx.fillStyle = "rgba(0, 0, 0, 0)"; + ctx.fillRect( + x - bckgDimensions[0] / 2, + y + nodeSize + 2, + bckgDimensions[0], + bckgDimensions[1] + ); + + // Draw text + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillStyle = "white"; + ctx.fillText( + label, + x, + y + nodeSize + 2 + bckgDimensions[1] / 2 + ); + } + }} + width={isFullscreen ? window.innerWidth : 580} + height={isFullscreen ? window.innerHeight - 116 : 510} /> + +
    + {hoverNode && `Selected: ${hoverNode.label}`} +
    + +     ); -} +} \ No newline at end of file