@depay/widgets 6.13.0 → 6.16.0

package/README.md

@@ -194,6 +194,25 @@ DePayWidgets.Payment({
 });
 ```
 
+#### fromToken, fromAmount + toToken
+
+In case where you want to configure payments based on the source token + amount, rather than target token and amount, you can pass `fromToken`, `fromAmount` and `toToken` to `accept`.
+
+In those cases make sure to NOT configure `token` nor `amount`!
+
+```javascript
+DePayWidgets.Payment({
+  accept: [{
+    blockchain: 'bsc',
+    fromToken: '0xe9e7cea3dedca5984780bafc599bd69add087d56',
+    fromAmount: 0.1,
+    toToken: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+    receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
+  }]
+});
+
+// This will open a payment widget to send 0.1 BUSD to the receiver, converting it to BNB along the way.
+```
 
 #### track
 

package/dist/esm/index.bundle.js

@@ -55315,17 +55315,21 @@ class Token {
     if (this.address == CONSTANTS$2[this.blockchain].NATIVE) {
       return CONSTANTS$2[this.blockchain].DECIMALS
     }
-    return await request(
-      {
-        blockchain: this.blockchain,
-        address: this.address,
-        method: 'decimals',
-      },
-      {
-        api: Token[this.blockchain].DEFAULT,
-        cache: 86400000, // 1 day
-      },
-    )
+    let decimals = 0;
+    try {
+      decimals = await request(
+        {
+          blockchain: this.blockchain,
+          address: this.address,
+          method: 'decimals',
+        },
+        {
+          api: Token[this.blockchain].DEFAULT,
+          cache: 86400000, // 1 day
+        },
+      );
+    } catch (e) {}
+    return decimals
   }
 
   async symbol() {
@@ -61718,13 +61722,14 @@ let route$8 = ({
 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),
@@ -62470,7 +62475,7 @@ var PaymentProvider = (function (props) {
   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,
@@ -62550,10 +62555,7 @@ var PaymentProvider = (function (props) {
                 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);
@@ -67681,14 +67683,16 @@ let transactionValue = ({ paymentRoute, exchangeRoute })=> {
 
 function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 class PaymentRoute {
-  constructor({ blockchain, fromToken, toToken, toDecimals, toAmount, fromAddress, toAddress, toContract }) {
+  constructor({ blockchain, fromAddress, fromToken, fromDecimals, fromAmount, toToken, toDecimals, toAmount, toAddress, toContract }) {
     this.blockchain = blockchain;
+    this.fromAddress = fromAddress;
     this.fromToken = fromToken;
+    this.fromAmount = _optionalChain([fromAmount, 'optionalAccess', _ => _.toString, 'call', _2 => _2()]);
+    this.fromDecimals = fromDecimals;
     this.fromBalance = 0;
     this.toToken = toToken;
+    this.toAmount = _optionalChain([toAmount, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]);
     this.toDecimals = toDecimals;
-    this.toAmount = _optionalChain([toAmount, 'optionalAccess', _ => _.toString, 'call', _2 => _2()]);
-    this.fromAddress = fromAddress;
     this.toAddress = toAddress;
     this.toContract = toContract;
     this.exchangeRoutes = [];
@@ -67748,22 +67752,45 @@ function convertToRoutes({ tokens, accept }) {
   return Promise.all(tokens.map(async (fromToken)=>{
     let relevantConfigurations = accept.filter((configuration)=>(configuration.blockchain == fromToken.blockchain));
     return Promise.all(relevantConfigurations.map(async (configuration)=>{
-      let blockchain = configuration.blockchain;
-      let toToken = new Token({ blockchain, address: configuration.token });
-      let toDecimals = await toToken.decimals();
-      let toAmount = (await toToken.BigNumber(configuration.amount)).toString();
-      return new PaymentRoute({
-        blockchain,
-        fromToken: fromToken,
-        toToken: toToken,
-        toAmount: toAmount,
-        toDecimals: toDecimals,
-        fromAddress: configuration.fromAddress,
-        toAddress: configuration.toAddress,
-        toContract: configuration.toContract
-      })
+      if(configuration.token && configuration.amount) {
+        let blockchain = configuration.blockchain;
+        let toToken = new Token({ blockchain, address: configuration.token });
+        let fromDecimals = await fromToken.decimals();
+        let toDecimals = await toToken.decimals();
+        let toAmount = (await toToken.BigNumber(configuration.amount)).toString();
+
+        return new PaymentRoute({
+          blockchain,
+          fromToken,
+          fromDecimals,
+          toToken,
+          toAmount,
+          toDecimals,
+          fromAddress: configuration.fromAddress,
+          toAddress: configuration.toAddress,
+          toContract: configuration.toContract
+        })
+      } else if(configuration.fromToken && configuration.fromAmount && fromToken.address.toLowerCase() == configuration.fromToken.toLowerCase()) {
+        let blockchain = configuration.blockchain;
+        let fromAmount = (await fromToken.BigNumber(configuration.fromAmount)).toString();
+        let fromDecimals = await fromToken.decimals();
+        let toToken = new Token({ blockchain, address: configuration.toToken });
+        let toDecimals = await toToken.decimals();
+        
+        return new PaymentRoute({
+          blockchain,
+          fromToken,
+          fromAmount,
+          fromDecimals,
+          toToken,
+          toDecimals,
+          fromAddress: configuration.fromAddress,
+          toAddress: configuration.toAddress,
+          toContract: configuration.toContract
+        })
+      }
     }))
-  })).then((routes)=> routes.flat())
+  })).then((routes)=> routes.flat().filter(el => el))
 }
 
 async function route({ accept, whitelist, blacklist, apiKey, event, fee }) {
@@ -67780,7 +67807,7 @@ async function route({ accept, whitelist, blacklist, apiKey, event, fee }) {
     .then(addApproval)
     .then(sortPaymentRoutes)
     .then((routes)=>addTransactions({ routes, event, fee }))
-    .then(addFromAmount)
+    .then(addRouteAmounts)
     .then(filterDuplicateFromTokens);
 
   return paymentRoutes
@@ -67819,14 +67846,25 @@ let addExchangeRoutes = async (routes) => {
   return await Promise.all(
     routes.map((route) => {
       if(route.directTransfer) { return [] }
-      return route$8({
-        blockchain: route.blockchain,
-        tokenIn: route.fromToken.address,
-        tokenOut: route.toToken.address,
-        amountOutMin: route.toAmount,
-        fromAddress: route.fromAddress,
-        toAddress: route.toAddress
-      })
+      if(route.toToken && route.toAmount) {
+        return route$8({
+          blockchain: route.blockchain,
+          tokenIn: route.fromToken.address,
+          tokenOut: route.toToken.address,
+          amountOutMin: route.toAmount,
+          fromAddress: route.fromAddress,
+          toAddress: route.toAddress
+        })
+      } else if(route.fromToken && route.fromAmount) {
+        return route$8({
+          blockchain: route.blockchain,
+          tokenIn: route.fromToken.address,
+          tokenOut: route.toToken.address,
+          amountIn: route.fromAmount,
+          fromAddress: route.fromAddress,
+          toAddress: route.toAddress
+        })
+      }
     }),
   ).then((exchangeRoutes) => {
     return routes.map((route, index) => {
@@ -67856,8 +67894,10 @@ let filterInsufficientBalance = async(routes) => {
   return routes.filter((route) => {
     if (route.fromToken.address.toLowerCase() == route.toToken.address.toLowerCase()) {
       return BigNumber.from(route.fromBalance).gte(BigNumber.from(route.toAmount))
-    } else {
+    } else if(route.fromAmount && route.toAmount) {
       return BigNumber.from(route.fromBalance).gte(BigNumber.from(route.exchangeRoutes[0].amountInMax))
+    } else if(route.exchangeRoutes[0] && route.exchangeRoutes[0].amountIn) {
+      return BigNumber.from(route.fromBalance).gte(BigNumber.from(route.exchangeRoutes[0].amountIn))
     }
   })
 };
@@ -67900,16 +67940,19 @@ let addDirectTransferStatus = (routes) => {
   })
 };
 
-let addFromAmount = (routes)=> {
+let addRouteAmounts = (routes)=> {
   return routes.map((route)=>{
     if(route.directTransfer && !route.fee) {
       if(route.fromToken.address.toLowerCase() == CONSTANTS$2[route.blockchain].NATIVE.toLowerCase()) {
         route.fromAmount = route.transaction.value;
+        route.toAmount = route.transaction.value;
       } else {
         route.fromAmount = route.transaction.params[1];
+        route.toAmount = route.transaction.params[1];
       }
     } else {
       route.fromAmount = route.transaction.params.amounts[0];
+      route.toAmount = route.transaction.params.amounts[1];
     }
     return route
   })
@@ -68180,15 +68223,20 @@ var PaymentValueProvider = (function (props) {
       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;
 
@@ -68203,29 +68251,51 @@ var PaymentValueProvider = (function (props) {
       amountIn: payment.route.toAmount,
       fromAddress: account,
       toAddress: account
-    }), new Token({
+    }), !payment.route.directTransfer ? route$8({
+      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 Token({
       blockchain: payment.route.blockchain,
       address: CONSTANTS$2[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 toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
+      var reverseRoute = reverseRoutes[0];
 
-      var USDRoute = USDExchangeRoutes[0];
-      var USDAmount;
+      if (reverseRoute) {
+        var reverseAmountOutBN = BigNumber$4.from(reverseRoute.amountOut);
+        var paymentAmountInBN = BigNumber$4.from(payment.route.fromAmount);
+        var divPercent = 100 - reverseAmountOutBN.mul(BigNumber$4.from('100')).div(paymentAmountInBN).abs().toString();
+
+        if (divPercent >= 5) {
+          setPaymentValueLoss(divPercent);
+        } else {
+          setPaymentValueLoss(null);
+        }
+      }
+
+      var toTokenUSDAmount;
 
       if (payment.route.toToken.address.toLowerCase() == CONSTANTS$2[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 = formatUnits(USDAmount, USDDecimals);
+      var toTokenUSDValue = formatUnits(toTokenUSDAmount, USDDecimals);
       Currency.fromUSD({
-        amount: USDValue,
+        amount: toTokenUSDValue,
         code: currency,
         apiKey: apiKey
       }).then(setPaymentValue)["catch"](setError);
@@ -68234,7 +68304,7 @@ var PaymentValueProvider = (function (props) {
 
   react.useEffect(function () {
     if (account && payment) {
-      getToTokenLocalValue({
+      updatePaymentValue({
         updatable: updatable,
         payment: payment
       });
@@ -68243,7 +68313,7 @@ var PaymentValueProvider = (function (props) {
   react.useEffect(function () {
     var timeout = setTimeout(function () {
       setReloadCount(reloadCount + 1);
-      getToTokenLocalValue({
+      updatePaymentValue({
         updatable: updatable
       });
     }, 15000);
@@ -68253,7 +68323,8 @@ var PaymentValueProvider = (function (props) {
   }, [reloadCount, updatable]);
   return /*#__PURE__*/react.createElement(PaymentValueContext.Provider, {
     value: {
-      paymentValue: paymentValue
+      paymentValue: paymentValue,
+      paymentValueLoss: paymentValueLoss
     }
   }, props.children);
 });
@@ -70401,7 +70472,8 @@ var Footer = (function () {
       approvalTransaction = _useContext4.approvalTransaction;
 
   var _useContext5 = react.useContext(PaymentValueContext),
-      paymentValue = _useContext5.paymentValue;
+      paymentValue = _useContext5.paymentValue,
+      paymentValueLoss = _useContext5.paymentValueLoss;
 
   var _useContext6 = react.useContext(NavigateStackContext);
       _useContext6.navigate;
@@ -70547,7 +70619,16 @@ var Footer = (function () {
       displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
     }
 
-    if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
+    if (paymentValueLoss) {
+      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+        className: "PaddingBottomXS"
+      }, /*#__PURE__*/react.createElement("div", {
+        className: "Alert"
+      }, /*#__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));
+    } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
       return /*#__PURE__*/react.createElement("button", {
         className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
         onClick: function onClick() {
@@ -70845,11 +70926,11 @@ var PaymentTrackingProvider = (function (props) {
       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];
 
@@ -70917,7 +70998,6 @@ var PaymentTrackingProvider = (function (props) {
 
   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 () {
@@ -70960,9 +71040,7 @@ var PaymentTrackingProvider = (function (props) {
       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) {
@@ -71026,7 +71104,56 @@ var PaymentTrackingProvider = (function (props) {
     };
   }, [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 ? formatUnits(paymentRoute.transaction.params.amounts[1], paymentRoute.toDecimals) : 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: formatUnits(paymentRoute.fromAmount, paymentRoute.fromDecimals)
+        },
+        fee_amount: paymentRoute.fee ? 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);
@@ -71194,8 +71321,11 @@ var TransactionTrackingProvider = (function (props) {
 });
 
 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),
@@ -71224,7 +71354,7 @@ var WalletProvider = (function (props) {
     }
   };
 
-  if (walletState == 'connected') {
+  if (walletState == 'connected' || recover != undefined) {
     return /*#__PURE__*/react.createElement(WalletContext.Provider, {
       value: {
         account: account,
@@ -71756,10 +71886,14 @@ var preflight$1 = /*#__PURE__*/function () {
                 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!';
               }