feat: script to upload file to web3 storage and derive storage params

packages/nextjs/.env.example

@@ -11,3 +11,5 @@
 # More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
 NEXT_PUBLIC_ALCHEMY_API_KEY=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+LIGHTHOUSE_API_KEY=
+WEB3_STORAGE_API_TOKEN=

packages/nextjs/.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+uploads

packages/nextjs/app/page.tsx

@@ -18,29 +18,31 @@ const Home: NextPage = () => {
             <span className="block text-2xl mb-2">Welcome to</span>
             <span className="block text-4xl font-bold">FIL-Frame</span>
           </h1>
-          <div>
-            <UploadForm />
-          </div>
-          <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
-            <p className="my-2 font-medium">Connected Address:</p>
-            <Address address={connectedAddress} />
-          </div>
           <p className="text-center text-lg">
-            Get started by editing{" "}
+            Convert your file to a CAR file using the below component, which is connected to <Link href="https://docs.filecoin.io/smart-contracts/developing-contracts/client-contract-tutorial#preparing-a-file-for-storage" className="link">Data Depot</Link>.
+          </p>
+          <p className="text-center text-lg">
+            Once you have a CAR file, you can create a storage deal after deploying the deal client via. <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">yarn deploy</code>
+          </p>
+          <p className="text-center text-lg">
+            Edit the landing page of your application by editing{" "}
             <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
               packages/nextjs/app/page.tsx
             </code>
           </p>
           <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
+            Edit your smart contract in{" "}
             <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
               packages/hardhat/contracts
             </code>
           </p>
+          <div>
+            <UploadForm />
+          </div>
+          <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
+            <p className="my-2 font-medium">Connected Address:</p>
+            <Address address={connectedAddress} />
+          </div>
         </div>
 
         <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">

packages/nextjs/package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "serve": "next start",
     "lint": "next lint",
-    "format": "prettier --write . '!(node_modules|.next|contracts)/**/*'",
+    "script": "ts-node -O '{\"module\":\"commonjs\"}' scripts/index.js",
     "check-types": "tsc --noEmit --incremental",
     "vercel": "vercel",
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
@@ -23,6 +23,7 @@
     "blo": "^1.0.1",
     "burner-connector": "^0.0.8",
     "daisyui": "4.12.10",
+    "ipfs-car": "^1.2.0",
     "next": "^14.2.11",
     "next-nprogress-bar": "^2.3.13",
     "next-themes": "^0.3.0",
@@ -35,6 +36,7 @@
     "usehooks-ts": "^2.13.0",
     "viem": "2.21.7",
     "wagmi": "2.12.11",
+    "web3.storage": "^4.5.5",
     "zustand": "^4.1.2"
   },
   "devDependencies": {

packages/nextjs/scripts/prepFileForStorageDeal.js

@@ -0,0 +1,38 @@
+import { packToFs } from "ipfs-car/pack/fs";
+import { Web3Storage, getFilesFromPath } from "web3.storage";
+
+const FILE_PATH = "./path/to/your/file.txt";
+const API_TOKEN = process.env.WEB3_STORAGE_API_TOKEN;
+
+async function prepFileForStorageDeal() {
+  try {
+    // Step 1: Generate the .car file
+    const carFilePath = "./file.car";
+    await packToFs({
+      input: FILE_PATH,
+      output: carFilePath,
+    });
+
+    console.log(`.car file created at ${carFilePath}`);
+
+    // Step 2: Upload to IPFS using Web3.Storage
+    const storage = new Web3Storage({ token: API_TOKEN });
+    const files = await getFilesFromPath(carFilePath);
+    const cid = await storage.put(files);
+
+    console.log("Upload complete");
+    console.log("CID:", cid);
+    console.log("IPFS Gateway URL:", `https://w3s.link/ipfs/${cid}`);
+
+    return {
+      cid,
+      carFilePath,
+      ipfsUrl: `https://w3s.link/ipfs/${cid}`,
+    };
+  } catch (error) {
+    console.error("Error uploading to IPFS:", error);
+  }
+}
+
+// Execute the upload function
+prepFileForStorageDeal();