@depay/widgets 6.9.2 → 6.12.0

package/dist/esm/index.js

@@ -10,10 +10,10 @@ import { route } from '@depay/web3-exchanges';
 import { Token } from '@depay/web3-tokens';
 import { Currency } from '@depay/local-currency';
 import { setProviderEndpoints, request, provider } from '@depay/web3-client';
+import { Blockchain } from '@depay/web3-blockchains';
 import { route as route$1 } from '@depay/web3-payments';
 import Slider from 'react-rangeslider';
 import { TokenImage } from '@depay/react-token-image';
-import { Blockchain } from '@depay/web3-blockchains';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1678,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      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.1rem;\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) {
@@ -2004,7 +2004,7 @@ var round = (function (input) {
       focusToFixed = parseFloat(_float).toFixed(1).replace('.', '');
     }
 
-    if (focusToFixed.toString()[0] != 0 && focusToFixed.toString().length > 2) {
+    if (focusToFixed.toString()[0] != "0" && focusToFixed.toString().length > 2) {
       return parseInt(inputAsFloat.toFixed(0));
     } else {
       return parseFloat(digitsAfterDecimal.replace(/\d{3}$/, focusToFixed));
@@ -2032,7 +2032,7 @@ var ChangableAmountProvider = (function (props) {
       account = _useContext.account;
 
   var _useContext2 = useContext(ConfigurationContext),
-      configuredAmount = _useContext2.amount;
+      amountConfiguration = _useContext2.amount;
 
   var _useContext3 = useContext(ConversionRateContext),
       conversionRate = _useContext3.conversionRate;
@@ -2045,7 +2045,7 @@ var ChangableAmountProvider = (function (props) {
       acceptWithAmount = _useState4[0],
       setAcceptWithAmount = _useState4[1];
 
-  var _useState5 = useState(amountsMissing ? _typeof(configuredAmount) == "object" && configuredAmount.start ? configuredAmount.start : 1 : null),
+  var _useState5 = useState(amountsMissing ? _typeof(amountConfiguration) == "object" && amountConfiguration.start ? amountConfiguration.start : 1 : null),
       _useState6 = _slicedToArray(_useState5, 2),
       amount = _useState6[0],
       setAmount = _useState6[1];
@@ -2063,51 +2063,83 @@ var ChangableAmountProvider = (function (props) {
   useEffect(function () {
     setAmountsMissing(configurationsMissAmounts(props.accept));
   }, [props.accept]);
-  useEffect(function () {
-    if (amountsMissing && account && conversionRate) {
-      Promise.all(props.accept.map(function (configuration) {
-        return route({
-          blockchain: configuration.blockchain,
-          tokenIn: CONSTANTS[configuration.blockchain].USD,
-          amountIn: 1.00 / conversionRate * amount,
-          tokenOut: configuration.token,
-          fromAddress: account,
-          toAddress: account
-        });
-      })).then(function (routes) {
-        Promise.all(routes.map(function (routes, index) {
-          if (routes[0] == undefined) {
-            return;
-          }
 
-          return Token.readable({
-            blockchain: props.accept[index].blockchain,
-            amount: routes[0].amountOut,
-            address: routes[0].tokenOut
+  var getAmounts = function getAmounts() {
+    return new Promise(function (resolve, reject) {
+      if (amountConfiguration && amountConfiguration.token) {
+        resolve(props.accept.map(function () {
+          return amount;
+        }));
+      } else {
+        Promise.all(props.accept.map(function (configuration) {
+          return route({
+            blockchain: configuration.blockchain,
+            tokenIn: CONSTANTS[configuration.blockchain].USD,
+            amountIn: 1.00 / conversionRate * amount,
+            tokenOut: configuration.token,
+            fromAddress: account,
+            toAddress: account
           });
-        })).then(function (amounts) {
-          setAcceptWithAmount(props.accept.map(function (configuration, index) {
-            if (amounts[index] == undefined) {
+        })).then(function (routes) {
+          Promise.all(routes.map(function (routes, index) {
+            if (routes[0] == undefined) {
               return;
             }
 
-            return {
-              blockchain: configuration.blockchain,
-              amount: round(amounts[index]),
-              token: configuration.token,
-              receiver: configuration.receiver || account
-            };
-          }).filter(function (configuration) {
-            return !!configuration;
-          }));
+            return Token.readable({
+              blockchain: props.accept[index].blockchain,
+              amount: routes[0].amountOut,
+              address: routes[0].tokenOut
+            });
+          })).then(resolve)["catch"](setError);
         })["catch"](setError);
+      }
+    });
+  };
+
+  useEffect(function () {
+    if (amountsMissing && account && conversionRate) {
+      getAmounts().then(function (amounts) {
+        setAcceptWithAmount(props.accept.map(function (configuration, index) {
+          if (amounts[index] == undefined) {
+            return;
+          }
+
+          return {
+            blockchain: configuration.blockchain,
+            amount: round(amounts[index]),
+            token: configuration.token,
+            receiver: configuration.receiver || account
+          };
+        }).filter(function (configuration) {
+          return !!configuration;
+        }));
       })["catch"](setError);
     }
-  }, [account, conversionRate, amount]);
+  }, [amountsMissing, account, conversionRate, amount]);
   useEffect(function () {
     if (amountsMissing && maxRoute) {
       maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-        if (maxRoute.fromToken.address == CONSTANTS[maxRoute.blockchain].USD) {
+        if (amountConfiguration && amountConfiguration.token) {
+          route({
+            blockchain: maxRoute.blockchain,
+            tokenIn: maxRoute.fromToken.address,
+            tokenOut: maxRoute.toToken.address,
+            amountIn: parseFloat(readableMaxAmount),
+            fromAddress: account,
+            toAddress: account
+          }).then(function (routes) {
+            Token.readable({
+              amount: routes[0].amountOut,
+              blockchain: maxRoute.blockchain,
+              address: maxRoute.toToken.address
+            }).then(function (readableMaxAmount) {
+              var slippage = 1.01;
+              var maxAmount = parseFloat(new Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
+              setMaxAmount(maxAmount > 10 ? Math.round(maxAmount) : round(maxAmount));
+            })["catch"](setError);
+          })["catch"](setError);
+        } else if (maxRoute.fromToken.address == CONSTANTS[maxRoute.blockchain].USD) {
           var _maxAmount = parseFloat(new Decimal(readableMaxAmount).mul(conversionRate).toString());
 
           setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount) : _maxAmount);
@@ -2198,6 +2230,8 @@ var ConversionRateProvider = (function (props) {
 
 var DonationRoutingContext = /*#__PURE__*/React.createContext();
 
+var NavigateContext = /*#__PURE__*/React.createContext();
+
 var QuestionsGraphic = "data:image/png;base64,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";
 
 var NoPaymentMethodFoundDialog = (function () {
@@ -2233,7 +2267,9 @@ var PaymentContext = /*#__PURE__*/React.createContext();
 
 var PaymentRoutingContext = /*#__PURE__*/React.createContext();
 
-var TrackingContext = /*#__PURE__*/React.createContext();
+var PaymentTrackingContext = /*#__PURE__*/React.createContext();
+
+var TransactionTrackingContext = /*#__PURE__*/React.createContext();
 
 var PaymentProvider = (function (props) {
   var _useContext = useContext(ErrorContext),
@@ -2241,8 +2277,8 @@ var PaymentProvider = (function (props) {
 
   var _useContext2 = useContext(ConfigurationContext),
       _sent = _useContext2.sent,
-      _confirmed = _useContext2.confirmed,
-      _failed = _useContext2.failed;
+      confirmed = _useContext2.confirmed,
+      failed = _useContext2.failed;
 
   var _useContext3 = useContext(PaymentRoutingContext),
       selectedRoute = _useContext3.selectedRoute;
@@ -2258,13 +2294,20 @@ var PaymentProvider = (function (props) {
   var _useContext6 = useContext(UpdatableContext),
       setUpdatable = _useContext6.setUpdatable;
 
-  var _useContext7 = useContext(WalletContext),
-      wallet = _useContext7.wallet;
+  var _useContext7 = useContext(NavigateContext),
+      navigate = _useContext7.navigate;
 
-  var _useContext8 = useContext(TrackingContext),
-      release = _useContext8.release,
-      tracking = _useContext8.tracking,
-      initializeTracking = _useContext8.initializeTracking;
+  var _useContext8 = useContext(WalletContext),
+      wallet = _useContext8.wallet;
+
+  var _useContext9 = useContext(PaymentTrackingContext),
+      release = _useContext9.release,
+      tracking = _useContext9.tracking,
+      initializeTracking = _useContext9.initializeTracking;
+
+  var _useContext10 = useContext(TransactionTrackingContext),
+      foundTransaction = _useContext10.foundTransaction,
+      initializeTransactionTracking = _useContext10.initializeTracking;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2286,52 +2329,57 @@ var PaymentProvider = (function (props) {
       paymentState = _useState8[0],
       setPaymentState = _useState8[1];
 
+  var paymentConfirmed = function paymentConfirmed(transaction) {
+    if (tracking != true) {
+      setClosable(true);
+    }
+
+    setPaymentState('confirmed');
+
+    if (confirmed) {
+      confirmed(transaction);
+    }
+  };
+
+  var paymentFailed = function paymentFailed(transaction, error) {
+    if (failed) {
+      failed(transaction, error);
+    }
+
+    setPaymentState('initialized');
+    setClosable(true);
+    setUpdatable(true);
+    navigate('PaymentError');
+  };
+
   var pay = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
-      var navigate, currentBlock;
+    var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+      var currentBlock;
       return regenerator.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              navigate = _ref.navigate;
               setClosable(false);
               setPaymentState('paying');
               setUpdatable(false);
-              _context.next = 6;
+              _context.next = 5;
               return request({
                 blockchain: payment.route.transaction.blockchain,
                 method: 'latestBlockNumber'
               });
 
-            case 6:
+            case 5:
               currentBlock = _context.sent;
               wallet.sendTransaction(Object.assign({}, payment.route.transaction, {
                 sent: function sent(transaction) {
+                  initializeTransactionTracking(transaction, currentBlock);
+
                   if (_sent) {
                     _sent(transaction);
                   }
                 },
-                confirmed: function confirmed(transaction) {
-                  if (tracking != true) {
-                    setClosable(true);
-                  }
-
-                  setPaymentState('confirmed');
-
-                  if (_confirmed) {
-                    _confirmed(transaction);
-                  }
-                },
-                failed: function failed(transaction, error) {
-                  if (_failed) {
-                    _failed(transaction, error);
-                  }
-
-                  setPaymentState('initialized');
-                  setClosable(true);
-                  setUpdatable(true);
-                  navigate('PaymentError');
-                }
+                confirmed: paymentConfirmed,
+                failed: paymentFailed
               })).then(function (sentTransaction) {
                 if (tracking) {
                   initializeTracking(sentTransaction, currentBlock, payment.route);
@@ -2349,7 +2397,7 @@ var PaymentProvider = (function (props) {
                 }
               });
 
-            case 8:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -2357,8 +2405,8 @@ var PaymentProvider = (function (props) {
       }, _callee);
     }));
 
-    return function pay(_x) {
-      return _ref2.apply(this, arguments);
+    return function pay() {
+      return _ref.apply(this, arguments);
     };
   }();
 
@@ -2386,15 +2434,36 @@ var PaymentProvider = (function (props) {
       setPaymentState('confirmed');
     }
   }, [release]);
+  useEffect(function () {
+    if (foundTransaction && foundTransaction.id && foundTransaction.status) {
+      var newTransaction;
+
+      if (foundTransaction.id.toLowerCase() != transaction.id.toLowerCase()) {
+        newTransaction = Object.assign({}, transaction, {
+          id: foundTransaction.id,
+          url: Blockchain.findByName(transaction.blockchain).explorerUrlFor({
+            transaction: foundTransaction
+          })
+        });
+        setTransaction(newTransaction);
+      }
+
+      if (foundTransaction.status == 'success') {
+        paymentConfirmed(newTransaction || transaction);
+      } else if (foundTransaction.status == 'failed') {
+        paymentFailed(newTransaction || transaction);
+      }
+    }
+  }, [foundTransaction, transaction]);
   useEffect(function () {
     if (selectedRoute) {
       var fromToken = selectedRoute.fromToken;
       selectedRoute.transaction.params;
-      Promise.all([fromToken.name(), fromToken.symbol(), fromToken.readable(selectedRoute.fromAmount)]).then(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 3),
-            name = _ref4[0],
-            symbol = _ref4[1],
-            amount = _ref4[2];
+      Promise.all([fromToken.name(), fromToken.symbol(), fromToken.readable(selectedRoute.fromAmount)]).then(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 3),
+            name = _ref3[0],
+            symbol = _ref3[1],
+            amount = _ref3[2];
 
         setPayment({
           route: selectedRoute,
@@ -2505,6 +2574,7 @@ var PaymentRoutingProvider = (function (props) {
       whitelist: props.whitelist,
       blacklist: props.blacklist,
       event: props.event,
+      fee: props.fee,
       apiKey: apiKey
     }).then(function (routes) {
       if (routes.length == 0) {
@@ -2745,7 +2815,7 @@ var DonationRoutingProvider = (function (props) {
 });
 
 var format = (function (input) {
-  var _float = parseFloat(input);
+  var _float = round(input);
 
   var floatToString = _float.toString();
 
@@ -2779,13 +2849,14 @@ var ChangeAmountDialog = (function (props) {
 
   var _useContext5 = useContext(ConfigurationContext),
       currencyCode = _useContext5.currencyCode,
-      configuredAmount = _useContext5.amount;
+      amountConfiguration = _useContext5.amount;
 
   var _useContext6 = useContext(PaymentRoutingContext);
       _useContext6.allRoutes;
 
-  var min = _typeof(configuredAmount) == "object" && configuredAmount.min ? configuredAmount.min : 1;
-  var step = _typeof(configuredAmount) == "object" && configuredAmount.step ? configuredAmount.step : 1;
+  var min = _typeof(amountConfiguration) == "object" && amountConfiguration.min ? amountConfiguration.min : 1;
+  var step = _typeof(amountConfiguration) == "object" && amountConfiguration.step ? amountConfiguration.step : 1;
+  var displayedCurrencyCode = amountConfiguration != undefined && amountConfiguration.token ? null : currencyCode;
 
   var changeAmountAndGoBack = function changeAmountAndGoBack() {
     setAmount(toValidValue(parseFloat(inputAmount)));
@@ -2827,7 +2898,7 @@ var ChangeAmountDialog = (function (props) {
       className: "LineHeightL FontSizeL TextCenter"
     }, "Change Amount"), /*#__PURE__*/React.createElement("div", {
       className: "FontSizeL TextCenter FontWeightBold"
-    }, /*#__PURE__*/React.createElement("strong", null, currencyCode))),
+    }, /*#__PURE__*/React.createElement("strong", null, displayedCurrencyCode))),
     body: /*#__PURE__*/React.createElement("div", {
       className: "MaxHeight PaddingTopXS"
     }, /*#__PURE__*/React.createElement("div", {
@@ -3130,13 +3201,14 @@ var LoadingText = (function (props) {
 
 var Footer = (function () {
   var _useContext = useContext(ConfigurationContext),
-      currencyCode = _useContext.currencyCode;
+      currencyCode = _useContext.currencyCode,
+      configuredAmount = _useContext.amount;
 
   var _useContext2 = useContext(ChangableAmountContext),
       amount = _useContext2.amount;
       _useContext2.amountsMissing;
 
-  var _useContext3 = useContext(TrackingContext),
+  var _useContext3 = useContext(PaymentTrackingContext),
       tracking = _useContext3.tracking,
       release = _useContext3.release,
       forwardTo = _useContext3.forwardTo,
@@ -3153,8 +3225,8 @@ var Footer = (function () {
   var _useContext5 = useContext(PaymentValueContext),
       paymentValue = _useContext5.paymentValue;
 
-  var _useContext6 = useContext(NavigateStackContext),
-      navigate = _useContext6.navigate;
+  var _useContext6 = useContext(NavigateStackContext);
+      _useContext6.navigate;
 
   var _useContext7 = useContext(ClosableContext),
       close = _useContext7.close;
@@ -3284,6 +3356,19 @@ var Footer = (function () {
   };
 
   var mainAction = function mainAction() {
+    var displayedAmount;
+
+    if (amount && (configuredAmount == undefined || configuredAmount.token != true)) {
+      displayedAmount = new Currency({
+        amount: amount.toFixed(2),
+        code: currencyCode
+      }).toString();
+    } else if (paymentValue && paymentValue.toString().length) {
+      displayedAmount = paymentValue.toString();
+    } else {
+      displayedAmount = "".concat(payment.symbol, " ").concat(payment.amount);
+    }
+
     if (paymentState == 'initialized' || paymentState == 'approving') {
       return /*#__PURE__*/React.createElement("button", {
         className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
@@ -3292,14 +3377,9 @@ var Footer = (function () {
             return;
           }
 
-          pay({
-            navigate: navigate
-          });
+          pay();
         }
-      }, "Pay ", amount ? new Currency({
-        amount: amount.toFixed(2),
-        code: currencyCode
-      }).toString() : paymentValue.toString().length ? paymentValue.toString() : "".concat(payment.amount));
+      }, "Pay ", displayedAmount);
     } else if (paymentState == 'paying') {
       return /*#__PURE__*/React.createElement("a", {
         className: "ButtonPrimary",
@@ -3521,7 +3601,11 @@ var DonationStack = (function (props) {
       open = _useContext.open,
       close = _useContext.close;
 
+  var _useContext2 = useContext(NavigateContext),
+      setNavigate = _useContext2.setNavigate;
+
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigate: setNavigate,
     open: open,
     close: close,
     start: "DonationOverview",
@@ -3537,7 +3621,28 @@ var DonationStack = (function (props) {
   });
 });
 
-var TrackingProvider = (function (props) {
+var NavigateProvider = (function (props) {
+  var navigator;
+
+  var setNavigate = function setNavigate(_navigator) {
+    navigator = _navigator;
+  };
+
+  var navigate = function navigate(dialog) {
+    if (navigator) {
+      navigator(dialog);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(NavigateContext.Provider, {
+    value: {
+      navigate: navigate,
+      setNavigate: setNavigate
+    }
+  }, props.children);
+});
+
+var PaymentTrackingProvider = (function (props) {
   var _useContext = useContext(ErrorContext),
       errorCallback = _useContext.errorCallback;
 
@@ -3631,14 +3736,14 @@ var TrackingProvider = (function (props) {
 
   var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
     attempt = parseInt(attempt || 1, 10);
-    console.log('RETRY TRACKING ATTEMPT ', attempt);
+    console.log('RETRYING PAYMENT TRACKING ATTEMPT ', attempt);
 
     if (attempt < 3) {
       setTimeout(function () {
         startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
       }, 3000);
     } else {
-      console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+      console.log('PAYMENT TRACKING FAILED AFTER 3 ATTEMPTS!');
       setTrackingFailed(true);
 
       if (typeof errorCallback == 'function') {
@@ -3653,6 +3758,9 @@ var TrackingProvider = (function (props) {
     if (track.endpoint) {
       return fetch(track.endpoint, {
         method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
         body: JSON.stringify(payment)
       });
     } else if (track.method) {
@@ -3672,12 +3780,12 @@ var TrackingProvider = (function (props) {
       to_token: paymentRoute.toToken.address
     }).then(function (response) {
       if (response.status == 200) {
-        console.log('TRACKING INITIALIZED');
+        console.log('PAYMENT TRACKING INITIALIZED');
       } else {
         retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       }
     })["catch"](function (error) {
-      console.log('TRACKING FAILED', error);
+      console.log('PAYMENT TRACKING FAILED', error);
       retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
     });
   };
@@ -3714,6 +3822,9 @@ var TrackingProvider = (function (props) {
     if (track.poll.endpoint) {
       fetch(track.poll.endpoint, {
         method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
         body: JSON.stringify(payment)
       }).then(handleResponse);
     } else if (track.poll.method) {
@@ -3742,7 +3853,7 @@ var TrackingProvider = (function (props) {
     startTracking(transaction, afterBlock, paymentRoute);
   };
 
-  return /*#__PURE__*/React.createElement(TrackingContext.Provider, {
+  return /*#__PURE__*/React.createElement(PaymentTrackingContext.Provider, {
     value: {
       tracking: tracking,
       initializeTracking: initializeTracking,
@@ -3753,6 +3864,134 @@ var TrackingProvider = (function (props) {
   }, props.children);
 });
 
+var TransactionTrackingProvider = (function (props) {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      givenTransaction = _useState2[0],
+      setGivenTransaction = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      foundTransaction = _useState4[0],
+      setFoundTransaction = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      polling = _useState6[0],
+      setPolling = _useState6[1];
+
+  var _useContext = useContext(ErrorContext);
+      _useContext.errorCallback;
+
+  useEffect(function () {
+    if (polling) {
+      var pollingInterval = setInterval(function () {
+        fetch("https://api.depay.fi/v2/transactions/".concat(givenTransaction.blockchain, "/").concat(givenTransaction.from.toLowerCase(), "/").concat(givenTransaction.nonce)).then(function (response) {
+          if (response.status == 200) {
+            response.json().then(function (data) {
+              if (data.status != 'pending') {
+                setFoundTransaction({
+                  id: data.external_id,
+                  status: data.status
+                });
+                setPolling(false);
+              }
+            });
+          }
+        });
+      }, 5000);
+      return function () {
+        clearInterval(pollingInterval);
+      };
+    }
+  }, [polling]);
+
+  var createTracking = function createTracking(transaction, afterBlock, attempt) {
+    if (attempt > 3) {
+      console.log('TRANSACTION TRACKING FAILED AFTER 3 ATTEMPTS!');
+      return;
+    }
+
+    fetch('https://api.depay.fi/v2/transactions', {
+      method: 'POST',
+      headers: {
+        'X-Api-Key': apiKey,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        id: transaction.id,
+        after_block: afterBlock,
+        blockchain: transaction.blockchain,
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce
+      })
+    }).then(function (response) {
+      if (response.status == 200 || response.status == 201) {
+        console.log('TRANSACTION TRACKING INITIALIZED');
+      } else {
+        console.log('TRANSACTION TRACKING FAILED', response);
+        setTimeout(function () {
+          createTracking(transaction, afterBlock, attempt + 1);
+        }, 3000);
+      }
+    })["catch"](function (error) {
+      console.log('TRANSACTION TRACKING FAILED', error);
+      setTimeout(function () {
+        createTracking(transaction, afterBlock, attempt + 1);
+      }, 3000);
+    });
+  };
+
+  var openSocket = function openSocket(transaction) {
+    var socket = new WebSocket('wss://integrate.depay.fi/cable');
+
+    socket.onopen = function (event) {
+      var msg = {
+        command: 'subscribe',
+        identifier: JSON.stringify({
+          blockchain: transaction.blockchain,
+          sender: transaction.from.toLowerCase(),
+          nonce: transaction.nonce,
+          channel: 'TransactionChannel'
+        })
+      };
+      socket.send(JSON.stringify(msg));
+    };
+
+    socket.onclose = function (event) {};
+
+    socket.onmessage = function (event) {
+      var item = JSON.parse(event.data);
+
+      if (item.type === "ping") {
+        return;
+      }
+
+      if (item.message && item.message.status && item.message.status != 'pending') {
+        setFoundTransaction(item.message);
+      }
+    };
+
+    socket.onerror = function (error) {
+      console.log('WebSocket Error: ' + error);
+    };
+  };
+
+  var initializeTracking = function initializeTracking(transaction, afterBlock) {
+    setGivenTransaction(transaction);
+    createTracking(transaction, afterBlock, 1);
+    openSocket(transaction);
+    setPolling(true);
+  };
+
+  return /*#__PURE__*/React.createElement(TransactionTrackingContext.Provider, {
+    value: {
+      initializeTracking: initializeTracking,
+      foundTransaction: foundTransaction
+    }
+  }, props.children);
+});
+
 var WalletProvider = (function (props) {
   var _useContext = useContext(ErrorContext);
       _useContext.setError;
@@ -3892,9 +4131,9 @@ var Donation = /*#__PURE__*/function () {
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
                   accept: accept
-                }, /*#__PURE__*/React.createElement(TrackingProvider, {
+                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(DonationRoutingProvider, {
                   container: container,
@@ -3902,7 +4141,7 @@ var Donation = /*#__PURE__*/function () {
                 }, /*#__PURE__*/React.createElement(DonationStack, {
                   document: document,
                   container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))));
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
               };
             });
             return _context2.abrupt("return", {
@@ -3953,6 +4192,9 @@ var SignLoginDialog = (function (props) {
       return new Promise(function (resolve, reject) {
         fetch(endpoint, {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
           body: JSON.stringify({
             message: message,
             signature: signature
@@ -4129,7 +4371,8 @@ var PaymentAmountRoutingProvider = (function (props) {
     whitelist: props.whitelist,
     blacklist: props.blacklist,
     event: props.event,
-    setMaxRoute: setMaxRoute
+    setMaxRoute: setMaxRoute,
+    fee: props.fee
   }, props.children));
 });
 
@@ -4265,7 +4508,11 @@ var PaymentStack = (function (props) {
       open = _useContext.open,
       close = _useContext.close;
 
+  var _useContext2 = useContext(NavigateContext),
+      setNavigate = _useContext2.setNavigate;
+
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigate: setNavigate,
     open: open,
     close: close,
     start: "PaymentOverview",
@@ -4322,12 +4569,12 @@ var preflight$1 = /*#__PURE__*/function () {
 
 var Payment = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, document, unmount;
+    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, document = _ref3.document;
+            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight$1({
@@ -4357,7 +4604,8 @@ var Payment = /*#__PURE__*/function () {
                     whitelist: whitelist,
                     blacklist: blacklist,
                     providers: providers,
-                    track: track
+                    track: track,
+                    fee: fee
                   }
                 }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
                   unmount: unmount
@@ -4366,14 +4614,15 @@ var Payment = /*#__PURE__*/function () {
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
                   accept: accept
                 }, /*#__PURE__*/React.createElement(PaymentAmountRoutingProvider, {
                   accept: accept,
                   whitelist: whitelist,
                   blacklist: blacklist,
-                  event: event
-                }, /*#__PURE__*/React.createElement(TrackingProvider, {
+                  event: event,
+                  fee: fee
+                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(PaymentProvider, {
                   container: container,
@@ -4381,7 +4630,7 @@ var Payment = /*#__PURE__*/function () {
                 }, /*#__PURE__*/React.createElement(PaymentValueProvider, null, /*#__PURE__*/React.createElement(PaymentStack, {
                   document: document,
                   container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))))));
               };
             });
             return _context2.abrupt("return", {
@@ -4526,7 +4775,8 @@ var SaleOverviewDialog = (function (props) {
       _useContext.amount;
 
   var _useContext2 = useContext(ConfigurationContext),
-      tokenImage = _useContext2.tokenImage;
+      tokenImage = _useContext2.tokenImage,
+      amountConfiguration = _useContext2.amount;
 
   var _useContext3 = useContext(PaymentValueContext),
       paymentValue = _useContext3.paymentValue;
@@ -4548,7 +4798,7 @@ var SaleOverviewDialog = (function (props) {
       setSalePerTokenValue = _useState2[1];
 
   useEffect(function () {
-    if (paymentValue) {
+    if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
       setSalePerTokenValue(new Currency({
         amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
         code: paymentValue.code
@@ -4656,7 +4906,11 @@ var SaleStack = (function (props) {
       open = _useContext.open,
       close = _useContext.close;
 
+  var _useContext2 = useContext(NavigateContext),
+      setNavigate = _useContext2.setNavigate;
+
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigate: setNavigate,
     open: open,
     close: close,
     start: "SaleOverview",
@@ -4767,9 +5021,9 @@ var Sale = /*#__PURE__*/function () {
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
+                }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
                   accept: accept
-                }, /*#__PURE__*/React.createElement(TrackingProvider, {
+                }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React.createElement(SaleRoutingProvider, {
                   container: container,
@@ -4777,7 +5031,7 @@ var Sale = /*#__PURE__*/function () {
                 }, /*#__PURE__*/React.createElement(SaleStack, {
                   document: document,
                   container: container
-                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))));
+                }), /*#__PURE__*/React.createElement(PoweredBy, null))))))))))));
               };
             });
             return _context2.abrupt("return", {