From 89636c3924be6e5a6f04789fc6db337f2dfdb85c Mon Sep 17 00:00:00 2001
From: lalexgap <me@alexgap.ca>
Date: Wed, 20 Sep 2023 17:11:42 -0700
Subject: [PATCH 1/2] add micropayment info icon

---
 packages/payment-proxy-client/src/App.tsx     | 21 ++++++++++++++++++-
 .../payment-proxy-client/src/constants.ts     |  5 +++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/payment-proxy-client/src/App.tsx b/packages/payment-proxy-client/src/App.tsx
index ad0a76b8f..77851bd93 100644
--- 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
index 169cd76b8..a8f3421fc 100644
--- 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://statechannels.notion.site/Filecoin-Paid-Retrieval-Demo-bf6ad9ec92a74e139331ce77900305fc";

From 0385cce45a85525e86062bcaaff0478ae93a81f1 Mon Sep 17 00:00:00 2001
From: George Knee <georgeknee@googlemail.com>
Date: Thu, 21 Sep 2023 18:16:36 +0100
Subject: [PATCH 2/2] update link to sub block

---
 packages/payment-proxy-client/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/payment-proxy-client/src/constants.ts b/packages/payment-proxy-client/src/constants.ts
index a8f3421fc..95a4d1c48 100644
--- a/packages/payment-proxy-client/src/constants.ts
+++ b/packages/payment-proxy-client/src/constants.ts
@@ -39,4 +39,4 @@ export const files: AvailableFile[] = import.meta.env.VITE_FILE_PATHS.split(
 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://statechannels.notion.site/Filecoin-Paid-Retrieval-Demo-bf6ad9ec92a74e139331ce77900305fc";
+  "https://www.notion.so/statechannels/Filecoin-Paid-Retrieval-Demo-bf6ad9ec92a74e139331ce77900305fc?pvs=4#d81f52d3d3ec48908c93403c450e7d95";