@depay/widgets 6.14.0 → 6.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -68217,15 +68217,20 @@ var PaymentValueProvider = (function (props) {
68217
68217
  paymentValue = _useState2[0],
68218
68218
  setPaymentValue = _useState2[1];
68219
68219
 
68220
+ var _useState3 = react.useState(),
68221
+ _useState4 = _slicedToArray(_useState3, 2),
68222
+ paymentValueLoss = _useState4[0],
68223
+ setPaymentValueLoss = _useState4[1];
68224
+
68220
68225
  var _useContext5 = react.useContext(ConfigurationContext),
68221
68226
  currency = _useContext5.currency;
68222
68227
 
68223
- var _useState3 = react.useState(0),
68224
- _useState4 = _slicedToArray(_useState3, 2),
68225
- reloadCount = _useState4[0],
68226
- setReloadCount = _useState4[1];
68228
+ var _useState5 = react.useState(0),
68229
+ _useState6 = _slicedToArray(_useState5, 2),
68230
+ reloadCount = _useState6[0],
68231
+ setReloadCount = _useState6[1];
68227
68232
 
68228
- var getToTokenLocalValue = function getToTokenLocalValue(_ref) {
68233
+ var updatePaymentValue = function updatePaymentValue(_ref) {
68229
68234
  var updatable = _ref.updatable,
68230
68235
  payment = _ref.payment;
68231
68236
 
@@ -68240,29 +68245,51 @@ var PaymentValueProvider = (function (props) {
68240
68245
  amountIn: payment.route.toAmount,
68241
68246
  fromAddress: account,
68242
68247
  toAddress: account
68243
- }), new Token({
68248
+ }), !payment.route.directTransfer ? route$8({
68249
+ blockchain: payment.route.blockchain,
68250
+ tokenIn: payment.route.toToken.address,
68251
+ tokenOut: payment.route.fromToken.address,
68252
+ amountIn: payment.route.toAmount,
68253
+ fromAddress: account,
68254
+ toAddress: account
68255
+ }) : Promise.resolve([]), new Token({
68244
68256
  blockchain: payment.route.blockchain,
68245
68257
  address: CONSTANTS$2[payment.route.blockchain].USD
68246
68258
  }).decimals()]).then(function (_ref2) {
68247
- var _ref3 = _slicedToArray(_ref2, 2),
68248
- USDExchangeRoutes = _ref3[0],
68249
- USDDecimals = _ref3[1];
68259
+ var _ref3 = _slicedToArray(_ref2, 3),
68260
+ toTokenUSDExchangeRoutes = _ref3[0],
68261
+ reverseRoutes = _ref3[1],
68262
+ USDDecimals = _ref3[2];
68263
+
68264
+ var toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
68265
+ var reverseRoute = reverseRoutes[0];
68266
+
68267
+ if (reverseRoute) {
68268
+ var reverseAmountOutBN = BigNumber$4.from(reverseRoute.amountOut);
68269
+ var paymentAmountInBN = BigNumber$4.from(payment.route.fromAmount);
68270
+ var divPercent = 100 - reverseAmountOutBN.mul(BigNumber$4.from('100')).div(paymentAmountInBN).abs().toString();
68271
+
68272
+ if (divPercent >= 5) {
68273
+ setPaymentValueLoss(divPercent);
68274
+ } else {
68275
+ setPaymentValueLoss(null);
68276
+ }
68277
+ }
68250
68278
 
68251
- var USDRoute = USDExchangeRoutes[0];
68252
- var USDAmount;
68279
+ var toTokenUSDAmount;
68253
68280
 
68254
68281
  if (payment.route.toToken.address.toLowerCase() == CONSTANTS$2[payment.route.blockchain].USD.toLowerCase()) {
68255
- USDAmount = payment.route.toAmount.toString();
68256
- } else if (USDRoute == undefined) {
68282
+ toTokenUSDAmount = payment.route.toAmount.toString();
68283
+ } else if (toTokenUSDRoute == undefined) {
68257
68284
  setPaymentValue('');
68258
68285
  return;
68259
68286
  } else {
68260
- USDAmount = USDRoute.amountOut.toString();
68287
+ toTokenUSDAmount = toTokenUSDRoute.amountOut.toString();
68261
68288
  }
68262
68289
 
68263
- var USDValue = formatUnits(USDAmount, USDDecimals);
68290
+ var toTokenUSDValue = formatUnits(toTokenUSDAmount, USDDecimals);
68264
68291
  Currency.fromUSD({
68265
- amount: USDValue,
68292
+ amount: toTokenUSDValue,
68266
68293
  code: currency,
68267
68294
  apiKey: apiKey
68268
68295
  }).then(setPaymentValue)["catch"](setError);
@@ -68271,7 +68298,7 @@ var PaymentValueProvider = (function (props) {
68271
68298
 
68272
68299
  react.useEffect(function () {
68273
68300
  if (account && payment) {
68274
- getToTokenLocalValue({
68301
+ updatePaymentValue({
68275
68302
  updatable: updatable,
68276
68303
  payment: payment
68277
68304
  });
@@ -68280,7 +68307,7 @@ var PaymentValueProvider = (function (props) {
68280
68307
  react.useEffect(function () {
68281
68308
  var timeout = setTimeout(function () {
68282
68309
  setReloadCount(reloadCount + 1);
68283
- getToTokenLocalValue({
68310
+ updatePaymentValue({
68284
68311
  updatable: updatable
68285
68312
  });
68286
68313
  }, 15000);
@@ -68290,7 +68317,8 @@ var PaymentValueProvider = (function (props) {
68290
68317
  }, [reloadCount, updatable]);
68291
68318
  return /*#__PURE__*/react.createElement(PaymentValueContext.Provider, {
68292
68319
  value: {
68293
- paymentValue: paymentValue
68320
+ paymentValue: paymentValue,
68321
+ paymentValueLoss: paymentValueLoss
68294
68322
  }
68295
68323
  }, props.children);
68296
68324
  });
@@ -70438,7 +70466,8 @@ var Footer = (function () {
70438
70466
  approvalTransaction = _useContext4.approvalTransaction;
70439
70467
 
70440
70468
  var _useContext5 = react.useContext(PaymentValueContext),
70441
- paymentValue = _useContext5.paymentValue;
70469
+ paymentValue = _useContext5.paymentValue,
70470
+ paymentValueLoss = _useContext5.paymentValueLoss;
70442
70471
 
70443
70472
  var _useContext6 = react.useContext(NavigateStackContext);
70444
70473
  _useContext6.navigate;
@@ -70584,7 +70613,16 @@ var Footer = (function () {
70584
70613
  displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
70585
70614
  }
70586
70615
 
70587
- if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
70616
+ if (paymentValueLoss) {
70617
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
70618
+ className: "PaddingBottomXS"
70619
+ }, /*#__PURE__*/react.createElement("div", {
70620
+ className: "Alert"
70621
+ }, /*#__PURE__*/react.createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/react.createElement("button", {
70622
+ className: "ButtonPrimary disabled",
70623
+ onClick: function onClick() {}
70624
+ }, "Pay ", displayedAmount));
70625
+ } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
70588
70626
  return /*#__PURE__*/react.createElement("button", {
70589
70627
  className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
70590
70628
  onClick: function onClick() {
package/dist/esm/index.js CHANGED
@@ -2769,15 +2769,20 @@ var PaymentValueProvider = (function (props) {
2769
2769
  paymentValue = _useState2[0],
2770
2770
  setPaymentValue = _useState2[1];
2771
2771
 
2772
+ var _useState3 = useState(),
2773
+ _useState4 = _slicedToArray(_useState3, 2),
2774
+ paymentValueLoss = _useState4[0],
2775
+ setPaymentValueLoss = _useState4[1];
2776
+
2772
2777
  var _useContext5 = useContext(ConfigurationContext),
2773
2778
  currency = _useContext5.currency;
2774
2779
 
2775
- var _useState3 = useState(0),
2776
- _useState4 = _slicedToArray(_useState3, 2),
2777
- reloadCount = _useState4[0],
2778
- setReloadCount = _useState4[1];
2780
+ var _useState5 = useState(0),
2781
+ _useState6 = _slicedToArray(_useState5, 2),
2782
+ reloadCount = _useState6[0],
2783
+ setReloadCount = _useState6[1];
2779
2784
 
2780
- var getToTokenLocalValue = function getToTokenLocalValue(_ref) {
2785
+ var updatePaymentValue = function updatePaymentValue(_ref) {
2781
2786
  var updatable = _ref.updatable,
2782
2787
  payment = _ref.payment;
2783
2788
 
@@ -2792,29 +2797,51 @@ var PaymentValueProvider = (function (props) {
2792
2797
  amountIn: payment.route.toAmount,
2793
2798
  fromAddress: account,
2794
2799
  toAddress: account
2795
- }), new Token({
2800
+ }), !payment.route.directTransfer ? route({
2801
+ blockchain: payment.route.blockchain,
2802
+ tokenIn: payment.route.toToken.address,
2803
+ tokenOut: payment.route.fromToken.address,
2804
+ amountIn: payment.route.toAmount,
2805
+ fromAddress: account,
2806
+ toAddress: account
2807
+ }) : Promise.resolve([]), new Token({
2796
2808
  blockchain: payment.route.blockchain,
2797
2809
  address: CONSTANTS[payment.route.blockchain].USD
2798
2810
  }).decimals()]).then(function (_ref2) {
2799
- var _ref3 = _slicedToArray(_ref2, 2),
2800
- USDExchangeRoutes = _ref3[0],
2801
- USDDecimals = _ref3[1];
2811
+ var _ref3 = _slicedToArray(_ref2, 3),
2812
+ toTokenUSDExchangeRoutes = _ref3[0],
2813
+ reverseRoutes = _ref3[1],
2814
+ USDDecimals = _ref3[2];
2815
+
2816
+ var toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
2817
+ var reverseRoute = reverseRoutes[0];
2818
+
2819
+ if (reverseRoute) {
2820
+ var reverseAmountOutBN = ethers.BigNumber.from(reverseRoute.amountOut);
2821
+ var paymentAmountInBN = ethers.BigNumber.from(payment.route.fromAmount);
2822
+ var divPercent = 100 - reverseAmountOutBN.mul(ethers.BigNumber.from('100')).div(paymentAmountInBN).abs().toString();
2823
+
2824
+ if (divPercent >= 5) {
2825
+ setPaymentValueLoss(divPercent);
2826
+ } else {
2827
+ setPaymentValueLoss(null);
2828
+ }
2829
+ }
2802
2830
 
2803
- var USDRoute = USDExchangeRoutes[0];
2804
- var USDAmount;
2831
+ var toTokenUSDAmount;
2805
2832
 
2806
2833
  if (payment.route.toToken.address.toLowerCase() == CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
2807
- USDAmount = payment.route.toAmount.toString();
2808
- } else if (USDRoute == undefined) {
2834
+ toTokenUSDAmount = payment.route.toAmount.toString();
2835
+ } else if (toTokenUSDRoute == undefined) {
2809
2836
  setPaymentValue('');
2810
2837
  return;
2811
2838
  } else {
2812
- USDAmount = USDRoute.amountOut.toString();
2839
+ toTokenUSDAmount = toTokenUSDRoute.amountOut.toString();
2813
2840
  }
2814
2841
 
2815
- var USDValue = ethers.utils.formatUnits(USDAmount, USDDecimals);
2842
+ var toTokenUSDValue = ethers.utils.formatUnits(toTokenUSDAmount, USDDecimals);
2816
2843
  Currency.fromUSD({
2817
- amount: USDValue,
2844
+ amount: toTokenUSDValue,
2818
2845
  code: currency,
2819
2846
  apiKey: apiKey
2820
2847
  }).then(setPaymentValue)["catch"](setError);
@@ -2823,7 +2850,7 @@ var PaymentValueProvider = (function (props) {
2823
2850
 
2824
2851
  useEffect(function () {
2825
2852
  if (account && payment) {
2826
- getToTokenLocalValue({
2853
+ updatePaymentValue({
2827
2854
  updatable: updatable,
2828
2855
  payment: payment
2829
2856
  });
@@ -2832,7 +2859,7 @@ var PaymentValueProvider = (function (props) {
2832
2859
  useEffect(function () {
2833
2860
  var timeout = setTimeout(function () {
2834
2861
  setReloadCount(reloadCount + 1);
2835
- getToTokenLocalValue({
2862
+ updatePaymentValue({
2836
2863
  updatable: updatable
2837
2864
  });
2838
2865
  }, 15000);
@@ -2842,7 +2869,8 @@ var PaymentValueProvider = (function (props) {
2842
2869
  }, [reloadCount, updatable]);
2843
2870
  return /*#__PURE__*/React.createElement(PaymentValueContext.Provider, {
2844
2871
  value: {
2845
- paymentValue: paymentValue
2872
+ paymentValue: paymentValue,
2873
+ paymentValueLoss: paymentValueLoss
2846
2874
  }
2847
2875
  }, props.children);
2848
2876
  });
@@ -3276,7 +3304,8 @@ var Footer = (function () {
3276
3304
  approvalTransaction = _useContext4.approvalTransaction;
3277
3305
 
3278
3306
  var _useContext5 = useContext(PaymentValueContext),
3279
- paymentValue = _useContext5.paymentValue;
3307
+ paymentValue = _useContext5.paymentValue,
3308
+ paymentValueLoss = _useContext5.paymentValueLoss;
3280
3309
 
3281
3310
  var _useContext6 = useContext(NavigateStackContext);
3282
3311
  _useContext6.navigate;
@@ -3422,7 +3451,16 @@ var Footer = (function () {
3422
3451
  displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
3423
3452
  }
3424
3453
 
3425
- if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
3454
+ if (paymentValueLoss) {
3455
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
3456
+ className: "PaddingBottomXS"
3457
+ }, /*#__PURE__*/React.createElement("div", {
3458
+ className: "Alert"
3459
+ }, /*#__PURE__*/React.createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/React.createElement("button", {
3460
+ className: "ButtonPrimary disabled",
3461
+ onClick: function onClick() {}
3462
+ }, "Pay ", displayedAmount));
3463
+ } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
3426
3464
  return /*#__PURE__*/React.createElement("button", {
3427
3465
  className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
3428
3466
  onClick: function onClick() {
@@ -68223,15 +68223,20 @@
68223
68223
  paymentValue = _useState2[0],
68224
68224
  setPaymentValue = _useState2[1];
68225
68225
 
68226
+ var _useState3 = react.useState(),
68227
+ _useState4 = _slicedToArray(_useState3, 2),
68228
+ paymentValueLoss = _useState4[0],
68229
+ setPaymentValueLoss = _useState4[1];
68230
+
68226
68231
  var _useContext5 = react.useContext(ConfigurationContext),
68227
68232
  currency = _useContext5.currency;
68228
68233
 
68229
- var _useState3 = react.useState(0),
68230
- _useState4 = _slicedToArray(_useState3, 2),
68231
- reloadCount = _useState4[0],
68232
- setReloadCount = _useState4[1];
68234
+ var _useState5 = react.useState(0),
68235
+ _useState6 = _slicedToArray(_useState5, 2),
68236
+ reloadCount = _useState6[0],
68237
+ setReloadCount = _useState6[1];
68233
68238
 
68234
- var getToTokenLocalValue = function getToTokenLocalValue(_ref) {
68239
+ var updatePaymentValue = function updatePaymentValue(_ref) {
68235
68240
  var updatable = _ref.updatable,
68236
68241
  payment = _ref.payment;
68237
68242
 
@@ -68246,29 +68251,51 @@
68246
68251
  amountIn: payment.route.toAmount,
68247
68252
  fromAddress: account,
68248
68253
  toAddress: account
68249
- }), new Token({
68254
+ }), !payment.route.directTransfer ? route$8({
68255
+ blockchain: payment.route.blockchain,
68256
+ tokenIn: payment.route.toToken.address,
68257
+ tokenOut: payment.route.fromToken.address,
68258
+ amountIn: payment.route.toAmount,
68259
+ fromAddress: account,
68260
+ toAddress: account
68261
+ }) : Promise.resolve([]), new Token({
68250
68262
  blockchain: payment.route.blockchain,
68251
68263
  address: CONSTANTS$2[payment.route.blockchain].USD
68252
68264
  }).decimals()]).then(function (_ref2) {
68253
- var _ref3 = _slicedToArray(_ref2, 2),
68254
- USDExchangeRoutes = _ref3[0],
68255
- USDDecimals = _ref3[1];
68265
+ var _ref3 = _slicedToArray(_ref2, 3),
68266
+ toTokenUSDExchangeRoutes = _ref3[0],
68267
+ reverseRoutes = _ref3[1],
68268
+ USDDecimals = _ref3[2];
68269
+
68270
+ var toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
68271
+ var reverseRoute = reverseRoutes[0];
68272
+
68273
+ if (reverseRoute) {
68274
+ var reverseAmountOutBN = BigNumber$4.from(reverseRoute.amountOut);
68275
+ var paymentAmountInBN = BigNumber$4.from(payment.route.fromAmount);
68276
+ var divPercent = 100 - reverseAmountOutBN.mul(BigNumber$4.from('100')).div(paymentAmountInBN).abs().toString();
68277
+
68278
+ if (divPercent >= 5) {
68279
+ setPaymentValueLoss(divPercent);
68280
+ } else {
68281
+ setPaymentValueLoss(null);
68282
+ }
68283
+ }
68256
68284
 
68257
- var USDRoute = USDExchangeRoutes[0];
68258
- var USDAmount;
68285
+ var toTokenUSDAmount;
68259
68286
 
68260
68287
  if (payment.route.toToken.address.toLowerCase() == CONSTANTS$2[payment.route.blockchain].USD.toLowerCase()) {
68261
- USDAmount = payment.route.toAmount.toString();
68262
- } else if (USDRoute == undefined) {
68288
+ toTokenUSDAmount = payment.route.toAmount.toString();
68289
+ } else if (toTokenUSDRoute == undefined) {
68263
68290
  setPaymentValue('');
68264
68291
  return;
68265
68292
  } else {
68266
- USDAmount = USDRoute.amountOut.toString();
68293
+ toTokenUSDAmount = toTokenUSDRoute.amountOut.toString();
68267
68294
  }
68268
68295
 
68269
- var USDValue = formatUnits(USDAmount, USDDecimals);
68296
+ var toTokenUSDValue = formatUnits(toTokenUSDAmount, USDDecimals);
68270
68297
  Currency.fromUSD({
68271
- amount: USDValue,
68298
+ amount: toTokenUSDValue,
68272
68299
  code: currency,
68273
68300
  apiKey: apiKey
68274
68301
  }).then(setPaymentValue)["catch"](setError);
@@ -68277,7 +68304,7 @@
68277
68304
 
68278
68305
  react.useEffect(function () {
68279
68306
  if (account && payment) {
68280
- getToTokenLocalValue({
68307
+ updatePaymentValue({
68281
68308
  updatable: updatable,
68282
68309
  payment: payment
68283
68310
  });
@@ -68286,7 +68313,7 @@
68286
68313
  react.useEffect(function () {
68287
68314
  var timeout = setTimeout(function () {
68288
68315
  setReloadCount(reloadCount + 1);
68289
- getToTokenLocalValue({
68316
+ updatePaymentValue({
68290
68317
  updatable: updatable
68291
68318
  });
68292
68319
  }, 15000);
@@ -68296,7 +68323,8 @@
68296
68323
  }, [reloadCount, updatable]);
68297
68324
  return /*#__PURE__*/react.createElement(PaymentValueContext.Provider, {
68298
68325
  value: {
68299
- paymentValue: paymentValue
68326
+ paymentValue: paymentValue,
68327
+ paymentValueLoss: paymentValueLoss
68300
68328
  }
68301
68329
  }, props.children);
68302
68330
  });
@@ -70444,7 +70472,8 @@
70444
70472
  approvalTransaction = _useContext4.approvalTransaction;
70445
70473
 
70446
70474
  var _useContext5 = react.useContext(PaymentValueContext),
70447
- paymentValue = _useContext5.paymentValue;
70475
+ paymentValue = _useContext5.paymentValue,
70476
+ paymentValueLoss = _useContext5.paymentValueLoss;
70448
70477
 
70449
70478
  var _useContext6 = react.useContext(NavigateStackContext);
70450
70479
  _useContext6.navigate;
@@ -70590,7 +70619,16 @@
70590
70619
  displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
70591
70620
  }
70592
70621
 
70593
- if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
70622
+ if (paymentValueLoss) {
70623
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
70624
+ className: "PaddingBottomXS"
70625
+ }, /*#__PURE__*/react.createElement("div", {
70626
+ className: "Alert"
70627
+ }, /*#__PURE__*/react.createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/react.createElement("button", {
70628
+ className: "ButtonPrimary disabled",
70629
+ onClick: function onClick() {}
70630
+ }, "Pay ", displayedAmount));
70631
+ } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
70594
70632
  return /*#__PURE__*/react.createElement("button", {
70595
70633
  className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
70596
70634
  onClick: function onClick() {
package/dist/umd/index.js CHANGED
@@ -2764,15 +2764,20 @@
2764
2764
  paymentValue = _useState2[0],
2765
2765
  setPaymentValue = _useState2[1];
2766
2766
 
2767
+ var _useState3 = React.useState(),
2768
+ _useState4 = _slicedToArray(_useState3, 2),
2769
+ paymentValueLoss = _useState4[0],
2770
+ setPaymentValueLoss = _useState4[1];
2771
+
2767
2772
  var _useContext5 = React.useContext(ConfigurationContext),
2768
2773
  currency = _useContext5.currency;
2769
2774
 
2770
- var _useState3 = React.useState(0),
2771
- _useState4 = _slicedToArray(_useState3, 2),
2772
- reloadCount = _useState4[0],
2773
- setReloadCount = _useState4[1];
2775
+ var _useState5 = React.useState(0),
2776
+ _useState6 = _slicedToArray(_useState5, 2),
2777
+ reloadCount = _useState6[0],
2778
+ setReloadCount = _useState6[1];
2774
2779
 
2775
- var getToTokenLocalValue = function getToTokenLocalValue(_ref) {
2780
+ var updatePaymentValue = function updatePaymentValue(_ref) {
2776
2781
  var updatable = _ref.updatable,
2777
2782
  payment = _ref.payment;
2778
2783
 
@@ -2787,29 +2792,51 @@
2787
2792
  amountIn: payment.route.toAmount,
2788
2793
  fromAddress: account,
2789
2794
  toAddress: account
2790
- }), new web3Tokens.Token({
2795
+ }), !payment.route.directTransfer ? web3Exchanges.route({
2796
+ blockchain: payment.route.blockchain,
2797
+ tokenIn: payment.route.toToken.address,
2798
+ tokenOut: payment.route.fromToken.address,
2799
+ amountIn: payment.route.toAmount,
2800
+ fromAddress: account,
2801
+ toAddress: account
2802
+ }) : Promise.resolve([]), new web3Tokens.Token({
2791
2803
  blockchain: payment.route.blockchain,
2792
2804
  address: web3Constants.CONSTANTS[payment.route.blockchain].USD
2793
2805
  }).decimals()]).then(function (_ref2) {
2794
- var _ref3 = _slicedToArray(_ref2, 2),
2795
- USDExchangeRoutes = _ref3[0],
2796
- USDDecimals = _ref3[1];
2806
+ var _ref3 = _slicedToArray(_ref2, 3),
2807
+ toTokenUSDExchangeRoutes = _ref3[0],
2808
+ reverseRoutes = _ref3[1],
2809
+ USDDecimals = _ref3[2];
2810
+
2811
+ var toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
2812
+ var reverseRoute = reverseRoutes[0];
2813
+
2814
+ if (reverseRoute) {
2815
+ var reverseAmountOutBN = ethers.ethers.BigNumber.from(reverseRoute.amountOut);
2816
+ var paymentAmountInBN = ethers.ethers.BigNumber.from(payment.route.fromAmount);
2817
+ var divPercent = 100 - reverseAmountOutBN.mul(ethers.ethers.BigNumber.from('100')).div(paymentAmountInBN).abs().toString();
2818
+
2819
+ if (divPercent >= 5) {
2820
+ setPaymentValueLoss(divPercent);
2821
+ } else {
2822
+ setPaymentValueLoss(null);
2823
+ }
2824
+ }
2797
2825
 
2798
- var USDRoute = USDExchangeRoutes[0];
2799
- var USDAmount;
2826
+ var toTokenUSDAmount;
2800
2827
 
2801
2828
  if (payment.route.toToken.address.toLowerCase() == web3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
2802
- USDAmount = payment.route.toAmount.toString();
2803
- } else if (USDRoute == undefined) {
2829
+ toTokenUSDAmount = payment.route.toAmount.toString();
2830
+ } else if (toTokenUSDRoute == undefined) {
2804
2831
  setPaymentValue('');
2805
2832
  return;
2806
2833
  } else {
2807
- USDAmount = USDRoute.amountOut.toString();
2834
+ toTokenUSDAmount = toTokenUSDRoute.amountOut.toString();
2808
2835
  }
2809
2836
 
2810
- var USDValue = ethers.ethers.utils.formatUnits(USDAmount, USDDecimals);
2837
+ var toTokenUSDValue = ethers.ethers.utils.formatUnits(toTokenUSDAmount, USDDecimals);
2811
2838
  localCurrency.Currency.fromUSD({
2812
- amount: USDValue,
2839
+ amount: toTokenUSDValue,
2813
2840
  code: currency,
2814
2841
  apiKey: apiKey
2815
2842
  }).then(setPaymentValue)["catch"](setError);
@@ -2818,7 +2845,7 @@
2818
2845
 
2819
2846
  React.useEffect(function () {
2820
2847
  if (account && payment) {
2821
- getToTokenLocalValue({
2848
+ updatePaymentValue({
2822
2849
  updatable: updatable,
2823
2850
  payment: payment
2824
2851
  });
@@ -2827,7 +2854,7 @@
2827
2854
  React.useEffect(function () {
2828
2855
  var timeout = setTimeout(function () {
2829
2856
  setReloadCount(reloadCount + 1);
2830
- getToTokenLocalValue({
2857
+ updatePaymentValue({
2831
2858
  updatable: updatable
2832
2859
  });
2833
2860
  }, 15000);
@@ -2837,7 +2864,8 @@
2837
2864
  }, [reloadCount, updatable]);
2838
2865
  return /*#__PURE__*/React__default["default"].createElement(PaymentValueContext.Provider, {
2839
2866
  value: {
2840
- paymentValue: paymentValue
2867
+ paymentValue: paymentValue,
2868
+ paymentValueLoss: paymentValueLoss
2841
2869
  }
2842
2870
  }, props.children);
2843
2871
  });
@@ -3271,7 +3299,8 @@
3271
3299
  approvalTransaction = _useContext4.approvalTransaction;
3272
3300
 
3273
3301
  var _useContext5 = React.useContext(PaymentValueContext),
3274
- paymentValue = _useContext5.paymentValue;
3302
+ paymentValue = _useContext5.paymentValue,
3303
+ paymentValueLoss = _useContext5.paymentValueLoss;
3275
3304
 
3276
3305
  var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext);
3277
3306
  _useContext6.navigate;
@@ -3417,7 +3446,16 @@
3417
3446
  displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
3418
3447
  }
3419
3448
 
3420
- if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
3449
+ if (paymentValueLoss) {
3450
+ return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
3451
+ className: "PaddingBottomXS"
3452
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3453
+ className: "Alert"
3454
+ }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/React__default["default"].createElement("button", {
3455
+ className: "ButtonPrimary disabled",
3456
+ onClick: function onClick() {}
3457
+ }, "Pay ", displayedAmount));
3458
+ } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
3421
3459
  return /*#__PURE__*/React__default["default"].createElement("button", {
3422
3460
  className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
3423
3461
  onClick: function onClick() {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@depay/widgets",
3
3
  "moduleName": "DePayWidgets",
4
- "version": "6.14.0",
4
+ "version": "6.15.0",
5
5
  "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
6
6
  "main": "./dist/umd/index.js",
7
7
  "module": "./dist/esm/index.js",