Skip to content

SolDapper/mcswap-shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mcswap-shop

This module will embed a Solana NFT storefront into an existing application. Listings are powered by the native Solana programs of the McSwap Trustless Escrow Protocol. This module makes use of the mcswap-sdk to directly integrate with the protocol.

mcswap shop

powered by solana

install

npm i mcswap-shop

html

<div id="my-market"></div>

usage

import shop from "mcswap-shop";
import "mcswap-shop/src/colors/green-shop.css";
const myshop = new shop(process.env.RPC);
myshop.init({
  id: "my-market",
  name: "McSwap Shop",
  logo: "",
  logo_link: "",
  default_priority: "Low",
  default_sort: "Newest First",
  default_display: "All Listings",
  text_intro: "Initializing Demo",
  text_buy: "Buy Me",
  master_settings: true,
  enable_new_listings: true,
  enable_edit_sort: true,
  enable_edit_display: true,
  fee_create: 0,
  fee_execute: 0,
  treasury: "",
  enable_edit_core: true,
  enable_edit_nft: true,
  enable_edit_pnft: true,
  enable_edit_cnft: true,
  core_display: true,
  nft_display: true,
  pnft_display: true,
  cnft_display: true,
  collections_display: true,
  enable_edit_collections: true,
  collections: "6Gfz6beNCcP8P7vrMyN2AFtsuv8rkVszSJ8xoP4zQyaR,ACy3ZVXcch8mZXUtRVqsJfa2DhFHxnUJpBb4oeN9tZsX,BL8ocmGmaEiM73JYjAAhgAmHPbtuY3CThYem9g4N5PqQ,BTJPWLW7DLQWpm2TNNEByAM5a1E1AGJp4h43czo9YBLc,Cq2BNRoE5RqyqSmACDQLx4ivp3MgmePwd2mdroZ5hmom,H3mnaqNFFNwqRfEiWFsRTgprCvG4tYFfmNezGEVnaMuQ",
  sellers_display: true,
  enable_edit_sellers: true,
  sellers: "7Z3LJB2rxV4LiRBwgwTcufAWxnFTVJpcoCMiCo8Z5Ere,2jcih7dUFmEQfMUXQQnL2Fkq9zMqj4jwpHqvRVe3gGLL",
  shop_styler: {
    shop:{
      "background": "#1a1a1a",
      "background-repeat": "no-repeat",
      "background-size": "cover",
      "background-position": "center"
    },
    wrapper:{
      // "background": "#000000eb"
    },
    header:{
      "color": "#fff"
    },
    titles:{
      "color": "#fff"
    },
    details:{
      "color": "#1367d4",
    },
    labels:{
      "color": "#1367d4",
    }
  }
});

notes

If you're using a wallet connector other than mcswap-connector, to allow your shop to update it's display to including the "Delist" button on assets listed by the connected wallet, be sure to set:

window.mcswap = provider; // after your wallet connects
window.mcswap = false; // after your wallet disconnects

If you're using the mcswap-connector then window.mcswap is already set for you. And you can access the current provider object from any scope:

const provider = window.mcswap;

config options

Parameter Type Default Description
id string false
name string McSwap Shop
logo url false
logo_link url #
priority string Low
default_sort string Newest First
default_display string All Listings
text_intro string Initializing Market
text_buy string Buy Me
master_settings bool true
enable_new_listings bool true
enable_edit_sort bool true
enable_edit_display bool true
fee_create float 0
fee_execute float 0
treasury string false
enable_edit_core bool true
enable_edit_nft bool true
enable_edit_pnft bool true
enable_edit_cnft bool true
core_display bool true
nft_display bool true
pnft_display bool true
cnft_display bool true
collections_display bool true
enable_edit_collections bool true
collections csv ""
sellers_display bool true
enable_edit_sellers bool true
sellers csv ""
shop_styler obj false

shop_styler

the styler object lets you add some css to fine tune your shop's color scheme

  {
    shop:{
      "background": "#1a1a1a",
      "background-repeat": "no-repeat",
      "background-size": "cover",
      "background-position": "center", // add css style to your shop background
    },
    wrapper:{
      // "background": "#000000eb" // optional layer between background and shop content
    },
    header:{
      "color": "#fff", // page name color
    },
    titles:{
      "color": "#fff", // listing title color
    },
    details:{
      "color": "#1367d4", // listing price color 
    },
    labels:{
      "color": "#1367d4", // settings page label color
    }
  }