@depay/widgets 6.3.0 → 6.4.0

package/dist/umd/index.js

@@ -913,7 +913,8 @@
         closable: closable,
         setClosable: setClosable,
         close: close,
-        open: open
+        open: open,
+        setOpen: setOpen
       }
     }, props.children);
   });
@@ -968,23 +969,21 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: ["DialogHeader", props.stacked ? 'TextCenter' : ''].join(' ')
     }, props.stacked && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "DialogHeaderAction PaddingTopS PaddingLeftS PaddingRightS"
+      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["default"].createElement(ChevronLeft, null))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "DialogHeaderTitle"
-    }, props.header), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "DialogHeaderAction PaddingTopS PaddingLeftS PaddingRightS"
+    }, /*#__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["default"].createElement(CloseIcon, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "DialogBody"
+      className: ["DialogBody", props.bodyClassName].join(' ')
     }, props.body), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "DialogFooter"
     }, props.footer));
@@ -1140,6 +1139,7 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage"
       }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
         src: wallet.info.logo
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
@@ -1156,7 +1156,7 @@
         className: "LineHeightL FontSizeL"
       }, "Select a wallet")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingBottomXS PaddingLeftS PaddingRightS"
+        className: "PaddingBottomS PaddingLeftS PaddingRightS"
       }, walletCards),
       footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingBottomS"
@@ -1582,7 +1582,7 @@
   }(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];
@@ -1595,8 +1595,8 @@
     var setErrorFromChildren = function setErrorFromChildren(error) {
       setError(error);
 
-      if (props.error) {
-        props.error(error);
+      if (props.errorCallback) {
+        props.errorCallback(error);
       }
     };
 
@@ -1655,6 +1655,10 @@
     }
   });
 
+  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  ";
   });
@@ -1668,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) {
@@ -1703,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  ");
   });
@@ -1727,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  ");
   });
@@ -1740,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) {
@@ -1753,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) {
@@ -1866,7 +1890,7 @@
 
                   return function (container) {
                     return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
-                      error: error,
+                      errorCallback: error,
                       container: container,
                       unmount: unmount
                     }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
@@ -2997,7 +3021,7 @@
         className: "LineHeightL FontSizeL"
       }, "Donation")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3306,7 +3330,7 @@
         className: "LineHeightL FontSizeL"
       }, "Donation")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change amount" : undefined,
@@ -3715,7 +3739,7 @@
               }, function (unmount) {
                 return function (container) {
                   return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
-                    error: error,
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
                   }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
@@ -3906,7 +3930,7 @@
 
                     return function (container) {
                       return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
-                        error: error,
+                        errorCallback: error,
                         container: container,
                         unmount: unmount
                       }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
@@ -3988,7 +4012,7 @@
         className: "LineHeightL FontSizeL"
       }, "Payment")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
       }, amountsMissing && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4039,7 +4063,7 @@
         className: "LineHeightL FontSizeL"
       }, "Payment")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
       }, amountsMissing && /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change amount" : undefined,
@@ -4186,7 +4210,7 @@
               }, function (unmount) {
                 return function (container) {
                   return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
-                    error: error,
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
                   }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
@@ -4340,7 +4364,7 @@
         className: "LineHeightL FontSizeL"
       }, "Purchase")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Card Skeleton",
         style: {
@@ -4424,7 +4448,7 @@
         className: "LineHeightL FontSizeL"
       }, "Purchase")),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+        className: "PaddingLeftM PaddingRightM PaddingBottomXS"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
         title: paymentState == 'initialized' ? "Change amount" : undefined,
@@ -4590,7 +4614,7 @@
               }, function (unmount) {
                 return function (container) {
                   return /*#__PURE__*/React__default["default"].createElement(ErrorProvider, {
-                    error: error,
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
                   }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
@@ -4650,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
   };