fix/#62: Add onConfirmation callback mechanism in RequestProvider (#68)

Signed-off-by: OjusWiZard <ojuswimail@gmail.com>

Author: OjusWiZard

packages/create/src/components/AppBar.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { RLogo } from "request-ui";
-import { Link, Hidden } from "@material-ui/core";
 
 import {
   AppBar,

packages/create/src/containers/CreatePage.tsx

@@ -1,5 +1,5 @@
 import { FormikHelpers } from "formik";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useHistory } from "react-router";
 import { isCancelError, useCreateRequest } from "request-shared";
 import { useErrorReporter } from "request-ui";

packages/create/src/containers/RequestPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { makeStyles, Typography } from "@material-ui/core";
 import { useWeb3React } from "@web3-react/core";
 import {
@@ -84,10 +84,18 @@ const RequestPageInner = () => {
     request,
     loading,
     update,
+    setOnConfirmation,
     counterCurrency,
     counterValue,
   } = useRequest();
 
+  useEffect(() => {
+    if (request?.status === 'waiting') {
+      setOnConfirmation(update);
+    }
+    // eslint-disable-next-line
+  }, [request]); // not including update and setOnConfirmation here because they won't change
+
   const cancel = async () => {
     if (!request || !account || !chainId) {
       throw new Error("cannot cancel because page is not ready");

packages/pay/src/containers/DemoPage.tsx

@@ -530,7 +530,8 @@ const DemoPage = () => {
             counterValue: "1.00",
             request,
             loading: !request,
-            setPending: () => {},
+            setOnConfirmation: () => { },
+            setPending: () => { },
             update: () => Promise.resolve(),
           }}
         >

packages/shared/src/contexts/RequestContext.tsx

@@ -20,6 +20,7 @@ interface IContext {
   counterCurrency: CurrencyDefinition;
   /** the request's expected amount in counter currency */
   counterValue?: string;
+  setOnConfirmation: (onConfirmation: () => void) => void;
   /**
    * set the pending status for UX purposes
    * Pending means the payment is being processed and takes a long time.
@@ -72,6 +73,7 @@ export const RequestProvider: React.FC<{ chainId?: string | number }> = ({
   const counterCurrency = currencyManager.from("USD")!;
   const [counterValue, setCounterValue] = useState<string>("");
   const [pending, setPending] = useState(false);
+  const [onConfirmation, setOnConfirmation] = useState<() => void>();
 
   // gets counter currency rate
   const rate = useRate(parsedRequest?.currency, counterCurrency);
@@ -100,6 +102,9 @@ export const RequestProvider: React.FC<{ chainId?: string | number }> = ({
       });
       parseResult.loaded = true;
       setParsedRequest(parseResult);
+      if (onConfirmation) {
+        result.request.waitForConfirmation().then(onConfirmation);
+      }
     }
   };
 
@@ -125,6 +130,7 @@ export const RequestProvider: React.FC<{ chainId?: string | number }> = ({
         counterCurrency,
         counterValue,
         setPending,
+        setOnConfirmation,
         update: useCallback(
           () => fetchRequest(id, chainId, pending),
           [id, chainId, pending]