@depay/widgets 6.11.0 → 6.13.0

package/dist/esm/index.js

@@ -10,10 +10,10 @@ import { route } from '@depay/web3-exchanges';
 import { Token } from '@depay/web3-tokens';
 import { Currency } from '@depay/local-currency';
 import { setProviderEndpoints, request, provider } from '@depay/web3-client';
+import { Blockchain } from '@depay/web3-blockchains';
 import { route as route$1 } from '@depay/web3-payments';
 import Slider from 'react-rangeslider';
 import { TokenImage } from '@depay/react-token-image';
-import { Blockchain } from '@depay/web3-blockchains';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1457,6 +1457,8 @@ class Dialog extends React.Component {
   constructor(props) {
     super(props);
 
+    this.handler = this.onKeyDown.bind(this);
+
     this.state = {
       open: true,
     };
@@ -1490,22 +1492,22 @@ class Dialog 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, lineNumber: 54}}
-        , React.createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 55}}, style)
-        , React.createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
-          , React.createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}
-            , React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}} )
+      React.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
+        , React.createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
+        , React.createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
+          , React.createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}}
+            , React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 60}} )
             , this.props.children
           )
         )
@@ -1682,7 +1684,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) {
@@ -2004,7 +2006,7 @@ var round = (function (input) {
       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));
@@ -2023,16 +2025,17 @@ var ChangableAmountProvider = (function (props) {
     });
   };
 
-  var _useState = useState(configurationsMissAmounts(props.accept)),
+  var _useContext = useContext(ConfigurationContext),
+      amountConfiguration = _useContext.amount,
+      recover = _useContext.recover;
+
+  var _useState = useState(recover == undefined ? configurationsMissAmounts(props.accept) : false),
       _useState2 = _slicedToArray(_useState, 2),
       amountsMissing = _useState2[0],
       setAmountsMissing = _useState2[1];
 
-  var _useContext = useContext(WalletContext),
-      account = _useContext.account;
-
-  var _useContext2 = useContext(ConfigurationContext),
-      amountConfiguration = _useContext2.amount;
+  var _useContext2 = useContext(WalletContext),
+      account = _useContext2.account;
 
   var _useContext3 = useContext(ConversionRateContext),
       conversionRate = _useContext3.conversionRate;
@@ -2061,8 +2064,12 @@ var ChangableAmountProvider = (function (props) {
       setMaxAmount = _useState10[1];
 
   useEffect(function () {
+    if (recover) {
+      return;
+    }
+
     setAmountsMissing(configurationsMissAmounts(props.accept));
-  }, [props.accept]);
+  }, [props.accept, recover]);
 
   var getAmounts = function getAmounts() {
     return new Promise(function (resolve, reject) {
@@ -2098,6 +2105,10 @@ var ChangableAmountProvider = (function (props) {
   };
 
   useEffect(function () {
+    if (recover) {
+      return;
+    }
+
     if (amountsMissing && account && conversionRate) {
       getAmounts().then(function (amounts) {
         setAcceptWithAmount(props.accept.map(function (configuration, index) {
@@ -2116,7 +2127,7 @@ var ChangableAmountProvider = (function (props) {
         }));
       })["catch"](setError);
     }
-  }, [amountsMissing, account, conversionRate, amount]);
+  }, [amountsMissing, account, conversionRate, amount, recover]);
   useEffect(function () {
     if (amountsMissing && maxRoute) {
       maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
@@ -2230,6 +2241,8 @@ var ConversionRateProvider = (function (props) {
 
 var DonationRoutingContext = /*#__PURE__*/React.createContext();
 
+var NavigateContext = /*#__PURE__*/React.createContext();
+
 var QuestionsGraphic = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAHQCAMAAADgcCJ6AAAAXVBMVEVHcEwiGxq6jYEwExPTf2RKx+4uEhLSf2PSfmMvEhJKx+7UgWYvEhIvEhJOJyJrOzGHTkCdX023Y07Ab1bOd1/SgGPXhWhKx+7gm3roq5j/u6nx3mbu1MT37OL///+EeM1aAAAADXRSTlMADSZMUmqDg6y4udfdNJi0SgAAHCNJREFUeNrsndl6qjAUhU1KBIM4hej7v2lBxSBTgATF7PXflc+eVtfaY6BnAwAAAAAAAAAAAAAAAOBH4ELKW4GUgm8AMQr1bzXgAVpU6r97YANowO/ywwJUMfK3LYBCEDz8NgiSQOCImwW5AQFT6A8HEOapP6oAUQr94QDCiNtI2AYECHvKizaAKPI2GqwDAqRYACAFUKboAJACKPOUFoMAUXhvuhdCogaEjxg8AOQSNSBwhCXTC9SAsBG2w1+BGhA0oq0/a7wCBggZYV34MhggZLh91H9rBDcgMFr9HwxAi2aTBwMQg1nnfIkeIGiEbcxHExg4Ylh/gUVQ6HBpFgBtJAwQPlwIwXryA+4KIw3HJpg2EmdBpCkKALYAhMFhMG3EDQmAMgJ3BJJG4IZA0gg8GUYaiWcCKMMkHgmgDIf+pBF4JIg00J82EvpThkF/0nA8Ekwajr8SShqBB8JJg/afNhzpnzQc4U8a6E8c2Uj/OP2lBW7/o43A4T9tkP5pI7H8IQ2H/rTB34BYEYxzHjXgfNGqzKH/dykVj+MkSdM07ydNkySOogUadIn+/xtUqudTSZPYqw045v8PUkR7qbouuPajS4ZtULhg4wcB/ReHl8GepoXo07DYIPViAjQAi8CKFP+o6/rqyKALkoh5qwBIAM7pvdLcWfQpJkgiPxUACWAG/uLczjIekJgAZlX0ZIk4d/BAOrMUMCSA8ap/KNLneiCeE8ICCWAoPKLorvp1VXi1gEAC6A72FcT6AP0WmFoIJEYAM7fFydqCfUYaiCcagPqfgCpk/yXdRzggjSYZgGgCKMP9J3WvoS59QyGbYABaHQD/rTxv43xSrklA0hgB7vuaYHQ35MfjxS0J8LCfAQpVeMP50G2BlI/+jEJUP3zha0kg67aAj5PCn2Pts5xSlwcqr0moSvLZe4dTlh2V+0D426ww5B8HeIUyuta3G9RLf3Mpn/eTLocsO3U1AhsClHP8GkM+r4mtK0tc6rzkq7ti5g8rHHA4dzhg0ZtJv8yqkv3zuF6bC12y5k0DtF2ha//klJ9/zIo60NEKhuiAQvl1ZXut+vO6udp2hckAPcliSl9QOuBwCdsBbAV1XufqQd4d7PmQAa7q7Vr10qFXKj3FAdnJ5oD2fxf2Ew7h31e+3cW9rlmzvfn+l33y69vFrgQw1QKnrLMMpP0nwXL9pwBfDPoy1isJOrXOhy6aq6r6dvvRTl9WmZIDDmrsLCDWfRD87aDvDGFlzfb6XdLJw73TaHDMSi7jHCBW+zjQ56XXyhLsun7RR7oe8StNNYBxwHnURkiu8HkA9nHpTQjbe/P2K839Ofey7k39xiIhH2+bw90BpzFb4YlPhLK/giUbRh59RvtCrCfXPq3bF9tNYDEFLE7RhUxdDuU9DuBOBmDbXfZgv/vbLACPk+tnyDunc1u51+9Pa33ydnBdXy4pe0N5yTodkAwaQFjkz+rsfKeBKF4w8h8bOvP1hF3sM/zUJ2J93HsZVQ9OD5nO1jZAjmwC/7IGe59JIFow9HVtvB4O9iW6OP+ocb/isdsBvP+JEDGsfxtfDuBLxn7nyZvuC/ZHrHtu4zxjKpK9EWxPg2n74x+p/1IO8B78WrdOY9rZ/jeC3eLofEwbcFC2IsCElNKyBdplnbj3AZHX4Ldle9Ucr9dT2Se8ybG7wdPTAa0iMJ2/rJvdquQfyvbtD+yjTbxXam9pVBE4NovAdMoBwH8R4O7yP2ax4dbO+Uab1aFNnhtTBLKz802C22yBFBC7bshUcz/Xk+2VWmBB912qtzpuEsgabQBzMsB+t9ubr74V/tZNTijRPpgElO1TyjrbgNihB9iy+9cvC7DvhH/3JoeO/o8MaH+T56dMJ9c+cNdY/7G9kwFYMu8hSN1zq5252/oH5viPcqiKwPzbhI3g+207J7BPpH/9OhHLCWZ7B0wKOLqmgE3zELAywPL6a0U92/tIAWffTwrsZxuAO0z3l0YTpHLIXyZIbR0FD84p4B1WZYDF9W/0e6BzIMqtKeDk93GxbWWAhfSvWRrlfhjLJ3PJOvvAd+Fmz4X7Jer/Y8WTB7zK80nVD2tbCjh6TAHb11pg6nemdvV7bsDDcDdcItXQINA+GE5dwn9vjgM973/yeroP4Nzmn70zW05eB4Jw7KQIKTCLZKkMP877P+ZhV0LskY1nRuJUf7e5y7Q13aMFDUJEji4BLM8GvH9V1bMLwIfvAfF++hJgyG3hE2Z6EnyfLavAF7cBrGH4n6COfDGuurKemASL2XLaudD5GAFg1R/dBGKbgpWdYAPDmfCw/jM3gKNW4fclgoDtXAIW48o//VBwMSQBwu8/Qz0wCVb2ORtYfFWPzAqZHWCH4gtMA+9JcBOxgUOvBMwUtgDAyM1yR/y16twReO7zX86uiz+3AwRy3G3gdnQPKJa/jP/128cC8FpsO23gfFD9J3/6PGfAwCSqThs4pv5T7wN7kJJ1sIGjesAXU/nfPjxIybbTBn5G/T/H/Y8z0++AgCE4N6YHLIYd+1lOvwIIC6jCaRxgx/SAMrLtz1V/WEAVnDlRs/WAgq3+6AAq1MSeUN3ZA+a0ANjqjw6ggqW2hVedPSDSApbVjKP+6AA6OOpw2ObeA1jOBWEMnCPUtrANPYDtbCimQJlB9oDqxnaACShYX4PEFEiJmuoB6879gJ4BEM/0BxZAG3NhqgkouJ6AggVQxg4yASZmAt5vh/6YwBRAjSCAv1RdQXCuIABMAfSogweYYAKKJWsLgAdUxFlbxy6IVNHtgOKL8y1geMA8MMEExEdBBdfnDw+YDS6YAN1REDxgJqzuJoDpmjAE8FqsOycBb+J4kAfb6oblfC4IKfBVsGE7QHNDcGgKbHb7w37ngRzVjbWmCxwmgN3h+8LBAz95IGwd6QJXk1+KYB4D7NrvO23jweQNAUu6wErTBX7GF/9z+QPoA0L7AcEFGkUXOI9+/seaQwF8mDM2Gxc4H1p/dAEergLIxgUuIuv/r9LDCU7HXMjGBS4G9H80AUbCqRDCBSoOg2kB3NLfYxPwQOBoaNgRtnoxIGoAsATwUvcLYBtcoF4M8BTnBgAXwIrrF4ANO8J6McAT7L978eBZ7JAYkIcAvvtBEpzYA2o6BujlwFEOILD3gP+dgBAD9HJgxAHABEjgXOxgqNXKgUV0BoQgqMePGKCVAwt6BgAXqMqPGKCVAwuyA8AF6uL0Y0AR6wAYBWmiHwOK/iEABKCPvgBK0gIgByqjnwNL0gIgByoTcqBRyoFl/xgQAhDDnQ+GZpEDy94xIAQgx+VgaBY5EAJIgDNnXA45sOwNARCAGGFHmIgBqQVwgADEuArA5pADIYAE3ASQQw6EAFJwFUAO+4Fl/xgAgyAxzIUcciCxAmAULIbtFYAJORAC+P/SL4A65ECdQQAlAGwHS3F1gTmcC6UEgAMhYlxHgRkMAqhBEI6EieFOCnD0fqDOIKB/FIwUKIpzsQ1hqzIIKHEgKC9+bAinFYCHB0zCj0GAyiSIOBACC5AC7UEAcSQMFiAF2oOAsv9iGCxAErIRgEcHSILyIKAkbgZhJygFK91BQEncDUQGEOR8LjSDSVCJ90HS0H8iQHcSRAlgh30AMdyQEwGpBeBbRAApanPGJZ8EkQJo0ACk6H8rzJ4TwGq92Zg71jL+SFRcAIE9IqAQfQJwtd1stuYvc6EkWHqSAx4KluEqAOucq4/YE4ZmLjINKj1Ni+9fAFdb8wQSYbCM/lgA+j8f7vStm+cRCAOlj3H4UX4s/xM4fvWT4VdA6aM0Fwm0e5T/eRxD9UW6QDnsF8N2KH4O5T/CHQbws4EK8JX/CPNEAAIQxxlWmG0ABCBNbZjhHQcUHojCXn/mJQACkIW//sxLAAQgikT9eaMgBCAJs/+78cYIBCAJa/4TmgV4IIZIA+DuAR5IIdQAmHuAH8gO4+BMGgBzDvCB+H4Q7gOMwYjB2QP8AA44EJqRA2CeBQ34/FscCWFfAKzzTdN4Z5ObAB+lxbUwbgvo/wVcYhOwiK7/uBbA3AEu5Q+4pJOARcz941w4bwaw//5iE7rARcQA4G4wrwU41p9BAYwucB5pALgbyGoBjvXnUICaABpcDmS1AKH+jySLAXP6bhhuB7JagKZXAE0qAXzSERAvxHAKwJ1KzdIE+I6G0gLACyGsHvBe7UN7/IweFJBoEPBJWgA8EsYpgLsDaK+t9PcSkKEAdngkijMENKH+F34JwKcRwAcpADwSxCmAW6lv/8YHBWQogD0EICCA9nUEgBWAUwD2QQCPLsAmEUAJAUjQJYD6UQAPScAmiYElmQIgAMYUUDOuAG98eAoIgFEA9jYEeCEBtIiB/AJgSAH/sXetvY3jMDC9HoorttaLkpAEzf7/n3lxXnQcR7ZjUpSSzLdboOjecizNjCiKcm7gn6QIeAdBhFFwLwfqJ0Eyp4FpAsT3rFhCAqyvGNAPg9cyDSEjBPh9HwbRHQcHPAu4fP8IkGkJG2sIeEsAOh942ANIOgLoYoAxAsTt+zCQTAW6mKh/kGkHaE+D0ti9TSCZCHBECwClBhwlwPqtAMhEgAOafhBKDbj6N45g8/weMFitlVJaWx+pENycniAv1A6CBEhg8+T1B90gtItEgGEGLBcAtBJgAgHi5pnrH3RzDQWRBN5NZgCIXQuZOClwvXva1wJANTcwkQRuGLDuNwSD3M3AyVOC1r+73e4Jp4W7Zgg6UsC7KRRYS94Le/khMdA0jAxI3Q5fr9vir4P8tODVn/iy8Kf1n2kX4BkRQb0AvDIBdHMXJGbAMYDyJPiI/+Krwvbkv+r+RyQAxxJAqwBfmwBXBW+97s4SbwL0g8IozwEvWfCLwjUIfb6sQ7sEkI8KJBcAxREAjN7DWKI0ZqICULvLSWdzho0EIN4ESE+BMAosBmA6NTEh8qJB/Pl7gaK1gqSbAEv9yyFAP5RVJN/gpB3gFwmAHIwkIGQAx/pf0Ksx7taUK7rDuVuYBrFDAqAOpPnldDKAqf6lEOD4D890MDMEfWcFoBUBdAzgWf+LyYJtMww+Bug7GoCaADQMAM+1AJQRBZ435Iy7gO7+Fux3JE4CiN6NBP/cBAiqaVjPZcZyYHPud6Q+DyBRguA9JwEKiAKv9b/Sez6Qr8RDIhChfw9JIPmBEEEeAP4APg0gTwC4KcWvpY3kRlQH0o6LeQEeLz83AeSjQD2wGG94CjEkO/LoT+8egPGenwDiSZAflGOWeQkIzTCIg6AFFDCqaV6CAKZBYAPqjutTvF53sqpPD24ibFv9Jg8BxJOgbiX+IjSHGktFD4wS4IIwgQNwbFTPRgDxxyNVdwdAaM5v8fh7U+A7iwrewx5DlQfvQ/s3y0oA6SgwNHdWAGYRcNx6WLsCRxEuwD/LTwDhJAiawVR+xyjHxpcAxbcAzPqLQQ4CCAcBcLXzogvgJwDkVgBvAoyVAW3AhtOQnWFzWoByCSCcBPnet/f3JpSdnbpZo9WkhhJTZP1zE0A6CGh60KZ3NjA9aWkrP+tA15ZY/6hfiwCqWRjJ7MuuFRZ+FnNAFbb/XxPA5SCAdBKkm0WRTLj/8/4BN6jZOhCGXGARBJBOgmyThn/4x6fVMliFvcgZy39oE4ACCCCdBMUmCRXT0KM/OY7grDHW5TX/3rXwBRBAOAmKZlEor3Id6FIDXAuYQADejiDxICD65AIwXUIs28zXe2QdgeGKIYBwEJBeAuxjDeUGZhV/sz1js8nFgjcBEIuaQvVNc9fMq4XrbQ9ZKBDKIYB0EBAjLDqUsVod7ve3t0oTtU+VX4ACBRFAOgjYA3JfCxiuP4J/Ht4kAkAWAkgHAS1AFVX/7ZZ9JvqJAL4AAogHAS28vt3/+X35of5Ca8A8AjDMBiknCDjCqpzXw4/YniChA9wBYUgT5yaAdBCAag6//hzlj3v3J7cEeNcilkAAeR94AViTMZTdthBTAS0DQpoAPg8B5H2gDNayBEBMIAD9fLiyCcC9Ab8JUFgQMBTLsoeybwKU5ANP1c8pxNZbSRE4gQDKX7BiRRk+cF/+vGYslLkACBCgDB+4WfYhurYjVNtAtARwMm8EzS0B6IdEl+cDly3FmCWbQMEAwfojAfQrEWDZt2gbhILlDJCsf8T/kwwDQkrxgct2Y/vwIdJ6I6X/wDkII9dllctDAHkfuFmUykOij2w6BbLZz04SHEZvS2Y4DCzBB24XEUAtvNyx3mSuPh4GjtLZ8CfBBfjAZY7cLugIR+TtCU20A7jeqTh/DiTvAzcLVgAPqrqW8Bg9EmCMzzoDAaRtwDaJdBdBgRf8p08PDUkCqBMDuHMgeQI8fDBvREe88BDAoAs8M4A5BpD3gUkCpBbSQkc8jMMdkexzV96fGbBihrQPfDSTtbJDnhYTAJIE0P7CgK8VM6IwNon6PzEBfNLUGp+PAdI+MG4ecgCW9elPTrgDQpIA1ncY8LlihbQPvMOATUwDsk36pQbc3QFiryUUsjBA2gagDpiXyapKNeCRASEtbP0eyIAf6nfDi7IBmMjOy2RtlaMBkgNi3E03wOlPvleMkLYByIEDpqeyqtIFIMnpfjfAJ78QLOF+INm1UtlBr5FqWoLxZ3x88csAcRtA9/QH53ODGaDRBGA70De7DJC3AVQXiyuvP25q3ZvBHz/cm0ABNoDmYnGGO8WsCBciX10LO8kAviWgCBuwfBfQlX/+McKtBFi1+GZ2AjUTQJ0GQ9lqqu99GDUB9roh9INZB1ZrA2I0lbQAINweMKYB+xeDv446cMWFam0A8L4swwBwLXxaA2IKcN73mXVgtTZA1RP+3R0PhQgDO8AJn7xLQK02wFRy/osAl1gB3IAHOOObVQVUqgJtdeFfcEeEZA6oOx4gzxJQJwGglvP/mwUA0hIAhubD/XAuAVXaAK+q2wCCS+0A/mYB+GeF+GLNAiq0AUFV5wCid0ekUwA3eCv0gzUOrM8GBJVtoigdkhIw6iEJiPjmdIKyNgDggfpX1P6RfCcCMXAQ2MUn5x4gqQKDnv8dg6rlFtDQreDkDqDvjgfk3AMkm4LMfCvn6qz/cQnw6RzY9ReAPFFAlIOa3cllqrkBcINw9yQo3FkAEJ+cIkDQBuiZxfS6mlugD6RaicEwH5xZkKANgHmfs63nFvAD34FNTYf8YRQBkjbAznjrC1Q9F4BmweMGcHcuzBejCJC0AdFMfSYA9NN0/w1LYbgowPY7zykCJG1A91K0Sz7zWm/3H4q/lAS0fQWYMQmIojD4ZVs/nKLr3C+KUAKfCk5tg2bksdgPTgII2oCbYY/Ghev4xOjcDwqRImAbUMoLaz+8ASB+GG2ApArsd/ifXwLcQ+vTn1fc/BvcEZDmv0rPh8coaMUCURXYIphmClR14j+4cQIoFICpyZBfjD5QVgWixr9G9V//Hu4Mn5RAriMAJAggrAKnUECZmo5+z4DxBSCgAeicAWQOAqRV4MXr3eGArrL6MfoJG4C5qn9iLuQnJwEEw+CB1x8axF4O1nPt5wYwXn841B8FoBABpG1ADwEO3hnq/O4RfrT+UV3XX4oABajAZ0QYjQBM47r1FyNAESrwCeGdg5AMQKBbf0EClCMCXgr6qv6SBChMBLwIrO/qf1ECvEUAGYIHB3EKwHcPAGQJUEgSUD8Cdn+PM2Ug/xMKgt4igAjgTghxFMNPxMtEwQWcBz0DvLvAxzF0t/8CCPA2gsvhHSJM3gD+69dU4Dj4vQf8397ZNrkJQlE4aMbEUbudAPn/P7Wyur2asAjyajxPv20bs9NzOPcCikF4OASApPi3gdWxTwpCDfBG7tD/Xlmp3w5D9HOjD3lMQFmQ/Jb6d3bdXz8QbbwmADXgGWQKIKSt/jcbMVk7/BD52GDUgD1rPnw55+d2G5j26T+dFZzIAagBjgja7neC5LfTP5kDUAP2zvmeLlDxt538E3HfH4Ea4Ky/uwGkGv0k/xavARDznAjsBzh3/O4lQFrKT48DpYwA7AmbkVJvAOkQ/7ex9nsbINZyENpA4x6vgr/f8C3sL9JdXcO7HV6Ie3Y8ImCj36dFHjmrL5/WGBp/wywgqQFwW4gW/iCE4d0PZvl3pnKbsglABOgQvzZ8cUf/TJvSAIgAWqqVWgPIxPKPSwEpDYAIeErOSes3A4inO2rVJ7ABYvUAmAhI/p729Ih3BvkvlzqpAc4eAdpyLwXnqiTkkH80QLp1gBMuB0qxKvcyQL+34O4v/0jKFuBUfaAU/H12r633yTv/FU2yvYBzFQGhG+zB9O9uwVRiSQNg/L4PLQJSilUhfyxZu4JzIQvI/pcISHBf4MQ13BGIpbBIe6lL+6CHT4VVf3JAmrsCqQi4nX9QvAvEg+Axyv1S/Rj61H2q/J+4u94GXdJZHlLwCWFOex7+t4+jvoI17ff8r4n1BXvmgiLOGAq3kiPMac9HvKv9ousLnvyvJmCJ1FdzQRsH8JdJMymQ6IAfyX++S+pXcuLM7rVDP9CUrxhsVgPk1n82f9tfkR5a89f2nD9sBzuPqf/99mnikwNc4tZYF+hfcqGr1lKzGcP5i9amNp4btm4p7UPFfcLczwdVAZvpFTfXBa0rhNYqv8zOdVZL19vrxY/W8pUBOcBiPZ06Q/txuZXWpCC3vij9lPPQw/1M4nssCoutwfrQlmtJrtAbwFzulzVkJKL2n1rztVx3rQoLqgvGdnE7AaTOQK+NYcCp3Bbd53X7G1T3/SvvUn9b7UPqtObGLZqn4DzMIr2H9udI/XjPi0khqOEnWSf4+9QgxUKCdeifbeAvYad+ZvTc2s9UH7o/bKaD9sT1XBYYe71z1ntYAMP+tBaA9Ge1gFIe0kdfFiiQUXkMemfY8WNA8g7K+1DdjumBTg35rz9xH6w6Cex6oFrQ3b+rfJITt8/E9Va0CbpZ97XYbfQn685FdbuXVQ5UzCvZf6vwfZIHK85Fdc3sglF0pTqNdgPp7qw/G6MNEvqg+xG9Wome+71LQBlBOeHedYHM0CmtFeNV/359ff2pX+MdBigWVlWjH0ZuS+4zy59dl1TfvD8FwfzVayK/dQVExb+AYxJwaFrvFh6TgEPjHeDMP0NARryX8dADHhtv/bwdBLLineDoAQ/O1MPl+zzIzDSC8yUIyMxcw7P1ECAzngrW6AEPzpzh2dYRQG4GRZtvJRFkZuoC8+0lgMxMIZ6ngIACmLvADB8GRTBrmGUSCUpgSvEcDQQogmkxN/1nQSG0gwI94GmZ63jy/gFkpW7avm/bhpGKu72jDl5XV2tghaPQ9PSyjMkAzf4esG7p3WuwwAFg08uTA7w0p/8WfUj88hXgyBjRa/ohzHsT2UAsHKC4wAcFwPS0gw7mfu160DvgPynfxwHM4hPNoKW2VMvuSgwuyAoz0A9aGqNc7GITJRQB8EBWTPrXg8EAZswGIMa/ggdywvYYoHU3QD/oqeGAvLAyEwAWSIVZNrthSzi3kz0MkJkN2UIFwG8R0MAAmXGWrZ81CxICDYMBMrOlWt2u1Tem//bF+lUvWTMYIDsWso37d2ozcBQ/AHUzXU5dDfoXAfPm8v0nwIWgfx6Cy8QukP9gOI/5KJeF9HmJqJAhEy7YEC6LtTzYsgcAAAAAAAAAAAAAAAAAAAAAAAD0/AOU5ijBfZTOtQAAAABJRU5ErkJggg==";
 
 var NoPaymentMethodFoundDialog = (function () {
@@ -2265,7 +2278,9 @@ var PaymentContext = /*#__PURE__*/React.createContext();
 
 var PaymentRoutingContext = /*#__PURE__*/React.createContext();
 
-var TrackingContext = /*#__PURE__*/React.createContext();
+var PaymentTrackingContext = /*#__PURE__*/React.createContext();
+
+var TransactionTrackingContext = /*#__PURE__*/React.createContext();
 
 var PaymentProvider = (function (props) {
   var _useContext = useContext(ErrorContext),
@@ -2273,11 +2288,13 @@ var PaymentProvider = (function (props) {
 
   var _useContext2 = useContext(ConfigurationContext),
       _sent = _useContext2.sent,
-      _confirmed = _useContext2.confirmed,
-      _failed = _useContext2.failed;
+      confirmed = _useContext2.confirmed,
+      failed = _useContext2.failed,
+      recover = _useContext2.recover;
 
   var _useContext3 = useContext(PaymentRoutingContext),
-      selectedRoute = _useContext3.selectedRoute;
+      selectedRoute = _useContext3.selectedRoute,
+      getPaymentRoutes = _useContext3.getPaymentRoutes;
 
   var _useContext4 = useContext(ClosableContext),
       open = _useContext4.open,
@@ -2290,13 +2307,20 @@ var PaymentProvider = (function (props) {
   var _useContext6 = useContext(UpdatableContext),
       setUpdatable = _useContext6.setUpdatable;
 
-  var _useContext7 = useContext(WalletContext),
-      wallet = _useContext7.wallet;
+  var _useContext7 = useContext(NavigateContext),
+      navigate = _useContext7.navigate;
+
+  var _useContext8 = useContext(WalletContext),
+      wallet = _useContext8.wallet;
+
+  var _useContext9 = useContext(PaymentTrackingContext),
+      release = _useContext9.release,
+      tracking = _useContext9.tracking,
+      initializeTracking = _useContext9.initializeTracking;
 
-  var _useContext8 = useContext(TrackingContext),
-      release = _useContext8.release,
-      tracking = _useContext8.tracking,
-      initializeTracking = _useContext8.initializeTracking;
+  var _useContext10 = useContext(TransactionTrackingContext),
+      foundTransaction = _useContext10.foundTransaction,
+      initializeTransactionTracking = _useContext10.initializeTracking;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2318,52 +2342,59 @@ var PaymentProvider = (function (props) {
       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 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);
@@ -2381,7 +2412,7 @@ var PaymentProvider = (function (props) {
                 }
               });
 
-            case 8:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -2389,8 +2420,8 @@ var PaymentProvider = (function (props) {
       }, _callee);
     }));
 
-    return function pay(_x) {
-      return _ref2.apply(this, arguments);
+    return function pay() {
+      return _ref.apply(this, arguments);
     };
   }();
 
@@ -2418,19 +2449,73 @@ var PaymentProvider = (function (props) {
       setPaymentState('confirmed');
     }
   }, [release]);
+  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]);
+  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: 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]);
   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
@@ -2513,6 +2598,9 @@ var PaymentRoutingProvider = (function (props) {
   var _useContext2 = useContext(UpdatableContext),
       updatable = _useContext2.updatable;
 
+  var _useContext3 = 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;
@@ -2640,7 +2728,7 @@ var PaymentRoutingProvider = (function (props) {
     };
   }, [reloadCount, allRoutes, selectedRoute, updatable]);
   useEffect(function () {
-    if (account && props.accept) {
+    if (account && props.accept && recover == undefined) {
       setAllRoutes(undefined);
       setSelectedRoute(undefined);
       getPaymentRoutes({});
@@ -2653,6 +2741,7 @@ var PaymentRoutingProvider = (function (props) {
     value: {
       selectedRoute: selectedRoute,
       setSelectedRoute: setSelectedRoute,
+      getPaymentRoutes: getPaymentRoutes,
       allRoutes: allRoutes,
       setAllRoutes: setAllRoutes
     }
@@ -2778,7 +2867,7 @@ var DonationRoutingProvider = (function (props) {
 });
 
 var format = (function (input) {
-  var _float = parseFloat(input);
+  var _float = round(input);
 
   var floatToString = _float.toString();
 
@@ -3171,7 +3260,7 @@ var Footer = (function () {
       amount = _useContext2.amount;
       _useContext2.amountsMissing;
 
-  var _useContext3 = useContext(TrackingContext),
+  var _useContext3 = useContext(PaymentTrackingContext),
       tracking = _useContext3.tracking,
       release = _useContext3.release,
       forwardTo = _useContext3.forwardTo,
@@ -3188,8 +3277,8 @@ var Footer = (function () {
   var _useContext5 = useContext(PaymentValueContext),
       paymentValue = _useContext5.paymentValue;
 
-  var _useContext6 = useContext(NavigateStackContext),
-      navigate = _useContext6.navigate;
+  var _useContext6 = useContext(NavigateStackContext);
+      _useContext6.navigate;
 
   var _useContext7 = useContext(ClosableContext),
       close = _useContext7.close;
@@ -3295,7 +3384,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", {
@@ -3332,7 +3421,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() {
@@ -3340,9 +3429,7 @@ var Footer = (function () {
             return;
           }
 
-          pay({
-            navigate: navigate
-          });
+          pay();
         }
       }, "Pay ", displayedAmount);
     } else if (paymentState == 'paying') {
@@ -3483,8 +3570,11 @@ var PaymentErrorDialog = (function () {
   var _useContext2 = useContext(PaymentContext),
       transaction = _useContext2.transaction;
 
+  var _useContext3 = useContext(ConfigurationContext),
+      recover = _useContext3.recover;
+
   return /*#__PURE__*/React.createElement(Dialog$1, {
-    stacked: true,
+    stacked: recover ? false : true,
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }),
@@ -3497,7 +3587,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"
@@ -3510,7 +3600,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');
@@ -3566,7 +3656,11 @@ var DonationStack = (function (props) {
       open = _useContext.open,
       close = _useContext.close;
 
+  var _useContext2 = useContext(NavigateContext),
+      setNavigate = _useContext2.setNavigate;
+
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigate: setNavigate,
     open: open,
     close: close,
     start: "DonationOverview",
@@ -3582,7 +3676,28 @@ var DonationStack = (function (props) {
   });
 });
 
-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.createElement(NavigateContext.Provider, {
+    value: {
+      navigate: navigate,
+      setNavigate: setNavigate
+    }
+  }, props.children);
+});
+
+var PaymentTrackingProvider = (function (props) {
   var _useContext = useContext(ErrorContext),
       errorCallback = _useContext.errorCallback;
 
@@ -3676,14 +3791,14 @@ var TrackingProvider = (function (props) {
 
   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') {
@@ -3698,6 +3813,9 @@ var TrackingProvider = (function (props) {
     if (track.endpoint) {
       return fetch(track.endpoint, {
         method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
         body: JSON.stringify(payment)
       });
     } else if (track.method) {
@@ -3717,12 +3835,12 @@ var TrackingProvider = (function (props) {
       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);
     });
   };
@@ -3759,6 +3877,9 @@ var TrackingProvider = (function (props) {
     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) {
@@ -3787,7 +3908,7 @@ var TrackingProvider = (function (props) {
     startTracking(transaction, afterBlock, paymentRoute);
   };
 
-  return /*#__PURE__*/React.createElement(TrackingContext.Provider, {
+  return /*#__PURE__*/React.createElement(PaymentTrackingContext.Provider, {
     value: {
       tracking: tracking,
       initializeTracking: initializeTracking,
@@ -3798,6 +3919,154 @@ var TrackingProvider = (function (props) {
   }, props.children);
 });
 
+var TransactionTrackingProvider = (function (props) {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      givenTransaction = _useState2[0],
+      setGivenTransaction = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      foundTransaction = _useState4[0],
+      setFoundTransaction = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      polling = _useState6[0],
+      setPolling = _useState6[1];
+
+  var _useContext = useContext(ErrorContext);
+      _useContext.errorCallback;
+
+  var _useContext2 = useContext(ConfigurationContext),
+      recover = _useContext2.recover;
+
+  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);
+  };
+
+  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,
+      foundTransaction: foundTransaction
+    }
+  }, props.children);
+});
+
 var WalletProvider = (function (props) {
   var _useContext = useContext(ErrorContext);
       _useContext.setError;
@@ -3937,9 +4206,9 @@ var Donation = /*#__PURE__*/function () {
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
                   accept: accept
-                }, /*#__PURE__*/React.createElement(TrackingProvider, {
+                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(DonationRoutingProvider, {
                   container: container,
@@ -3947,7 +4216,7 @@ var Donation = /*#__PURE__*/function () {
                 }, /*#__PURE__*/React.createElement(DonationStack, {
                   document: document,
                   container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))));
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
               };
             });
             return _context2.abrupt("return", {
@@ -3998,6 +4267,9 @@ var SignLoginDialog = (function (props) {
       return new Promise(function (resolve, reject) {
         fetch(endpoint, {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
           body: JSON.stringify({
             message: message,
             signature: signature
@@ -4214,7 +4486,8 @@ var PaymentOverviewSkeleton = (function (props) {
 
 var PaymentOverviewDialog = (function (props) {
   var _useContext = useContext(ConfigurationContext),
-      currencyCode = _useContext.currencyCode;
+      currencyCode = _useContext.currencyCode,
+      recover = _useContext.recover;
 
   var _useContext2 = useContext(PaymentContext),
       payment = _useContext2.payment,
@@ -4230,7 +4503,7 @@ var PaymentOverviewDialog = (function (props) {
   var _useContext5 = useContext(NavigateStackContext),
       navigate = _useContext5.navigate;
 
-  if (payment == undefined || paymentValue == undefined) {
+  if (payment == undefined || recover == undefined && paymentValue == undefined) {
     return /*#__PURE__*/React.createElement(PaymentOverviewSkeleton, null);
   }
 
@@ -4281,7 +4554,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"
@@ -4311,7 +4584,11 @@ var PaymentStack = (function (props) {
       open = _useContext.open,
       close = _useContext.close;
 
+  var _useContext2 = useContext(NavigateContext),
+      setNavigate = _useContext2.setNavigate;
+
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigate: setNavigate,
     open: open,
     close: close,
     start: "PaymentOverview",
@@ -4329,12 +4606,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!';
@@ -4353,7 +4639,7 @@ var preflight$1 = /*#__PURE__*/function () {
               }
             });
 
-          case 2:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -4368,16 +4654,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:
@@ -4404,7 +4691,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
@@ -4413,7 +4701,7 @@ var Payment = /*#__PURE__*/function () {
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
                   accept: accept
                 }, /*#__PURE__*/React.createElement(PaymentAmountRoutingProvider, {
                   accept: accept,
@@ -4421,7 +4709,7 @@ var Payment = /*#__PURE__*/function () {
                   blacklist: blacklist,
                   event: event,
                   fee: fee
-                }, /*#__PURE__*/React.createElement(TrackingProvider, {
+                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(PaymentProvider, {
                   container: container,
@@ -4429,7 +4717,7 @@ var Payment = /*#__PURE__*/function () {
                 }, /*#__PURE__*/React.createElement(PaymentValueProvider, null, /*#__PURE__*/React.createElement(PaymentStack, {
                   document: document,
                   container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))))));
               };
             });
             return _context2.abrupt("return", {
@@ -4705,7 +4993,11 @@ var SaleStack = (function (props) {
       open = _useContext.open,
       close = _useContext.close;
 
+  var _useContext2 = useContext(NavigateContext),
+      setNavigate = _useContext2.setNavigate;
+
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigate: setNavigate,
     open: open,
     close: close,
     start: "SaleOverview",
@@ -4816,9 +5108,9 @@ var Sale = /*#__PURE__*/function () {
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
                   accept: accept
-                }, /*#__PURE__*/React.createElement(TrackingProvider, {
+                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(SaleRoutingProvider, {
                   container: container,
@@ -4826,7 +5118,7 @@ var Sale = /*#__PURE__*/function () {
                 }, /*#__PURE__*/React.createElement(SaleStack, {
                   document: document,
                   container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))));
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
               };
             });
             return _context2.abrupt("return", {