@inscrib3/example

A reference implementation showcasing how to use the Inscrib3 SDK and React components to build a complete Ordinals drop management application.

Overview

This example application demonstrates the integration of @inscrib3/react to create a fully functional web application for managing Ordinals drops on Bitcoin. It includes all the essential features:

• Wallet connection
• Creating new drops
• Listing all drops
• Viewing drop details
• Removing drops
• Minting from drops
• Managing file uploads

Getting Started

Prerequisites

• npm or yarn
• Xverse wallet

Installation

1. Clone the repository:

git clone https://github.com/inscrib3/example.git
cd example

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Project Structure

example/
├── src/ # Source code
│ ├── app.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── style.css # Global styles
├── public/ # Static assets
├── index.html # HTML template
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite configuration

Features

Wallet Connection

The example uses the useSdk hook from @inscrib3/react to connect to Bitcoin wallet:

constsdk=useSdk();// Connect wallet<buttononClick={()=>sdk.wallet.connect()}>{sdk.wallet.recipientAddress ? sdk.wallet.recipientAddress : 'Connect Wallet'}</button>

Creating Drops

The application provides a form to create new Ordinals drops:

// Form inputs for drop details<inputtype="text"placeholder="Name"onChange={(e)=>{setTempDrop({ ...tempDrop,name: e.target.value});}}/>// ... other inputs// Create drop<buttononClick={async()=>{if(!tempDrop||!tempDrop.name||!tempDrop.symbol||!tempDrop.description||!files||!tempDrop.price)return;setCreateRes(awaitsdk.drops.create(tempDrop.name,tempDrop.symbol,tempDrop.description,files,tempDrop.price));}}>Submit</button>

Listing Drops

Fetch and display all drops owned by the connected user:

<buttononClick={async()=>{setAllRes(awaitsdk.drops.all());}}>Get All</button>// Display drops{allRes&&allRes.map((drop)=>(<divkey={drop.id}><h3>{drop.name}</h3><p>{drop.description}</p>{/* ... */}</div>))}

Viewing Drop Details

Fetch and display details for a specific drop:

<inputtype="text"placeholder="Drop ID"onChange={(e)=>{setTempDrop({ ...tempDrop,id: e.target.value});}}/><buttononClick={async()=>{if(!tempDrop||!tempDrop.id)return;setReadRes(awaitsdk.drops.read(tempDrop.id));}}>GetDrop</button>

Minting from Drops

The application demonstrates how to mint from a drop:

<buttononClick={async()=>{if(!tempDrop||!tempDrop.id)return;setMintRes(awaitsdk.drops.mint(tempDrop.id));}}>Mint</button>

Managing Uploads

The example shows how to upload files to a drop and manage them:

// Upload files<buttononClick={async()=>{if(!tempDrop||!tempDrop.id||!files)return;setUpdateUploadsRes(awaitsdk.drops.uploads.update(tempDrop.id,files));}}>Upload</button>// List uploads<buttononClick={async()=>{if(!tempDrop||!tempDrop.id)return;setAllUploadsRes(awaitsdk.drops.uploads.all(tempDrop.id));}}>GetAllUploads</button>// Remove uploads<buttononClick={async()=>{if(!tempDrop||!tempDrop.id||!tempDrop.files)return;setRemoveUploadsRes(awaitsdk.drops.uploads.remove(tempDrop.id,tempDrop.files));}}>Remove</button>

Building for Production

To build the application for production:

npm run build

The built files will be in the dist directory.

Preview Production Build

To preview the production build:

npm run preview

License

MIT