Closed sekaiking closed 2 years ago
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/7eEypfnJvTtpRvFB6ePMDNmSCVY3
✅ Preview: https://frontend-git-componentshooks-curaos.vercel.app
Summary of the PR
The Goal
building an NFTE component, that relies on
@cura/hooks
and@cura/components
What and why?
hooks
NFT
data is scattered on-chain and off-chain. That's why having new hooks that takes care of fetching data would make it look cleaner and it would also be reusable in new projects.The new hooks are:
useViewNFTMethod
is used to call view methods from the NEAR blockchain. It's mainly used within others hooksuseNFTContractMetadata
is used to get the metadata of thecontract
, this was needed in the NFTE component because of thebase_url
that we used in combination with themedia
hash to build a full linkuseNFT
is used to get the metadata of the NFTtoken
useNFTReference
is used to fetch the additional NFT info from the referenceURI
provided by the NFT metadatauseNFTContentType
is used to determine themedia
type from givenURI
and if the media is a text we return it too, so we don't to call the sameURI
again.Also, some changes has been done:
NFT
, to keep things organizeduseNFTContract
anduseNFTMethod
have been separated each on their own folder, to stay consistent with other hooksAnd some notes:
README
file but decided to remove it, because it would be better if we had hooks documentation with other docs. I will make a new issue for it.networks
so the tests can fail if you set the network tomainnet
. I made an issue for it #95components
the NFTE component rely on other components and mainly
MediaObject
andMetadata
which are used to display the data that we fetched using hooks then processed inside theNFTE
The new components are:
NFTE
the goal of this PRPlaceholder
which can be used to improve user experience while the we load data and it has been used insideMediaObject
andMetadata
componentsMediaObject
which is used to display the media in the its correct HTML elementOther changes:
Metadata
has been rewritten to display more info about the NFT and it has a loading state nowNotes about
NFTE
:NFTE
relies on 3 hooks to fetch data, 2 on-chain and 1 off-chain.NFTE
gets data first from the NFT on-chain metadata and replace empty strings from off-chain metadata using the reference.NFTE
support currently Mintbase.io and Paras.id and Cura.run. A different NFT contract than this three may or may not break it.frontend
All edits in the frontend are just to match hooks and components updates.
RenderIframe
to display all medias, but now it has been switched toMediaObject
create
page now uses an iframe to render the HTMLview
pages have been updated to not pass gas touseNFTMethod
hook because the method used is a viewMethod and passing gas breaks it.Github workflow
hooks test has been added to Github workflow