@depay/widgets 6.12.0 → 6.14.0

package/README.md

@@ -194,6 +194,25 @@ DePayWidgets.Payment({
 });
 ```
 
+#### fromToken, fromAmount + toToken
+
+In case where you want to configure payments based on the source token + amount, rather than target token and amount, you can pass `fromToken`, `fromAmount` and `toToken` to `accept`.
+
+In those cases make sure to NOT configure `token` nor `amount`!
+
+```javascript
+DePayWidgets.Payment({
+  accept: [{
+    blockchain: 'bsc',
+    fromToken: '0xe9e7cea3dedca5984780bafc599bd69add087d56',
+    fromAmount: 0.1,
+    toToken: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+    receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
+  }]
+});
+
+// This will open a payment widget to send 0.1 BUSD to the receiver, converting it to BNB along the way.
+```
 
 #### track
 
@@ -586,6 +605,29 @@ let { unmount } = await DePayWidgets.Payment({})
 unmount()
 ```
 
+#### recover
+
+`recover`
+
+Allows you to recover a previous made payment. E.g. useful if you need to continue to show a pending payment progress if user rearrives or reloads a payment page:
+
+```javascript
+DePayWidgets.Payment({
+  recover: {
+    blockchain: 'ethereum',
+    transaction: '0x081ae81229b2c7df586835e9e4c16aa89f8a15dc118fac31b7521477c53ed2a9',
+    sender: '0x317d875ca3b9f8d14f960486c0d1d1913be74e90',
+    nonce: 2865,
+    afterBlock: 14088130,
+    token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+    amount: 0.0001
+  }
+})
+
+A recovered payment still results in a confirmed or failed payment, and also calls one of those callbacks also when created with recover.
+
+```
+
 ## DePay Sales
 
 DePay Sales allows you to sell tokens directly from your website or dApp with automatic any-to-any payment conversion (so people can use any token when buying your token directly off your website or dApp).

package/dist/esm/index.bundle.js

@@ -1599,6 +1599,8 @@ class Dialog$1 extends react.Component {
   constructor(props) {
     super(props);
 
+    this.handler = this.onKeyDown.bind(this);
+
     this.state = {
       open: true,
     };
@@ -1632,22 +1634,22 @@ class Dialog$1 extends react.Component {
         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
           )
         )
@@ -49482,7 +49484,7 @@ var CardStyle = (function (style) {
 });
 
 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) {
@@ -61716,20 +61718,22 @@ let route$8 = ({
 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;
@@ -61758,8 +61762,12 @@ var ChangableAmountProvider = (function (props) {
       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) {
@@ -61795,6 +61803,10 @@ var ChangableAmountProvider = (function (props) {
   };
 
   react.useEffect(function () {
+    if (recover) {
+      return;
+    }
+
     if (amountsMissing && account && conversionRate) {
       getAmounts().then(function (amounts) {
         setAcceptWithAmount(props.accept.map(function (configuration, index) {
@@ -61813,7 +61825,7 @@ var ChangableAmountProvider = (function (props) {
         }));
       })["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) {
@@ -62432,10 +62444,12 @@ var PaymentProvider = (function (props) {
   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,
@@ -62501,8 +62515,10 @@ var PaymentProvider = (function (props) {
     }
 
     setPaymentState('initialized');
+    setPayment(null);
     setClosable(true);
     setUpdatable(true);
+    getPaymentRoutes({});
     navigate('PaymentError');
   };
 
@@ -62588,6 +62604,39 @@ var PaymentProvider = (function (props) {
       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;
@@ -62612,16 +62661,16 @@ var PaymentProvider = (function (props) {
   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
@@ -67633,14 +67682,16 @@ let transactionValue = ({ paymentRoute, exchangeRoute })=> {
 
 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 = [];
@@ -67700,22 +67751,43 @@ function convertToRoutes({ tokens, accept }) {
   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 }) {
@@ -67771,14 +67843,25 @@ let addExchangeRoutes = async (routes) => {
   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) => {
@@ -67808,8 +67891,10 @@ let filterInsufficientBalance = async(routes) => {
   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))
     }
   })
 };
@@ -67962,6 +68047,9 @@ var PaymentRoutingProvider = (function (props) {
   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;
@@ -68089,7 +68177,7 @@ var PaymentRoutingProvider = (function (props) {
     };
   }, [reloadCount, allRoutes, selectedRoute, updatable]);
   react.useEffect(function () {
-    if (account && props.accept) {
+    if (account && props.accept && recover == undefined) {
       setAllRoutes(undefined);
       setSelectedRoute(undefined);
       getPaymentRoutes({});
@@ -68102,6 +68190,7 @@ var PaymentRoutingProvider = (function (props) {
     value: {
       selectedRoute: selectedRoute,
       setSelectedRoute: setSelectedRoute,
+      getPaymentRoutes: getPaymentRoutes,
       allRoutes: allRoutes,
       setAllRoutes: setAllRoutes
     }
@@ -70458,7 +70547,7 @@ var Footer = (function () {
   };
 
   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", {
@@ -70495,7 +70584,7 @@ var Footer = (function () {
       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() {
@@ -70644,8 +70733,11 @@ var PaymentErrorDialog = (function () {
   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"
     }),
@@ -70658,7 +70750,7 @@ var PaymentErrorDialog = (function () {
       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"
@@ -70671,7 +70763,7 @@ var PaymentErrorDialog = (function () {
     }, "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');
@@ -71009,9 +71101,12 @@ var TransactionTrackingProvider = (function (props) {
   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) {
@@ -71025,7 +71120,10 @@ var TransactionTrackingProvider = (function (props) {
             });
           }
         });
-      }, 5000);
+      };
+
+      var pollingInterval = setInterval(poll, 5000);
+      poll();
       return function () {
         clearInterval(pollingInterval);
       };
@@ -71105,11 +71203,25 @@ var TransactionTrackingProvider = (function (props) {
 
   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,
@@ -71119,8 +71231,11 @@ var TransactionTrackingProvider = (function (props) {
 });
 
 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),
@@ -71149,7 +71264,7 @@ var WalletProvider = (function (props) {
     }
   };
 
-  if (walletState == 'connected') {
+  if (walletState == 'connected' || recover != undefined) {
     return /*#__PURE__*/react.createElement(WalletContext.Provider, {
       value: {
         account: account,
@@ -71537,7 +71652,8 @@ var PaymentOverviewSkeleton = (function (props) {
 
 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,
@@ -71553,7 +71669,7 @@ var PaymentOverviewDialog = (function (props) {
   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);
   }
 
@@ -71604,7 +71720,7 @@ var PaymentOverviewDialog = (function (props) {
       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"
@@ -71656,12 +71772,21 @@ var PaymentStack = (function (props) {
 
 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!';
@@ -71671,16 +71796,20 @@ var preflight$1 = /*#__PURE__*/function () {
                 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();
         }
@@ -71695,16 +71824,17 @@ var preflight$1 = /*#__PURE__*/function () {
 
 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:
@@ -71731,7 +71861,8 @@ var Payment = /*#__PURE__*/function () {
                     blacklist: blacklist,
                     providers: providers,
                     track: track,
-                    fee: fee
+                    fee: fee,
+                    recover: recover
                   }
                 }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
                   unmount: unmount