Style NFT detail page

[benborgers]

This styles the NFT detail page (/nft/[address]) page with a developer-y table of attributes and their values.

Solana addresses are copyable, and links are clickable. Traits (if present) are listed under a separate table.

Examples:

• https://nftoken-git-l-5177-create-nft-detail-page.luma-dev.com/nft/uERDSnn8x7Hjv6zPMFpGXrbXEvGVwwBAaViFrDdjXr6
• https://nftoken-git-l-5177-create-nft-detail-page.luma-dev.com/nft/GtmTbLRKJxPAo4ZREr8sWq928sbG9xJo845U5eQNmL2f

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nftoken	✅ Ready (Inspect)	Visit Preview	Jun 28, 2022 at 5:56PM (UTC)

[benborgers]

@vpontis Just curious, why did you choose to load the data both in getServerSideProps and on the client side with SWR? I can follow the same data loading approach with the collection page.

[vpontis]

@vpontis Just curious, why did you choose to load the data both in getServerSideProps and on the client side with SWR? I can follow the same data loading approach with the collection page.

• getServerSideProps — This allow us to have initial data when the page loads. That means there is no loading state and search engines can pick up our page.
• swr — We want to refresh data automatically if you switch between tabs.

[vpontis]

Sweet!

1. Let's be smarter about having an empty state if there are no traits
2. Let's update Collection to link to the collection page if a collection is set. We can also make another request to get rich collection info and have that as a separate section (similar to how Traits is a separate section)

[benborgers]

I’ve added a button that leads to the collection page but commented it out for now since the collection page doesn’t exist yet. Having another two levels of data (nft.collection attributes and maybe nft.collection.traits) on the NFT page felt like it would make the page too complex, so I’ll have a similar table of attributes/traits on the collection page a click away.