@depay/widgets 6.13.0 → 6.16.0

package/dist/umd/index.js

@@ -2016,13 +2016,14 @@
   var ChangableAmountProvider = (function (props) {
     var configurationsMissAmounts = function configurationsMissAmounts(configurations) {
       return !configurations.every(function (configuration) {
-        return typeof configuration.amount != 'undefined';
+        return typeof configuration.amount != 'undefined' || typeof configuration.fromAmount != 'undefined';
       });
     };
 
     var _useContext = React.useContext(ConfigurationContext),
-        amountConfiguration = _useContext.amount,
-        recover = _useContext.recover;
+        amountConfiguration = _useContext.amount;
+        _useContext.toAmount;
+        var recover = _useContext.recover;
 
     var _useState = React.useState(recover == undefined ? configurationsMissAmounts(props.accept) : false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2311,7 +2312,7 @@
     var _useContext9 = React.useContext(PaymentTrackingContext),
         release = _useContext9.release,
         tracking = _useContext9.tracking,
-        initializeTracking = _useContext9.initializeTracking;
+        initializePaymentTracking = _useContext9.initializeTracking;
 
     var _useContext10 = React.useContext(TransactionTrackingContext),
         foundTransaction = _useContext10.foundTransaction,
@@ -2391,10 +2392,7 @@
                   confirmed: paymentConfirmed,
                   failed: paymentFailed
                 })).then(function (sentTransaction) {
-                  if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock, payment.route);
-                  }
-
+                  initializePaymentTracking(sentTransaction, currentBlock, payment.route);
                   setTransaction(sentTransaction);
                 })["catch"](function (error) {
                   console.log('error', error);
@@ -2763,15 +2761,20 @@
         paymentValue = _useState2[0],
         setPaymentValue = _useState2[1];
 
+    var _useState3 = React.useState(),
+        _useState4 = _slicedToArray(_useState3, 2),
+        paymentValueLoss = _useState4[0],
+        setPaymentValueLoss = _useState4[1];
+
     var _useContext5 = React.useContext(ConfigurationContext),
         currency = _useContext5.currency;
 
-    var _useState3 = React.useState(0),
-        _useState4 = _slicedToArray(_useState3, 2),
-        reloadCount = _useState4[0],
-        setReloadCount = _useState4[1];
+    var _useState5 = React.useState(0),
+        _useState6 = _slicedToArray(_useState5, 2),
+        reloadCount = _useState6[0],
+        setReloadCount = _useState6[1];
 
-    var getToTokenLocalValue = function getToTokenLocalValue(_ref) {
+    var updatePaymentValue = function updatePaymentValue(_ref) {
       var updatable = _ref.updatable,
           payment = _ref.payment;
 
@@ -2786,29 +2789,51 @@
         amountIn: payment.route.toAmount,
         fromAddress: account,
         toAddress: account
-      }), new web3Tokens.Token({
+      }), !payment.route.directTransfer ? web3Exchanges.route({
+        blockchain: payment.route.blockchain,
+        tokenIn: payment.route.toToken.address,
+        tokenOut: payment.route.fromToken.address,
+        amountIn: payment.route.toAmount,
+        fromAddress: account,
+        toAddress: account
+      }) : Promise.resolve([]), new web3Tokens.Token({
         blockchain: payment.route.blockchain,
         address: web3Constants.CONSTANTS[payment.route.blockchain].USD
       }).decimals()]).then(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            USDExchangeRoutes = _ref3[0],
-            USDDecimals = _ref3[1];
+        var _ref3 = _slicedToArray(_ref2, 3),
+            toTokenUSDExchangeRoutes = _ref3[0],
+            reverseRoutes = _ref3[1],
+            USDDecimals = _ref3[2];
 
-        var USDRoute = USDExchangeRoutes[0];
-        var USDAmount;
+        var toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
+        var reverseRoute = reverseRoutes[0];
+
+        if (reverseRoute) {
+          var reverseAmountOutBN = ethers.ethers.BigNumber.from(reverseRoute.amountOut);
+          var paymentAmountInBN = ethers.ethers.BigNumber.from(payment.route.fromAmount);
+          var divPercent = 100 - reverseAmountOutBN.mul(ethers.ethers.BigNumber.from('100')).div(paymentAmountInBN).abs().toString();
+
+          if (divPercent >= 5) {
+            setPaymentValueLoss(divPercent);
+          } else {
+            setPaymentValueLoss(null);
+          }
+        }
+
+        var toTokenUSDAmount;
 
         if (payment.route.toToken.address.toLowerCase() == web3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
-          USDAmount = payment.route.toAmount.toString();
-        } else if (USDRoute == undefined) {
+          toTokenUSDAmount = payment.route.toAmount.toString();
+        } else if (toTokenUSDRoute == undefined) {
           setPaymentValue('');
           return;
         } else {
-          USDAmount = USDRoute.amountOut.toString();
+          toTokenUSDAmount = toTokenUSDRoute.amountOut.toString();
         }
 
-        var USDValue = ethers.ethers.utils.formatUnits(USDAmount, USDDecimals);
+        var toTokenUSDValue = ethers.ethers.utils.formatUnits(toTokenUSDAmount, USDDecimals);
         localCurrency.Currency.fromUSD({
-          amount: USDValue,
+          amount: toTokenUSDValue,
           code: currency,
           apiKey: apiKey
         }).then(setPaymentValue)["catch"](setError);
@@ -2817,7 +2842,7 @@
 
     React.useEffect(function () {
       if (account && payment) {
-        getToTokenLocalValue({
+        updatePaymentValue({
           updatable: updatable,
           payment: payment
         });
@@ -2826,7 +2851,7 @@
     React.useEffect(function () {
       var timeout = setTimeout(function () {
         setReloadCount(reloadCount + 1);
-        getToTokenLocalValue({
+        updatePaymentValue({
           updatable: updatable
         });
       }, 15000);
@@ -2836,7 +2861,8 @@
     }, [reloadCount, updatable]);
     return /*#__PURE__*/React__default["default"].createElement(PaymentValueContext.Provider, {
       value: {
-        paymentValue: paymentValue
+        paymentValue: paymentValue,
+        paymentValueLoss: paymentValueLoss
       }
     }, props.children);
   });
@@ -3270,7 +3296,8 @@
         approvalTransaction = _useContext4.approvalTransaction;
 
     var _useContext5 = React.useContext(PaymentValueContext),
-        paymentValue = _useContext5.paymentValue;
+        paymentValue = _useContext5.paymentValue,
+        paymentValueLoss = _useContext5.paymentValueLoss;
 
     var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext);
         _useContext6.navigate;
@@ -3416,7 +3443,16 @@
         displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
       }
 
-      if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
+      if (paymentValueLoss) {
+        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "PaddingBottomXS"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "Alert"
+        }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/React__default["default"].createElement("button", {
+          className: "ButtonPrimary disabled",
+          onClick: function onClick() {}
+        }, "Pay ", displayedAmount));
+      } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
         return /*#__PURE__*/React__default["default"].createElement("button", {
           className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
           onClick: function onClick() {
@@ -3714,11 +3750,11 @@
         paymentRoute = _useState6[0],
         setPaymentRoute = _useState6[1];
 
-    var _useState7 = React.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+    var _useState7 = React.useState(!!(track && (track.endpoint || typeof track.method == 'function'))),
         _useState8 = _slicedToArray(_useState7, 1),
         tracking = _useState8[0];
 
-    var _useState9 = React.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+    var _useState9 = React.useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function'))),
         _useState10 = _slicedToArray(_useState9, 1),
         polling = _useState10[0];
 
@@ -3786,7 +3822,6 @@
 
     var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
       attempt = parseInt(attempt || 1, 10);
-      console.log('RETRYING PAYMENT TRACKING ATTEMPT ', attempt);
 
       if (attempt < 3) {
         setTimeout(function () {
@@ -3829,9 +3864,7 @@
         after_block: afterBlock,
         to_token: paymentRoute.toToken.address
       }).then(function (response) {
-        if (response.status == 200) {
-          console.log('PAYMENT TRACKING INITIALIZED');
-        } else {
+        if (response.status != 200) {
           retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
         }
       })["catch"](function (error) {
@@ -3895,7 +3928,56 @@
       };
     }, [polling, transaction, afterBlock, paymentRoute]);
 
+    var storePayment = function storePayment(transaction, afterBlock, paymentRoute, attempt) {
+      if (attempt > 3) {
+        return;
+      }
+
+      fetch('https://api.depay.fi/v2/payments', {
+        method: 'POST',
+        headers: {
+          'X-Api-Key': apiKey,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          blockchain: transaction.blockchain,
+          transaction: transaction.id,
+          sender: transaction.from.toLowerCase(),
+          nonce: transaction.nonce,
+          receiver: paymentRoute.toAddress,
+          token: paymentRoute.toToken.address,
+          amount: paymentRoute.fee ? ethers.ethers.utils.formatUnits(paymentRoute.transaction.params.amounts[1], paymentRoute.toDecimals) : ethers.ethers.utils.formatUnits(paymentRoute.toAmount, paymentRoute.toDecimals),
+          confirmations: 1,
+          after_block: afterBlock,
+          uuid: transaction.id,
+          payload: {
+            sender_id: transaction.from.toLowerCase(),
+            sender_token_id: paymentRoute.fromToken.address,
+            sender_amount: ethers.ethers.utils.formatUnits(paymentRoute.fromAmount, paymentRoute.fromDecimals)
+          },
+          fee_amount: paymentRoute.fee ? ethers.ethers.utils.formatUnits(paymentRoute.transaction.params.amounts[4], paymentRoute.toDecimals) : null,
+          fee_receiver: paymentRoute.fee ? paymentRoute.transaction.params.addresses[1] : null
+        })
+      }).then(function (response) {
+        if (response.status == 200 || response.status == 201) ; else {
+          setTimeout(function () {
+            storePayment(transaction, afterBlock, paymentRoute, attempt + 1);
+          }, 3000);
+        }
+      })["catch"](function (error) {
+        setTimeout(function () {
+          storePayment(transaction, afterBlock, paymentRoute, attempt + 1);
+        }, 3000);
+      });
+    };
+
     var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+      storePayment(transaction, afterBlock, paymentRoute, 1);
+
+      if (tracking == false) {
+        return;
+      }
+
       setTransaction(transaction);
       setAfterBlock(afterBlock);
       setPaymentRoute(paymentRoute);
@@ -4063,8 +4145,11 @@
   });
 
   var WalletProvider = (function (props) {
-    var _useContext = React.useContext(ErrorContext);
-        _useContext.setError;
+    var _useContext = React.useContext(ConfigurationContext),
+        recover = _useContext.recover;
+
+    var _useContext2 = React.useContext(ErrorContext);
+        _useContext2.setError;
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -4093,7 +4178,7 @@
       }
     };
 
-    if (walletState == 'connected') {
+    if (walletState == 'connected' || recover != undefined) {
       return /*#__PURE__*/React__default["default"].createElement(WalletContext.Provider, {
         value: {
           account: account,
@@ -4625,10 +4710,14 @@
                   throw 'You need to set a supported blockchain!';
                 }
 
-                if (typeof configuration.token === 'undefined') {
+                if (typeof configuration.token === 'undefined' && typeof configuration.fromToken === 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
                   throw 'You need to set the token you want to receive as payment!';
                 }
 
+                if (typeof configuration.token === 'undefined' && typeof configuration.fromToken !== 'undefined' && typeof configuration.fromAmount === 'undefined' && typeof configuration.toToken === 'undefined') {
+                  throw 'You need to set the fromToken, fromAmount and toToken!';
+                }
+
                 if (typeof configuration.receiver === 'undefined') {
                   throw 'You need to set the receiver address that you want to receive the payment!';
                 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.13.0",
+  "version": "6.16.0",
   "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.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -43,8 +43,8 @@
     "@depay/web3-client": "^8.0.0",
     "@depay/web3-constants": "^5.0.0",
     "@depay/web3-exchanges": "^8.1.0",
-    "@depay/web3-payments": "^9.2.0",
-    "@depay/web3-tokens": "^8.0.0",
+    "@depay/web3-payments": "^9.3.3",
+    "@depay/web3-tokens": "^8.0.1",
     "@depay/web3-wallets": "^9.0.0",
     "decimal.js": "^10.3.1",
     "react-rangeslider": "^2.2.0"
@@ -60,7 +60,7 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@cypress/react": "^5.9.1",
-    "@depay/web3-mock": "^11.6.0",
+    "@depay/web3-mock": "^11.6.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",