projectopensea / embeddable-nfts Goto Github PK

<script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

<nft-card contractAddress="0x1301566b3cb584e550a02d09562041ddc4989b91"
tokenId = "4" <-- Random this number >
<script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js">
</script>

So I want to put the embed to the website but I want it to random the tokenId every time enter the site. is it have a way to do it?

I am trying to use this web component in my DApp, and after including it, web3.utils is undefined.

I understand that you are loading web3, it would be great if you could encapsulate it or have the application decide to bring its own (e.g. by setting a parameter to the component data-own-web3-provider)

I am using web3 from this provider (at the time of writing)
https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js

And connect it in this way:
window.web3 = new Web3(window.ethereum);

Originally posted by @kophyo1234 in #65 (comment)

Asdfjj

Is there a way to hide these things since I can’t delete them? It only lets me hide the ones that where air dropped. What’s the best program on GitHub to mess with and make cool nft stuff

src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

When embedding NFTs from Opensea using the suggested HTML snippet, whilst both sides of the embed work in Chrome, Brave, Safari, the "Info" side that flips and presents after clicking the info icon produces blank output in Firefox browsers.

For example, from the Opensea announcement post (https://opensea.io/blog/announcements/announcing-embeddable-nfts/):

Chrome (good output):

Brave (good output):

Firefox (90.3) (failed output):

Hi
I am trying to integrate Embeddable NFTs but facing a few issues on web-view-android.

I am using this URL https://opensea.io/assets/0x495f947276749ce646f68ac8c248420045cb7b5e/80429871025811185059637884652673309792751753756700706488218533753331367542785/ to show nft-card in my app

it works fine if add the product via WEB URL but when I am trying to use <nft-card> via web-view(android) it throws this error

Any help would be appreciated.

I have this other issue present with mainnet NFTs:

it infinitely loads with the following error:

This is using this asset

0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0
token id: 5536
network: mainnet

Obviously I've tried with other mainnet nfts and it won't work.

However, rinkeby items seem to work:

Here is the code I used for both cards.

<nft-card tokenAddress="0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0"
              tokenId="5536"
              network="mainnet"
              width="15rem">
            </nft-card>

I have tried using both
<script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

and
<script src="https://unpkg.com/[email protected]/dist/nft-card.min.js"></script>

It only shows price in Eth, is there a way to display the price in USD like the opensea.io website does?

Is there any way to add a refresh button to the error 'page' of "problem loading asset"? If I have more than 4 on a page, at least one will always error out. I've added delays before the script executes in order to try to alleviate the loading pressure, but that doesn't seem to fix it. It would be nice to have a refresh button that could re-execute the script so the user could manually reload only the content that failed to load.

When I click the info button the NFT card just flips vertically

This image is before I click the info button

After clicking the info button

Here is a working codepen: https://codepen.io/tuily/pen/LYeQNXE

Hi, is it intended that the ref ID is only getting added to the 'Buy this item' button and not the asset's title link or am I doing something wrong?

<script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

Hi,

It appears that the embed links are not working for NFTs on the Matic/Polygon network. I am consistently getting an error trying to load them. Is it possible to get a fix soon, I have a front end waiting to be populated?

Works fine with NFTs on the main ETH chain

Thanks

This input doesn't work responsively: orientationMode="auto"
It only converts to vertical view on a hard refresh after breaking width of 600px. Would be great to make this more responsive

Vertical display not working. Also, is there a way to style embeds?

I'm working on a simple embed widget for Hugo, but found that your embed API does not seem to support Polygon chain NFTs?

0x5Bb3dbb6408C011e82DED83b236e1943c77c6600

What license is the embeddable-nfts code published under?

Chrome is giving me this warning:

MetaMask: The event 'networkChanged' is deprecated and may be removed in the future. Use 'chainChanged' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193#chainchanged
_warnOfDeprecation @ inpage.js:1
on @ inpage.js:1
connectedCallback @ nft-card.ts:208
async function (async)
connectedCallback @ nft-card.ts:179

New collection

An NFT gift for lovers

I have tried to install the project but it does not work with my current version of node, I have 15.11.0, how can I run the project?

So, seems there is a ton of love to matic network on opensea, but no love for embedding.

I understand and have seen Matic is currently now supported... But is there a way to force support, or something that could be done on the back end to allow support?

would be nice

asd

I'm trying to embed an nft on a website and it doesn't work. using the nfts from this collection https://opensea.io/collection/south-polar-constellation

but if I use another nft if it works? that is not in the collection

I've added a custom width to the code:

<nft-card
contractAddress="0x495f947276749ce646f68ac8c248420045cb7b5e"
tokenId="3010427797529961947245158371114284343915982742756858378164285684396071059457">
width="100%"
</nft-card>

but it has no impact on the container. I'm trying to make it fit inside a responsive <div> as the default height and width settings don't allow this to work properly.

The card styling in the rendered iframe is embedded here:

<div class="card " style="width: 80vw; height: 210px; min-height: 200px; max-width: 670px;">

and my component input just shows up down below the card like this:

`<!-------->

width="100%"`

Which makes no difference to the width of the container.

I just noticed this when testing the embed. It erroneously shows up as unidentified, but if you click through all is ok.

Every time an OpenSea embedded NFT loads (using <nft-card/>) it throws this error:

Uncaught (in promise) TypeError: this.provider.on is not a function
    at HTMLElement.connectedCallback (nft-card.ts:203:19)

As you can see from the screenshot this happens multiple times for a single NFT.

Does anyone monitor or maintain this repo?

Hey, I've been playing around with the embeddable-NFT as I think it's a cool feature.
I've added it in a tiny space and this is what happens:

That made me think and I think it would be cool to have an option that allows us to choose what metadata to display at the back of the card.
It would also be cool to have an attribute "img-only" that would only show the image at the front of the card.

Loving it though, cheers team,

I can't list the embed stored in an array or external API

<nft-card contractAddress='{{date.contract}}' tokenId='{{data.token}}'> </nft-card>

[
   {
      "objectId":"M7jZ8OjC8j",
      "Nome":"Everthon",
      "contrato":"0x495f947276749ce646f68ac8c248420045cb7b5e",
      "token":"78495829787498492412723056243079961224868456392339058028291878295268482875393",
      "status":true,
      "rede":"opensea",
      "createdAt":"2021-08-23T11:54:17.248Z",
      "updatedAt":"2021-08-23T11:54:17.248Z"
   },
   {
      "objectId":"ltLbr24JCk",
      "Nome":"Paulinho",
      "contrato":"0x629a673a8242c2ac4b7b8c5d8735fbeac21a6205",
      "token":"16649640577943836210073419105215064703381732888531537205139611154943039406321",
      "rede":"opensea",
      "status":true,
      "createdAt":"2021-08-23T13:10:17.138Z",
      "updatedAt":"2021-08-23T13:10:17.138Z"
   }
]

I've seen posts that say embedding Matic NFTs isn't supported. Assume it's a similar issue for Solana. Would be great to know if this is in the pipeline or if I should plan for another route.