MintWidget Demo

Interactive demo showcasing @tradeport/mint-widget with configurable props

View Docs in NPM

Widget Controls

Current Props

<MintWidget
  chain="sui"
  collectionChainId="0xa8eff89a730a01928577a2d4c653d7fdf9a1dfe8ffab95918fda7187a73d199f"
  media="large"
  theme="dark"
  buttonColor="#d98d00"
/>

Container Controls

Container Size

Background Color

Widget Preview

Container: 75vw

How to Use in Your App

1. Install the package:

npm install @tradeport/mint-widget

2. Import and use:

import { MintWidget } from "@tradeport/mint-widget";
import "@tradeport/mint-widget/style.css";

function App() {
  return (
    <div style={{ width: "75vw", padding: "20px", margin: "0 auto" }}>
      <MintWidget
        chain="sui"
        collectionChainId="0x9d10aa77300885cb02098eb13cadcbf5ff3e9078b04f08d035cdedd8030ff0fb"
        media="large"
        theme="dark"
      />
    </div>
  );
}