BidHistory component is pulling mint information from both "zoraNFT" and "zoraIndexerResponse" resulting in two mint entries.

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`

I'd like to have better control over the layout of this component.
current markup structure makes it very difficult to accomplish this layout:

The countdown timer doesn't update the data

The fix for #108 fixed up Safari support but we're getting issues now on Chromium browsers and Firefox.

• using default IPFS provider/backup gateway

Only show auction as "listed" when approved and active with the valid timestamp when approved compared to when listing requested.

Add listing requested state?

Make rinkeby network id 4

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

• Progress Bar: allow scrubbing, jumping in time. For longer videos especially a narrative or music video (for example) this would be a nice addition.
• Loading state: Make same aspect ratio (size) as media object.

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.

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

🔬 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!

cc @dblodorn

Backport changes from zora.co to shared poster / audio renderer component

use (intersection observer) for fold rendering?

Audit components (especially media players) for a11y support.

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;
  };

Include a flag in config to clear all emotion styling.

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.

Images get slightly cut off on the right side

zora-mediaObject seems to be slightly larger than its parent. As a result, the image gets cut off on the right side.

etherscan link arrows overflow on history section

Collection always shows as zora using beta indexer

1. add fullscreen option to all media
2. include minimize button for video media

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.

handle catalog.works metdata
test amulet metadata

integrate preview images into audio and video when available

Hello zora,

1. great job. thanks for all the tooling you open source and the visual design is just bonkers.
2. I can't access the discord anymore cause my phone number is taken, which worries me a little bit. currently I would really need the dev discord

My main problem is:
This is the collection I want to show on our website

• https://zora.co/collections/0xCf9928e1d45F47Cb35FB7a35b8024f9AE3075AeD

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.

1. Is it possible to integrate buy now on the page and not to link to zora marketplace? I know there "place-bid" hooks which allow this functionality.
2. The preview is still image only not the video if there is a video: NFTPreview and FullPage have the same issue – only show picture preview.

Happy Monday from Vienna

Some skeleton loader ui for media and some of the other components that currently show ...

Remove the rounding from the ETH amount

Many projects like Vite are on 18, and that makes it not compatible with this library. Could you please update to React 18.

The auction request component needs breakpoints to properly format on mobile.

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>

if an auction is in progression /auction/bid
if not, go to /bid/

Update server rendering documentation to handle non-zora NFTs and use correct method names.

Integrate with https://zora.engineering docs

We have a user that requests to only use zora names but NFTPReview currently has no flag to disable them.

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.

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.

eg. styled-components/styled-components#1086

Match zora.co design by adding a fading green circle adjacent to the countdown

After auction finishes keep countdown at 0:0:0 instead of rolling into a negative value.

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.