@depay/widgets 6.3.0 → 6.4.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useRef } from 'react';
 import { NavigateStackContext, ReactDialogStack } from '@depay/react-dialog-stack';
 import { getWallet, wallets } from '@depay/web3-wallets';
 import ReactDOM from 'react-dom';
@@ -918,7 +918,8 @@ var ClosableProvider = (function (props) {
       closable: closable,
       setClosable: setClosable,
       close: close,
-      open: open
+      open: open,
+      setOpen: setOpen
     }
   }, props.children);
 });
@@ -973,23 +974,21 @@ var Dialog$1 = (function (props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: ["DialogHeader", props.stacked ? 'TextCenter' : ''].join(' ')
   }, props.stacked && /*#__PURE__*/React.createElement("div", {
-    className: "DialogHeaderAction PaddingTopS PaddingLeftS PaddingRightS"
+    className: "DialogHeaderActionLeft PaddingTopS PaddingLeftS PaddingRightS"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: function onClick() {
       return navigate('back');
     },
     className: "ButtonCircular",
     title: "Go back"
-  }, /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement("div", {
-    className: "DialogHeaderTitle"
-  }, props.header), /*#__PURE__*/React.createElement("div", {
-    className: "DialogHeaderAction PaddingTopS PaddingLeftS PaddingRightS"
+  }, /*#__PURE__*/React.createElement(ChevronLeft, null))), props.header, /*#__PURE__*/React.createElement("div", {
+    className: "DialogHeaderActionRight PaddingTopS PaddingLeftS PaddingRightS"
   }, closable && /*#__PURE__*/React.createElement("button", {
     onClick: close,
     className: "ButtonCircular",
     title: "Close dialog"
   }, /*#__PURE__*/React.createElement(CloseIcon, null)))), /*#__PURE__*/React.createElement("div", {
-    className: "DialogBody"
+    className: ["DialogBody", props.bodyClassName].join(' ')
   }, props.body), /*#__PURE__*/React.createElement("div", {
     className: "DialogFooter"
   }, props.footer));
@@ -1145,6 +1144,7 @@ var SelectWalletDialog = (function (props) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "CardImage"
     }, /*#__PURE__*/React.createElement("img", {
+      className: "transparent",
       src: wallet.info.logo
     })), /*#__PURE__*/React.createElement("div", {
       className: "CardBody"
@@ -1161,7 +1161,7 @@ var SelectWalletDialog = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Select a wallet")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingBottomXS PaddingLeftS PaddingRightS"
+      className: "PaddingBottomS PaddingLeftS PaddingRightS"
     }, walletCards),
     footer: /*#__PURE__*/React.createElement("div", {
       className: "PaddingBottomS"
@@ -1587,7 +1587,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 var ErrorProvider = (function (props) {
-  var _useState = useState(),
+  var _useState = useState(props.error),
       _useState2 = _slicedToArray(_useState, 2),
       error = _useState2[0],
       setError = _useState2[1];
@@ -1600,8 +1600,8 @@ var ErrorProvider = (function (props) {
   var setErrorFromChildren = function setErrorFromChildren(error) {
     setError(error);
 
-    if (props.error) {
-      props.error(error);
+    if (props.errorCallback) {
+      props.errorCallback(error);
     }
   };
 
@@ -1660,6 +1660,10 @@ var ErrorProvider = (function (props) {
   }
 });
 
+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  ";
 });
@@ -1673,11 +1677,11 @@ var ButtonPrimaryStyle = (function (style) {
 });
 
 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) {
@@ -1708,6 +1712,10 @@ var LabelStyle = (function (style) {
   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  ");
 });
@@ -1732,10 +1740,18 @@ var ResetStyle = (function () {
   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  ");
 });
@@ -1745,7 +1761,15 @@ var TextStyle = (function (style) {
 });
 
 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) {
@@ -1758,7 +1782,7 @@ var styleRenderer = (function (style) {
     },
     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) {
@@ -1871,7 +1895,7 @@ var Connect = function Connect(options) {
 
                 return function (container) {
                   return /*#__PURE__*/React.createElement(ErrorProvider, {
-                    error: error,
+                    errorCallback: error,
                     container: container,
                     unmount: unmount
                   }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
@@ -3002,7 +3026,7 @@ var DonationOverviewSkeleton = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Donation")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, /*#__PURE__*/React.createElement("div", {
       className: "Card Skeleton"
     }, /*#__PURE__*/React.createElement("div", {
@@ -3311,7 +3335,7 @@ var DonationOverviewDialog = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Donation")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, /*#__PURE__*/React.createElement("div", {
       className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
       title: paymentState == 'initialized' ? "Change amount" : undefined,
@@ -3720,7 +3744,7 @@ var Donation = /*#__PURE__*/function () {
             }, function (unmount) {
               return function (container) {
                 return /*#__PURE__*/React.createElement(ErrorProvider, {
-                  error: error,
+                  errorCallback: error,
                   container: container,
                   unmount: unmount
                 }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
@@ -3911,7 +3935,7 @@ var Login = function Login(options) {
 
                   return function (container) {
                     return /*#__PURE__*/React.createElement(ErrorProvider, {
-                      error: error,
+                      errorCallback: error,
                       container: container,
                       unmount: unmount
                     }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
@@ -3993,7 +4017,7 @@ var PaymentOverviewSkeleton = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Payment")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, amountsMissing && /*#__PURE__*/React.createElement("div", {
       className: "Card Skeleton"
     }, /*#__PURE__*/React.createElement("div", {
@@ -4044,7 +4068,7 @@ var PaymentOverviewDialog = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Payment")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, amountsMissing && /*#__PURE__*/React.createElement("div", {
       className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
       title: paymentState == 'initialized' ? "Change amount" : undefined,
@@ -4191,7 +4215,7 @@ var Payment = /*#__PURE__*/function () {
             }, function (unmount) {
               return function (container) {
                 return /*#__PURE__*/React.createElement(ErrorProvider, {
-                  error: error,
+                  errorCallback: error,
                   container: container,
                   unmount: unmount
                 }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
@@ -4345,7 +4369,7 @@ var SaleOverviewSkeleton = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Purchase")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, /*#__PURE__*/React.createElement("div", {
       className: "Card Skeleton",
       style: {
@@ -4429,7 +4453,7 @@ var SaleOverviewDialog = (function (props) {
       className: "LineHeightL FontSizeL"
     }, "Purchase")),
     body: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, /*#__PURE__*/React.createElement("div", {
       className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),
       title: paymentState == 'initialized' ? "Change amount" : undefined,
@@ -4595,7 +4619,7 @@ var Sale = /*#__PURE__*/function () {
             }, function (unmount) {
               return function (container) {
                 return /*#__PURE__*/React.createElement(ErrorProvider, {
-                  error: error,
+                  errorCallback: error,
                   container: container,
                   unmount: unmount
                 }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
@@ -4655,12 +4679,552 @@ var Sale = /*#__PURE__*/function () {
   };
 }();
 
+var SelectionContext = /*#__PURE__*/React.createContext();
+
+var SelectionProvider = (function (props) {
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      selection = _useState2[0],
+      setSelection = _useState2[1];
+
+  return /*#__PURE__*/React.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 = useContext(SelectionContext),
+      selection = _useContext.selection;
+
+  var _useContext2 = useContext(ClosableContext),
+      setOpen = _useContext2.setOpen;
+
+  var token = selection.token;
+  var address = token.address || token.external_id;
+  var logo = token.logo || token.image;
+  var blockchain = 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.createElement(Dialog$1, {
+    header: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+      className: "LineHeightL FontSizeL"
+    }, "Confirm Selection"))),
+    stacked: true,
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingLeftM PaddingRightM"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "TokenImage medium"
+    }, logo && /*#__PURE__*/React.createElement("img", {
+      src: logo
+    }), !logo && /*#__PURE__*/React.createElement(TokenImage, {
+      blockchain: token.blockchain,
+      address: address
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Alert"
+    }, /*#__PURE__*/React.createElement("strong", null, "Please review this information"))), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS"
+    }, /*#__PURE__*/React.createElement("table", {
+      className: "Table"
+    }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
+      className: "small"
+    }, /*#__PURE__*/React.createElement("td", {
+      colSpan: "2"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      className: "Link",
+      href: blockchain.explorerUrlFor({
+        token: address
+      }),
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, address)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "TableSubTitle"
+    }, "Blockchain")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, blockchain.label))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "TableSubTitle"
+    }, "Symbol")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, token.symbol))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "TableSubTitle"
+    }, "Name")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, token.name))), age && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "TableSubTitle"
+    }, "Age")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, age))), holders && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "TableSubTitle"
+    }, "Holders")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, holders))))))),
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "ButtonPrimary",
+      onClick: onClickConfirm
+    }, "Confirm"))
+  });
+});
+
+var SelectBlockchainDialog = (function (props) {
+  var _useContext = useContext(SelectionContext),
+      setSelection = _useContext.setSelection;
+
+  var _useContext2 = useContext(NavigateStackContext),
+      navigate = _useContext2.navigate;
+
+  var stacked = Object.keys(props.selection).length > 1;
+  var blockchains = [Blockchain.findByName('ethereum'), 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.createElement("div", {
+      key: index,
+      className: "Card Row",
+      onClick: function onClick() {
+        return selectBlockchain(blockchain);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "CardImage"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "transparent",
+      src: blockchain.logo
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "CardBody"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "CardText"
+    }, blockchain.label)));
+  });
+  return /*#__PURE__*/React.createElement(Dialog$1, {
+    header: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+      className: "LineHeightL FontSizeL"
+    }, "Select Blockchain"))),
+    stacked: stacked,
+    bodyClassName: "ScrollHeight",
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS"
+    }, elements),
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+    })
+  });
+});
+
+var SelectTokenDialog = (function (props) {
+  var _useContext = useContext(NavigateStackContext),
+      navigate = _useContext.navigate;
+
+  var _useContext2 = useContext(ClosableContext),
+      setOpen = _useContext2.setOpen;
+
+  var _useContext3 = useContext(SelectionContext),
+      setSelection = _useContext3.setSelection;
+
+  var _useState = useState(Blockchain.findByName('ethereum')),
+      _useState2 = _slicedToArray(_useState, 2),
+      blockchain = _useState2[0],
+      setBlockchain = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      requestController = _useState4[0],
+      setRequestController = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showAddToken = _useState6[0],
+      setShowAddToken = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      tokens = _useState8[0],
+      setTokens = _useState8[1];
+
+  var _useState9 = useState(),
+      _useState10 = _slicedToArray(_useState9, 2);
+      _useState10[0];
+      _useState10[1];
+
+  var searchElement = useRef();
+  useEffect(function () {
+    setSelection(Object.assign(props.selection, {
+      blockchain: blockchain,
+      token: undefined
+    }));
+  }, []);
+  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 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.createElement("div", {
+      key: "".concat(index, "-").concat(token.address),
+      className: "Card Row",
+      onClick: function onClick() {
+        return select(token);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "CardImage"
+    }, token.logo && /*#__PURE__*/React.createElement("img", {
+      src: token.logo
+    }), token.image && /*#__PURE__*/React.createElement("img", {
+      src: token.image
+    }), !(token.logo || token.image) && /*#__PURE__*/React.createElement(TokenImage, {
+      blockchain: token.blockchain,
+      address: token.external_id || token.address
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "CardBody"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "CardTokenSymbol",
+      title: token.symbol
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "CardText"
+    }, token.symbol)), /*#__PURE__*/React.createElement("div", {
+      className: "CardTokenName",
+      title: token.name
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "CardText"
+    }, token.name))));
+  });
+
+  if (props.selection.blockchain == undefined) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Dialog$1, {
+    header: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+      className: "LineHeightL FontSizeL"
+    }, "Select Token")), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingBottomXS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Card small",
+      onClick: onClickChangeBlockchain
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "CardImage small"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "transparent",
+      src: props.selection.blockchain.logo
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "CardBody"
+    }, props.selection.blockchain.label), /*#__PURE__*/React.createElement("div", {
+      className: "CardAction"
+    }, /*#__PURE__*/React.createElement(ChevronRight, null)))), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingBottomS"
+    }, /*#__PURE__*/React.createElement("input", {
+      onChange: onChangeSearch,
+      className: "Search",
+      autoFocus: true,
+      placeholder: "Search name or paste address",
+      ref: searchElement
+    }), showAddToken && /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingRightXS PaddingLeftXS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Tooltip"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "TooltipArrowUp"
+    }), "Paste or enter token address here!")))),
+    bodyClassName: "ScrollHeight",
+    body: /*#__PURE__*/React.createElement("div", {
+      className: ""
+    }, elements),
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingBottomXS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Link",
+      onClick: onClickAddToken
+    }, "Token missing? Add it.")))
+  });
+});
+
+var SelectStack = (function (props) {
+  var _useContext = useContext(ConfigurationContext),
+      what = _useContext.what;
+
+  var _useContext2 = useContext(ClosableContext),
+      open = _useContext2.open,
+      close = _useContext2.close;
+
+  var _useContext3 = useContext(SelectionContext),
+      selection = _useContext3.selection;
+
+  var start;
+
+  switch (what) {
+    default:
+      start = 'SelectToken';
+  }
+
+  return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    open: open,
+    close: close,
+    start: start,
+    container: props.container,
+    document: props.document,
+    dialogs: {
+      SelectToken: /*#__PURE__*/React.createElement(SelectTokenDialog, {
+        selection: selection,
+        resolve: props.resolve,
+        unmount: props.unmount
+      }),
+      SelectBlockchain: /*#__PURE__*/React.createElement(SelectBlockchainDialog, {
+        selection: selection,
+        resolve: props.resolve
+      }),
+      ConfirmTokenSelection: /*#__PURE__*/React.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.createElement(ErrorProvider, {
+                    error: startupError,
+                    errorCallback: error,
+                    container: container,
+                    unmount: unmount
+                  }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                    configuration: {
+                      what: what
+                    }
+                  }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                    unmount: userClosedDialog
+                  }, /*#__PURE__*/React.createElement(SelectionProvider, null, /*#__PURE__*/React.createElement(SelectStack, {
+                    document: document,
+                    container: container,
+                    unmount: unmount,
+                    resolve: resolve
+                  })), /*#__PURE__*/React.createElement(PoweredBy, null)))));
+                };
+              });
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+};
+
 var DePayWidgets = {
   Connect: Connect,
   Donation: Donation,
   Login: Login,
   Payment: Payment,
   Sale: Sale,
+  Select: Select,
   provider: provider
 };