Web3 Avatar Forge

Create, customize, and mint your unique Web3 identity.

A developer-friendly playground for trait-based SVG avatars, AI-powered suggestions, and simulated NFT minting.

✨ Features

• 🎨 Avatar Builder UI: A clean, intuitive, and responsive interface for customizing avatars based on various traits.
• 🤖 AI-Powered Suggestions: Utilizes Genkit to connect to the Gemini API, providing creative avatar variations.
• 🔗 Web3 Integration: Seamless wallet connection using wagmi, supporting MetaMask and other wallets.
• 💾 Simulated Decentralized Storage: Includes a simulated flow to upload metadata to IPFS, preparing it for decentralized storage.
• 🖼️ Simulated NFT Minting: A complete, simulated end-to-end flow for minting the configured avatar as an ERC-721 NFT.
• 🚀 Developer Playground:
  • Copy JSON: Instantly copy the avatar's trait configuration as a JSON object.
  • Copy JSX: Copy a pre-formatted React <AvatarViewer /> component snippet to easily integrate the avatar.

🛠️ Tech Stack

🚀 Getting Started

This repository contains the developer playground for the Web3 Avatar Forge. The reusable components are published as an NPM package. For instructions on using the package, see the package README.

Prerequisites

• Node.js (v18 or later)
• npm or yarn
• A Web3 wallet (e.g., MetaMask) configured for the Sepolia testnet.

Installation & Setup

1. Clone the repository:

   git clone https://github.com/iamaanahmad/web3-avatar-forge.git
   cd web3-avatar-forge

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   The application will be available at http://localhost:9002.

4. Run the Genkit development server (in a separate terminal): This enables the AI suggestion functionality.

   npm run genkit:watch

🧩 How to Integrate the Avatar into Your dApp

One of the key features of this project is the ability to easily reuse the generated avatars.

Using the "Copy JSX" Feature

1. Customize your desired avatar in the Web3 Avatar Forge application.
2. Click the "Copy JSX" button.
3. This copies a React component snippet to your clipboard, which looks like this:

   <AvatarViewer traits={{
     "hair": "hair2",
     "eyes": "eyes3",
     "accessories": "acc1",
     "background": "bg4"
   }} />

4. Paste this code into your React application. You will also need to copy over the AvatarViewer component and its dependencies (/src/components/avatar-viewer.tsx, src/components/icons.tsx, /src/lib/constants.ts, and /src/lib/types.ts).

Example: Profile Card

Here's how you could use the copied JSX in a simple user profile card component:

// YourProfilePage.jsx
import { AvatarViewer } from './path/to/AvatarViewer';

const UserProfileCard = ({ userAddress, avatarTraits }) => {
  return (
    <div className="profile-card">
      <div className="avatar-container">
        {/* Paste the copied JSX here, using props */}
        <AvatarViewer traits={avatarTraits} />
      </div>
      <h3>{userAddress}</h3>
      {/* ...other profile info */}
    </div>
  );
};

export default UserProfileCard;

🤝 Contributing

This project is open-source and we welcome contributions! Whether you're a developer, designer, or just have ideas, feel free to get involved.

• Report Bugs: If you find a bug, please open an issue.
• Suggest Features: Have an idea for a new feature or improvement? Open an issue to start a discussion.
• Submit Pull Requests: We're happy to review and merge pull requests that improve the project.

❤️ Contributors

A huge thanks to all the people who have contributed to this project.