@depay/widgets 7.0.2 → 7.1.1

package/dist/esm/index.js

@@ -1324,7 +1324,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    .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) {
@@ -2027,7 +2027,6 @@ var PaymentProvider = (function (props) {
     }
 
     setPaymentState('initialized');
-    setPayment(null);
     setClosable(true);
     setUpdatable(true);
     getPaymentRoutes({});
@@ -2237,14 +2236,14 @@ function _defineProperty(obj, key, value) {
   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
   });
@@ -2275,6 +2274,9 @@ var routePayments = (function (_ref) {
   });
 });
 
+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 = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2283,18 +2285,23 @@ var PaymentRoutingProvider = (function (props) {
 
   var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      selectedRoute = _useState4[0],
-      setSelectedRoute = _useState4[1];
+      updatedRouteWithNewPrice = _useState4[0],
+      setUpdatedRouteWithNewPrice = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      slowRouting = _useState6[0],
-      setSlowRouting = _useState6[1];
+      selectedRoute = _useState6[0],
+      setSelectedRoute = _useState6[1];
 
-  var _useState7 = useState(0),
+  var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      reloadCount = _useState8[0],
-      setReloadCount = _useState8[1];
+      slowRouting = _useState8[0],
+      setSlowRouting = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      reloadCount = _useState10[0],
+      setReloadCount = _useState10[1];
 
   var _useContext = useContext(WalletContext),
       account = _useContext.account;
@@ -2305,41 +2312,292 @@ var PaymentRoutingProvider = (function (props) {
   var _useContext3 = 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 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;
@@ -2356,72 +2614,144 @@ var PaymentRoutingProvider = (function (props) {
     });
   };
 
-  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);
+    };
+  }();
+
+  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]);
   useEffect(function () {
     var timeout = setTimeout(function () {
       setReloadCount(reloadCount + 1);
@@ -2437,12 +2767,7 @@ var PaymentRoutingProvider = (function (props) {
   }, [reloadCount, allRoutes, selectedRoute, updatable]);
   useEffect(function () {
     if (account && props.accept && recover == undefined) {
-      setAllRoutes(undefined);
-      setSelectedRoute(undefined);
       getPaymentRoutes({});
-    } else {
-      setAllRoutes(undefined);
-      setSelectedRoute(undefined);
     }
   }, [account, props.accept]);
   return /*#__PURE__*/React.createElement(PaymentRoutingContext.Provider, {
@@ -2452,7 +2777,9 @@ var PaymentRoutingProvider = (function (props) {
       getPaymentRoutes: getPaymentRoutes,
       allRoutes: allRoutes,
       setAllRoutes: setAllRoutes,
-      slowRouting: slowRouting
+      slowRouting: slowRouting,
+      updatedRouteWithNewPrice: updatedRouteWithNewPrice,
+      updateRouteWithNewPrice: updateRouteWithNewPrice
     }
   }, props.children);
 });
@@ -2643,12 +2970,14 @@ var ChangeAmountDialog = (function (props) {
 
   var _useContext6 = 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');
   };
@@ -3006,11 +3335,15 @@ var Footer = (function () {
       paymentValue = _useContext5.paymentValue,
       paymentValueLoss = _useContext5.paymentValueLoss;
 
-  var _useContext6 = useContext(NavigateStackContext);
-      _useContext6.navigate;
+  var _useContext6 = useContext(PaymentRoutingContext),
+      updatedRouteWithNewPrice = _useContext6.updatedRouteWithNewPrice,
+      updateRouteWithNewPrice = _useContext6.updateRouteWithNewPrice;
+
+  var _useContext7 = useContext(NavigateStackContext);
+      _useContext7.navigate;
 
-  var _useContext7 = useContext(ClosableContext),
-      close = _useContext7.close;
+  var _useContext8 = useContext(ClosableContext),
+      close = _useContext8.close;
 
   var trackingInfo = function trackingInfo() {
     if (tracking != true) {
@@ -3150,7 +3483,18 @@ var Footer = (function () {
       displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
     }
 
-    if (paymentValueLoss) {
+    if (updatedRouteWithNewPrice) {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "PaddingBottomXS"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "Alert"
+      }, /*#__PURE__*/React.createElement("strong", null, "Price updated!"))), /*#__PURE__*/React.createElement("button", {
+        className: "ButtonPrimary",
+        onClick: function onClick() {
+          updateRouteWithNewPrice();
+        }
+      }, "Reload"));
+    } else if (paymentValueLoss) {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "PaddingBottomXS"
       }, /*#__PURE__*/React.createElement("div", {