🚀 Getting Started with Marketplace UI

Welcome to Marketplace UI - your gateway to creating and publishing web3 marketplaces, powered by Next.js 13.

Explore the Demo

Before diving in, take a look at our demo for a preview of what you can achieve with Marketplace UI. Explore the Demo.

Setting Up Your Project

1. Initial Setup:

First, install the required dependencies and start application.

# Install dependencies
yarn

# Start the application
yarn dev

2. Environment Variable Configuration

Environment variables are typed in env.ts and defined in the .env file. Ensure the .env file is correctly defined during both build and runtime."

Based on the provided .env.example, here's an example of how your .env file should look:

NEXT_PUBLIC_NODE_ENV=development
NEXT_PUBLIC_BASE_PATH=""
NEXT_PUBLIC_RPC_URL="<YOUR_RPC_URL>"
NEXT_PUBLIC_CONTRACT_ADDRESS=<YOUR_ERC_721_CONTRACT_ADDRESS_1>,<YOUR_ERC_721_CONTRACT_ADDRESS_2>
NEXT_PUBLIC_NETWORK_ID=<YOUR_NETWORK_ID>
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=<YOUR_WALLET_CONNECT_PROJECT_ID>

# Cometh
NEXT_PUBLIC_COMETH_MARKETPLACE_API_URL="https://api.marketplace.cometh.io/v1"
NEXT_PUBLIC_COMETH_CONNECT_API_KEY=<API_KEY>
NEXT_PUBLIC_MARKETPLACE_API_KEY=<API_KEY>

NEXT_PUBLIC_COINGECKO_API_KEY=<API_KEY>

🔧 Your keys NEXT_PUBLIC_MARKETPLACE_API_KEY and NEXT_PUBLIC_COMETH_CONNECT_API_KEY are available in your cometh dashboard, they are usually the same key.

The NEXT_PUBLIC_COMETH_MARKETPLACE_API_URL is set by default for the polygon network. If you are on another network, you can find this url in your dashboard.

👉 To add Cometh Connect in your marketplace, you need to activate the product on your project: Cometh Connect.

The boilerplate uses RainbowKit or Web 3 modal which require a Walle Connect project ID to work. You can get your own project id for the NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID on the wallet connect website.

Setting up NEXT_PUBLIC_RPC_URL is not mandatory but we strongly advise so get a private RPC endpoint you can use for your marketplace (Alchemy, Infura...).

3. Customizing Your Marketplace

Manifest:

Use the manifests.ts file to configure essential aspects of your marketplace. It lets you set:

The name of your collection.
Asset attribute configurations.
Network details (update if not on polygon).
Currency settings. It's possible to use your own ERC20 instead of the native currency.
Fiat currency settings. You can display live fiat currency conversions.

🔧 Important: It's crucial to customize this manifests.ts file to align with the specifics of your marketplace.

Global configuration:

You can manage the configuration of your site directly from the site.ts file. This allows you to update site name, metadatas and links.

import { manifest } from "@/manifests"

export type SiteConfig = typeof siteConfig

export const siteConfig = {
  name: `${manifest.collectionName} | Marketplace`,
  description: `Discover ${manifest.collectionName}, the ultimate Web3 marketplace platform.`,
  mainNav: [
    {
      title: "Marketplace",
      href: "/nfts",
    },
  ],
}

Theming:

The appearance of your marketplace is fully customizable via the provided CSS file. Customize the styles/globals.css and tailwind.config.js files to define colors, fonts, etc.

Additionally, for a deeper dive into theming and styling, we invite you to consult the shacdn documentation.

3. FAQ

How do I sponsor my users transactions?

To sponsor the transactions of your users, you will first need to configure it in your project settings. Once this is done, you can set the field areContractsSponsored in your manifest file to true.

How do I use my own ERC20 token on the marketplace?

In your manifest file, you will need to use currency settings such as this:

// Set to true if you want to use the native token for orders
useNativeTokenForOrders: false,
// The ERC20 token used if useNativeTokenForOrders is false
erc20: {
  id: "mytoken-id", // The id of the token used by CoinGecko
  name: "My Token",
  symbol: "MTK",
  address: "0x42f671d85624b835f906d3aacc47745795e4b4f8",
  // put your logo in the '/public/tokens' folder and update the following line (example: "mytoken.png")
  thumb: "",
},

How do I add fiat currency to my marketplace?

In your manifest file, you will need to use currency settings such as this:

fiatCurrency: {
  enable: true,
  currencyId: "USD",
  currencySymbol: "$",
},

You can generate your own API key on the CoinGecko website. If you use ERC20 token, you need to manually add the id of the token specified by CoinGecko. e.g for bitcoin.

All supported currencyId can be found in types/currencies.ts.

What is an RPC and why would I need one?

An RPC node is the entry point of calls made to the blockchain. By default our tools will use public free RPC urls. However, to avoid throttling and performance issues in production, it is strongly recommended to find a better private RPC dedicated to your app.

Can I use Web 3 modal instead of Rainbow Kit?

Yes there is a variable in the manifest dedicated to choosing between those two. If you want to use a third different solution you can have a look at the authenticationUiSwitch.ts file.

cometh-hq/marketplace-ui