marketTutorial

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

Part 1: CONNECT WIDGET

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>

located inside <div class=“collection”> on line ~563

STEP 1: GET FALLBACK PROVIDER

link https://www.alchemy.com/

for data-fallback-provider="wss://YOUR_WEBSOCKET_PROVIDER”

1a. create new app

1b. click “API KEY”

1c. copy “WEBSOCKET”

1d. replace wss://YOUR_WEBSOCKET_PROVIDER

STEP 2: GET WALLET CONNECT PROJECT ID

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

STEP 3: GET MANIFOLD “CLIENT ID”

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

stay on page for step 4

STEP 4: GET MANIFOLD “APP NAME”

4a. copy app name

4b. replace YOUR_APP_NAME in index.html

PART 2: MARKETPLACE WIDGETS

retrieve NFT information / integration

js marketplace.manifoldxyz.dev/latest/marketplace.umd.min.js

css https://marketplace.manifoldxyz.dev/latest/marketplace.css

WIDGET EXAMPLE(S):

retrieve artwork title

<div
  data-widget="m-listing-name"
  data-id=“LISTING_ID”
  data-network="1"
></div>

retrieve place bid / buy section

<div
  data-widget="m-listing-bid-form"
  data-id=“LISTING_ID”
  data-network="1"
></div>

retrieve artwork description

<div
  data-widget="m-listing-description"
  data-id=“LISTING_ID”
  data-network="1"
></div>

retrieve artwork metadata (attributes)

<div
  data-widget="m-listing-attributes"
  data-id=“LISTING_ID”
  data-network="1"
></div>

located inside each <div class="nft-wrapper"> on lines ~596, ~650, & ~704

STEP 5: GET “LISTING ID”

link 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

(or copy numbers from the end of the claim pages URL ex. https://gallery.manifold.xyz/listing?listingId=0000)

5d. replace LISTING_ID in index.html

PART 3: EXTRAS

more things

link https://app.ens.domains

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>

located inside <div class=“collection”> on line ~579

6a. replace EDIT.eth with your ens name

STEP 7: ADDING URLS / LINKS

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

located inside the <script> on line ~794

7a. go to your NFTs manifold gallery listing page

copy url https://gallery.manifold.xyz/listing?listingId=... for “nftOne”

7b. click “view original media”

copy url https://arweave.net/... for “imgOne”

7c. click “view on etherscan”

copy url 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/...

FUNCTIONS:

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>

FINAL CHECKLIST:

a few things to update in the index.html file before you publish

look for EDIT anywhere in the file and update as needed

TITLE:

update site title <title>EDIT</title>

TOKEN ID:

update the <button>token id: EDIT</button> for each nft

COPYRIGHT:

RIGHT-CLICK:

enable or disable right-click

ENABLED:

<script>
  document.addEventListener('contextmenu', event => {
  event.preventDefault();
  });
</script>

DISABLED:

<!--
<script>
  document.addEventListener('contextmenu', event => {
  event.preventDefault();
  });
</script>
-->

or just delete the <script>

DEMO

all html, js, and css have been separated for ease of use in codepen

https://codepen.io/laeght/pen/zYbrKbG

DOWNLOAD

contains index.html, styles.css, satoshi.css (with fonts), & placeholder.png

https://www.dropbox.com/scl/fo/kljltimh2mi93cmdaagqj/h?rlkey=bpm3n0ow59dhp5ti7lhfhkk2h&dl=0

ver. 0.1.3

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.