feat(share credits): add revoke form, bump sdk to alpha

ardriveapp · Nov 7, 2024 · 637fd69 · 637fd69
1 parent 98899fd
commit 637fd69
Show file tree

Hide file tree

Showing 3 changed files with 392 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "turbo-app",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "ArDrive Turbo App",
   "homepage": "./",
@@ -19,7 +19,7 @@
     "test": "echo \"TODO: add tests\" && exit 0"
   },
   "dependencies": {
-    "@ardrive/turbo-sdk": "1.19.0",
+    "@ardrive/turbo-sdk": "1.20.2-alpha.1",
     "@solana/web3.js": "^1.95.3",
     "ethers": "^6.13.3",
     "react": "^18.2.0",

diff --git a/src/pages/ShareCreditPage.tsx b/src/pages/ShareCreditPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { ErrMsgCallbackAsProps } from "../types";
-import { ardriveAppUrl, wincPerCredit } from "../constants";
+import { wincPerCredit } from "../constants";
 import { Page } from "./Page";
 import {
   TurboAuthenticatedClient,
@@ -35,7 +35,7 @@ function ShareCreditsForm({ errorCallback }: ErrMsgCallbackAsProps) {
   >(undefined);
 
   useEffect(() => {
-    if (!turbo) {
+    if (!turbo || sending) {
       return;
     }
 
@@ -51,7 +51,7 @@ function ShareCreditsForm({ errorCallback }: ErrMsgCallbackAsProps) {
         );
         // throw err;
       });
-  }, [turbo, errorCallback]);
+  }, [turbo, errorCallback, sending]);
 
   const handleShareSubmit = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -89,21 +89,17 @@ function ShareCreditsForm({ errorCallback }: ErrMsgCallbackAsProps) {
   console.log("balanceResponse.winc", balanceResponse?.winc);
   return (
     <>
-      <h1>
-        Share credits from your Turbo compatible wallet to a Turbo compatible
-        native wallet address
-      </h1>
-      <p>
-        If you do not have a wallet, you can create one in{" "}
-        {/* TODO: Create wallet from turbo sdk/app */}
-        <a href={ardriveAppUrl}>ArDrive App</a>.
-      </p>
+      <h1>Turbo Credit Sharing</h1>
 
       <TurboWalletConnector setTurbo={setTurbo} />
 
       <form className="form">
         {/* TODO: Inputs for manifest options, concurrent uploads, etc. */}
-
+        <p>
+          Share credits from your Turbo wallet to a Turbo compatible native
+          wallet address
+        </p>
+        <br />
         <div className="form-section">
           <label className="form-label">Amount of Credits</label>
           <input
@@ -141,6 +137,16 @@ function ShareCreditsForm({ errorCallback }: ErrMsgCallbackAsProps) {
       </form>
 
       <Balance balanceResponse={balanceResponse} />
+      {turbo &&
+        balanceResponse !== undefined &&
+        balanceResponse.givenApprovals.length > 0 && (
+          <RevokeForm
+            turbo={turbo}
+            errorCallback={errorCallback}
+            sending={sending}
+            setSending={setSending}
+          />
+        )}
     </>
   );
 }
@@ -168,6 +174,7 @@ function Balance({ balanceResponse }: BalanceProps) {
 
   return (
     <div className="form-section">
+      <h2>Current Turbo Balance</h2>
       <label className="form-label">
         Upload and Sharing spend power in credits: {spendPower}
       </label>
@@ -234,6 +241,77 @@ function Balance({ balanceResponse }: BalanceProps) {
   );
 }
 
+interface RevokeFormProps extends ErrMsgCallbackAsProps {
+  turbo: TurboAuthenticatedClient;
+  sending: boolean;
+  setSending: (sending: boolean) => void;
+}
+function RevokeForm({
+  turbo,
+  errorCallback,
+  sending,
+  setSending,
+}: RevokeFormProps) {
+  const [revokedAddress, setRevokedAddress] = useState<string>("");
+
+  const canSubmitRevoke = !!turbo && !!revokedAddress && !sending;
+
+  const handleRevokeSubmit = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.preventDefault();
+
+    if (!canSubmitRevoke) {
+      return;
+    }
+
+    setSending(true);
+    turbo
+      .revokeCredits({ revokedAddress })
+      .catch((err: unknown) => {
+        console.error("err", err);
+        errorCallback(
+          `Error revoking credits: ${err instanceof Error ? err.message : err}`,
+        );
+        // throw err;
+      })
+      .then((res: unknown) => {
+        console.log("res", res);
+        setSending(false);
+
+        alert("Great revoke!!\n" + JSON.stringify(res));
+      });
+  };
+
+  return (
+    <>
+      <h1>Revoke credits from a Turbo compatible wallet address</h1>
+      <form className="form">
+        <div className="form-section">
+          <label className="form-label">Revoked Address</label>
+          <input
+            type="text"
+            className="form-input"
+            placeholder="Enter the native wallet address to revoke credits from"
+            onChange={(e) => setRevokedAddress(e.target.value)}
+          ></input>
+        </div>
+
+        {sending && <p>Now revoking credits...</p>}
+
+        <button
+          type="submit"
+          className="proceed-button"
+          onClick={(e) => handleRevokeSubmit(e)}
+          disabled={!canSubmitRevoke}
+        >
+          Revoke Credits
+        </button>
+      </form>
+    </>
+  );
+}
+
 export const ShareCreditsPage = () => (
   <Page page={(e) => <ShareCreditsForm errorCallback={e} />} />
 );