@depay/widgets 6.11.0 → 6.13.0

package/dist/umd/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image'), require('@depay/web3-blockchains')) :
-  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image', '@depay/web3-blockchains'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage, global.Web3Blockchains));
-})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, Slider, reactTokenImage, web3Blockchains) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-blockchains'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image')) :
+  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-blockchains', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Blockchains, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage));
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Blockchains, web3Payments, Slider, reactTokenImage) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1452,6 +1452,8 @@
     constructor(props) {
       super(props);
 
+      this.handler = this.onKeyDown.bind(this);
+
       this.state = {
         open: true,
       };
@@ -1485,22 +1487,22 @@
           this.setState({ open: true });
         }, 10);
       });
-      this.props.document.addEventListener('keydown', this.onKeyDown.bind(this), false);
+      this.props.document.addEventListener('keydown', this.handler, true);
     }
 
     componentWillUnmount() {
-      this.props.document.addEventListener('keydown', this.onKeyDown.bind(this), false);
+      this.props.document.removeEventListener('keydown', this.handler, true);
     }
 
     render() {
       const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
       const style = ReactDialogStyle({ background: this.props.background });
       return (
-        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 54}}
-          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 55}}, style)
-          , React__default["default"].createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
-            , React__default["default"].createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}
-              , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}} )
+        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
+          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
+          , React__default["default"].createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
+            , React__default["default"].createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}}
+              , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 60}} )
               , this.props.children
             )
           )
@@ -1677,7 +1679,7 @@
   });
 
   var DialogStyle = (function (style) {
-    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n      background: rgb(248,248,248);\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      min-height: 3.4rem;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 3rem;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
+    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n      background: rgb(248,248,248);\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .ReactDialogCell {\n        vertical-align: bottom;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      min-height: 3.4rem;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 3rem;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
   });
 
   var FontStyle = (function (style) {
@@ -1999,7 +2001,7 @@
         focusToFixed = parseFloat(_float).toFixed(1).replace('.', '');
       }
 
-      if (focusToFixed.toString()[0] != 0 && focusToFixed.toString().length > 2) {
+      if (focusToFixed.toString()[0] != "0" && focusToFixed.toString().length > 2) {
         return parseInt(inputAsFloat.toFixed(0));
       } else {
         return parseFloat(digitsAfterDecimal.replace(/\d{3}$/, focusToFixed));
@@ -2018,16 +2020,17 @@
       });
     };
 
-    var _useState = React.useState(configurationsMissAmounts(props.accept)),
+    var _useContext = React.useContext(ConfigurationContext),
+        amountConfiguration = _useContext.amount,
+        recover = _useContext.recover;
+
+    var _useState = React.useState(recover == undefined ? configurationsMissAmounts(props.accept) : false),
         _useState2 = _slicedToArray(_useState, 2),
         amountsMissing = _useState2[0],
         setAmountsMissing = _useState2[1];
 
-    var _useContext = React.useContext(WalletContext),
-        account = _useContext.account;
-
-    var _useContext2 = React.useContext(ConfigurationContext),
-        amountConfiguration = _useContext2.amount;
+    var _useContext2 = React.useContext(WalletContext),
+        account = _useContext2.account;
 
     var _useContext3 = React.useContext(ConversionRateContext),
         conversionRate = _useContext3.conversionRate;
@@ -2056,8 +2059,12 @@
         setMaxAmount = _useState10[1];
 
     React.useEffect(function () {
+      if (recover) {
+        return;
+      }
+
       setAmountsMissing(configurationsMissAmounts(props.accept));
-    }, [props.accept]);
+    }, [props.accept, recover]);
 
     var getAmounts = function getAmounts() {
       return new Promise(function (resolve, reject) {
@@ -2093,6 +2100,10 @@
     };
 
     React.useEffect(function () {
+      if (recover) {
+        return;
+      }
+
       if (amountsMissing && account && conversionRate) {
         getAmounts().then(function (amounts) {
           setAcceptWithAmount(props.accept.map(function (configuration, index) {
@@ -2111,7 +2122,7 @@
           }));
         })["catch"](setError);
       }
-    }, [amountsMissing, account, conversionRate, amount]);
+    }, [amountsMissing, account, conversionRate, amount, recover]);
     React.useEffect(function () {
       if (amountsMissing && maxRoute) {
         maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
@@ -2225,6 +2236,8 @@
 
   var DonationRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
+  var NavigateContext = /*#__PURE__*/React__default["default"].createContext();
+
   var QuestionsGraphic = "data:image/png;base64,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";
 
   var NoPaymentMethodFoundDialog = (function () {
@@ -2260,7 +2273,9 @@
 
   var PaymentRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var TrackingContext = /*#__PURE__*/React__default["default"].createContext();
+  var PaymentTrackingContext = /*#__PURE__*/React__default["default"].createContext();
+
+  var TransactionTrackingContext = /*#__PURE__*/React__default["default"].createContext();
 
   var PaymentProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
@@ -2268,11 +2283,13 @@
 
     var _useContext2 = React.useContext(ConfigurationContext),
         _sent = _useContext2.sent,
-        _confirmed = _useContext2.confirmed,
-        _failed = _useContext2.failed;
+        confirmed = _useContext2.confirmed,
+        failed = _useContext2.failed,
+        recover = _useContext2.recover;
 
     var _useContext3 = React.useContext(PaymentRoutingContext),
-        selectedRoute = _useContext3.selectedRoute;
+        selectedRoute = _useContext3.selectedRoute,
+        getPaymentRoutes = _useContext3.getPaymentRoutes;
 
     var _useContext4 = React.useContext(ClosableContext),
         open = _useContext4.open,
@@ -2285,13 +2302,20 @@
     var _useContext6 = React.useContext(UpdatableContext),
         setUpdatable = _useContext6.setUpdatable;
 
-    var _useContext7 = React.useContext(WalletContext),
-        wallet = _useContext7.wallet;
+    var _useContext7 = React.useContext(NavigateContext),
+        navigate = _useContext7.navigate;
+
+    var _useContext8 = React.useContext(WalletContext),
+        wallet = _useContext8.wallet;
 
-    var _useContext8 = React.useContext(TrackingContext),
-        release = _useContext8.release,
-        tracking = _useContext8.tracking,
-        initializeTracking = _useContext8.initializeTracking;
+    var _useContext9 = React.useContext(PaymentTrackingContext),
+        release = _useContext9.release,
+        tracking = _useContext9.tracking,
+        initializeTracking = _useContext9.initializeTracking;
+
+    var _useContext10 = React.useContext(TransactionTrackingContext),
+        foundTransaction = _useContext10.foundTransaction,
+        initializeTransactionTracking = _useContext10.initializeTracking;
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2313,52 +2337,59 @@
         paymentState = _useState8[0],
         setPaymentState = _useState8[1];
 
+    var paymentConfirmed = function paymentConfirmed(transaction) {
+      if (tracking != true) {
+        setClosable(true);
+      }
+
+      setPaymentState('confirmed');
+
+      if (confirmed) {
+        confirmed(transaction);
+      }
+    };
+
+    var paymentFailed = function paymentFailed(transaction, error) {
+      if (failed) {
+        failed(transaction, error);
+      }
+
+      setPaymentState('initialized');
+      setPayment(null);
+      setClosable(true);
+      setUpdatable(true);
+      getPaymentRoutes({});
+      navigate('PaymentError');
+    };
+
     var pay = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
-        var navigate, currentBlock;
+      var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+        var currentBlock;
         return regenerator.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                navigate = _ref.navigate;
                 setClosable(false);
                 setPaymentState('paying');
                 setUpdatable(false);
-                _context.next = 6;
+                _context.next = 5;
                 return web3Client.request({
                   blockchain: payment.route.transaction.blockchain,
                   method: 'latestBlockNumber'
                 });
 
-              case 6:
+              case 5:
                 currentBlock = _context.sent;
                 wallet.sendTransaction(Object.assign({}, payment.route.transaction, {
                   sent: function sent(transaction) {
+                    initializeTransactionTracking(transaction, currentBlock);
+
                     if (_sent) {
                       _sent(transaction);
                     }
                   },
-                  confirmed: function confirmed(transaction) {
-                    if (tracking != true) {
-                      setClosable(true);
-                    }
-
-                    setPaymentState('confirmed');
-
-                    if (_confirmed) {
-                      _confirmed(transaction);
-                    }
-                  },
-                  failed: function failed(transaction, error) {
-                    if (_failed) {
-                      _failed(transaction, error);
-                    }
-
-                    setPaymentState('initialized');
-                    setClosable(true);
-                    setUpdatable(true);
-                    navigate('PaymentError');
-                  }
+                  confirmed: paymentConfirmed,
+                  failed: paymentFailed
                 })).then(function (sentTransaction) {
                   if (tracking) {
                     initializeTracking(sentTransaction, currentBlock, payment.route);
@@ -2376,7 +2407,7 @@
                   }
                 });
 
-              case 8:
+              case 7:
               case "end":
                 return _context.stop();
             }
@@ -2384,8 +2415,8 @@
         }, _callee);
       }));
 
-      return function pay(_x) {
-        return _ref2.apply(this, arguments);
+      return function pay() {
+        return _ref.apply(this, arguments);
       };
     }();
 
@@ -2413,19 +2444,73 @@
         setPaymentState('confirmed');
       }
     }, [release]);
+    React.useEffect(function () {
+      if (recover) {
+        setClosable(false);
+        setUpdatable(false);
+        setPaymentState('paying');
+        setTransaction({
+          blockchain: recover.blockchain,
+          id: recover.transaction,
+          url: web3Blockchains.Blockchain.findByName(recover.blockchain).explorerUrlFor({
+            transaction: {
+              id: recover.transaction
+            }
+          })
+        });
+        var paymentToken = new web3Tokens.Token({
+          blockchain: recover.blockchain,
+          address: recover.token
+        });
+        Promise.all([paymentToken.name(), paymentToken.symbol()]).then(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+              name = _ref3[0],
+              symbol = _ref3[1];
+
+          setPayment({
+            blockchain: recover.blockchain,
+            token: recover.token,
+            name: name,
+            symbol: symbol.toUpperCase(),
+            amount: recover.amount
+          });
+        })["catch"](setError);
+      }
+    }, [recover]);
+    React.useEffect(function () {
+      if (foundTransaction && foundTransaction.id && foundTransaction.status) {
+        var newTransaction;
+
+        if (foundTransaction.id.toLowerCase() != transaction.id.toLowerCase()) {
+          newTransaction = Object.assign({}, transaction, {
+            id: foundTransaction.id,
+            url: web3Blockchains.Blockchain.findByName(transaction.blockchain).explorerUrlFor({
+              transaction: foundTransaction
+            })
+          });
+          setTransaction(newTransaction);
+        }
+
+        if (foundTransaction.status == 'success') {
+          paymentConfirmed(newTransaction || transaction);
+        } else if (foundTransaction.status == 'failed') {
+          paymentFailed(newTransaction || transaction);
+        }
+      }
+    }, [foundTransaction, transaction]);
     React.useEffect(function () {
       if (selectedRoute) {
         var fromToken = selectedRoute.fromToken;
-        selectedRoute.transaction.params;
-        Promise.all([fromToken.name(), fromToken.symbol(), fromToken.readable(selectedRoute.fromAmount)]).then(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 3),
-              name = _ref4[0],
-              symbol = _ref4[1],
-              amount = _ref4[2];
+        Promise.all([fromToken.name(), fromToken.symbol(), fromToken.readable(selectedRoute.fromAmount)]).then(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 3),
+              name = _ref5[0],
+              symbol = _ref5[1],
+              amount = _ref5[2];
 
           setPayment({
+            blockchain: selectedRoute.blockchain,
             route: selectedRoute,
-            token: selectedRoute.fromToken.address,
+            token: fromToken.address,
             name: name,
             symbol: symbol.toUpperCase(),
             amount: amount
@@ -2508,6 +2593,9 @@
     var _useContext2 = React.useContext(UpdatableContext),
         updatable = _useContext2.updatable;
 
+    var _useContext3 = React.useContext(ConfigurationContext),
+        recover = _useContext3.recover;
+
     var prepareAcceptedPayments = function prepareAcceptedPayments(accept) {
       var toAddress = _typeof(accept.receiver) == 'object' ? accept.receiver.address : accept.receiver;
       var toContract = _typeof(accept.receiver) == 'object' ? accept.receiver : undefined;
@@ -2635,7 +2723,7 @@
       };
     }, [reloadCount, allRoutes, selectedRoute, updatable]);
     React.useEffect(function () {
-      if (account && props.accept) {
+      if (account && props.accept && recover == undefined) {
         setAllRoutes(undefined);
         setSelectedRoute(undefined);
         getPaymentRoutes({});
@@ -2648,6 +2736,7 @@
       value: {
         selectedRoute: selectedRoute,
         setSelectedRoute: setSelectedRoute,
+        getPaymentRoutes: getPaymentRoutes,
         allRoutes: allRoutes,
         setAllRoutes: setAllRoutes
       }
@@ -2773,7 +2862,7 @@
   });
 
   var format = (function (input) {
-    var _float = parseFloat(input);
+    var _float = round(input);
 
     var floatToString = _float.toString();
 
@@ -3166,7 +3255,7 @@
         amount = _useContext2.amount;
         _useContext2.amountsMissing;
 
-    var _useContext3 = React.useContext(TrackingContext),
+    var _useContext3 = React.useContext(PaymentTrackingContext),
         tracking = _useContext3.tracking,
         release = _useContext3.release,
         forwardTo = _useContext3.forwardTo,
@@ -3183,8 +3272,8 @@
     var _useContext5 = React.useContext(PaymentValueContext),
         paymentValue = _useContext5.paymentValue;
 
-    var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext),
-        navigate = _useContext6.navigate;
+    var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext);
+        _useContext6.navigate;
 
     var _useContext7 = React.useContext(ClosableContext),
         close = _useContext7.close;
@@ -3290,7 +3379,7 @@
     };
 
     var approvalButton = function approvalButton() {
-      if (!payment.route.approvalRequired || payment.route.directTransfer) {
+      if (payment.route == undefined || !payment.route.approvalRequired || payment.route.directTransfer) {
         return null;
       } else if (paymentState == 'initialized') {
         return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3327,7 +3416,7 @@
         displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
       }
 
-      if (paymentState == 'initialized' || paymentState == 'approving') {
+      if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
         return /*#__PURE__*/React__default["default"].createElement("button", {
           className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
           onClick: function onClick() {
@@ -3335,9 +3424,7 @@
               return;
             }
 
-            pay({
-              navigate: navigate
-            });
+            pay();
           }
         }, "Pay ", displayedAmount);
       } else if (paymentState == 'paying') {
@@ -3478,8 +3565,11 @@
     var _useContext2 = React.useContext(PaymentContext),
         transaction = _useContext2.transaction;
 
+    var _useContext3 = React.useContext(ConfigurationContext),
+        recover = _useContext3.recover;
+
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
-      stacked: true,
+      stacked: recover ? false : true,
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
@@ -3492,7 +3582,7 @@
         className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
       }, "Payment Failed"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/React__default["default"].createElement("strong", {
+      }, recover == undefined && /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM"
       }, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS"
@@ -3505,7 +3595,7 @@
       }, "View on explorer")))),
       footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default["default"].createElement("button", {
+      }, recover == undefined && /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: function onClick() {
           return navigate('back');
@@ -3561,7 +3651,11 @@
         open = _useContext.open,
         close = _useContext.close;
 
+    var _useContext2 = React.useContext(NavigateContext),
+        setNavigate = _useContext2.setNavigate;
+
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      setNavigate: setNavigate,
       open: open,
       close: close,
       start: "DonationOverview",
@@ -3577,7 +3671,28 @@
     });
   });
 
-  var TrackingProvider = (function (props) {
+  var NavigateProvider = (function (props) {
+    var navigator;
+
+    var setNavigate = function setNavigate(_navigator) {
+      navigator = _navigator;
+    };
+
+    var navigate = function navigate(dialog) {
+      if (navigator) {
+        navigator(dialog);
+      }
+    };
+
+    return /*#__PURE__*/React__default["default"].createElement(NavigateContext.Provider, {
+      value: {
+        navigate: navigate,
+        setNavigate: setNavigate
+      }
+    }, props.children);
+  });
+
+  var PaymentTrackingProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
         errorCallback = _useContext.errorCallback;
 
@@ -3671,14 +3786,14 @@
 
     var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
       attempt = parseInt(attempt || 1, 10);
-      console.log('RETRY TRACKING ATTEMPT ', attempt);
+      console.log('RETRYING PAYMENT TRACKING ATTEMPT ', attempt);
 
       if (attempt < 3) {
         setTimeout(function () {
           startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
         }, 3000);
       } else {
-        console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+        console.log('PAYMENT TRACKING FAILED AFTER 3 ATTEMPTS!');
         setTrackingFailed(true);
 
         if (typeof errorCallback == 'function') {
@@ -3693,6 +3808,9 @@
       if (track.endpoint) {
         return fetch(track.endpoint, {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
           body: JSON.stringify(payment)
         });
       } else if (track.method) {
@@ -3712,12 +3830,12 @@
         to_token: paymentRoute.toToken.address
       }).then(function (response) {
         if (response.status == 200) {
-          console.log('TRACKING INITIALIZED');
+          console.log('PAYMENT TRACKING INITIALIZED');
         } else {
           retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
         }
       })["catch"](function (error) {
-        console.log('TRACKING FAILED', error);
+        console.log('PAYMENT TRACKING FAILED', error);
         retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       });
     };
@@ -3754,6 +3872,9 @@
       if (track.poll.endpoint) {
         fetch(track.poll.endpoint, {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
           body: JSON.stringify(payment)
         }).then(handleResponse);
       } else if (track.poll.method) {
@@ -3782,7 +3903,7 @@
       startTracking(transaction, afterBlock, paymentRoute);
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(TrackingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(PaymentTrackingContext.Provider, {
       value: {
         tracking: tracking,
         initializeTracking: initializeTracking,
@@ -3793,6 +3914,154 @@
     }, props.children);
   });
 
+  var TransactionTrackingProvider = (function (props) {
+    var _useState = React.useState(),
+        _useState2 = _slicedToArray(_useState, 2),
+        givenTransaction = _useState2[0],
+        setGivenTransaction = _useState2[1];
+
+    var _useState3 = React.useState(),
+        _useState4 = _slicedToArray(_useState3, 2),
+        foundTransaction = _useState4[0],
+        setFoundTransaction = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        polling = _useState6[0],
+        setPolling = _useState6[1];
+
+    var _useContext = React.useContext(ErrorContext);
+        _useContext.errorCallback;
+
+    var _useContext2 = React.useContext(ConfigurationContext),
+        recover = _useContext2.recover;
+
+    React.useEffect(function () {
+      if (polling) {
+        var poll = function poll() {
+          fetch("https://api.depay.fi/v2/transactions/".concat(givenTransaction.blockchain, "/").concat(givenTransaction.from.toLowerCase(), "/").concat(givenTransaction.nonce)).then(function (response) {
+            if (response.status == 200) {
+              response.json().then(function (data) {
+                if (data.status != 'pending') {
+                  setFoundTransaction({
+                    id: data.external_id,
+                    status: data.status
+                  });
+                  setPolling(false);
+                }
+              });
+            }
+          });
+        };
+
+        var pollingInterval = setInterval(poll, 5000);
+        poll();
+        return function () {
+          clearInterval(pollingInterval);
+        };
+      }
+    }, [polling]);
+
+    var createTracking = function createTracking(transaction, afterBlock, attempt) {
+      if (attempt > 3) {
+        console.log('TRANSACTION TRACKING FAILED AFTER 3 ATTEMPTS!');
+        return;
+      }
+
+      fetch('https://api.depay.fi/v2/transactions', {
+        method: 'POST',
+        headers: {
+          'X-Api-Key': apiKey,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          id: transaction.id,
+          after_block: afterBlock,
+          blockchain: transaction.blockchain,
+          sender: transaction.from.toLowerCase(),
+          nonce: transaction.nonce
+        })
+      }).then(function (response) {
+        if (response.status == 200 || response.status == 201) {
+          console.log('TRANSACTION TRACKING INITIALIZED');
+        } else {
+          console.log('TRANSACTION TRACKING FAILED', response);
+          setTimeout(function () {
+            createTracking(transaction, afterBlock, attempt + 1);
+          }, 3000);
+        }
+      })["catch"](function (error) {
+        console.log('TRANSACTION TRACKING FAILED', error);
+        setTimeout(function () {
+          createTracking(transaction, afterBlock, attempt + 1);
+        }, 3000);
+      });
+    };
+
+    var openSocket = function openSocket(transaction) {
+      var socket = new WebSocket('wss://integrate.depay.fi/cable');
+
+      socket.onopen = function (event) {
+        var msg = {
+          command: 'subscribe',
+          identifier: JSON.stringify({
+            blockchain: transaction.blockchain,
+            sender: transaction.from.toLowerCase(),
+            nonce: transaction.nonce,
+            channel: 'TransactionChannel'
+          })
+        };
+        socket.send(JSON.stringify(msg));
+      };
+
+      socket.onclose = function (event) {};
+
+      socket.onmessage = function (event) {
+        var item = JSON.parse(event.data);
+
+        if (item.type === "ping") {
+          return;
+        }
+
+        if (item.message && item.message.status && item.message.status != 'pending') {
+          setFoundTransaction(item.message);
+        }
+      };
+
+      socket.onerror = function (error) {
+        console.log('WebSocket Error: ' + error);
+      };
+    };
+
+    var initializeTracking = function initializeTracking(transaction, afterBlock) {
+      setGivenTransaction(transaction);
+
+      if (recover == undefined) {
+        createTracking(transaction, afterBlock, 1);
+      }
+
+      openSocket(transaction);
+      setPolling(true);
+    };
+
+    React.useEffect(function () {
+      if (recover) {
+        initializeTracking({
+          blockchain: recover.blockchain,
+          id: recover.transaction,
+          from: recover.sender,
+          nonce: recover.nonce
+        }, recover.afterBlock);
+      }
+    }, [recover]);
+    return /*#__PURE__*/React__default["default"].createElement(TransactionTrackingContext.Provider, {
+      value: {
+        initializeTracking: initializeTracking,
+        foundTransaction: foundTransaction
+      }
+    }, props.children);
+  });
+
   var WalletProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext);
         _useContext.setError;
@@ -3932,9 +4201,9 @@
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                     document: ensureDocument(document)
                   }, /*#__PURE__*/React__default["default"].createElement(DonationRoutingProvider, {
                     container: container,
@@ -3942,7 +4211,7 @@
                   }, /*#__PURE__*/React__default["default"].createElement(DonationStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -3993,6 +4262,9 @@
         return new Promise(function (resolve, reject) {
           fetch(endpoint, {
             method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
             body: JSON.stringify({
               message: message,
               signature: signature
@@ -4209,7 +4481,8 @@
 
   var PaymentOverviewDialog = (function (props) {
     var _useContext = React.useContext(ConfigurationContext),
-        currencyCode = _useContext.currencyCode;
+        currencyCode = _useContext.currencyCode,
+        recover = _useContext.recover;
 
     var _useContext2 = React.useContext(PaymentContext),
         payment = _useContext2.payment,
@@ -4225,7 +4498,7 @@
     var _useContext5 = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext5.navigate;
 
-    if (payment == undefined || paymentValue == undefined) {
+    if (payment == undefined || recover == undefined && paymentValue == undefined) {
       return /*#__PURE__*/React__default["default"].createElement(PaymentOverviewSkeleton, null);
     }
 
@@ -4276,7 +4549,7 @@
         className: "CardImage",
         title: payment.name
       }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
-        blockchain: payment.route.blockchain,
+        blockchain: payment.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
@@ -4306,7 +4579,11 @@
         open = _useContext.open,
         close = _useContext.close;
 
+    var _useContext2 = React.useContext(NavigateContext),
+        setNavigate = _useContext2.setNavigate;
+
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      setNavigate: setNavigate,
       open: open,
       close: close,
       start: "PaymentOverview",
@@ -4324,12 +4601,21 @@
 
   var preflight$1 = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
-      var accept;
+      var accept, recover;
       return regenerator.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              accept = _ref.accept;
+              accept = _ref.accept, recover = _ref.recover;
+
+              if (!recover) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
               accept.forEach(function (configuration) {
                 if (typeof configuration.blockchain === 'undefined') {
                   throw 'You need to set the blockchain your want to receive the payment on!';
@@ -4348,7 +4634,7 @@
                 }
               });
 
-            case 2:
+            case 4:
             case "end":
               return _context.stop();
           }
@@ -4363,16 +4649,17 @@
 
   var Payment = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, document, unmount;
+      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, document, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, document = _ref3.document;
+              accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$1({
-                accept: accept
+                accept: accept,
+                recover: recover
               });
 
             case 4:
@@ -4399,7 +4686,8 @@
                       blacklist: blacklist,
                       providers: providers,
                       track: track,
-                      fee: fee
+                      fee: fee,
+                      recover: recover
                     }
                   }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                     unmount: unmount
@@ -4408,7 +4696,7 @@
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
                   }, /*#__PURE__*/React__default["default"].createElement(PaymentAmountRoutingProvider, {
                     accept: accept,
@@ -4416,7 +4704,7 @@
                     blacklist: blacklist,
                     event: event,
                     fee: fee
-                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                     document: ensureDocument(document)
                   }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
                     container: container,
@@ -4424,7 +4712,7 @@
                   }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -4700,7 +4988,11 @@
         open = _useContext.open,
         close = _useContext.close;
 
+    var _useContext2 = React.useContext(NavigateContext),
+        setNavigate = _useContext2.setNavigate;
+
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      setNavigate: setNavigate,
       open: open,
       close: close,
       start: "SaleOverview",
@@ -4811,9 +5103,9 @@
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                     document: ensureDocument(document)
                   }, /*#__PURE__*/React__default["default"].createElement(SaleRoutingProvider, {
                     container: container,
@@ -4821,7 +5113,7 @@
                   }, /*#__PURE__*/React__default["default"].createElement(SaleStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
                 };
               });
               return _context2.abrupt("return", {