@depay/widgets 8.1.0 → 9.0.0

package/dist/umd/index.js

@@ -238,9 +238,7 @@
         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;
@@ -286,9 +284,7 @@
     }), 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();
@@ -299,9 +295,7 @@
     }, 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;
@@ -416,9 +410,7 @@
         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) {
-          ;
-        }
+        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
       } catch (err) {
         _d = !0, _e = err;
       } finally {
@@ -434,9 +426,7 @@
 
   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;
   }
 
@@ -660,25 +650,23 @@
       _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);
       }))();
@@ -760,24 +748,22 @@
       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) {
@@ -804,27 +790,25 @@
       _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);
       }))();
@@ -1411,55 +1395,53 @@
       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 = web3Wallets.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__default["default"].createElement(ErrorProvider, {
-                      errorCallback: error,
-                      container: container,
-                      unmount: unmount
-                    }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                      unmount: rejectBeforeUnmount
-                    }, /*#__PURE__*/React__default["default"].createElement(ConnectStack, {
-                      document: document,
-                      container: container,
-                      resolve: resolve,
-                      reject: reject,
-                      autoClose: true
-                    }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))));
-                  };
-                });
-              case 8:
-              case "end":
-                return _context.stop();
-            }
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              wallet = web3Wallets.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__default["default"].createElement(ErrorProvider, {
+                    errorCallback: error,
+                    container: container,
+                    unmount: unmount
+                  }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
+                    unmount: rejectBeforeUnmount
+                  }, /*#__PURE__*/React__default["default"].createElement(ConnectStack, {
+                    document: document,
+                    container: container,
+                    resolve: resolve,
+                    reject: reject,
+                    autoClose: true
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))));
+                };
+              });
+            case 8:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
@@ -18820,7 +18802,7 @@
         } else {
           Promise.all(props.accept.map(function (configuration) {
             if (fixedAmount) {
-              if (web3Constants.CONSTANTS[configuration.blockchain].USD.toLowerCase() == configuration.token.toLowerCase()) {
+              if (web3Constants.CONSTANTS[configuration.blockchain].USD == configuration.token) {
                 return 1.00 / fixedCurrencyConversionRate * fixedAmount;
               } else {
                 return web3Exchanges.route({
@@ -18833,7 +18815,7 @@
                 });
               }
             } else {
-              if (web3Constants.CONSTANTS[configuration.blockchain].USD.toLowerCase() == configuration.token.toLowerCase()) {
+              if (web3Constants.CONSTANTS[configuration.blockchain].USD == configuration.token) {
                 return 1.00 / conversionRate * amount;
               } else {
                 return web3Exchanges.route({
@@ -19107,7 +19089,8 @@
       synchronousTracking = _useContext9.synchronousTracking,
       asynchronousTracking = _useContext9.asynchronousTracking,
       trackingInitialized = _useContext9.trackingInitialized,
-      initializePaymentTracking = _useContext9.initializeTracking;
+      initializePaymentTracking = _useContext9.initializeTracking,
+      preTrack = _useContext9.preTrack;
     var _useContext10 = React.useContext(TransactionTrackingContext),
       foundTransaction = _useContext10.foundTransaction,
       initializeTransactionTracking = _useContext10.initializeTracking;
@@ -19150,33 +19133,34 @@
       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 web3Client.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 web3Client.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);
@@ -19194,14 +19178,20 @@
                   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);
       }));
@@ -19272,7 +19262,7 @@
     React.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: web3Blockchains.Blockchain.findByName(transaction.blockchain).explorerUrlFor({
@@ -19378,14 +19368,13 @@
       account = _ref.account,
       whitelist = _ref.whitelist,
       blacklist = _ref.blacklist,
-      event = _ref.event,
       fee = _ref.fee;
     return web3Payments.route({
       accept: accept.map(prepareAcceptedPayments),
       from: mergeFromAccounts(accept, account),
       whitelist: whitelist,
       blacklist: blacklist,
-      event: event,
+      event: 'ifRoutedAndNative',
       fee: fee
     });
   });
@@ -19422,55 +19411,51 @@
     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);
       }));
@@ -19506,29 +19491,27 @@
       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);
       }));
@@ -19539,16 +19522,14 @@
     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);
       }));
@@ -19559,15 +19540,13 @@
     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);
       }));
@@ -19647,6 +19626,7 @@
       if (updatable == false || (payment === null || payment === void 0 ? void 0 : payment.route) == undefined) {
         return;
       }
+      setPaymentValueLoss(null);
       Promise.all([web3Exchanges.route({
         blockchain: payment.route.blockchain,
         tokenIn: payment.route.fromToken.address,
@@ -19682,7 +19662,7 @@
           }
         }
         var fromTokenUSDAmount;
-        if (payment.route.fromToken.address.toLowerCase() == web3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
+        if (payment.route.fromToken.address == web3Constants.CONSTANTS[payment.route.blockchain].USD) {
           fromTokenUSDAmount = payment.route.fromAmount.toString();
         } else if (fromTokenUSDRoute == undefined) {
           setPaymentValue('');
@@ -20097,6 +20077,16 @@
     }));
   });
 
+  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__default["default"].createElement("div", {
       className: "LoadingText"
@@ -20118,7 +20108,9 @@
       asynchronousTracking = _useContext2.asynchronousTracking,
       trackingInitialized = _useContext2.trackingInitialized,
       release = _useContext2.release,
-      forwardTo = _useContext2.forwardTo;
+      forwardTo = _useContext2.forwardTo,
+      confirmationsRequired = _useContext2.confirmationsRequired,
+      confirmationsPassed = _useContext2.confirmationsPassed;
     var _useContext3 = React.useContext(PaymentContext),
       payment = _useContext3.payment,
       paymentState = _useContext3.paymentState,
@@ -20137,6 +20129,34 @@
       _useContext6.navigate;
     var _useContext7 = React.useContext(ClosableContext),
       close = _useContext7.close;
+    var _useState = React.useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      secondsLeft = _useState2[0],
+      setSecondsLeft = _useState2[1];
+    var _useState3 = React.useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      secondsLeftCountdown = _useState4[0],
+      setSecondsLeftCountdown = _useState4[1];
+    React.useEffect(function () {
+      if (confirmationsRequired) {
+        var interval = setInterval(function () {
+          setSecondsLeftCountdown(secondsLeftCountdown + 1);
+        }, 1000);
+        return function () {
+          clearInterval(interval);
+        };
+      }
+    }, [confirmationsRequired, secondsLeftCountdown]);
+    React.useEffect(function () {
+      if (confirmationsPassed) {
+        setSecondsLeft(etaForConfirmations(payment.blockchain, confirmationsRequired, confirmationsPassed) - secondsLeftCountdown);
+      }
+    }, [confirmationsPassed, secondsLeftCountdown]);
+    React.useEffect(function () {
+      if (confirmationsPassed) {
+        setSecondsLeftCountdown(0);
+      }
+    }, [confirmationsPassed]);
     var trackingInfo = function trackingInfo() {
       if (synchronousTracking == false && asynchronousTracking == false || asynchronousTracking && trackingInitialized) {
         return null;
@@ -20187,7 +20207,9 @@
           className: "CardBodyWrapper"
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Opacity05"
-        }, "Validating payment")))));
+        }, "Validating payment", confirmationsRequired && secondsLeft > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
+          title: "".concat(confirmationsPassed, "/").concat(confirmationsRequired, " required confirmations")
+        }, " ", secondsLeft, "s"))))));
       }
     };
     var additionalPaymentInformation = function additionalPaymentInformation() {
@@ -20238,7 +20260,7 @@
         return null;
       } else if (paymentState == 'initialized') {
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "PaddingBottomS"
+          className: "PaddingBottomXS"
         }, /*#__PURE__*/React__default["default"].createElement("button", {
           className: "ButtonPrimary",
           onClick: approve,
@@ -20560,44 +20582,59 @@
       integration = _useContext2.integration,
       link = _useContext2.link,
       type = _useContext2.type;
+    var _useContext3 = React.useContext(WalletContext),
+      account = _useContext3.account;
+      _useContext3.wallet;
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
       transaction = _useState2[0],
       setTransaction = _useState2[1];
     var _useState3 = React.useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      afterBlock = _useState4[0],
-      setAfterBlock = _useState4[1];
+      confirmationsRequired = _useState4[0],
+      setConfirmationsRequired = _useState4[1];
     var _useState5 = React.useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      paymentRoute = _useState6[0],
-      setPaymentRoute = _useState6[1];
-    var _useState7 = React.useState(false),
+      confirmationsPassed = _useState6[0],
+      setConfirmationsPassed = _useState6[1];
+    var _useState7 = React.useState(),
       _useState8 = _slicedToArray(_useState7, 2),
-      trackingInitialized = _useState8[0],
-      setTrackingInitialized = _useState8[1];
-    var _useState9 = React.useState(!!(track && (track.endpoint || typeof track.method == 'function') && track.async != true)),
-      _useState10 = _slicedToArray(_useState9, 1),
-      synchronousTracking = _useState10[0];
-    var _useState11 = React.useState(!!(track && track.async == true)),
-      _useState12 = _slicedToArray(_useState11, 1),
-      asynchronousTracking = _useState12[0];
-    var _useState13 = React.useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function') && track.async != true)),
-      _useState14 = _slicedToArray(_useState13, 1),
-      polling = _useState14[0];
-    var _useState15 = React.useState(false),
-      _useState16 = _slicedToArray(_useState15, 2),
-      release = _useState16[0],
-      setRelease = _useState16[1];
-    var _useState17 = React.useState(),
-      _useState18 = _slicedToArray(_useState17, 2),
-      forwardTo = _useState18[0],
-      setForwardTo = _useState18[1];
-    var _useContext3 = React.useContext(ClosableContext),
-      setClosable = _useContext3.setClosable;
-    var _useContext4 = React.useContext(NavigateContext),
-      navigate = _useContext4.navigate;
-      _useContext4.set;
+      afterBlock = _useState8[0],
+      setAfterBlock = _useState8[1];
+    var _useState9 = React.useState(),
+      _useState10 = _slicedToArray(_useState9, 2);
+      _useState10[0];
+      _useState10[1];
+    var _useState11 = React.useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      paymentRoute = _useState12[0],
+      setPaymentRoute = _useState12[1];
+    var _useState13 = React.useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      trackingInitialized = _useState14[0],
+      setTrackingInitialized = _useState14[1];
+    var _useState15 = React.useState(!!(track && (track.endpoint || typeof track.method == 'function') && track.async != true)),
+      _useState16 = _slicedToArray(_useState15, 1),
+      synchronousTracking = _useState16[0];
+    var _useState17 = React.useState(!!(track && track.async == true)),
+      _useState18 = _slicedToArray(_useState17, 1),
+      asynchronousTracking = _useState18[0];
+    var _useState19 = React.useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function') && track.async != true)),
+      _useState20 = _slicedToArray(_useState19, 1),
+      polling = _useState20[0];
+    var _useState21 = React.useState(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      release = _useState22[0],
+      setRelease = _useState22[1];
+    var _useState23 = React.useState(),
+      _useState24 = _slicedToArray(_useState23, 2),
+      forwardTo = _useState24[0],
+      setForwardTo = _useState24[1];
+    var _useContext4 = React.useContext(ClosableContext),
+      setClosable = _useContext4.setClosable;
+    var _useContext5 = React.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) {
@@ -20605,14 +20642,18 @@
           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) {
@@ -20625,12 +20666,15 @@
           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) {
@@ -20675,10 +20719,10 @@
       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,
@@ -20700,10 +20744,10 @@
       }
       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) {
@@ -20763,16 +20807,16 @@
         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.ethers.utils.formatUnits(paymentRoute.transaction.params.amounts[1], paymentRoute.toDecimals) : ethers.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.ethers.utils.formatUnits(paymentRoute.fromAmount, paymentRoute.fromDecimals),
             integration: integration,
@@ -20807,15 +20851,95 @@
       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 web3Client.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__default["default"].createElement(PaymentTrackingContext.Provider, {
       value: {
         synchronousTracking: synchronousTracking,
         asynchronousTracking: asynchronousTracking,
         initializeTracking: initializeTracking,
+        preTrack: preTrack,
         trackingInitialized: trackingInitialized,
         continueTryTracking: continueTryTracking,
         release: release,
-        forwardTo: forwardTo
+        forwardTo: forwardTo,
+        confirmationsRequired: confirmationsRequired,
+        confirmationsPassed: confirmationsPassed
       }
     }, props.children);
   });
@@ -20840,7 +20964,7 @@
     React.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') {
@@ -20873,10 +20997,10 @@
         },
         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) {
@@ -20901,14 +21025,18 @@
           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") {
@@ -20916,6 +21044,7 @@
         }
         if (item.message && item.message.status && item.message.status != 'pending') {
           setFoundTransaction(item.message);
+          socket.close(1000);
         }
       };
       socket.onerror = function (error) {
@@ -20996,34 +21125,32 @@
     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);
     }));
@@ -21035,82 +21162,80 @@
     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__default["default"].createElement(ErrorProvider, {
-                    errorCallback: error,
-                    container: container,
-                    unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                    unmount: unmount,
-                    closable: closable
-                  }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
-                    container: container,
-                    connected: connected,
-                    unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
-                    accept: accept
-                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
-                    document: ensureDocument(document)
-                  }, /*#__PURE__*/React__default["default"].createElement(DonationRoutingProvider, {
-                    container: container,
-                    document: document
-                  }, /*#__PURE__*/React__default["default"].createElement(DonationStack, {
-                    document: document,
-                    container: container
-                  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(ErrorProvider, {
+                  errorCallback: error,
+                  container: container,
+                  unmount: unmount
+                }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
+                  unmount: unmount,
+                  closable: closable
+                }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
+                  container: container,
+                  connected: connected,
+                  unmount: unmount
+                }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  accept: accept
+                }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
+                  document: ensureDocument(document)
+                }, /*#__PURE__*/React__default["default"].createElement(DonationRoutingProvider, {
+                  container: container,
+                  document: document
+                }, /*#__PURE__*/React__default["default"].createElement(DonationStack, {
+                  document: document,
+                  container: container
+                }), /*#__PURE__*/React__default["default"].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]]);
     }));
@@ -21231,46 +21356,44 @@
     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__default["default"].createElement(ErrorProvider, {
-                        errorCallback: error,
-                        container: container,
-                        unmount: unmount
-                      }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
-                        configuration: {
-                          message: message,
-                          endpoint: endpoint || '/login',
-                          recover: recover
-                        }
-                      }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                        unmount: userClosedDialog
-                      }, /*#__PURE__*/React__default["default"].createElement(LoginStack, {
-                        document: document,
-                        container: container,
-                        resolve: function resolve(account) {
-                          unmount();
-                          _resolve(account);
-                        }
-                      }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(ErrorProvider, {
+                      errorCallback: error,
+                      container: container,
+                      unmount: unmount
+                    }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
+                      configuration: {
+                        message: message,
+                        endpoint: endpoint || '/login',
+                        recover: recover
+                      }
+                    }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
+                      unmount: userClosedDialog
+                    }, /*#__PURE__*/React__default["default"].createElement(LoginStack, {
+                      document: document,
+                      container: container,
+                      resolve: function resolve(account) {
+                        unmount();
+                        _resolve(account);
+                      }
+                    }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null)))));
+                  };
+                });
+              })["catch"](reject);
+            case 1:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
@@ -21445,6 +21568,44 @@
     });
   });
 
+  var PreTrackingFailedDialog = (function () {
+    var _useContext = React.useContext(PaymentContext);
+      _useContext.transaction;
+    var _useContext2 = React.useContext(reactDialogStack.NavigateStackContext),
+      navigate = _useContext2.navigate;
+    var tryAgain = function tryAgain() {
+      navigate('back');
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      stacked: false,
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }),
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TextCenter"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "GraphicWrapper"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "Graphic",
+        src: ErrorGraphic
+      })), /*#__PURE__*/React__default["default"].createElement("h1", {
+        className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
+      }, "Tracking payment failed"), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
+      }, /*#__PURE__*/React__default["default"].createElement("strong", {
+        className: "FontSizeM"
+      }, "Please ensure you are connected to the internet, then click \"Try again\"."), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS"
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, "If this keeps happening, please report it.")))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        className: "ButtonPrimary",
+        onClick: tryAgain
+      }, "Try again"))
+    });
+  });
+
   var TrackingFailedDialog = (function () {
     var _useContext = React.useContext(PaymentTrackingContext),
       continueTryTracking = _useContext.continueTryTracking;
@@ -21505,7 +21666,8 @@
         ChangePayment: /*#__PURE__*/React__default["default"].createElement(ChangePaymentDialog, null),
         PaymentFailed: /*#__PURE__*/React__default["default"].createElement(PaymentFailedDialog, null),
         WrongNetwork: /*#__PURE__*/React__default["default"].createElement(WrongNetworkDialog, null),
-        TrackingFailed: /*#__PURE__*/React__default["default"].createElement(TrackingFailedDialog, null)
+        TrackingFailed: /*#__PURE__*/React__default["default"].createElement(TrackingFailedDialog, null),
+        PreTrackingFailed: /*#__PURE__*/React__default["default"].createElement(PreTrackingFailedDialog, null)
       }
     });
   });
@@ -21514,37 +21676,35 @@
     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);
     }));
@@ -21554,93 +21714,91 @@
   }();
   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__default["default"].createElement(ErrorProvider, {
-                    errorCallback: error,
-                    container: container,
-                    unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                    unmount: unmount,
-                    closable: closable
-                  }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
-                    document: document,
-                    container: container,
-                    connected: connected,
-                    unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
-                    accept: accept
-                  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(ErrorProvider, {
+                  errorCallback: error,
+                  container: container,
+                  unmount: unmount
+                }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
-                    document: ensureDocument(document)
-                  }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
-                    container: container,
-                    document: document
-                  }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentStack, {
-                    document: document,
-                    container: container
-                  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
+                  unmount: unmount,
+                  closable: closable
+                }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
+                  document: document,
+                  container: container,
+                  connected: connected,
+                  unmount: unmount
+                }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  accept: accept
+                }, /*#__PURE__*/React__default["default"].createElement(PaymentAmountRoutingProvider, {
+                  accept: accept,
+                  whitelist: whitelist,
+                  blacklist: blacklist,
+                  event: event,
+                  fee: fee
+                }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
+                  document: ensureDocument(document)
+                }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
+                  container: container,
+                  document: document
+                }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentStack, {
+                  document: document,
+                  container: container
+                }), /*#__PURE__*/React__default["default"].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]]);
     }));
@@ -21652,15 +21810,14 @@
     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
     });
   };
@@ -21926,31 +22083,29 @@
     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);
     }));
@@ -21962,81 +22117,79 @@
     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__default["default"].createElement(ErrorProvider, {
-                    errorCallback: error,
-                    container: container,
-                    unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                    unmount: unmount,
-                    closable: closable
-                  }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
-                    container: container,
-                    connected: connected,
-                    unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
-                    accept: accept
-                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
-                    document: ensureDocument(document)
-                  }, /*#__PURE__*/React__default["default"].createElement(SaleRoutingProvider, {
-                    container: container,
-                    document: document
-                  }, /*#__PURE__*/React__default["default"].createElement(SaleStack, {
-                    document: document,
-                    container: container
-                  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(ErrorProvider, {
+                  errorCallback: error,
+                  container: container,
+                  unmount: unmount
+                }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
+                  unmount: unmount,
+                  closable: closable
+                }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
+                  container: container,
+                  connected: connected,
+                  unmount: unmount
+                }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  accept: accept
+                }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
+                  document: ensureDocument(document)
+                }, /*#__PURE__*/React__default["default"].createElement(SaleRoutingProvider, {
+                  container: container,
+                  document: document
+                }, /*#__PURE__*/React__default["default"].createElement(SaleStack, {
+                  document: document,
+                  container: container
+                }), /*#__PURE__*/React__default["default"].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]]);
     }));
@@ -22355,7 +22508,7 @@
     };
     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({
@@ -22513,41 +22666,39 @@
     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__default["default"].createElement(ErrorProvider, {
-                      error: startupError,
-                      errorCallback: error,
-                      container: container,
-                      unmount: unmount
-                    }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
-                      configuration: {
-                        what: what
-                      }
-                    }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                      unmount: userClosedDialog
-                    }, /*#__PURE__*/React__default["default"].createElement(SelectionProvider, null, /*#__PURE__*/React__default["default"].createElement(SelectStack, {
-                      document: document,
-                      container: container,
-                      unmount: unmount,
-                      resolve: resolve
-                    })), /*#__PURE__*/React__default["default"].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__default["default"].createElement(ErrorProvider, {
+                    error: startupError,
+                    errorCallback: error,
+                    container: container,
+                    unmount: unmount
+                  }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
+                    configuration: {
+                      what: what
+                    }
+                  }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
+                    unmount: userClosedDialog
+                  }, /*#__PURE__*/React__default["default"].createElement(SelectionProvider, null, /*#__PURE__*/React__default["default"].createElement(SelectStack, {
+                    document: document,
+                    container: container,
+                    unmount: unmount,
+                    resolve: resolve
+                  })), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null)))));
+                };
+              });
+            case 1:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));