feat(share credits): init credit sharing UI MVP

src/Router.tsx

@@ -4,6 +4,7 @@ import { RedeemPage } from "./pages/RedeemPage";
 import { FiatTopUpPage } from "./pages/FiatTopUpPage";
 import { CryptoTopUpPage } from "./pages/CryptoTopUpPage";
 import { UploadPage } from "./pages/UploadPage";
+import { ShareCreditsPage } from "./pages/ShareCreditPage";
 
 export function Router() {
   return (
@@ -15,6 +16,7 @@ export function Router() {
         <Route path="/top-up/fiat" element={<FiatTopUpPage />} />
         <Route path="/top-up/crypto" element={<CryptoTopUpPage />} />
         <Route path="/upload" element={<UploadPage />} />
+        <Route path="/share-credits" element={<ShareCreditsPage />} />
 
         <Route
           path="/"

src/components/TurboWalletConnector.tsx

@@ -55,8 +55,10 @@ export default function TurboWalletConnector({
           TurboFactory.authenticated({
             token: "ethereum",
             walletAdapter: {
+              // @ts-expect-error ethers provider is not typed
               getSigner: () => signer,
             },
+            ...turboConfig,
           }),
         );
 
@@ -89,6 +91,7 @@ export default function TurboWalletConnector({
           TurboFactory.authenticated({
             token: "solana",
             walletAdapter: wallet,
+            ...turboConfig,
           }),
         );
         setCurrentToken("solana");

src/constants.ts

@@ -1,11 +1,17 @@
-export const paymentServiceUrl =
-  import.meta.env.PROD === true
-    ? "https://payment.ardrive.io"
-    : "http://localhost:3000";
+import { TurboUnauthenticatedConfiguration } from "@ardrive/turbo-sdk";
+
+const isProd = import.meta.env.PROD === true;
+export const paymentServiceUrl = isProd
+  ? "https://payment.ardrive.io"
+  : "https://payment.ardrive.dev";
+export const uploadServiceUrl = isProd
+  ? "https://upload.ardrive.io"
+  : "https://upload.ardrive.dev";
 export const termsOfServiceUrl = "https://ardrive.io/tos-and-privacy/";
 export const defaultUSDAmount = 10.0;
-export const turboConfig = {
+export const turboConfig: TurboUnauthenticatedConfiguration = {
   paymentServiceConfig: { url: paymentServiceUrl },
+  uploadServiceConfig: { url: uploadServiceUrl },
 };
 export const wincPerCredit = 1_000_000_000_000;
 export const defaultDebounceMs = 500;

src/pages/ShareCreditPage.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useState } from "react";
+import { ErrMsgCallbackAsProps } from "../types";
+import { ardriveAppUrl, wincPerCredit } from "../constants";
+import { Page } from "./Page";
+import {
+  TurboAuthenticatedClient,
+  TurboBalanceResponse,
+} from "@ardrive/turbo-sdk/web";
+import TurboWalletConnector from "../components/TurboWalletConnector";
+
+function ShareCreditsForm({ errorCallback }: ErrMsgCallbackAsProps) {
+  const [turbo, setTurbo] = useState<undefined | TurboAuthenticatedClient>(
+    undefined,
+  );
+
+  const [creditAmount, setCreditAmount] = useState<number>(0.1);
+  const [approvedAddress, setApprovedAddress] = useState<string>("");
+  const [expiresBySeconds, setExpiresBySeconds] = useState<number>(
+    60 * 60 * 24 * 365,
+  ); //1 year
+
+  const [sending, setSending] = useState<boolean>(false);
+
+  // TODO: Query params if needed
+  // const location = useLocation();
+  // useEffect(() => {
+
+  // }, [location.search]);
+
+  const canSubmitShareCredits =
+    !!turbo && !!creditAmount && !!approvedAddress && !sending;
+
+  const [balanceResponse, setBalanceResponse] = useState<
+    TurboBalanceResponse | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (!turbo) {
+      return;
+    }
+
+    turbo
+      .getBalance()
+      .then((res) => {
+        setBalanceResponse(res);
+      })
+      .catch((err) => {
+        console.error("err", err);
+        errorCallback(
+          `Error getting balance: ${err instanceof Error ? err.message : err}`,
+        );
+        // throw err;
+      });
+  }, [turbo, errorCallback]);
+
+  const handleShareSubmit = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.preventDefault();
+
+    if (!canSubmitShareCredits) {
+      return;
+    }
+
+    const approvedWincAmount = (creditAmount * wincPerCredit).toFixed();
+    setSending(true);
+    turbo
+      .shareCredits({
+        approvedAddress,
+        approvedWincAmount,
+        expiresBySeconds,
+      })
+      .catch((err: unknown) => {
+        console.error("err", err);
+        errorCallback(
+          `Error sharing credits: ${err instanceof Error ? err.message : err}`,
+        );
+        // throw err;
+      })
+      .then((res: unknown) => {
+        console.log("res", res);
+        setSending(false);
+
+        // TODO: Success Modal or Page
+        alert("Great share!!\n" + JSON.stringify(res));
+      });
+  };
+
+  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>
+
+      <TurboWalletConnector setTurbo={setTurbo} />
+
+      <form className="form">
+        {/* TODO: Inputs for manifest options, concurrent uploads, etc. */}
+
+        <div className="form-section">
+          <label className="form-label">Amount of Credits</label>
+          <input
+            type="number"
+            className="form-input"
+            onChange={(e) => setCreditAmount(e.target.valueAsNumber)}
+          ></input>
+          <br />
+          <label className="form-label">Approved Address</label>
+          <input
+            type="text"
+            className="form-input"
+            placeholder="Enter the native wallet address to share credits to"
+            onChange={(e) => setApprovedAddress(e.target.value)}
+          ></input>
+          <br />
+          <label className="form-label">Expires By Seconds</label>
+          <input
+            type="number"
+            className="form-input"
+            onChange={(e) => setExpiresBySeconds(e.target.valueAsNumber)}
+          ></input>
+        </div>
+
+        {sending && <p>Now sharing credits...</p>}
+
+        <button
+          type="submit"
+          className="proceed-button"
+          onClick={(e) => handleShareSubmit(e)}
+          disabled={!canSubmitShareCredits}
+        >
+          Share Credits
+        </button>
+      </form>
+
+      <Balance balanceResponse={balanceResponse} />
+    </>
+  );
+}
+
+interface BalanceProps {
+  balanceResponse: TurboBalanceResponse | undefined;
+}
+function Balance({ balanceResponse }: BalanceProps) {
+  if (!balanceResponse) {
+    return <></>;
+  }
+
+  const {
+    controlledWinc,
+    effectiveBalance,
+    givenApprovals,
+    receivedApprovals,
+    winc,
+  } = balanceResponse;
+  const spendPower = (+winc / wincPerCredit).toFixed(12);
+  const sharedCredits = ((+controlledWinc - +winc) / wincPerCredit).toFixed(12);
+  const receivedCredits = ((+winc - +effectiveBalance) / wincPerCredit).toFixed(
+    12,
+  );
+
+  return (
+    <div className="form-section">
+      <label className="form-label">
+        Upload and Sharing spend power in credits: {spendPower}
+      </label>
+      {+receivedCredits > 0 && (
+        <label className="form-label">
+          Credits shared FROM other wallets: {receivedCredits}
+        </label>
+      )}
+      {+sharedCredits > 0 && (
+        <label className="form-label">
+          Shared credits to other wallets:{" "}
+          {((+controlledWinc - +winc) / wincPerCredit).toFixed(4)}
+        </label>
+      )}
+
+      <br />
+
+      {givenApprovals.length > 0 && (
+        <div className="form-section">
+          <label className="form-label">Given Approvals</label>
+          {/* TODO: Approvals component */}
+          {givenApprovals.map((approval) => (
+            <div key={approval.approvedAddress}>
+              <p>Approved Address: {approval.approvedAddress}</p>
+              <p>
+                Approved Credits:{" "}
+                {(+approval.approvedWincAmount / wincPerCredit).toFixed(12)}
+              </p>
+              {approval.expirationDate && (
+                <p>
+                  Expiration Date:{" "}
+                  {new Date(approval.expirationDate).toString()}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <br />
+
+      {receivedApprovals.length > 0 && (
+        <div className="form-section">
+          <label className="form-label">Given Approvals</label>
+          {/* TODO: Approvals component */}
+          {receivedApprovals.map((approval) => (
+            <div key={approval.approvedAddress}>
+              <p>Approved Address: {approval.approvedAddress}</p>
+              <p>
+                Approved Credits:{" "}
+                {(+approval.approvedWincAmount / wincPerCredit).toFixed(12)}
+              </p>
+              {approval.expirationDate && (
+                <p>
+                  Expiration Date:{" "}
+                  {new Date(approval.expirationDate).toString()}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const ShareCreditsPage = () => (
+  <Page page={(e) => <ShareCreditsForm errorCallback={e} />} />
+);