@depay/widgets 6.8.1 → 6.9.0

package/README.md

@@ -234,6 +234,24 @@ Payment tracking requests will be attempted up to 3 times by the widget and will
 
 A failed payment tracking will also call the [error callback](#error) with `{code: "TRACKING_FAILED"}`.
 
+##### Additional Polling
+
+In order to ensure a 100% payment tracking coverage, you cant entirely rely on websockets initiated with `track`.
+
+Hence, if you require better payment tracking coverage, you will also need to implement polling.
+
+The `track.poll` configuration either takes an `enpoint` or a `method` (similiar to track itself).
+
+It will use the endpoint or the method to request a payment status every 5 seconds.
+
+You need to make sure to respond to this request with `404` in case the payment has not been finished yet (as reported from the tracking callback)
+or `200` if the payment has been finished (as reported from the tracking callback).
+
+In case you want to redirect the user to the next step in your system, the polling needs to respond with `{ forward_to: 'https://example.com/next_step_url' }`.
+
+It is not enough to rely on setting `forward_to` initially with the tracking request (if you also implement polling),
+as the entire reason polling exist is because websockets might fail to report the initially configured `forward_to` to your clients.
+
 #### connected
 
 `connected`

package/dist/esm/index.bundle.js

@@ -70167,25 +70167,43 @@ var TrackingProvider = (function (props) {
   var _useContext2 = react.useContext(ConfigurationContext),
       track = _useContext2.track;
 
-  var _useState = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+  var _useState = react.useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      tracking = _useState2[0];
-      _useState2[1];
+      transaction = _useState2[0],
+      setTransaction = _useState2[1];
 
-  var _useState3 = react.useState(false),
+  var _useState3 = react.useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      release = _useState4[0],
-      setRelease = _useState4[1];
+      afterBlock = _useState4[0],
+      setAfterBlock = _useState4[1];
 
-  var _useState5 = react.useState(false),
+  var _useState5 = react.useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      trackingFailed = _useState6[0],
-      setTrackingFailed = _useState6[1];
+      paymentRoute = _useState6[0],
+      setPaymentRoute = _useState6[1];
 
-  var _useState7 = react.useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      forwardTo = _useState8[0],
-      setForwardTo = _useState8[1];
+  var _useState7 = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+      _useState8 = _slicedToArray(_useState7, 1),
+      tracking = _useState8[0];
+
+  var _useState9 = react.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+      _useState10 = _slicedToArray(_useState9, 1),
+      polling = _useState10[0];
+
+  var _useState11 = react.useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      release = _useState12[0],
+      setRelease = _useState12[1];
+
+  var _useState13 = react.useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      trackingFailed = _useState14[0],
+      setTrackingFailed = _useState14[1];
+
+  var _useState15 = react.useState(),
+      _useState16 = _slicedToArray(_useState15, 2),
+      forwardTo = _useState16[0],
+      setForwardTo = _useState16[1];
 
   var _useContext3 = react.useContext(ClosableContext),
       setClosable = _useContext3.setClosable;
@@ -70287,7 +70305,59 @@ var TrackingProvider = (function (props) {
     });
   };
 
+  var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+    if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+      return;
+    }
+
+    var payment = {
+      blockchain: transaction.blockchain,
+      transaction: transaction.id.toLowerCase(),
+      sender: transaction.from.toLowerCase(),
+      nonce: transaction.nonce,
+      after_block: afterBlock,
+      to_token: paymentRoute.toToken.address
+    };
+
+    var handleResponse = function handleResponse(response) {
+      if (response.status == 200) {
+        response.json().then(function (data) {
+          if (data && data.forward_to) {
+            setForwardTo(data.forward_to);
+          }
+        });
+        clearInterval(pollingInterval);
+        setRelease(true);
+      }
+    };
+
+    if (track.poll.endpoint) {
+      fetch(track.poll.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(payment)
+      }).then(handleResponse);
+    } else if (track.poll.method) {
+      track.poll.method(payment).then(handleResponse);
+    }
+  };
+
+  react.useEffect(function () {
+    if (!polling) {
+      return;
+    }
+
+    var pollingInterval = setInterval(function () {
+      return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+    }, 5000);
+    return function () {
+      clearInterval(pollingInterval);
+    };
+  }, [polling, transaction, afterBlock, paymentRoute]);
+
   var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+    setTransaction(transaction);
+    setAfterBlock(afterBlock);
+    setPaymentRoute(paymentRoute);
     openSocket(transaction);
     startTracking(transaction, afterBlock, paymentRoute);
   };

package/dist/esm/index.js

@@ -3544,25 +3544,43 @@ var TrackingProvider = (function (props) {
   var _useContext2 = useContext(ConfigurationContext),
       track = _useContext2.track;
 
-  var _useState = useState(track && !!(track.endpoint || typeof track.method == 'function')),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      tracking = _useState2[0];
-      _useState2[1];
+      transaction = _useState2[0],
+      setTransaction = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      release = _useState4[0],
-      setRelease = _useState4[1];
+      afterBlock = _useState4[0],
+      setAfterBlock = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      trackingFailed = _useState6[0],
-      setTrackingFailed = _useState6[1];
+      paymentRoute = _useState6[0],
+      setPaymentRoute = _useState6[1];
 
-  var _useState7 = useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      forwardTo = _useState8[0],
-      setForwardTo = _useState8[1];
+  var _useState7 = useState(track && !!(track.endpoint || typeof track.method == 'function')),
+      _useState8 = _slicedToArray(_useState7, 1),
+      tracking = _useState8[0];
+
+  var _useState9 = useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+      _useState10 = _slicedToArray(_useState9, 1),
+      polling = _useState10[0];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      release = _useState12[0],
+      setRelease = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      trackingFailed = _useState14[0],
+      setTrackingFailed = _useState14[1];
+
+  var _useState15 = useState(),
+      _useState16 = _slicedToArray(_useState15, 2),
+      forwardTo = _useState16[0],
+      setForwardTo = _useState16[1];
 
   var _useContext3 = useContext(ClosableContext),
       setClosable = _useContext3.setClosable;
@@ -3664,7 +3682,59 @@ var TrackingProvider = (function (props) {
     });
   };
 
+  var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+    if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+      return;
+    }
+
+    var payment = {
+      blockchain: transaction.blockchain,
+      transaction: transaction.id.toLowerCase(),
+      sender: transaction.from.toLowerCase(),
+      nonce: transaction.nonce,
+      after_block: afterBlock,
+      to_token: paymentRoute.toToken.address
+    };
+
+    var handleResponse = function handleResponse(response) {
+      if (response.status == 200) {
+        response.json().then(function (data) {
+          if (data && data.forward_to) {
+            setForwardTo(data.forward_to);
+          }
+        });
+        clearInterval(pollingInterval);
+        setRelease(true);
+      }
+    };
+
+    if (track.poll.endpoint) {
+      fetch(track.poll.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(payment)
+      }).then(handleResponse);
+    } else if (track.poll.method) {
+      track.poll.method(payment).then(handleResponse);
+    }
+  };
+
+  useEffect(function () {
+    if (!polling) {
+      return;
+    }
+
+    var pollingInterval = setInterval(function () {
+      return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+    }, 5000);
+    return function () {
+      clearInterval(pollingInterval);
+    };
+  }, [polling, transaction, afterBlock, paymentRoute]);
+
   var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+    setTransaction(transaction);
+    setAfterBlock(afterBlock);
+    setPaymentRoute(paymentRoute);
     openSocket(transaction);
     startTracking(transaction, afterBlock, paymentRoute);
   };

package/dist/umd/index.bundle.js

@@ -70173,25 +70173,43 @@
     var _useContext2 = react.useContext(ConfigurationContext),
         track = _useContext2.track;
 
-    var _useState = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+    var _useState = react.useState(),
         _useState2 = _slicedToArray(_useState, 2),
-        tracking = _useState2[0];
-        _useState2[1];
+        transaction = _useState2[0],
+        setTransaction = _useState2[1];
 
-    var _useState3 = react.useState(false),
+    var _useState3 = react.useState(),
         _useState4 = _slicedToArray(_useState3, 2),
-        release = _useState4[0],
-        setRelease = _useState4[1];
+        afterBlock = _useState4[0],
+        setAfterBlock = _useState4[1];
 
-    var _useState5 = react.useState(false),
+    var _useState5 = react.useState(),
         _useState6 = _slicedToArray(_useState5, 2),
-        trackingFailed = _useState6[0],
-        setTrackingFailed = _useState6[1];
+        paymentRoute = _useState6[0],
+        setPaymentRoute = _useState6[1];
 
-    var _useState7 = react.useState(),
-        _useState8 = _slicedToArray(_useState7, 2),
-        forwardTo = _useState8[0],
-        setForwardTo = _useState8[1];
+    var _useState7 = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+        _useState8 = _slicedToArray(_useState7, 1),
+        tracking = _useState8[0];
+
+    var _useState9 = react.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+        _useState10 = _slicedToArray(_useState9, 1),
+        polling = _useState10[0];
+
+    var _useState11 = react.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        release = _useState12[0],
+        setRelease = _useState12[1];
+
+    var _useState13 = react.useState(false),
+        _useState14 = _slicedToArray(_useState13, 2),
+        trackingFailed = _useState14[0],
+        setTrackingFailed = _useState14[1];
+
+    var _useState15 = react.useState(),
+        _useState16 = _slicedToArray(_useState15, 2),
+        forwardTo = _useState16[0],
+        setForwardTo = _useState16[1];
 
     var _useContext3 = react.useContext(ClosableContext),
         setClosable = _useContext3.setClosable;
@@ -70293,7 +70311,59 @@
       });
     };
 
+    var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+      if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+        return;
+      }
+
+      var payment = {
+        blockchain: transaction.blockchain,
+        transaction: transaction.id.toLowerCase(),
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce,
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
+      };
+
+      var handleResponse = function handleResponse(response) {
+        if (response.status == 200) {
+          response.json().then(function (data) {
+            if (data && data.forward_to) {
+              setForwardTo(data.forward_to);
+            }
+          });
+          clearInterval(pollingInterval);
+          setRelease(true);
+        }
+      };
+
+      if (track.poll.endpoint) {
+        fetch(track.poll.endpoint, {
+          method: 'POST',
+          body: JSON.stringify(payment)
+        }).then(handleResponse);
+      } else if (track.poll.method) {
+        track.poll.method(payment).then(handleResponse);
+      }
+    };
+
+    react.useEffect(function () {
+      if (!polling) {
+        return;
+      }
+
+      var pollingInterval = setInterval(function () {
+        return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+      }, 5000);
+      return function () {
+        clearInterval(pollingInterval);
+      };
+    }, [polling, transaction, afterBlock, paymentRoute]);
+
     var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+      setTransaction(transaction);
+      setAfterBlock(afterBlock);
+      setPaymentRoute(paymentRoute);
       openSocket(transaction);
       startTracking(transaction, afterBlock, paymentRoute);
     };

package/dist/umd/index.js

@@ -3539,25 +3539,43 @@
     var _useContext2 = React.useContext(ConfigurationContext),
         track = _useContext2.track;
 
-    var _useState = React.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+    var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
-        tracking = _useState2[0];
-        _useState2[1];
+        transaction = _useState2[0],
+        setTransaction = _useState2[1];
 
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState(),
         _useState4 = _slicedToArray(_useState3, 2),
-        release = _useState4[0],
-        setRelease = _useState4[1];
+        afterBlock = _useState4[0],
+        setAfterBlock = _useState4[1];
 
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(),
         _useState6 = _slicedToArray(_useState5, 2),
-        trackingFailed = _useState6[0],
-        setTrackingFailed = _useState6[1];
+        paymentRoute = _useState6[0],
+        setPaymentRoute = _useState6[1];
 
-    var _useState7 = React.useState(),
-        _useState8 = _slicedToArray(_useState7, 2),
-        forwardTo = _useState8[0],
-        setForwardTo = _useState8[1];
+    var _useState7 = React.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+        _useState8 = _slicedToArray(_useState7, 1),
+        tracking = _useState8[0];
+
+    var _useState9 = React.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+        _useState10 = _slicedToArray(_useState9, 1),
+        polling = _useState10[0];
+
+    var _useState11 = React.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        release = _useState12[0],
+        setRelease = _useState12[1];
+
+    var _useState13 = React.useState(false),
+        _useState14 = _slicedToArray(_useState13, 2),
+        trackingFailed = _useState14[0],
+        setTrackingFailed = _useState14[1];
+
+    var _useState15 = React.useState(),
+        _useState16 = _slicedToArray(_useState15, 2),
+        forwardTo = _useState16[0],
+        setForwardTo = _useState16[1];
 
     var _useContext3 = React.useContext(ClosableContext),
         setClosable = _useContext3.setClosable;
@@ -3659,7 +3677,59 @@
       });
     };
 
+    var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+      if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+        return;
+      }
+
+      var payment = {
+        blockchain: transaction.blockchain,
+        transaction: transaction.id.toLowerCase(),
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce,
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
+      };
+
+      var handleResponse = function handleResponse(response) {
+        if (response.status == 200) {
+          response.json().then(function (data) {
+            if (data && data.forward_to) {
+              setForwardTo(data.forward_to);
+            }
+          });
+          clearInterval(pollingInterval);
+          setRelease(true);
+        }
+      };
+
+      if (track.poll.endpoint) {
+        fetch(track.poll.endpoint, {
+          method: 'POST',
+          body: JSON.stringify(payment)
+        }).then(handleResponse);
+      } else if (track.poll.method) {
+        track.poll.method(payment).then(handleResponse);
+      }
+    };
+
+    React.useEffect(function () {
+      if (!polling) {
+        return;
+      }
+
+      var pollingInterval = setInterval(function () {
+        return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+      }, 5000);
+      return function () {
+        clearInterval(pollingInterval);
+      };
+    }, [polling, transaction, afterBlock, paymentRoute]);
+
     var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+      setTransaction(transaction);
+      setAfterBlock(afterBlock);
+      setPaymentRoute(paymentRoute);
       openSocket(transaction);
       startTracking(transaction, afterBlock, paymentRoute);
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.8.1",
+  "version": "6.9.0",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",