Merge pull request #1778 from statechannels/ag-button-progress2

use the download button as the progress bar + disable button while fetch in progress

packages/payment-proxy-client/src/App.tsx

@@ -18,7 +18,6 @@ import {
   Switch,
   linearProgressClasses,
   useMediaQuery,
-  LinearProgressProps,
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import Stepper from "@mui/material/Stepper";
@@ -46,6 +45,7 @@ import {
 import { fetchFile, fetchFileInChunks } from "./file";
 import { Copyright } from "./Copyright";
 import { prettyPrintFIL } from "./prettyPrintFIL";
+import ProgressButton from "./ProgressButton";
 
 function truncateHexString(h: string) {
   if (h == "") return "";
@@ -78,7 +78,14 @@ export default function App() {
   const [skipPayment, setSkipPayment] = useState(false);
   const [useMicroPayments, setUseMicroPayments] = useState(false);
   const [errorText, setErrorText] = useState<string>("");
-  const [paymentProgress, setPaymentProgress] = useState<number>(0);
+  const [downloadProgress, setDownloadProgress] = useState<number>(0);
+  const [fetchInProgress, setFetchInProgress] = useState<boolean>(false);
+  useEffect(() => {
+    // Reset the progress to 0 and make the button clickable after reaching 100
+    if (downloadProgress >= 100) {
+      setTimeout(() => setDownloadProgress(0), 500); // Reset after .5 second
+    }
+  }, [downloadProgress]);
 
   if (files.length == 0) {
     throw new Error("There must be at least one file to download");
@@ -146,6 +153,8 @@ export default function App() {
 
   const fetchAndDownloadFile = async () => {
     setErrorText("");
+    setFetchInProgress(true);
+    setDownloadProgress(0);
 
     if (!nitroClient) {
       setErrorText("Nitro client not initialized");
@@ -155,6 +164,7 @@ export default function App() {
       setErrorText("No payment channel to use");
       return;
     }
+
     try {
       const file = useMicroPayments
         ? await fetchFileInChunks(
@@ -164,7 +174,7 @@ export default function App() {
             paymentChannelInfo.ID,
             nitroClient,
             (progress) => {
-              setPaymentProgress(progress);
+              setDownloadProgress(progress);
               updateChannelInfo(paymentChannelInfo.ID);
             }
           )
@@ -177,7 +187,7 @@ export default function App() {
               updateChannelInfo(paymentChannelInfo.ID);
             }
           );
-
+      setDownloadProgress(100);
       triggerFileDownload(file, selectedFile.fileName);
 
       // TODO: Slightly hacky but we wait a beat before querying so we see the updated balance
@@ -186,7 +196,10 @@ export default function App() {
       }, 50);
     } catch (e: unknown) {
       console.error(e);
+
       setErrorText((e as Error).message);
+    } finally {
+      setFetchInProgress(false);
     }
   };
 
@@ -207,7 +220,6 @@ export default function App() {
   };
 
   const [createChannelDisabled, setCreateChannelDisabled] = useState(false);
-  const [payDisabled, setPayDisabled] = useState(false);
 
   function VerticalLinearStepper() {
     const handleCreateChannelButton = () => {
@@ -218,11 +230,6 @@ export default function App() {
       });
     };
 
-    const handlePayButton = async () => {
-      setPayDisabled(true);
-      fetchAndDownloadFile().finally(() => setPayDisabled(false));
-    };
-
     const computePercentagePaid = (info: PaymentChannelInfo) => {
       const total = info.Balance.PaidSoFar + info.Balance.RemainingFunds;
       return Number((100n * info.Balance.PaidSoFar) / total);
@@ -416,22 +423,19 @@ export default function App() {
                           </RadioGroup>
                         </FormControl>
                       </Box>
-                      {useMicroPayments && payDisabled && (
-                        <LinearProgressWithLabel
-                          variant="determinate"
-                          color={"primary"}
-                          value={paymentProgress}
-                        />
-                      )}
-
-                      <Button
+                      <ProgressButton
                         variant="contained"
-                        disabled={payDisabled}
-                        onClick={handlePayButton}
-                        sx={{ mt: 1, mr: 1 }}
+                        onClick={fetchAndDownloadFile}
+                        disabled={fetchInProgress || downloadProgress == 100}
+                        style={
+                          {
+                            "--fill-percentage": `${downloadProgress}%`,
+                            "--primary-color": theme.palette.primary.main,
+                          } as React.CSSProperties
+                        }
                       >
                         Pay & Download
-                      </Button>
+                      </ProgressButton>
                     </Box>
                     {displayError(errorText)}
                   </Stack>
@@ -503,20 +507,3 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
     backgroundColor: theme.palette.mode === "light" ? "#1a90ff" : "#308fe8",
   },
 }));
-
-const LinearProgressWithLabel = (
-  props: LinearProgressProps & { value: number }
-) => {
-  return (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
-      <Box sx={{ width: "100%", mr: 1 }}>
-        <LinearProgress variant="determinate" {...props} />
-      </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography variant="body2" color="text.secondary">{`${Math.round(
-          props.value
-        )}%`}</Typography>
-      </Box>
-    </Box>
-  );
-};

packages/payment-proxy-client/src/ProgressButton.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Button, ButtonProps } from "@mui/material";
+import { styled } from "@mui/system";
+
+const CustomButton = styled(Button)({
+  background: `linear-gradient(90deg, transparent 0%, transparent var(--fill-percentage), var(--primary-color) var(--fill-percentage), var(--primary-color) 100%)`,
+}) as React.FC<ButtonProps>;
+
+export default CustomButton;