@depay/widgets 6.5.3 → 6.7.0

package/README.md

@@ -199,7 +199,8 @@ BODY:
     "transaction": "0x4311a9820195c2a5af99c45c72c88848ed403a4020863c913feed81d15855ae4",
     "sender": "0x769794c94e9f113e357023dab73e81dbd6db201c",
     "nonce": 103,
-    "after_block": 13230369
+    "after_block": 13230369,
+    "to_token": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
   }
 ```
 
@@ -210,6 +211,10 @@ Those values are supposed to be set by your backend not the widget nor the front
 
 Make sure you read the [Payment Tracking API](https://depay.fi/documentation/api#payments) for further details on how to integrate payment tracking.
 
+Payment tracking requests will be attempted up to 3 times by the widget and will display "Payment tracking failed!" to the user if the widget was not able to start payment tracking via the given endpoint after 3 attempts.
+
+A failed payment tracking will also call the [error callback](#error) with `{code: "TRACKING_FAILED"}`.
+
 #### connected
 
 `connected`

package/dist/esm/index.bundle.js

@@ -49451,7 +49451,8 @@ var ErrorProvider = (function (props) {
   } else {
     return /*#__PURE__*/react.createElement(ErrorContext.Provider, {
       value: {
-        setError: setErrorFromChildren
+        setError: setErrorFromChildren,
+        errorCallback: props.errorCallback
       }
     }, /*#__PURE__*/react.createElement(ErrorBoundary, {
       setError: setErrorFromChildren
@@ -49476,7 +49477,7 @@ var ButtonPrimaryStyle = (function (style) {
 });
 
 var CardStyle = (function (style) {
-  return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
+  return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
 });
 
 var DialogStyle = (function (style) {
@@ -49496,7 +49497,7 @@ var HeightStyle = (function () {
 });
 
 var IconStyle = (function (style) {
-  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
 });
 
 var ImageStyle = (function (style) {
@@ -49564,7 +49565,7 @@ var TokenAmountStyle = (function () {
 });
 
 var TokenImageStyle = (function (style) {
-  return "\n\n    .TokenImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
+  return "\n\n    .TokenImage img {\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
 });
 
 var TooltipStyle = (function (style) {
@@ -62371,7 +62372,7 @@ var NoPaymentMethodFoundDialog = (function () {
       className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/react.createElement("strong", {
       className: "FontSizeM"
-    }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+    }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
     footer: /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
     }, /*#__PURE__*/react.createElement("button", {
@@ -62486,7 +62487,7 @@ var PaymentProvider = (function (props) {
                 }
               })).then(function (sentTransaction) {
                 if (tracking) {
-                  initializeTracking(sentTransaction, currentBlock);
+                  initializeTracking(sentTransaction, currentBlock, payment.route);
                 }
 
                 setTransaction(sentTransaction);
@@ -69671,6 +69672,19 @@ var DonationOverviewSkeleton = (function (props) {
   });
 });
 
+var AlertIcon = (function (props) {
+  return /*#__PURE__*/react.createElement("svg", {
+    className: "AlertIcon Icon " + props.className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/react.createElement("path", {
+    d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+  }));
+});
+
 var Checkmark = (function (props) {
   return /*#__PURE__*/react.createElement("svg", {
     className: "Checkmark Icon " + props.className,
@@ -69748,7 +69762,8 @@ var Footer = (function () {
   var _useContext3 = react.useContext(TrackingContext),
       tracking = _useContext3.tracking,
       forward = _useContext3.forward,
-      forwardTo = _useContext3.forwardTo;
+      forwardTo = _useContext3.forwardTo,
+      trackingFailed = _useContext3.trackingFailed;
 
   var _useContext4 = react.useContext(PaymentContext),
       payment = _useContext4.payment,
@@ -69773,7 +69788,7 @@ var Footer = (function () {
     }
 
     if (forward) {
-      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
+      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/react.createElement("div", {
         className: "CardImage"
@@ -69789,21 +69804,37 @@ var Footer = (function () {
         className: "Opacity05"
       }, "Payment confirmation has been stored")))));
     } else {
-      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
-        className: "Card transparent small disabled"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "CardImage"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "TextCenter"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "Loading Icon"
-      }))), /*#__PURE__*/react.createElement("div", {
-        className: "CardBody"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "CardBodyWrapper"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "Opacity05"
-      }, "Storing payment confirmation")))));
+      if (trackingFailed) {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+          className: "Card transparent small"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/react.createElement(AlertIcon, {
+          className: "small"
+        }))), /*#__PURE__*/react.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/react.createElement("div", null, "Tracking payment failed!")))));
+      } else {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+          className: "Card transparent small disabled"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "Loading Icon"
+        }))), /*#__PURE__*/react.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "Opacity05"
+        }, "Storing payment confirmation")))));
+      }
     }
   };
 
@@ -70130,8 +70161,11 @@ var DonationStack = (function (props) {
 });
 
 var TrackingProvider = (function (props) {
-  var _useContext = react.useContext(ConfigurationContext),
-      track = _useContext.track;
+  var _useContext = react.useContext(ErrorContext),
+      errorCallback = _useContext.errorCallback;
+
+  var _useContext2 = react.useContext(ConfigurationContext),
+      track = _useContext2.track;
 
   var _useState = react.useState(track && !!track.endpoint),
       _useState2 = _slicedToArray(_useState, 2),
@@ -70143,13 +70177,18 @@ var TrackingProvider = (function (props) {
       forward = _useState4[0],
       setForward = _useState4[1];
 
-  var _useState5 = react.useState(),
+  var _useState5 = react.useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      forwardTo = _useState6[0],
-      setForwardTo = _useState6[1];
+      trackingFailed = _useState6[0],
+      setTrackingFailed = _useState6[1];
 
-  var _useContext2 = react.useContext(ClosableContext),
-      setClosable = _useContext2.setClosable;
+  var _useState7 = react.useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      forwardTo = _useState8[0],
+      setForwardTo = _useState8[1];
+
+  var _useContext3 = react.useContext(ClosableContext),
+      setClosable = _useContext3.setClosable;
 
   react.useEffect(function () {
     setTracking(track && !!track.endpoint);
@@ -70199,20 +70238,27 @@ var TrackingProvider = (function (props) {
     };
   };
 
-  var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+  var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
     attempt = parseInt(attempt || 1, 10);
     console.log('RETRY TRACKING ATTEMPT ', attempt);
 
     if (attempt < 3) {
       setTimeout(function () {
-        startTracking(transaction, afterBlock, attempt + 1);
+        startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
       }, 3000);
     } else {
       console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+      setTrackingFailed(true);
+
+      if (typeof errorCallback == 'function') {
+        errorCallback({
+          code: 'TRACKING_FAILED'
+        });
+      }
     }
   };
 
-  var startTracking = function startTracking(transaction, afterBlock, attempt) {
+  var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
     fetch(track.endpoint, {
       method: 'POST',
       body: JSON.stringify({
@@ -70220,23 +70266,24 @@ var TrackingProvider = (function (props) {
         transaction: transaction.id.toLowerCase(),
         sender: transaction.from.toLowerCase(),
         nonce: transaction.nonce,
-        after_block: afterBlock
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
       })
     }).then(function (response) {
       if (response.status == 200) {
         console.log('TRACKING INITIALIZED');
       } else {
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       }
     })["catch"](function (error) {
       console.log('TRACKING FAILED', error);
-      retryStartTracking(transaction, afterBlock, attempt);
+      retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
     });
   };
 
-  var initializeTracking = function initializeTracking(transaction, afterBlock) {
+  var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
     openSocket(transaction);
-    startTracking(transaction, afterBlock);
+    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/react.createElement(TrackingContext.Provider, {
@@ -70244,7 +70291,8 @@ var TrackingProvider = (function (props) {
       tracking: tracking,
       initializeTracking: initializeTracking,
       forward: forward,
-      forwardTo: forwardTo
+      forwardTo: forwardTo,
+      trackingFailed: trackingFailed
     }
   }, props.children);
 });

package/dist/esm/index.js

@@ -1652,7 +1652,8 @@ var ErrorProvider = (function (props) {
   } else {
     return /*#__PURE__*/React.createElement(ErrorContext.Provider, {
       value: {
-        setError: setErrorFromChildren
+        setError: setErrorFromChildren,
+        errorCallback: props.errorCallback
       }
     }, /*#__PURE__*/React.createElement(ErrorBoundary, {
       setError: setErrorFromChildren
@@ -1677,7 +1678,7 @@ var ButtonPrimaryStyle = (function (style) {
 });
 
 var CardStyle = (function (style) {
-  return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
+  return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
 });
 
 var DialogStyle = (function (style) {
@@ -1697,7 +1698,7 @@ var HeightStyle = (function () {
 });
 
 var IconStyle = (function (style) {
-  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
 });
 
 var ImageStyle = (function (style) {
@@ -1765,7 +1766,7 @@ var TokenAmountStyle = (function () {
 });
 
 var TokenImageStyle = (function (style) {
-  return "\n\n    .TokenImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
+  return "\n\n    .TokenImage img {\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
 });
 
 var TooltipStyle = (function (style) {
@@ -2218,7 +2219,7 @@ var NoPaymentMethodFoundDialog = (function () {
       className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/React.createElement("strong", {
       className: "FontSizeM"
-    }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+    }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
     footer: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
     }, /*#__PURE__*/React.createElement("button", {
@@ -2333,7 +2334,7 @@ var PaymentProvider = (function (props) {
                 }
               })).then(function (sentTransaction) {
                 if (tracking) {
-                  initializeTracking(sentTransaction, currentBlock);
+                  initializeTracking(sentTransaction, currentBlock, payment.route);
                 }
 
                 setTransaction(sentTransaction);
@@ -3048,6 +3049,19 @@ var DonationOverviewSkeleton = (function (props) {
   });
 });
 
+var AlertIcon = (function (props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "AlertIcon Icon " + props.className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+  }));
+});
+
 var Checkmark = (function (props) {
   return /*#__PURE__*/React.createElement("svg", {
     className: "Checkmark Icon " + props.className,
@@ -3125,7 +3139,8 @@ var Footer = (function () {
   var _useContext3 = useContext(TrackingContext),
       tracking = _useContext3.tracking,
       forward = _useContext3.forward,
-      forwardTo = _useContext3.forwardTo;
+      forwardTo = _useContext3.forwardTo,
+      trackingFailed = _useContext3.trackingFailed;
 
   var _useContext4 = useContext(PaymentContext),
       payment = _useContext4.payment,
@@ -3150,7 +3165,7 @@ var Footer = (function () {
     }
 
     if (forward) {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/React.createElement("div", {
         className: "CardImage"
@@ -3166,21 +3181,37 @@ var Footer = (function () {
         className: "Opacity05"
       }, "Payment confirmation has been stored")))));
     } else {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-        className: "Card transparent small disabled"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "CardImage"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "TextCenter"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "Loading Icon"
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "CardBody"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "CardBodyWrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "Opacity05"
-      }, "Storing payment confirmation")))));
+      if (trackingFailed) {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "Card transparent small"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/React.createElement(AlertIcon, {
+          className: "small"
+        }))), /*#__PURE__*/React.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React.createElement("div", null, "Tracking payment failed!")))));
+      } else {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "Card transparent small disabled"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "Loading Icon"
+        }))), /*#__PURE__*/React.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "Opacity05"
+        }, "Storing payment confirmation")))));
+      }
     }
   };
 
@@ -3507,8 +3538,11 @@ var DonationStack = (function (props) {
 });
 
 var TrackingProvider = (function (props) {
-  var _useContext = useContext(ConfigurationContext),
-      track = _useContext.track;
+  var _useContext = useContext(ErrorContext),
+      errorCallback = _useContext.errorCallback;
+
+  var _useContext2 = useContext(ConfigurationContext),
+      track = _useContext2.track;
 
   var _useState = useState(track && !!track.endpoint),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3520,13 +3554,18 @@ var TrackingProvider = (function (props) {
       forward = _useState4[0],
       setForward = _useState4[1];
 
-  var _useState5 = useState(),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      forwardTo = _useState6[0],
-      setForwardTo = _useState6[1];
+      trackingFailed = _useState6[0],
+      setTrackingFailed = _useState6[1];
 
-  var _useContext2 = useContext(ClosableContext),
-      setClosable = _useContext2.setClosable;
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      forwardTo = _useState8[0],
+      setForwardTo = _useState8[1];
+
+  var _useContext3 = useContext(ClosableContext),
+      setClosable = _useContext3.setClosable;
 
   useEffect(function () {
     setTracking(track && !!track.endpoint);
@@ -3576,20 +3615,27 @@ var TrackingProvider = (function (props) {
     };
   };
 
-  var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+  var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
     attempt = parseInt(attempt || 1, 10);
     console.log('RETRY TRACKING ATTEMPT ', attempt);
 
     if (attempt < 3) {
       setTimeout(function () {
-        startTracking(transaction, afterBlock, attempt + 1);
+        startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
       }, 3000);
     } else {
       console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+      setTrackingFailed(true);
+
+      if (typeof errorCallback == 'function') {
+        errorCallback({
+          code: 'TRACKING_FAILED'
+        });
+      }
     }
   };
 
-  var startTracking = function startTracking(transaction, afterBlock, attempt) {
+  var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
     fetch(track.endpoint, {
       method: 'POST',
       body: JSON.stringify({
@@ -3597,23 +3643,24 @@ var TrackingProvider = (function (props) {
         transaction: transaction.id.toLowerCase(),
         sender: transaction.from.toLowerCase(),
         nonce: transaction.nonce,
-        after_block: afterBlock
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
       })
     }).then(function (response) {
       if (response.status == 200) {
         console.log('TRACKING INITIALIZED');
       } else {
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       }
     })["catch"](function (error) {
       console.log('TRACKING FAILED', error);
-      retryStartTracking(transaction, afterBlock, attempt);
+      retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
     });
   };
 
-  var initializeTracking = function initializeTracking(transaction, afterBlock) {
+  var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
     openSocket(transaction);
-    startTracking(transaction, afterBlock);
+    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/React.createElement(TrackingContext.Provider, {
@@ -3621,7 +3668,8 @@ var TrackingProvider = (function (props) {
       tracking: tracking,
       initializeTracking: initializeTracking,
       forward: forward,
-      forwardTo: forwardTo
+      forwardTo: forwardTo,
+      trackingFailed: trackingFailed
     }
   }, props.children);
 });

package/dist/umd/index.bundle.js

@@ -49457,7 +49457,8 @@
     } else {
       return /*#__PURE__*/react.createElement(ErrorContext.Provider, {
         value: {
-          setError: setErrorFromChildren
+          setError: setErrorFromChildren,
+          errorCallback: props.errorCallback
         }
       }, /*#__PURE__*/react.createElement(ErrorBoundary, {
         setError: setErrorFromChildren
@@ -49482,7 +49483,7 @@
   });
 
   var CardStyle = (function (style) {
-    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
+    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
   });
 
   var DialogStyle = (function (style) {
@@ -49502,7 +49503,7 @@
   });
 
   var IconStyle = (function (style) {
-    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
   });
 
   var ImageStyle = (function (style) {
@@ -49570,7 +49571,7 @@
   });
 
   var TokenImageStyle = (function (style) {
-    return "\n\n    .TokenImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
+    return "\n\n    .TokenImage img {\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
   });
 
   var TooltipStyle = (function (style) {
@@ -62377,7 +62378,7 @@
         className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/react.createElement("strong", {
         className: "FontSizeM"
-      }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+      }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
       footer: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/react.createElement("button", {
@@ -62492,7 +62493,7 @@
                   }
                 })).then(function (sentTransaction) {
                   if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock);
+                    initializeTracking(sentTransaction, currentBlock, payment.route);
                   }
 
                   setTransaction(sentTransaction);
@@ -69677,6 +69678,19 @@
     });
   });
 
+  var AlertIcon = (function (props) {
+    return /*#__PURE__*/react.createElement("svg", {
+      className: "AlertIcon Icon " + props.className,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 20 20"
+    }, /*#__PURE__*/react.createElement("path", {
+      d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+    }));
+  });
+
   var Checkmark = (function (props) {
     return /*#__PURE__*/react.createElement("svg", {
       className: "Checkmark Icon " + props.className,
@@ -69754,7 +69768,8 @@
     var _useContext3 = react.useContext(TrackingContext),
         tracking = _useContext3.tracking,
         forward = _useContext3.forward,
-        forwardTo = _useContext3.forwardTo;
+        forwardTo = _useContext3.forwardTo,
+        trackingFailed = _useContext3.trackingFailed;
 
     var _useContext4 = react.useContext(PaymentContext),
         payment = _useContext4.payment,
@@ -69779,7 +69794,7 @@
       }
 
       if (forward) {
-        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
           className: "Card transparent small disabled"
         }, /*#__PURE__*/react.createElement("div", {
           className: "CardImage"
@@ -69795,21 +69810,37 @@
           className: "Opacity05"
         }, "Payment confirmation has been stored")))));
       } else {
-        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
-          className: "Card transparent small disabled"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "CardImage"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "TextCenter"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "Loading Icon"
-        }))), /*#__PURE__*/react.createElement("div", {
-          className: "CardBody"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "CardBodyWrapper"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "Opacity05"
-        }, "Storing payment confirmation")))));
+        if (trackingFailed) {
+          return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+            className: "Card transparent small"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/react.createElement(AlertIcon, {
+            className: "small"
+          }))), /*#__PURE__*/react.createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/react.createElement("div", null, "Tracking payment failed!")))));
+        } else {
+          return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+            className: "Card transparent small disabled"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "Loading Icon"
+          }))), /*#__PURE__*/react.createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "Opacity05"
+          }, "Storing payment confirmation")))));
+        }
       }
     };
 
@@ -70136,8 +70167,11 @@
   });
 
   var TrackingProvider = (function (props) {
-    var _useContext = react.useContext(ConfigurationContext),
-        track = _useContext.track;
+    var _useContext = react.useContext(ErrorContext),
+        errorCallback = _useContext.errorCallback;
+
+    var _useContext2 = react.useContext(ConfigurationContext),
+        track = _useContext2.track;
 
     var _useState = react.useState(track && !!track.endpoint),
         _useState2 = _slicedToArray(_useState, 2),
@@ -70149,13 +70183,18 @@
         forward = _useState4[0],
         setForward = _useState4[1];
 
-    var _useState5 = react.useState(),
+    var _useState5 = react.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        forwardTo = _useState6[0],
-        setForwardTo = _useState6[1];
+        trackingFailed = _useState6[0],
+        setTrackingFailed = _useState6[1];
 
-    var _useContext2 = react.useContext(ClosableContext),
-        setClosable = _useContext2.setClosable;
+    var _useState7 = react.useState(),
+        _useState8 = _slicedToArray(_useState7, 2),
+        forwardTo = _useState8[0],
+        setForwardTo = _useState8[1];
+
+    var _useContext3 = react.useContext(ClosableContext),
+        setClosable = _useContext3.setClosable;
 
     react.useEffect(function () {
       setTracking(track && !!track.endpoint);
@@ -70205,20 +70244,27 @@
       };
     };
 
-    var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+    var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
       attempt = parseInt(attempt || 1, 10);
       console.log('RETRY TRACKING ATTEMPT ', attempt);
 
       if (attempt < 3) {
         setTimeout(function () {
-          startTracking(transaction, afterBlock, attempt + 1);
+          startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
         }, 3000);
       } else {
         console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+        setTrackingFailed(true);
+
+        if (typeof errorCallback == 'function') {
+          errorCallback({
+            code: 'TRACKING_FAILED'
+          });
+        }
       }
     };
 
-    var startTracking = function startTracking(transaction, afterBlock, attempt) {
+    var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
       fetch(track.endpoint, {
         method: 'POST',
         body: JSON.stringify({
@@ -70226,23 +70272,24 @@
           transaction: transaction.id.toLowerCase(),
           sender: transaction.from.toLowerCase(),
           nonce: transaction.nonce,
-          after_block: afterBlock
+          after_block: afterBlock,
+          to_token: paymentRoute.toToken.address
         })
       }).then(function (response) {
         if (response.status == 200) {
           console.log('TRACKING INITIALIZED');
         } else {
-          retryStartTracking(transaction, afterBlock, attempt);
+          retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
         }
       })["catch"](function (error) {
         console.log('TRACKING FAILED', error);
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       });
     };
 
-    var initializeTracking = function initializeTracking(transaction, afterBlock) {
+    var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
       openSocket(transaction);
-      startTracking(transaction, afterBlock);
+      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/react.createElement(TrackingContext.Provider, {
@@ -70250,7 +70297,8 @@
         tracking: tracking,
         initializeTracking: initializeTracking,
         forward: forward,
-        forwardTo: forwardTo
+        forwardTo: forwardTo,
+        trackingFailed: trackingFailed
       }
     }, props.children);
   });

package/dist/umd/index.js

@@ -1647,7 +1647,8 @@
     } else {
       return /*#__PURE__*/React__default["default"].createElement(ErrorContext.Provider, {
         value: {
-          setError: setErrorFromChildren
+          setError: setErrorFromChildren,
+          errorCallback: props.errorCallback
         }
       }, /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
         setError: setErrorFromChildren
@@ -1672,7 +1673,7 @@
   });
 
   var CardStyle = (function (style) {
-    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
+    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 0.8rem;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 0.5rem;\n      min-height: 4.78rem;\n      padding: 1rem 0.6rem;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 4.3rem;\n      padding: 0.4rem 1.3rem;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 1.2rem;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 1rem;\n    }\n\n    .Card.Row .CardImage {\n      width: 2.5rem;\n    }\n\n    .Card.Row .CardImage img {\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.5rem 0.5rem;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 1.7rem;\n    }\n\n    .CardImage.small img {\n      height: 1.4rem;\n      width: 1.4rem;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 0.4rem;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 3.6rem;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 1.4rem;\n      padding-left: 0.6rem;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 0.9rem;\n      color: rgb(150,150,150);\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 1.3rem;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText small {\n      font-size: 1.26rem;\n      color: rgb(150,150,150);\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
   });
 
   var DialogStyle = (function (style) {
@@ -1692,7 +1693,7 @@
   });
 
   var IconStyle = (function (style) {
-    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
   });
 
   var ImageStyle = (function (style) {
@@ -1760,7 +1761,7 @@
   });
 
   var TokenImageStyle = (function (style) {
-    return "\n\n    .TokenImage img {\n      background: white;\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: rgba(0,0,0,0.1);\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
+    return "\n\n    .TokenImage img {\n      border-radius: 99rem;\n      border: 1px solid white;\n      background: white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 2.8rem;\n      position: relative;\n      vertical-align: middle;\n      width: 2.8rem;\n    }\n\n    .TokenImage.medium img {\n      height: 5.8rem;\n      width: 5.8rem;\n    }\n  ";
   });
 
   var TooltipStyle = (function (style) {
@@ -2213,7 +2214,7 @@
         className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM"
-      }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+      }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
       footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default["default"].createElement("button", {
@@ -2328,7 +2329,7 @@
                   }
                 })).then(function (sentTransaction) {
                   if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock);
+                    initializeTracking(sentTransaction, currentBlock, payment.route);
                   }
 
                   setTransaction(sentTransaction);
@@ -3043,6 +3044,19 @@
     });
   });
 
+  var AlertIcon = (function (props) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
+      className: "AlertIcon Icon " + props.className,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 20 20"
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+    }));
+  });
+
   var Checkmark = (function (props) {
     return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "Checkmark Icon " + props.className,
@@ -3120,7 +3134,8 @@
     var _useContext3 = React.useContext(TrackingContext),
         tracking = _useContext3.tracking,
         forward = _useContext3.forward,
-        forwardTo = _useContext3.forwardTo;
+        forwardTo = _useContext3.forwardTo,
+        trackingFailed = _useContext3.trackingFailed;
 
     var _useContext4 = React.useContext(PaymentContext),
         payment = _useContext4.payment,
@@ -3145,7 +3160,7 @@
       }
 
       if (forward) {
-        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
+        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Card transparent small disabled"
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "CardImage"
@@ -3161,21 +3176,37 @@
           className: "Opacity05"
         }, "Payment confirmation has been stored")))));
       } else {
-        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
-          className: "Card transparent small disabled"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "CardImage"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "TextCenter"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "Loading Icon"
-        }))), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "CardBody"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "Opacity05"
-        }, "Storing payment confirmation")))));
+        if (trackingFailed) {
+          return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Card transparent small"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/React__default["default"].createElement(AlertIcon, {
+            className: "small"
+          }))), /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/React__default["default"].createElement("div", null, "Tracking payment failed!")))));
+        } else {
+          return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Card transparent small disabled"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Loading Icon"
+          }))), /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Opacity05"
+          }, "Storing payment confirmation")))));
+        }
       }
     };
 
@@ -3502,8 +3533,11 @@
   });
 
   var TrackingProvider = (function (props) {
-    var _useContext = React.useContext(ConfigurationContext),
-        track = _useContext.track;
+    var _useContext = React.useContext(ErrorContext),
+        errorCallback = _useContext.errorCallback;
+
+    var _useContext2 = React.useContext(ConfigurationContext),
+        track = _useContext2.track;
 
     var _useState = React.useState(track && !!track.endpoint),
         _useState2 = _slicedToArray(_useState, 2),
@@ -3515,13 +3549,18 @@
         forward = _useState4[0],
         setForward = _useState4[1];
 
-    var _useState5 = React.useState(),
+    var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        forwardTo = _useState6[0],
-        setForwardTo = _useState6[1];
+        trackingFailed = _useState6[0],
+        setTrackingFailed = _useState6[1];
 
-    var _useContext2 = React.useContext(ClosableContext),
-        setClosable = _useContext2.setClosable;
+    var _useState7 = React.useState(),
+        _useState8 = _slicedToArray(_useState7, 2),
+        forwardTo = _useState8[0],
+        setForwardTo = _useState8[1];
+
+    var _useContext3 = React.useContext(ClosableContext),
+        setClosable = _useContext3.setClosable;
 
     React.useEffect(function () {
       setTracking(track && !!track.endpoint);
@@ -3571,20 +3610,27 @@
       };
     };
 
-    var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+    var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
       attempt = parseInt(attempt || 1, 10);
       console.log('RETRY TRACKING ATTEMPT ', attempt);
 
       if (attempt < 3) {
         setTimeout(function () {
-          startTracking(transaction, afterBlock, attempt + 1);
+          startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
         }, 3000);
       } else {
         console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+        setTrackingFailed(true);
+
+        if (typeof errorCallback == 'function') {
+          errorCallback({
+            code: 'TRACKING_FAILED'
+          });
+        }
       }
     };
 
-    var startTracking = function startTracking(transaction, afterBlock, attempt) {
+    var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
       fetch(track.endpoint, {
         method: 'POST',
         body: JSON.stringify({
@@ -3592,23 +3638,24 @@
           transaction: transaction.id.toLowerCase(),
           sender: transaction.from.toLowerCase(),
           nonce: transaction.nonce,
-          after_block: afterBlock
+          after_block: afterBlock,
+          to_token: paymentRoute.toToken.address
         })
       }).then(function (response) {
         if (response.status == 200) {
           console.log('TRACKING INITIALIZED');
         } else {
-          retryStartTracking(transaction, afterBlock, attempt);
+          retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
         }
       })["catch"](function (error) {
         console.log('TRACKING FAILED', error);
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       });
     };
 
-    var initializeTracking = function initializeTracking(transaction, afterBlock) {
+    var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
       openSocket(transaction);
-      startTracking(transaction, afterBlock);
+      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(TrackingContext.Provider, {
@@ -3616,7 +3663,8 @@
         tracking: tracking,
         initializeTracking: initializeTracking,
         forward: forward,
-        forwardTo: forwardTo
+        forwardTo: forwardTo,
+        trackingFailed: trackingFailed
       }
     }, props.children);
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.5.3",
+  "version": "6.7.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",