npm install @ardrive/turbo-sdk

npm install --save-dev crypto-browserify stream-browserify process buffer

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack: (config, { isServer, webpack }) => {
    // Only configure polyfills for client-side bundles
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer"),
        process: require.resolve("process/browser"),
        fs: false,
        net: false,
        tls: false,
      };

      // Provide global process and Buffer
      config.plugins.push(
        new webpack.ProvidePlugin({
          process: "process/browser",
          Buffer: ["buffer", "Buffer"],
        })
      );

      // CRITICAL: Handle node: protocol imports (e.g., node:stream, node:crypto)
      // The Turbo SDK uses modern Node.js imports that webpack doesn't understand
      config.plugins.push(
        new webpack.NormalModuleReplacementPlugin(
          /^node:/,
          (resource: any) => {
            const module = resource.request.replace(/^node:/, "");
            const fallbackMap: Record<string, string> = {
              crypto: "crypto-browserify",
              stream: "stream-browserify",
              buffer: "buffer",
              process: "process/browser",
            };
            resource.request = fallbackMap[module] || module;
          }
        )
      );
    }

    return config;
  },
};

export default nextConfig;

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["es2017", "dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ... other options
  }
}

// types/wallet.d.ts
interface Window {
  ethereum?: {
    request: (args: { method: string; params?: any[] }) => Promise<any>;
    on?: (event: string, handler: (...args: any[]) => void) => void;
    removeListener?: (event: string, handler: (...args: any[]) => void) => void;
    isMetaMask?: boolean;
  };
  arweaveWallet?: {
    connect: (permissions: string[]) => Promise<void>;
    disconnect: () => Promise<void>;
    getActiveAddress: () => Promise<string>;
    getPermissions: () => Promise<string[]>;
    sign: (transaction: any) => Promise<any>;
    getPublicKey: () => Promise<string>;
  };
}

"use client";

import { TurboFactory } from "@ardrive/turbo-sdk/web";
import { InjectedEthereumSigner } from "@dha-team/arbundles";
import { useState, useCallback } from "react";

export default function MetaMaskUploader() {
  const [connected, setConnected] = useState(false);
  const [address, setAddress] = useState("");
  const [uploading, setUploading] = useState(false);
  const [uploadResult, setUploadResult] = useState(null);

  const connectMetaMask = useCallback(async () => {
    try {
      if (!window.ethereum) {
        alert("MetaMask is not installed!");
        return;
      }

      // Request account access
      await window.ethereum.request({
        method: "eth_requestAccounts",
      });

      // Get the current account
      const accounts = await window.ethereum.request({
        method: "eth_accounts",
      });

      if (accounts.length > 0) {
        setAddress(accounts[0]);
        setConnected(true);

        // Log current chain for debugging
        const chainId = await window.ethereum.request({
          method: "eth_chainId",
        });
        console.log("Connected to chain:", chainId);
      }
    } catch (error) {
      console.error("Failed to connect to MetaMask:", error);
    }
  }, []);

  const uploadWithMetaMask = async (event) => {
    const file = event.target.files?.[0];
    if (!file || !connected) return;

    setUploading(true);

    try {
      // Create a provider wrapper for InjectedEthereumSigner
      const providerWrapper = {
        getSigner: () => ({
          signMessage: async (message: string | Uint8Array) => {
            const accounts = await window.ethereum!.request({
              method: "eth_accounts",
            });
            if (accounts.length === 0) {
              throw new Error("No accounts available");
            }

            // Convert message to hex if it's Uint8Array
            const messageToSign =
              typeof message === "string"
                ? message
                : "0x" +
                  Array.from(message)
                    .map((b) => b.toString(16).padStart(2, "0"))
                    .join("");

            return await window.ethereum!.request({
              method: "personal_sign",
              params: [messageToSign, accounts[0]],
            });
          },
        }),
      };

      // Create the signer using InjectedEthereumSigner
      const signer = new InjectedEthereumSigner(providerWrapper);
      const turbo = TurboFactory.authenticated({
        signer,
        token: "ethereum", // Important: specify token type for Ethereum
      });

      // Upload file with progress tracking
      const result = await turbo.uploadFile({
        fileStreamFactory: () => file.stream(),
        fileSizeFactory: () => file.size,
        dataItemOpts: {
          tags: [
            { name: "Content-Type", value: file.type },
            { name: "App-Name", value: "My-Next-App" },
            { name: "Funded-By", value: "Ethereum" },
          ],
        },
        events: {
          onProgress: ({ totalBytes, processedBytes, step }) => {
            console.log(
              `${step}: ${Math.round((processedBytes / totalBytes) * 100)}%`
            );
          },
          onError: ({ error, step }) => {
            console.error(`Error during ${step}:`, error);
            console.error("Error details:", JSON.stringify(error, null, 2));
          },
        },
      });

      setUploadResult(result);
    } catch (error) {
      console.error("Upload failed:", error);
      console.error("Error details:", JSON.stringify(error, null, 2));
      alert(`Upload failed: ${error.message}`);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-4">MetaMask Upload</h2>

      {!connected ? (
        <button
          onClick={connectMetaMask}
          className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600"
        >
          Connect MetaMask
        </button>
      ) : (
        <div>
          <p className="mb-4 text-green-600">
            ✅ Connected: {address.slice(0, 6)}...{address.slice(-4)}
          </p>

          <div className="mb-4">
            <label
              htmlFor="metamask-file"
              className="block text-sm font-medium mb-2"
            >
              Select File to Upload:
            </label>
            <input
              type="file"
              id="metamask-file"
              onChange={uploadWithMetaMask}
              disabled={uploading}
              className="block w-full text-sm border rounded-lg p-2"
            />
          </div>

          {uploading && (
            <div className="mb-4 p-3 bg-yellow-100 rounded">
              🔄 Uploading... Please confirm transaction in MetaMask
            </div>
          )}

          {uploadResult && (
            <div className="mt-4 p-3 bg-green-100 rounded">
              <p>
                <strong>✅ Upload Successful!</strong>
              </p>
              <p>
                <strong>Transaction ID:</strong> {uploadResult.id}
              </p>
              <p>
                <strong>Data Size:</strong> {uploadResult.totalBytes} bytes
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

"use client";

import { TurboFactory, ArconnectSigner } from "@ardrive/turbo-sdk/web";
import { useState, useCallback } from "react";

export default function WanderWalletUploader() {
  const [connected, setConnected] = useState(false);
  const [address, setAddress] = useState("");
  const [uploading, setUploading] = useState(false);
  const [uploadResult, setUploadResult] = useState(null);

  const connectWanderWallet = useCallback(async () => {
    try {
      if (!window.arweaveWallet) {
        alert("Wander wallet is not installed!");
        return;
      }

      // Required permissions for Turbo SDK
      const permissions = [
        "ACCESS_ADDRESS",
        "ACCESS_PUBLIC_KEY",
        "SIGN_TRANSACTION",
        "SIGNATURE",
      ];

      // Connect to wallet
      await window.arweaveWallet.connect(permissions);

      // Get wallet address
      const walletAddress = await window.arweaveWallet.getActiveAddress();
      setAddress(walletAddress);
      setConnected(true);
    } catch (error) {
      console.error("Failed to connect to Wander wallet:", error);
    }
  }, []);

  const uploadWithWanderWallet = async (event) => {
    const file = event.target.files?.[0];
    if (!file || !connected) return;

    setUploading(true);

    try {
      // Create ArConnect signer using Wander wallet
      const signer = new ArconnectSigner(window.arweaveWallet);
      const turbo = TurboFactory.authenticated({ signer });
      // Note: No need to specify token for Arweave as it's the default

      // Upload file with progress tracking
      const result = await turbo.uploadFile({
        fileStreamFactory: () => file.stream(),
        fileSizeFactory: () => file.size,
        dataItemOpts: {
          tags: [
            { name: "Content-Type", value: file.type },
            { name: "App-Name", value: "My-Next-App" },
            { name: "Funded-By", value: "Arweave" },
          ],
        },
        events: {
          onProgress: ({ totalBytes, processedBytes, step }) => {
            console.log(
              `${step}: ${Math.round((processedBytes / totalBytes) * 100)}%`
            );
          },
          onError: ({ error, step }) => {
            console.error(`Error during ${step}:`, error);
          },
        },
      });

      setUploadResult(result);
    } catch (error) {
      console.error("Upload failed:", error);
      alert(`Upload failed: ${error.message}`);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-4">Wander Wallet Upload</h2>

      {!connected ? (
        <button
          onClick={connectWanderWallet}
          className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800"
        >
          Connect Wander Wallet
        </button>
      ) : (
        <div>
          <p className="mb-4 text-green-600">
            ✅ Connected: {address.slice(0, 6)}...{address.slice(-4)}
          </p>

          <div className="mb-4">
            <label
              htmlFor="wander-file"
              className="block text-sm font-medium mb-2"
            >
              Select File to Upload:
            </label>
            <input
              type="file"
              id="wander-file"
              onChange={uploadWithWanderWallet}
              disabled={uploading}
              className="block w-full text-sm border rounded-lg p-2"
            />
          </div>

          {uploading && (
            <div className="mb-4 p-3 bg-yellow-100 rounded">
              🔄 Uploading... Please confirm transaction in Wander wallet
            </div>
          )}

          {uploadResult && (
            <div className="mt-4 p-3 bg-green-100 rounded">
              <p>
                <strong>✅ Upload Successful!</strong>
              </p>
              <p>
                <strong>Transaction ID:</strong> {uploadResult.id}
              </p>
              <p>
                <strong>Data Size:</strong> {uploadResult.totalBytes} bytes
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

npm install ethers

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
# Add 0x prefix: 0x[generated_hex]

# .env.local (NEVER commit this file to git!)
ETHEREUM_PRIVATE_KEY=0xYourPrivateKeyHere

import { NextResponse } from "next/server";
import { Wallet } from "ethers";
import "server-only";

// Validate that private key exists in environment variables
if (!process.env.ETHEREUM_PRIVATE_KEY) {
  throw new Error(
    "ETHEREUM_PRIVATE_KEY is not set. Please add it to your .env.local file."
  );
}

const wallet = new Wallet(process.env.ETHEREUM_PRIVATE_KEY);

async function signData(data: string | Uint8Array): Promise<string> {
  // ethers.js handles both UTF-8 strings and binary data
  return await wallet.signMessage(data);
}

function getPublicKey(): string {
  // Return uncompressed public key (keep '04' prefix, remove only '0x')
  return wallet.signingKey.publicKey.slice(2);
}

export async function GET() {
  return NextResponse.json({ publicKey: getPublicKey() });
}

export async function POST(req: Request) {
  const body = await req.json() as {
    signatureData: string;
    isHex?: boolean;
  };

  if (!body?.signatureData) {
    return NextResponse.json(
      { error: "Missing signatureData" },
      { status: 400 }
    );
  }

  // Handle both string messages (UTF-8) and binary data (hex-encoded)
  const dataToSign = body.isHex
    ? Buffer.from(body.signatureData, "hex")
    : body.signatureData;

  const signature = await signData(dataToSign);
  return NextResponse.json({ signature });
}

"use client";

import { TurboFactory, type EthereumWalletSigner } from "@ardrive/turbo-sdk/web";
import { useMemo, useState } from "react";

// Buffer is available globally from webpack polyfills configured in next.config.ts
// No import needed - it's provided by the ProvidePlugin

// API endpoint for server-side signing (corresponds to app/api/sign/route.ts)
const signEndpoint = "/api/sign";

export function UploadComponent() {
  const [uploading, setUploading] = useState(false);

  // Create turbo instance with useMemo to avoid recreating on every render
  // This prevents SSR issues and unnecessary re-initialization
  const turbo = useMemo(() => {
    return TurboFactory.authenticated({
      token: "base-usdc", // Match the token type from your environment
      walletAdapter: {
        getSigner: () => {
          return {
            signMessage: async (_message: string | Uint8Array) => {
              // Determine if message is binary (Uint8Array) or string
              const isHex = typeof _message !== "string";
              const message = isHex
                ? Buffer.from(_message).toString("hex")
                : _message;

              const res = await fetch(signEndpoint, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ signatureData: message, isHex }),
              });

              if (!res.ok) {
                throw new Error(`Signing failed: ${res.statusText}`);
              }

              const { signature } = await res.json();
              return signature;
            },
            sendTransaction: async () => {
              throw new Error("Not implemented");
            },
            provider: {
              // Fetch public key from server
              getPublicKey: async () => {
                const res = await fetch(signEndpoint);
                const { publicKey } = await res.json();
                return publicKey;
              },
              getSigner: () => ({
                // Return address (same as public key for this implementation)
                getAddress: async () => {
                  const res = await fetch(signEndpoint);
                  const { publicKey } = await res.json();
                  return publicKey;
                },
                // Sign typed data (used for certain Turbo operations)
                _signTypedData: async (
                  _domain: never,
                  _types: never,
                  message: {
                    address: string;
                    "Transaction hash": Uint8Array;
                  }
                ) => {
                  const convertedMsg = Buffer.from(
                    message["Transaction hash"]
                  ).toString("hex");

                  const res = await fetch(signEndpoint, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                      signatureData: convertedMsg,
                      isHex: true
                    }),
                  });

                  if (!res.ok) {
                    throw new Error(`Signing failed: ${res.statusText}`);
                  }

                  const { signature } = await res.json();
                  return signature;
                },
              }),
              _ready: () => {},
            },
          } as unknown as EthereumWalletSigner;
        },
      },
    });
  }, []);

  // Upload string data
  const handleUploadText = async () => {
    setUploading(true);
    try {
      const result = await turbo.upload({
        data: "Hello, ArDrive Turbo!",
      });
      console.log("Upload successful! ID:", result.id);
      alert(`Upload successful! ID: ${result.id}`);
    } catch (error) {
      console.error("Upload failed:", error);
      alert(`Upload failed: ${(error as Error).message}`);
    } finally {
      setUploading(false);
    }
  };

  // Upload file
  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploading(true);
    try {
      const result = await turbo.uploadFile({
        fileStreamFactory: () => file.stream(),
        fileSizeFactory: () => file.size,
        dataItemOpts: {
          tags: [
            { name: "Content-Type", value: file.type },
            { name: "File-Name", value: file.name },
          ],
        },
      });
      console.log("File upload successful! ID:", result.id);
      alert(`File uploaded! ID: ${result.id}`);
    } catch (error) {
      console.error("Upload failed:", error);
      alert(`Upload failed: ${(error as Error).message}`);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div>
      <button onClick={handleUploadText} disabled={uploading}>
        {uploading ? "Uploading..." : "Upload Text"}
      </button>

      <label htmlFor="file-upload">
        <input
          id="file-upload"
          type="file"
          onChange={handleFileUpload}
          disabled={uploading}
        />
      </label>
    </div>
  );
}

// app/page.tsx
import { UploadComponent } from "./upload/component";

export default function Home() {
  return (
    <main>
      <h1>Upload to ArDrive Turbo</h1>
      <UploadComponent />
    </main>
  );
}