Add NFT Gallery and NFT components #46
Conversation
etr2460
force-pushed
the
erik-ritter--add-nft-components
branch
2 times, most recently
from
0663c8c to
d239e94
Compare
| fetch(`https://api.opensea.io/api/v1/assets?owner=${address}`) | ||
| .then((res) => res.json()) | ||
| .then((data) => setNfts(data.assets)); | ||
| }, []); |
There was a problem hiding this comment.
Shouldn't address be inside the dependencies-array? In case someone switches his active account on metamask for example.
Could be I'm wrong, not quite that familar on how it works yet.
There was a problem hiding this comment.
you're 100% right. thanks for catching this
etr2460
force-pushed
the
erik-ritter--add-nft-components
branch
from
d239e94 to
6837848
Compare
| useEffect(() => { | ||
| fetch(`https://api.opensea.io/api/v1/assets?owner=${address}`) | ||
| .then((res) => res.json()) | ||
| .then((data) => setNfts(data.assets)); |
There was a problem hiding this comment.
Would it make sense to proactively catch any error that might occur from opensea?
There was a problem hiding this comment.
ah yeah, error handling is a good idea :P i'll add it in (along with a unit test for it)
There was a problem hiding this comment.
basic error handing added, this could be improved in the future, but will work for now
| // File with API handlers shared across all tests. | ||
| // See https://kentcdodds.com/blog/stop-mocking-fetch for more details | ||
|
|
||
| import { rest } from "msw"; |
| * TODO: Add a component that fetchs the NFT data from the blockchain and uses this component to | ||
| * display it | ||
| */ | ||
| export const NFT = ({ |
There was a problem hiding this comment.
Do you think it would make sense to add a link to see it in etherscan?
There was a problem hiding this comment.
I'll iterate more on this in a future PR. i wanna look into more nft types, more metadata/attributes, link in etherscan, etc.
|
Thanks for this @etr2460! Feel free to merge this in since I might not be able to review until much later today. :) |
|
@allcontributors add @etr2460 for code, review |
|
I've put up a pull request to add @etr2460! 🎉 |
|
@allcontributors add @crondinini for code, review |
|
I've put up a pull request to add @crondinini! 🎉 |
|
sorry for the spam <3 |
etr2460
force-pushed
the
erik-ritter--add-nft-components
branch
from
6837848 to
34631de
Compare
This PR adds 2 new components to web3-ui:
NFTGalleryandNFTNFTGallery calls the opensea API to fetch all the assets owned by a given wallet. It then uses the NFT component to render these in a grid.
A couple limitations:
Obviously theres a bunch of future work that can be done here, but this was me getting to learn how to use Chakra-UI mainly. Some future enhancements:
Test Plan
Added new stories and unit tests. This included the introduction of
mswfor mocking API responses (thanks Kent C. Dodds).to: @Dhaiwat10 @crondinini @with-heart