for Manifold Gallery listings in html
all html, js, and css below are already in the template index.html file
all styling is located in <style> inside <head>
all styling in <style> will be overwritten by styles.css
allows users to connect their wallet
js https://connect.manifoldxyz.dev/latest/connect.umd.min.js
css https://connect.manifoldxyz.dev/latest/connect.css
WIDGET EXAMPLE:
<div
data-widget="m-connect"
data-auto-reconnect="false"
data-fallback-provider="wss://YOUR_WEBSOCKET_PROVIDER”
data-client-id="CLIENT_ID”
data-app-name=“YOUR_APP_NAME”
data-multi="true"
data-network=“1”
data-wallet-connect-project-id="WALLETCONNECT_PROJECT_ID”
></div>
<div class=“collection”> on line ~563for data-fallback-provider="wss://YOUR_WEBSOCKET_PROVIDER”
1a. create new app
1b. click “API KEY”
1c. copy “WEBSOCKET”
1d. replace wss://YOUR_WEBSOCKET_PROVIDER
link https://cloud.walletconnect.com/sign-in
for data-wallet-connect-project-id="WALLETCONNECT_PROJECT_ID”
2a. create a new app
2b. copy “PROJECT ID”
2c. replace WALLETCONNECT_PROJECT_ID in index.html
link https://developer.manifoldxyz.dev/
for data-client-id="CLIENT_ID”
data-app-name=“YOUR_APP_NAME”
3a. create new app
App Name: This name is customer facing and will be used for authentication messaging
App Description: This is a description only visible to you on the developer dashboard
Redirect URI: Put your domain url
Grant Type: Choose Signature Grant
3b. copy client id
3c. replace CLIENT_ID in index.html
4a. copy app name
4b. replace YOUR_APP_NAME in index.html
retrieve NFT information / integration
js marketplace.manifoldxyz.dev/latest/marketplace.umd.min.js
css https://marketplace.manifoldxyz.dev/latest/marketplace.css
WIDGET EXAMPLE(S):
<div
data-widget="m-listing-name"
data-id=“LISTING_ID”
data-network="1"
></div>
<div
data-widget="m-listing-bid-form"
data-id=“LISTING_ID”
data-network="1"
></div>
<div
data-widget="m-listing-description"
data-id=“LISTING_ID”
data-network="1"
></div>
<div
data-widget="m-listing-attributes"
data-id=“LISTING_ID”
data-network="1"
></div>
<div class="nft-wrapper"> on lines ~596, ~650, & ~704link https://studio.manifold.xyz
for data-id="LISTING_ID"
5a. mint NFT on manifold studio
5b. create manifold GALLERY LISTING
5c. copy “LISTING ID” from manifold studio gallery listing final page
5d. replace LISTING_ID in index.html
more things
for data-creator-address=“YOURNAME.eth”
allows users to subscribe to YOURNAME.eth
js https://subscribe.manifoldxyz.dev/0.2.0/widget.umd.min.js
css https://subscribe.manifoldxyz.dev/0.2.0/widget.css
WIDGET EXAMPLE:
<div
data-widget="m-widget-subscribe"
data-creator-address=“YOURNAME.eth”
></div>
<div class=“collection”> on line ~5796a. replace EDIT.eth with your ens name
scroll to the <script> at the bottom of the index.html file
edit the links in each pre-prepared function or copy the function to make your own
FUNCTION EXAMPLE:
function nftOne() {
window.open("https://etherscan.io/token/...", "_blank");
}
<script> on line ~7947a. go to your NFTs manifold gallery listing page
https://gallery.manifold.xyz/listing?listingId=... for “nftOne”7b. click “view original media”
https://arweave.net/... for “imgOne”7c. click “view on etherscan”
https://etherscan.io/token/... for “claimOne”7d. get the following URLs are for each contract
contract address https://etherscan.io/address/...
wallet address https://etherscan.io/address/...
7e. get the following URLs are for social media
twitter https://twitter.com/...
instagram https://www.instagram.com/...
FND https://foundation.app/
OBJKT https://objkt.com/profile/...
OPENSEA https://opensea.io/...
ZEROONE https://zeroone.art/profile/...
ZORA https://zora.co/...
if functions are added or changed make sure you update onclick="nftNumber()" in both the <script> at the bottom of the index.html file and in the <button> that uses it so they match
EXAMPLE:
<div class="details-block">
<button onclick="imgNumber()">original media</button>
<button onclick="nftNumber()">token id: EDIT</button>
<h3 onclick="claimNumber()">view on Manifold</h3>
</div>
<script>
function nftNumber() {
window.open("https://etherscan.io/token/....", "_blank");
}
function imgNumber() {
window.open("https://arweave.net/....", "_blank");
}
function claimNumber() {
window.open("https://gallery.manifold.xyz/....", "_blank");
}
</script>
a few things to update in the index.html file before you publish
EDIT anywhere in the file and update as neededupdate site title <title>EDIT</title>
update the <button>token id: EDIT</button> for each nft
update the copyright <h3>2023 © EDIT. all rights reserved.</h3>
enable or disable right-click
ENABLED:
<script>
document.addEventListener('contextmenu', event => {
event.preventDefault();
});
</script>
DISABLED:
<!--
<script>
document.addEventListener('contextmenu', event => {
event.preventDefault();
});
</script>
-->
<script>all html, js, and css have been separated for ease of use in codepen
contains index.html, styles.css, satoshi.css (with fonts), & placeholder.png
made possible using yungwknd.eth’s Manifold Forum responses
and rodrigobardin.eth’s documentation + demo
https://forum.manifold.xyz/c/developers/
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/connect-widget/advanced-configuration
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/marketplace-widgets
https://twitter.com/rbardin/status/1722708445692850548
https://rodrigobardin.xyz/art/drop-page/drop-download/
thank you for reading.