🪙 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