Merge pull request #1779 from statechannels/info-icon

Add micropayment info icon
statechannels · Sep 21, 2023 · 88207e1 · 88207e1
2 parents 9591c11 + 0385cce
commit 88207e1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx
@@ -19,7 +19,10 @@ import {
   linearProgressClasses,
   useMediaQuery,
   Modal,
+  IconButton,
+  Tooltip,
 } from "@mui/material";
+import InfoIcon from "@mui/icons-material/Info";
 import Box from "@mui/material/Box";
 import Stepper from "@mui/material/Stepper";
 import Step from "@mui/material/Step";
@@ -36,6 +39,8 @@ import {
   AvailableFile,
   CHUNK_SIZE,
   QUERY_KEY,
+  USE_MICROPAYMENTS_INFO_LINK,
+  USE_MICROPAYMENTS_INFO_TEXT,
   costPerByte,
   defaultNitroRPCUrl,
   files,
@@ -423,7 +428,21 @@ export default function App() {
                             }}
                           />
                         }
-                        label="Use micro-payments"
+                        label={
+                          <Box>
+                            Use micro-payments
+                            <Tooltip title={USE_MICROPAYMENTS_INFO_TEXT}>
+                              <IconButton
+                                aria-label="info"
+                                onClick={() =>
+                                  window.open(USE_MICROPAYMENTS_INFO_LINK)
+                                }
+                              >
+                                <InfoIcon />
+                              </IconButton>
+                            </Tooltip>
+                          </Box>
+                        }
                       />
                       <FormControlLabel
                         control={

diff --git a/packages/payment-proxy-client/src/constants.ts b/packages/payment-proxy-client/src/constants.ts
@@ -35,3 +35,8 @@ export const files: AvailableFile[] = import.meta.env.VITE_FILE_PATHS.split(
     size: fileSizes[index],
   };
 });
+
+export const USE_MICROPAYMENTS_INFO_TEXT =
+  "The file will be downloaded over multiple requests, sending a micropayment for each request. Click here to find out more.";
+export const USE_MICROPAYMENTS_INFO_LINK =
+  "https://www.notion.so/statechannels/Filecoin-Paid-Retrieval-Demo-bf6ad9ec92a74e139331ce77900305fc?pvs=4#d81f52d3d3ec48908c93403c450e7d95";