Simple NFT Minting dApp using TypeScript and OnchainKit

This guide will help you set up a basic minting dApp using TypeScript and OnchainKit.

---

Project Setup

Accounts & Tooling

• Github: Ensure you have a GitHub account for version control and collaboration.

Wallet

• Coinbase Wallet: Use Coinbase Wallet for managing your assets and interacting with dApps.

Development Setup

IDE (Preferred: Visual Studio Code)

• Install Visual Studio Code.

Git

• Install Git for version control.

Node.js

• Install Node Version Manager (NVM) (for Windows | Mac/Linux) or Node.js for managing Node versions.

VS Code Extensions (Optional)

• Solidity: For Solidity language support in VS Code.
• Solidity Inspector: For code inspection and syntax highlighting.
• ESLint: For identifying and reporting on patterns found in JavaScript and TypeScript code.
• GitHub Copilot: AI-powered code completion tool.
• GitLens: For enhanced Git capabilities within VS Code.
• Path Intellisense: Auto-completion for file paths in VS Code.
• Prettier: For code formatting and styling.

Setting Up

1. Clone the repository:
   git clone <repository-url>

2. Install dependencies:
   npm install or yarn install

3. Start development server:
   npm start or yarn start

For additional setup instructions, please refer to the project's documentation.

---

🚀 Getting Started

1. Create a Project

npm create onchain@latest

Follow the prompts and enter your project name.

---

2. Coinbase Developer Platform Setup

Get your Client API Key from:
🔗 https://portal.cdp.coinbase.com/products/onchainkit

⚠️ Important: Do not use Coinbase Smart Wallet.

---

3. Open Your Project

cd yourprojectname
code .

---

4. Install Dependencies

npm install

---

5. Open the File

Navigate to app/page.tsx.

Follow this guide and complete steps 1 and 2 from the quickstart.

---

6. Modify NFTMintCard

Replace the contract address in <NFTMintCard> with your own contract address from your created NFT or use this contract address as a sample:

0xed2f34043387783b2727ff2799a46ce3ae1a34d2

---

7. Add "use client" to the Top of page.tsx

"use client";

---

8. Example page.tsx Code

"use client";

import { NFTMintCard } from "@coinbase/onchainkit/nft";
import { NFTMedia } from "@coinbase/onchainkit/nft/view";
import {
  NFTCreator,
  NFTCollectionTitle,
  NFTQuantitySelector,
  NFTAssetCost,
  NFTMintButton,
} from "@coinbase/onchainkit/nft/mint";

export default function Page() {
  return (
    <NFTMintCard
      contractAddress="0xed2f34043387783b2727ff2799a46ce3ae1a34d2"
      tokenId="2"
    >
      <NFTCreator />
      <NFTMedia />
      <NFTCollectionTitle />
      <NFTQuantitySelector />
      <NFTAssetCost />
      <NFTMintButton />
    </NFTMintCard>
  );
}

---

9. Run the Development Server

npm run dev

---

✅ You're all set!

Visit http://localhost:3000 to view your minting dApp in action.

If the NFT Minting Card is not showing properly:

Kindly double check your client API in your .env file

NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_HERE