@depay/widgets 8.0.7 → 9.0.0

package/dist/esm/index.js

@@ -212,14 +212,9 @@ function _regeneratorRuntime() {
     };
   }
   function maybeInvokeDelegate(delegate, context) {
-    var method = delegate.iterator[context.method];
-    if (undefined === method) {
-      if (context.delegate = null, "throw" === context.method) {
-        if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
-        context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
-      }
-      return ContinueSentinel;
-    }
+    var methodName = context.method,
+      method = delegate.iterator[methodName];
+    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
     var record = tryCatch(method, delegate.iterator, context.arg);
     if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
     var info = record.arg;
@@ -248,9 +243,7 @@ function _regeneratorRuntime() {
       if (!isNaN(iterable.length)) {
         var i = -1,
           next = function next() {
-            for (; ++i < iterable.length;) {
-              if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
-            }
+            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
             return next.value = undefined, next.done = !0, next;
           };
         return next.next = next;
@@ -296,9 +289,7 @@ function _regeneratorRuntime() {
   }), exports.keys = function (val) {
     var object = Object(val),
       keys = [];
-    for (var key in object) {
-      keys.push(key);
-    }
+    for (var key in object) keys.push(key);
     return keys.reverse(), function next() {
       for (; keys.length;) {
         var key = keys.pop();
@@ -309,9 +300,7 @@ function _regeneratorRuntime() {
   }, exports.values = values, Context.prototype = {
     constructor: Context,
     reset: function reset(skipTempReset) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) {
-        "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
-      }
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
     },
     stop: function stop() {
       this.done = !0;
@@ -413,35 +402,36 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _s, _e;
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-  return _arr;
 }
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
 
@@ -665,25 +655,23 @@ var SelectWalletDialog = (function (props) {
     _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
       var account;
       return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!wallet) {
-                _context.next = 5;
-                break;
-              }
-              _context.next = 3;
-              return wallet.account();
-            case 3:
-              account = _context.sent;
-              if (account == undefined) {
-                navigate('ConnectingWallet');
-                props.connect(wallet);
-              }
-            case 5:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!wallet) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 3;
+            return wallet.account();
+          case 3:
+            account = _context.sent;
+            if (account == undefined) {
+              navigate('ConnectingWallet');
+              props.connect(wallet);
+            }
+          case 5:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }))();
@@ -765,24 +753,22 @@ var ConnectStack = (function (props) {
     wallet.connect().then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
       var account;
       return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return wallet.account();
-            case 2:
-              account = _context.sent;
-              if (account) {
-                if (props.autoClose) close();
-                if (props.resolve) props.resolve({
-                  wallet: wallet,
-                  account: account
-                });
-              }
-            case 4:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return wallet.account();
+          case 2:
+            account = _context.sent;
+            if (account) {
+              if (props.autoClose) close();
+              if (props.resolve) props.resolve({
+                wallet: wallet,
+                account: account
+              });
+            }
+          case 4:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     })))["catch"](function (error) {
@@ -809,27 +795,25 @@ var ConnectStack = (function (props) {
     _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
       var account;
       return regenerator.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!wallet) {
-                _context2.next = 5;
-                break;
-              }
-              _context2.next = 3;
-              return wallet.account();
-            case 3:
-              account = _context2.sent;
-              if (account) {
-                if (props.resolve) props.resolve({
-                  wallet: wallet,
-                  account: account
-                });
-              }
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!wallet) {
+              _context2.next = 5;
+              break;
+            }
+            _context2.next = 3;
+            return wallet.account();
+          case 3:
+            account = _context2.sent;
+            if (account) {
+              if (props.resolve) props.resolve({
+                wallet: wallet,
+                account: account
+              });
+            }
+          case 5:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
     }))();
@@ -868,13 +852,29 @@ function _classCallCheck(instance, Constructor) {
   }
 }
 
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
     var descriptor = props[i];
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -1400,55 +1400,53 @@ var Connect = function Connect(options) {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(resolve, reject) {
       var wallet, account;
       return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              wallet = getWallets()[0];
-              if (!wallet) {
-                _context.next = 7;
-                break;
-              }
-              _context.next = 4;
-              return wallet.account();
-            case 4:
-              account = _context.sent;
-              if (!account) {
-                _context.next = 7;
-                break;
-              }
-              return _context.abrupt("return", resolve({
-                wallet: wallet,
-                account: account
-              }));
-            case 7:
-              mount({
-                style: style,
-                document: ensureDocument(document)
-              }, function (unmount) {
-                var rejectBeforeUnmount = function rejectBeforeUnmount() {
-                  reject('USER_CLOSED_DIALOG');
-                  unmount();
-                };
-                return function (container) {
-                  return /*#__PURE__*/React.createElement(ErrorProvider, {
-                    errorCallback: error,
-                    container: container,
-                    unmount: unmount
-                  }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                    unmount: rejectBeforeUnmount
-                  }, /*#__PURE__*/React.createElement(ConnectStack, {
-                    document: document,
-                    container: container,
-                    resolve: resolve,
-                    reject: reject,
-                    autoClose: true
-                  }), /*#__PURE__*/React.createElement(PoweredBy, null))));
-                };
-              });
-            case 8:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            wallet = getWallets()[0];
+            if (!wallet) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 4;
+            return wallet.account();
+          case 4:
+            account = _context.sent;
+            if (!account) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return", resolve({
+              wallet: wallet,
+              account: account
+            }));
+          case 7:
+            mount({
+              style: style,
+              document: ensureDocument(document)
+            }, function (unmount) {
+              var rejectBeforeUnmount = function rejectBeforeUnmount() {
+                reject('USER_CLOSED_DIALOG');
+                unmount();
+              };
+              return function (container) {
+                return /*#__PURE__*/React.createElement(ErrorProvider, {
+                  errorCallback: error,
+                  container: container,
+                  unmount: unmount
+                }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                  unmount: rejectBeforeUnmount
+                }, /*#__PURE__*/React.createElement(ConnectStack, {
+                  document: document,
+                  container: container,
+                  resolve: resolve,
+                  reject: reject,
+                  autoClose: true
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))));
+              };
+            });
+          case 8:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
@@ -18809,7 +18807,7 @@ var ChangableAmountProvider = (function (props) {
       } else {
         Promise.all(props.accept.map(function (configuration) {
           if (fixedAmount) {
-            if (CONSTANTS[configuration.blockchain].USD.toLowerCase() == configuration.token.toLowerCase()) {
+            if (CONSTANTS[configuration.blockchain].USD == configuration.token) {
               return 1.00 / fixedCurrencyConversionRate * fixedAmount;
             } else {
               return route({
@@ -18822,7 +18820,7 @@ var ChangableAmountProvider = (function (props) {
               });
             }
           } else {
-            if (CONSTANTS[configuration.blockchain].USD.toLowerCase() == configuration.token.toLowerCase()) {
+            if (CONSTANTS[configuration.blockchain].USD == configuration.token) {
               return 1.00 / conversionRate * amount;
             } else {
               return route({
@@ -19093,8 +19091,11 @@ var PaymentProvider = (function (props) {
     wallet = _useContext8.wallet;
   var _useContext9 = useContext(PaymentTrackingContext),
     release = _useContext9.release,
-    tracking = _useContext9.tracking,
-    initializePaymentTracking = _useContext9.initializeTracking;
+    synchronousTracking = _useContext9.synchronousTracking,
+    asynchronousTracking = _useContext9.asynchronousTracking,
+    trackingInitialized = _useContext9.trackingInitialized,
+    initializePaymentTracking = _useContext9.initializeTracking,
+    preTrack = _useContext9.preTrack;
   var _useContext10 = useContext(TransactionTrackingContext),
     foundTransaction = _useContext10.foundTransaction,
     initializeTransactionTracking = _useContext10.initializeTracking;
@@ -19115,7 +19116,7 @@ var PaymentProvider = (function (props) {
     paymentState = _useState8[0],
     setPaymentState = _useState8[1];
   var paymentSucceeded = function paymentSucceeded(transaction) {
-    if (tracking != true) {
+    if (synchronousTracking == false && (asynchronousTracking == false || trackingInitialized == true)) {
       setClosable(true);
     }
     setPaymentState('success');
@@ -19124,43 +19125,47 @@ var PaymentProvider = (function (props) {
     }
   };
   var paymentFailed = function paymentFailed(transaction, error) {
+    if (asynchronousTracking == false || trackingInitialized == true) {
+      setClosable(true);
+    }
+    set(['PaymentFailed']);
+    setPaymentState('failed');
     if (failed) {
       failed(transaction, error);
     }
-    setClosable(true);
-    set(['PaymentFailed']);
   };
   var pay = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
       var stop, currentBlock;
       return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!before) {
-                _context.next = 6;
-                break;
-              }
-              _context.next = 3;
-              return before(payment.route.transaction);
-            case 3:
-              stop = _context.sent;
-              if (!(stop === false)) {
-                _context.next = 6;
-                break;
-              }
-              return _context.abrupt("return");
-            case 6:
-              setClosable(false);
-              setPaymentState('paying');
-              setUpdatable(false);
-              _context.next = 11;
-              return request({
-                blockchain: payment.route.transaction.blockchain,
-                method: 'latestBlockNumber'
-              });
-            case 11:
-              currentBlock = _context.sent;
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!before) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 3;
+            return before(payment.route.transaction);
+          case 3:
+            stop = _context.sent;
+            if (!(stop === false)) {
+              _context.next = 6;
+              break;
+            }
+            return _context.abrupt("return");
+          case 6:
+            setClosable(false);
+            setPaymentState('paying');
+            setUpdatable(false);
+            _context.next = 11;
+            return request({
+              blockchain: payment.route.transaction.blockchain,
+              method: 'latestBlockNumber'
+            });
+          case 11:
+            currentBlock = _context.sent;
+            _context.next = 14;
+            return preTrack(currentBlock, payment.route).then(function () {
               wallet.sendTransaction(Object.assign({}, payment.route.transaction, {
                 sent: function sent(transaction) {
                   initializeTransactionTracking(transaction, currentBlock);
@@ -19178,14 +19183,20 @@ var PaymentProvider = (function (props) {
                 setPaymentState('initialized');
                 setClosable(true);
                 setUpdatable(true);
-                if ((error === null || error === void 0 ? void 0 : error.code) == 'WRONG_NETWORK') {
+                if ((error === null || error === void 0 ? void 0 : error.code) == 'WRONG_NETWORK' || (error === null || error === void 0 ? void 0 : error.code) == 'NOT_SUPPORTED') {
                   navigate('WrongNetwork');
                 }
               });
-            case 13:
-            case "end":
-              return _context.stop();
-          }
+            })["catch"](function (e) {
+              console.log(e);
+              setPaymentState('initialized');
+              setClosable(true);
+              setUpdatable(true);
+              navigate('PreTrackingFailed');
+            });
+          case 14:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
@@ -19216,6 +19227,11 @@ var PaymentProvider = (function (props) {
       setPaymentState('success');
     }
   }, [release]);
+  useEffect(function () {
+    if (asynchronousTracking && trackingInitialized && (paymentState == 'success' || paymentState == 'failed')) {
+      setClosable(true);
+    }
+  }, [trackingInitialized, paymentState]);
   useEffect(function () {
     if (recover) {
       setClosable(false);
@@ -19251,7 +19267,7 @@ var PaymentProvider = (function (props) {
   useEffect(function () {
     if (foundTransaction && foundTransaction.id && foundTransaction.status) {
       var newTransaction;
-      if (foundTransaction.id.toLowerCase() != transaction.id.toLowerCase()) {
+      if (foundTransaction.id != transaction.id) {
         newTransaction = Object.assign({}, transaction, {
           id: foundTransaction.id,
           url: Blockchain.findByName(transaction.blockchain).explorerUrlFor({
@@ -19321,6 +19337,7 @@ var PaymentProvider = (function (props) {
 });
 
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -19356,14 +19373,13 @@ var routePayments = (function (_ref) {
     account = _ref.account,
     whitelist = _ref.whitelist,
     blacklist = _ref.blacklist,
-    event = _ref.event,
     fee = _ref.fee;
   return route$1({
     accept: accept.map(prepareAcceptedPayments),
     from: mergeFromAccounts(accept, account),
     whitelist: whitelist,
     blacklist: blacklist,
-    event: event,
+    event: 'ifRoutedAndNative',
     fee: fee
   });
 });
@@ -19400,55 +19416,51 @@ var PaymentRoutingProvider = (function (props) {
   var onRoutesUpdate = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(routes) {
       return regenerator.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (routes.length == 0) {
-                setAllRoutes([]);
-                if (props.setMaxRoute) {
-                  props.setMaxRoute(null);
-                }
-              } else {
-                roundAmounts(routes).then( /*#__PURE__*/function () {
-                  var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(roundedRoutes) {
-                    var selectRoute, newSelectRoute;
-                    return regenerator.wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            if (typeof selectedRoute == 'undefined') {
-                              selectRoute = roundedRoutes[0];
-                              setSelectedRoute(selectRoute);
-                            } else {
-                              newSelectRoute = roundedRoutes[roundedRoutes.findIndex(function (route) {
-                                return route.fromToken.address == selectedRoute.fromToken.address && route.blockchain == selectedRoute.blockchain;
-                              })];
-                              if (newSelectRoute) {
-                                if (selectedRoute.fromAmount != newSelectRoute.fromAmount) {
-                                  setUpdatedRouteWithNewPrice(newSelectRoute);
-                                }
-                              }
-                            }
-                            setAllRoutes(roundedRoutes);
-                            if (props.setMaxRoute) {
-                              props.setMaxRoute(findMaxRoute(roundedRoutes));
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (routes.length == 0) {
+              setAllRoutes([]);
+              if (props.setMaxRoute) {
+                props.setMaxRoute(null);
+              }
+            } else {
+              roundAmounts(routes).then( /*#__PURE__*/function () {
+                var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(roundedRoutes) {
+                  var selectRoute, newSelectRoute;
+                  return regenerator.wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        if (typeof selectedRoute == 'undefined') {
+                          selectRoute = roundedRoutes[0];
+                          setSelectedRoute(selectRoute);
+                        } else {
+                          newSelectRoute = roundedRoutes[roundedRoutes.findIndex(function (route) {
+                            return route.fromToken.address == selectedRoute.fromToken.address && route.blockchain == selectedRoute.blockchain;
+                          })];
+                          if (newSelectRoute) {
+                            if (selectedRoute.fromAmount != newSelectRoute.fromAmount) {
+                              setUpdatedRouteWithNewPrice(newSelectRoute);
                             }
-                          case 3:
-                          case "end":
-                            return _context.stop();
+                          }
                         }
-                      }
-                    }, _callee);
-                  }));
-                  return function (_x2) {
-                    return _ref2.apply(this, arguments);
-                  };
-                }());
-              }
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
+                        setAllRoutes(roundedRoutes);
+                        if (props.setMaxRoute) {
+                          props.setMaxRoute(findMaxRoute(roundedRoutes));
+                        }
+                      case 3:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                return function (_x2) {
+                  return _ref2.apply(this, arguments);
+                };
+              }());
+            }
+          case 1:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
     }));
@@ -19484,29 +19496,27 @@ var PaymentRoutingProvider = (function (props) {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3(route, amountBN) {
       var readableAmount, roundedAmountBN;
       return regenerator.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              if (!route.directTransfer) {
-                _context3.next = 2;
-                break;
-              }
-              return _context3.abrupt("return", route);
-            case 2:
-              _context3.next = 4;
-              return route.fromToken.readable(amountBN || route.transaction.params.amounts[0]);
-            case 4:
-              readableAmount = _context3.sent;
-              _context3.next = 7;
-              return route.fromToken.BigNumber(round(readableAmount));
-            case 7:
-              roundedAmountBN = _context3.sent;
-              updateRouteAmount(route, roundedAmountBN);
-              return _context3.abrupt("return", route);
-            case 10:
-            case "end":
-              return _context3.stop();
-          }
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!route.directTransfer) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return", route);
+          case 2:
+            _context3.next = 4;
+            return route.fromToken.readable(amountBN || route.transaction.params.amounts[0]);
+          case 4:
+            readableAmount = _context3.sent;
+            _context3.next = 7;
+            return route.fromToken.BigNumber(round(readableAmount));
+          case 7:
+            roundedAmountBN = _context3.sent;
+            updateRouteAmount(route, roundedAmountBN);
+            return _context3.abrupt("return", route);
+          case 10:
+          case "end":
+            return _context3.stop();
         }
       }, _callee3);
     }));
@@ -19517,16 +19527,14 @@ var PaymentRoutingProvider = (function (props) {
   var roundAmounts = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4(routes) {
       return regenerator.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              return _context4.abrupt("return", Promise.all(routes.map(function (route) {
-                return roundAmount(route);
-              })));
-            case 1:
-            case "end":
-              return _context4.stop();
-          }
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            return _context4.abrupt("return", Promise.all(routes.map(function (route) {
+              return roundAmount(route);
+            })));
+          case 1:
+          case "end":
+            return _context4.stop();
         }
       }, _callee4);
     }));
@@ -19537,15 +19545,13 @@ var PaymentRoutingProvider = (function (props) {
   var updateRouteWithNewPrice = /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee5() {
       return regenerator.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              setSelectedRoute(_objectSpread({}, updatedRouteWithNewPrice));
-              setUpdatedRouteWithNewPrice(null);
-            case 2:
-            case "end":
-              return _context5.stop();
-          }
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            setSelectedRoute(_objectSpread({}, updatedRouteWithNewPrice));
+            setUpdatedRouteWithNewPrice(null);
+          case 2:
+          case "end":
+            return _context5.stop();
         }
       }, _callee5);
     }));
@@ -19625,6 +19631,7 @@ var PaymentValueProvider = (function (props) {
     if (updatable == false || (payment === null || payment === void 0 ? void 0 : payment.route) == undefined) {
       return;
     }
+    setPaymentValueLoss(null);
     Promise.all([route({
       blockchain: payment.route.blockchain,
       tokenIn: payment.route.fromToken.address,
@@ -19660,7 +19667,7 @@ var PaymentValueProvider = (function (props) {
         }
       }
       var fromTokenUSDAmount;
-      if (payment.route.fromToken.address.toLowerCase() == CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
+      if (payment.route.fromToken.address == CONSTANTS[payment.route.blockchain].USD) {
         fromTokenUSDAmount = payment.route.fromAmount.toString();
       } else if (fromTokenUSDRoute == undefined) {
         setPaymentValue('');
@@ -20075,6 +20082,16 @@ var DigitalWalletIcon = (function (props) {
   }));
 });
 
+var blockTimes = {
+  // in seconds
+  ethereum: 13,
+  bsc: 4,
+  polygon: 3
+};
+var etaForConfirmations = (function (blockchain, confirmationsRequired, confirmationsPassed) {
+  return (confirmationsRequired - confirmationsPassed) * blockTimes[blockchain];
+});
+
 var LoadingText = (function (props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "LoadingText"
@@ -20092,9 +20109,13 @@ var Footer = (function () {
     _useContext.amount;
     _useContext.amountsMissing;
   var _useContext2 = useContext(PaymentTrackingContext),
-    tracking = _useContext2.tracking,
+    synchronousTracking = _useContext2.synchronousTracking,
+    asynchronousTracking = _useContext2.asynchronousTracking,
+    trackingInitialized = _useContext2.trackingInitialized,
     release = _useContext2.release,
-    forwardTo = _useContext2.forwardTo;
+    forwardTo = _useContext2.forwardTo,
+    confirmationsRequired = _useContext2.confirmationsRequired,
+    confirmationsPassed = _useContext2.confirmationsPassed;
   var _useContext3 = useContext(PaymentContext),
     payment = _useContext3.payment,
     paymentState = _useContext3.paymentState,
@@ -20113,11 +20134,54 @@ var Footer = (function () {
     _useContext6.navigate;
   var _useContext7 = useContext(ClosableContext),
     close = _useContext7.close;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    secondsLeft = _useState2[0],
+    setSecondsLeft = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    secondsLeftCountdown = _useState4[0],
+    setSecondsLeftCountdown = _useState4[1];
+  useEffect(function () {
+    if (confirmationsRequired) {
+      var interval = setInterval(function () {
+        setSecondsLeftCountdown(secondsLeftCountdown + 1);
+      }, 1000);
+      return function () {
+        clearInterval(interval);
+      };
+    }
+  }, [confirmationsRequired, secondsLeftCountdown]);
+  useEffect(function () {
+    if (confirmationsPassed) {
+      setSecondsLeft(etaForConfirmations(payment.blockchain, confirmationsRequired, confirmationsPassed) - secondsLeftCountdown);
+    }
+  }, [confirmationsPassed, secondsLeftCountdown]);
+  useEffect(function () {
+    if (confirmationsPassed) {
+      setSecondsLeftCountdown(0);
+    }
+  }, [confirmationsPassed]);
   var trackingInfo = function trackingInfo() {
-    if (tracking != true) {
+    if (synchronousTracking == false && asynchronousTracking == false || asynchronousTracking && trackingInitialized) {
       return null;
-    }
-    if (release) {
+    } else if (asynchronousTracking && trackingInitialized == false) {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "Card transparent small disabled"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "CardImage"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "TextCenter"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "Loading Icon"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "CardBody"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "CardBodyWrapper"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "Opacity05"
+      }, "Initializing tracking")))));
+    } else if (release) {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/React.createElement("div", {
@@ -20148,7 +20212,9 @@ var Footer = (function () {
         className: "CardBodyWrapper"
       }, /*#__PURE__*/React.createElement("div", {
         className: "Opacity05"
-      }, "Validating payment")))));
+      }, "Validating payment", confirmationsRequired && secondsLeft > 0 && /*#__PURE__*/React.createElement("span", {
+        title: "".concat(confirmationsPassed, "/").concat(confirmationsRequired, " required confirmations")
+      }, " ", secondsLeft, "s"))))));
     }
   };
   var additionalPaymentInformation = function additionalPaymentInformation() {
@@ -20175,7 +20241,7 @@ var Footer = (function () {
         className: "PaddingBottomS"
       }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
         className: "Card transparent small",
-        title: "Payment has been confirmed by the network",
+        title: "Transaction has been confirmed by the network",
         href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
         target: "_blank",
         rel: "noopener noreferrer"
@@ -20191,7 +20257,7 @@ var Footer = (function () {
         className: "CardBodyWrapper"
       }, /*#__PURE__*/React.createElement("div", {
         className: "Opacity05"
-      }, "Payment confirmed"))))), trackingInfo());
+      }, "Transaction confirmed"))))), trackingInfo());
     }
   };
   var approvalButton = function approvalButton() {
@@ -20199,7 +20265,7 @@ var Footer = (function () {
       return null;
     } else if (paymentState == 'initialized') {
       return /*#__PURE__*/React.createElement("div", {
-        className: "PaddingBottomS"
+        className: "PaddingBottomXS"
       }, /*#__PURE__*/React.createElement("button", {
         className: "ButtonPrimary",
         onClick: approve,
@@ -20257,7 +20323,7 @@ var Footer = (function () {
         rel: "noopener noreferrer"
       }, /*#__PURE__*/React.createElement(LoadingText, null, "Paying"));
     } else if (paymentState == 'success') {
-      if (tracking == true) {
+      if (synchronousTracking == true) {
         if (release) {
           if (forwardTo) {
             return /*#__PURE__*/React.createElement("a", {
@@ -20277,6 +20343,11 @@ var Footer = (function () {
             onClick: function onClick() {}
           }, "Continue");
         }
+      } else if (asynchronousTracking == true && trackingInitialized == false) {
+        return /*#__PURE__*/React.createElement("button", {
+          className: "ButtonPrimary disabled",
+          onClick: function onClick() {}
+        }, "Close");
       } else {
         return /*#__PURE__*/React.createElement("button", {
           className: "ButtonPrimary",
@@ -20400,7 +20471,7 @@ var PaymentFailedDialog = (function () {
       className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
     }, /*#__PURE__*/React.createElement("strong", {
       className: "FontSizeM"
-    }, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/React.createElement("div", {
+    }, "Unfortunately executing your payment failed, but you can try again."), transaction && /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS"
     }, /*#__PURE__*/React.createElement("a", {
       className: "Link",
@@ -20516,37 +20587,59 @@ var PaymentTrackingProvider = (function (props) {
     integration = _useContext2.integration,
     link = _useContext2.link,
     type = _useContext2.type;
+  var _useContext3 = useContext(WalletContext),
+    account = _useContext3.account;
+    _useContext3.wallet;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     transaction = _useState2[0],
     setTransaction = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    afterBlock = _useState4[0],
-    setAfterBlock = _useState4[1];
+    confirmationsRequired = _useState4[0],
+    setConfirmationsRequired = _useState4[1];
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
-    paymentRoute = _useState6[0],
-    setPaymentRoute = _useState6[1];
-  var _useState7 = useState(!!(track && (track.endpoint || typeof track.method == 'function') && track.async != true)),
-    _useState8 = _slicedToArray(_useState7, 1),
-    tracking = _useState8[0];
-  var _useState9 = useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function') && track.async != true)),
-    _useState10 = _slicedToArray(_useState9, 1),
-    polling = _useState10[0];
-  var _useState11 = useState(false),
+    confirmationsPassed = _useState6[0],
+    setConfirmationsPassed = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    afterBlock = _useState8[0],
+    setAfterBlock = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2);
+    _useState10[0];
+    _useState10[1];
+  var _useState11 = useState(),
     _useState12 = _slicedToArray(_useState11, 2),
-    release = _useState12[0],
-    setRelease = _useState12[1];
-  var _useState13 = useState(),
+    paymentRoute = _useState12[0],
+    setPaymentRoute = _useState12[1];
+  var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    forwardTo = _useState14[0],
-    setForwardTo = _useState14[1];
-  var _useContext3 = useContext(ClosableContext),
-    setClosable = _useContext3.setClosable;
-  var _useContext4 = useContext(NavigateContext),
-    navigate = _useContext4.navigate;
-    _useContext4.set;
+    trackingInitialized = _useState14[0],
+    setTrackingInitialized = _useState14[1];
+  var _useState15 = useState(!!(track && (track.endpoint || typeof track.method == 'function') && track.async != true)),
+    _useState16 = _slicedToArray(_useState15, 1),
+    synchronousTracking = _useState16[0];
+  var _useState17 = useState(!!(track && track.async == true)),
+    _useState18 = _slicedToArray(_useState17, 1),
+    asynchronousTracking = _useState18[0];
+  var _useState19 = useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function') && track.async != true)),
+    _useState20 = _slicedToArray(_useState19, 1),
+    polling = _useState20[0];
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    release = _useState22[0],
+    setRelease = _useState22[1];
+  var _useState23 = useState(),
+    _useState24 = _slicedToArray(_useState23, 2),
+    forwardTo = _useState24[0],
+    setForwardTo = _useState24[1];
+  var _useContext4 = useContext(ClosableContext),
+    setClosable = _useContext4.setClosable;
+  var _useContext5 = useContext(NavigateContext),
+    navigate = _useContext5.navigate;
+    _useContext5.set;
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.com/cable');
     socket.onopen = function (event) {
@@ -20554,14 +20647,18 @@ var PaymentTrackingProvider = (function (props) {
         command: 'subscribe',
         identifier: JSON.stringify({
           blockchain: transaction.blockchain,
-          sender: transaction.from.toLowerCase(),
-          nonce: transaction.nonce,
+          sender: transaction.from,
+          nonce: transaction.nonce.toString(),
           channel: 'PaymentChannel'
         })
       };
       socket.send(JSON.stringify(msg));
     };
-    socket.onclose = function (event) {};
+    socket.onclose = function (event) {
+      if (!event || event.code != 1000) {
+        openSocket(transaction);
+      }
+    };
     socket.onmessage = function (event) {
       var item = JSON.parse(event.data);
       if (item.type === "ping" || !item.message) {
@@ -20574,12 +20671,15 @@ var PaymentTrackingProvider = (function (props) {
         setRelease(true);
         setClosable(!item.message.forward_to);
         setForwardTo(item.message.forward_to);
-        socket.close();
+        socket.close(1000);
         if (!!item.message.forward_to) {
           setTimeout(function () {
             props.document.location.href = item.message.forward_to;
           }, 200);
         }
+      } else if (item.message.confirmations) {
+        setConfirmationsRequired(item.message.confirmations.required);
+        setConfirmationsPassed(item.message.confirmations.passed);
       }
     };
     socket.onerror = function (error) {
@@ -20624,10 +20724,10 @@ var PaymentTrackingProvider = (function (props) {
     var _paymentRoute$feeAmou;
     callTracking({
       blockchain: transaction.blockchain,
-      transaction: transaction.id.toLowerCase(),
-      sender: transaction.from.toLowerCase(),
-      nonce: transaction.nonce,
-      after_block: afterBlock,
+      transaction: transaction.id,
+      sender: transaction.from,
+      nonce: transaction.nonce.toString(),
+      after_block: afterBlock.toString(),
       from_token: paymentRoute.fromToken.address,
       from_amount: paymentRoute.fromAmount.toString(),
       from_decimals: paymentRoute.fromDecimals,
@@ -20636,6 +20736,7 @@ var PaymentTrackingProvider = (function (props) {
       to_decimals: paymentRoute.toDecimals,
       fee_amount: paymentRoute === null || paymentRoute === void 0 ? void 0 : (_paymentRoute$feeAmou = paymentRoute.feeAmount) === null || _paymentRoute$feeAmou === void 0 ? void 0 : _paymentRoute$feeAmou.toString()
     }).then(function (response) {
+      setTrackingInitialized(true);
       console.log('PAYMENT TRACKING INITIALIZED');
     })["catch"](function (error) {
       console.log('PAYMENT TRACKING FAILED', error);
@@ -20648,10 +20749,10 @@ var PaymentTrackingProvider = (function (props) {
     }
     var payment = {
       blockchain: transaction.blockchain,
-      transaction: transaction.id.toLowerCase(),
-      sender: transaction.from.toLowerCase(),
-      nonce: transaction.nonce,
-      after_block: afterBlock,
+      transaction: transaction.id,
+      sender: transaction.from,
+      nonce: transaction.nonce.toString(),
+      after_block: afterBlock.toString(),
       to_token: paymentRoute.toToken.address
     };
     var handlePollingResponse = function handlePollingResponse(data) {
@@ -20692,7 +20793,7 @@ var PaymentTrackingProvider = (function (props) {
     if (!polling) {
       return;
     }
-    if (!tracking) {
+    if (!synchronousTracking) {
       return;
     }
     var pollingInterval = setInterval(function () {
@@ -20711,16 +20812,16 @@ var PaymentTrackingProvider = (function (props) {
       body: JSON.stringify({
         blockchain: transaction.blockchain,
         transaction: transaction.id,
-        sender: transaction.from.toLowerCase(),
-        nonce: transaction.nonce,
+        sender: transaction.from,
+        nonce: transaction.nonce.toString(),
         receiver: paymentRoute.toAddress,
         token: paymentRoute.toToken.address,
         amount: paymentRoute.fee ? ethers.utils.formatUnits(paymentRoute.transaction.params.amounts[1], paymentRoute.toDecimals) : ethers.utils.formatUnits(paymentRoute.toAmount, paymentRoute.toDecimals),
         confirmations: 1,
-        after_block: afterBlock,
+        after_block: afterBlock.toString(),
         uuid: transaction.id,
         payload: {
-          sender_id: transaction.from.toLowerCase(),
+          sender_id: transaction.from,
           sender_token_id: paymentRoute.fromToken.address,
           sender_amount: ethers.utils.formatUnits(paymentRoute.fromAmount, paymentRoute.fromDecimals),
           integration: integration,
@@ -20744,10 +20845,10 @@ var PaymentTrackingProvider = (function (props) {
   };
   var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
     storePayment(transaction, afterBlock, paymentRoute);
-    if (tracking || track && track.async == true) {
+    if (synchronousTracking || track && track.async == true) {
       startTracking(transaction, afterBlock, paymentRoute);
     }
-    if (tracking == false) {
+    if (synchronousTracking == false) {
       return;
     }
     setTransaction(transaction);
@@ -20755,13 +20856,95 @@ var PaymentTrackingProvider = (function (props) {
     setPaymentRoute(paymentRoute);
     openSocket(transaction);
   };
+  var preTrack = function preTrack(afterBlock, paymentRoute) {
+    if (!synchronousTracking && !asynchronousTracking) {
+      return Promise.resolve();
+    }
+    return new Promise( /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(resolve, reject) {
+        var _paymentRoute$feeAmou2;
+        var payment;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.t0 = paymentRoute.blockchain;
+              _context.t1 = account;
+              _context.next = 4;
+              return request({
+                blockchain: paymentRoute.blockchain,
+                address: account,
+                method: 'transactionCount'
+              });
+            case 4:
+              _context.t2 = _context.sent.toString();
+              _context.t3 = afterBlock.toString();
+              _context.t4 = paymentRoute.fromToken.address;
+              _context.t5 = paymentRoute.fromAmount.toString();
+              _context.t6 = paymentRoute.fromDecimals;
+              _context.t7 = paymentRoute.toToken.address;
+              _context.t8 = paymentRoute.toAmount.toString();
+              _context.t9 = paymentRoute.toDecimals;
+              _context.t10 = paymentRoute === null || paymentRoute === void 0 ? void 0 : (_paymentRoute$feeAmou2 = paymentRoute.feeAmount) === null || _paymentRoute$feeAmou2 === void 0 ? void 0 : _paymentRoute$feeAmou2.toString();
+              payment = {
+                blockchain: _context.t0,
+                sender: _context.t1,
+                nonce: _context.t2,
+                after_block: _context.t3,
+                from_token: _context.t4,
+                from_amount: _context.t5,
+                from_decimals: _context.t6,
+                to_token: _context.t7,
+                to_amount: _context.t8,
+                to_decimals: _context.t9,
+                fee_amount: _context.t10
+              };
+              if (!track.endpoint) {
+                _context.next = 18;
+                break;
+              }
+              return _context.abrupt("return", fetch(track.endpoint, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payment)
+              }).then(function (response) {
+                if (response.status == 200 || response.status == 201) {
+                  console.log('PAYMENT PRETRACKING INITIALIZED');
+                  return resolve();
+                } else {
+                  return reject('PRETRACKING REQUEST FAILED');
+                }
+              }));
+            case 18:
+              if (track.method) {
+                track.method(payment).then(resolve)["catch"](reject);
+              } else {
+                reject('No tracking defined!');
+              }
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  };
   return /*#__PURE__*/React.createElement(PaymentTrackingContext.Provider, {
     value: {
-      tracking: tracking,
+      synchronousTracking: synchronousTracking,
+      asynchronousTracking: asynchronousTracking,
       initializeTracking: initializeTracking,
+      preTrack: preTrack,
+      trackingInitialized: trackingInitialized,
       continueTryTracking: continueTryTracking,
       release: release,
-      forwardTo: forwardTo
+      forwardTo: forwardTo,
+      confirmationsRequired: confirmationsRequired,
+      confirmationsPassed: confirmationsPassed
     }
   }, props.children);
 });
@@ -20786,7 +20969,7 @@ var TransactionTrackingProvider = (function (props) {
   useEffect(function () {
     if (polling) {
       var poll = function poll() {
-        fetch("https://public.depay.com/transactions/".concat(givenTransaction.blockchain, "/").concat(givenTransaction.from.toLowerCase(), "/").concat(givenTransaction.nonce)).then(function (response) {
+        fetch("https://public.depay.com/transactions/".concat(givenTransaction.blockchain, "/").concat(givenTransaction.from, "/").concat(givenTransaction.nonce)).then(function (response) {
           if (response.status == 200) {
             response.json().then(function (data) {
               if (data.status != 'pending') {
@@ -20819,10 +21002,10 @@ var TransactionTrackingProvider = (function (props) {
       },
       body: JSON.stringify({
         id: transaction.id,
-        after_block: afterBlock,
+        after_block: afterBlock.toString(),
         blockchain: transaction.blockchain,
-        sender: transaction.from.toLowerCase(),
-        nonce: transaction.nonce
+        sender: transaction.from,
+        nonce: transaction.nonce.toString()
       })
     }).then(function (response) {
       if (response.status == 200 || response.status == 201) {
@@ -20847,14 +21030,18 @@ var TransactionTrackingProvider = (function (props) {
         command: 'subscribe',
         identifier: JSON.stringify({
           blockchain: transaction.blockchain,
-          sender: transaction.from.toLowerCase(),
-          nonce: transaction.nonce,
+          sender: transaction.from,
+          nonce: transaction.nonce.toString(),
           channel: 'TransactionChannel'
         })
       };
       socket.send(JSON.stringify(msg));
     };
-    socket.onclose = function (event) {};
+    socket.onclose = function (event) {
+      if (!event || event.code != 1000) {
+        openSocket(transaction);
+      }
+    };
     socket.onmessage = function (event) {
       var item = JSON.parse(event.data);
       if (item.type === "ping") {
@@ -20862,6 +21049,7 @@ var TransactionTrackingProvider = (function (props) {
       }
       if (item.message && item.message.status && item.message.status != 'pending') {
         setFoundTransaction(item.message);
+        socket.close(1000);
       }
     };
     socket.onerror = function (error) {
@@ -20942,34 +21130,32 @@ var preflight$2 = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
     var accept;
     return regenerator.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            accept = _ref.accept;
-            if (!(!(accept instanceof Array) || accept.length == 0)) {
-              _context.next = 3;
-              break;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          accept = _ref.accept;
+          if (!(!(accept instanceof Array) || accept.length == 0)) {
+            _context.next = 3;
+            break;
+          }
+          throw 'You need to set the tokens you accept as donation!';
+        case 3:
+          accept.forEach(function (configuration) {
+            if (typeof configuration.blockchain === 'undefined') {
+              throw 'You need to set the blockchain you want to receive the donation on!';
             }
-            throw 'You need to set the tokens you accept as donation!';
-          case 3:
-            accept.forEach(function (configuration) {
-              if (typeof configuration.blockchain === 'undefined') {
-                throw 'You need to set the blockchain you want to receive the donation on!';
-              }
-              if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
-                throw 'You need to set a supported blockchain!';
-              }
-              if (typeof configuration.token === 'undefined') {
-                throw 'You need to set the token you want to receive as donation!';
-              }
-              if (typeof configuration.receiver === 'undefined') {
-                throw 'You need to set the receiver address that you want to receive the donation!';
-              }
-            });
-          case 4:
-          case "end":
-            return _context.stop();
-        }
+            if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
+              throw 'You need to set a supported blockchain!';
+            }
+            if (typeof configuration.token === 'undefined') {
+              throw 'You need to set the token you want to receive as donation!';
+            }
+            if (typeof configuration.receiver === 'undefined') {
+              throw 'You need to set the receiver address that you want to receive the donation!';
+            }
+          });
+        case 4:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));
@@ -20981,82 +21167,80 @@ var Donation = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
     var amount, accept, event, sent, succeeded, validated, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, closable, integration, link, container, title, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, succeeded = _ref3.succeeded, validated = _ref3.validated, 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, closable = _ref3.closable, integration = _ref3.integration, link = _ref3.link, container = _ref3.container, title = _ref3.title, document = _ref3.document;
-            requireReactVersion();
-            _context2.prev = 2;
-            _context2.next = 5;
-            return preflight$2({
-              accept: accept
-            });
-          case 5:
-            unmount = mount({
-              style: style,
-              container: container,
-              document: ensureDocument(document),
-              closed: closed
-            }, function (unmount) {
-              return function (container) {
-                return /*#__PURE__*/React.createElement(ErrorProvider, {
-                  errorCallback: error,
-                  container: container,
-                  unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
-                  configuration: {
-                    type: 'donation',
-                    amount: amount,
-                    accept: accept,
-                    currency: currency,
-                    event: event,
-                    track: track,
-                    fee: fee,
-                    sent: sent,
-                    succeeded: succeeded,
-                    validated: validated,
-                    failed: failed,
-                    blacklist: blacklist,
-                    whitelist: whitelist,
-                    providers: providers,
-                    integration: integration,
-                    link: link,
-                    title: title
-                  }
-                }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                  unmount: unmount,
-                  closable: closable
-                }, /*#__PURE__*/React.createElement(WalletProvider, {
-                  container: container,
-                  connected: connected,
-                  unmount: unmount
-                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
-                  accept: accept
-                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
-                  document: ensureDocument(document)
-                }, /*#__PURE__*/React.createElement(DonationRoutingProvider, {
-                  container: container,
-                  document: document
-                }, /*#__PURE__*/React.createElement(DonationStack, {
-                  document: document,
-                  container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
-              };
-            });
-            return _context2.abrupt("return", {
-              unmount: unmount
-            });
-          case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](2);
-            console.log('critical error', _context2.t0);
-            if (critical != undefined) {
-              critical(_context2.t0);
-            }
-          case 13:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, succeeded = _ref3.succeeded, validated = _ref3.validated, 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, closable = _ref3.closable, integration = _ref3.integration, link = _ref3.link, container = _ref3.container, title = _ref3.title, document = _ref3.document;
+          requireReactVersion();
+          _context2.prev = 2;
+          _context2.next = 5;
+          return preflight$2({
+            accept: accept
+          });
+        case 5:
+          unmount = mount({
+            style: style,
+            container: container,
+            document: ensureDocument(document),
+            closed: closed
+          }, function (unmount) {
+            return function (container) {
+              return /*#__PURE__*/React.createElement(ErrorProvider, {
+                errorCallback: error,
+                container: container,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                configuration: {
+                  type: 'donation',
+                  amount: amount,
+                  accept: accept,
+                  currency: currency,
+                  event: event,
+                  track: track,
+                  fee: fee,
+                  sent: sent,
+                  succeeded: succeeded,
+                  validated: validated,
+                  failed: failed,
+                  blacklist: blacklist,
+                  whitelist: whitelist,
+                  providers: providers,
+                  integration: integration,
+                  link: link,
+                  title: title
+                }
+              }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                unmount: unmount,
+                closable: closable
+              }, /*#__PURE__*/React.createElement(WalletProvider, {
+                container: container,
+                connected: connected,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                accept: accept
+              }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
+                document: ensureDocument(document)
+              }, /*#__PURE__*/React.createElement(DonationRoutingProvider, {
+                container: container,
+                document: document
+              }, /*#__PURE__*/React.createElement(DonationStack, {
+                document: document,
+                container: container
+              }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
+            };
+          });
+          return _context2.abrupt("return", {
+            unmount: unmount
+          });
+        case 9:
+          _context2.prev = 9;
+          _context2.t0 = _context2["catch"](2);
+          console.log('critical error', _context2.t0);
+          if (critical != undefined) {
+            critical(_context2.t0);
+          }
+        case 13:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, null, [[2, 9]]);
   }));
@@ -21177,46 +21361,44 @@ var Login = function Login(options) {
   return new Promise( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_resolve, reject) {
       return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              Connect().then(function () {
-                mount({
-                  style: style,
-                  document: ensureDocument(document)
-                }, function (unmount) {
-                  var userClosedDialog = function userClosedDialog() {
-                    reject('USER_CLOSED_DIALOG');
-                    unmount();
-                  };
-                  return function (container) {
-                    return /*#__PURE__*/React.createElement(ErrorProvider, {
-                      errorCallback: error,
-                      container: container,
-                      unmount: unmount
-                    }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
-                      configuration: {
-                        message: message,
-                        endpoint: endpoint || '/login',
-                        recover: recover
-                      }
-                    }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                      unmount: userClosedDialog
-                    }, /*#__PURE__*/React.createElement(LoginStack, {
-                      document: document,
-                      container: container,
-                      resolve: function resolve(account) {
-                        unmount();
-                        _resolve(account);
-                      }
-                    }), /*#__PURE__*/React.createElement(PoweredBy, null)))));
-                  };
-                });
-              })["catch"](reject);
-            case 1:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            Connect().then(function () {
+              mount({
+                style: style,
+                document: ensureDocument(document)
+              }, function (unmount) {
+                var userClosedDialog = function userClosedDialog() {
+                  reject('USER_CLOSED_DIALOG');
+                  unmount();
+                };
+                return function (container) {
+                  return /*#__PURE__*/React.createElement(ErrorProvider, {
+                    errorCallback: error,
+                    container: container,
+                    unmount: unmount
+                  }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                    configuration: {
+                      message: message,
+                      endpoint: endpoint || '/login',
+                      recover: recover
+                    }
+                  }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                    unmount: userClosedDialog
+                  }, /*#__PURE__*/React.createElement(LoginStack, {
+                    document: document,
+                    container: container,
+                    resolve: function resolve(account) {
+                      unmount();
+                      _resolve(account);
+                    }
+                  }), /*#__PURE__*/React.createElement(PoweredBy, null)))));
+                };
+              });
+            })["catch"](reject);
+          case 1:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
@@ -21391,11 +21573,49 @@ var PaymentOverviewDialog = (function (props) {
   });
 });
 
+var PreTrackingFailedDialog = (function () {
+  var _useContext = useContext(PaymentContext);
+    _useContext.transaction;
+  var _useContext2 = useContext(NavigateStackContext),
+    navigate = _useContext2.navigate;
+  var tryAgain = function tryAgain() {
+    navigate('back');
+  };
+  return /*#__PURE__*/React.createElement(Dialog$1, {
+    stacked: false,
+    header: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingLeftM PaddingRightM"
+    }),
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "TextCenter"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "GraphicWrapper"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "Graphic",
+      src: ErrorGraphic
+    })), /*#__PURE__*/React.createElement("h1", {
+      className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
+    }, "Tracking payment failed"), /*#__PURE__*/React.createElement("div", {
+      className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
+    }, /*#__PURE__*/React.createElement("strong", {
+      className: "FontSizeM"
+    }, "Please ensure you are connected to the internet, then click \"Try again\"."), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS"
+    }, /*#__PURE__*/React.createElement("span", null, "If this keeps happening, please report it.")))),
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "ButtonPrimary",
+      onClick: tryAgain
+    }, "Try again"))
+  });
+});
+
 var TrackingFailedDialog = (function () {
   var _useContext = useContext(PaymentTrackingContext),
     continueTryTracking = _useContext.continueTryTracking;
-  var _useContext2 = useContext(PaymentContext),
-    transaction = _useContext2.transaction;
+  var _useContext2 = useContext(PaymentContext);
+    _useContext2.transaction;
   var _useContext3 = useContext(NavigateStackContext),
     navigate = _useContext3.navigate;
   var tryAgain = function tryAgain() {
@@ -21422,10 +21642,7 @@ var TrackingFailedDialog = (function () {
       className: "FontSizeM"
     }, "Please ensure you are connected to the internet, then click \"Try again\"."), /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS"
-    }, /*#__PURE__*/React.createElement("span", null, "If this keeps happening, "), /*#__PURE__*/React.createElement("a", {
-      className: "Link",
-      href: "mailto:support@depay.com?subject=Payment%20tracking%20failed&body=Tracking%20my%20payment%20failed%0A%0ATransaction:%20".concat(transaction.url)
-    }, "please report it"), "."))),
+    }, /*#__PURE__*/React.createElement("span", null, "If this keeps happening, please report it.")))),
     footer: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
     }, /*#__PURE__*/React.createElement("button", {
@@ -21454,7 +21671,8 @@ var PaymentStack = (function (props) {
       ChangePayment: /*#__PURE__*/React.createElement(ChangePaymentDialog, null),
       PaymentFailed: /*#__PURE__*/React.createElement(PaymentFailedDialog, null),
       WrongNetwork: /*#__PURE__*/React.createElement(WrongNetworkDialog, null),
-      TrackingFailed: /*#__PURE__*/React.createElement(TrackingFailedDialog, null)
+      TrackingFailed: /*#__PURE__*/React.createElement(TrackingFailedDialog, null),
+      PreTrackingFailed: /*#__PURE__*/React.createElement(PreTrackingFailedDialog, null)
     }
   });
 });
@@ -21463,37 +21681,35 @@ var preflight$1 = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
     var accept, recover;
     return regenerator.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            accept = _ref.accept, recover = _ref.recover;
-            if (!recover) {
-              _context.next = 3;
-              break;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          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!';
             }
-            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!';
-              }
-              if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
-                throw 'You need to set a supported blockchain!';
-              }
-              if (typeof configuration.token === 'undefined' && typeof configuration.fromToken === 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
-                throw 'You need to set the token you want to receive as payment!';
-              }
-              if (typeof configuration.token === 'undefined' && typeof configuration.fromToken !== 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
-                throw 'You need to set the fromToken, fromAmount and toToken!';
-              }
-              if (typeof configuration.receiver === 'undefined') {
-                throw 'You need to set the receiver address that you want to receive the payment!';
-              }
-            });
-          case 4:
-          case "end":
-            return _context.stop();
-        }
+            if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
+              throw 'You need to set a supported blockchain!';
+            }
+            if (typeof configuration.token === 'undefined' && typeof configuration.fromToken === 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
+              throw 'You need to set the token you want to receive as payment!';
+            }
+            if (typeof configuration.token === 'undefined' && typeof configuration.fromToken !== 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
+              throw 'You need to set the fromToken, fromAmount and toToken!';
+            }
+            if (typeof configuration.receiver === 'undefined') {
+              throw 'You need to set the receiver address that you want to receive the payment!';
+            }
+          });
+        case 4:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));
@@ -21503,93 +21719,91 @@ var preflight$1 = /*#__PURE__*/function () {
 }();
 var Payment = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var accept, amount, event, sent, succeeded, validated, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, link, container, before, document, unmount;
+    var accept, amount, sent, succeeded, validated, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, link, container, before, 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, succeeded = _ref3.succeeded, validated = _ref3.validated, 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, closable = _ref3.closable, integration = _ref3.integration, link = _ref3.link, container = _ref3.container, before = _ref3.before, document = _ref3.document;
-            requireReactVersion();
-            _context2.prev = 2;
-            _context2.next = 5;
-            return preflight$1({
-              accept: accept,
-              recover: recover
-            });
-          case 5:
-            unmount = mount({
-              style: style,
-              container: container,
-              document: ensureDocument(document),
-              closed: closed
-            }, function (unmount) {
-              return function (container) {
-                return /*#__PURE__*/React.createElement(ErrorProvider, {
-                  errorCallback: error,
-                  container: container,
-                  unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
-                  configuration: {
-                    type: 'payment',
-                    before: before,
-                    amount: amount,
-                    accept: accept,
-                    currency: currency,
-                    event: event,
-                    sent: sent,
-                    succeeded: succeeded,
-                    validated: validated,
-                    failed: failed,
-                    whitelist: whitelist,
-                    blacklist: blacklist,
-                    providers: providers,
-                    track: track,
-                    fee: fee,
-                    recover: recover,
-                    integration: integration,
-                    link: link
-                  }
-                }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                  unmount: unmount,
-                  closable: closable
-                }, /*#__PURE__*/React.createElement(WalletProvider, {
-                  document: document,
-                  container: container,
-                  connected: connected,
-                  unmount: unmount
-                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
-                  accept: accept
-                }, /*#__PURE__*/React.createElement(PaymentAmountRoutingProvider, {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          accept = _ref3.accept, amount = _ref3.amount, sent = _ref3.sent, succeeded = _ref3.succeeded, validated = _ref3.validated, 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, closable = _ref3.closable, integration = _ref3.integration, link = _ref3.link, container = _ref3.container, before = _ref3.before, document = _ref3.document;
+          requireReactVersion();
+          _context2.prev = 2;
+          _context2.next = 5;
+          return preflight$1({
+            accept: accept,
+            recover: recover
+          });
+        case 5:
+          unmount = mount({
+            style: style,
+            container: container,
+            document: ensureDocument(document),
+            closed: closed
+          }, function (unmount) {
+            return function (container) {
+              return /*#__PURE__*/React.createElement(ErrorProvider, {
+                errorCallback: error,
+                container: container,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                configuration: {
+                  type: 'payment',
+                  before: before,
+                  amount: amount,
                   accept: accept,
+                  currency: currency,
+                  event: event,
+                  sent: sent,
+                  succeeded: succeeded,
+                  validated: validated,
+                  failed: failed,
                   whitelist: whitelist,
                   blacklist: blacklist,
-                  event: event,
-                  fee: fee
-                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
-                  document: ensureDocument(document)
-                }, /*#__PURE__*/React.createElement(PaymentProvider, {
-                  container: container,
-                  document: document
-                }, /*#__PURE__*/React.createElement(PaymentValueProvider, null, /*#__PURE__*/React.createElement(PaymentStack, {
-                  document: document,
-                  container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))))));
-              };
-            });
-            return _context2.abrupt("return", {
-              unmount: unmount
-            });
-          case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](2);
-            console.log('critical error', _context2.t0);
-            if (critical != undefined) {
-              critical(_context2.t0);
-            }
-          case 13:
-          case "end":
-            return _context2.stop();
-        }
+                  providers: providers,
+                  track: track,
+                  fee: fee,
+                  recover: recover,
+                  integration: integration,
+                  link: link
+                }
+              }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                unmount: unmount,
+                closable: closable
+              }, /*#__PURE__*/React.createElement(WalletProvider, {
+                document: document,
+                container: container,
+                connected: connected,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                accept: accept
+              }, /*#__PURE__*/React.createElement(PaymentAmountRoutingProvider, {
+                accept: accept,
+                whitelist: whitelist,
+                blacklist: blacklist,
+                event: event,
+                fee: fee
+              }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
+                document: ensureDocument(document)
+              }, /*#__PURE__*/React.createElement(PaymentProvider, {
+                container: container,
+                document: document
+              }, /*#__PURE__*/React.createElement(PaymentValueProvider, null, /*#__PURE__*/React.createElement(PaymentStack, {
+                document: document,
+                container: container
+              }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))))));
+            };
+          });
+          return _context2.abrupt("return", {
+            unmount: unmount
+          });
+        case 9:
+          _context2.prev = 9;
+          _context2.t0 = _context2["catch"](2);
+          console.log('critical error', _context2.t0);
+          if (critical != undefined) {
+            critical(_context2.t0);
+          }
+        case 13:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, null, [[2, 9]]);
   }));
@@ -21601,15 +21815,14 @@ Payment.preload = function (_ref5) {
   var account = _ref5.account,
     accept = _ref5.accept,
     whitelist = _ref5.whitelist,
-    blacklist = _ref5.blacklist,
-    event = _ref5.event,
-    fee = _ref5.fee;
+    blacklist = _ref5.blacklist;
+    _ref5.event;
+    var fee = _ref5.fee;
   routePayments({
     account: account,
     accept: accept,
     whitelist: whitelist,
     blacklist: blacklist,
-    event: event,
     fee: fee
   });
 };
@@ -21875,31 +22088,29 @@ var preflight = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
     var sell;
     return regenerator.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            sell = _ref.sell;
-            if (!(_typeof(sell) != 'object')) {
-              _context.next = 3;
-              break;
-            }
-            throw 'You need to configure at least 1 "blockchain": "token"';
-          case 3:
-            if (!(Object.keys(sell).length == 0)) {
-              _context.next = 5;
-              break;
-            }
-            throw 'You need to configure at least 1 "blockchain": "token"';
-          case 5:
-            if (!(Object.values(sell).length == 0)) {
-              _context.next = 7;
-              break;
-            }
-            throw 'You need to configure at least 1 "blockchain": "token"';
-          case 7:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          sell = _ref.sell;
+          if (!(_typeof(sell) != 'object')) {
+            _context.next = 3;
+            break;
+          }
+          throw 'You need to configure at least 1 "blockchain": "token"';
+        case 3:
+          if (!(Object.keys(sell).length == 0)) {
+            _context.next = 5;
+            break;
+          }
+          throw 'You need to configure at least 1 "blockchain": "token"';
+        case 5:
+          if (!(Object.values(sell).length == 0)) {
+            _context.next = 7;
+            break;
+          }
+          throw 'You need to configure at least 1 "blockchain": "token"';
+        case 7:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));
@@ -21911,81 +22122,79 @@ var Sale = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
     var amount, sell, sent, succeeded, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, closable, integration, document, accept, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            amount = _ref3.amount, sell = _ref3.sell, sent = _ref3.sent, succeeded = _ref3.succeeded, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, tokenImage = _ref3.tokenImage, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
-            requireReactVersion();
-            _context2.prev = 2;
-            _context2.next = 5;
-            return preflight({
-              sell: sell
-            });
-          case 5:
-            accept = Object.keys(sell).map(function (key) {
-              return {
-                blockchain: key,
-                token: sell[key]
-              };
-            });
-            unmount = mount({
-              style: style,
-              document: ensureDocument(document),
-              closed: closed
-            }, function (unmount) {
-              return function (container) {
-                return /*#__PURE__*/React.createElement(ErrorProvider, {
-                  errorCallback: error,
-                  container: container,
-                  unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
-                  configuration: {
-                    type: 'sale',
-                    tokenImage: tokenImage,
-                    amount: amount,
-                    sell: sell,
-                    currency: currency,
-                    sent: sent,
-                    succeeded: succeeded,
-                    failed: failed,
-                    blacklist: blacklist,
-                    providers: providers,
-                    integration: integration
-                  }
-                }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                  unmount: unmount,
-                  closable: closable
-                }, /*#__PURE__*/React.createElement(WalletProvider, {
-                  container: container,
-                  connected: connected,
-                  unmount: unmount
-                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
-                  accept: accept
-                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
-                  document: ensureDocument(document)
-                }, /*#__PURE__*/React.createElement(SaleRoutingProvider, {
-                  container: container,
-                  document: document
-                }, /*#__PURE__*/React.createElement(SaleStack, {
-                  document: document,
-                  container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
-              };
-            });
-            return _context2.abrupt("return", {
-              unmount: unmount
-            });
-          case 10:
-            _context2.prev = 10;
-            _context2.t0 = _context2["catch"](2);
-            console.log('critical error', _context2.t0);
-            if (critical != undefined) {
-              critical(_context2.t0);
-            }
-          case 14:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          amount = _ref3.amount, sell = _ref3.sell, sent = _ref3.sent, succeeded = _ref3.succeeded, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, tokenImage = _ref3.tokenImage, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+          requireReactVersion();
+          _context2.prev = 2;
+          _context2.next = 5;
+          return preflight({
+            sell: sell
+          });
+        case 5:
+          accept = Object.keys(sell).map(function (key) {
+            return {
+              blockchain: key,
+              token: sell[key]
+            };
+          });
+          unmount = mount({
+            style: style,
+            document: ensureDocument(document),
+            closed: closed
+          }, function (unmount) {
+            return function (container) {
+              return /*#__PURE__*/React.createElement(ErrorProvider, {
+                errorCallback: error,
+                container: container,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                configuration: {
+                  type: 'sale',
+                  tokenImage: tokenImage,
+                  amount: amount,
+                  sell: sell,
+                  currency: currency,
+                  sent: sent,
+                  succeeded: succeeded,
+                  failed: failed,
+                  blacklist: blacklist,
+                  providers: providers,
+                  integration: integration
+                }
+              }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                unmount: unmount,
+                closable: closable
+              }, /*#__PURE__*/React.createElement(WalletProvider, {
+                container: container,
+                connected: connected,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                accept: accept
+              }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
+                document: ensureDocument(document)
+              }, /*#__PURE__*/React.createElement(SaleRoutingProvider, {
+                container: container,
+                document: document
+              }, /*#__PURE__*/React.createElement(SaleStack, {
+                document: document,
+                container: container
+              }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
+            };
+          });
+          return _context2.abrupt("return", {
+            unmount: unmount
+          });
+        case 10:
+          _context2.prev = 10;
+          _context2.t0 = _context2["catch"](2);
+          console.log('critical error', _context2.t0);
+          if (critical != undefined) {
+            critical(_context2.t0);
+          }
+        case 14:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, null, [[2, 10]]);
   }));
@@ -22304,7 +22513,7 @@ var SelectTokenDialog = (function (props) {
   };
   var select = function select(token) {
     if (blockchain.tokens.find(function (majorToken) {
-      return majorToken.address.toLowerCase() == (token.address || token.external_id).toLowerCase();
+      return majorToken.address == (token.address || token.external_id);
     })) {
       setOpen(false);
       props.resolve({
@@ -22462,41 +22671,39 @@ var Select = function Select(options) {
   return new Promise( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(resolve, reject) {
       return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              mount({
-                style: style,
-                document: ensureDocument(document)
-              }, function (unmount) {
-                var userClosedDialog = function userClosedDialog() {
-                  reject('USER_CLOSED_DIALOG');
-                  unmount();
-                };
-                return function (container) {
-                  return /*#__PURE__*/React.createElement(ErrorProvider, {
-                    error: startupError,
-                    errorCallback: error,
-                    container: container,
-                    unmount: unmount
-                  }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
-                    configuration: {
-                      what: what
-                    }
-                  }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                    unmount: userClosedDialog
-                  }, /*#__PURE__*/React.createElement(SelectionProvider, null, /*#__PURE__*/React.createElement(SelectStack, {
-                    document: document,
-                    container: container,
-                    unmount: unmount,
-                    resolve: resolve
-                  })), /*#__PURE__*/React.createElement(PoweredBy, null)))));
-                };
-              });
-            case 1:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            mount({
+              style: style,
+              document: ensureDocument(document)
+            }, function (unmount) {
+              var userClosedDialog = function userClosedDialog() {
+                reject('USER_CLOSED_DIALOG');
+                unmount();
+              };
+              return function (container) {
+                return /*#__PURE__*/React.createElement(ErrorProvider, {
+                  error: startupError,
+                  errorCallback: error,
+                  container: container,
+                  unmount: unmount
+                }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                  configuration: {
+                    what: what
+                  }
+                }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                  unmount: userClosedDialog
+                }, /*#__PURE__*/React.createElement(SelectionProvider, null, /*#__PURE__*/React.createElement(SelectStack, {
+                  document: document,
+                  container: container,
+                  unmount: unmount,
+                  resolve: resolve
+                })), /*#__PURE__*/React.createElement(PoweredBy, null)))));
+              };
+            });
+          case 1:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));