projectopensea / embeddable-nfts Goto Github PK
View Code? Open in Web Editor NEWEasily embed OpenSea listings in your website!
Easily embed OpenSea listings in your website!
Originally posted by @kophyo1234 in #65 (comment)
It only shows price in Eth, is there a way to display the price in USD like the opensea.io website does?
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 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"
}
]
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,
Asdfjj
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?
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?
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.
0x5Bb3dbb6408C011e82DED83b236e1943c77c6600
An NFT gift for lovers
Vertical display not working. Also, is there a way to style embeds?
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.
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
<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
What license is the embeddable-nfts code published under?
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);
src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
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>
<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?
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?
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?
<script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
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.
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.
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
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
I'm working on a simple embed widget for Hugo, but found that your embed API does not seem to support Polygon chain NFTs?
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
would be nice
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):
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.