@depay/widgets 7.13.1 → 7.14.1

package/dist/esm/index.js

@@ -1323,7 +1323,7 @@ var CardStyle = (function (style) {
 });
 
 var DialogStyle = (function (style) {
-  return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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: 13px;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 13px;\n        border-top-radius: 13px;\n        display: flex;\n        flex-direction: column;\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\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      border-top-left-radius: 13px;\n      border-top-right-radius: 13px;\n      min-height: 54px;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 48px;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 48px;\n    }\n\n    .DialogFooter {\n      border-bottom-left-radius: 13px;\n      border-bottom-right-radius: 13px;\n      line-height: 24px;\n      min-height: 32px;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
+  return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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.2);\n      border-radius: 13px;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 13px;\n        border-top-radius: 13px;\n        display: flex;\n        flex-direction: column;\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\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      border-top-left-radius: 13px;\n      border-top-right-radius: 13px;\n      min-height: 54px;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 48px;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 48px;\n    }\n\n    .DialogFooter {\n      border-bottom-left-radius: 13px;\n      border-bottom-right-radius: 13px;\n      line-height: 24px;\n      min-height: 32px;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
 });
 
 var FontStyle = (function (style) {
@@ -1367,7 +1367,7 @@ var PaddingStyle = (function () {
 });
 
 var PoweredByStyle = (function (style) {
-  return "\n\n    .PoweredByWrapper {\n      display: block;\n      left: 0;\n      padding-top: 3px;\n      position: fixed;\n      right: 0;\n      text-align: center;\n      top: 0;\n    }\n\n    .contained .PoweredByWrapper {\n      position: absolute;\n    }\n\n    .PoweredByLink {\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n      color: white;\n      opacity: 0.4;\n      display: inline-block;\n      font-size: 14px;\n      font-style: italic;\n      font-weight: bold;\n      letter-spacing: -0.2px;\n      margin-left: 8px;\n      text-decoration: none;\n    }\n\n    .PoweredByLink:hover, .PoweredByLink:active {\n      opacity: 1.0;\n      color: ".concat(style.colors.primary, ";\n    }\n  ");
+  return "\n\n    .PoweredByWrapper {\n      display: block;\n      left: 0;\n      padding-top: 3px;\n      position: fixed;\n      right: 0;\n      text-align: center;\n      top: 0;\n    }\n\n    .contained .PoweredByWrapper {\n      position: absolute;\n    }\n\n    .PoweredByLink {\n      color: white;\n      display: inline-block;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n      font-size: 14px;\n      font-style: italic;\n      font-weight: bold;\n      letter-spacing: -0.2px;\n      margin-left: 8px;\n      opacity: 0.5;\n      text-decoration: none;\n      text-shadow: black 0 0 2px;\n    }\n\n    .PoweredByLink:hover, .PoweredByLink:active {\n      opacity: 1.0;\n      color: ".concat(style.colors.primary, ";\n    }\n  ");
 });
 
 var RangeSliderStyle = (function (style) {
@@ -1411,15 +1411,17 @@ var TooltipStyle = (function (style) {
 });
 
 var styleRenderer = (function (style) {
-  style = Object.assign({
-    colors: {
+  var _style, _style2;
+
+  style = {
+    colors: Object.assign({
       primary: '#ea357a',
       buttonText: '#ffffff',
       icons: '#000000',
       text: '#212529'
-    },
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
-  }, style);
+    }, ((_style = style) === null || _style === void 0 ? void 0 : _style.colors) || {}),
+    fontFamily: ((_style2 = style) === null || _style2 === void 0 ? void 0 : _style2.fontFamily) || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+  };
   return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
 });
 
@@ -19064,13 +19066,13 @@ var ChangableAmountProvider = (function (props) {
             }).then(function (readableMaxAmount) {
               var slippage = 1.01;
               var maxAmount = parseFloat(new Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
-              setMaxAmount(maxAmount > 10 ? Math.round(maxAmount) : round(maxAmount));
+              setMaxAmount(maxAmount > 10 ? Math.round(maxAmount - 1) : round(maxAmount - 1));
             })["catch"](setError);
           })["catch"](setError);
         } else if (maxRoute.fromToken.address == CONSTANTS[maxRoute.blockchain].USD) {
           var _maxAmount = parseFloat(new Decimal(readableMaxAmount).mul(conversionRate).toString());
 
-          setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount) : _maxAmount);
+          setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount - 1) : _maxAmount - 1);
         } else {
           route({
             blockchain: maxRoute.blockchain,
@@ -19247,7 +19249,8 @@ var PaymentProvider = (function (props) {
       setUpdatable = _useContext6.setUpdatable;
 
   var _useContext7 = useContext(NavigateContext),
-      navigate = _useContext7.navigate;
+      navigate = _useContext7.navigate,
+      set = _useContext7.set;
 
   var _useContext8 = useContext(WalletContext),
       wallet = _useContext8.wallet;
@@ -19299,7 +19302,7 @@ var PaymentProvider = (function (props) {
     }
 
     setClosable(true);
-    navigate('PaymentError');
+    set(['PaymentError']);
   };
 
   var pay = /*#__PURE__*/function () {
@@ -20361,7 +20364,9 @@ var ChangeAmountDialog = (function (props) {
       className: "PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS TextCenter PaddingBottomL"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "PaddingBottomM"
+    }, /*#__PURE__*/React.createElement("input", {
       max: parseFloat(maxAmount),
       min: min,
       step: step,
@@ -20381,12 +20386,12 @@ var ChangeAmountDialog = (function (props) {
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: "FontSizeS"
-    }, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("button", {
+    }, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       className: "TextButton",
       onClick: function onClick() {
         changeAmount(toValidValue(maxAmount));
       }
-    }, "(Max)")))))),
+    }, "(Max)"))))))),
     footer: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
     }, /*#__PURE__*/React.createElement("button", {
@@ -20536,12 +20541,15 @@ var ChangePaymentDialog = (function (props) {
 });
 
 var DonationOverviewSkeleton = (function (props) {
+  var _useContext = useContext(ConfigurationContext),
+      title = _useContext.title;
+
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
     }, /*#__PURE__*/React.createElement("h1", {
       className: "LineHeightL FontSizeL"
-    }, "Donation")),
+    }, title || 'Donation')),
     body: /*#__PURE__*/React.createElement("div", {
       className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, /*#__PURE__*/React.createElement("div", {
@@ -20895,7 +20903,8 @@ var Footer = (function () {
 
 var DonationOverviewDialog = (function (props) {
   var _useContext = useContext(ConfigurationContext),
-      currencyCode = _useContext.currencyCode;
+      currencyCode = _useContext.currencyCode,
+      title = _useContext.title;
 
   var _useContext2 = useContext(ChangableAmountContext),
       amount = _useContext2.amount;
@@ -20917,7 +20926,7 @@ var DonationOverviewDialog = (function (props) {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
     }, /*#__PURE__*/React.createElement("h1", {
       className: "LineHeightL FontSizeL"
-    }, "Donation")),
+    }, title || 'Donation')),
     body: /*#__PURE__*/React.createElement("div", {
       className: "PaddingLeftM PaddingRightM PaddingBottomXS"
     }, /*#__PURE__*/React.createElement("div", {
@@ -20996,9 +21005,6 @@ var PaymentErrorDialog = (function () {
   var _useContext2 = useContext(PaymentContext),
       transaction = _useContext2.transaction;
 
-  var _useContext3 = useContext(ConfigurationContext),
-      recover = _useContext3.recover;
-
   return /*#__PURE__*/React.createElement(Dialog$1, {
     stacked: false,
     header: /*#__PURE__*/React.createElement("div", {
@@ -21015,7 +21021,7 @@ var PaymentErrorDialog = (function () {
       className: "LineHeightL Text FontSizeL PaddingTopS FontWeightBold"
     }, "Payment Failed"), /*#__PURE__*/React.createElement("div", {
       className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
-    }, recover == undefined && /*#__PURE__*/React.createElement("strong", {
+    }, /*#__PURE__*/React.createElement("strong", {
       className: "FontSizeM"
     }, "Unfortunately executing your payment failed. You can go back and try again."), transaction && /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS"
@@ -21028,7 +21034,7 @@ var PaymentErrorDialog = (function () {
     }, "View on explorer")))),
     footer: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
-    }, recover == undefined && /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement("button", {
       className: "ButtonPrimary",
       onClick: function onClick() {
         return close();
@@ -21085,10 +21091,10 @@ var DonationStack = (function (props) {
       close = _useContext.close;
 
   var _useContext2 = useContext(NavigateContext),
-      setNavigate = _useContext2.setNavigate;
+      setNavigator = _useContext2.setNavigator;
 
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
-    setNavigate: setNavigate,
+    setNavigator: setNavigator,
     open: open,
     close: close,
     start: "DonationOverview",
@@ -21107,20 +21113,27 @@ var DonationStack = (function (props) {
 var NavigateProvider = (function (props) {
   var navigator;
 
-  var setNavigate = function setNavigate(_navigator) {
+  var setNavigator = function setNavigator(_navigator) {
     navigator = _navigator;
   };
 
   var navigate = function navigate(dialog) {
     if (navigator) {
-      navigator(dialog);
+      navigator.navigate(dialog);
+    }
+  };
+
+  var set = function set(dialogs) {
+    if (navigator) {
+      navigator.set(dialogs);
     }
   };
 
   return /*#__PURE__*/React.createElement(NavigateContext.Provider, {
     value: {
       navigate: navigate,
-      setNavigate: setNavigate
+      set: set,
+      setNavigator: setNavigator
     }
   }, props.children);
 });
@@ -21178,7 +21191,7 @@ var PaymentTrackingProvider = (function (props) {
       setClosable = _useContext3.setClosable;
 
   var _useContext4 = useContext(NavigateContext),
-      navigate = _useContext4.navigate;
+      set = _useContext4.set;
 
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.fi/cable');
@@ -21207,7 +21220,7 @@ var PaymentTrackingProvider = (function (props) {
 
       if (item.message.status == 'failed') {
         setClosable(true);
-        navigate('PaymentError');
+        set(['PaymentError']);
       }
 
       if (validated) {
@@ -21678,12 +21691,12 @@ var preflight$2 = /*#__PURE__*/function () {
 
 var Donation = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var amount, accept, event, sent, confirmed, validated, failed, error, critical, style, blacklist, providers, currency, connected, closed, track, fee, closable, integration, link, container, document, unmount;
+    var amount, accept, event, sent, confirmed, validated, failed, error, critical, style, blacklist, providers, currency, connected, closed, track, fee, closable, integration, link, container, title, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, validated = _ref3.validated, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, closable = _ref3.closable, integration = _ref3.integration, link = _ref3.link, container = _ref3.container, document = _ref3.document;
+            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, validated = _ref3.validated, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, closable = _ref3.closable, integration = _ref3.integration, link = _ref3.link, container = _ref3.container, title = _ref3.title, document = _ref3.document;
             requireReactVersion();
             _context2.prev = 2;
             _context2.next = 5;
@@ -21719,7 +21732,8 @@ var Donation = /*#__PURE__*/function () {
                     blacklist: blacklist,
                     providers: providers,
                     integration: integration,
-                    link: link
+                    link: link,
+                    title: title
                   }
                 }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
                   unmount: unmount,
@@ -22125,10 +22139,10 @@ var PaymentStack = (function (props) {
       close = _useContext.close;
 
   var _useContext2 = useContext(NavigateContext),
-      setNavigate = _useContext2.setNavigate;
+      setNavigator = _useContext2.setNavigator;
 
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
-    setNavigate: setNavigate,
+    setNavigator: setNavigator,
     open: open,
     close: close,
     start: "PaymentOverview",
@@ -22578,10 +22592,10 @@ var SaleStack = (function (props) {
       close = _useContext.close;
 
   var _useContext2 = useContext(NavigateContext),
-      setNavigate = _useContext2.setNavigate;
+      setNavigator = _useContext2.setNavigator;
 
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
-    setNavigate: setNavigate,
+    setNavigator: setNavigator,
     open: open,
     close: close,
     start: "SaleOverview",