@depay/widgets 6.9.2 → 6.12.0

package/dist/umd/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image'), require('@depay/web3-blockchains')) :
-  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image', '@depay/web3-blockchains'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage, global.Web3Blockchains));
-})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, Slider, reactTokenImage, web3Blockchains) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-blockchains'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image')) :
+  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-blockchains', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Blockchains, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage));
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Blockchains, web3Payments, Slider, reactTokenImage) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1673,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      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) {
@@ -1999,7 +1999,7 @@
         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));
@@ -2027,7 +2027,7 @@
         account = _useContext.account;
 
     var _useContext2 = React.useContext(ConfigurationContext),
-        configuredAmount = _useContext2.amount;
+        amountConfiguration = _useContext2.amount;
 
     var _useContext3 = React.useContext(ConversionRateContext),
         conversionRate = _useContext3.conversionRate;
@@ -2040,7 +2040,7 @@
         acceptWithAmount = _useState4[0],
         setAcceptWithAmount = _useState4[1];
 
-    var _useState5 = React.useState(amountsMissing ? _typeof(configuredAmount) == "object" && configuredAmount.start ? configuredAmount.start : 1 : null),
+    var _useState5 = React.useState(amountsMissing ? _typeof(amountConfiguration) == "object" && amountConfiguration.start ? amountConfiguration.start : 1 : null),
         _useState6 = _slicedToArray(_useState5, 2),
         amount = _useState6[0],
         setAmount = _useState6[1];
@@ -2058,51 +2058,83 @@
     React.useEffect(function () {
       setAmountsMissing(configurationsMissAmounts(props.accept));
     }, [props.accept]);
-    React.useEffect(function () {
-      if (amountsMissing && account && conversionRate) {
-        Promise.all(props.accept.map(function (configuration) {
-          return web3Exchanges.route({
-            blockchain: configuration.blockchain,
-            tokenIn: web3Constants.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 web3Tokens.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 web3Exchanges.route({
+              blockchain: configuration.blockchain,
+              tokenIn: web3Constants.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 web3Tokens.Token.readable({
+                blockchain: props.accept[index].blockchain,
+                amount: routes[0].amountOut,
+                address: routes[0].tokenOut
+              });
+            })).then(resolve)["catch"](setError);
           })["catch"](setError);
+        }
+      });
+    };
+
+    React.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]);
     React.useEffect(function () {
       if (amountsMissing && maxRoute) {
         maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-          if (maxRoute.fromToken.address == web3Constants.CONSTANTS[maxRoute.blockchain].USD) {
+          if (amountConfiguration && amountConfiguration.token) {
+            web3Exchanges.route({
+              blockchain: maxRoute.blockchain,
+              tokenIn: maxRoute.fromToken.address,
+              tokenOut: maxRoute.toToken.address,
+              amountIn: parseFloat(readableMaxAmount),
+              fromAddress: account,
+              toAddress: account
+            }).then(function (routes) {
+              web3Tokens.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_js.Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
+                setMaxAmount(maxAmount > 10 ? Math.round(maxAmount) : round(maxAmount));
+              })["catch"](setError);
+            })["catch"](setError);
+          } else if (maxRoute.fromToken.address == web3Constants.CONSTANTS[maxRoute.blockchain].USD) {
             var _maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).mul(conversionRate).toString());
 
             setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount) : _maxAmount);
@@ -2193,6 +2225,8 @@
 
   var DonationRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
+  var NavigateContext = /*#__PURE__*/React__default["default"].createContext();
+
   var QuestionsGraphic = "data:image/png;base64,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";
 
   var NoPaymentMethodFoundDialog = (function () {
@@ -2228,7 +2262,9 @@
 
   var PaymentRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var TrackingContext = /*#__PURE__*/React__default["default"].createContext();
+  var PaymentTrackingContext = /*#__PURE__*/React__default["default"].createContext();
+
+  var TransactionTrackingContext = /*#__PURE__*/React__default["default"].createContext();
 
   var PaymentProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
@@ -2236,8 +2272,8 @@
 
     var _useContext2 = React.useContext(ConfigurationContext),
         _sent = _useContext2.sent,
-        _confirmed = _useContext2.confirmed,
-        _failed = _useContext2.failed;
+        confirmed = _useContext2.confirmed,
+        failed = _useContext2.failed;
 
     var _useContext3 = React.useContext(PaymentRoutingContext),
         selectedRoute = _useContext3.selectedRoute;
@@ -2253,13 +2289,20 @@
     var _useContext6 = React.useContext(UpdatableContext),
         setUpdatable = _useContext6.setUpdatable;
 
-    var _useContext7 = React.useContext(WalletContext),
-        wallet = _useContext7.wallet;
+    var _useContext7 = React.useContext(NavigateContext),
+        navigate = _useContext7.navigate;
+
+    var _useContext8 = React.useContext(WalletContext),
+        wallet = _useContext8.wallet;
 
-    var _useContext8 = React.useContext(TrackingContext),
-        release = _useContext8.release,
-        tracking = _useContext8.tracking,
-        initializeTracking = _useContext8.initializeTracking;
+    var _useContext9 = React.useContext(PaymentTrackingContext),
+        release = _useContext9.release,
+        tracking = _useContext9.tracking,
+        initializeTracking = _useContext9.initializeTracking;
+
+    var _useContext10 = React.useContext(TransactionTrackingContext),
+        foundTransaction = _useContext10.foundTransaction,
+        initializeTransactionTracking = _useContext10.initializeTracking;
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2281,52 +2324,57 @@
         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 web3Client.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);
@@ -2344,7 +2392,7 @@
                   }
                 });
 
-              case 8:
+              case 7:
               case "end":
                 return _context.stop();
             }
@@ -2352,8 +2400,8 @@
         }, _callee);
       }));
 
-      return function pay(_x) {
-        return _ref2.apply(this, arguments);
+      return function pay() {
+        return _ref.apply(this, arguments);
       };
     }();
 
@@ -2381,15 +2429,36 @@
         setPaymentState('confirmed');
       }
     }, [release]);
+    React.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: web3Blockchains.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]);
     React.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,
@@ -2500,6 +2569,7 @@
         whitelist: props.whitelist,
         blacklist: props.blacklist,
         event: props.event,
+        fee: props.fee,
         apiKey: apiKey
       }).then(function (routes) {
         if (routes.length == 0) {
@@ -2740,7 +2810,7 @@
   });
 
   var format = (function (input) {
-    var _float = parseFloat(input);
+    var _float = round(input);
 
     var floatToString = _float.toString();
 
@@ -2774,13 +2844,14 @@
 
     var _useContext5 = React.useContext(ConfigurationContext),
         currencyCode = _useContext5.currencyCode,
-        configuredAmount = _useContext5.amount;
+        amountConfiguration = _useContext5.amount;
 
     var _useContext6 = React.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)));
@@ -2822,7 +2893,7 @@
         className: "LineHeightL FontSizeL TextCenter"
       }, "Change Amount"), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "FontSizeL TextCenter FontWeightBold"
-      }, /*#__PURE__*/React__default["default"].createElement("strong", null, currencyCode))),
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, displayedCurrencyCode))),
       body: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "MaxHeight PaddingTopXS"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3125,13 +3196,14 @@
 
   var Footer = (function () {
     var _useContext = React.useContext(ConfigurationContext),
-        currencyCode = _useContext.currencyCode;
+        currencyCode = _useContext.currencyCode,
+        configuredAmount = _useContext.amount;
 
     var _useContext2 = React.useContext(ChangableAmountContext),
         amount = _useContext2.amount;
         _useContext2.amountsMissing;
 
-    var _useContext3 = React.useContext(TrackingContext),
+    var _useContext3 = React.useContext(PaymentTrackingContext),
         tracking = _useContext3.tracking,
         release = _useContext3.release,
         forwardTo = _useContext3.forwardTo,
@@ -3148,8 +3220,8 @@
     var _useContext5 = React.useContext(PaymentValueContext),
         paymentValue = _useContext5.paymentValue;
 
-    var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext),
-        navigate = _useContext6.navigate;
+    var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext);
+        _useContext6.navigate;
 
     var _useContext7 = React.useContext(ClosableContext),
         close = _useContext7.close;
@@ -3279,6 +3351,19 @@
     };
 
     var mainAction = function mainAction() {
+      var displayedAmount;
+
+      if (amount && (configuredAmount == undefined || configuredAmount.token != true)) {
+        displayedAmount = new localCurrency.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__default["default"].createElement("button", {
           className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
@@ -3287,14 +3372,9 @@
               return;
             }
 
-            pay({
-              navigate: navigate
-            });
+            pay();
           }
-        }, "Pay ", amount ? new localCurrency.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__default["default"].createElement("a", {
           className: "ButtonPrimary",
@@ -3516,7 +3596,11 @@
         open = _useContext.open,
         close = _useContext.close;
 
+    var _useContext2 = React.useContext(NavigateContext),
+        setNavigate = _useContext2.setNavigate;
+
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      setNavigate: setNavigate,
       open: open,
       close: close,
       start: "DonationOverview",
@@ -3532,7 +3616,28 @@
     });
   });
 
-  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__default["default"].createElement(NavigateContext.Provider, {
+      value: {
+        navigate: navigate,
+        setNavigate: setNavigate
+      }
+    }, props.children);
+  });
+
+  var PaymentTrackingProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
         errorCallback = _useContext.errorCallback;
 
@@ -3626,14 +3731,14 @@
 
     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') {
@@ -3648,6 +3753,9 @@
       if (track.endpoint) {
         return fetch(track.endpoint, {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
           body: JSON.stringify(payment)
         });
       } else if (track.method) {
@@ -3667,12 +3775,12 @@
         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);
       });
     };
@@ -3709,6 +3817,9 @@
       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) {
@@ -3737,7 +3848,7 @@
       startTracking(transaction, afterBlock, paymentRoute);
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(TrackingContext.Provider, {
+    return /*#__PURE__*/React__default["default"].createElement(PaymentTrackingContext.Provider, {
       value: {
         tracking: tracking,
         initializeTracking: initializeTracking,
@@ -3748,6 +3859,134 @@
     }, props.children);
   });
 
+  var TransactionTrackingProvider = (function (props) {
+    var _useState = React.useState(),
+        _useState2 = _slicedToArray(_useState, 2),
+        givenTransaction = _useState2[0],
+        setGivenTransaction = _useState2[1];
+
+    var _useState3 = React.useState(),
+        _useState4 = _slicedToArray(_useState3, 2),
+        foundTransaction = _useState4[0],
+        setFoundTransaction = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        polling = _useState6[0],
+        setPolling = _useState6[1];
+
+    var _useContext = React.useContext(ErrorContext);
+        _useContext.errorCallback;
+
+    React.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__default["default"].createElement(TransactionTrackingContext.Provider, {
+      value: {
+        initializeTracking: initializeTracking,
+        foundTransaction: foundTransaction
+      }
+    }, props.children);
+  });
+
   var WalletProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext);
         _useContext.setError;
@@ -3887,9 +4126,9 @@
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                     document: ensureDocument(document)
                   }, /*#__PURE__*/React__default["default"].createElement(DonationRoutingProvider, {
                     container: container,
@@ -3897,7 +4136,7 @@
                   }, /*#__PURE__*/React__default["default"].createElement(DonationStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -3948,6 +4187,9 @@
         return new Promise(function (resolve, reject) {
           fetch(endpoint, {
             method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
             body: JSON.stringify({
               message: message,
               signature: signature
@@ -4124,7 +4366,8 @@
       whitelist: props.whitelist,
       blacklist: props.blacklist,
       event: props.event,
-      setMaxRoute: setMaxRoute
+      setMaxRoute: setMaxRoute,
+      fee: props.fee
     }, props.children));
   });
 
@@ -4260,7 +4503,11 @@
         open = _useContext.open,
         close = _useContext.close;
 
+    var _useContext2 = React.useContext(NavigateContext),
+        setNavigate = _useContext2.setNavigate;
+
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      setNavigate: setNavigate,
       open: open,
       close: close,
       start: "PaymentOverview",
@@ -4317,12 +4564,12 @@
 
   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({
@@ -4352,7 +4599,8 @@
                       whitelist: whitelist,
                       blacklist: blacklist,
                       providers: providers,
-                      track: track
+                      track: track,
+                      fee: fee
                     }
                   }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                     unmount: unmount
@@ -4361,14 +4609,15 @@
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
                   }, /*#__PURE__*/React__default["default"].createElement(PaymentAmountRoutingProvider, {
                     accept: accept,
                     whitelist: whitelist,
                     blacklist: blacklist,
-                    event: event
-                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
+                    event: event,
+                    fee: fee
+                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                     document: ensureDocument(document)
                   }, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
                     container: container,
@@ -4376,7 +4625,7 @@
                   }, /*#__PURE__*/React__default["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -4521,7 +4770,8 @@
         _useContext.amount;
 
     var _useContext2 = React.useContext(ConfigurationContext),
-        tokenImage = _useContext2.tokenImage;
+        tokenImage = _useContext2.tokenImage,
+        amountConfiguration = _useContext2.amount;
 
     var _useContext3 = React.useContext(PaymentValueContext),
         paymentValue = _useContext3.paymentValue;
@@ -4543,7 +4793,7 @@
         setSalePerTokenValue = _useState2[1];
 
     React.useEffect(function () {
-      if (paymentValue) {
+      if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
         setSalePerTokenValue(new localCurrency.Currency({
           amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
           code: paymentValue.code
@@ -4651,7 +4901,11 @@
         open = _useContext.open,
         close = _useContext.close;
 
+    var _useContext2 = React.useContext(NavigateContext),
+        setNavigate = _useContext2.setNavigate;
+
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      setNavigate: setNavigate,
       open: open,
       close: close,
       start: "SaleOverview",
@@ -4762,9 +5016,9 @@
                     container: container,
                     connected: connected,
                     unmount: unmount
-                  }, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
                     accept: accept
-                  }, /*#__PURE__*/React__default["default"].createElement(TrackingProvider, {
+                  }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                     document: ensureDocument(document)
                   }, /*#__PURE__*/React__default["default"].createElement(SaleRoutingProvider, {
                     container: container,
@@ -4772,7 +5026,7 @@
                   }, /*#__PURE__*/React__default["default"].createElement(SaleStack, {
                     document: document,
                     container: container
-                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))));
+                  }), /*#__PURE__*/React__default["default"].createElement(PoweredBy, null))))))))))));
                 };
               });
               return _context2.abrupt("return", {