feat(upload folder): init wip upload mvp for testing PE-4643

package.json

@@ -19,7 +19,7 @@
     "test": "echo \"TODO: add tests\" && exit 0"
   },
   "dependencies": {
-    "@ardrive/turbo-sdk": "latest",
+    "@ardrive/turbo-sdk": "link:../ardrive-turbo-sdk",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1"

src/Router.tsx

@@ -3,6 +3,7 @@ import { GiftPage } from "./pages/GiftPage";
 import { RedeemPage } from "./pages/RedeemPage";
 import { FiatTopUpPage } from "./pages/FiatTopUpPage";
 import { CryptoTopUpPage } from "./pages/CryptoTopUpPage";
+import { UploadPage } from "./pages/UploadPage";
 
 export function Router() {
   return (
@@ -13,6 +14,7 @@ export function Router() {
         <Route path="/top-up" element={<FiatTopUpPage />} />
         <Route path="/top-up/fiat" element={<FiatTopUpPage />} />
         <Route path="/top-up/crypto" element={<CryptoTopUpPage />} />
+        <Route path="/upload" element={<UploadPage />} />
 
         <Route
           path="/"

src/hooks/useCreditsForFiat.ts

@@ -1,4 +1,4 @@
-import { TurboFactory, USD } from "@ardrive/turbo-sdk";
+import { TurboFactory, USD } from "@ardrive/turbo-sdk/web";
 import { useState, useRef, useEffect } from "react";
 import { turboConfig, wincPerCredit } from "../constants";
 

src/hooks/useWincForOneGiB.ts

@@ -1,4 +1,4 @@
-import { TurboFactory } from "@ardrive/turbo-sdk";
+import { TurboFactory } from "@ardrive/turbo-sdk/web";
 import { useState, useEffect } from "react";
 import { turboConfig } from "../constants";
 

src/pages/CryptoTopUpPage.tsx

@@ -13,7 +13,7 @@ import {
   TurboFactory,
   ARToTokenAmount,
   ArconnectSigner,
-} from "@ardrive/turbo-sdk";
+} from "@ardrive/turbo-sdk/web";
 import { getArconnect } from "../utils/arconnect";
 import { NewToArDriveInfo } from "../components/NewToArDriveInfo";
 import { useWincForOneGiB } from "../hooks/useWincForOneGiB";

src/pages/FiatTopUpPage.tsx

@@ -9,7 +9,7 @@ import {
 } from "../constants";
 import { Page } from "./Page";
 import { useLocation } from "react-router-dom";
-import { TurboFactory, USD } from "@ardrive/turbo-sdk";
+import { TurboFactory, USD } from "@ardrive/turbo-sdk/web";
 import { NewToArDriveInfo } from "../components/NewToArDriveInfo";
 import { getArconnect } from "../utils/arconnect";
 import { useCreditsForFiat } from "../hooks/useCreditsForFiat";

src/pages/UploadPage.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from "react";
+import { ErrMsgCallbackAsProps } from "../types";
+import { ardriveAppUrl, turboConfig } from "../constants";
+import { Page } from "./Page";
+import {
+  TurboAuthenticatedClient,
+  TurboFactory,
+  ArconnectSigner,
+} from "@ardrive/turbo-sdk/web";
+import { getArconnect } from "../utils/arconnect";
+import { NewToArDriveInfo } from "../components/NewToArDriveInfo";
+
+function UploadForm({ errorCallback }: ErrMsgCallbackAsProps) {
+  const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);
+
+  const [turbo, setTurbo] = useState<undefined | TurboAuthenticatedClient>(
+    undefined,
+  );
+  const [sending, setSending] = useState<boolean>(false);
+
+  useEffect(() => {
+    getArconnect().then(async () => {
+      const arconnect_signer = new ArconnectSigner(window.arweaveWallet);
+
+      const turbo = TurboFactory.authenticated({
+        signer: arconnect_signer,
+        ...turboConfig,
+      });
+      setTurbo(turbo);
+    });
+  }, []);
+
+  // TODO: Query params if needed
+  // const location = useLocation();
+  // useEffect(() => {
+
+  // }, [location.search]);
+
+  const canSubmitForm = !!turbo && !!selectedFiles && !sending;
+
+  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+
+    if (!canSubmitForm) {
+      return;
+    }
+
+    setSending(true);
+    turbo
+      .uploadFolder({
+        files: Array.from(selectedFiles),
+        maxConcurrentUploads: 1,
+      })
+      .catch((err: unknown) => {
+        console.log("err", err);
+        errorCallback(
+          `Error uploading: ${err instanceof Error ? err.message : err}`,
+        );
+      })
+      .then((res: unknown) => {
+        console.log("res", res);
+        setSending(false);
+
+        // TODO: Success Modal or Page
+        alert("Great Upload!!\n" + JSON.stringify(res));
+      });
+  };
+
+  return (
+    <>
+      <h1>Upload a folder or file with your wallet</h1>
+      <p>
+        If you do not have an Arweave wallet, you can create one in{" "}
+        {/* TODO: Create wallet from turbo sdk/app */}
+        <a href={ardriveAppUrl}>ArDrive App</a>.
+      </p>
+      <form className="form">
+        <div className="form-section">
+          {/* TODO: Current balance of wallet in AR and Turbo Credits */}
+
+          <label className="form-label">Upload</label>
+          <input
+            type="file"
+            multiple
+            onChange={(e) => setSelectedFiles(e.target.files)}
+          />
+          {/* <input
+            // webkitdirectory
+            type="file"
+            multiple
+            onChange={(e) => setSelectedFiles(e.target.files)}
+          /> */}
+        </div>
+
+        {sending && <p>Now Sending Fund Transaction...</p>}
+
+        {/* TODO: Estimate price */}
+        <button
+          type="submit"
+          className="proceed-button"
+          onClick={(e) => handleSubmit(e)}
+          disabled={!canSubmitForm}
+        >
+          Send Upload
+        </button>
+      </form>
+
+      <NewToArDriveInfo />
+    </>
+  );
+}
+
+export const UploadPage = () => (
+  <Page page={(e) => <UploadForm errorCallback={e} />} />
+);