Mirror World Marketplace Storefront Template

This repo contains a plug n' play template for the Mirror World SDK Marketplace. All features in this template were built using Mirror World's SDK API

The stack:

• Frontend Framework - Next.js
• UI Library - Ant Design Mobile
• Authentication & Marketplace APIs - Mirror World SDK

This storefront template supports Solana at this time. Multi-chain support template is not yet available. Please ping us on Discord for discussions about Multi chain support.

• Found a bug? Please open an discussion or report on Discord
• Questions and Discussions? - The fastest place to get a response in Discord. But for community visibility, please open a new GitHub discussion.
• Contributions are welcome - This template is open-source, so all positive contributions and improvements are welcome from the community.

Pre-requisites

1. Developer account on Mirror World Developer Dashboard
2. Project API Key (Copy from your project on dashboard)
3. Collection Addresses (Copy from your project on dashboard)

Usage

1. Clone this template repo:

git clone git@github.com:mirrorworld-universe/marketplace-storefront.git

2. Install dependencies

yarn install

(🚨🚨🚨 IMPORTANT 🚨🚨🚨) 3. Configure your marketplace variables in the userConfig.json file in the root.

Example config:

{
  // Array of collections
  "collections": [
    "CnFFwJ4V2RaNorLs7EdtNZqQ2uhgXp6X3gKEmLgxEBPZ"
  ],
  // Marketplace Address. Acquired from the Developer Dashboard
  "auctionHouse": "ADbCePQTzA9feKn78ny4UhD5ADVgm16T3vZabXN1dkzQ",
  // API Key - Example API Key.
  "xApiKey": "mw_lCX2WHH7_d0nT_4ctuaL1y_us3_Th1s_l0L_JN0FAMIqM5",
  // Your marketplace service fee. Acquired from developer dashboard
  "serviceFee": "3",
  // Your marketplace settlement currency. Example
  // SOL: So11111111111111111111111111111111111111112
  // USDC: EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v
  // 
  // 🚨 Important: This must match the currency you selected when creating the dashboard
  "currencyOption": "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
  // Name of the marketplace
  "name": "Demo Storefront",
  // Image URL for your marketplace
  "logo": "https://www.jbakebwa.dev/assets/images/jbakebwa-headshot.jpeg",
  // Network of your marketplace. Accepts either `mainnet` or `devnet`
  "network": "mainnet"
}

4. Run dev server

yarn dev

If you configured your marketplace correctly, you should be able to see a screen similar to this in the browser at http://localhost:3000:

At this point you may make changes to your > marketplace storefront as you see fit.

This is entirely up to you. You may change the > colors, fonts, and layouts until you're satisfied.

Some helpful resources

• JavaScript SDK API Reference
• SDK Development Guide
• Full API Documentation
• Developer Discord Community

5. That's it! Deploy your static site!

You can deploy yoru Next.js site using Vercel or Netlify, or Cloudflare Pages.

License

MIT License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Jonathan Bakebwa 💻 🐛

nancyl 💻 🎨

Nguyen Duong 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!