@depay/widgets 6.14.0 → 6.16.2

package/dist/esm/index.bundle.js

@@ -48843,6 +48843,10 @@ const submitSimpleTransfer = ({ transaction, wallet })=>{
 function _optionalChain$6(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; }
 let connectedInstance;
 
+const getConnectedInstance = ()=>{
+  return connectedInstance
+};
+
 class WalletConnectWallet {
 
   static __initStatic() {this.info = {
@@ -49025,7 +49029,7 @@ const wallets = {
 const instances = {};
 
 const getWalletClass = function(){
-  if(connectedInstance) {
+  if(getConnectedInstance()) {
     return wallets.WalletConnect
   } else if (typeof window.ethereum === 'object' && window.ethereum.isMetaMask) {
     return wallets.MetaMask
@@ -49040,8 +49044,8 @@ const getWallet = function () {
   const walletClass = getWalletClass();
   const existingInstance = instances[walletClass];
 
-  if(connectedInstance) {
-    return connectedInstance
+  if(getConnectedInstance()) {
+    return getConnectedInstance()
   } else if(existingInstance) {
     return existingInstance
   } else if(walletClass) {
@@ -55315,17 +55319,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() {
@@ -62471,7 +62479,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,
@@ -62551,10 +62559,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);
@@ -67687,10 +67692,10 @@ class PaymentRoute {
     this.fromAddress = fromAddress;
     this.fromToken = fromToken;
     this.fromAmount = _optionalChain([fromAmount, 'optionalAccess', _ => _.toString, 'call', _2 => _2()]);
-    this.fromDecimals = _optionalChain([fromDecimals, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]);
+    this.fromDecimals = fromDecimals;
     this.fromBalance = 0;
     this.toToken = toToken;
-    this.toAmount = _optionalChain([toAmount, 'optionalAccess', _5 => _5.toString, 'call', _6 => _6()]);
+    this.toAmount = _optionalChain([toAmount, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]);
     this.toDecimals = toDecimals;
     this.toAddress = toAddress;
     this.toContract = toContract;
@@ -67754,12 +67759,14 @@ function convertToRoutes({ tokens, accept }) {
       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,
@@ -67804,7 +67811,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
@@ -67937,16 +67944,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
   })
@@ -68217,15 +68227,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;
 
@@ -68240,29 +68255,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);
@@ -68271,7 +68308,7 @@ var PaymentValueProvider = (function (props) {
 
   react.useEffect(function () {
     if (account && payment) {
-      getToTokenLocalValue({
+      updatePaymentValue({
         updatable: updatable,
         payment: payment
       });
@@ -68280,7 +68317,7 @@ var PaymentValueProvider = (function (props) {
   react.useEffect(function () {
     var timeout = setTimeout(function () {
       setReloadCount(reloadCount + 1);
-      getToTokenLocalValue({
+      updatePaymentValue({
         updatable: updatable
       });
     }, 15000);
@@ -68290,7 +68327,8 @@ var PaymentValueProvider = (function (props) {
   }, [reloadCount, updatable]);
   return /*#__PURE__*/react.createElement(PaymentValueContext.Provider, {
     value: {
-      paymentValue: paymentValue
+      paymentValue: paymentValue,
+      paymentValueLoss: paymentValueLoss
     }
   }, props.children);
 });
@@ -70036,6 +70074,7 @@ let TokenImage = function(props){
 
   return(
     react.createElement('img', {
+      className:  props.className ,
       src:  src ,
       onError:  handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 51}}
     )
@@ -70438,7 +70477,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;
@@ -70584,7 +70624,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() {
@@ -70882,11 +70931,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];
 
@@ -70954,7 +71003,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 () {
@@ -70997,9 +71045,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) {
@@ -71063,7 +71109,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);

package/dist/esm/index.js

@@ -2317,7 +2317,7 @@ var PaymentProvider = (function (props) {
   var _useContext9 = useContext(PaymentTrackingContext),
       release = _useContext9.release,
       tracking = _useContext9.tracking,
-      initializeTracking = _useContext9.initializeTracking;
+      initializePaymentTracking = _useContext9.initializeTracking;
 
   var _useContext10 = useContext(TransactionTrackingContext),
       foundTransaction = _useContext10.foundTransaction,
@@ -2397,10 +2397,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);
@@ -2769,15 +2766,20 @@ var PaymentValueProvider = (function (props) {
       paymentValue = _useState2[0],
       setPaymentValue = _useState2[1];
 
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      paymentValueLoss = _useState4[0],
+      setPaymentValueLoss = _useState4[1];
+
   var _useContext5 = useContext(ConfigurationContext),
       currency = _useContext5.currency;
 
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      reloadCount = _useState4[0],
-      setReloadCount = _useState4[1];
+  var _useState5 = 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;
 
@@ -2792,29 +2794,51 @@ var PaymentValueProvider = (function (props) {
       amountIn: payment.route.toAmount,
       fromAddress: account,
       toAddress: account
-    }), new Token({
+    }), !payment.route.directTransfer ? 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 Token({
       blockchain: payment.route.blockchain,
       address: 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 toTokenUSDRoute = toTokenUSDExchangeRoutes[0];
+      var reverseRoute = reverseRoutes[0];
+
+      if (reverseRoute) {
+        var reverseAmountOutBN = ethers.BigNumber.from(reverseRoute.amountOut);
+        var paymentAmountInBN = ethers.BigNumber.from(payment.route.fromAmount);
+        var divPercent = 100 - reverseAmountOutBN.mul(ethers.BigNumber.from('100')).div(paymentAmountInBN).abs().toString();
+
+        if (divPercent > 5) {
+          setPaymentValueLoss(divPercent);
+        } else {
+          setPaymentValueLoss(null);
+        }
+      }
 
-      var USDRoute = USDExchangeRoutes[0];
-      var USDAmount;
+      var toTokenUSDAmount;
 
       if (payment.route.toToken.address.toLowerCase() == 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.utils.formatUnits(USDAmount, USDDecimals);
+      var toTokenUSDValue = ethers.utils.formatUnits(toTokenUSDAmount, USDDecimals);
       Currency.fromUSD({
-        amount: USDValue,
+        amount: toTokenUSDValue,
         code: currency,
         apiKey: apiKey
       }).then(setPaymentValue)["catch"](setError);
@@ -2823,7 +2847,7 @@ var PaymentValueProvider = (function (props) {
 
   useEffect(function () {
     if (account && payment) {
-      getToTokenLocalValue({
+      updatePaymentValue({
         updatable: updatable,
         payment: payment
       });
@@ -2832,7 +2856,7 @@ var PaymentValueProvider = (function (props) {
   useEffect(function () {
     var timeout = setTimeout(function () {
       setReloadCount(reloadCount + 1);
-      getToTokenLocalValue({
+      updatePaymentValue({
         updatable: updatable
       });
     }, 15000);
@@ -2842,7 +2866,8 @@ var PaymentValueProvider = (function (props) {
   }, [reloadCount, updatable]);
   return /*#__PURE__*/React.createElement(PaymentValueContext.Provider, {
     value: {
-      paymentValue: paymentValue
+      paymentValue: paymentValue,
+      paymentValueLoss: paymentValueLoss
     }
   }, props.children);
 });
@@ -3276,7 +3301,8 @@ var Footer = (function () {
       approvalTransaction = _useContext4.approvalTransaction;
 
   var _useContext5 = useContext(PaymentValueContext),
-      paymentValue = _useContext5.paymentValue;
+      paymentValue = _useContext5.paymentValue,
+      paymentValueLoss = _useContext5.paymentValueLoss;
 
   var _useContext6 = useContext(NavigateStackContext);
       _useContext6.navigate;
@@ -3422,7 +3448,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() {
@@ -3720,11 +3755,11 @@ var PaymentTrackingProvider = (function (props) {
       paymentRoute = _useState6[0],
       setPaymentRoute = _useState6[1];
 
-  var _useState7 = useState(track && !!(track.endpoint || typeof track.method == 'function')),
+  var _useState7 = useState(!!(track && (track.endpoint || typeof track.method == 'function'))),
       _useState8 = _slicedToArray(_useState7, 1),
       tracking = _useState8[0];
 
-  var _useState9 = useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+  var _useState9 = useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function'))),
       _useState10 = _slicedToArray(_useState9, 1),
       polling = _useState10[0];
 
@@ -3792,7 +3827,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 () {
@@ -3835,9 +3869,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) {
@@ -3901,7 +3933,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 ? ethers.utils.formatUnits(paymentRoute.transaction.params.amounts[1], paymentRoute.toDecimals) : 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.utils.formatUnits(paymentRoute.fromAmount, paymentRoute.fromDecimals)
+        },
+        fee_amount: paymentRoute.fee ? 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);

package/dist/umd/index.bundle.js

@@ -48849,6 +48849,10 @@
   function _optionalChain$6(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; }
   let connectedInstance;
 
+  const getConnectedInstance = ()=>{
+    return connectedInstance
+  };
+
   class WalletConnectWallet {
 
     static __initStatic() {this.info = {
@@ -49031,7 +49035,7 @@
   const instances = {};
 
   const getWalletClass = function(){
-    if(connectedInstance) {
+    if(getConnectedInstance()) {
       return wallets.WalletConnect
     } else if (typeof window.ethereum === 'object' && window.ethereum.isMetaMask) {
       return wallets.MetaMask
@@ -49046,8 +49050,8 @@
     const walletClass = getWalletClass();
     const existingInstance = instances[walletClass];
 
-    if(connectedInstance) {
-      return connectedInstance
+    if(getConnectedInstance()) {
+      return getConnectedInstance()
     } else if(existingInstance) {
       return existingInstance
     } else if(walletClass) {
@@ -55321,17 +55325,21 @@
       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() {
@@ -62477,7 +62485,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,
@@ -62557,10 +62565,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);
@@ -67693,10 +67698,10 @@
       this.fromAddress = fromAddress;
       this.fromToken = fromToken;
       this.fromAmount = _optionalChain([fromAmount, 'optionalAccess', _ => _.toString, 'call', _2 => _2()]);
-      this.fromDecimals = _optionalChain([fromDecimals, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]);
+      this.fromDecimals = fromDecimals;
       this.fromBalance = 0;
       this.toToken = toToken;
-      this.toAmount = _optionalChain([toAmount, 'optionalAccess', _5 => _5.toString, 'call', _6 => _6()]);
+      this.toAmount = _optionalChain([toAmount, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]);
       this.toDecimals = toDecimals;
       this.toAddress = toAddress;
       this.toContract = toContract;
@@ -67760,12 +67765,14 @@
         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,
@@ -67810,7 +67817,7 @@
       .then(addApproval)
       .then(sortPaymentRoutes)
       .then((routes)=>addTransactions({ routes, event, fee }))
-      .then(addFromAmount)
+      .then(addRouteAmounts)
       .then(filterDuplicateFromTokens);
 
     return paymentRoutes
@@ -67943,16 +67950,19 @@
     })
   };
 
-  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
     })
@@ -68223,15 +68233,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;
 
@@ -68246,29 +68261,51 @@
         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);
@@ -68277,7 +68314,7 @@
 
     react.useEffect(function () {
       if (account && payment) {
-        getToTokenLocalValue({
+        updatePaymentValue({
           updatable: updatable,
           payment: payment
         });
@@ -68286,7 +68323,7 @@
     react.useEffect(function () {
       var timeout = setTimeout(function () {
         setReloadCount(reloadCount + 1);
-        getToTokenLocalValue({
+        updatePaymentValue({
           updatable: updatable
         });
       }, 15000);
@@ -68296,7 +68333,8 @@
     }, [reloadCount, updatable]);
     return /*#__PURE__*/react.createElement(PaymentValueContext.Provider, {
       value: {
-        paymentValue: paymentValue
+        paymentValue: paymentValue,
+        paymentValueLoss: paymentValueLoss
       }
     }, props.children);
   });
@@ -70042,6 +70080,7 @@
 
     return(
       react.createElement('img', {
+        className:  props.className ,
         src:  src ,
         onError:  handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 51}}
       )
@@ -70444,7 +70483,8 @@
         approvalTransaction = _useContext4.approvalTransaction;
 
     var _useContext5 = react.useContext(PaymentValueContext),
-        paymentValue = _useContext5.paymentValue;
+        paymentValue = _useContext5.paymentValue,
+        paymentValueLoss = _useContext5.paymentValueLoss;
 
     var _useContext6 = react.useContext(NavigateStackContext);
         _useContext6.navigate;
@@ -70590,7 +70630,16 @@
         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() {
@@ -70888,11 +70937,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];
 
@@ -70960,7 +71009,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 () {
@@ -71003,9 +71051,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) {
@@ -71069,7 +71115,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 ? 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);

package/dist/umd/index.js

@@ -2312,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,
@@ -2392,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);
@@ -2764,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;
 
@@ -2787,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 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 USDRoute = USDExchangeRoutes[0];
-        var USDAmount;
+        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);
@@ -2818,7 +2842,7 @@
 
     React.useEffect(function () {
       if (account && payment) {
-        getToTokenLocalValue({
+        updatePaymentValue({
           updatable: updatable,
           payment: payment
         });
@@ -2827,7 +2851,7 @@
     React.useEffect(function () {
       var timeout = setTimeout(function () {
         setReloadCount(reloadCount + 1);
-        getToTokenLocalValue({
+        updatePaymentValue({
           updatable: updatable
         });
       }, 15000);
@@ -2837,7 +2861,8 @@
     }, [reloadCount, updatable]);
     return /*#__PURE__*/React__default["default"].createElement(PaymentValueContext.Provider, {
       value: {
-        paymentValue: paymentValue
+        paymentValue: paymentValue,
+        paymentValueLoss: paymentValueLoss
       }
     }, props.children);
   });
@@ -3271,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;
@@ -3417,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() {
@@ -3715,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];
 
@@ -3787,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 () {
@@ -3830,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) {
@@ -3896,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);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.14.0",
+  "version": "6.16.2",
   "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,9 +43,9 @@
     "@depay/web3-client": "^8.0.0",
     "@depay/web3-constants": "^5.0.0",
     "@depay/web3-exchanges": "^8.1.0",
-    "@depay/web3-payments": "^9.3.0",
-    "@depay/web3-tokens": "^8.0.0",
-    "@depay/web3-wallets": "^9.0.0",
+    "@depay/web3-payments": "^9.3.3",
+    "@depay/web3-tokens": "^8.0.1",
+    "@depay/web3-wallets": "^9.0.1",
     "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",