@depay/widgets 7.0.3 → 7.2.1

package/dist/umd/index.js

@@ -1319,7 +1319,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    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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: 13px;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 13px;\n        border-top-radius: 13px;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\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      border-top-left-radius: 13px;\n      border-top-right-radius: 13px;\n      min-height: 54px;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 48px;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 48px;\n    }\n\n    .DialogFooter {\n      border-bottom-left-radius: 13px;\n      border-bottom-right-radius: 13px;\n      line-height: 24px;\n      min-height: 32px;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
+    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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: 13px;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 13px;\n        border-top-radius: 13px;\n        display: flex;\n        flex-direction: column;\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\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      border-top-left-radius: 13px;\n      border-top-right-radius: 13px;\n      min-height: 54px;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 48px;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 48px;\n    }\n\n    .DialogFooter {\n      border-bottom-left-radius: 13px;\n      border-bottom-right-radius: 13px;\n      line-height: 24px;\n      min-height: 32px;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
   });
 
   var FontStyle = (function (style) {
@@ -2022,7 +2022,6 @@
       }
 
       setPaymentState('initialized');
-      setPayment(null);
       setClosable(true);
       setUpdatable(true);
       getPaymentRoutes({});
@@ -2232,14 +2231,14 @@
     return obj;
   }
 
-  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   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;
-    return _objectSpread(_objectSpread({}, accept), {}, {
+    return _objectSpread$1(_objectSpread$1({}, accept), {}, {
       toAddress: toAddress,
       toContract: toContract
     });
@@ -2270,6 +2269,9 @@
     });
   });
 
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var PaymentRoutingProvider = (function (props) {
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2278,18 +2280,23 @@
 
     var _useState3 = React.useState(),
         _useState4 = _slicedToArray(_useState3, 2),
-        selectedRoute = _useState4[0],
-        setSelectedRoute = _useState4[1];
+        updatedRouteWithNewPrice = _useState4[0],
+        setUpdatedRouteWithNewPrice = _useState4[1];
 
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(),
         _useState6 = _slicedToArray(_useState5, 2),
-        slowRouting = _useState6[0],
-        setSlowRouting = _useState6[1];
+        selectedRoute = _useState6[0],
+        setSelectedRoute = _useState6[1];
 
-    var _useState7 = React.useState(0),
+    var _useState7 = React.useState(false),
         _useState8 = _slicedToArray(_useState7, 2),
-        reloadCount = _useState8[0],
-        setReloadCount = _useState8[1];
+        slowRouting = _useState8[0],
+        setSlowRouting = _useState8[1];
+
+    var _useState9 = React.useState(0),
+        _useState10 = _slicedToArray(_useState9, 2),
+        reloadCount = _useState10[0],
+        setReloadCount = _useState10[1];
 
     var _useContext = React.useContext(WalletContext),
         account = _useContext.account;
@@ -2300,41 +2307,292 @@
     var _useContext3 = React.useContext(ConfigurationContext),
         recover = _useContext3.recover;
 
-    var onRoutesUpdate = function onRoutesUpdate(routes) {
-      if (routes.length == 0) {
-        setAllRoutes([]);
+    var calculateAmountInWithSlippage = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(route) {
+        var currentBlock, blocks, i, exchangeRoute, lastAmountsIn, difference1, difference2, slippage, newAmountBN, readableAmount, roundedAmountBN;
+        return regenerator.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!route.directTransfer) {
+                  _context2.next = 2;
+                  break;
+                }
 
-        if (props.setMaxRoute) {
-          props.setMaxRoute(null);
-        }
-      } else {
-        roundAmounts(routes).then(function (roundedRoutes) {
-          var selected;
+                return _context2.abrupt("return");
 
-          if (selectedRoute) {
-            selected = roundedRoutes[allRoutes.findIndex(function (route) {
-              return route.fromToken == selectedRoute.fromToken && route.blockchain == selectedRoute.blockchain;
-            })];
-          }
+              case 2:
+                _context2.next = 4;
+                return web3Client.request({
+                  blockchain: route.blockchain,
+                  method: 'latestBlockNumber'
+                });
 
-          if (selected == undefined) {
-            selected = roundedRoutes[0];
+              case 4:
+                currentBlock = _context2.sent;
+                blocks = [];
+
+                for (i = 0; i <= 2; i++) {
+                  blocks.push(currentBlock - i);
+                }
+
+                exchangeRoute = route.exchangeRoutes[0];
+
+                if (!(typeof exchangeRoute == 'undefined' || typeof exchangeRoute.exchange == 'undefined')) {
+                  _context2.next = 10;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 10:
+                _context2.next = 12;
+                return Promise.all(blocks.map( /*#__PURE__*/function () {
+                  var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(block) {
+                    var amountIn;
+                    return regenerator.wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return exchangeRoute.exchange.getAmountIn({
+                              path: exchangeRoute.path,
+                              amountOut: exchangeRoute.amountOutMin,
+                              block: block
+                            });
+
+                          case 2:
+                            amountIn = _context.sent;
+                            return _context.abrupt("return", amountIn);
+
+                          case 4:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }));
+
+                  return function (_x2) {
+                    return _ref2.apply(this, arguments);
+                  };
+                }()));
+
+              case 12:
+                lastAmountsIn = _context2.sent;
+
+                if (!(!lastAmountsIn[0] || !lastAmountsIn[1] || !lastAmountsIn[2])) {
+                  _context2.next = 15;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 15:
+                if (!(lastAmountsIn[0].gt(lastAmountsIn[1]) && lastAmountsIn[1].gt(lastAmountsIn[2]))) {
+                  _context2.next = 29;
+                  break;
+                }
+
+                difference1 = lastAmountsIn[0].sub(lastAmountsIn[1]);
+                difference2 = lastAmountsIn[1].sub(lastAmountsIn[2]);
+
+                if (difference1.lt(difference2)) {
+                  slippage = difference2.add(difference2.sub(difference1));
+                } else {
+                  slippage = difference1.add(difference1.sub(difference2));
+                }
+
+                newAmountBN = lastAmountsIn[0].add(slippage);
+                _context2.next = 22;
+                return route.fromToken.readable(newAmountBN);
+
+              case 22:
+                readableAmount = _context2.sent;
+                _context2.next = 25;
+                return route.fromToken.BigNumber(round(readableAmount));
+
+              case 25:
+                roundedAmountBN = _context2.sent;
+
+                if (!(route.fromAmount == roundedAmountBN.toString())) {
+                  _context2.next = 28;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 28:
+                return _context2.abrupt("return", newAmountBN);
+
+              case 29:
+              case "end":
+                return _context2.stop();
+            }
           }
+        }, _callee2);
+      }));
+
+      return function calculateAmountInWithSlippage(_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    var onRoutesUpdate = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee5(routes) {
+        return regenerator.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                if (routes.length == 0) {
+                  setAllRoutes([]);
+
+                  if (props.setMaxRoute) {
+                    props.setMaxRoute(null);
+                  }
+                } else {
+                  roundAmounts(routes).then( /*#__PURE__*/function () {
+                    var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4(roundedRoutes) {
+                      var selectRoute, newSelectRoute, amountInWithSlippage, _amountInWithSlippage;
+
+                      return regenerator.wrap(function _callee4$(_context4) {
+                        while (1) {
+                          switch (_context4.prev = _context4.next) {
+                            case 0:
+                              if (!(typeof selectedRoute == 'undefined')) {
+                                _context4.next = 4;
+                                break;
+                              }
+
+                              selectRoute = roundedRoutes[0];
+                              _context4.next = 13;
+                              break;
+
+                            case 4:
+                              newSelectRoute = roundedRoutes[allRoutes.findIndex(function (route) {
+                                return route.fromToken == selectedRoute.fromToken && route.blockchain == selectedRoute.blockchain;
+                              })];
+
+                              if (!(newSelectRoute && selectedRoute.fromAmount !== newSelectRoute.fromAmount)) {
+                                _context4.next = 13;
+                                break;
+                              }
+
+                              _context4.next = 8;
+                              return calculateAmountInWithSlippage(newSelectRoute);
+
+                            case 8:
+                              amountInWithSlippage = _context4.sent;
+
+                              if (!amountInWithSlippage) {
+                                _context4.next = 12;
+                                break;
+                              }
+
+                              _context4.next = 12;
+                              return roundAmount(newSelectRoute, amountInWithSlippage);
+
+                            case 12:
+                              setUpdatedRouteWithNewPrice(newSelectRoute);
+
+                            case 13:
+                              if (!selectRoute) {
+                                _context4.next = 21;
+                                break;
+                              }
+
+                              _context4.next = 16;
+                              return calculateAmountInWithSlippage(selectRoute);
+
+                            case 16:
+                              _amountInWithSlippage = _context4.sent;
+
+                              if (!_amountInWithSlippage) {
+                                _context4.next = 20;
+                                break;
+                              }
+
+                              _context4.next = 20;
+                              return roundAmount(selectRoute, _amountInWithSlippage);
+
+                            case 20:
+                              setSelectedRoute(selectRoute);
+
+                            case 21:
+                              _context4.next = 23;
+                              return Promise.all(roundedRoutes.map( /*#__PURE__*/function () {
+                                var _ref5 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3(route, index) {
+                                  var amountInWithSlippage;
+                                  return regenerator.wrap(function _callee3$(_context3) {
+                                    while (1) {
+                                      switch (_context3.prev = _context3.next) {
+                                        case 0:
+                                          _context3.next = 2;
+                                          return calculateAmountInWithSlippage(route);
+
+                                        case 2:
+                                          amountInWithSlippage = _context3.sent;
+
+                                          if (!amountInWithSlippage) {
+                                            _context3.next = 6;
+                                            break;
+                                          }
+
+                                          _context3.next = 6;
+                                          return roundAmount(route, amountInWithSlippage);
+
+                                        case 6:
+                                          return _context3.abrupt("return", route);
+
+                                        case 7:
+                                        case "end":
+                                          return _context3.stop();
+                                      }
+                                    }
+                                  }, _callee3);
+                                }));
+
+                                return function (_x5, _x6) {
+                                  return _ref5.apply(this, arguments);
+                                };
+                              }())).then(setAllRoutes);
+
+                            case 23:
+                              if (props.setMaxRoute) {
+                                props.setMaxRoute(findMaxRoute(roundedRoutes));
+                              }
+
+                            case 24:
+                            case "end":
+                              return _context4.stop();
+                          }
+                        }
+                      }, _callee4);
+                    }));
 
-          setSelectedRoute(selected);
-          setAllRoutes(roundedRoutes);
+                    return function (_x4) {
+                      return _ref4.apply(this, arguments);
+                    };
+                  }());
+                }
 
-          if (props.setMaxRoute) {
-            props.setMaxRoute(findMaxRoute(roundedRoutes));
+              case 1:
+              case "end":
+                return _context5.stop();
+            }
           }
-        });
-      }
-    };
+        }, _callee5);
+      }));
+
+      return function onRoutesUpdate(_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
 
-    var getPaymentRoutes = function getPaymentRoutes(_ref) {
-      _ref.allRoutes;
-          _ref.selectedRoute;
-          var updatable = _ref.updatable;
+    var getPaymentRoutes = function getPaymentRoutes(_ref6) {
+      _ref6.allRoutes;
+          _ref6.selectedRoute;
+          var updatable = _ref6.updatable;
 
       if (updatable == false || !props.accept || !account) {
         return;
@@ -2351,72 +2609,144 @@
       });
     };
 
-    var roundAmounts = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(routes) {
-        return regenerator.wrap(function _callee2$(_context2) {
+    var updateRouteAmount = function updateRouteAmount(route, amountBN) {
+      route.fromAmount = amountBN.toString();
+      route.transaction.params.amounts[0] = amountBN.toString();
+
+      if (route.transaction.value && route.transaction.value.toString() != '0') {
+        route.transaction.value = amountBN.toString();
+      }
+    };
+
+    var roundAmount = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee6(route, amountBN) {
+        var readableAmount, roundedAmountBN;
+        return regenerator.wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
-                return _context2.abrupt("return", Promise.all(routes.map( /*#__PURE__*/function () {
-                  var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(route) {
-                    var readableAmount, roundedAmountBN;
-                    return regenerator.wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            if (!route.directTransfer) {
-                              _context.next = 2;
-                              break;
-                            }
-
-                            return _context.abrupt("return", route);
+                if (!route.directTransfer) {
+                  _context6.next = 2;
+                  break;
+                }
 
-                          case 2:
-                            _context.next = 4;
-                            return route.fromToken.readable(route.transaction.params.amounts[0]);
+                return _context6.abrupt("return", route);
 
-                          case 4:
-                            readableAmount = _context.sent;
-                            _context.next = 7;
-                            return route.fromToken.BigNumber(round(readableAmount));
+              case 2:
+                _context6.next = 4;
+                return route.fromToken.readable(amountBN || route.transaction.params.amounts[0]);
 
-                          case 7:
-                            roundedAmountBN = _context.sent;
-                            route.fromAmount = roundedAmountBN.toString();
-                            route.transaction.params.amounts[0] = roundedAmountBN.toString();
+              case 4:
+                readableAmount = _context6.sent;
+                _context6.next = 7;
+                return route.fromToken.BigNumber(round(readableAmount));
 
-                            if (route.transaction.value && route.transaction.value.toString() != '0') {
-                              route.transaction.value = roundedAmountBN.toString();
-                            }
+              case 7:
+                roundedAmountBN = _context6.sent;
+                updateRouteAmount(route, roundedAmountBN);
+                return _context6.abrupt("return", route);
 
-                            return _context.abrupt("return", route);
+              case 10:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6);
+      }));
 
-                          case 12:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
-                    }, _callee);
-                  }));
+      return function roundAmount(_x7, _x8) {
+        return _ref7.apply(this, arguments);
+      };
+    }();
 
-                  return function (_x2) {
-                    return _ref3.apply(this, arguments);
-                  };
-                }())));
+    var roundAmounts = /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee7(routes) {
+        return regenerator.wrap(function _callee7$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                return _context7.abrupt("return", Promise.all(routes.map(function (route) {
+                  return roundAmount(route);
+                })));
 
               case 1:
               case "end":
-                return _context2.stop();
+                return _context7.stop();
             }
           }
-        }, _callee2);
+        }, _callee7);
       }));
 
-      return function roundAmounts(_x) {
-        return _ref2.apply(this, arguments);
+      return function roundAmounts(_x9) {
+        return _ref8.apply(this, arguments);
       };
     }();
 
+    var updateRouteWithNewPrice = /*#__PURE__*/function () {
+      var _ref9 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee8() {
+        return regenerator.wrap(function _callee8$(_context8) {
+          while (1) {
+            switch (_context8.prev = _context8.next) {
+              case 0:
+                setSelectedRoute(_objectSpread({}, updatedRouteWithNewPrice));
+                setUpdatedRouteWithNewPrice(null);
+
+              case 2:
+              case "end":
+                return _context8.stop();
+            }
+          }
+        }, _callee8);
+      }));
+
+      return function updateRouteWithNewPrice() {
+        return _ref9.apply(this, arguments);
+      };
+    }();
+
+    React.useEffect(function () {
+      function updateRouteWithAmountInWithSlippage() {
+        return _updateRouteWithAmountInWithSlippage.apply(this, arguments);
+      }
+
+      function _updateRouteWithAmountInWithSlippage() {
+        _updateRouteWithAmountInWithSlippage = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee9() {
+          var amountInWithSlippage;
+          return regenerator.wrap(function _callee9$(_context9) {
+            while (1) {
+              switch (_context9.prev = _context9.next) {
+                case 0:
+                  _context9.next = 2;
+                  return calculateAmountInWithSlippage(selectedRoute);
+
+                case 2:
+                  amountInWithSlippage = _context9.sent;
+
+                  if (!amountInWithSlippage) {
+                    _context9.next = 7;
+                    break;
+                  }
+
+                  _context9.next = 6;
+                  return roundAmount(selectedRoute, amountInWithSlippage);
+
+                case 6:
+                  setUpdatedRouteWithNewPrice(selectedRoute);
+
+                case 7:
+                case "end":
+                  return _context9.stop();
+              }
+            }
+          }, _callee9);
+        }));
+        return _updateRouteWithAmountInWithSlippage.apply(this, arguments);
+      }
+
+      if (selectedRoute) {
+        updateRouteWithAmountInWithSlippage();
+      }
+    }, [selectedRoute]);
     React.useEffect(function () {
       var timeout = setTimeout(function () {
         setReloadCount(reloadCount + 1);
@@ -2432,12 +2762,7 @@
     }, [reloadCount, allRoutes, selectedRoute, updatable]);
     React.useEffect(function () {
       if (account && props.accept && recover == undefined) {
-        setAllRoutes(undefined);
-        setSelectedRoute(undefined);
         getPaymentRoutes({});
-      } else {
-        setAllRoutes(undefined);
-        setSelectedRoute(undefined);
       }
     }, [account, props.accept]);
     return /*#__PURE__*/React__default["default"].createElement(PaymentRoutingContext.Provider, {
@@ -2447,7 +2772,9 @@
         getPaymentRoutes: getPaymentRoutes,
         allRoutes: allRoutes,
         setAllRoutes: setAllRoutes,
-        slowRouting: slowRouting
+        slowRouting: slowRouting,
+        updatedRouteWithNewPrice: updatedRouteWithNewPrice,
+        updateRouteWithNewPrice: updateRouteWithNewPrice
       }
     }, props.children);
   });
@@ -2638,12 +2965,14 @@
 
     var _useContext6 = React.useContext(PaymentRoutingContext);
         _useContext6.allRoutes;
+        var setSelectedRoute = _useContext6.setSelectedRoute;
 
     var min = _typeof(amountConfiguration) == "object" && amountConfiguration.min ? amountConfiguration.min : 1;
     var step = _typeof(amountConfiguration) == "object" && amountConfiguration.step ? amountConfiguration.step : 1;
     var displayedCurrencyCode = amountConfiguration != undefined && amountConfiguration.token ? null : currencyCode;
 
     var changeAmountAndGoBack = function changeAmountAndGoBack() {
+      setSelectedRoute(undefined);
       setAmount(toValidValue(parseFloat(inputAmount)));
       navigate('back');
     };
@@ -3001,11 +3330,15 @@
         paymentValue = _useContext5.paymentValue,
         paymentValueLoss = _useContext5.paymentValueLoss;
 
-    var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext);
-        _useContext6.navigate;
+    var _useContext6 = React.useContext(PaymentRoutingContext),
+        updatedRouteWithNewPrice = _useContext6.updatedRouteWithNewPrice,
+        updateRouteWithNewPrice = _useContext6.updateRouteWithNewPrice;
+
+    var _useContext7 = React.useContext(reactDialogStack.NavigateStackContext);
+        _useContext7.navigate;
 
-    var _useContext7 = React.useContext(ClosableContext),
-        close = _useContext7.close;
+    var _useContext8 = React.useContext(ClosableContext),
+        close = _useContext8.close;
 
     var trackingInfo = function trackingInfo() {
       if (tracking != true) {
@@ -3145,7 +3478,18 @@
         displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
       }
 
-      if (paymentValueLoss) {
+      if (updatedRouteWithNewPrice) {
+        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "PaddingBottomXS"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "Alert"
+        }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Price updated!"))), /*#__PURE__*/React__default["default"].createElement("button", {
+          className: "ButtonPrimary",
+          onClick: function onClick() {
+            updateRouteWithNewPrice();
+          }
+        }, "Reload"));
+      } else if (paymentValueLoss) {
         return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingBottomXS"
         }, /*#__PURE__*/React__default["default"].createElement("div", {