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.
npm i mcswap-shop
<div id="my-market"></div>
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",
}
}
});
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;
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 |
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
}
}