NFT Colorgram

Required keys.

Add these in your Lovable project under Settings → Secrets before pasting the prompt below.

Paste into a fresh Lovable project. Make sure all five secrets above are set first. read the build strategy →

Build "NFT Colorgram" in ONE Lovable message. Single-page demo.

CONCEPT
Create NFTs representing exclusive color-themed artworks with immutable provenance.
Discipline: Visual Art (chromatic art NFTs).
Onchain primitive: NFT provenance mint. Why this primitive: ERC-721 mint links color-centric art stored on IPFS with verified creator proof.

5-CREDIT BUDGET (HARD LIMIT):
- ONE single-page app. No router, no Lovable Cloud, no database, no auth flows beyond Privy drop-in.
- ONE Solidity contract, <=80 lines, deployed to BSC Testnet, verified on BscScan.
- Privy is the auth + embedded-wallet layer (Google login, wallet auto-provisioned).
- Gas is USER-PAID. There is NO sponsorship on BSC Testnet in this template — the user needs a small tBNB balance from the faucet. Surface a "Get tBNB" faucet link in the UI.
- Pinata/IPFS only if the idea genuinely needs to store a file or metadata.
- At most ONE AI call per user action (use Lovable AI Gateway with LOVABLE_API_KEY if AI is part of the idea).
- Skip tests, skip CI, skip docs pages. Ship the demo, nothing else.

STACK
- React + Vite single page (the index route).
- SSR-safe Privy mount is mandatory. Never import @privy-io/react-auth at
  module scope of a route file — it crashes SSR. Use
  lazy(() => import('./privy-client-entry')) inside <ClientOnly> + <Suspense>,
  and put <PrivyProvider> only inside privy-client-entry.tsx.
- PrivyProvider config uses viem's `bscTestnet` chain (chainId 97):
    import { bscTestnet } from 'viem/chains';
    <PrivyProvider appId={import.meta.env.VITE_PRIVY_APP_ID}
      config={{ loginMethods:['google','email'],
                embeddedWallets:{ ethereum:{ createOnLogin:'users-without-wallets' } },
                defaultChain: bscTestnet,
                supportedChains: [bscTestnet],
                appearance:{ theme:'dark' } }}>
- Read the embedded wallet from useWallets, not user.wallet:
    const embedded = wallets.find(w => w.walletClientType === 'privy');
- Every send goes through Privy `useSendTransaction` with `chainId: 97` and
  `address` (NO `sponsor` — BSC Testnet is user-paid in this template):
    await sendTransaction(
      { to, data, chainId: 97 },
      { address: embedded.address }
    );
- Do NOT pass uiOptions:{ showWalletUIs:false } — it aborts with
  "signal is aborted without reason". The approval sheet is expected on
  the embedded-EOA path; the user pays a tiny tBNB fee.
- Do NOT add ZeroDev / SmartWalletsProvider / a paymaster URL. This
  template is intentionally user-paid on BSC Testnet.
- USER FUNDING: the embedded wallet needs a small tBNB balance. Show a
  "Get tBNB" link next to the connect button pointing at
  https://www.bnbchain.org/en/testnet-faucet. Catch "insufficient funds"
  errors and re-surface the faucet link inline.
- src/lib/pinata.ts uploads via `fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', { method:'POST', headers:{ Authorization: `Bearer ${import.meta.env.VITE_PINATA_JWT}` }, body: fd })`.
- Hardhat in /contracts (kept outside the Vite bundle). Install
  `@nomicfoundation/hardhat-toolbox` AND `@nomicfoundation/hardhat-verify@latest`
  (>=3.x — older versions still hit Etherscan v1 and fail with
  "You are using a deprecated V1 endpoint, switch to Etherscan API V2").
- hardhat.config.cjs uses the Etherscan v2 single-key shape with a
  customChains entry pointing v2 at BscScan (chainid=97):
    require("@nomicfoundation/hardhat-toolbox");
    require("@nomicfoundation/hardhat-verify");
    module.exports = {
      solidity: { version: "0.8.24", settings: { optimizer: { enabled: true, runs: 200 } } },
      networks: { bscTestnet: {
        url: process.env.BSC_TESTNET_RPC_URL || "https://data-seed-prebsc-1-s1.bnbchain.org:8545",
        accounts: [process.env.METAMASK_PRIVATE_KEY.startsWith("0x")
          ? process.env.METAMASK_PRIVATE_KEY : "0x" + process.env.METAMASK_PRIVATE_KEY],
        chainId: 97,
      } },
      etherscan: {
        apiKey: process.env.BSCSCAN_API_KEY,
        customChains: [{
          network: "bscTestnet",
          chainId: 97,
          urls: {
            apiURL: "https://api.etherscan.io/v2/api?chainid=97",
            browserURL: "https://testnet.bscscan.com",
          },
        }],
      },
      sourcify: { enabled: false },
    };
- Deploy: `npx hardhat run scripts/deploy.cjs --network bscTestnet`.
- Verify: `npx hardhat verify --network bscTestnet <address>` — verified source
  appears at `https://testnet.bscscan.com/address/<address>#code`.
- Frontend reads: create a viem public client on bscTestnet using the same RPC —
  `createPublicClient({ chain: bscTestnet, transport: http(import.meta.env.VITE_BSC_TESTNET_RPC_URL) })`.
  Cap `getLogs` ranges to `fromBlock = head - 9000n`; the public RPC rate-limits wider windows.
- Write the deployed address to `src/data/contract.json` so the UI links to
  `https://testnet.bscscan.com/address/<address>`.

CONTRACT (contracts/NFTColorgram.sol):
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
/// @title NFTColorgram
/// @notice BEP-721 provenance for: Create NFTs representing exclusive color-themed artworks with immutable provenance.
/// @notice Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14
contract NFTColorgram is ERC721 {
    uint256 public nextId;
    mapping(uint256 => string) public cidOf;
    constructor() ERC721("NFTColorgram", "NFTCOL") {}
    /// @notice Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14
    function mint(string calldata cid) external returns (uint256 id) {
        id = ++nextId; cidOf[id] = cid; _safeMint(msg.sender, id);
    }
    function tokenURI(uint256 id) public view override returns (string memory) {
        return string(abi.encodePacked("ipfs://", cidOf[id]));
    }
}
```

USER FLOW
1. Land on page -> 'Sign in with Google' (Privy) -> embedded wallet auto-provisioned on BSC Testnet.
2. Prompt user to fund with tBNB (faucet link) if balance is zero.
3. After the user creates a chromatic art NFTs artefact, pin the file to IPFS via Pinata, then call `mint(cid)` on the deployed BSC Testnet contract through Privy's `useSendTransaction` (user-paid gas). Show tokenId, IPFS preview (`https://gateway.pinata.cloud/ipfs/<cid>`), and BscScan mint-tx link.
4. Footer renders: "Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14"

REQUIRED SECRETS (Lovable -> Project Settings -> Secrets):
- METAMASK_PRIVATE_KEY   BSC Testnet deployer key. Fund it with tBNB: https://www.bnbchain.org/en/testnet-faucet
- BSC_TESTNET_RPC_URL    BSC Testnet HTTPS RPC. Public: https://data-seed-prebsc-1-s1.bnbchain.org:8545 (rate-limited).
                          Also expose as VITE_BSC_TESTNET_RPC_URL for the frontend viem client.
- BSCSCAN_API_KEY        For `npx hardhat verify` via Etherscan v2 (chainid=97). Get: https://etherscan.io/myapikey
- PRIVY_APP_ID           Google/email sign-in + embedded wallet. Docs: https://docs.privy.io/llms-full.txt
                          Also expose as VITE_PRIVY_APP_ID for the client.
- PINATA_JWT             IPFS uploads (only if the app pins media). Docs: https://docs.pinata.cloud/llms-full.txt
                          Also expose as VITE_PINATA_JWT for the client.

CREDIT (must appear in UI footer AND as NatSpec on every deployed contract):
Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14

Market sizing.

Indicative figures for hackathon pitches — refine with your own research before raising.