@depay/widgets 7.15.0 → 7.15.3

package/dist/esm/index.js

@@ -18884,7 +18884,7 @@ var ChangableAmountProvider = (function (props) {
   };
 
   var _useContext = useContext(ConfigurationContext),
-      amountConfiguration = _useContext.amount;
+      configuredAmount = _useContext.amount;
       _useContext.toAmount;
       var recover = _useContext.recover;
 
@@ -18908,21 +18908,21 @@ var ChangableAmountProvider = (function (props) {
       acceptWithAmount = _useState4[0],
       setAcceptWithAmount = _useState4[1];
 
-  var _useState5 = useState(_typeof(amountConfiguration) == 'object' && amountConfiguration.fix && amountConfiguration.currency ? amountConfiguration.fix : null),
+  var _useState5 = useState(_typeof(configuredAmount) == 'object' && configuredAmount.fix && configuredAmount.currency ? configuredAmount.fix : null),
       _useState6 = _slicedToArray(_useState5, 1),
       fixedAmount = _useState6[0];
 
-  var _useState7 = useState(_typeof(amountConfiguration) == 'object' && amountConfiguration.fix && amountConfiguration.currency ? amountConfiguration.currency : null),
+  var _useState7 = useState(_typeof(configuredAmount) == 'object' && configuredAmount.fix && configuredAmount.currency ? configuredAmount.currency : null),
       _useState8 = _slicedToArray(_useState7, 1),
       fixedCurrency = _useState8[0];
 
   var startAmount;
 
   if (amountsMissing) {
-    if (_typeof(amountConfiguration) == "object" && amountConfiguration.start && amountConfiguration.start) {
-      startAmount = amountConfiguration.start;
-    } else if (_typeof(amountConfiguration) == "object" && amountConfiguration.fix) {
-      startAmount = amountConfiguration.fix;
+    if (_typeof(configuredAmount) == "object" && configuredAmount.start && configuredAmount.start) {
+      startAmount = configuredAmount.start;
+    } else if (_typeof(configuredAmount) == "object" && configuredAmount.fix) {
+      startAmount = configuredAmount.fix;
     } else {
       startAmount = 1;
     }
@@ -18938,7 +18938,7 @@ var ChangableAmountProvider = (function (props) {
       maxRoute = _useState12[0],
       setMaxRoute = _useState12[1];
 
-  var _useState13 = useState(100),
+  var _useState13 = useState(),
       _useState14 = _slicedToArray(_useState13, 2),
       maxAmount = _useState14[0],
       setMaxAmount = _useState14[1];
@@ -18956,7 +18956,7 @@ var ChangableAmountProvider = (function (props) {
         conversionRate = _ref.conversionRate,
         fixedCurrencyConversionRate = _ref.fixedCurrencyConversionRate;
     return new Promise(function (resolve, reject) {
-      if (amountConfiguration && amountConfiguration.token) {
+      if (configuredAmount && configuredAmount.token) {
         resolve(props.accept.map(function () {
           return amount;
         }));
@@ -19051,7 +19051,7 @@ var ChangableAmountProvider = (function (props) {
   useEffect(function () {
     if (amountsMissing && maxRoute) {
       maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-        if (amountConfiguration && amountConfiguration.token) {
+        if (configuredAmount && configuredAmount.token) {
           route({
             blockchain: maxRoute.blockchain,
             tokenIn: maxRoute.fromToken.address,
@@ -19061,6 +19061,11 @@ var ChangableAmountProvider = (function (props) {
             toAddress: account
           }).then(function (routes) {
             if (routes[0] == undefined) {
+              Token.readable({
+                amount: maxRoute.fromBalance,
+                blockchain: maxRoute.blockchain,
+                address: maxRoute.toToken.address
+              }).then(setMaxAmount);
               return;
             }
 
@@ -20136,8 +20141,15 @@ var PaymentValueProvider = (function (props) {
   var _useContext3 = useContext(UpdatableContext),
       updatable = _useContext3.updatable;
 
-  var _useContext4 = useContext(PaymentContext),
-      payment = _useContext4.payment;
+  var _useContext4 = useContext(ConfigurationContext),
+      configuredAmount = _useContext4.amount,
+      currencyCode = _useContext4.currencyCode;
+
+  var _useContext5 = useContext(ChangableAmountContext),
+      amount = _useContext5.amount;
+
+  var _useContext6 = useContext(PaymentContext),
+      payment = _useContext6.payment;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -20146,16 +20158,21 @@ var PaymentValueProvider = (function (props) {
 
   var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      paymentValueLoss = _useState4[0],
-      setPaymentValueLoss = _useState4[1];
+      displayedPaymentValue = _useState4[0],
+      setDisplayedPaymentValue = _useState4[1];
 
-  var _useContext5 = useContext(ConfigurationContext),
-      currency = _useContext5.currency;
-
-  var _useState5 = useState(0),
+  var _useState5 = useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      reloadCount = _useState6[0],
-      setReloadCount = _useState6[1];
+      paymentValueLoss = _useState6[0],
+      setPaymentValueLoss = _useState6[1];
+
+  var _useContext7 = useContext(ConfigurationContext),
+      currency = _useContext7.currency;
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      reloadCount = _useState8[0],
+      setReloadCount = _useState8[1];
 
   var updatePaymentValue = function updatePaymentValue(_ref) {
     var updatable = _ref.updatable,
@@ -20222,6 +20239,20 @@ var PaymentValueProvider = (function (props) {
     })["catch"](setError);
   };
 
+  useEffect(function () {
+    if (paymentValue && amount && configuredAmount && configuredAmount.currency && configuredAmount.fix) {
+      setDisplayedPaymentValue(paymentValue.toString());
+    } else if (amount && (configuredAmount == undefined || (configuredAmount === null || configuredAmount === void 0 ? void 0 : configuredAmount.token) != true)) {
+      setDisplayedPaymentValue(new Currency({
+        amount: amount.toFixed(2),
+        code: currencyCode
+      }).toString());
+    } else if (paymentValue && paymentValue.toString().length && (configuredAmount === null || configuredAmount === void 0 ? void 0 : configuredAmount.token) != true) {
+      setDisplayedPaymentValue(paymentValue.toString());
+    } else if (payment) {
+      setDisplayedPaymentValue("".concat(payment.symbol, " ").concat(payment.amount));
+    }
+  }, [paymentValue, payment, amount, configuredAmount]);
   useEffect(function () {
     if (account && payment) {
       updatePaymentValue({
@@ -20244,7 +20275,8 @@ var PaymentValueProvider = (function (props) {
   return /*#__PURE__*/React.createElement(PaymentValueContext.Provider, {
     value: {
       paymentValue: paymentValue,
-      paymentValueLoss: paymentValueLoss
+      paymentValueLoss: paymentValueLoss,
+      displayedPaymentValue: displayedPaymentValue
     }
   }, props.children);
 });
@@ -20301,18 +20333,21 @@ var ChangeAmountDialog = (function (props) {
       setAmount = _useContext4.setAmount,
       maxAmount = _useContext4.maxAmount;
 
+  var _useContext5 = useContext(PaymentValueContext);
+      _useContext5.displayedPaymentValue;
+
   var _useState = useState(amount),
       _useState2 = _slicedToArray(_useState, 2),
       inputAmount = _useState2[0],
       setInputAmount = _useState2[1];
 
-  var _useContext5 = useContext(ConfigurationContext),
-      currencyCode = _useContext5.currencyCode,
-      amountConfiguration = _useContext5.amount;
+  var _useContext6 = useContext(ConfigurationContext),
+      currencyCode = _useContext6.currencyCode,
+      amountConfiguration = _useContext6.amount;
 
-  var _useContext6 = useContext(PaymentRoutingContext);
-      _useContext6.allRoutes;
-      var setSelectedRoute = _useContext6.setSelectedRoute;
+  var _useContext7 = useContext(PaymentRoutingContext);
+      _useContext7.allRoutes;
+      var setSelectedRoute = _useContext7.setSelectedRoute;
 
   var min = _typeof(amountConfiguration) == "object" && amountConfiguration.min ? amountConfiguration.min : 1;
   var step = _typeof(amountConfiguration) == "object" && amountConfiguration.step ? amountConfiguration.step : 1;
@@ -20347,7 +20382,11 @@ var ChangeAmountDialog = (function (props) {
 
   var toValidValue = function toValidValue(value) {
     value = toValidStep(value);
-    value = Math.max(min, Math.min(value, maxAmount));
+
+    if (maxAmount) {
+      value = Math.max(min, Math.min(value, maxAmount));
+    }
+
     value = toValidStep(value);
     return value;
   };
@@ -20374,7 +20413,7 @@ var ChangeAmountDialog = (function (props) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "PaddingBottomM"
     }, /*#__PURE__*/React.createElement("input", {
-      max: parseFloat(maxAmount),
+      max: maxAmount ? parseFloat(maxAmount) : null,
       min: min,
       step: step,
       className: "Input FontSizeXXL TextAlignCenter",
@@ -20387,7 +20426,7 @@ var ChangeAmountDialog = (function (props) {
       onBlur: function onBlur(event) {
         setValidValue(event.target.value);
       }
-    })), /*#__PURE__*/React.createElement("div", {
+    })), maxAmount && /*#__PURE__*/React.createElement("div", {
       style: {
         height: '40px'
       }
@@ -20449,8 +20488,9 @@ var ChangePaymentDialog = (function (props) {
       allRoutes = _useContext2.allRoutes,
       setSelectedRoute = _useContext2.setSelectedRoute;
 
-  var _useContext3 = useContext(PaymentValueContext),
-      paymentValue = _useContext3.paymentValue;
+  var _useContext3 = useContext(PaymentValueContext);
+      _useContext3.paymentValue;
+      var displayedPaymentValue = _useContext3.displayedPaymentValue;
 
   var _useContext4 = useContext(NavigateStackContext),
       navigate = _useContext4.navigate;
@@ -20535,9 +20575,9 @@ var ChangePaymentDialog = (function (props) {
       className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomS"
     }, /*#__PURE__*/React.createElement("h1", {
       className: "LineHeightL FontSizeL TextCenter"
-    }, "Change Payment"), paymentValue != undefined && /*#__PURE__*/React.createElement("div", {
+    }, "Change Payment"), displayedPaymentValue != undefined && /*#__PURE__*/React.createElement("div", {
       className: "FontSizeL TextCenter FontWeightBold"
-    }, /*#__PURE__*/React.createElement("strong", null, paymentValue.toString()))),
+    }, /*#__PURE__*/React.createElement("strong", null, displayedPaymentValue.toString()))),
     body: /*#__PURE__*/React.createElement("div", {
       className: "MaxHeight PaddingTopXS"
     }, /*#__PURE__*/React.createElement("div", {
@@ -20660,41 +20700,38 @@ var LoadingText = (function (props) {
 });
 
 var Footer = (function () {
-  var _useContext = useContext(ConfigurationContext),
-      currencyCode = _useContext.currencyCode,
-      configuredAmount = _useContext.amount;
-
-  var _useContext2 = useContext(ChangableAmountContext),
-      amount = _useContext2.amount;
-      _useContext2.amountsMissing;
+  var _useContext = useContext(ChangableAmountContext);
+      _useContext.amount;
+      _useContext.amountsMissing;
 
-  var _useContext3 = useContext(PaymentTrackingContext),
-      tracking = _useContext3.tracking,
-      release = _useContext3.release,
-      forwardTo = _useContext3.forwardTo,
-      trackingFailed = _useContext3.trackingFailed;
+  var _useContext2 = useContext(PaymentTrackingContext),
+      tracking = _useContext2.tracking,
+      release = _useContext2.release,
+      forwardTo = _useContext2.forwardTo,
+      trackingFailed = _useContext2.trackingFailed;
 
-  var _useContext4 = useContext(PaymentContext),
-      payment = _useContext4.payment,
-      paymentState = _useContext4.paymentState,
-      pay = _useContext4.pay,
-      transaction = _useContext4.transaction,
-      approve = _useContext4.approve,
-      approvalTransaction = _useContext4.approvalTransaction;
+  var _useContext3 = useContext(PaymentContext),
+      payment = _useContext3.payment,
+      paymentState = _useContext3.paymentState,
+      pay = _useContext3.pay,
+      transaction = _useContext3.transaction,
+      approve = _useContext3.approve,
+      approvalTransaction = _useContext3.approvalTransaction;
 
-  var _useContext5 = useContext(PaymentValueContext),
-      paymentValue = _useContext5.paymentValue,
-      paymentValueLoss = _useContext5.paymentValueLoss;
+  var _useContext4 = useContext(PaymentValueContext);
+      _useContext4.paymentValue;
+      var displayedPaymentValue = _useContext4.displayedPaymentValue,
+      paymentValueLoss = _useContext4.paymentValueLoss;
 
-  var _useContext6 = useContext(PaymentRoutingContext),
-      updatedRouteWithNewPrice = _useContext6.updatedRouteWithNewPrice,
-      updateRouteWithNewPrice = _useContext6.updateRouteWithNewPrice;
+  var _useContext5 = useContext(PaymentRoutingContext),
+      updatedRouteWithNewPrice = _useContext5.updatedRouteWithNewPrice,
+      updateRouteWithNewPrice = _useContext5.updateRouteWithNewPrice;
 
-  var _useContext7 = useContext(NavigateStackContext);
-      _useContext7.navigate;
+  var _useContext6 = useContext(NavigateStackContext);
+      _useContext6.navigate;
 
-  var _useContext8 = useContext(ClosableContext),
-      close = _useContext8.close;
+  var _useContext7 = useContext(ClosableContext),
+      close = _useContext7.close;
 
   var trackingInfo = function trackingInfo() {
     if (tracking != true) {
@@ -20821,21 +20858,6 @@ var Footer = (function () {
   };
 
   var mainAction = function mainAction() {
-    var displayedAmount;
-
-    if (amount && configuredAmount && configuredAmount.currency && configuredAmount.fix) {
-      displayedAmount = paymentValue.toString();
-    } else if (amount && (configuredAmount == undefined || (configuredAmount === null || configuredAmount === void 0 ? void 0 : configuredAmount.token) != true)) {
-      displayedAmount = new Currency({
-        amount: amount.toFixed(2),
-        code: currencyCode
-      }).toString();
-    } else if (paymentValue && paymentValue.toString().length && (configuredAmount === null || configuredAmount === void 0 ? void 0 : configuredAmount.token) != true) {
-      displayedAmount = paymentValue.toString();
-    } else {
-      displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
-    }
-
     if (updatedRouteWithNewPrice) {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "PaddingBottomXS"
@@ -20855,7 +20877,7 @@ var Footer = (function () {
       }, /*#__PURE__*/React.createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/React.createElement("button", {
         className: "ButtonPrimary disabled",
         onClick: function onClick() {}
-      }, "Pay ", displayedAmount));
+      }, "Pay ", displayedPaymentValue));
     } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
       return /*#__PURE__*/React.createElement("button", {
         className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
@@ -20866,7 +20888,7 @@ var Footer = (function () {
 
           pay();
         }
-      }, "Pay ", displayedAmount);
+      }, "Pay ", displayedPaymentValue);
     } else if (paymentState == 'paying') {
       return /*#__PURE__*/React.createElement("a", {
         className: "ButtonPrimary",
@@ -20909,19 +20931,22 @@ var Footer = (function () {
 });
 
 var DonationOverviewDialog = (function (props) {
-  var _useContext = useContext(ConfigurationContext),
-      currencyCode = _useContext.currencyCode,
-      title = _useContext.title;
+  var _useContext = useContext(ConfigurationContext);
+      _useContext.currencyCode;
+      var title = _useContext.title;
 
-  var _useContext2 = useContext(ChangableAmountContext),
-      amount = _useContext2.amount;
+  var _useContext2 = useContext(ChangableAmountContext);
+      _useContext2.amount;
 
   var _useContext3 = useContext(PaymentContext),
       payment = _useContext3.payment,
       paymentState = _useContext3.paymentState;
 
-  var _useContext4 = useContext(NavigateStackContext),
-      navigate = _useContext4.navigate;
+  var _useContext4 = useContext(PaymentValueContext),
+      displayedPaymentValue = _useContext4.displayedPaymentValue;
+
+  var _useContext5 = useContext(NavigateStackContext),
+      navigate = _useContext5.navigate;
 
   if (payment == undefined) {
     return /*#__PURE__*/React.createElement(DonationOverviewSkeleton, null);
@@ -20956,10 +20981,7 @@ var DonationOverviewDialog = (function (props) {
       className: "CardText"
     }, /*#__PURE__*/React.createElement("div", {
       className: "TokenAmountRow"
-    }, new Currency({
-      amount: amount.toFixed(2),
-      code: currencyCode
-    }).toString())))), /*#__PURE__*/React.createElement("div", {
+    }, displayedPaymentValue)))), /*#__PURE__*/React.createElement("div", {
       className: "CardAction"
     }, /*#__PURE__*/React.createElement(ChevronRight, null))), /*#__PURE__*/React.createElement("div", {
       className: ["Card", paymentState == 'initialized' ? '' : 'disabled'].join(' '),