@depay/widgets 6.2.1 → 6.4.0

package/dist/umd/index.js

@@ -6,8 +6,8 @@
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var React__default$1 = /*#__PURE__*/_interopDefaultLegacy(React);
-  var ReactDOM__default$1 = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
 
   function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -880,9 +880,9 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var ClosableContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var ClosableContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var UpdatableContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var UpdatableContext = /*#__PURE__*/React__default["default"].createContext();
 
   var ClosableProvider = (function (props) {
     var _useState = React.useState(true),
@@ -908,24 +908,25 @@
       setTimeout(props.unmount, 300);
     };
 
-    return /*#__PURE__*/React__default$1["default"].createElement(ClosableContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(ClosableContext.Provider, {
       value: {
         closable: closable,
         setClosable: setClosable,
         close: close,
-        open: open
+        open: open,
+        setOpen: setOpen
       }
     }, props.children);
   });
 
   var ChevronLeft = (function () {
-    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "ChevronLeft Icon",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       viewBox: "0 0 16 16"
-    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
       strokeWidth: "1",
       fillRule: "evenodd",
       d: "M10.4,1.6c0.2,0.2,0.2,0.5,0,0.7L4.7,8l5.6,5.6c0.2,0.2,0.2,0.5,0,0.7s-0.5,0.2-0.7,0l-6-6l0,0,c-0.2-0.2-0.2-0.5,0-0.7l6-6l0,0C9.8,1.5,10.2,1.5,10.4,1.6L10.4,1.6z"
@@ -933,7 +934,7 @@
   });
 
   var CloseIcon = (function () {
-    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "CloseIcon Icon",
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
@@ -942,12 +943,12 @@
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default$1["default"].createElement("line", {
+    }, /*#__PURE__*/React__default["default"].createElement("line", {
       x1: "18",
       y1: "6",
       x2: "6",
       y2: "18"
-    }), /*#__PURE__*/React__default$1["default"].createElement("line", {
+    }), /*#__PURE__*/React__default["default"].createElement("line", {
       x1: "6",
       y1: "6",
       x2: "18",
@@ -963,29 +964,27 @@
         close = _useContext2.close,
         closable = _useContext2.closable;
 
-    return /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "Dialog"
-    }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: ["DialogHeader", props.stacked ? 'TextCenter' : ''].join(' ')
-    }, props.stacked && /*#__PURE__*/React__default$1["default"].createElement("div", {
-      className: "DialogHeaderAction PaddingTopS PaddingLeftS PaddingRightS"
-    }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+    }, props.stacked && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "DialogHeaderActionLeft PaddingTopS PaddingLeftS PaddingRightS"
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
       onClick: function onClick() {
         return navigate('back');
       },
       className: "ButtonCircular",
       title: "Go back"
-    }, /*#__PURE__*/React__default$1["default"].createElement(ChevronLeft, null))), /*#__PURE__*/React__default$1["default"].createElement("div", {
-      className: "DialogHeaderTitle"
-    }, props.header), /*#__PURE__*/React__default$1["default"].createElement("div", {
-      className: "DialogHeaderAction PaddingTopS PaddingLeftS PaddingRightS"
-    }, closable && /*#__PURE__*/React__default$1["default"].createElement("button", {
+    }, /*#__PURE__*/React__default["default"].createElement(ChevronLeft, null))), props.header, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "DialogHeaderActionRight PaddingTopS PaddingLeftS PaddingRightS"
+    }, closable && /*#__PURE__*/React__default["default"].createElement("button", {
       onClick: close,
       className: "ButtonCircular",
       title: "Close dialog"
-    }, /*#__PURE__*/React__default$1["default"].createElement(CloseIcon, null)))), /*#__PURE__*/React__default$1["default"].createElement("div", {
-      className: "DialogBody"
-    }, props.body), /*#__PURE__*/React__default$1["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(CloseIcon, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ["DialogBody", props.bodyClassName].join(' ')
+    }, props.body), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "DialogFooter"
     }, props.footer));
   });
@@ -1012,46 +1011,46 @@
     }, []);
 
     if (props.pending) {
-      return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
         stacked: true,
-        body: /*#__PURE__*/React__default$1["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default$1["default"].createElement("div", {
+        body: /*#__PURE__*/React__default["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "GraphicWrapper PaddingTopS PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+        }, /*#__PURE__*/React__default["default"].createElement("img", {
           className: "Graphic",
           src: walletLogo
-        })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+        })), /*#__PURE__*/React__default["default"].createElement("h1", {
           className: "LineHeightL Text FontSizeL FontWeightBold PaddingTopS"
-        }, "Connect Wallet"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, "Connect Wallet"), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+        }, /*#__PURE__*/React__default["default"].createElement("strong", {
           className: "FontSizeM PaddingLeftM PaddingRightM"
         }, "Your wallet is already open and asking for permission to connect. Please find your wallet dialog and confirm this connection.")))
       });
     } else {
-      return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
         stacked: true,
-        body: /*#__PURE__*/React__default$1["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default$1["default"].createElement("div", {
+        body: /*#__PURE__*/React__default["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "GraphicWrapper PaddingTopS PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+        }, /*#__PURE__*/React__default["default"].createElement("img", {
           className: "Graphic",
           src: walletLogo
-        })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+        })), /*#__PURE__*/React__default["default"].createElement("h1", {
           className: "LineHeightL Text FontSizeL FontWeightBold PaddingTopS"
-        }, "Connect Wallet"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, "Connect Wallet"), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("p", {
+        }, /*#__PURE__*/React__default["default"].createElement("p", {
           className: "FontSizeM PaddingLeftM PaddingRightM"
-        }, "Access to your wallet is required. Please login and authorize access to your account to continue."), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, "Access to your wallet is required. Please login and authorize access to your account to continue."), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingTopS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
           onClick: function onClick() {
             return navigate('back');
           },
           className: "TextButton"
         }, "Connect with another wallet")))),
-        footer: showConnectButton && /*#__PURE__*/React__default$1["default"].createElement("div", {
+        footer: showConnectButton && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
           className: "ButtonPrimary",
           onClick: function onClick() {
             return props.connect(wallet);
@@ -1062,13 +1061,13 @@
   });
 
   var ChevronRight = (function () {
-    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "ChevronRight Icon",
       xmlns: "http://www.w3.org/2000/svg",
       width: "16",
       height: "16",
       viewBox: "0 0 16 16"
-    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
       strokeWidth: "1",
       fillRule: "evenodd",
       d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
@@ -1114,7 +1113,8 @@
       }, _callee);
     })), [wallet]);
 
-    var connect = function connect(wallet) {
+    var connect = function connect(walletClass) {
+      var wallet = new walletClass();
       props.setWallet(wallet);
       navigate('ConnectingWallet');
       props.connect(wallet);
@@ -1123,50 +1123,51 @@
     var availableWallets = [web3Wallets.wallets.WalletConnect];
 
     if (wallet) {
-      availableWallets.unshift(wallet);
+      availableWallets.unshift(wallet.constructor);
     }
 
     var walletCards = availableWallets.map(function (wallet, index) {
-      return /*#__PURE__*/React__default$1["default"].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         key: index,
         className: "PaddingBottomXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "Card small",
-        title: "Connect ".concat(wallet.name),
+        title: "Connect ".concat(wallet.info.name),
         onClick: function onClick() {
           return connect(wallet);
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage"
-      }, /*#__PURE__*/React__default$1["default"].createElement("img", {
-        src: wallet.logo
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
+        src: wallet.info.logo
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper PaddingLeftXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText FontWeightBold"
-      }, wallet.name)))));
+      }, wallet.info.name)))));
     });
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Select a wallet")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingBottomXS PaddingLeftS PaddingRightS"
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingBottomS PaddingLeftS PaddingRightS"
       }, walletCards),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingBottomS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "FontSizeS FontWeightBold TextButton",
         onClick: function onClick() {
           return setShowExplanation(!showExplanation);
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "Opacity05"
-      }, "What is a wallet?")), showExplanation && /*#__PURE__*/React__default$1["default"].createElement("p", {
+      }, "What is a wallet?")), showExplanation && /*#__PURE__*/React__default["default"].createElement("p", {
         className: "PaddingLeftM PaddingRightM"
       }, "Wallets are used to send, receive, and store digital assets. Wallets come in many forms. They are either built into your browser, an extension added to your browser, a piece of hardware plugged into your computer or even an app on your phone."))
     });
@@ -1272,18 +1273,18 @@
         }
       }, _callee2);
     })), [wallet]);
-    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SelectWallet",
       container: props.container,
       document: props.document,
       dialogs: {
-        SelectWallet: /*#__PURE__*/React__default$1["default"].createElement(SelectWalletDialog, {
+        SelectWallet: /*#__PURE__*/React__default["default"].createElement(SelectWalletDialog, {
           setWallet: setWallet,
           connect: connect
         }),
-        ConnectingWallet: /*#__PURE__*/React__default$1["default"].createElement(ConnectingWalletDialog, {
+        ConnectingWallet: /*#__PURE__*/React__default["default"].createElement(ConnectingWalletDialog, {
           wallet: wallet,
           pending: pending,
           connect: connect
@@ -1339,14 +1340,14 @@
       throw new TypeError("Super expression must either be null or a function");
     }
 
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
     Object.defineProperty(subClass, "prototype", {
-      value: Object.create(superClass && superClass.prototype, {
-        constructor: {
-          value: subClass,
-          writable: true,
-          configurable: true
-        }
-      }),
       writable: false
     });
     if (superClass) _setPrototypeOf(subClass, superClass);
@@ -1377,15 +1378,10 @@
     return _getPrototypeOf(o);
   }
 
-  var ErrorContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var ErrorContext = /*#__PURE__*/React__default["default"].createContext();
 
   var ErrorGraphic = "data:image/png;base64,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";
 
-  function _interopDefaultLegacy$1 (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var React__default = /*#__PURE__*/_interopDefaultLegacy$1(React__default$1["default"]);
-  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy$1(ReactDOM__default$1["default"]);
-
   function ReactDialogStyle (styles) {
     let background =
       typeof styles === 'object' && styles.background ? styles.background : 'rgba(0,0,0,0.4)';
@@ -1452,7 +1448,7 @@
   }
 
   const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
-  class Dialog extends React__default['default'].Component {
+  class Dialog extends React__default["default"].Component {
     constructor(props) {
       super(props);
 
@@ -1500,11 +1496,11 @@
       const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
       const style = ReactDialogStyle({ background: this.props.background });
       return (
-        React__default['default'].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 54}}
-          , React__default['default'].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 55}}, style)
-          , React__default['default'].createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
-            , React__default['default'].createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}
-              , React__default['default'].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}} )
+        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 54}}
+          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 55}}, style)
+          , React__default["default"].createElement('div', { className: "ReactDialogRow", __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
+            , React__default["default"].createElement('div', { className: "ReactDialogCell", __self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}
+              , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}} )
               , this.props.children
             )
           )
@@ -1514,7 +1510,7 @@
   }
 
   const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
-  class ReactDialog extends React__default['default'].Component {
+  class ReactDialog extends React__default["default"].Component {
     constructor(props) {
       super(props);
 
@@ -1537,8 +1533,8 @@
       let _document = this.props.document || document;
       let container = this.props.container || _document.body;
       if (this.state.open) {
-        return ReactDOM__default['default'].createPortal(
-          React__default['default'].createElement(Dialog, {
+        return ReactDOM__default["default"].createPortal(
+          React__default["default"].createElement(Dialog, {
             background: this.props.background,
             close: this.props.close,
             document: _document,
@@ -1555,8 +1551,6 @@
     }
   }
 
-  var ReactDialog_1 = ReactDialog;
-
   function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
   function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -1585,10 +1579,10 @@
     }]);
 
     return ErrorBoundary;
-  }(React__default$1["default"].Component);
+  }(React__default["default"].Component);
 
   var ErrorProvider = (function (props) {
-    var _useState = React.useState(),
+    var _useState = React.useState(props.error),
         _useState2 = _slicedToArray(_useState, 2),
         error = _useState2[0],
         setError = _useState2[1];
@@ -1601,8 +1595,8 @@
     var setErrorFromChildren = function setErrorFromChildren(error) {
       setError(error);
 
-      if (props.error) {
-        props.error(error);
+      if (props.errorCallback) {
+        props.errorCallback(error);
       }
     };
 
@@ -1613,54 +1607,58 @@
 
     if (error) {
       console.log(error);
-      return /*#__PURE__*/React__default$1["default"].createElement(ReactDialog_1, {
+      return /*#__PURE__*/React__default["default"].createElement(ReactDialog, {
         container: props.container,
         close: close,
         open: open
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Dialog ReactDialogAnimation"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "DialogHeader"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftS PaddingRightS"
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "DialogBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper PaddingTopS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
         src: ErrorGraphic
-      })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      })), /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
-      }, "Oops, Something Went Wrong"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Oops, Something Went Wrong"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("pre", {
+      }, /*#__PURE__*/React__default["default"].createElement("pre", {
         className: "ErrorSnippetText"
-      }, error.toString())), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, error.toString())), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingBottomS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM PaddingTopS"
-      }, "If this keeps happening, please report it.")))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "If this keeps happening, please report it.")))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "DialogFooter"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: close
       }, "Try again")))));
     } else {
-      return /*#__PURE__*/React__default$1["default"].createElement(ErrorContext.Provider, {
+      return /*#__PURE__*/React__default["default"].createElement(ErrorContext.Provider, {
         value: {
           setError: setErrorFromChildren
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement(ErrorBoundary, {
+      }, /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
         setError: setErrorFromChildren
       }, props.children));
     }
   });
 
+  var AlertStyle = (function (style) {
+    return "\n\n    .Alert {\n      background: rgba(0,0,0,0.08);\n      border-radius: 0.4rem;\n      font-weight: 500;\n      padding: 0.5rem;\n    }\n  ";
+  });
+
   var BlockchainLogoStyle = (function (style) {
     return "\n\n    .BlockchainLogo {\n      border-radius: 999px;\n    }\n\n    .BlockchainLogo.small {\n      height: 18px;\n      width: 18px;\n    }\n  ";
   });
@@ -1674,11 +1672,11 @@
   });
 
   var CardStyle = (function (style) {
-    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.1rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
+    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
   });
 
   var DialogStyle = (function (style) {
-    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n        max-height: 60vh !important;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        max-height: 66vh !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.HeightAuto {\n      height: auto;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      display: flex;\n      flex-direction: row;\n      position: relative;\n    }\n\n    .DialogHeaderTitle {\n      flex-basis: auto;\n      flex-grow: 1;\n    }\n    \n    .DialogHeaderAction {\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
+    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n      background: rgb(248,248,248);\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      min-height: 3.4rem;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 3rem;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
   });
 
   var FontStyle = (function (style) {
@@ -1709,6 +1707,10 @@
     return "\n\n    .Label {\n      background: rgb(248,248,248);\n      border-radius: 999px;\n      color: ".concat(style.colors.primary, ";\n      font-size: 0.8rem;\n      padding: 0.1rem 0.5rem;\n      margin: 0.1rem;\n    }\n\n  ");
   });
 
+  var LinkStyle = (function (style) {
+    return "\n\n    .Link {\n      color: ".concat(style.colors.primary, ";\n      cursor: pointer;\n      text-decoration: none;\n    }\n\n    .Link:hover {\n      filter: brightness(0.8);\n    }\n\n    .Link:active {\n      filter: brightness(1.0);\n    }\n  ");
+  });
+
   var LoadingTextStyle = (function (style) {
     return "\n\n    .LoadingText {\n      color: ".concat(style.colors.buttonText, ";\n      display: inline-block;\n      text-decoration: none;\n    }\n\n    @keyframes blink {\n      0% { opacity: .2; }\n      20% { opacity: 1; }\n      100% { opacity: .2; }\n    }\n    \n    .LoadingText .dot {\n      animation-name: blink;\n      animation-duration: 1.4s;\n      animation-iteration-count: infinite;\n      animation-fill-mode: both;\n    }\n    \n    .LoadingText .dot:nth-child(2) {\n      animation-delay: .2s;\n    }\n    \n    .LoadingText .dot:nth-child(3) {\n      animation-delay: .4s;\n    }\n  ");
   });
@@ -1733,10 +1735,18 @@
     return "\n\n      html, body, div, span, applet, object, iframe,\n      h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n      a, abbr, acronym, address, big, cite, code,\n      del, dfn, em, img, ins, kbd, q, s, samp,\n      small, strike, strong, sub, sup, tt, var,\n      b, u, i, center,\n      dl, dt, dd, ol, ul, li,\n      fieldset, form, label, legend,\n      table, caption, tbody, tfoot, thead, tr, th, td,\n      article, aside, canvas, details, embed, \n      figure, figcaption, footer, header, hgroup, \n      menu, nav, output, ruby, section, summary,\n      time, mark, audio, video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        text-align: inherit;\n        vertical-align: baseline;\n      }\n\n      article, aside, details, figcaption, figure, \n      footer, header, hgroup, menu, nav, section {\n        display: block;\n      }\n\n      body {\n        line-height: 1;\n      }\n\n      ol, ul {\n        list-style: none;\n      }\n\n      blockquote, q {\n        quotes: none;\n      }\n\n      blockquote:before, blockquote:after,\n      q:before, q:after {\n        content: '';\n        content: none;\n      }\n      \n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n\n      button {\n        border: 0;\n        background: none;\n        outline: none;\n      }\n\n  ";
   });
 
+  var SearchStyle = (function (style) {
+    return "\n\n    .Search {\n      border-radius: 0.8rem;\n      border: 1px solid rgba(0,0,0,0.2);\n      outline: none !important;\n      color: ".concat(style.colors.text, ";\n      font-size: 1.2rem;\n      padding: 0.8rem;\n      width: 100%;\n    }\n\n    .Search::placeholder {\n      color: rgb(180,180,180);\n    } \n\n    .Search:focus, .Search:focus-visible {\n      border: 1px solid ").concat(style.colors.primary, ";\n    }\n\n  ");
+  });
+
   var SkeletonStyle = (function () {
     return "\n        \n    .Skeleton {\n      background: rgb(230,230,230) !important;\n      border: 0px solid transparent !important;\n      box-shadow: none !important;\n      cursor: inherit !important;\n      line-height: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    @keyframes SkeletonBackgroundAnimation {\n      from {\n        left: -500px;\n      }\n      to   {\n        left: +120%;\n      }\n    }\n\n    .SkeletonBackground {\n      animation: 2s SkeletonBackgroundAnimation 0.2s ease infinite;\n      background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%);\n      height: 100%;\n      left: -140%;\n      position: absolute;\n      top: 0;\n      width: 400px;\n    }\n\n    .SkeletonWrapper {\n      line-height: 0;\n    }\n  ";
   });
 
+  var TableStyle = (function (style) {
+    return "\n\n    .Table {\n      border-collapse: separate;\n      border-radius: 0.4rem;\n      border-style: hidden;\n      border: 1px solid rgba(0,0,0,0.1);\n      font-size: 94%;\n      width: 100%;\n    }\n\n    .Table tr.small td {\n      font-size: 90%;\n    }\n\n    .Table tr td {\n      border-bottom: 1px solid rgba(0,0,0,0.1);\n      word-break: break-all;\n    }\n    \n    .Table tr:last-child td {\n      border-bottom: none;\n    }\n    \n    .Table tr td {\n      padding: 0.5rem 0.9rem;\n      text-align: left;\n    }\n    \n    .Table tr td:first-child {\n      width: 30%\n    }\n\n    .Table tr td:last-child {\n      width: 70%\n    }\n    \n    .Table .TableSubTitle {\n      font-weight: 300;\n      opacity: 0.7;\n    }\n\n    .Table tr td:last-child {\n      font-weight: 500;\n    }\n  ";
+  });
+
   var TextButtonStyle = (function (style) {
     return "\n\n    .TextButton {\n      cursor: pointer;\n      font-size: 16px;\n      color: ".concat(style.colors.primary, "\n    }\n\n    .TextButton:hover * {\n      opacity: 1.0;\n    }\n  ");
   });
@@ -1746,7 +1756,15 @@
   });
 
   var TokenAmountStyle = (function () {
-    return "\n        \n    .TokenAmountRow {\n      min-width: 0;\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n    }\n\n    .TokenAmountCell {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .TokenSymbolCell {\n      \n    }\n  ";
+    return "\n        \n    .TokenAmountRow {\n      min-width: 0;\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n    }\n\n    .TokenAmountCell {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .TokenSymbolCell {\n    }\n  ";
+  });
+
+  var TokenImageStyle = (function (style) {
+    return "\n\n    .TokenImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
+  });
+
+  var TooltipStyle = (function (style) {
+    return "\n\n    .Tooltip {\n      background: ".concat(style.colors.primary, ";\n      border-radius: 0.6rem;\n      color: ").concat(style.colors.buttonText, ";\n      padding: 0.6rem 0.8rem;\n      position: relative;\n      box-shadow: 0 0 8px rgba(0,0,0,0.2);\n    }\n\n    .TooltipArrowUp {\n      border-bottom: 10px solid ").concat(style.colors.primary, ";\n      border-left: 10px solid transparent;\n      border-right: 10px solid transparent;\n      height: 0; \n      left: 12px;\n      position: absolute;\n      top: -8px;\n      width: 0; \n    }\n  ");
   });
 
   var styleRenderer = (function (style) {
@@ -1759,7 +1777,7 @@
       },
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }, style);
-    return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle()].join('');
+    return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
   });
 
   var mount = (function (_ref, content) {
@@ -1796,9 +1814,9 @@
   });
 
   var PoweredBy = (function () {
-    return /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "PoweredByWrapper"
-    }, /*#__PURE__*/React__default$1["default"].createElement("a", {
+    }, /*#__PURE__*/React__default["default"].createElement("a", {
       href: 'https://depay.fi?utm_source=' + window.location.hostname + '&utm_medium=widget&utm_campaign=WidgetV2',
       rel: "noopener noreferrer",
       target: "_blank",
@@ -1812,7 +1830,7 @@
         updatable = _useState2[0],
         setUpdatable = _useState2[1];
 
-    return /*#__PURE__*/React__default$1["default"].createElement(UpdatableContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(UpdatableContext.Provider, {
       value: {
         updatable: updatable,
         setUpdatable: setUpdatable
@@ -1871,19 +1889,19 @@
                   };
 
                   return function (container) {
-                    return /*#__PURE__*/React__default$1["default"].createElement(ErrorProvider, {
-                      error: error,
+                    return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
+                      errorCallback: error,
                       container: container,
                       unmount: unmount
-                    }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                    }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                       unmount: rejectBeforeUnmount
-                    }, /*#__PURE__*/React__default$1["default"].createElement(ConnectStack, {
+                    }, /*#__PURE__*/React__default["default"].createElement(ConnectStack, {
                       document: document,
                       container: container,
                       resolve: resolve,
                       reject: reject,
                       autoClose: true
-                    }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))));
+                    }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))));
                   };
                 });
 
@@ -1901,11 +1919,11 @@
     }());
   };
 
-  var ChangableAmountContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var ChangableAmountContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var ConfigurationContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var ConfigurationContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var ConversionRateContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var ConversionRateContext = /*#__PURE__*/React__default["default"].createContext();
 
   function _arrayWithoutHoles(arr) {
     if (Array.isArray(arr)) return _arrayLikeToArray(arr);
@@ -1990,7 +2008,7 @@
     }
   });
 
-  var WalletContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var WalletContext = /*#__PURE__*/React__default["default"].createContext();
 
   var ChangableAmountProvider = (function (props) {
     var configurationsMissAmounts = function configurationsMissAmounts(configurations) {
@@ -2112,7 +2130,7 @@
         setMaxAmount(100);
       }
     }, [account, maxRoute]);
-    return /*#__PURE__*/React__default$1["default"].createElement(ChangableAmountContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(ChangableAmountContext.Provider, {
       value: {
         amountsMissing: amountsMissing,
         acceptWithAmount: acceptWithAmount,
@@ -2135,7 +2153,7 @@
         });
       }
     }, [props.configuration]);
-    return /*#__PURE__*/React__default$1["default"].createElement(ConfigurationContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(ConfigurationContext.Provider, {
       value: Object.assign({}, props.configuration, {
         currencyCode: currencyCode
       })
@@ -2165,14 +2183,14 @@
         return setConversionRate(conversion.amount);
       })["catch"](setError);
     }, []);
-    return /*#__PURE__*/React__default$1["default"].createElement(ConversionRateContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(ConversionRateContext.Provider, {
       value: {
         conversionRate: conversionRate
       }
     }, props.children);
   });
 
-  var DonationRoutingContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var DonationRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
   var QuestionsGraphic = "data:image/png;base64,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";
 
@@ -2180,36 +2198,36 @@
     var _useContext = React.useContext(ClosableContext),
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
         src: QuestionsGraphic
-      })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      })), /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
-      }, "Insufficient Balance"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Insufficient Balance"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM"
       }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: close
       }, "Ok"))
     });
   });
 
-  var PaymentContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var PaymentContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var PaymentRoutingContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var PaymentRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var TrackingContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var TrackingContext = /*#__PURE__*/React__default["default"].createContext();
 
   var PaymentProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
@@ -2393,18 +2411,18 @@
     }, [allRoutes]);
 
     if (allRoutes instanceof Array && allRoutes.length == 0) {
-      return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
+      return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
         open: open,
         close: close,
         start: "NoPaymentMethodFound",
         container: props.container,
         document: props.document,
         dialogs: {
-          NoPaymentMethodFound: /*#__PURE__*/React__default$1["default"].createElement(NoPaymentMethodFoundDialog, null)
+          NoPaymentMethodFound: /*#__PURE__*/React__default["default"].createElement(NoPaymentMethodFoundDialog, null)
         }
       });
     } else {
-      return /*#__PURE__*/React__default$1["default"].createElement(PaymentContext.Provider, {
+      return /*#__PURE__*/React__default["default"].createElement(PaymentContext.Provider, {
         value: {
           payment: payment,
           paymentState: paymentState,
@@ -2592,7 +2610,7 @@
         setSelectedRoute(undefined);
       }
     }, [account, props.accept]);
-    return /*#__PURE__*/React__default$1["default"].createElement(PaymentRoutingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(PaymentRoutingContext.Provider, {
       value: {
         selectedRoute: selectedRoute,
         setSelectedRoute: setSelectedRoute,
@@ -2602,7 +2620,7 @@
     }, props.children);
   });
 
-  var PaymentValueContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var PaymentValueContext = /*#__PURE__*/React__default["default"].createContext();
 
   var PaymentValueProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
@@ -2693,7 +2711,7 @@
         return clearTimeout(timeout);
       };
     }, [reloadCount, updatable]);
-    return /*#__PURE__*/React__default$1["default"].createElement(PaymentValueContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(PaymentValueContext.Provider, {
       value: {
         paymentValue: paymentValue
       }
@@ -2708,16 +2726,16 @@
     var _useContext2 = React.useContext(ConfigurationContext),
         blacklist = _useContext2.blacklist;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(DonationRoutingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(DonationRoutingContext.Provider, {
       value: {}
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentRoutingProvider, {
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentRoutingProvider, {
       accept: acceptWithAmount,
       blacklist: blacklist,
       setMaxRoute: setMaxRoute
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentProvider, {
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
       container: props.container,
       document: props.document
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentValueProvider, null, props.children))));
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, props.children))));
   });
 
   var format = (function (input) {
@@ -2795,24 +2813,24 @@
       setInputAmount(toValidValue(value));
     };
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       stacked: true,
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL TextCenter"
-      }, "Change Amount"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Change Amount"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "FontSizeL TextCenter FontWeightBold"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", null, currencyCode))),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, currencyCode))),
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "MaxHeight PaddingTopXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingLeftM PaddingRightM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS TextCenter PaddingBottomL"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "FontSizeL"
-      }, /*#__PURE__*/React__default$1["default"].createElement("input", {
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
         max: parseFloat(maxAmount),
         min: min,
         step: step,
@@ -2826,7 +2844,7 @@
         onBlur: function onBlur(event) {
           setValidValue(event.target.value);
         }
-      })), /*#__PURE__*/React__default$1["default"].createElement(Slider__default["default"], {
+      })), /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], {
         max: parseFloat(maxAmount),
         min: min,
         step: step,
@@ -2837,19 +2855,19 @@
         onChangeComplete: function onChangeComplete() {
           setValidValue(inputAmount);
         }
-      }), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
           height: '40px'
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React__default["default"].createElement("button", {
         className: "TextButton",
         onClick: function onClick() {
           changeAmount(toValidValue(maxAmount));
         }
       }, "(Max)")))))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: changeAmountAndGoBack
       }, "Done"))
@@ -2860,30 +2878,30 @@
     var _useContext = React.useContext(PaymentValueContext),
         paymentValue = _useContext.paymentValue;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       stacked: true,
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL TextCenter"
-      }, "Change Payment"), paymentValue != undefined && /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Change Payment"), paymentValue != undefined && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "FontSizeL TextCenter FontWeightBold"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", null, paymentValue.toString()))),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, paymentValue.toString()))),
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "MaxHeight PaddingTopXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingLeftM PaddingRightM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))))
     });
@@ -2937,7 +2955,7 @@
     React.useEffect(function () {
       setCards(allPaymentRoutesWithData.map(function (payment, index) {
         var blockchain = web3Blockchains.Blockchain.findByName(payment.route.blockchain);
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           key: index,
           className: "Card",
           title: "Select ".concat(payment.symbol, " as payment"),
@@ -2945,148 +2963,148 @@
             setSelectedRoute(payment.route);
             navigate('back');
           }
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardImage"
-        }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
+        }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
           blockchain: payment.route.blockchain,
           address: payment.route.fromToken.address
-        }), /*#__PURE__*/React__default$1["default"].createElement("img", {
+        }), /*#__PURE__*/React__default["default"].createElement("img", {
           className: "BlockchainLogo small",
           src: blockchain.logo,
           alt: blockchain.label,
           title: blockchain.label
-        })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBody"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default$1["default"].createElement("h2", {
+        }, /*#__PURE__*/React__default["default"].createElement("h2", {
           className: "CardText"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "TokenAmountRow"
-        }, /*#__PURE__*/React__default$1["default"].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "TokenSymbolCell"
-        }, payment.symbol), /*#__PURE__*/React__default$1["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default$1["default"].createElement("span", {
+        }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
           className: "TokenAmountCell"
-        }, format(payment.amount)))), /*#__PURE__*/React__default$1["default"].createElement("h3", {
+        }, format(payment.amount)))), /*#__PURE__*/React__default["default"].createElement("h3", {
           className: "CardText"
-        }, /*#__PURE__*/React__default$1["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
+        }, /*#__PURE__*/React__default["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
       }));
     }, [allPaymentRoutesWithData]);
 
     if (allPaymentRoutesWithData.length == 0 || cards.length == 0) {
-      return /*#__PURE__*/React__default$1["default"].createElement(ChangePaymentSkeleton, null);
+      return /*#__PURE__*/React__default["default"].createElement(ChangePaymentSkeleton, null);
     }
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       stacked: true,
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL TextCenter"
-      }, "Change Payment"), paymentValue != undefined && /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Change Payment"), paymentValue != undefined && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "FontSizeL TextCenter FontWeightBold"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", null, paymentValue.toString()))),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, paymentValue.toString()))),
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "MaxHeight PaddingTopXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingLeftM PaddingRightM"
       }, cards)),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", null)
+      footer: /*#__PURE__*/React__default["default"].createElement("div", null)
     });
   });
 
   var DonationOverviewSkeleton = (function (props) {
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Donation")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "ButtonPrimary Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))))
     });
   });
 
   var Checkmark = (function (props) {
-    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "Checkmark Icon " + props.className,
       version: "1.1",
       xmlns: "http://www.w3.org/2000/svg",
       x: "0px",
       y: "0px",
       viewBox: "0 0 24 24"
-    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M20,4.9L9.2,16l-5.4-3.9c-0.7-0.5-1.6-0.3-2.1,0.3c-0.5,0.7-0.3,1.6,0.3,2.1l6.4,4.7c0.3,0.2,0.6,0.3,0.9,0.3 c0.4,0,0.8-0.2,1.1-0.5l11.7-12c0.6-0.6,0.6-1.6,0-2.2C21.6,4.3,20.6,4.3,20,4.9z"
     }));
   });
 
   var DigitalWalletIcon = (function (props) {
-    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "DigitalWalletIcon Icon " + props.className,
       version: "1.1",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24",
       width: "24",
       viewBox: "0 0 24 24"
-    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M8.51,4.84l-.39-.53,4-2.89a2.2,2.2,0,0,1,3.06.48l.4.56-.53.39-.4-.56A1.54,1.54,0,0,0,12.5,2Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M9.77,4.89l-.21-.62,6.31-2.13h0a2.18,2.18,0,0,1,.67-.1h0a2.21,2.21,0,0,1,2.08,1.49l.32.95-.63.21L18,3.73a1.53,1.53,0,0,0-1.45-1h0a1.61,1.61,0,0,0-.48.08h0Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M19.72,16.2H18.27a3.28,3.28,0,1,1,0-6.56h1.45a3.21,3.21,0,0,1,1.33.28h0a3.28,3.28,0,0,1,0,6A3.21,3.21,0,0,1,19.72,16.2Zm-1.45-5.9a2.63,2.63,0,0,0,0,5.25h1.45a2.56,2.56,0,0,0,1.06-.23,2.62,2.62,0,0,0,0-4.8,2.55,2.55,0,0,0-1.06-.22ZM19,14.53a1.61,1.61,0,1,1,1.61-1.61A1.62,1.62,0,0,1,19,14.53ZM19,12a1,1,0,1,0,.95.95A1,1,0,0,0,19,12Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M10.49,19.69a1.58,1.58,0,1,1,1.58-1.57A1.57,1.57,0,0,1,10.49,19.69Zm0-2.49a.92.92,0,1,0,.92.92A.92.92,0,0,0,10.49,17.2Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M19.09,22.14H2.79a2,2,0,0,1-2-2V6.25a2.1,2.1,0,0,1,0-.43,2,2,0,0,1,.48-.92,2,2,0,0,1,1.48-.65H19.09a2,2,0,0,1,.64.1,2,2,0,0,1,1.36,1.79v0a.28.28,0,0,1,0,.09v3.91h-.66v-4a1.49,1.49,0,0,0-.23-.69A1.35,1.35,0,0,0,19.52,5a1.26,1.26,0,0,0-.43-.08H2.82a1.34,1.34,0,0,0-1,.44A1.49,1.49,0,0,0,1.5,6a1.5,1.5,0,0,0,0,.29V20.13a1.36,1.36,0,0,0,1.34,1.35H19.09a1.35,1.35,0,0,0,1.35-1.35V15.68h.66v4.45A2,2,0,0,1,19.09,22.14Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M9.27,9.31a1.58,1.58,0,1,1,0-3.15,1.58,1.58,0,0,1,0,3.15Zm0-2.5a.92.92,0,1,0,.92.92A.92.92,0,0,0,9.27,6.81Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M7.11,14.67A1.58,1.58,0,1,1,8.69,13.1,1.57,1.57,0,0,1,7.11,14.67Zm0-2.49A.92.92,0,1,0,8,13.1.92.92,0,0,0,7.11,12.18Z",
       transform: "translate(-0.81 -1)"
-    }), /*#__PURE__*/React__default$1["default"].createElement("rect", {
+    }), /*#__PURE__*/React__default["default"].createElement("rect", {
       x: "0.33",
       y: "11.77",
       width: "4.72",
       height: "0.66"
-    }), /*#__PURE__*/React__default$1["default"].createElement("polygon", {
+    }), /*#__PURE__*/React__default["default"].createElement("polygon", {
       points: "2.08 9.53 0.33 9.53 0.33 8.87 1.8 8.87 4.28 6.39 7.21 6.39 7.21 7.05 4.55 7.05 2.08 9.53"
-    }), /*#__PURE__*/React__default$1["default"].createElement("polygon", {
+    }), /*#__PURE__*/React__default["default"].createElement("polygon", {
       points: "8.43 17.45 4.53 17.45 2.63 15.55 0.33 15.55 0.33 14.89 2.9 14.89 4.8 16.79 8.43 16.79 8.43 17.45"
     }));
   });
 
   var LoadingText = (function (props) {
-    return /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "LoadingText"
-    }, props.children, /*#__PURE__*/React__default$1["default"].createElement("span", {
+    }, props.children, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "dot"
-    }, "."), /*#__PURE__*/React__default$1["default"].createElement("span", {
+    }, "."), /*#__PURE__*/React__default["default"].createElement("span", {
       className: "dot"
-    }, "."), /*#__PURE__*/React__default$1["default"].createElement("span", {
+    }, "."), /*#__PURE__*/React__default["default"].createElement("span", {
       className: "dot"
     }, "."));
   });
@@ -3127,35 +3145,35 @@
       }
 
       if (forward) {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("a", {
+        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
           className: "Card transparent small disabled"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardImage"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "TextCenter Opacity05"
-        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, {
+        }, /*#__PURE__*/React__default["default"].createElement(Checkmark, {
           className: "small"
-        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }))), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBody"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Opacity05"
         }, "Payment confirmation has been stored")))));
       } else {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("a", {
+        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
           className: "Card transparent small disabled"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardImage"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "TextCenter"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Loading Icon"
-        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }))), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBody"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Opacity05"
         }, "Storing payment confirmation")))));
       }
@@ -3163,43 +3181,43 @@
 
     var additionalPaymentInformation = function additionalPaymentInformation() {
       if (paymentState == 'paying' && transaction == undefined) {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Card transparent disabled small"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardImage"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "TextCenter Opacity05"
-        }, /*#__PURE__*/React__default$1["default"].createElement(DigitalWalletIcon, {
+        }, /*#__PURE__*/React__default["default"].createElement(DigitalWalletIcon, {
           className: "small"
-        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }))), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBody"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Opacity05"
         }, "Confirm transaction in your wallet")))));
       } else if (paymentState == 'confirmed') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("a", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
           className: "Card transparent small",
           title: "Payment has been confirmed by the network",
           href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
           target: "_blank",
           rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardImage"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "TextCenter Opacity05"
-        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, {
+        }, /*#__PURE__*/React__default["default"].createElement(Checkmark, {
           className: "small"
-        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }))), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBody"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Opacity05"
         }, "Payment has been confirmed"))))), trackingInfo());
       }
@@ -3209,29 +3227,29 @@
       if (!payment.route.approvalRequired || payment.route.directTransfer) {
         return null;
       } else if (paymentState == 'initialized') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
           className: "ButtonPrimary",
           onClick: approve,
           title: "Allow ".concat(payment.symbol, " to be used as payment")
         }, "Allow ", payment.symbol, " to be used as payment"));
       } else if (paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("a", {
+        }, /*#__PURE__*/React__default["default"].createElement("a", {
           className: "ButtonPrimary",
           title: "Approving payment token - please wait",
           href: approvalTransaction === null || approvalTransaction === void 0 ? void 0 : approvalTransaction.url,
           target: "_blank",
           rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Approving")));
+        }, /*#__PURE__*/React__default["default"].createElement(LoadingText, null, "Approving")));
       }
     };
 
     var mainAction = function mainAction() {
       if (paymentState == 'initialized' || paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("button", {
+        return /*#__PURE__*/React__default["default"].createElement("button", {
           className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
           onClick: function onClick() {
             if (payment.route.approvalRequired && !payment.route.directTransfer) {
@@ -3247,36 +3265,36 @@
           code: currencyCode
         }).toString() : paymentValue.toString().length ? paymentValue.toString() : "".concat(payment.amount));
       } else if (paymentState == 'paying') {
-        return /*#__PURE__*/React__default$1["default"].createElement("a", {
+        return /*#__PURE__*/React__default["default"].createElement("a", {
           className: "ButtonPrimary",
           title: "Performing the payment - please wait",
           href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
           target: "_blank",
           rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Paying"));
+        }, /*#__PURE__*/React__default["default"].createElement(LoadingText, null, "Paying"));
       } else if (paymentState == 'confirmed') {
         if (tracking == true) {
           if (forward) {
             if (forwardTo) {
-              return /*#__PURE__*/React__default$1["default"].createElement("a", {
+              return /*#__PURE__*/React__default["default"].createElement("a", {
                 className: "ButtonPrimary",
                 href: forwardTo,
                 rel: "noopener noreferrer"
               }, "Continue");
             } else {
-              return /*#__PURE__*/React__default$1["default"].createElement("button", {
+              return /*#__PURE__*/React__default["default"].createElement("button", {
                 className: "ButtonPrimary",
                 onClick: close
               }, "Continue");
             }
           } else {
-            return /*#__PURE__*/React__default$1["default"].createElement("button", {
+            return /*#__PURE__*/React__default["default"].createElement("button", {
               className: "ButtonPrimary disabled",
               onClick: function onClick() {}
             }, "Continue");
           }
         } else {
-          return /*#__PURE__*/React__default$1["default"].createElement("button", {
+          return /*#__PURE__*/React__default["default"].createElement("button", {
             className: "ButtonPrimary",
             onClick: close
           }, "Close");
@@ -3284,7 +3302,7 @@
       }
     };
 
-    return /*#__PURE__*/React__default$1["default"].createElement("div", null, approvalButton(), additionalPaymentInformation(), mainAction());
+    return /*#__PURE__*/React__default["default"].createElement("div", null, approvalButton(), additionalPaymentInformation(), mainAction());
   });
 
   var DonationOverviewDialog = (function (props) {
@@ -3302,18 +3320,18 @@
         navigate = _useContext4.navigate;
 
     if (payment == undefined) {
-      return /*#__PURE__*/React__default$1["default"].createElement(DonationOverviewSkeleton, null);
+      return /*#__PURE__*/React__default["default"].createElement(DonationOverviewSkeleton, null);
     }
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Donation")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change amount" : undefined,
         onClick: function onClick() {
@@ -3323,22 +3341,22 @@
 
           navigate('ChangeAmount');
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h4", {
+      }, /*#__PURE__*/React__default["default"].createElement("h4", {
         className: "CardTitle"
-      }, "Amount"), /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, "Amount"), /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenAmountRow"
       }, new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
-      }).toString())))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }).toString())))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
-      }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change payment" : undefined,
         onClick: function onClick() {
@@ -3348,32 +3366,32 @@
 
           navigate('ChangePayment');
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h4", {
+      }, /*#__PURE__*/React__default["default"].createElement("h4", {
         className: "CardTitle"
-      }, "Payment"), /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, "Payment"), /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenSymbolCell"
-      }, payment.symbol), /*#__PURE__*/React__default$1["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenAmountCell"
-      }, format(payment.amount)))))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, format(payment.amount)))))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
-      }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null)))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement(Footer, null))
+      }, /*#__PURE__*/React__default["default"].createElement(Footer, null))
     });
   });
 
@@ -3384,34 +3402,34 @@
     var _useContext2 = React.useContext(PaymentContext),
         transaction = _useContext2.transaction;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       stacked: true,
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
         src: ErrorGraphic
-      })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      })), /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
-      }, "Payment Failed"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Payment Failed"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM"
-      }, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("a", {
+      }, /*#__PURE__*/React__default["default"].createElement("a", {
         className: "Link",
         title: "Check your transaction on a block explorer",
         href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
         target: "_blank",
         rel: "noopener noreferrer"
       }, "View on explorer")))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: function onClick() {
           return navigate('back');
@@ -3430,30 +3448,30 @@
         navigate = _useContext2.navigate;
 
     var blockchain = web3Blockchains.Blockchain.findByName(payment.route.blockchain);
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       stacked: true,
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Wrong Network")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
         src: ConnectGraphic
-      })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      })), /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
-      }, "Connect to ", blockchain.label), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Connect to ", blockchain.label), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+      }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM"
       }, "Please make sure you connect your wallet to the correct network before you try again!"))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: function onClick() {
           return navigate('back');
@@ -3467,18 +3485,18 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "DonationOverview",
       container: props.container,
       document: props.document,
       dialogs: {
-        DonationOverview: /*#__PURE__*/React__default$1["default"].createElement(DonationOverviewDialog, null),
-        ChangeAmount: /*#__PURE__*/React__default$1["default"].createElement(ChangeAmountDialog, null),
-        ChangePayment: /*#__PURE__*/React__default$1["default"].createElement(ChangePaymentDialog, null),
-        PaymentError: /*#__PURE__*/React__default$1["default"].createElement(PaymentErrorDialog, null),
-        WrongNetwork: /*#__PURE__*/React__default$1["default"].createElement(WrongNetworkDialog, null)
+        DonationOverview: /*#__PURE__*/React__default["default"].createElement(DonationOverviewDialog, null),
+        ChangeAmount: /*#__PURE__*/React__default["default"].createElement(ChangeAmountDialog, null),
+        ChangePayment: /*#__PURE__*/React__default["default"].createElement(ChangePaymentDialog, null),
+        PaymentError: /*#__PURE__*/React__default["default"].createElement(PaymentErrorDialog, null),
+        WrongNetwork: /*#__PURE__*/React__default["default"].createElement(WrongNetworkDialog, null)
       }
     });
   });
@@ -3593,7 +3611,7 @@
       startTracking(transaction, afterBlock);
     };
 
-    return /*#__PURE__*/React__default$1["default"].createElement(TrackingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(TrackingContext.Provider, {
       value: {
         tracking: tracking,
         initializeTracking: initializeTracking,
@@ -3635,7 +3653,7 @@
     };
 
     if (walletState == 'connected') {
-      return /*#__PURE__*/React__default$1["default"].createElement(WalletContext.Provider, {
+      return /*#__PURE__*/React__default["default"].createElement(WalletContext.Provider, {
         value: {
           account: account,
           wallet: wallet,
@@ -3643,7 +3661,7 @@
         }
       }, props.children);
     } else {
-      return /*#__PURE__*/React__default$1["default"].createElement(ConnectStack, {
+      return /*#__PURE__*/React__default["default"].createElement(ConnectStack, {
         document: props.document,
         container: props.container,
         resolve: connected
@@ -3720,11 +3738,11 @@
                 closed: closed
               }, function (unmount) {
                 return function (container) {
-                  return /*#__PURE__*/React__default$1["default"].createElement(ErrorProvider, {
-                    error: error,
+                  return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
                     configuration: {
                       amount: amount,
                       accept: accept,
@@ -3736,23 +3754,23 @@
                       blacklist: blacklist,
                       providers: providers
                     }
-                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default$1["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
                     document: ensureDocument(document)
-                  }, /*#__PURE__*/React__default$1["default"].createElement(DonationRoutingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(DonationRoutingProvider, {
                     container: container,
                     document: document
-                  }, /*#__PURE__*/React__default$1["default"].createElement(DonationStack, {
+                  }, /*#__PURE__*/React__default["default"].createElement(DonationStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -3785,11 +3803,6 @@
     var _useContext = React.useContext(ErrorContext),
         setError = _useContext.setError;
 
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        showSignButton = _useState2[0],
-        setShowSignButton = _useState2[1];
-
     var _useContext2 = React.useContext(ConfigurationContext),
         message = _useContext2.message,
         endpoint = _useContext2.endpoint;
@@ -3833,35 +3846,29 @@
           message: message,
           signature: signature
         }).then(props.resolve)["catch"](setError);
-      })["catch"](setError);
+      })["catch"](function (error) {
+        if (error && error.code && error.code == 4001) ; else {
+          setError(error);
+        }
+      });
     };
 
-    React.useEffect(login, []);
-    React.useEffect(function () {
-      var timeout = setTimeout(function () {
-        return setShowSignButton(true);
-      }, 10000);
-      return function () {
-        return clearTimeout(timeout);
-      };
-    }, []);
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      stacked: true,
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      body: /*#__PURE__*/React__default["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("img", {
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
         src: walletLogo
-      })), /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      })), /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL Text FontSizeL FontWeightBold PaddingTopS"
-      }, "Wallet Login"), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Wallet Login"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("p", {
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
         className: "FontSizeM PaddingLeftM PaddingRightM"
-      }, "Please sign the login message with your connected wallet."))),
-      footer: showSignButton && /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, "Please click \"Log in\" and sign the message with your connected wallet."))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: login
       }, "Log in"))
@@ -3878,15 +3885,16 @@
         _useState2[0];
         _useState2[1];
 
-    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SignLogin",
       container: props.container,
       document: props.document,
       dialogs: {
-        SignLogin: /*#__PURE__*/React__default$1["default"].createElement(SignLoginDialog, {
-          resolve: props.resolve
+        SignLogin: /*#__PURE__*/React__default["default"].createElement(SignLoginDialog, {
+          resolve: props.resolve,
+          userClosedDialog: props.userClosedDialog
         })
       }
     });
@@ -3915,25 +3923,25 @@
                     style: style,
                     document: ensureDocument(document)
                   }, function (unmount) {
-                    var rejectBeforeUnmount = function rejectBeforeUnmount() {
+                    var userClosedDialog = function userClosedDialog() {
                       reject('USER_CLOSED_DIALOG');
                       unmount();
                     };
 
                     return function (container) {
-                      return /*#__PURE__*/React__default$1["default"].createElement(ErrorProvider, {
-                        error: error,
+                      return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
+                        errorCallback: error,
                         container: container,
                         unmount: unmount
-                      }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
+                      }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
                         configuration: {
                           message: message,
                           endpoint: endpoint || '/login',
                           recover: recover
                         }
-                      }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
-                        unmount: rejectBeforeUnmount
-                      }, /*#__PURE__*/React__default$1["default"].createElement(LoginStack, {
+                      }, /*#__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) {
@@ -3941,7 +3949,7 @@
 
                           _resolve(account);
                         }
-                      }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null)))));
+                      }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null)))));
                     };
                   });
                 })["catch"](reject);
@@ -3960,7 +3968,7 @@
     }());
   };
 
-  var PaymentAmountRoutingContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var PaymentAmountRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
   var PaymentAmountRoutingProvider = (function (props) {
     var _useContext = React.useContext(ChangableAmountContext),
@@ -3982,9 +3990,9 @@
         setAccept(props.accept);
       }
     }, [amountsMissing, acceptWithAmount]);
-    return /*#__PURE__*/React__default$1["default"].createElement(PaymentAmountRoutingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(PaymentAmountRoutingContext.Provider, {
       value: {}
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentRoutingProvider, {
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentRoutingProvider, {
       accept: accept,
       whitelist: props.whitelist,
       blacklist: props.blacklist,
@@ -3997,30 +4005,30 @@
     var _useContext = React.useContext(ChangableAmountContext),
         amountsMissing = _useContext.amountsMissing;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Payment")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, amountsMissing && /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+      }, amountsMissing && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "ButtonPrimary Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))))
     });
@@ -4045,18 +4053,18 @@
         navigate = _useContext5.navigate;
 
     if (payment == undefined || paymentValue == undefined) {
-      return /*#__PURE__*/React__default$1["default"].createElement(PaymentOverviewSkeleton, null);
+      return /*#__PURE__*/React__default["default"].createElement(PaymentOverviewSkeleton, null);
     }
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Payment")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, amountsMissing && /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+      }, amountsMissing && /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change amount" : undefined,
         onClick: function onClick() {
@@ -4066,22 +4074,22 @@
 
           navigate('ChangeAmount');
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h4", {
+      }, /*#__PURE__*/React__default["default"].createElement("h4", {
         className: "CardTitle"
-      }, "Amount"), /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, "Amount"), /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenAmountRow"
       }, new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
-      }).toString())))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }).toString())))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
-      }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change payment" : undefined,
         onClick: function onClick() {
@@ -4091,32 +4099,32 @@
 
           navigate('ChangePayment');
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
-      }, amountsMissing && /*#__PURE__*/React__default$1["default"].createElement("h4", {
+      }, amountsMissing && /*#__PURE__*/React__default["default"].createElement("h4", {
         className: "CardTitle"
-      }, "Payment"), /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, "Payment"), /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenSymbolCell"
-      }, payment.symbol), /*#__PURE__*/React__default$1["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenAmountCell"
-      }, format(payment.amount)))))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, format(payment.amount)))))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
-      }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null)))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement(Footer, null))
+      }, /*#__PURE__*/React__default["default"].createElement(Footer, null))
     });
   });
 
@@ -4125,18 +4133,18 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "PaymentOverview",
       container: props.container,
       document: props.document,
       dialogs: {
-        PaymentOverview: /*#__PURE__*/React__default$1["default"].createElement(PaymentOverviewDialog, null),
-        ChangeAmount: /*#__PURE__*/React__default$1["default"].createElement(ChangeAmountDialog, null),
-        ChangePayment: /*#__PURE__*/React__default$1["default"].createElement(ChangePaymentDialog, null),
-        PaymentError: /*#__PURE__*/React__default$1["default"].createElement(PaymentErrorDialog, null),
-        WrongNetwork: /*#__PURE__*/React__default$1["default"].createElement(WrongNetworkDialog, null)
+        PaymentOverview: /*#__PURE__*/React__default["default"].createElement(PaymentOverviewDialog, null),
+        ChangeAmount: /*#__PURE__*/React__default["default"].createElement(ChangeAmountDialog, null),
+        ChangePayment: /*#__PURE__*/React__default["default"].createElement(ChangePaymentDialog, null),
+        PaymentError: /*#__PURE__*/React__default["default"].createElement(PaymentErrorDialog, null),
+        WrongNetwork: /*#__PURE__*/React__default["default"].createElement(WrongNetworkDialog, null)
       }
     });
   });
@@ -4201,11 +4209,11 @@
                 closed: closed
               }, function (unmount) {
                 return function (container) {
-                  return /*#__PURE__*/React__default$1["default"].createElement(ErrorProvider, {
-                    error: error,
+                  return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
                     configuration: {
                       amount: amount,
                       accept: accept,
@@ -4219,29 +4227,29 @@
                       providers: providers,
                       track: track
                     }
-                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
                     document: document,
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default$1["default"].createElement(PaymentAmountRoutingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(PaymentAmountRoutingProvider, {
                     accept: accept,
                     whitelist: whitelist,
                     blacklist: blacklist,
                     event: event
-                  }, /*#__PURE__*/React__default$1["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
                     document: ensureDocument(document)
-                  }, /*#__PURE__*/React__default$1["default"].createElement(PaymentProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
                     container: container,
                     document: document
-                  }, /*#__PURE__*/React__default$1["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default$1["default"].createElement(PaymentStack, {
+                  }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -4270,9 +4278,9 @@
     };
   }();
 
-  var SaleRoutingContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var SaleRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var ToTokenContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var ToTokenContext = /*#__PURE__*/React__default["default"].createContext();
 
   var ToTokenProvider = (function (props) {
     var _useContext = React.useContext(PaymentContext),
@@ -4303,7 +4311,7 @@
         });
       }
     }, [payment]);
-    return /*#__PURE__*/React__default$1["default"].createElement(ToTokenContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(ToTokenContext.Provider, {
       value: {
         toToken: toToken,
         toTokenReadableAmount: toTokenReadableAmount
@@ -4336,46 +4344,46 @@
       }
     }
 
-    return /*#__PURE__*/React__default$1["default"].createElement(SaleRoutingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(SaleRoutingContext.Provider, {
       value: {}
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentRoutingProvider, {
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentRoutingProvider, {
       accept: acceptWithAmount,
       blacklist: blacklist,
       setMaxRoute: setMaxRoute
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentProvider, {
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
       container: props.container,
       document: props.document
-    }, /*#__PURE__*/React__default$1["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ToTokenProvider, null, props.children)))));
+    }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default["default"].createElement(ToTokenProvider, null, props.children)))));
   });
 
   var SaleOverviewSkeleton = (function (props) {
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Purchase")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton",
         style: {
           height: '100px'
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "ButtonPrimary Skeleton"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
       }))))
     });
@@ -4417,31 +4425,31 @@
     }, [paymentValue]);
 
     if (toToken == undefined || toTokenReadableAmount == undefined || payment == undefined || paymentValue == undefined) {
-      return /*#__PURE__*/React__default$1["default"].createElement(SaleOverviewSkeleton, null);
+      return /*#__PURE__*/React__default["default"].createElement(SaleOverviewSkeleton, null);
     }
 
     var tokenImageElement;
 
     if (tokenImage) {
-      tokenImageElement = /*#__PURE__*/React__default$1["default"].createElement("img", {
+      tokenImageElement = /*#__PURE__*/React__default["default"].createElement("img", {
         src: tokenImage
       });
     } else {
-      tokenImageElement = /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
+      tokenImageElement = /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: toToken.address
       });
     }
 
-    return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
-      header: /*#__PURE__*/React__default$1["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
+      }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Purchase")),
-      body: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change amount" : undefined,
         onClick: function onClick() {
@@ -4451,28 +4459,28 @@
 
           navigate('ChangeAmount');
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, tokenImageElement), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, tokenImageElement), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h4", {
+      }, /*#__PURE__*/React__default["default"].createElement("h4", {
         className: "CardTitle"
-      }, "Amount"), /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, "Amount"), /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenSymbolCell"
-      }, toToken.symbol), /*#__PURE__*/React__default$1["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, toToken.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenAmountCell"
-      }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/React__default$1["default"].createElement("h3", {
+      }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/React__default["default"].createElement("h3", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
-      }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change payment" : undefined,
         onClick: function onClick() {
@@ -4482,32 +4490,32 @@
 
           navigate('ChangePayment');
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
-      }, /*#__PURE__*/React__default$1["default"].createElement("h4", {
+      }, /*#__PURE__*/React__default["default"].createElement("h4", {
         className: "CardTitle"
-      }, "Payment"), /*#__PURE__*/React__default$1["default"].createElement("h2", {
+      }, "Payment"), /*#__PURE__*/React__default["default"].createElement("h2", {
         className: "CardText"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenSymbolCell"
-      }, payment.symbol), /*#__PURE__*/React__default$1["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default$1["default"].createElement("span", {
+      }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenAmountCell"
-      }, format(payment.amount)))))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, format(payment.amount)))))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
-      }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null)))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-      }, /*#__PURE__*/React__default$1["default"].createElement(Footer, null))
+      }, /*#__PURE__*/React__default["default"].createElement(Footer, null))
     });
   });
 
@@ -4516,19 +4524,19 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SaleOverview",
       container: props.container,
       document: props.document,
       dialogs: {
-        SaleOverview: /*#__PURE__*/React__default$1["default"].createElement(SaleOverviewDialog, null),
-        ChangeAmount: /*#__PURE__*/React__default$1["default"].createElement(ChangeAmountDialog, null),
-        ChangePayment: /*#__PURE__*/React__default$1["default"].createElement(ChangePaymentDialog, null),
-        NoPaymentMethodFound: /*#__PURE__*/React__default$1["default"].createElement(NoPaymentMethodFoundDialog, null),
-        PaymentError: /*#__PURE__*/React__default$1["default"].createElement(PaymentErrorDialog, null),
-        WrongNetwork: /*#__PURE__*/React__default$1["default"].createElement(WrongNetworkDialog, null)
+        SaleOverview: /*#__PURE__*/React__default["default"].createElement(SaleOverviewDialog, null),
+        ChangeAmount: /*#__PURE__*/React__default["default"].createElement(ChangeAmountDialog, null),
+        ChangePayment: /*#__PURE__*/React__default["default"].createElement(ChangePaymentDialog, null),
+        NoPaymentMethodFound: /*#__PURE__*/React__default["default"].createElement(NoPaymentMethodFoundDialog, null),
+        PaymentError: /*#__PURE__*/React__default["default"].createElement(PaymentErrorDialog, null),
+        WrongNetwork: /*#__PURE__*/React__default["default"].createElement(WrongNetworkDialog, null)
       }
     });
   });
@@ -4605,11 +4613,11 @@
                 closed: closed
               }, function (unmount) {
                 return function (container) {
-                  return /*#__PURE__*/React__default$1["default"].createElement(ErrorProvider, {
-                    error: error,
+                  return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
                     configuration: {
                       tokenImage: tokenImage,
                       amount: amount,
@@ -4621,23 +4629,23 @@
                       blacklist: blacklist,
                       providers: providers
                     }
-                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default$1["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
                     document: ensureDocument(document)
-                  }, /*#__PURE__*/React__default$1["default"].createElement(SaleRoutingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(SaleRoutingProvider, {
                     container: container,
                     document: document
-                  }, /*#__PURE__*/React__default$1["default"].createElement(SaleStack, {
+                  }, /*#__PURE__*/React__default["default"].createElement(SaleStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -4666,12 +4674,552 @@
     };
   }();
 
+  var SelectionContext = /*#__PURE__*/React__default["default"].createContext();
+
+  var SelectionProvider = (function (props) {
+    var _useState = React.useState({}),
+        _useState2 = _slicedToArray(_useState, 2),
+        selection = _useState2[0],
+        setSelection = _useState2[1];
+
+    return /*#__PURE__*/React__default["default"].createElement(SelectionContext.Provider, {
+      value: {
+        selection: selection,
+        setSelection: setSelection
+      }
+    }, props.children);
+  });
+
+  var msToTime = (function (ms) {
+    var year, month, day, hour, minute, second;
+    second = Math.floor(ms / 1000);
+    minute = Math.floor(second / 60);
+    second = second % 60;
+    hour = Math.floor(minute / 60);
+    minute = minute % 60;
+    day = Math.floor(hour / 24);
+    hour = hour % 24;
+    month = Math.floor(day / 30);
+    day = day % 30;
+    year = Math.floor(month / 12);
+    month = month % 12;
+    return {
+      year: year,
+      month: month,
+      day: day,
+      hour: hour,
+      minute: minute,
+      second: second
+    };
+  });
+
+  var ConfirmTokenSelectionDialog = (function (props) {
+    var _useContext = React.useContext(SelectionContext),
+        selection = _useContext.selection;
+
+    var _useContext2 = React.useContext(ClosableContext),
+        setOpen = _useContext2.setOpen;
+
+    var token = selection.token;
+    var address = token.address || token.external_id;
+    var logo = token.logo || token.image;
+    var blockchain = web3Blockchains.Blockchain.findByName(token.blockchain);
+    var age = token.first_transfer ? msToTime(new Date() - new Date(token.first_transfer)) : undefined;
+
+    if (age) {
+      age = [age.year && age.year >= 1 ? age.year >= 2 ? "".concat(age.year, " years") : "1 year" : undefined, age.month && age.month >= 1 ? age.month >= 2 ? "".concat(age.month, " months") : "1 month" : undefined, age.day && age.day >= 1 && age.month <= 1 && age.year < 1 ? age.day >= 2 ? "".concat(age.day, " days !!!") : "1 day !!!" : undefined].filter(function (n) {
+        return n;
+      }).join(' ');
+    }
+
+    var holders = token.unique_senders ? token.unique_senders : undefined;
+
+    if (holders) {
+      if (holders > 1000000) {
+        holders = "Millions";
+      } else if (holders > 100000) {
+        holders = "Hundreds of Thousands";
+      } else if (holders > 2000) {
+        holders = "Thousands";
+      } else if (holders > 100) {
+        holders = "Hundreds";
+      } else {
+        holders = "Only a Few!!!";
+      }
+    }
+
+    var onClickConfirm = function onClickConfirm() {
+      setOpen(false);
+      props.resolve({
+        blockchain: token.blockchain,
+        address: token.external_id,
+        symbol: token.symbol,
+        name: token.name,
+        decimals: token.decimals,
+        logo: token.image
+      });
+      setTimeout(props.unmount, 300);
+    };
+
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
+        className: "LineHeightL FontSizeL"
+      }, "Confirm Selection"))),
+      stacked: true,
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TokenImage medium"
+      }, logo && /*#__PURE__*/React__default["default"].createElement("img", {
+        src: logo
+      }), !logo && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
+        blockchain: token.blockchain,
+        address: address
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Alert"
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Please review this information"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS"
+      }, /*#__PURE__*/React__default["default"].createElement("table", {
+        className: "Table"
+      }, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
+        className: "small"
+      }, /*#__PURE__*/React__default["default"].createElement("td", {
+        colSpan: "2"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "Link",
+        href: blockchain.explorerUrlFor({
+          token: address
+        }),
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, address)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Blockchain")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, blockchain.label))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Symbol")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, token.symbol))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Name")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, token.name))), age && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Age")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, age))), holders && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Holders")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, holders))))))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        className: "ButtonPrimary",
+        onClick: onClickConfirm
+      }, "Confirm"))
+    });
+  });
+
+  var SelectBlockchainDialog = (function (props) {
+    var _useContext = React.useContext(SelectionContext),
+        setSelection = _useContext.setSelection;
+
+    var _useContext2 = React.useContext(reactDialogStack.NavigateStackContext),
+        navigate = _useContext2.navigate;
+
+    var stacked = Object.keys(props.selection).length > 1;
+    var blockchains = [web3Blockchains.Blockchain.findByName('ethereum'), web3Blockchains.Blockchain.findByName('bsc')];
+
+    var selectBlockchain = function selectBlockchain(blockchain) {
+      setSelection(Object.assign(props.selection, {
+        blockchain: blockchain
+      }));
+
+      if (stacked) {
+        navigate('back');
+      } else {
+        props.resolve(blockchain);
+      }
+    };
+
+    var elements = blockchains.map(function (blockchain, index) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: index,
+        className: "Card Row",
+        onClick: function onClick() {
+          return selectBlockchain(blockchain);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardImage"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
+        src: blockchain.logo
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardBody"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardText"
+      }, blockchain.label)));
+    });
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
+        className: "LineHeightL FontSizeL"
+      }, "Select Blockchain"))),
+      stacked: stacked,
+      bodyClassName: "ScrollHeight",
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS"
+      }, elements),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+      })
+    });
+  });
+
+  var SelectTokenDialog = (function (props) {
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
+        navigate = _useContext.navigate;
+
+    var _useContext2 = React.useContext(ClosableContext),
+        setOpen = _useContext2.setOpen;
+
+    var _useContext3 = React.useContext(SelectionContext),
+        setSelection = _useContext3.setSelection;
+
+    var _useState = React.useState(web3Blockchains.Blockchain.findByName('ethereum')),
+        _useState2 = _slicedToArray(_useState, 2),
+        blockchain = _useState2[0],
+        setBlockchain = _useState2[1];
+
+    var _useState3 = React.useState(),
+        _useState4 = _slicedToArray(_useState3, 2),
+        requestController = _useState4[0],
+        setRequestController = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        showAddToken = _useState6[0],
+        setShowAddToken = _useState6[1];
+
+    var _useState7 = React.useState([]),
+        _useState8 = _slicedToArray(_useState7, 2),
+        tokens = _useState8[0],
+        setTokens = _useState8[1];
+
+    var _useState9 = React.useState(),
+        _useState10 = _slicedToArray(_useState9, 2);
+        _useState10[0];
+        _useState10[1];
+
+    var searchElement = React.useRef();
+    React.useEffect(function () {
+      setSelection(Object.assign(props.selection, {
+        blockchain: blockchain,
+        token: undefined
+      }));
+    }, []);
+    React.useEffect(function () {
+      setBlockchain(props.selection.blockchain);
+      setTokens(props.selection.blockchain.tokens);
+
+      if (searchElement.current) {
+        searchElement.current.value = '';
+        searchElement.current.focus();
+      }
+    }, [props.selection.blockchain]);
+
+    var onClickChangeBlockchain = function onClickChangeBlockchain() {
+      navigate('SelectBlockchain');
+    };
+
+    var onClickAddToken = function onClickAddToken() {
+      setShowAddToken(true);
+
+      if (searchElement.current) {
+        searchElement.current.value = '';
+        searchElement.current.focus();
+      }
+    };
+
+    var onChangeSearch = function onChangeSearch(event) {
+      if (requestController) {
+        requestController.abort();
+      }
+
+      var newRequestController = new AbortController();
+      setRequestController(newRequestController);
+      var signal = newRequestController.signal;
+      var term = event.target.value;
+
+      if (term.match(/^0x/)) {
+        setTokens([]);
+        var token;
+
+        try {
+          token = new web3Tokens.Token({
+            blockchain: blockchain.name,
+            address: term
+          });
+        } catch (_unused) {}
+
+        if (token == undefined) {
+          return;
+        }
+
+        Promise.all([token.name(), token.symbol(), token.decimals()]).then(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 3),
+              name = _ref2[0],
+              symbol = _ref2[1],
+              decimals = _ref2[2];
+
+          setTokens([{
+            name: name,
+            symbol: symbol,
+            decimals: decimals,
+            address: term,
+            blockchain: blockchain.name
+          }]);
+        });
+      } else if (term && term.length) {
+        setTokens([]);
+        fetch("https://api.depay.fi/v2/tokens/search?blockchain=".concat(blockchain.name, "&term=").concat(term), {
+          signal: signal,
+          headers: {
+            'X-Api-Key': apiKey
+          }
+        }).then(function (response) {
+          if (response.status == 200) {
+            response.json().then(function (tokens) {
+              setTokens(tokens);
+            });
+          }
+        })["catch"](function () {});
+      } else {
+        setTokens(props.selection.blockchain.tokens);
+      }
+    };
+
+    var select = function select(token) {
+      if (blockchain.tokens.find(function (majorToken) {
+        return majorToken.address.toLowerCase() == (token.address || token.external_id).toLowerCase();
+      })) {
+        setOpen(false);
+        props.resolve({
+          blockchain: blockchain.name,
+          address: token.address || token.external_id,
+          logo: token.logo || token.image,
+          name: token.name,
+          symbol: token.symbol,
+          decimals: token.decimals
+        });
+        setTimeout(props.unmount, 300);
+      } else {
+        setSelection(Object.assign(props.selection, {
+          token: token
+        }));
+        navigate('ConfirmTokenSelection');
+      }
+    };
+
+    var elements = tokens.map(function (token, index) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: "".concat(index, "-").concat(token.address),
+        className: "Card Row",
+        onClick: function onClick() {
+          return select(token);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardImage"
+      }, token.logo && /*#__PURE__*/React__default["default"].createElement("img", {
+        src: token.logo
+      }), token.image && /*#__PURE__*/React__default["default"].createElement("img", {
+        src: token.image
+      }), !(token.logo || token.image) && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
+        blockchain: token.blockchain,
+        address: token.external_id || token.address
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardBody"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardTokenSymbol",
+        title: token.symbol
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardText"
+      }, token.symbol)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardTokenName",
+        title: token.name
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardText"
+      }, token.name))));
+    });
+
+    if (props.selection.blockchain == undefined) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
+        className: "LineHeightL FontSizeL"
+      }, "Select Token")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingBottomXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Card small",
+        onClick: onClickChangeBlockchain
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardImage small"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
+        src: props.selection.blockchain.logo
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardBody"
+      }, props.selection.blockchain.label), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardAction"
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        onChange: onChangeSearch,
+        className: "Search",
+        autoFocus: true,
+        placeholder: "Search name or paste address",
+        ref: searchElement
+      }), showAddToken && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightXS PaddingLeftXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Tooltip"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "TooltipArrowUp"
+      }), "Paste or enter token address here!")))),
+      bodyClassName: "ScrollHeight",
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: ""
+      }, elements),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Link",
+        onClick: onClickAddToken
+      }, "Token missing? Add it.")))
+    });
+  });
+
+  var SelectStack = (function (props) {
+    var _useContext = React.useContext(ConfigurationContext),
+        what = _useContext.what;
+
+    var _useContext2 = React.useContext(ClosableContext),
+        open = _useContext2.open,
+        close = _useContext2.close;
+
+    var _useContext3 = React.useContext(SelectionContext),
+        selection = _useContext3.selection;
+
+    var start;
+
+    switch (what) {
+      default:
+        start = 'SelectToken';
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      open: open,
+      close: close,
+      start: start,
+      container: props.container,
+      document: props.document,
+      dialogs: {
+        SelectToken: /*#__PURE__*/React__default["default"].createElement(SelectTokenDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        }),
+        SelectBlockchain: /*#__PURE__*/React__default["default"].createElement(SelectBlockchainDialog, {
+          selection: selection,
+          resolve: props.resolve
+        }),
+        ConfirmTokenSelection: /*#__PURE__*/React__default["default"].createElement(ConfirmTokenSelectionDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        })
+      }
+    });
+  });
+
+  var Select = function Select(options) {
+    var style, error, document, what;
+
+    if (_typeof(options) == 'object') {
+      style = options.style;
+      error = options.error;
+      document = options.document;
+      what = options.what;
+    }
+
+    var startupError;
+
+    if (what == undefined) {
+      startupError = '"what" needs to be configured!';
+    } else if (['token'].indexOf(what) < 0) {
+      startupError = "Unknown \"what\" configured: ".concat(what, "!");
+    }
+
+    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();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  };
+
   var DePayWidgets = {
     Connect: Connect,
     Donation: Donation,
     Login: Login,
     Payment: Payment,
     Sale: Sale,
+    Select: Select,
     provider: web3Client.provider
   };