From 12215c254eccf4140e1cabfa6b3bcb1728ab6f48 Mon Sep 17 00:00:00 2001 From: George Knee Date: Wed, 20 Sep 2023 22:38:38 +0100 Subject: [PATCH 1/6] use the download button as the progress bar --- packages/payment-proxy-client/src/App.tsx | 58 +++++++------------ .../src/ProgressButton.tsx | 13 +++++ 2 files changed, 35 insertions(+), 36 deletions(-) create mode 100644 packages/payment-proxy-client/src/ProgressButton.tsx diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index 9e2a7a78d..97f3c74bb 100644 --- a/packages/payment-proxy-client/src/App.tsx +++ b/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(""); - const [paymentProgress, setPaymentProgress] = useState(0); + const [downloadProgress, setDownloadProgress] = useState(0); + + 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"); @@ -164,7 +171,7 @@ export default function App() { paymentChannelInfo.ID, nitroClient, (progress) => { - setPaymentProgress(progress); + setDownloadProgress(progress); updateChannelInfo(paymentChannelInfo.ID); } ) @@ -177,7 +184,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 @@ -207,7 +214,6 @@ export default function App() { }; const [createChannelDisabled, setCreateChannelDisabled] = useState(false); - const [payDisabled, setPayDisabled] = useState(false); function VerticalLinearStepper() { const handleCreateChannelButton = () => { @@ -219,8 +225,7 @@ export default function App() { }; const handlePayButton = async () => { - setPayDisabled(true); - fetchAndDownloadFile().finally(() => setPayDisabled(false)); + fetchAndDownloadFile(); //.finally(() => setDownloadProgress(0)); }; const computePercentagePaid = (info: PaymentChannelInfo) => { @@ -416,22 +421,20 @@ export default function App() { - {useMicroPayments && payDisabled && ( - - )} - - + {displayError(errorText)} @@ -503,20 +506,3 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ backgroundColor: theme.palette.mode === "light" ? "#1a90ff" : "#308fe8", }, })); - -const LinearProgressWithLabel = ( - props: LinearProgressProps & { value: number } -) => { - return ( - - - - - - {`${Math.round( - props.value - )}%`} - - - ); -}; diff --git a/packages/payment-proxy-client/src/ProgressButton.tsx b/packages/payment-proxy-client/src/ProgressButton.tsx new file mode 100644 index 000000000..b6ba7a7f1 --- /dev/null +++ b/packages/payment-proxy-client/src/ProgressButton.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { Button, ButtonProps } from "@mui/material"; +import { styled } from "@mui/system"; + +interface CustomButtonProps extends ButtonProps { + fillPercentage: number; +} + +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; + +export default CustomButton; From 17c0adf3c15f017516a3a292c6e8ec5560d33184 Mon Sep 17 00:00:00 2001 From: George Knee Date: Wed, 20 Sep 2023 22:41:38 +0100 Subject: [PATCH 2/6] fix err --- packages/payment-proxy-client/src/App.tsx | 1 - packages/payment-proxy-client/src/ProgressButton.tsx | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index 97f3c74bb..34df01195 100644 --- a/packages/payment-proxy-client/src/App.tsx +++ b/packages/payment-proxy-client/src/App.tsx @@ -425,7 +425,6 @@ export default function App() { variant="contained" onClick={handlePayButton} disabled={downloadProgress > 0} - fillPercentage={downloadProgress} style={ { "--fill-percentage": `${downloadProgress}%`, diff --git a/packages/payment-proxy-client/src/ProgressButton.tsx b/packages/payment-proxy-client/src/ProgressButton.tsx index b6ba7a7f1..3ff8b7b2b 100644 --- a/packages/payment-proxy-client/src/ProgressButton.tsx +++ b/packages/payment-proxy-client/src/ProgressButton.tsx @@ -2,12 +2,8 @@ import React from "react"; import { Button, ButtonProps } from "@mui/material"; import { styled } from "@mui/system"; -interface CustomButtonProps extends ButtonProps { - fillPercentage: number; -} - 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; +}) as React.FC; export default CustomButton; From 9c450f6e5fead53a9d745b02f54bf2b4407d810c Mon Sep 17 00:00:00 2001 From: George Knee Date: Wed, 20 Sep 2023 22:47:26 +0100 Subject: [PATCH 3/6] remove comment --- packages/payment-proxy-client/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index 34df01195..fa5c351e1 100644 --- a/packages/payment-proxy-client/src/App.tsx +++ b/packages/payment-proxy-client/src/App.tsx @@ -225,7 +225,7 @@ export default function App() { }; const handlePayButton = async () => { - fetchAndDownloadFile(); //.finally(() => setDownloadProgress(0)); + fetchAndDownloadFile(); }; const computePercentagePaid = (info: PaymentChannelInfo) => { From 3f327f9475b2083c95a453bb59459f6594bd29c4 Mon Sep 17 00:00:00 2001 From: lalexgap Date: Wed, 20 Sep 2023 15:59:43 -0700 Subject: [PATCH 4/6] disable button while fetch in progress --- packages/payment-proxy-client/src/App.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index fa5c351e1..3f5266ee8 100644 --- a/packages/payment-proxy-client/src/App.tsx +++ b/packages/payment-proxy-client/src/App.tsx @@ -79,7 +79,7 @@ export default function App() { const [useMicroPayments, setUseMicroPayments] = useState(false); const [errorText, setErrorText] = useState(""); const [downloadProgress, setDownloadProgress] = useState(0); - + const [fetchInProgress, setFetchInProgress] = useState(false); useEffect(() => { // Reset the progress to 0 and make the button clickable after reaching 100 if (downloadProgress >= 100) { @@ -153,6 +153,7 @@ export default function App() { const fetchAndDownloadFile = async () => { setErrorText(""); + setFetchInProgress(true); if (!nitroClient) { setErrorText("Nitro client not initialized"); @@ -162,6 +163,7 @@ export default function App() { setErrorText("No payment channel to use"); return; } + try { const file = useMicroPayments ? await fetchFileInChunks( @@ -193,7 +195,10 @@ export default function App() { }, 50); } catch (e: unknown) { console.error(e); + setErrorText((e as Error).message); + } finally { + setFetchInProgress(false); } }; @@ -224,10 +229,6 @@ export default function App() { }); }; - const handlePayButton = async () => { - fetchAndDownloadFile(); - }; - const computePercentagePaid = (info: PaymentChannelInfo) => { const total = info.Balance.PaidSoFar + info.Balance.RemainingFunds; return Number((100n * info.Balance.PaidSoFar) / total); @@ -423,8 +424,8 @@ export default function App() { 0} + onClick={fetchAndDownloadFile} + disabled={fetchInProgress} style={ { "--fill-percentage": `${downloadProgress}%`, From 28534fe68ad3967d47ab83b9221ff15ad542b21a Mon Sep 17 00:00:00 2001 From: lalexgap Date: Wed, 20 Sep 2023 16:09:47 -0700 Subject: [PATCH 5/6] reset progress at start --- packages/payment-proxy-client/src/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index 3f5266ee8..b759a0ba9 100644 --- a/packages/payment-proxy-client/src/App.tsx +++ b/packages/payment-proxy-client/src/App.tsx @@ -154,6 +154,7 @@ export default function App() { const fetchAndDownloadFile = async () => { setErrorText(""); setFetchInProgress(true); + setDownloadProgress(0); if (!nitroClient) { setErrorText("Nitro client not initialized"); From a350de165a98cecc687684b8c225b3e9248d16aa Mon Sep 17 00:00:00 2001 From: lalexgap Date: Wed, 20 Sep 2023 16:21:40 -0700 Subject: [PATCH 6/6] disable button when progress is 100 --- packages/payment-proxy-client/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx index b759a0ba9..014fa8b30 100644 --- a/packages/payment-proxy-client/src/App.tsx +++ b/packages/payment-proxy-client/src/App.tsx @@ -426,7 +426,7 @@ export default function App() {