/BitMint-BETA-Ordinal-Mint-Site

**DEVELOPMENT IN PROGRESS** Example site below.... Easily deploy a collection, setup easy user minting directly here in the frontend for your ordinals collection!

Primary LanguageTypeScriptMIT LicenseMIT

BitMint BETA - Minting DApp Configuration Guide

🚨IN PROGRESS NOT READY FOR PRODUCTION!🚨

Simple Low-Code mint DApp for ordinal collections fully onchain.

Easily deploy a collection, setup easy user minting directly here in the frontend for your collection! Full integrated Xverse, Unisat, Hiro wallet connect integration, tracking order status and much more!

Project screenshot

Table of Contents

  1. BitMint BETA - Minting DApp Configuration Guide
  2. In Progress & Completed Features βš™οΈ
  3. Configuration Guide πŸ”§
  4. Step 1: Setting Up the Configuration File
  5. Step 2: Creating a New Collection 🎨
  6. Step 3: Deploying the Site For Minting πŸ’»
  7. Contributing 🀝
  8. Learn More πŸ“š
  9. License πŸ“œ
  10. Contact πŸ“¨

In Progress & Completed Features βš™οΈ

In progress
  • - Fix FEE and order confirmation
  • - Finish implementing custom gas for economy, normal, custom
  • - Add whitelist phase and functionality
  • - Integrate automatic application process
  • - Integrate recursive ordinals support
  • - MORE COMING SOON!!!
Completed
  • - 1 command collection creation - npm run create
  • - 1 file easy setup configuration - config.ts
  • - 20+ Built in Fonts
  • - Easy minting UI
  • - Multi Wallet Connect support - Xverse, Unisat, Hiro, More coming soon!
  • - Pending order status tracking - Live order tracking

Configuration Guide πŸ”§

Step 1: Setting Up the Configuration File

To start setting up the BitMint DApp, you need to fill out the config.ts file in the const folder. This file contains the primary configuration of your minting DApp, including information about your social links, mint options, collection options, and other constants.

Replace the placeholder values in the corresponding sections. If you do not wish to include a certain platform in the socialLinks object, you may leave the string empty ('') which will make it not show the icon on the frontend.

config.ts example
const socialLinks: SocialLinks = {
  twitter: '<Your Twitter Link>',                  // replace with your Twitter link
  instagram: '<Your Instagram Link>',              // replace with your Instagram link
  discord: '<Your Discord Link>',                  // replace with your Discord link
  telegram: '<Your Telegram Link>',                // replace with your Telegram link
  website: '<Your Website Link>',                  // replace with your website link
  email: 'mailto:<Your Email>',                    // replace with your email - ex. 'mailto:example@gmail.com'
};

const mintOptions: MintOptions = {
  publicMintStart: new Date('<UTC Date>'),         // replace with the public mint start UTC date in 'YYYY-MM-DDTHH:MM:SS' format
  publicMintPrice: <Price in Satoshis>,            // replace with the public mint price in Satoshis
  limitPerWallet: <Limit per Wallet>,              // replace with the limit per wallet
  recipientBTCAddress: '<BTC Address>',            // replace with the recipient BTC address
  totalSupply: <Total Supply>,                     // replace with the total supply of NFTs
  artFilesFolder: '<IPFS Folder Link>',            // replace with the link to your art collection in a local folder ex. './assets'
  optimizeImages: true,                            // Optimize images - true/false
  artFilesMimeType: "<MIME Type>",                 // replace with the MIME type of your files. - refer below to the MIME types and file extensions
  artFilesExtension: "<File Extension>",           // replace with the file extension of your files. - refer below to the MIME types and file extensions
  fee: <Fee>,                                      // DO NOT CHANGE THIS UNLESS YOU KNOW WHAT YOU ARE DOING
  serviceFee: <Service Fee>,                       // DO NOT CHANGE THIS UNLESS YOU KNOW WHAT YOU ARE DOING
};

const collectionOptions: CollectionOptions = {
  id: '<Collection ID>',                            // replace with your collection ID
  creator: '<Creator>',                             // replace with your creator name
};

const constants: Constants = {
  fontStyle: '<Font Style>',                        // replace with the desired font style - Font1, Font2, Font3, etc. up to Font13
  title: "<Title>",                                 // replace with your title
  description: "<Description>",                     // replace with your description
  collectionImage: "<Path to Collection Image>",    // replace with the path to the collection image
  navbarImage: "<Path to Navbar Image>",            // replace with the path to the navbar image
  socialLinks: socialLinks,                         // DO NOT CHANGE THIS
  mintOptions: mintOptions,                         // DO NOT CHANGE THIS
  collectionOptions: collectionOptions,             // DO NOT CHANGE THIS
};
export default constants;

MIME types and file extensions

List of possible MIME types and file extensions:
// 'image/apng' and 'apng'
// 'audio/flac' and 'flac'
// 'image/gif' and 'gif'
// 'text/html' and 'html'
// 'image/jpeg' and 'jpg' or 'jpeg'
// 'audio/mpeg' and 'mp3'
// 'application/pdf' and 'pdf'
// 'image/png' and 'png'
// 'image/svg+xml' and 'svg'
// 'text/plain' and 'txt' or 'asc'
// 'audio/wave' and 'wav'
// 'video/webm' and 'webm'
// 'image/webp' and 'webp'
// 'video/mp4' and 'mp4'
// 'model/stl' and 'stl'
// 'model/gltf-binary' and 'glb'
// 'image/avif' and 'avif'
// 'text/yaml' and 'yaml' or 'yml'
// 'application/json' and 'json'

Step 2: Creating a New Collection 🎨

After you've successfully set up your configuration file, it's time to generate your art collection! This is accomplished with the createCollection.ts script. This handy tool takes your art files, generates all the necessary collection data, and then communicates with our API endpoint to initiate the creation process.

To use this script, please follow the steps below:

  1. Prepare your Art Files: Ensure that all required art files are located in the folder specified by the artFilesFolder field in your constants file.

  2. Run the createCollection script: This is easily done using the following command:

    npm run create

    This command initiates the script, which will create your collection based on the information provided in your configuration file.


Step 3: Deploying the Site For Minting πŸ’»

After your collection has been created, it's time to deploy your site and start minting! But first, you'll need to head over to the OrdinalsBot Discord and apply for collection approval. Upon approval, you'll receive an API key that will enable users to POST mint requests to your newly setup collection.

Add your API key to the .env file (or to your Environment Variables if you're using Vercel or a similar service) as follows:

ORDINALSBOT_API_KEY=<Your API Key>

Finally, deploy your site! Setting up a GitHub repo and deploying your site with Vercel for a smooth and cost-effective launch.

Deploy with Vercel




Contributing 🀝

Fork

Contributions are what make the open-source community vibrant, inspiring, and a great place for learning. Any contributions you make to BitMint are greatly appreciated.

  1. Fork the project.
  2. Create your feature branch (git checkout -b feature/AmazingFeature).
  3. Commit your changes (git commit -m 'Add some AmazingFeature').
  4. Push to the branch (git push origin feature/AmazingFeature).
  5. Open a pull request.

Learn More πŸ“š

Here are some resources to help you get started:

These resources will help you understand the technologies used in this project and allow you to better use, modify, and contribute to the project.


License πŸ“œ

BitMint is distributed under the MIT License. See LICENSE for more information.


Contact πŸ“¨

You can reach out through the following:

Twitter - @bankkroll_eth