@tradeport/mint-widget

Mint Widget

A React component for integrating NFT minting functionality into your website/application. This widget provides a beautiful and user-friendly interface for users to mint NFT drops and editions launched through TradePort.xyz

Installation

npm install mint-widget
# or
yarn add mint-widget
# or
pnpm add mint-widget

Usage

import { MintWidget } from "mint-widget";

function App() {
  return (
    <div className="w-full max-w-2xl p-4 mx-auto">
      <MintWidget
        chain="sui"
        collectionChainId="your-collection-chain-id"
        media="large"
        theme="dark"
        buttonColor="#FF0000" // Optional: Custom button color
      />
    </div>
  );
}

Props

Prop	Type	Required	Description
chain	"sui"	Yes	The blockchain network to use. Currently only supports Sui.
collectionChainId	string	Yes	The unique identifier of the collection to mint from. For Sui, it is the package object ID. It can also be found in the url of the collection page on Tradeport.xyz
editionTokenId	string	No	Include this if the launch is an edition. The token ID for a specific edition within the collection. You can find this as the "mintTokenId" param in the url of the mint page on Tradeport.xyz
media	"none" | "small" | "large"	Yes	Controls the size of the NFT media display.
theme	"dark" | "light"	Yes	The color theme of the widget.
buttonColor	string	No	Custom color for the primary action buttons.

Features

• 🎨 Beautiful, responsive UI
• 🌓 Dark/Light theme support
• 🔗 Sui blockchain integration
• 📱 Mobile-friendly design
• 🖼️ NFT media display with full-size view
• 📊 Minting progress tracking
• 🔄 Real-time updates

Requirements

• React 17 or 18
• React DOM 17 or 18

Peer Dependencies

This package requires the following peer dependencies:

{
  "peerDependencies": {
    "react": "^17 || ^18",
    "react-dom": "^17 || ^18"
  }
}

Example

Here's a complete example of how to use the MintWidget in a React or Next.js application:

The widget is designed to look good at all screen sizes and will take the full size of the container it is in, so it is up to you to wrap it in the container size you want.

import { MintWidget } from "mint-widget";

export default function MintPage() {
  return (
    <div className="w-full max-w-2xl p-4 mx-auto">
      <MintWidget
        chain="sui"
        collectionChainId="your-collection-id"
        media="large"
        theme="dark"
        buttonColor="#4F46E5"
      />
    </div>
  );
}

Styling

The widget comes with its own styles and is built with Tailwind CSS. It will automatically adapt to your application's theme settings. If you have a dark background, use the theme="dark". If you have a light background, use the theme="light". The background of the widget is transparent so will take on what's behind it. You can customize the color of the main action button if you want to as well.

License

MIT