🪙 Mintme Widget

A React widget for creating Solana tokens with a simple, intuitive interface. Built for developers who want to integrate token creation functionality into their applications.

Powered by mintme-sdk - The most reliable Solana token creation SDK.

🚀 Playground Codesandbox.io

• React: https://codesandbox.io/p/sandbox/mintme-widget-react-yn68rc
• Vite+React: https://codesandbox.io/p/devbox/react-ts-mintme-widget-pkh3g3

✨ Features

• 🚀 Easy Integration - Drop-in React component
• 🎨 Customizable Themes - Light, dark, and system themes
• 🔗 Custom RPC Support - Use your own Solana RPC endpoint
• 📁 IPFS Integration - Automatic metadata and image upload via Pinata.cloud
• 💰 Partner Fees - Optional revenue sharing
• 📱 Responsive Design - Works on all screen sizes
• 🔍 Real-time Logging - Monitor the token creation process
• ⚡ Powered by mintme-sdk - Battle-tested token creation engine

🛠️ Built With

This widget is powered by mintme-sdk, our robust Solana token creation SDK that handles:

• ✅ Token minting with proper authorities
• ✅ Metadata creation and validation
• ✅ Transaction optimization
• ✅ Error handling and retries
• ✅ Multi-network support
• ✅ Partner fee distribution

Want more control? Use mintme-sdk directly in your backend or custom applications.

📦 Installation

npm install mintme-widget

🚀 Quick Start

import { MintmeWidget } from 'mintme-widget'

function App() {
  const handleTokenCreation = (tokenData, result) => {
    console.log('Token created:', result.tokenAddress)
    console.log('Transaction:', result.transactionSignature)
  }

  return (
    <MintmeWidget
      endpoint="https://devnet.helius-rpc.com/?api-key=your-key"
      cluster="devnet"
      pinataConfig={{
        apiKey: "your-pinata-jwt-token",
        gateway: "your-gateway.com"
      }}
      partnerWallet="your-wallet-here"
      partnerAmount={0}
      defaultTheme="light"
      options={{
        showCredit: false
      }}
      className="my-custom-styles"
      onSubmit={handleTokenCreation}
      onLog={(message) => console.log('Log:', message)}
    />
  )
}

📋 Props Reference

Required Props

None! The widget works with default settings.

Optional Props

Prop	Type	Default	Description
cluster	"mainnet-beta" | "testnet" | "devnet"	"devnet"	Solana network to use
endpoint	string	-	Custom RPC endpoint URL
onSubmit	function	-	Callback when token is created successfully
onLog	function	-	Callback for real-time process logs
defaultTheme	"light" | "dark" | "system"	"dark"	Widget theme
pinataConfig	PinataConfig	-	IPFS upload configuration
partnerWallet	string	-	Partner wallet address for fees
partnerAmount	number	0	Partner fee amount in SOL
options	object	{}	Additional widget options
className	string	-	Custom CSS class

🔧 Complete Configuration

<MintmeWidget
  endpoint="https://devnet.helius-rpc.com/?api-key=your-key"
  cluster="devnet"
  pinataConfig={{
    apiKey: "your-pinata-jwt-token",
    gateway: "your-gateway.com"
  }}
  partnerWallet="your-wallet-here"
  partnerAmount={0}
  defaultTheme="light"
  options={{
    showCredit: false
  }}
  className="my-custom-styles"
  onSubmit={handleTokenCreation}
  onLog={(message) => console.log('Log:', message)}
/>

📝 Callback Functions

onSubmit Callback

Called when a token is successfully created.

const handleTokenCreation = (tokenData, result) => {
  // tokenData: Form data entered by user
  console.log('Token Name:', tokenData.tokenName)
  console.log('Symbol:', tokenData.tokenSymbol)
  console.log('Supply:', tokenData.initialSupply)
  
  // result: Blockchain transaction result
  console.log('Token Address:', result.tokenAddress)
  console.log('Transaction:', result.transactionSignature)
  console.log('Metadata URI:', result.metadataUri)
}

onLog Callback

Called during the token creation process for real-time updates.

const handleLog = (message) => {
  console.log('Process:', message)
  // Examples of messages:
  // "📤 Uploading image to IPFS..."
  // "✅ Image uploaded successfully"
  // "🪙 Creating token on Solana blockchain..."
  // "🎉 Token created successfully!"
}

🎨 Theming

The widget supports three theme modes:

• "light" - Light theme
• "dark" - Dark theme
• "system" - Follows system preference

<MintmeWidget defaultTheme="system" />

🔗 IPFS Configuration

To enable image and metadata uploads, configure Pinata:

1. Get your JWT token from Pinata
2. Optionally set up a custom gateway

<MintmeWidget
  pinataConfig={{
    apiKey: "your-jwt-token",
    gateway: "your-gateway.com" // optional
  }}
/>

💰 Partner Fees

Earn revenue by setting partner fees:

<MintmeWidget
  partnerWallet="YourSolanaWalletAddress"
  partnerAmount={0.01} // 0.01 SOL per token creation
/>

🌐 Network Support

Network	Cluster Value	Description
Devnet	"devnet"	Development network (free SOL)
Testnet	"testnet"	Testing network
Mainnet	"mainnet-beta"	Production network

🎯 TypeScript Support

The widget is built with TypeScript and includes full type definitions:

import { MintmeWidget, type TokenData, type TokenCreationResult } from 'mintme-widget'

const handleSubmit = (data: TokenData, result: TokenCreationResult) => {
  // Fully typed parameters
}

🔧 Custom Styling

Add custom styles using the className prop:

<MintmeWidget className="my-widget-styles" />

.my-widget-styles {
  max-width: 800px;
  margin: 2rem auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

📱 Responsive Design

The widget is fully responsive and works on:

• 📱 Mobile devices
• 📟 Tablets
• 💻 Desktop computers

🔗 Related Projects

mintme-sdk

The core SDK powering this widget. Perfect for:

• 🏗️ Backend Integration - Server-side token creation
• 🔧 Custom Applications - Build your own token creation tools
• ⚡ Advanced Features - Full control over token parameters
• 🚀 Production Ready - Battle-tested and optimized

npm install mintme-sdk

import { createToken } from 'mintme-sdk'

const result = await createToken({
  connection,
  payer,
  name: "My Token",
  symbol: "MTK",
  // ... more options
})

Choose the right tool: Use the widget for quick UI integration, use the SDK for custom implementations.

🆘 Support

• 🌐 Website: mintme.dev
• 📦 SDK: mintme-sdk on npm

📄 License

MIT License - see LICENSE file for details.

---

Made with ❤️ by the Mintme team | Powered by mintme-sdk