Skip to content

Commit 41b3ce3

Browse files
TTMordredTTMordred
authored
Merge pull request #139 from TTMordred/nft_collection_2
Nft collection 2
2 parents 27c0de8 + 63b1c14 commit 41b3ce3

2 files changed

Lines changed: 110 additions & 42 deletions

File tree

‎components/NFT/AnimatedNFTCard.tsx‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -264,16 +264,36 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized
264264

265265
{/* Attributes */}
266266
<div className="flex flex-wrap gap-1 mt-3">
267-
{nft.attributes?.slice(0, 3).map((attr, i) => (
268-
<Badge
269-
key={i}
270-
variant="outline"
271-
className={`text-xs ${chainTheme.borderClass}`}
272-
style={{ color: chainTheme.primary }}
273-
>
274-
{attr.trait_type === 'Network' ? null : `${attr.trait_type}: ${attr.value}`}
275-
</Badge>
276-
))}
267+
{(() => {
268+
const processAttributes = () => {
269+
let attrs = nft.attributes;
270+
if (attrs && !Array.isArray(attrs) && typeof attrs === 'object') {
271+
attrs = Object.entries(attrs).map(([trait_type, value]) => ({
272+
trait_type,
273+
value: String(value)
274+
}));
275+
}
276+
return (Array.isArray(attrs) ? attrs : [])
277+
.filter(attr =>
278+
attr &&
279+
typeof attr === 'object' &&
280+
'trait_type' in attr &&
281+
'value' in attr
282+
)
283+
.slice(0, 3);
284+
};
285+
286+
return processAttributes().map((attr, i) => (
287+
<Badge
288+
key={i}
289+
variant="outline"
290+
className={`text-xs ${chainTheme.borderClass}`}
291+
style={{ color: chainTheme.primary }}
292+
>
293+
{attr.trait_type === 'Network' ? null : `${attr.trait_type}: ${attr.value}`}
294+
</Badge>
295+
));
296+
})()}
277297
</div>
278298
</div>
279299
</motion.div>

‎lib/api/alchemyNFTApi.ts‎

Lines changed: 80 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -445,52 +445,100 @@ const mockBNBCollections = [
445445
category: 'Gaming'
446446
},
447447
{
448-
id: '0xcec33930ba196cdf9f38e1a5e2a1e0708450d20f',
449-
name: 'Era7: Game of Truth',
450-
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!',
451-
imageUrl: 'https://images.pocketgamer.biz/T/52539/2022/52539_Era7_Game_of_Truth_screenshot_1.png',
452-
bannerImageUrl: 'https://pbs.twimg.com/profile_banners/1428004235405357057/1648021562/1500x500',
453-
floorPrice: '0.4',
454-
totalSupply: '33000',
448+
id: '0x25dc4d9e2598c21dc020aa7b741377ecde971c2f',
449+
name: 'RhnoX',
450+
description: 'RhnoX, dinooo',
451+
imageUrl: 'https://img-cdn.magiceden.dev/rs:fill:400:0:0/plain/https%3A%2F%2Fbafybeihxzn2o4daow6cbth7pzlwwsdhb3ryzzvhok4ukz3uiodyygexcmu.ipfs.w3s.link%2F7cbfe2c138dd4140bd5c6739dae1a346_400x400.webp',
452+
bannerImageUrl: 'https://img-cdn.magiceden.dev/da:t/rs:fill:400:0:0/plain/https%3A%2F%2Fimg.reservoir.tools%2Fimages%2Fv2%2Fbsc%2Fi9YO%252F4yHXUdJsWcTqhqvf32nwo61iwc9Eyq2MC1NyBZeThvD0pm%252F1LLHrhwGoSCwdW5QSWIe85nAF4iiibr1aGhRpa5Hg0%252BO5wPuwlsxeqo%253D.png',
453+
floorPrice: '0',
454+
totalSupply: '10000',
455455
chain: '0x38',
456456
verified: true,
457-
category: 'Gaming'
457+
category: 'Animals'
458458
},
459459
{
460-
id: '0x04a5e3ed4907b781f702adbddf1b7e771c31b0f2',
461-
name: 'BSC Punks',
462-
description: 'CryptoPunks on BSC - 10,000 uniquely generated characters on the BNB Chain.',
463-
imageUrl: 'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE=s130',
464-
bannerImageUrl: 'https://pbs.twimg.com/profile_banners/1364731917736632321/1649351522/1500x500',
465-
floorPrice: '0.25',
466-
totalSupply: '10000',
460+
id: '0x6dfbb01ecb7991366cd8acc4d18dcc67bbe345ba',
461+
name: 'Reefer by CoralApp',
462+
description: 'Reefer by CoralApp, horse fishh',
463+
imageUrl: 'https://img-cdn.magiceden.dev/rs:fill:400:0:0/plain/https%3A%2F%2Fimg.reservoir.tools%2Fimages%2Fv2%2Fbsc%2FM%252FK47YBCAs6ieLgkYDuIwv46DpQnevL2hmBULPkK3BuBY8BG4GGzXB22H3E0Phb8M9RMHorMwBwK9g1GNRSmHqKVgKxZwKqawUsxLVBU98czgEyHu8JPigR%252B0hTOIEKPQ2fByOR1AiDomIAfUK%252BOjwn70fv7FQbGrZSFpOxFo3IM2D6K7unSJoB%252BIKRyIT38%252Fnx%252F0gpUvVgL3ehrSXBVchEdeTxrzHqQXzaxM9WErHlgdPAGFDVnnuDu62qDy0dJ',
464+
bannerImageUrl: 'https://img-cdn.magiceden.dev/da:t/rs:fill:400:0:0/plain/https%3A%2F%2Fimg.reservoir.tools%2Fimages%2Fv2%2Fbsc%2Fi9YO%252F4yHXUdJsWcTqhqvfzU%252F3WKezZwCXanKqYOzVPg%252BaktrSCM23x2y61NuH7tbBMKNqglfI%252B%252Ba3fQp0Y8y2rfX9lGSU5olT3da4GRyRONg6tDeCs5Q29nd1XKfAxFv.png',
465+
floorPrice: '0.2',
466+
totalSupply: 'xxx',
467+
chain: '0x38',
468+
verified: true,
469+
category: 'Animals'
470+
},
471+
{
472+
id: '0xabd1780208a62b9cbf9d3b7a1617918d42493933',
473+
name: 'BitLife',
474+
description: 'Reefer by CoralApp, horse fishh',
475+
imageUrl: 'https://img-cdn.magiceden.dev/rs:fill:400:0:0/plain/https%3A%2F%2Fimg.cellula.life%2Froleimagefactory%2Fb108_B_5.gif',
476+
bannerImageUrl: 'https://img-cdn.magiceden.dev/autoquality:size:1024000:20:80/da:t/rs:fill:400:0:0/plain/https%3A%2F%2Fimg.cellula.life%2Froleimagefactory%2Fa90_A_4.gif',
477+
floorPrice: '0.0015',
478+
totalSupply: 'xxx',
479+
chain: '0x38',
480+
verified: true,
481+
category: 'Robots'
482+
},
483+
{
484+
id: '0xbd19b4c3c1e745e982f4d7f8bdf983d407e68a46',
485+
name: 'AneeMate Genesis Zero',
486+
description: 'Reefer by CoralApp, horse fishh',
487+
imageUrl: 'https://img-cdn.magiceden.dev/rs:fill:400:0:0/plain/https%3A%2F%2Fimg.reservoir.tools%2Fimages%2Fv2%2Fbsc%2FCkMT33f1Sv9wfP6vXxX9omNeQgD5%252Bce5kPfKyaki6jmvvnHsubJ%252BWJr2NEaHrLZae3jIQM8an2M07TnJEan8HlV14iWeesdefnM%252BxMdKsgs%253D',
488+
bannerImageUrl: 'https://img-cdn.magiceden.dev/da:t/rs:fill:64:0:0/plain/https%3A%2F%2Fmetadata.qorpo.world%2Faneemate-genesis%2Fmedia%2FGENESIS_PYROS.jpg',
489+
floorPrice: '1.5',
490+
totalSupply: '3000',
491+
chain: '0x38',
492+
verified: true,
493+
category: 'Game'
494+
},
495+
{
496+
id: '0xDf7952B35f24aCF7fC0487D01c8d5690a60DBa07',
497+
name: 'Pancake Bunnies',
498+
description: 'Pancake Bunnies are collectible NFTs on BNB Chain created by PancakeSwap. These adorable bunny NFTs feature various themes and styles, serving as digital collectibles in the PancakeSwap ecosystem.',
499+
imageUrl: 'https://dappradar.com/image-resizer/width=64,quality=100/https://dashboard-assets.dappradar.com/document/4600/pancakeswap-dapp-defi-bsc-logo-166x166_783df04863220a6371e78725e2fa3320.png',
500+
bannerImageUrl: 'https://dappradar.com/nft-metadata-image?encrypted=true&format=big-preview&filePath=c6fb236ebe75b44224d832afe92b7bf4d9c3bbd3083f2f7e8e3165b4585f90e080a2aaf821da426f31d3dc58a870ae477bd8f1f4c95f97fd75ff78fd17418836ad28289b8e3dde0f2b5d46a418ce93978d27239f31c23aa09b9b4ab80cb1481539fdb6c65858854966251d5dd8ec613705cb9fd4b06ade913edc20a5eb5b0bdf54eb148e3df70d5bf9eb9732ed301921',
501+
floorPrice: '0.2',
502+
totalSupply: '14000',
503+
chain: '0x38',
504+
verified: true,
505+
category: 'Collectibles'
506+
},
507+
{
508+
id: '0xF250bf5953B601E42E93226F7A9e4e8B9E7435Af',
509+
name: 'Legendary Pandra King',
510+
description: 'Legendary Pandra King',
511+
imageUrl: 'https://dappradar.com/image-resizer/width=64,quality=100/https://metadata.dappradar.com/api/media/collection/legendary-pandra-king-3?isThumbnail=0',
512+
bannerImageUrl: 'https://dappradar.com/nft-metadata-image?encrypted=true&format=big-preview&filePath=c6fb236ebe75b44224d832afe92b7bf4d9c3bbd3083f2f7e8e3165b4585f90e010c8f5ab67e87091eb47c157f82c1054ed6056b2afd9d302705b406e5f48bfdd964ad5b88e9cc7fd9ec5aa8e626ef389eac6467952d11912c205003f262fe0550ccd94fa49444f38881ddfe418464db8129356323e33097fcccb9ccc0bf50793bbb4ba1ed84d7da3620008ad3527226d',
513+
floorPrice: '0.2',
514+
totalSupply: '135',
467515
chain: '0x38',
468516
verified: false,
469-
category: 'Art & Collectibles'
517+
category: 'Collectibles'
470518
},
471519
{
472-
id: '0x85f0e02cb992aa1f9f47112f815f519ef1a59e2d',
473-
name: 'BNB Bulls Club',
474-
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.',
475-
imageUrl: 'https://static-nft.pancakeswap.com/mainnet/0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D/banner-lg.png',
476-
bannerImageUrl: 'https://static-nft.pancakeswap.com/mainnet/0x85F0e02cb992aa1F9F47112F815F519EF1A59E2D/banner-lg.png',
477-
floorPrice: '1.2',
478-
totalSupply: '10000',
520+
id: '0xa9E9A78fF1027dc0dd1Ee54D7f134f191541Fe07',
521+
name: 'Frontera',
522+
description: 'Frontera',
523+
imageUrl: 'https://dappradar.com/image-resizer/width=64,quality=100/https://metadata.dappradar.com/api/media/sales/any/nft-metadata/bsc/0xa9e9a78ff1027dc0dd1ee54d7f134f191541fe07/0xa9e9a78ff1027dc0dd1ee54d7f134f191541fe07_64_64.jpg',
524+
bannerImageUrl: 'https://dappradar.com/nft-metadata-image?encrypted=true&format=big-preview&filePath=c6fb236ebe75b44224d832afe92b7bf4d9c3bbd3083f2f7e8e3165b4585f90e010c8f5ab67e87091eb47c157f82c1054ed6056b2afd9d302705b406e5f48bfdd964ad5b88e9cc7fd9ec5aa8e626ef389eac6467952d11912c205003f262fe0550ccd94fa49444f38881ddfe418464db8129356323e33097fcccb9ccc0bf50793bbb4ba1ed84d7da3620008ad3527226d',
525+
floorPrice: '0.2',
526+
totalSupply: '3200',
479527
chain: '0x38',
480528
verified: false,
481-
category: 'Membership'
529+
category: 'Collectibles'
482530
},
483531
{
484-
id: '0xc274a97f1691ef390f662067e95a6eff1f99b504',
485-
name: 'Tin Fun NFT',
486-
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!',
487-
imageUrl: 'https://i.seadn.io/s/raw/files/a531bedf317b5ffe5a35d559b5c94cd9.jpg?auto=format&dpr=1&w=256',
488-
bannerImageUrl: 'https://i.seadn.io/s/primary-drops/0xc274a97f1691ef390f662067e95a6eff1f99b504/31341974:about:media:98e2f8a2-a8aa-46d9-9267-87108353c759.jpeg?auto=format&dpr=1&w=1920',
489-
floorPrice: '0.0929',
490-
totalSupply: '9999',
532+
id: '0x9F471abCddc810E561873b35b8aad7d78e21a48e',
533+
name: 'Galxe OAT',
534+
description: 'Galxe OAT (On-chain Achievement Token) is a collection of NFTs that represent achievements and credentials earned on Galxe, a Web3 credential data network. Each OAT signifies participation in ecosystem campaigns and community events.',
535+
imageUrl: 'https://i.seadn.io/gcs/files/c083274101cf84f66c7490b14d7dc480.png?auto=format&dpr=1&w=256',
536+
bannerImageUrl: 'https://i.seadn.io/gcs/files/c083274101cf84f66c7490b14d7dc480.png?auto=format&dpr=1&w=256',
537+
floorPrice: '0.05',
538+
totalSupply: '250000',
491539
chain: '0x38',
492540
verified: true,
493-
category: 'China'
541+
category: 'Credentials'
494542
}
495543
];
496544

0 commit comments

Comments
 (0)