ourzora / nft-components Goto Github PK
View Code? Open in Web Editor NEWNFT Rendering Components
License: GNU General Public License v3.0
NFT Rendering Components
License: GNU General Public License v3.0
Match zora.co design by adding a fading green circle adjacent to the countdown
Collection always shows as zora using beta indexer
use (intersection observer) for fold rendering?
Understand many nft's are video loops so not meant to be scrubbed, so perhaps progress bar becomes visible while hovering at bottom of video container.
Make rinkeby network id 4
Currently when using the FullComponents.AuctionInfo
component shows sold for info inconsistently:
I believe this is located to NFT Components and not the Iframe Embed codebase.
Perhaps we should revisit this component, and add some config options for what it renders for different market states.
Not showing here:
https://embed.zora.co/config/0x364547ADfc7a180744D762056Df35eeaEa803EC4/1
Although showing here:
https://embed.zora.co/config/foundation/105683
Add an option to auto-reload auction information every N seconds
We're not having luck with the NFTPreview
component working in Safari on iOS for rabbithole.gg. It is working on desktop.
<MediaConfiguration
networkId={networkId}
style={styleOverride(true)}
>
<NFTPreview
id={id}
showBids={false}
refreshInterval={5000}
href={`https://zora.co/${data?.nft?.creator}/${data?.nft?.tokenId}`}
/>
</MediaConfiguration>
After auction finishes keep countdown at 0:0:0 instead of rolling into a negative value.
The fix for #108 fixed up Safari support but we're getting issues now on Chromium browsers and Firefox.
The countdown timer doesn't update the data
After importing @zora/nft-components
package in https://github.com/benschac/create-zora-graphql-app/ I got an error.
Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Which 3
seemed like the likely culprit.
I then: npm ls react
and confirmed @zora/nft-components
was the only package that shipped with react v.17
[email protected] /Users/benjaminschachter/zora-hack
├─┬ @apollo/[email protected]
│ └── [email protected] deduped
├─┬ @rainbow-me/[email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @zoralabs/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├── [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ @zoralabs/[email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
├─┬ @wagmi/[email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected] deduped
└─┬ [email protected]
└── [email protected] deduped
```
To test that `@zora/nft-components` was the culprit I added [selective version resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/) and bumped `@zora/nft-components` to v18 with the rest of my project.
https://github.com/benschac/create-zora-graphql-app/blob/main/package.json#L25
Now the components work and the page is loading.
The simplest solution here seems to not ship a version of react with `@zora/nft-components`
New. media properties in NFTObject allow us to use mediaEncodings from Zora API
media?: {
mimeType?: string;
source: MEDIA_SOURCES;
image?: MediaObject;
large?: MediaObject;
poster?: MediaObject;
thumbnail?: MediaObject;
// backwards compatibility
content?: MediaObject;
};
We should be surfacing these new properties in RenderRequest so they can be used in renderers. Current RenderRequest only surfaces these properties:
media: {
// from zora content uri
content?: MediaUriType;
image?: MediaUriType;
// from metadata.animation_url
animation?: MediaUriType;
};
Only show auction as "listed" when approved and active with the valid timestamp when approved compared to when listing requested.
Add listing requested state?
May be worth figuring out how to use a class to configure network uris and renderer information for easier overridability and ability to read what's there.
Pinata (:sadface:) and some other IPFS gateways rate-limit after a number of requests.
For auction houses, this is a problem and adding a configuration flag for preferred IPFS provider can fix this.
Hello zora,
My main problem is:
This is the collection I want to show on our website
The fetching with the zora zdk works properly but the NFTPreview shows me "unknown".
Here is a link to the codesandbox. With the parameters you give in the storybook the video preview works but it simply doesn't work for the NFTs I want to show. Any idea what might cause the issue.
EDIT (18. Jul 2022): I get a preview now of the NFT – see codesandbox.
Happy Monday from Vienna
The blockTimestamp property from zoraIndexerResponse data is formatted as normal date not a unix date. When converting with dateFromTimestamp function this results in an incorrect date conversion.
if an auction is in progression /auction/bid
if not, go to /bid/
Include a flag in config to clear all emotion styling.
Fullcomponents.PlaceOfferButton should link to:
https://zora.co/collections/[collection]/[tokenId]/offer
as opposed to:
https://zora.co/[collection]/[tokenId]/bid
which results in a 404 on zora.co
Audit components (especially media players) for a11y support.
Many projects like Vite are on 18, and that makes it not compatible with this library. Could you please update to React 18.
To expose different states of the UI to users for styling it would be ideal to display that state with a selector or aria label.
BidHistory component is pulling mint information from both "zoraNFT" and "zoraIndexerResponse" resulting in two mint entries.
We have a user that requests to only use zora names but NFTPReview currently has no flag to disable them.
Backport changes from zora.co to shared poster / audio renderer component
Just a quality-of-life thing, as there are client-side workarounds, but it'd be super if className props were always down to components so eg. we can apply sx={} props to nft-components instances.
cc @dblodorn
Some skeleton loader ui for media and some of the other components that currently show ...
Update server rendering documentation to handle non-zora NFTs and use correct method names.
Integrate with https://zora.engineering docs
handle catalog.works metdata
test amulet metadata
integrate preview images into audio and video when available
🔬 In src/stories/CustomMediaObjects.stories.mdx
, I found a typographical error at the end of this sentence:
These components can be upgraded or overrideen.
I will open a PR to address this!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.