new NFTE component & updates to Metadata component

[sekaiking]

New

Sub Components

• Added a Placeholder component, to be used within others component to improve UX. It's just a component that returns an animated box with custom height, width, and possibility to add additional styles using props.

Components

• NFTE is the new component mentioned in #9 , it rely on Metadata and Renderiframe components for UI and has a dark mode. And for the NFT data, it's fetching it using near-api-js internally with a function (which need to be replaced with a hook on the future)

example: https://6172ea299f78dc003a6c934a-sxpaegeerj.chromatic.com/?path=/story/components-nfte--light

Changed

• Metadata component changed to display more info, now it can display (title, creator, owner, description). It has also a loading animation while we fetch data from server use 'loading' prop.

example: https://6172ea299f78dc003a6c934a-sxpaegeerj.chromatic.com/?path=/docs/components-metadata--loading

Issues

• NFTE component need to use a hook for fetching NFTs instead of doing it internally.
• RenderIframe component doesn't display images properly when the iframe content is larger than its size.

check https://6172ea299f78dc003a6c934a-sxpaegeerj.chromatic.com/?path=/story/components-nfte--ml-1-c

Suggestions

• RenderIframe need to be able to fetch the NFT Url and handle its content accordingly instead of using Iframe. So that we have more control over how its being displayed.
• We can make a new reusable hook to only fetch NFTs from the blockchain. Which could be useful for anyone who needs to display an NFT without relying on already styled component.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/curaos/frontend/4GXLmweRT84guYe8kEexhZC1grEy
✅ Preview: https://frontend-git-components-hooks-curaos.vercel.app

[sekaiking]

• RenderIframe need to be able to fetch the NFT Url and handle its content accordingly instead of using Iframe. So that we have more control over how its being displayed.

I was looking more into this, and there is a simpler solution.

All we get from the blockchain is the media URL, and this URL can be (html, image, video, audio). The metadata from blockchain doesn't tell us the type, so we have to figure it out,

How? We can fetch the HEAD of the Url, to determine the media type, then Render it depending on the type.

For example:

fetch(mediaURI, { method: 'HEAD' }).then((r) => {
    const cType = r.headers.get('Content-type')

    if (cType.includes('image')) {
        // Use img tag
    } else if (cType.includes('video')) {
        // Use video tag
    } else if (cType.includes('audio')) {
        // Use audio tag
    } else {
        // Use iframe tag
    }
})

And I think it would be better, if we made a component that handle all types of media. (Like this one: https://github.com/contextart/nfte/blob/main/packages/react/src/components/Media.tsx)

a Media component, which will take (MediaUrl, Size) as props and use the mentioned function above to detect media type and renders the media accordingly.

This would also simplify the frontend example, currently it uses RenderIframe or img hardcoded depending on the project type.

TO DO

• New Media component
• Remove RenderIframe or move it inside Media
• Change 'example/frontend' to use Media

[sekaiking]

New

Hooks:

useNFTContentType hook to fetch NFT contentType from provided URI useViewNFTMethod hook to use NFT contract view methods without needing user account

Components:

MediaObject component, it take a mediaURI and returns the matching element

Updated

Frontend:

frontend now uses MediaObject to show NFT medias

Removed

Components

RenderIframe component has been removed and replace with MediaObject

[sekaiking]

New

new hooks for NFT + simple unit tests + README for the hooks

Update

NFTE component updated to support NFTs from Mintbase and Paras.id Some other components have been improved

[sekaiking]

Currently we can test NFTE component only for contracts on testnet network, unless you change it manually from the hooks package. If you get an error while testing different contracts that's the reason.