@depay/widgets 6.12.0 → 6.14.0

package/dist/umd/index.bundle.js

@@ -1605,6 +1605,8 @@
     constructor(props) {
       super(props);
 
+      this.handler = this.onKeyDown.bind(this);
+
       this.state = {
         open: true,
       };
@@ -1638,22 +1640,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.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 54}}
-          , react.createElement('style', {__self: this, __source: {fileName: _jsxFileName$2, lineNumber: 55}}, style)
-          , react.createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 56}}
-            , react.createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 57}}
-              , react.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 58}} )
+        react.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 56}}
+          , react.createElement('style', {__self: this, __source: {fileName: _jsxFileName$2, lineNumber: 57}}, style)
+          , react.createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 58}}
+            , react.createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 59}}
+              , react.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 60}} )
               , this.props.children
             )
           )
@@ -49488,7 +49490,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) {
@@ -61722,20 +61724,22 @@
   var ChangableAmountProvider = (function (props) {
     var configurationsMissAmounts = function configurationsMissAmounts(configurations) {
       return !configurations.every(function (configuration) {
-        return typeof configuration.amount != 'undefined';
+        return typeof configuration.amount != 'undefined' || typeof configuration.fromAmount != 'undefined';
       });
     };
 
-    var _useState = react.useState(configurationsMissAmounts(props.accept)),
+    var _useContext = react.useContext(ConfigurationContext),
+        amountConfiguration = _useContext.amount;
+        _useContext.toAmount;
+        var 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;
@@ -61764,8 +61768,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) {
@@ -61801,6 +61809,10 @@
     };
 
     react.useEffect(function () {
+      if (recover) {
+        return;
+      }
+
       if (amountsMissing && account && conversionRate) {
         getAmounts().then(function (amounts) {
           setAcceptWithAmount(props.accept.map(function (configuration, index) {
@@ -61819,7 +61831,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) {
@@ -62438,10 +62450,12 @@
     var _useContext2 = react.useContext(ConfigurationContext),
         _sent = _useContext2.sent,
         confirmed = _useContext2.confirmed,
-        failed = _useContext2.failed;
+        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,
@@ -62507,8 +62521,10 @@
       }
 
       setPaymentState('initialized');
+      setPayment(null);
       setClosable(true);
       setUpdatable(true);
+      getPaymentRoutes({});
       navigate('PaymentError');
     };
 
@@ -62594,6 +62610,39 @@
         setPaymentState('confirmed');
       }
     }, [release]);
+    react.useEffect(function () {
+      if (recover) {
+        setClosable(false);
+        setUpdatable(false);
+        setPaymentState('paying');
+        setTransaction({
+          blockchain: recover.blockchain,
+          id: recover.transaction,
+          url: Blockchain.findByName(recover.blockchain).explorerUrlFor({
+            transaction: {
+              id: recover.transaction
+            }
+          })
+        });
+        var paymentToken = new 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;
@@ -62618,16 +62667,16 @@
     react.useEffect(function () {
       if (selectedRoute) {
         var fromToken = selectedRoute.fromToken;
-        selectedRoute.transaction.params;
-        Promise.all([fromToken.name(), fromToken.symbol(), fromToken.readable(selectedRoute.fromAmount)]).then(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 3),
-              name = _ref3[0],
-              symbol = _ref3[1],
-              amount = _ref3[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
@@ -67639,14 +67688,16 @@
 
   function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
   class PaymentRoute {
-    constructor({ blockchain, fromToken, toToken, toDecimals, toAmount, fromAddress, toAddress, toContract }) {
+    constructor({ blockchain, fromAddress, fromToken, fromDecimals, fromAmount, toToken, toDecimals, toAmount, toAddress, toContract }) {
       this.blockchain = blockchain;
+      this.fromAddress = fromAddress;
       this.fromToken = fromToken;
+      this.fromAmount = _optionalChain([fromAmount, 'optionalAccess', _ => _.toString, 'call', _2 => _2()]);
+      this.fromDecimals = _optionalChain([fromDecimals, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]);
       this.fromBalance = 0;
       this.toToken = toToken;
+      this.toAmount = _optionalChain([toAmount, 'optionalAccess', _5 => _5.toString, 'call', _6 => _6()]);
       this.toDecimals = toDecimals;
-      this.toAmount = _optionalChain([toAmount, 'optionalAccess', _ => _.toString, 'call', _2 => _2()]);
-      this.fromAddress = fromAddress;
       this.toAddress = toAddress;
       this.toContract = toContract;
       this.exchangeRoutes = [];
@@ -67706,22 +67757,43 @@
     return Promise.all(tokens.map(async (fromToken)=>{
       let relevantConfigurations = accept.filter((configuration)=>(configuration.blockchain == fromToken.blockchain));
       return Promise.all(relevantConfigurations.map(async (configuration)=>{
-        let blockchain = configuration.blockchain;
-        let toToken = new Token({ blockchain, address: configuration.token });
-        let toDecimals = await toToken.decimals();
-        let toAmount = (await toToken.BigNumber(configuration.amount)).toString();
-        return new PaymentRoute({
-          blockchain,
-          fromToken: fromToken,
-          toToken: toToken,
-          toAmount: toAmount,
-          toDecimals: toDecimals,
-          fromAddress: configuration.fromAddress,
-          toAddress: configuration.toAddress,
-          toContract: configuration.toContract
-        })
+        if(configuration.token && configuration.amount) {
+          let blockchain = configuration.blockchain;
+          let toToken = new Token({ blockchain, address: configuration.token });
+          let toDecimals = await toToken.decimals();
+          let toAmount = (await toToken.BigNumber(configuration.amount)).toString();
+
+          return new PaymentRoute({
+            blockchain,
+            fromToken,
+            toToken,
+            toAmount,
+            toDecimals,
+            fromAddress: configuration.fromAddress,
+            toAddress: configuration.toAddress,
+            toContract: configuration.toContract
+          })
+        } else if(configuration.fromToken && configuration.fromAmount && fromToken.address.toLowerCase() == configuration.fromToken.toLowerCase()) {
+          let blockchain = configuration.blockchain;
+          let fromAmount = (await fromToken.BigNumber(configuration.fromAmount)).toString();
+          let fromDecimals = await fromToken.decimals();
+          let toToken = new Token({ blockchain, address: configuration.toToken });
+          let toDecimals = await toToken.decimals();
+          
+          return new PaymentRoute({
+            blockchain,
+            fromToken,
+            fromAmount,
+            fromDecimals,
+            toToken,
+            toDecimals,
+            fromAddress: configuration.fromAddress,
+            toAddress: configuration.toAddress,
+            toContract: configuration.toContract
+          })
+        }
       }))
-    })).then((routes)=> routes.flat())
+    })).then((routes)=> routes.flat().filter(el => el))
   }
 
   async function route({ accept, whitelist, blacklist, apiKey, event, fee }) {
@@ -67777,14 +67849,25 @@
     return await Promise.all(
       routes.map((route) => {
         if(route.directTransfer) { return [] }
-        return route$8({
-          blockchain: route.blockchain,
-          tokenIn: route.fromToken.address,
-          tokenOut: route.toToken.address,
-          amountOutMin: route.toAmount,
-          fromAddress: route.fromAddress,
-          toAddress: route.toAddress
-        })
+        if(route.toToken && route.toAmount) {
+          return route$8({
+            blockchain: route.blockchain,
+            tokenIn: route.fromToken.address,
+            tokenOut: route.toToken.address,
+            amountOutMin: route.toAmount,
+            fromAddress: route.fromAddress,
+            toAddress: route.toAddress
+          })
+        } else if(route.fromToken && route.fromAmount) {
+          return route$8({
+            blockchain: route.blockchain,
+            tokenIn: route.fromToken.address,
+            tokenOut: route.toToken.address,
+            amountIn: route.fromAmount,
+            fromAddress: route.fromAddress,
+            toAddress: route.toAddress
+          })
+        }
       }),
     ).then((exchangeRoutes) => {
       return routes.map((route, index) => {
@@ -67814,8 +67897,10 @@
     return routes.filter((route) => {
       if (route.fromToken.address.toLowerCase() == route.toToken.address.toLowerCase()) {
         return BigNumber.from(route.fromBalance).gte(BigNumber.from(route.toAmount))
-      } else {
+      } else if(route.fromAmount && route.toAmount) {
         return BigNumber.from(route.fromBalance).gte(BigNumber.from(route.exchangeRoutes[0].amountInMax))
+      } else if(route.exchangeRoutes[0] && route.exchangeRoutes[0].amountIn) {
+        return BigNumber.from(route.fromBalance).gte(BigNumber.from(route.exchangeRoutes[0].amountIn))
       }
     })
   };
@@ -67968,6 +68053,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;
@@ -68095,7 +68183,7 @@
       };
     }, [reloadCount, allRoutes, selectedRoute, updatable]);
     react.useEffect(function () {
-      if (account && props.accept) {
+      if (account && props.accept && recover == undefined) {
         setAllRoutes(undefined);
         setSelectedRoute(undefined);
         getPaymentRoutes({});
@@ -68108,6 +68196,7 @@
       value: {
         selectedRoute: selectedRoute,
         setSelectedRoute: setSelectedRoute,
+        getPaymentRoutes: getPaymentRoutes,
         allRoutes: allRoutes,
         setAllRoutes: setAllRoutes
       }
@@ -70464,7 +70553,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.createElement("div", {
@@ -70501,7 +70590,7 @@
         displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
       }
 
-      if (paymentState == 'initialized' || paymentState == 'approving') {
+      if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
         return /*#__PURE__*/react.createElement("button", {
           className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
           onClick: function onClick() {
@@ -70650,8 +70739,11 @@
     var _useContext2 = react.useContext(PaymentContext),
         transaction = _useContext2.transaction;
 
+    var _useContext3 = react.useContext(ConfigurationContext),
+        recover = _useContext3.recover;
+
     return /*#__PURE__*/react.createElement(Dialog, {
-      stacked: true,
+      stacked: recover ? false : true,
       header: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
@@ -70664,7 +70756,7 @@
         className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
       }, "Payment Failed"), /*#__PURE__*/react.createElement("div", {
         className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/react.createElement("strong", {
+      }, recover == undefined && /*#__PURE__*/react.createElement("strong", {
         className: "FontSizeM"
       }, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopS"
@@ -70677,7 +70769,7 @@
       }, "View on explorer")))),
       footer: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/react.createElement("button", {
+      }, recover == undefined && /*#__PURE__*/react.createElement("button", {
         className: "ButtonPrimary",
         onClick: function onClick() {
           return navigate('back');
@@ -71015,9 +71107,12 @@
     var _useContext = react.useContext(ErrorContext);
         _useContext.errorCallback;
 
+    var _useContext2 = react.useContext(ConfigurationContext),
+        recover = _useContext2.recover;
+
     react.useEffect(function () {
       if (polling) {
-        var pollingInterval = setInterval(function () {
+        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) {
@@ -71031,7 +71126,10 @@
               });
             }
           });
-        }, 5000);
+        };
+
+        var pollingInterval = setInterval(poll, 5000);
+        poll();
         return function () {
           clearInterval(pollingInterval);
         };
@@ -71111,11 +71209,25 @@
 
     var initializeTracking = function initializeTracking(transaction, afterBlock) {
       setGivenTransaction(transaction);
-      createTracking(transaction, afterBlock, 1);
+
+      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.createElement(TransactionTrackingContext.Provider, {
       value: {
         initializeTracking: initializeTracking,
@@ -71125,8 +71237,11 @@
   });
 
   var WalletProvider = (function (props) {
-    var _useContext = react.useContext(ErrorContext);
-        _useContext.setError;
+    var _useContext = react.useContext(ConfigurationContext),
+        recover = _useContext.recover;
+
+    var _useContext2 = react.useContext(ErrorContext);
+        _useContext2.setError;
 
     var _useState = react.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -71155,7 +71270,7 @@
       }
     };
 
-    if (walletState == 'connected') {
+    if (walletState == 'connected' || recover != undefined) {
       return /*#__PURE__*/react.createElement(WalletContext.Provider, {
         value: {
           account: account,
@@ -71543,7 +71658,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,
@@ -71559,7 +71675,7 @@
     var _useContext5 = react.useContext(NavigateStackContext),
         navigate = _useContext5.navigate;
 
-    if (payment == undefined || paymentValue == undefined) {
+    if (payment == undefined || recover == undefined && paymentValue == undefined) {
       return /*#__PURE__*/react.createElement(PaymentOverviewSkeleton, null);
     }
 
@@ -71610,7 +71726,7 @@
         className: "CardImage",
         title: payment.name
       }, /*#__PURE__*/react.createElement(TokenImage, {
-        blockchain: payment.route.blockchain,
+        blockchain: payment.blockchain,
         address: payment.token
       })), /*#__PURE__*/react.createElement("div", {
         className: "CardBody"
@@ -71662,12 +71778,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!';
@@ -71677,16 +71802,20 @@
                   throw 'You need to set a supported blockchain!';
                 }
 
-                if (typeof configuration.token === 'undefined') {
+                if (typeof configuration.token === 'undefined' && typeof configuration.fromToken === 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
                   throw 'You need to set the token you want to receive as payment!';
                 }
 
+                if (typeof configuration.token === 'undefined' && typeof configuration.fromToken !== 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
+                  throw 'You need to set the fromToken, fromAmount and toToken!';
+                }
+
                 if (typeof configuration.receiver === 'undefined') {
                   throw 'You need to set the receiver address that you want to receive the payment!';
                 }
               });
 
-            case 2:
+            case 4:
             case "end":
               return _context.stop();
           }
@@ -71701,16 +71830,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:
@@ -71737,7 +71867,8 @@
                       blacklist: blacklist,
                       providers: providers,
                       track: track,
-                      fee: fee
+                      fee: fee,
+                      recover: recover
                     }
                   }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
                     unmount: unmount