Welcome to Marketplace UI - your gateway to creating and publishing web3 marketplaces, powered by Next.js 13.
Before diving in, take a look at our demo for a preview of what you can achieve with Marketplace UI. Explore the Demo.
First, install the required dependencies and start application.
# Install dependencies
yarn
# Start the application
yarn dev
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...).
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.
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",
},
],
}
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.
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.
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: "",
},
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
.
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.
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.