@depay/widgets 6.9.0 → 6.11.0

package/dist/esm/index.js

@@ -1678,7 +1678,7 @@ 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    .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      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  ");
+  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      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.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  ");
 });
 
 var DialogStyle = (function (style) {
@@ -2032,7 +2032,7 @@ var ChangableAmountProvider = (function (props) {
       account = _useContext.account;
 
   var _useContext2 = useContext(ConfigurationContext),
-      configuredAmount = _useContext2.amount;
+      amountConfiguration = _useContext2.amount;
 
   var _useContext3 = useContext(ConversionRateContext),
       conversionRate = _useContext3.conversionRate;
@@ -2045,7 +2045,7 @@ var ChangableAmountProvider = (function (props) {
       acceptWithAmount = _useState4[0],
       setAcceptWithAmount = _useState4[1];
 
-  var _useState5 = useState(amountsMissing ? _typeof(configuredAmount) == "object" && configuredAmount.start ? configuredAmount.start : 1 : null),
+  var _useState5 = useState(amountsMissing ? _typeof(amountConfiguration) == "object" && amountConfiguration.start ? amountConfiguration.start : 1 : null),
       _useState6 = _slicedToArray(_useState5, 2),
       amount = _useState6[0],
       setAmount = _useState6[1];
@@ -2063,51 +2063,83 @@ var ChangableAmountProvider = (function (props) {
   useEffect(function () {
     setAmountsMissing(configurationsMissAmounts(props.accept));
   }, [props.accept]);
-  useEffect(function () {
-    if (amountsMissing && account && conversionRate) {
-      Promise.all(props.accept.map(function (configuration) {
-        return route({
-          blockchain: configuration.blockchain,
-          tokenIn: CONSTANTS[configuration.blockchain].USD,
-          amountIn: 1.00 / conversionRate * amount,
-          tokenOut: configuration.token,
-          fromAddress: account,
-          toAddress: account
-        });
-      })).then(function (routes) {
-        Promise.all(routes.map(function (routes, index) {
-          if (routes[0] == undefined) {
-            return;
-          }
 
-          return Token.readable({
-            blockchain: props.accept[index].blockchain,
-            amount: routes[0].amountOut,
-            address: routes[0].tokenOut
+  var getAmounts = function getAmounts() {
+    return new Promise(function (resolve, reject) {
+      if (amountConfiguration && amountConfiguration.token) {
+        resolve(props.accept.map(function () {
+          return amount;
+        }));
+      } else {
+        Promise.all(props.accept.map(function (configuration) {
+          return route({
+            blockchain: configuration.blockchain,
+            tokenIn: CONSTANTS[configuration.blockchain].USD,
+            amountIn: 1.00 / conversionRate * amount,
+            tokenOut: configuration.token,
+            fromAddress: account,
+            toAddress: account
           });
-        })).then(function (amounts) {
-          setAcceptWithAmount(props.accept.map(function (configuration, index) {
-            if (amounts[index] == undefined) {
+        })).then(function (routes) {
+          Promise.all(routes.map(function (routes, index) {
+            if (routes[0] == undefined) {
               return;
             }
 
-            return {
-              blockchain: configuration.blockchain,
-              amount: round(amounts[index]),
-              token: configuration.token,
-              receiver: configuration.receiver || account
-            };
-          }).filter(function (configuration) {
-            return !!configuration;
-          }));
+            return Token.readable({
+              blockchain: props.accept[index].blockchain,
+              amount: routes[0].amountOut,
+              address: routes[0].tokenOut
+            });
+          })).then(resolve)["catch"](setError);
         })["catch"](setError);
+      }
+    });
+  };
+
+  useEffect(function () {
+    if (amountsMissing && account && conversionRate) {
+      getAmounts().then(function (amounts) {
+        setAcceptWithAmount(props.accept.map(function (configuration, index) {
+          if (amounts[index] == undefined) {
+            return;
+          }
+
+          return {
+            blockchain: configuration.blockchain,
+            amount: round(amounts[index]),
+            token: configuration.token,
+            receiver: configuration.receiver || account
+          };
+        }).filter(function (configuration) {
+          return !!configuration;
+        }));
       })["catch"](setError);
     }
-  }, [account, conversionRate, amount]);
+  }, [amountsMissing, account, conversionRate, amount]);
   useEffect(function () {
     if (amountsMissing && maxRoute) {
       maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-        if (maxRoute.fromToken.address == CONSTANTS[maxRoute.blockchain].USD) {
+        if (amountConfiguration && amountConfiguration.token) {
+          route({
+            blockchain: maxRoute.blockchain,
+            tokenIn: maxRoute.fromToken.address,
+            tokenOut: maxRoute.toToken.address,
+            amountIn: parseFloat(readableMaxAmount),
+            fromAddress: account,
+            toAddress: account
+          }).then(function (routes) {
+            Token.readable({
+              amount: routes[0].amountOut,
+              blockchain: maxRoute.blockchain,
+              address: maxRoute.toToken.address
+            }).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));
+            })["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);
@@ -2505,6 +2537,7 @@ var PaymentRoutingProvider = (function (props) {
       whitelist: props.whitelist,
       blacklist: props.blacklist,
       event: props.event,
+      fee: props.fee,
       apiKey: apiKey
     }).then(function (routes) {
       if (routes.length == 0) {
@@ -2779,13 +2812,14 @@ var ChangeAmountDialog = (function (props) {
 
   var _useContext5 = useContext(ConfigurationContext),
       currencyCode = _useContext5.currencyCode,
-      configuredAmount = _useContext5.amount;
+      amountConfiguration = _useContext5.amount;
 
   var _useContext6 = useContext(PaymentRoutingContext);
       _useContext6.allRoutes;
 
-  var min = _typeof(configuredAmount) == "object" && configuredAmount.min ? configuredAmount.min : 1;
-  var step = _typeof(configuredAmount) == "object" && configuredAmount.step ? configuredAmount.step : 1;
+  var min = _typeof(amountConfiguration) == "object" && amountConfiguration.min ? amountConfiguration.min : 1;
+  var step = _typeof(amountConfiguration) == "object" && amountConfiguration.step ? amountConfiguration.step : 1;
+  var displayedCurrencyCode = amountConfiguration != undefined && amountConfiguration.token ? null : currencyCode;
 
   var changeAmountAndGoBack = function changeAmountAndGoBack() {
     setAmount(toValidValue(parseFloat(inputAmount)));
@@ -2827,7 +2861,7 @@ var ChangeAmountDialog = (function (props) {
       className: "LineHeightL FontSizeL TextCenter"
     }, "Change Amount"), /*#__PURE__*/React.createElement("div", {
       className: "FontSizeL TextCenter FontWeightBold"
-    }, /*#__PURE__*/React.createElement("strong", null, currencyCode))),
+    }, /*#__PURE__*/React.createElement("strong", null, displayedCurrencyCode))),
     body: /*#__PURE__*/React.createElement("div", {
       className: "MaxHeight PaddingTopXS"
     }, /*#__PURE__*/React.createElement("div", {
@@ -3130,7 +3164,8 @@ var LoadingText = (function (props) {
 
 var Footer = (function () {
   var _useContext = useContext(ConfigurationContext),
-      currencyCode = _useContext.currencyCode;
+      currencyCode = _useContext.currencyCode,
+      configuredAmount = _useContext.amount;
 
   var _useContext2 = useContext(ChangableAmountContext),
       amount = _useContext2.amount;
@@ -3284,6 +3319,19 @@ var Footer = (function () {
   };
 
   var mainAction = function mainAction() {
+    var displayedAmount;
+
+    if (amount && (configuredAmount == undefined || configuredAmount.token != true)) {
+      displayedAmount = new Currency({
+        amount: amount.toFixed(2),
+        code: currencyCode
+      }).toString();
+    } else if (paymentValue && paymentValue.toString().length) {
+      displayedAmount = paymentValue.toString();
+    } else {
+      displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
+    }
+
     if (paymentState == 'initialized' || paymentState == 'approving') {
       return /*#__PURE__*/React.createElement("button", {
         className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
@@ -3296,10 +3344,7 @@ var Footer = (function () {
             navigate: navigate
           });
         }
-      }, "Pay ", amount ? new Currency({
-        amount: amount.toFixed(2),
-        code: currencyCode
-      }).toString() : paymentValue.toString().length ? paymentValue.toString() : "".concat(payment.amount));
+      }, "Pay ", displayedAmount);
     } else if (paymentState == 'paying') {
       return /*#__PURE__*/React.createElement("a", {
         className: "ButtonPrimary",
@@ -3619,7 +3664,7 @@ var TrackingProvider = (function (props) {
         if (!!item.message.forward_to) {
           setTimeout(function () {
             props.document.location.href = item.message.forward_to;
-          }, 500);
+          }, 200);
         }
       }
     };
@@ -3701,6 +3746,9 @@ var TrackingProvider = (function (props) {
         response.json().then(function (data) {
           if (data && data.forward_to) {
             setForwardTo(data.forward_to);
+            setTimeout(function () {
+              props.document.location.href = data.forward_to;
+            }, 100);
           }
         });
         clearInterval(pollingInterval);
@@ -4126,7 +4174,8 @@ var PaymentAmountRoutingProvider = (function (props) {
     whitelist: props.whitelist,
     blacklist: props.blacklist,
     event: props.event,
-    setMaxRoute: setMaxRoute
+    setMaxRoute: setMaxRoute,
+    fee: props.fee
   }, props.children));
 });
 
@@ -4319,12 +4368,12 @@ var preflight$1 = /*#__PURE__*/function () {
 
 var Payment = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, document, unmount;
+    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, document = _ref3.document;
+            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight$1({
@@ -4354,7 +4403,8 @@ var Payment = /*#__PURE__*/function () {
                     whitelist: whitelist,
                     blacklist: blacklist,
                     providers: providers,
-                    track: track
+                    track: track,
+                    fee: fee
                   }
                 }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
                   unmount: unmount
@@ -4369,7 +4419,8 @@ var Payment = /*#__PURE__*/function () {
                   accept: accept,
                   whitelist: whitelist,
                   blacklist: blacklist,
-                  event: event
+                  event: event,
+                  fee: fee
                 }, /*#__PURE__*/React.createElement(TrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(PaymentProvider, {
@@ -4523,7 +4574,8 @@ var SaleOverviewDialog = (function (props) {
       _useContext.amount;
 
   var _useContext2 = useContext(ConfigurationContext),
-      tokenImage = _useContext2.tokenImage;
+      tokenImage = _useContext2.tokenImage,
+      amountConfiguration = _useContext2.amount;
 
   var _useContext3 = useContext(PaymentValueContext),
       paymentValue = _useContext3.paymentValue;
@@ -4545,7 +4597,7 @@ var SaleOverviewDialog = (function (props) {
       setSalePerTokenValue = _useState2[1];
 
   useEffect(function () {
-    if (paymentValue) {
+    if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
       setSalePerTokenValue(new Currency({
         amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
         code: paymentValue.code