create-0g-app 1.0.0

package/templates/storage/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "my-0g-storage-app",
+  "version": "0.1.0",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "npm run dev --workspace=packages/web",
+    "build": "npm run build --workspace=packages/web",
+    "deploy": "npm run compile --workspace=packages/contracts && npm run deploy --workspace=packages/contracts",
+    "verify": "npm run verify --workspace=packages/contracts",
+    "test": "npm run test --workspace=packages/contracts"
+  }
+}

package/templates/storage/packages/contracts/contracts/FileRegistry.sol

@@ -0,0 +1,49 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.24;
+
+/// @title FileRegistry
+/// @notice Records on-chain provenance for files stored on 0G decentralized storage.
+///         The actual file bytes live off-chain; only the content ID (merkle root) is stored here.
+contract FileRegistry {
+    struct FileRecord {
+        string contentId; // 0G storage merkle root / content identifier
+        string filename;  // original filename for display purposes
+        uint256 timestamp;
+    }
+
+    // owner => list of file records
+    mapping(address => FileRecord[]) private _files;
+
+    event FileUploaded(
+        address indexed owner,
+        string contentId,
+        string filename,
+        uint256 timestamp
+    );
+
+    /// @notice Register a file that has been uploaded to 0G storage.
+    /// @param contentId The merkle root / content ID returned by the 0G storage SDK.
+    /// @param filename  The original filename (for display only).
+    function registerFile(string calldata contentId, string calldata filename) external {
+        require(bytes(contentId).length > 0, "FileRegistry: contentId required");
+        require(bytes(filename).length > 0, "FileRegistry: filename required");
+
+        _files[msg.sender].push(FileRecord({
+            contentId: contentId,
+            filename: filename,
+            timestamp: block.timestamp
+        }));
+
+        emit FileUploaded(msg.sender, contentId, filename, block.timestamp);
+    }
+
+    /// @notice Return all file records for a given owner.
+    function getFiles(address owner) external view returns (FileRecord[] memory) {
+        return _files[owner];
+    }
+
+    /// @notice Return the total number of files registered by an owner.
+    function getFileCount(address owner) external view returns (uint256) {
+        return _files[owner].length;
+    }
+}

package/templates/storage/packages/contracts/hardhat.config.ts

@@ -0,0 +1,40 @@
+import { HardhatUserConfig } from "hardhat/config";
+import "@nomicfoundation/hardhat-toolbox";
+import dotenv from "dotenv";
+import path from "path";
+
+// Load .env from the web package (single source of truth)
+dotenv.config({ path: path.resolve(__dirname, "../web/.env.local") });
+
+const config: HardhatUserConfig = {
+  solidity: {
+    version: "0.8.24",
+    settings: {
+      optimizer: { enabled: true, runs: 200 },
+    },
+  },
+  networks: {
+    "0g-galileo": {
+      url: process.env.NEXT_PUBLIC_RPC_URL ?? "https://evmrpc-test.0g.ai",
+      chainId: 16601,
+      accounts: process.env.PRIVATE_KEY ? [process.env.PRIVATE_KEY] : [],
+    },
+  },
+  etherscan: {
+    apiKey: {
+      "0g-galileo": "no-api-key-needed",
+    },
+    customChains: [
+      {
+        network: "0g-galileo",
+        chainId: 16601,
+        urls: {
+          apiURL: "https://chainscan-galileo.0g.ai/api",
+          browserURL: "https://chainscan-galileo.0g.ai",
+        },
+      },
+    ],
+  },
+};
+
+export default config;

package/templates/storage/packages/contracts/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "contracts",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "compile": "hardhat compile",
+    "deploy": "hardhat run scripts/deploy.ts --network 0g-galileo",
+    "verify": "hardhat verify --network 0g-galileo $(cat .deployed-address)",
+    "test": "hardhat test"
+  },
+  "devDependencies": {
+    "@nomicfoundation/hardhat-toolbox": "^5.0.0",
+    "hardhat": "^2.22.0"
+  }
+}

package/templates/storage/packages/contracts/scripts/deploy.ts

@@ -0,0 +1,43 @@
+import { ethers } from "hardhat";
+import fs from "fs";
+import path from "path";
+
+async function main() {
+  const [deployer] = await ethers.getSigners();
+  console.log("Deploying FileRegistry with account:", deployer.address);
+
+  const balance = await ethers.provider.getBalance(deployer.address);
+  console.log("Account balance:", ethers.formatEther(balance), "OG");
+
+  const FileRegistry = await ethers.getContractFactory("FileRegistry");
+  const registry = await FileRegistry.deploy();
+  await registry.waitForDeployment();
+
+  const address = await registry.getAddress();
+  console.log("FileRegistry deployed to:", address);
+
+  // Write the address to a file so `npm run verify` can pick it up
+  fs.writeFileSync(path.join(__dirname, "../.deployed-address"), address);
+
+  // Also update the web package's .env.local so the frontend picks it up immediately
+  const envPath = path.join(__dirname, "../../web/.env.local");
+  if (fs.existsSync(envPath)) {
+    let env = fs.readFileSync(envPath, "utf8");
+    if (env.includes("NEXT_PUBLIC_CONTRACT_ADDRESS=")) {
+      env = env.replace(/NEXT_PUBLIC_CONTRACT_ADDRESS=.*/, `NEXT_PUBLIC_CONTRACT_ADDRESS=${address}`);
+    } else {
+      env += `\nNEXT_PUBLIC_CONTRACT_ADDRESS=${address}`;
+    }
+    fs.writeFileSync(envPath, env);
+    console.log("Updated web/.env.local with contract address");
+  }
+
+  console.log("\nNext steps:");
+  console.log(`  npm run verify   — verify on 0G explorer`);
+  console.log(`  View on explorer: https://chainscan-galileo.0g.ai/address/${address}`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/templates/storage/packages/web/.env.example

@@ -0,0 +1,12 @@
+# 0G Galileo Testnet
+NEXT_PUBLIC_CHAIN_ID=16601
+NEXT_PUBLIC_RPC_URL=https://evmrpc-test.0g.ai
+NEXT_PUBLIC_STORAGE_INDEXER=https://indexer-storage-testnet-standard.0g.ai
+NEXT_PUBLIC_STORAGE_RPC=https://rpc-storage-testnet.0g.ai
+
+# Populated automatically after `npm run deploy` from the repo root
+NEXT_PUBLIC_CONTRACT_ADDRESS=
+
+# Your wallet private key — used only by Hardhat deploy scripts, never exposed to the browser
+# Get testnet OG tokens at https://faucet.0g.ai
+PRIVATE_KEY=

package/templates/storage/packages/web/app/globals.css

@@ -0,0 +1,23 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #0a0a0f;
+  --surface: #12121a;
+  --border: #2a2a3a;
+  --accent: #00d4ff;
+  --accent-dim: rgba(0, 212, 255, 0.12);
+  --text: #e8e8f0;
+  --muted: #6b6b80;
+  --error: #ff4444;
+  --success: #00c896;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-geist-sans), system-ui, sans-serif;
+  min-height: 100vh;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }

package/templates/storage/packages/web/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import { Providers } from "./providers";
+import { Navbar } from "@/components/Navbar";
+import "./globals.css";
+
+const geist = Geist({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "create-0g-app",
+  description: "Decentralized app powered by 0G",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={geist.className}>
+        <Providers>
+          <Navbar />
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/templates/storage/packages/web/app/page.module.css

@@ -0,0 +1,74 @@
+.main {
+  min-height: calc(100vh - 56px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  max-width: 480px;
+  width: 100%;
+}
+
+.title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.accent { color: var(--accent); }
+
+.subtitle {
+  color: var(--muted);
+  font-size: 0.95rem;
+  margin-top: -16px;
+}
+
+.steps {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.steps li {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 16px;
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+}
+
+.path {
+  font-family: monospace;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.links {
+  display: flex;
+  gap: 20px;
+}
+
+.links a {
+  font-size: 0.85rem;
+  color: var(--muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.links a:hover { color: var(--accent); }

package/templates/storage/packages/web/app/page.tsx

@@ -0,0 +1,29 @@
+import styles from "./page.module.css";
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <div className={styles.card}>
+        <h1 className={styles.title}>
+          <span className={styles.accent}>create</span>-0g-app
+        </h1>
+        <p className={styles.subtitle}>Your 0G app is ready. Start editing:</p>
+        <ul className={styles.steps}>
+          <li>
+            <span className={styles.label}>Frontend</span>
+            <code className={styles.path}>packages/web/app/page.tsx</code>
+          </li>
+          <li>
+            <span className={styles.label}>Contract</span>
+            <code className={styles.path}>packages/contracts/contracts/FileRegistry.sol</code>
+          </li>
+        </ul>
+        <div className={styles.links}>
+          <a href="https://docs.0g.ai" target="_blank" rel="noopener noreferrer">Docs ↗</a>
+          <a href="https://faucet.0g.ai" target="_blank" rel="noopener noreferrer">Faucet ↗</a>
+          <a href="https://chainscan-galileo.0g.ai" target="_blank" rel="noopener noreferrer">Explorer ↗</a>
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/storage/packages/web/app/providers.tsx

@@ -0,0 +1,14 @@
+"use client";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { wagmiConfig } from "@/lib/wagmi";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}

package/templates/storage/packages/web/app/storage/page.module.css

@@ -0,0 +1,110 @@
+.main {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 32px 20px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.connectPrompt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 56px);
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.warning {
+  background: rgba(255, 200, 0, 0.08);
+  border: 1px solid rgba(255, 200, 0, 0.3);
+  color: #ffc800;
+  padding: 12px 16px;
+  border-radius: 10px;
+  font-size: 0.85rem;
+}
+.warning code {
+  font-family: monospace;
+  background: rgba(0,0,0,0.3);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.dropzone {
+  border: 2px dashed var(--border);
+  border-radius: 16px;
+  padding: 48px 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.dropzone:hover, .dropzoneOver {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+.dropzoneIcon { font-size: 2rem; color: var(--accent); }
+.dropzoneHint { font-size: 0.8rem; color: var(--muted); }
+.link { color: var(--accent); }
+
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+.uploading-storage, .registering { border-color: var(--accent); color: var(--accent); }
+.done { border-color: var(--success); color: var(--success); }
+.error { border-color: var(--error); color: var(--error); }
+.explorerLink { margin-left: auto; font-size: 0.8rem; color: var(--accent); }
+
+.spinner {
+  width: 14px; height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.gallery { display: flex; flex-direction: column; gap: 16px; }
+.gallery h2 { font-size: 1.1rem; font-weight: 600; }
+.empty { color: var(--muted); font-size: 0.9rem; }
+
+.fileList { list-style: none; display: flex; flex-direction: column; gap: 10px; }
+.fileItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 16px;
+  transition: border-color 0.15s;
+}
+.fileItem:hover { border-color: var(--accent); }
+.fileInfo { display: flex; flex-direction: column; gap: 4px; }
+.fileName { font-weight: 500; font-size: 0.95rem; }
+.fileContentId { font-family: monospace; font-size: 0.78rem; color: var(--muted); }
+.fileDate { font-size: 0.78rem; color: var(--muted); }
+
+.btnSecondary {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 6px 14px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.btnSecondary:hover { border-color: var(--accent); color: var(--accent); }

package/templates/storage/packages/web/app/storage/page.tsx

@@ -0,0 +1,167 @@
+"use client";
+import { useAccount, useReadContract, useWriteContract } from "wagmi";
+import { useState, useCallback, useRef } from "react";
+import { BrowserProvider } from "ethers";
+import { uploadFile, downloadFile } from "@/lib/0g-storage";
+import { FILE_REGISTRY_ABI } from "@/lib/abi";
+import styles from "./page.module.css";
+
+const CONTRACT = (process.env.NEXT_PUBLIC_CONTRACT_ADDRESS ?? "") as `0x${string}`;
+
+type FileRecord = { contentId: string; filename: string; timestamp: bigint };
+type UploadStatus = "idle" | "uploading-storage" | "registering" | "done" | "error";
+
+export default function StoragePage() {
+  const { address, isConnected } = useAccount();
+
+  const [dragOver, setDragOver] = useState(false);
+  const [status, setStatus] = useState<UploadStatus>("idle");
+  const [statusMsg, setStatusMsg] = useState("");
+  const [lastContentId, setLastContentId] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { data: files, refetch } = useReadContract({
+    address: CONTRACT,
+    abi: FILE_REGISTRY_ABI,
+    functionName: "getFiles",
+    args: address ? [address] : undefined,
+    query: { enabled: !!address && !!CONTRACT },
+  });
+
+  const { writeContractAsync } = useWriteContract();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!isConnected || !address) return;
+      try {
+        setStatus("uploading-storage");
+        setStatusMsg(`Uploading "${file.name}" to 0G storage…`);
+
+        const provider = new BrowserProvider(window.ethereum as Parameters<typeof BrowserProvider>[0]);
+        const signer = await provider.getSigner();
+
+        const { contentId } = await uploadFile(file, signer);
+        setLastContentId(contentId);
+
+        setStatus("registering");
+        setStatusMsg("Registering on-chain…");
+
+        await writeContractAsync({
+          address: CONTRACT,
+          abi: FILE_REGISTRY_ABI,
+          functionName: "registerFile",
+          args: [contentId, file.name],
+        });
+
+        setStatus("done");
+        setStatusMsg(`Done! Content ID: ${contentId.slice(0, 18)}…`);
+        refetch();
+      } catch (e) {
+        setStatus("error");
+        setStatusMsg(e instanceof Error ? e.message : "Unknown error");
+      }
+    },
+    [isConnected, address, writeContractAsync, refetch]
+  );
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragOver(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+
+  const handleDownload = async (record: FileRecord) => {
+    const blob = await downloadFile(record.contentId);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = record.filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (!isConnected) {
+    return (
+      <div className={styles.connectPrompt}>
+        Connect your wallet to upload and view files.
+      </div>
+    );
+  }
+
+  return (
+    <main className={styles.main}>
+      {!CONTRACT && (
+        <div className={styles.warning}>
+          ⚠ No contract deployed yet. Run <code>npm run deploy</code> from the repo root, then restart the dev server.
+        </div>
+      )}
+
+      <div
+        className={`${styles.dropzone} ${dragOver ? styles.dropzoneOver : ""}`}
+        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={onDrop}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          style={{ display: "none" }}
+          onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }}
+        />
+        <div className={styles.dropzoneIcon}>↑</div>
+        <p>Drop a file here or <span className={styles.link}>click to browse</span></p>
+        <p className={styles.dropzoneHint}>Any file type · Stored on 0G · Provenance on-chain</p>
+      </div>
+
+      {status !== "idle" && (
+        <div className={`${styles.statusBar} ${styles[status]}`}>
+          {(status === "uploading-storage" || status === "registering") && (
+            <span className={styles.spinner} />
+          )}
+          {statusMsg}
+          {status === "done" && lastContentId && (
+            <a
+              className={styles.explorerLink}
+              href="https://chainscan-galileo.0g.ai"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              View on explorer ↗
+            </a>
+          )}
+        </div>
+      )}
+
+      <section className={styles.gallery}>
+        <h2>Your Files</h2>
+        {!files || files.length === 0 ? (
+          <p className={styles.empty}>No files uploaded yet. Drop one above to get started.</p>
+        ) : (
+          <ul className={styles.fileList}>
+            {[...(files as FileRecord[])].reverse().map((f, i) => (
+              <li key={i} className={styles.fileItem}>
+                <div className={styles.fileInfo}>
+                  <span className={styles.fileName}>{f.filename}</span>
+                  <span className={styles.fileContentId} title={f.contentId}>
+                    {f.contentId.slice(0, 20)}…
+                  </span>
+                  <span className={styles.fileDate}>
+                    {new Date(Number(f.timestamp) * 1000).toLocaleString()}
+                  </span>
+                </div>
+                <button className={styles.btnSecondary} onClick={() => handleDownload(f)}>
+                  Download
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </main>
+  );
+}