@depay/widgets 4.2.2 → 5.0.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) :
+  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, depayReactDialogStack, depayWeb3Wallets, ReactDOM, depayReactShadowDom, ethers, depayWeb3Constants, decimal_js, depayWeb3Exchanges, depayWeb3Tokens, depayLocalCurrency, depayWeb3Client, depayWeb3Payments, Slider, depayReactTokenImage, depayWeb3Blockchains) { 'use strict';
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, Slider, reactTokenImage, web3Blockchains) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -888,6 +888,8 @@
 
   var ClosableContext = /*#__PURE__*/React__default$1["default"].createContext();
 
+  var UpdatableContext = /*#__PURE__*/React__default$1["default"].createContext();
+
   var ClosableProvider = (function (props) {
     var _useState = React.useState(true),
         _useState2 = _slicedToArray(_useState, 2),
@@ -899,11 +901,15 @@
         open = _useState4[0],
         setOpen = _useState4[1];
 
+    var _useContext = React.useContext(UpdatableContext),
+        setUpdatable = _useContext.setUpdatable;
+
     var close = function close() {
       if (!closable) {
         return;
       }
 
+      setUpdatable(false);
       setOpen(false);
       setTimeout(props.unmount, 300);
     };
@@ -956,7 +962,7 @@
   });
 
   var Dialog$1 = (function (props) {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(ClosableContext),
@@ -987,16 +993,11 @@
       className: "DialogBody"
     }, props.body), /*#__PURE__*/React__default$1["default"].createElement("div", {
       className: "DialogFooter"
-    }, props.footer, /*#__PURE__*/React__default$1["default"].createElement("a", {
-      href: 'https://depay.fi?utm_source=' + window.location.hostname + '&utm_medium=widget&utm_campaign=WidgetV2',
-      rel: "noopener noreferrer",
-      target: "_blank",
-      className: "FooterLink"
-    }, "by DePay")));
+    }, props.footer));
   });
 
   var ConnectingWalletDialog = (function (props) {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var wallet = props.wallet;
@@ -1042,9 +1043,9 @@
           className: "TextButton"
         }, "Connect with another wallet")))),
         footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingTopXS PaddingRightM PaddingLeftM"
+          className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
         }, /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary wide",
+          className: "ButtonPrimary",
           onClick: function onClick() {
             return props.connect(wallet);
           }
@@ -1073,10 +1074,10 @@
         showExplanation = _useState2[0],
         setShowExplanation = _useState2[1];
 
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
-    var wallet = depayWeb3Wallets.getWallet();
+    var wallet = web3Wallets.getWallet();
     React.useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
       var accounts;
       return regenerator.wrap(function _callee$(_context) {
@@ -1112,7 +1113,7 @@
       props.connect(wallet);
     };
 
-    var availableWallets = [depayWeb3Wallets.wallets.WalletConnect];
+    var availableWallets = [web3Wallets.wallets.WalletConnect];
 
     if (wallet) {
       availableWallets.unshift(wallet);
@@ -1127,7 +1128,7 @@
           return connect(wallet);
         }
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "CardImage PaddingLeftM"
+        className: "CardImage"
       }, /*#__PURE__*/React__default$1["default"].createElement("img", {
         src: wallet.logo
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -1140,9 +1141,9 @@
     });
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Select a wallet")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingBottomXS PaddingLeftS PaddingRightS"
@@ -1150,11 +1151,13 @@
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingBottomS"
       }, /*#__PURE__*/React__default$1["default"].createElement("button", {
-        className: "FontSizeS FontWeightBold TextGrey TextButton",
+        className: "FontSizeS FontWeightBold TextButton",
         onClick: function onClick() {
           return setShowExplanation(!showExplanation);
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("strong", null, "What is a wallet?")), showExplanation && /*#__PURE__*/React__default$1["default"].createElement("p", {
+      }, /*#__PURE__*/React__default$1["default"].createElement("strong", {
+        className: "Opacity05"
+      }, "What is a wallet?")), showExplanation && /*#__PURE__*/React__default$1["default"].createElement("p", {
         className: "PaddingLeftM PaddingRightM"
       }, "Wallets are used to send, receive, and store digital assets. Wallets come in many forms. They are either built into your browser, an extension added to your browser, a piece of hardware plugged into your computer or even an app on your phone."))
     });
@@ -1220,7 +1223,7 @@
     };
 
     React.useEffect(function () {
-      var wallet = depayWeb3Wallets.getWallet();
+      var wallet = web3Wallets.getWallet();
 
       if (wallet) {
         setWallet(wallet);
@@ -1260,7 +1263,7 @@
         }
       }, _callee2);
     })), [wallet]);
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SelectWallet",
@@ -1372,8 +1375,7 @@
     let background =
       typeof styles === 'object' && styles.background ? styles.background : 'rgba(0,0,0,0.4)';
 
-    return (
-      `
+    return `
     .ReactDialog {
       bottom: 0;
       display: table;
@@ -1432,12 +1434,9 @@
       top: -5vh;
     }
   `
-    )
   }
 
-  const _jsxFileName = "/Users/sebastian/Work/DePay/depay-react-dialog/src/components/Dialog.jsx";
-
-
+  const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
   class Dialog extends React__default['default'].Component {
     constructor(props) {
       super(props);
@@ -1499,7 +1498,7 @@
     }
   }
 
-  const _jsxFileName$1 = "/Users/sebastian/Work/DePay/depay-react-dialog/src/index.jsx";
+  const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
   class ReactDialog extends React__default['default'].Component {
     constructor(props) {
       super(props);
@@ -1612,7 +1611,7 @@
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "DialogBody"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "GraphicWrapper"
+        className: "GraphicWrapper PaddingTopS"
       }, /*#__PURE__*/React__default$1["default"].createElement("img", {
         className: "Graphic",
         src: ErrorGraphic
@@ -1630,15 +1629,12 @@
         className: "FontSizeM PaddingTopS"
       }, "If this keeps happening, please report it.")))), /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "DialogFooter"
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: close
-      }, "Try again")), /*#__PURE__*/React__default$1["default"].createElement("a", {
-        href: 'https://depay.fi?utm_source=' + window.location.hostname + '&utm_medium=widget&utm_campaign=WidgetV2',
-        rel: "noopener noreferrer",
-        target: "_blank",
-        className: "FooterLink"
-      }, "by DePay"))));
+      }, "Try again")))));
     } else {
       return /*#__PURE__*/React__default$1["default"].createElement(ErrorContext.Provider, {
         value: {
@@ -1650,28 +1646,28 @@
     }
   });
 
+  var BlockchainLogoStyle = (function (style) {
+    return "\n\n    .BlockchainLogo {\n      border-radius: 999px;\n    }\n\n    .BlockchainLogo.small {\n      height: 18px;\n      width: 18px;\n    }\n  ";
+  });
+
   var ButtonCircularStyle = (function () {
     return "\n\n    .ButtonCircular {\n      border-radius: 99rem;\n      cursor: pointer;\n      height: 34px;\n      opacity: 0.5;\n      padding: 5px 4px 4px 4px;\n      width: 34px;\n    }\n\n    .ButtonCircular:hover {\n      background: rgba(0,0,0,0.1);\n      opacity: 1;\n    }\n\n    .ButtonCircular:active {\n      background: rgba(0,0,0,0.25);\n      opacity: 1;\n    }\n  ";
   });
 
   var ButtonPrimaryStyle = (function (style) {
-    return "\n\n    .ButtonPrimary {\n      align-items: center;\n      align-self: center;\n      background: ".concat(style.colors.primary, ";\n      border-radius: 9999rem;\n      border: 1px solid transparent;\n      box-shadow: 0 0 16px rgba(0,0,0,0.1);\n      font-size: 1.3rem;\n      font-weight: 400;\n      height: 2.8rem;\n      line-height: 2.8rem;\n      justify-content: center;\n      min-width: 12rem;\n      overflow: hidden;\n      padding: 0 1.4rem;\n      position: relative;\n      text-align: center;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      transition: background 0.1s;\n      vertical-align: middle;\n      display: inline-block;\n    }\n\n    .ButtonPrimary, .ButtonPrimary * {\n      color: ").concat(style.colors.buttonText, ";\n    }\n\n    .ButtonPrimary.round {\n      padding: 0;\n      width: 3.4rem;\n      min-width: 3.4rem;\n    }\n\n    .ButtonPrimary.wide {\n      border-radius: 0.8rem;\n      width: 100%;\n      display: block;\n    }\n\n    .ButtonPrimary.disabled {\n      background: rgb(210,210,210);\n      color: rgb(140,140,140);\n    }\n\n    .ButtonPrimary:not(.disabled){\n      cursor: pointer;\n    }\n    .ButtonPrimary:not(.disabled):hover {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n    }\n    .ButtonPrimary:not(.disabled):active {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n    }\n  ");
+    return "\n\n    .ButtonPrimary {\n      align-items: center;\n      align-self: center;\n      background: ".concat(style.colors.primary, ";\n      border-radius: 0.8rem;\n      border: 1px solid transparent;\n      box-shadow: 0 0 16px rgba(0,0,0,0.1);\n      font-size: 1.3rem;\n      font-weight: 400;\n      line-height: 2.8rem;\n      height: 3.6rem;\n      justify-content: center;\n      width: 100%;\n      overflow: hidden;\n      padding: 0.4rem 0;\n      position: relative;\n      text-align: center;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      transition: background 0.1s;\n      vertical-align: middle;\n      display: inline-block;\n    }\n\n    .ButtonPrimary, .ButtonPrimary * {\n      color: ").concat(style.colors.buttonText, ";\n    }\n\n    .ButtonPrimary.disabled {\n      background: rgb(210,210,210);\n      color: rgb(140,140,140);\n    }\n\n    .ButtonPrimary:not(.disabled){\n      cursor: pointer;\n    }\n    .ButtonPrimary:not(.disabled):hover {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n    }\n    .ButtonPrimary:not(.disabled):active {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n    }\n  ");
   });
 
   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    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 0.6rem 0.6rem;\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-shrink: 0;\n      flex-grow: 0;\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    .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  ");
+    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    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    .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 .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) {
-    return "\n\n    .ReactDialogBackground {\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n        max-height: 40vh !important;\n      }\n\n      .FooterLink {\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        padding-bottom: 1rem;\n        right: 0;\n        width: 100%;\n      }\n\n      .DialogFooter {\n        padding-bottom: 50px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        max-height: 66vh !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.HeightAuto {\n      height: auto;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      display: flex;\n      flex-direction: row;\n      position: relative;\n    }\n\n    .DialogHeaderTitle {\n      flex-basis: auto;\n      flex-grow: 1;\n    }\n    \n    .DialogHeaderAction {\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
+    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n        max-height: 40vh !important;\n      }\n\n      .DialogFooter {\n        padding-bottom: 50px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        max-height: 66vh !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.HeightAuto {\n      height: auto;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      display: flex;\n      flex-direction: row;\n      position: relative;\n    }\n\n    .DialogHeaderTitle {\n      flex-basis: auto;\n      flex-grow: 1;\n    }\n    \n    .DialogHeaderAction {\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
   });
 
   var FontStyle = (function (style) {
-    return "\n\n    .Dialog, * {\n      font-family: ".concat(style.fontFamily, ";\n    }\n\n    .FontSizeS {\n      font-size: 1rem;\n    }\n\n    .FontSizeM {\n      font-size: 1.2rem;\n    }\n\n    .FontSizeL {\n      font-size: 1.4rem;\n    }\n\n    .FontSizeXL {\n      font-size: 2.0rem;\n    }\n\n    .FontWeightBold {\n      font-weight: bold;\n    }\n\n    .FontItalic {\n      font-style: italic;\n    }\n  ");
-  });
-
-  var FooterStyle = (function (style) {
-    return "\n\n    .FooterLink {\n      color: rgba(0,0,0,0.2);\n      display: inline-block;\n      font-size: 0.9rem;\n      text-decoration: none;\n    }\n\n    .FooterLink:hover, .FooterLink:active {\n      color: ".concat(style.colors.primary, ";\n    }\n  ");
+    return "\n\n    *, div, div * {\n      font-family: ".concat(style.fontFamily, ";\n    }\n\n    .FontSizeS {\n      font-size: 1rem;\n    }\n\n    .FontSizeM {\n      font-size: 1.2rem;\n    }\n\n    .FontSizeL {\n      font-size: 1.4rem;\n    }\n\n    .FontSizeXL {\n      font-size: 2.0rem;\n    }\n\n    .FontWeightBold {\n      font-weight: bold;\n    }\n\n    .FontItalic {\n      font-style: italic;\n    }\n  ");
   });
 
   var GraphicStyle = (function () {
@@ -1683,7 +1679,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: 1.4rem;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 1.4rem;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\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    .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) {
@@ -1702,10 +1698,18 @@
     return "\n\n    .LoadingText {\n      color: ".concat(style.colors.buttonText, ";\n      display: inline-block;\n      text-decoration: none;\n    }\n\n    @keyframes blink {\n      0% { opacity: .2; }\n      20% { opacity: 1; }\n      100% { opacity: .2; }\n    }\n    \n    .LoadingText .dot {\n      animation-name: blink;\n      animation-duration: 1.4s;\n      animation-iteration-count: infinite;\n      animation-fill-mode: both;\n    }\n    \n    .LoadingText .dot:nth-child(2) {\n      animation-delay: .2s;\n    }\n    \n    .LoadingText .dot:nth-child(3) {\n      animation-delay: .4s;\n    }\n  ");
   });
 
+  var OpacityStyle = (function (style) {
+    return "\n\n    .Opacity05 {\n      opacity: 0.5;\n    }\n  ";
+  });
+
   var PaddingStyle = (function () {
     return "\n\n    .PaddingTopXS {\n      padding-top: 0.2rem;\n    }\n\n    .PaddingRightXS {\n      padding-right: 0.2rem;\n    }\n\n    .PaddingBottomXS {\n      padding-bottom: 0.2rem;\n    }\n\n    .PaddingLeftXS {\n      padding-left: 0.2rem; \n    }\n\n    .PaddingTopS {\n      padding-top: 0.8rem;\n    }\n\n    .PaddingRightS {\n      padding-right: 0.8rem;\n    }\n\n    .PaddingBottomS {\n      padding-bottom: 0.8rem;\n    }\n\n    .PaddingLeftS {\n      padding-left: 0.8rem; \n    }\n\n    .PaddingTopM {\n      padding-top: 1.2rem;\n    }\n\n    .PaddingRightM {\n      padding-right: 1.2rem;\n    }\n\n    .PaddingBottomM {\n      padding-bottom: 1.2rem;\n    }\n\n    .PaddingLeftM {\n      padding-left: 1.2rem; \n    }\n\n    .PaddingTopL {\n      padding-top: 1.8rem;\n    }\n\n    .PaddingRightL {\n      padding-right: 1.8rem;\n    }\n\n    .PaddingBottomL {\n      padding-bottom: 1.8rem;\n    }\n\n    .PaddingLeftL {\n      padding-left: 1.28em; \n    }\n  ";
   });
 
+  var PoweredByStyle = (function (style) {
+    return "\n\n    .PoweredByWrapper {\n      display: block;\n      left: 0;\n      padding-top: 0.2rem;\n      position: fixed;\n      right: 0;\n      text-align: center;\n      top: 0;\n    }\n\n    .PoweredByLink {\n      color: white;\n      opacity: 0.4;\n      display: inline-block;\n      font-size: 0.78rem;\n      font-style: italic;\n      font-weight: bold;\n      letter-spacing: -0.2px;\n      margin-left: 0.5rem;\n      text-decoration: none;\n    }\n\n    .PoweredByLink:hover, .PoweredByLink:active {\n      opacity: 1.0;\n      color: ".concat(style.colors.primary, ";\n    }\n  ");
+  });
+
   var RangeSliderStyle = (function (style) {
     return "\n\n    .rangeslider {\n      margin: 20px 0;\n      position: relative;\n      background: #e6e6e6;\n      -ms-touch-action: none;\n      touch-action: none;\n    }\n\n    .rangeslider,\n    .rangeslider__fill {\n      display: block;\n      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);\n    }\n\n    .rangeslider__handle {\n      outline: none;\n      cursor: pointer;\n      display: inline-block;\n      position: absolute;\n      border-radius: 50%;\n      background-color: " + style.colors.primary + ";\n      border: 1px solid white;\n      box-shadow: 0 0 8px rgba(0,0,0,0.1);\n    }\n\n    .rangeslider__handle:hover {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n    }\n\n    .rangeslider__handle:active {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.3);\n    }\n\n    .rangeslider__active {\n      opacity: 1;\n    }\n\n    .rangeslider__handle-tooltip {\n      display: none;\n    }\n\n    .rangeslider-horizontal {\n      height: 12px;\n      border-radius: 10px;\n    }\n\n    .rangeslider-horizontal .rangeslider__fill {\n      height: 100%;\n      background-color: " + style.colors.primary + ";\n      border-radius: 10px;\n      top: 0;\n    }\n    .rangeslider-horizontal .rangeslider__handle {\n      width: 18px;\n      height: 18px;\n      border-radius: 30px;\n      top: 50%;\n      transform: translate3d(-50%, -50%, 0);\n    }\n\n\n    .rangeslider-horizontal .rangeslider__handle-tooltip {\n      top: -55px;\n    }\n\n  ";
   });
@@ -1715,15 +1719,15 @@
   });
 
   var SkeletonStyle = (function () {
-    return "\n        \n    .Skeleton {\n      background: rgb(230,230,230) !important;\n      box-shadow: none !important;\n      cursor: inherit !important;\n      line-height: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    @keyframes SkeletonBackgroundAnimation {\n      from {\n        left: -500px;\n      }\n      to   {\n        left: +120%;\n      }\n    }\n\n    .SkeletonBackground {\n      animation: 2s SkeletonBackgroundAnimation 0.2s ease infinite;\n      background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%);\n      height: 100%;\n      left: -140%;\n      position: absolute;\n      top: 0;\n      width: 400px;\n    }\n\n    .SkeletonWrapper {\n      line-height: 0;\n    }\n  ";
+    return "\n        \n    .Skeleton {\n      background: rgb(230,230,230) !important;\n      border: 0px solid transparent !important;\n      box-shadow: none !important;\n      cursor: inherit !important;\n      line-height: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    @keyframes SkeletonBackgroundAnimation {\n      from {\n        left: -500px;\n      }\n      to   {\n        left: +120%;\n      }\n    }\n\n    .SkeletonBackground {\n      animation: 2s SkeletonBackgroundAnimation 0.2s ease infinite;\n      background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%);\n      height: 100%;\n      left: -140%;\n      position: absolute;\n      top: 0;\n      width: 400px;\n    }\n\n    .SkeletonWrapper {\n      line-height: 0;\n    }\n  ";
   });
 
   var TextButtonStyle = (function (style) {
-    return "\n\n    .TextButton {\n      cursor: pointer;\n      font-size: 16px;\n      color: ".concat(style.colors.primary, "\n    }\n\n    .TextButton.TextGrey {\n      color: grey;\n    }\n    \n    .TextButton.TextGrey:hover {\n      color: ").concat(style.colors.primary, "\n    }\n  ");
+    return "\n\n    .TextButton {\n      cursor: pointer;\n      font-size: 16px;\n      color: ".concat(style.colors.primary, "\n    }\n\n    .TextButton:hover * {\n      opacity: 1.0;\n    }\n  ");
   });
 
   var TextStyle = (function (style) {
-    return "\n\n    * {\n      color: ".concat(style.colors.text, ";\n    }\n\n    .TextLeft, .TextLeft * {\n      text-align: left;\n    }\n\n    .TextCenter, .TextCenter * {\n      text-align: center;\n    }\n\n    .TextGrey {\n      color: grey;\n    }\n\n    .LineHeightL {\n      line-height: 2.0rem;\n    }\n\n    .ErrorSnippetText {\n      background: rgb(30, 30, 20);\n      border-radius: 1.2rem;\n      border: 0.5rem solid rgb(30, 30, 20);\n      color: #00FF41;\n      font-size: 0.9rem;\n      font-style: italic;\n      max-height: 100px;\n      padding: 6px;\n      overflow-wrap: break-word;\n      overflow-y: auto;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n  ");
+    return "\n\n    * {\n      color: ".concat(style.colors.text, ";\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n      display: block;\n    }\n\n    .TextLeft, .TextLeft * {\n      text-align: left;\n    }\n\n    .TextCenter, .TextCenter * {\n      text-align: center;\n    }\n\n    .LineHeightL {\n      line-height: 2.0rem;\n    }\n\n    .ErrorSnippetText {\n      background: rgb(30, 30, 20);\n      border-radius: 1.2rem;\n      border: 0.5rem solid rgb(30, 30, 20);\n      color: #00FF41;\n      font-size: 0.9rem;\n      font-style: italic;\n      max-height: 100px;\n      padding: 6px;\n      overflow-wrap: break-word;\n      overflow-y: auto;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n  ");
   });
 
   var TokenAmountStyle = (function () {
@@ -1740,7 +1744,7 @@
       },
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }, style);
-    return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), FooterStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle()].join('');
+    return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle()].join('');
   });
 
   var mount = (function (_ref, content) {
@@ -1764,7 +1768,7 @@
       }, 300);
     };
 
-    var _ReactShadowDOM = depayReactShadowDom.ReactShadowDOM({
+    var _ReactShadowDOM = reactShadowDom.ReactShadowDOM({
       document: document,
       element: document.body,
       content: content(unmountShadowDOM),
@@ -1776,6 +1780,31 @@
     return unmount;
   });
 
+  var PoweredBy = (function () {
+    return /*#__PURE__*/React__default$1["default"].createElement("div", {
+      className: "PoweredByWrapper"
+    }, /*#__PURE__*/React__default$1["default"].createElement("a", {
+      href: 'https://depay.fi?utm_source=' + window.location.hostname + '&utm_medium=widget&utm_campaign=WidgetV2',
+      rel: "noopener noreferrer",
+      target: "_blank",
+      className: "PoweredByLink"
+    }, "by DePay"));
+  });
+
+  var UpdatableProvider = (function (props) {
+    var _useState = React.useState(true),
+        _useState2 = _slicedToArray(_useState, 2),
+        updatable = _useState2[0],
+        setUpdatable = _useState2[1];
+
+    return /*#__PURE__*/React__default$1["default"].createElement(UpdatableContext.Provider, {
+      value: {
+        updatable: updatable,
+        setUpdatable: setUpdatable
+      }
+    }, props.children);
+  });
+
   var Connect = function Connect(options) {
     var style, error, document;
 
@@ -1792,7 +1821,7 @@
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                wallet = depayWeb3Wallets.getWallet();
+                wallet = web3Wallets.getWallet();
 
                 if (!wallet) {
                   _context.next = 7;
@@ -1831,7 +1860,7 @@
                       error: error,
                       container: container,
                       unmount: unmount
-                    }, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                    }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
                       unmount: rejectBeforeUnmount
                     }, /*#__PURE__*/React__default$1["default"].createElement(ConnectStack, {
                       document: document,
@@ -1839,7 +1868,7 @@
                       resolve: resolve,
                       reject: reject,
                       autoClose: true
-                    })));
+                    }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))));
                   };
                 });
 
@@ -1998,9 +2027,9 @@
     React.useEffect(function () {
       if (amountsMissing && account && conversionRate) {
         Promise.all(props.accept.map(function (configuration) {
-          return depayWeb3Exchanges.route({
+          return web3Exchanges.route({
             blockchain: configuration.blockchain,
-            tokenIn: depayWeb3Constants.CONSTANTS[configuration.blockchain].USD,
+            tokenIn: web3Constants.CONSTANTS[configuration.blockchain].USD,
             amountIn: 1.00 / conversionRate * amount,
             tokenOut: configuration.token,
             fromAddress: account,
@@ -2012,19 +2041,25 @@
               return;
             }
 
-            return depayWeb3Tokens.Token.readable({
+            return web3Tokens.Token.readable({
               blockchain: props.accept[index].blockchain,
               amount: routes[0].amountOut,
               address: routes[0].tokenOut
             });
           })).then(function (amounts) {
             setAcceptWithAmount(props.accept.map(function (configuration, index) {
+              if (amounts[index] == undefined) {
+                return;
+              }
+
               return {
                 blockchain: configuration.blockchain,
-                amount: round(amounts[index]) || 1,
+                amount: round(amounts[index]),
                 token: configuration.token,
                 receiver: configuration.receiver || account
               };
+            }).filter(function (configuration) {
+              return !!configuration;
             }));
           })["catch"](setError);
         })["catch"](setError);
@@ -2033,23 +2068,23 @@
     React.useEffect(function () {
       if (amountsMissing && maxRoute) {
         maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-          if (maxRoute.fromToken.address == depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD) {
+          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);
           } else {
-            depayWeb3Exchanges.route({
+            web3Exchanges.route({
               blockchain: maxRoute.blockchain,
               tokenIn: maxRoute.fromToken.address,
-              tokenOut: depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD,
+              tokenOut: web3Constants.CONSTANTS[maxRoute.blockchain].USD,
               amountIn: parseFloat(readableMaxAmount),
               fromAddress: account,
               toAddress: account
             }).then(function (routes) {
-              depayWeb3Tokens.Token.readable({
+              web3Tokens.Token.readable({
                 amount: routes[0].amountOut,
                 blockchain: maxRoute.blockchain,
-                address: depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD
+                address: web3Constants.CONSTANTS[maxRoute.blockchain].USD
               }).then(function (readableMaxAmount) {
                 var slippage = 1.01;
                 var maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
@@ -2075,13 +2110,13 @@
   });
 
   var ConfigurationProvider = (function (props) {
-    var currencyCode = new depayLocalCurrency.Currency({
+    var currencyCode = new localCurrency.Currency({
       code: props.configuration.currency
     }).code;
     React.useEffect(function () {
       if (props.configuration.providers != undefined) {
         Object.entries(props.configuration.providers).forEach(function (entry) {
-          depayWeb3Client.setProvider(entry[0], entry[1]);
+          web3Client.setProviderEndpoints(entry[0], entry[1]);
         });
       }
     }, [props.configuration]);
@@ -2107,7 +2142,7 @@
         setConversionRate = _useState2[1];
 
     React.useEffect(function () {
-      depayLocalCurrency.Currency.fromUSD({
+      localCurrency.Currency.fromUSD({
         amount: 1,
         code: currency,
         apiKey: apiKey
@@ -2146,7 +2181,9 @@
       }, /*#__PURE__*/React__default$1["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."))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: close
       }, "Ok"))
@@ -2157,7 +2194,7 @@
 
   var PaymentRoutingContext = /*#__PURE__*/React__default$1["default"].createContext();
 
-  var UpdateContext = /*#__PURE__*/React__default$1["default"].createContext();
+  var TrackingContext = /*#__PURE__*/React__default$1["default"].createContext();
 
   var PaymentProvider = (function (props) {
     var _useContext = React.useContext(ErrorContext),
@@ -2166,7 +2203,6 @@
     var _useContext2 = React.useContext(ConfigurationContext),
         _sent = _useContext2.sent,
         _confirmed = _useContext2.confirmed,
-        _ensured = _useContext2.ensured,
         _failed = _useContext2.failed;
 
     var _useContext3 = React.useContext(PaymentRoutingContext),
@@ -2180,13 +2216,17 @@
     var _useContext5 = React.useContext(PaymentRoutingContext),
         allRoutes = _useContext5.allRoutes;
 
-    var _useContext6 = React.useContext(UpdateContext);
-        _useContext6.update;
-        var setUpdate = _useContext6.setUpdate;
+    var _useContext6 = React.useContext(UpdatableContext),
+        setUpdatable = _useContext6.setUpdatable;
 
     var _useContext7 = React.useContext(WalletContext),
         wallet = _useContext7.wallet;
 
+    var _useContext8 = React.useContext(TrackingContext),
+        forward = _useContext8.forward,
+        tracking = _useContext8.tracking,
+        initializeTracking = _useContext8.initializeTracking;
+
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
         payment = _useState2[0],
@@ -2207,53 +2247,81 @@
         paymentState = _useState8[0],
         setPaymentState = _useState8[1];
 
-    var pay = function pay(_ref) {
-      var navigate = _ref.navigate;
-      setClosable(false);
-      setPaymentState('paying');
-      setUpdate(false);
-      wallet.sendTransaction(Object.assign({}, payment.route.transaction, {
-        sent: function sent(transaction) {
-          if (_sent) {
-            _sent(transaction);
-          }
-        },
-        confirmed: function confirmed(transaction) {
-          setClosable(true);
-          setPaymentState('confirmed');
+    var pay = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
+        var navigate, 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;
+                return web3Client.request({
+                  blockchain: payment.route.transaction.blockchain,
+                  method: 'latestBlockNumber'
+                });
 
-          if (_confirmed) {
-            _confirmed(transaction);
-          }
-        },
-        ensured: function ensured(transaction) {
-          if (_ensured) {
-            _ensured(transaction);
-          }
-        },
-        failed: function failed(transaction, error) {
-          if (_failed) {
-            _failed(transaction, error);
-          }
+              case 6:
+                currentBlock = _context.sent;
+                wallet.sendTransaction(Object.assign({}, payment.route.transaction, {
+                  sent: function sent(transaction) {
+                    if (_sent) {
+                      _sent(transaction);
+                    }
+                  },
+                  confirmed: function confirmed(transaction) {
+                    if (tracking != true) {
+                      setClosable(true);
+                    }
 
-          setPaymentState('initialized');
-          setClosable(true);
-          setUpdate(true);
-          navigate('PaymentError');
-        }
-      })).then(function (sentTransaction) {
-        setTransaction(sentTransaction);
-      })["catch"](function (error) {
-        console.log('error', error);
-        setPaymentState('initialized');
-        setClosable(true);
-        setUpdate(true);
+                    setPaymentState('confirmed');
 
-        if ((error === null || error === void 0 ? void 0 : error.code) == 'WRONG_NETWORK') {
-          navigate('WrongNetwork');
-        }
-      });
-    };
+                    if (_confirmed) {
+                      _confirmed(transaction);
+                    }
+                  },
+                  failed: function failed(transaction, error) {
+                    if (_failed) {
+                      _failed(transaction, error);
+                    }
+
+                    setPaymentState('initialized');
+                    setClosable(true);
+                    setUpdatable(true);
+                    navigate('PaymentError');
+                  }
+                })).then(function (sentTransaction) {
+                  if (tracking) {
+                    initializeTracking(sentTransaction, currentBlock);
+                  }
+
+                  setTransaction(sentTransaction);
+                })["catch"](function (error) {
+                  console.log('error', error);
+                  setPaymentState('initialized');
+                  setClosable(true);
+                  setUpdatable(true);
+
+                  if ((error === null || error === void 0 ? void 0 : error.code) == 'WRONG_NETWORK') {
+                    navigate('WrongNetwork');
+                  }
+                });
+
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function pay(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
 
     var approve = function approve() {
       setClosable(false);
@@ -2274,15 +2342,20 @@
       });
     };
 
+    React.useEffect(function () {
+      if (forward) {
+        setPaymentState('confirmed');
+      }
+    }, [forward]);
     React.useEffect(function () {
       if (selectedRoute) {
         var fromToken = selectedRoute.fromToken;
         selectedRoute.transaction.params;
-        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];
+        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];
 
           setPayment({
             route: selectedRoute,
@@ -2298,14 +2371,14 @@
     }, [selectedRoute]);
     React.useEffect(function () {
       if (allRoutes && allRoutes.length == 0) {
-        setUpdate(false);
+        setUpdatable(false);
       } else if (allRoutes && allRoutes.length > 0) {
-        setUpdate(true);
+        setUpdatable(true);
       }
     }, [allRoutes]);
 
     if (allRoutes instanceof Array && allRoutes.length == 0) {
-      return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+      return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
         open: open,
         close: close,
         start: "NoPaymentMethodFound",
@@ -2366,8 +2439,8 @@
     var _useContext = React.useContext(WalletContext),
         account = _useContext.account;
 
-    var _useContext2 = React.useContext(UpdateContext),
-        update = _useContext2.update;
+    var _useContext2 = React.useContext(UpdatableContext),
+        updatable = _useContext2.updatable;
 
     var prepareAcceptedPayments = function prepareAcceptedPayments(accept) {
       var toAddress = _typeof(accept.receiver) == 'object' ? accept.receiver.address : accept.receiver;
@@ -2382,13 +2455,13 @@
     var getPaymentRoutes = function getPaymentRoutes(_ref) {
       var allRoutes = _ref.allRoutes,
           selectedRoute = _ref.selectedRoute,
-          update = _ref.update;
+          updatable = _ref.updatable;
 
-      if (update == false || !props.accept || !account) {
+      if (updatable == false || !props.accept || !account) {
         return;
       }
 
-      depayWeb3Payments.route({
+      web3Payments.route({
         accept: props.accept.map(prepareAcceptedPayments),
         whitelist: props.whitelist,
         blacklist: props.blacklist,
@@ -2487,13 +2560,13 @@
         getPaymentRoutes({
           allRoutes: allRoutes,
           selectedRoute: selectedRoute,
-          update: update
+          updatable: updatable
         });
       }, 15000);
       return function () {
         return clearTimeout(timeout);
       };
-    }, [reloadCount, allRoutes, selectedRoute, update]);
+    }, [reloadCount, allRoutes, selectedRoute, updatable]);
     React.useEffect(function () {
       if (account && props.accept) {
         setAllRoutes(undefined);
@@ -2523,8 +2596,8 @@
     var _useContext2 = React.useContext(WalletContext),
         account = _useContext2.account;
 
-    var _useContext3 = React.useContext(UpdateContext),
-        update = _useContext3.update;
+    var _useContext3 = React.useContext(UpdatableContext),
+        updatable = _useContext3.updatable;
 
     var _useContext4 = React.useContext(PaymentContext),
         payment = _useContext4.payment;
@@ -2543,23 +2616,23 @@
         setReloadCount = _useState4[1];
 
     var getToTokenLocalValue = function getToTokenLocalValue(_ref) {
-      var update = _ref.update,
+      var updatable = _ref.updatable,
           payment = _ref.payment;
 
-      if (update == false || (payment === null || payment === void 0 ? void 0 : payment.route) == undefined) {
+      if (updatable == false || (payment === null || payment === void 0 ? void 0 : payment.route) == undefined) {
         return;
       }
 
-      Promise.all([depayWeb3Exchanges.route({
+      Promise.all([web3Exchanges.route({
         blockchain: payment.route.blockchain,
         tokenIn: payment.route.toToken.address,
-        tokenOut: depayWeb3Constants.CONSTANTS[payment.route.blockchain].USD,
+        tokenOut: web3Constants.CONSTANTS[payment.route.blockchain].USD,
         amountIn: payment.route.toAmount,
         fromAddress: account,
         toAddress: account
-      }), new depayWeb3Tokens.Token({
+      }), new web3Tokens.Token({
         blockchain: payment.route.blockchain,
-        address: depayWeb3Constants.CONSTANTS[payment.route.blockchain].USD
+        address: web3Constants.CONSTANTS[payment.route.blockchain].USD
       }).decimals()]).then(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
             USDExchangeRoutes = _ref3[0],
@@ -2568,7 +2641,7 @@
         var USDRoute = USDExchangeRoutes[0];
         var USDAmount;
 
-        if (payment.route.toToken.address.toLowerCase() == depayWeb3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
+        if (payment.route.toToken.address.toLowerCase() == web3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
           USDAmount = payment.route.toAmount.toString();
         } else if (USDRoute == undefined) {
           setPaymentValue('');
@@ -2578,7 +2651,7 @@
         }
 
         var USDValue = ethers.ethers.utils.formatUnits(USDAmount, USDDecimals);
-        depayLocalCurrency.Currency.fromUSD({
+        localCurrency.Currency.fromUSD({
           amount: USDValue,
           code: currency,
           apiKey: apiKey
@@ -2589,7 +2662,7 @@
     React.useEffect(function () {
       if (account && payment) {
         getToTokenLocalValue({
-          update: update,
+          updatable: updatable,
           payment: payment
         });
       }
@@ -2598,13 +2671,13 @@
       var timeout = setTimeout(function () {
         setReloadCount(reloadCount + 1);
         getToTokenLocalValue({
-          update: update
+          updatable: updatable
         });
       }, 15000);
       return function () {
         return clearTimeout(timeout);
       };
-    }, [reloadCount, update]);
+    }, [reloadCount, updatable]);
     return /*#__PURE__*/React__default$1["default"].createElement(PaymentValueContext.Provider, {
       value: {
         paymentValue: paymentValue
@@ -2646,7 +2719,7 @@
   });
 
   var ChangeAmountDialog = (function (props) {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(ErrorContext);
@@ -2759,7 +2832,9 @@
           changeAmount(toValidValue(maxAmount));
         }
       }, "(Max)")))))),
-      footer: /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("button", {
+      footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default$1["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: changeAmountAndGoBack
       }, "Done"))
@@ -2810,7 +2885,7 @@
     var _useContext3 = React.useContext(PaymentValueContext),
         paymentValue = _useContext3.paymentValue;
 
-    var _useContext4 = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext4 = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext4.navigate;
 
     var _useState = React.useState([]),
@@ -2846,6 +2921,7 @@
     }, [allRoutes]);
     React.useEffect(function () {
       setCards(allPaymentRoutesWithData.map(function (payment, index) {
+        var blockchain = web3Blockchains.Blockchain.findByName(payment.route.blockchain);
         return /*#__PURE__*/React__default$1["default"].createElement("div", {
           key: index,
           className: "Card",
@@ -2856,9 +2932,14 @@
           }
         }, /*#__PURE__*/React__default$1["default"].createElement("div", {
           className: "CardImage"
-        }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+        }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
           blockchain: payment.route.blockchain,
           address: payment.route.fromToken.address
+        }), /*#__PURE__*/React__default$1["default"].createElement("img", {
+          className: "BlockchainLogo small",
+          src: blockchain.logo,
+          alt: blockchain.label,
+          title: blockchain.label
         })), /*#__PURE__*/React__default$1["default"].createElement("div", {
           className: "CardBody"
         }, /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -2873,11 +2954,7 @@
           className: "TokenAmountCell"
         }, format(payment.amount)))), /*#__PURE__*/React__default$1["default"].createElement("h3", {
           className: "CardText"
-        }, /*#__PURE__*/React__default$1["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))), /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "CardInfo"
-        }, payment.route.approvalRequired && /*#__PURE__*/React__default$1["default"].createElement("span", {
-          className: "Label"
-        }, "Requires Approval")));
+        }, /*#__PURE__*/React__default$1["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
       }));
     }, [allPaymentRoutesWithData]);
 
@@ -2903,25 +2980,12 @@
     });
   });
 
-  var Checkmark = (function () {
-    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
-      className: "Checkmark Icon",
-      version: "1.1",
-      xmlns: "http://www.w3.org/2000/svg",
-      x: "0px",
-      y: "0px",
-      viewBox: "0 0 24 24"
-    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
-      d: "M20,4.9L9.2,16l-5.4-3.9c-0.7-0.5-1.6-0.3-2.1,0.3c-0.5,0.7-0.3,1.6,0.3,2.1l6.4,4.7c0.3,0.2,0.6,0.3,0.9,0.3 c0.4,0,0.8-0.2,1.1-0.5l11.7-12c0.6-0.6,0.6-1.6,0-2.2C21.6,4.3,20.6,4.3,20,4.9z"
-    }));
-  });
-
   var DonationOverviewSkeleton = (function (props) {
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Donation")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -2935,7 +2999,7 @@
         className: "SkeletonBackground"
       }))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "SkeletonWrapper"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -2946,6 +3010,60 @@
     });
   });
 
+  var Checkmark = (function (props) {
+    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+      className: "Checkmark Icon " + props.className,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 24 24"
+    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M20,4.9L9.2,16l-5.4-3.9c-0.7-0.5-1.6-0.3-2.1,0.3c-0.5,0.7-0.3,1.6,0.3,2.1l6.4,4.7c0.3,0.2,0.6,0.3,0.9,0.3 c0.4,0,0.8-0.2,1.1-0.5l11.7-12c0.6-0.6,0.6-1.6,0-2.2C21.6,4.3,20.6,4.3,20,4.9z"
+    }));
+  });
+
+  var DigitalWalletIcon = (function (props) {
+    return /*#__PURE__*/React__default$1["default"].createElement("svg", {
+      className: "DigitalWalletIcon Icon " + props.className,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24",
+      width: "24",
+      viewBox: "0 0 24 24"
+    }, /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M8.51,4.84l-.39-.53,4-2.89a2.2,2.2,0,0,1,3.06.48l.4.56-.53.39-.4-.56A1.54,1.54,0,0,0,12.5,2Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M9.77,4.89l-.21-.62,6.31-2.13h0a2.18,2.18,0,0,1,.67-.1h0a2.21,2.21,0,0,1,2.08,1.49l.32.95-.63.21L18,3.73a1.53,1.53,0,0,0-1.45-1h0a1.61,1.61,0,0,0-.48.08h0Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M19.72,16.2H18.27a3.28,3.28,0,1,1,0-6.56h1.45a3.21,3.21,0,0,1,1.33.28h0a3.28,3.28,0,0,1,0,6A3.21,3.21,0,0,1,19.72,16.2Zm-1.45-5.9a2.63,2.63,0,0,0,0,5.25h1.45a2.56,2.56,0,0,0,1.06-.23,2.62,2.62,0,0,0,0-4.8,2.55,2.55,0,0,0-1.06-.22ZM19,14.53a1.61,1.61,0,1,1,1.61-1.61A1.62,1.62,0,0,1,19,14.53ZM19,12a1,1,0,1,0,.95.95A1,1,0,0,0,19,12Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M10.49,19.69a1.58,1.58,0,1,1,1.58-1.57A1.57,1.57,0,0,1,10.49,19.69Zm0-2.49a.92.92,0,1,0,.92.92A.92.92,0,0,0,10.49,17.2Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M19.09,22.14H2.79a2,2,0,0,1-2-2V6.25a2.1,2.1,0,0,1,0-.43,2,2,0,0,1,.48-.92,2,2,0,0,1,1.48-.65H19.09a2,2,0,0,1,.64.1,2,2,0,0,1,1.36,1.79v0a.28.28,0,0,1,0,.09v3.91h-.66v-4a1.49,1.49,0,0,0-.23-.69A1.35,1.35,0,0,0,19.52,5a1.26,1.26,0,0,0-.43-.08H2.82a1.34,1.34,0,0,0-1,.44A1.49,1.49,0,0,0,1.5,6a1.5,1.5,0,0,0,0,.29V20.13a1.36,1.36,0,0,0,1.34,1.35H19.09a1.35,1.35,0,0,0,1.35-1.35V15.68h.66v4.45A2,2,0,0,1,19.09,22.14Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M9.27,9.31a1.58,1.58,0,1,1,0-3.15,1.58,1.58,0,0,1,0,3.15Zm0-2.5a.92.92,0,1,0,.92.92A.92.92,0,0,0,9.27,6.81Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("path", {
+      d: "M7.11,14.67A1.58,1.58,0,1,1,8.69,13.1,1.57,1.57,0,0,1,7.11,14.67Zm0-2.49A.92.92,0,1,0,8,13.1.92.92,0,0,0,7.11,12.18Z",
+      transform: "translate(-0.81 -1)"
+    }), /*#__PURE__*/React__default$1["default"].createElement("rect", {
+      x: "0.33",
+      y: "11.77",
+      width: "4.72",
+      height: "0.66"
+    }), /*#__PURE__*/React__default$1["default"].createElement("polygon", {
+      points: "2.08 9.53 0.33 9.53 0.33 8.87 1.8 8.87 4.28 6.39 7.21 6.39 7.21 7.05 4.55 7.05 2.08 9.53"
+    }), /*#__PURE__*/React__default$1["default"].createElement("polygon", {
+      points: "8.43 17.45 4.53 17.45 2.63 15.55 0.33 15.55 0.33 14.89 2.9 14.89 4.8 16.79 8.43 16.79 8.43 17.45"
+    }));
+  });
+
   var LoadingText = (function (props) {
     return /*#__PURE__*/React__default$1["default"].createElement("div", {
       className: "LoadingText"
@@ -2958,26 +3076,143 @@
     }, "."));
   });
 
-  var DonationOverviewDialog = (function (props) {
+  var Footer = (function () {
     var _useContext = React.useContext(ConfigurationContext),
         currencyCode = _useContext.currencyCode;
 
     var _useContext2 = React.useContext(ChangableAmountContext),
         amount = _useContext2.amount;
+        _useContext2.amountsMissing;
 
-    var _useContext3 = React.useContext(PaymentContext),
-        payment = _useContext3.payment,
-        paymentState = _useContext3.paymentState,
-        pay = _useContext3.pay,
-        transaction = _useContext3.transaction,
-        approve = _useContext3.approve,
-        approvalTransaction = _useContext3.approvalTransaction;
+    var _useContext3 = React.useContext(TrackingContext),
+        tracking = _useContext3.tracking,
+        forward = _useContext3.forward,
+        forwardTo = _useContext3.forwardTo;
 
-    var _useContext4 = React.useContext(depayReactDialogStack.NavigateStackContext),
-        navigate = _useContext4.navigate;
+    var _useContext4 = React.useContext(PaymentContext),
+        payment = _useContext4.payment,
+        paymentState = _useContext4.paymentState,
+        pay = _useContext4.pay,
+        transaction = _useContext4.transaction,
+        approve = _useContext4.approve,
+        approvalTransaction = _useContext4.approvalTransaction;
+
+    var _useContext5 = React.useContext(PaymentValueContext),
+        paymentValue = _useContext5.paymentValue;
+
+    var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext),
+        navigate = _useContext6.navigate;
+
+    var _useContext7 = React.useContext(ClosableContext),
+        close = _useContext7.close;
+
+    var trackingInfo = function trackingInfo() {
+      if (tracking != true) {
+        return null;
+      }
+
+      if (forward) {
+        return /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("a", {
+          className: "Card transparent small disabled"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "TextCenter Opacity05"
+        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, {
+          className: "small"
+        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "Opacity05"
+        }, "Payment confirmation has been stored")))));
+      } else {
+        return /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("a", {
+          className: "Card transparent small disabled"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "Loading Icon"
+        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "Opacity05"
+        }, "Storing payment confirmation")))));
+      }
+    };
 
-    var _useContext5 = React.useContext(ClosableContext),
-        close = _useContext5.close;
+    var additionalPaymentInformation = function additionalPaymentInformation() {
+      if (paymentState == 'paying' && transaction == undefined) {
+        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "PaddingBottomS"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "Card transparent disabled small"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "TextCenter Opacity05"
+        }, /*#__PURE__*/React__default$1["default"].createElement(DigitalWalletIcon, {
+          className: "small"
+        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "Opacity05"
+        }, "Confirm transaction in your wallet")))));
+      } else if (paymentState == 'confirmed') {
+        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "PaddingBottomS"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("a", {
+          className: "Card transparent small",
+          title: "Payment has been confirmed by the network",
+          href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "TextCenter Opacity05"
+        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, {
+          className: "small"
+        }))), /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "Opacity05"
+        }, "Payment has been confirmed"))))), trackingInfo());
+      }
+    };
+
+    var approvalButton = function approvalButton() {
+      if (!payment.route.approvalRequired || payment.route.directTransfer) {
+        return null;
+      } else if (paymentState == 'initialized') {
+        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "PaddingBottomS"
+        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
+          className: "ButtonPrimary",
+          onClick: approve,
+          title: "Allow ".concat(payment.symbol, " to be used as payment")
+        }, "Allow ", payment.symbol, " to be used as payment"));
+      } else if (paymentState == 'approving') {
+        return /*#__PURE__*/React__default$1["default"].createElement("div", {
+          className: "PaddingBottomS"
+        }, /*#__PURE__*/React__default$1["default"].createElement("a", {
+          className: "ButtonPrimary",
+          title: "Approving payment token - please wait",
+          href: approvalTransaction === null || approvalTransaction === void 0 ? void 0 : approvalTransaction.url,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Approving")));
+      }
+    };
 
     var mainAction = function mainAction() {
       if (paymentState == 'initialized' || paymentState == 'approving') {
@@ -2992,10 +3227,10 @@
               navigate: navigate
             });
           }
-        }, "Pay ", new depayLocalCurrency.Currency({
+        }, "Pay ", amount ? new localCurrency.Currency({
           amount: amount.toFixed(2),
           code: currencyCode
-        }).toString());
+        }).toString() : paymentValue.toString().length ? paymentValue.toString() : "".concat(payment.amount));
       } else if (paymentState == 'paying') {
         return /*#__PURE__*/React__default$1["default"].createElement("a", {
           className: "ButtonPrimary",
@@ -3005,39 +3240,51 @@
           rel: "noopener noreferrer"
         }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Paying"));
       } else if (paymentState == 'confirmed') {
-        return /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary round",
-          title: "Done",
-          onClick: close
-        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, null));
+        if (tracking == true) {
+          if (forward) {
+            if (forwardTo) {
+              return /*#__PURE__*/React__default$1["default"].createElement("a", {
+                className: "ButtonPrimary",
+                href: forwardTo,
+                rel: "noopener noreferrer"
+              }, "Continue");
+            } else {
+              return /*#__PURE__*/React__default$1["default"].createElement("button", {
+                className: "ButtonPrimary",
+                onClick: close
+              }, "Continue");
+            }
+          } else {
+            return /*#__PURE__*/React__default$1["default"].createElement("button", {
+              className: "ButtonPrimary disabled",
+              onClick: function onClick() {}
+            }, "Continue");
+          }
+        } else {
+          return /*#__PURE__*/React__default$1["default"].createElement("button", {
+            className: "ButtonPrimary",
+            onClick: close
+          }, "Close");
+        }
       }
     };
 
-    var approvalAction = function approvalAction() {
-      if (paymentState == 'initialized') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary wide",
-          onClick: approve,
-          title: "Allow ".concat(payment.symbol, " to be used as payment")
-        }, "Allow ", payment.symbol, " to be used as payment"));
-      } else if (paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("a", {
-          className: "ButtonPrimary wide",
-          title: "Approving payment token - please wait",
-          href: approvalTransaction === null || approvalTransaction === void 0 ? void 0 : approvalTransaction.url,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Approving")));
-      }
-    };
+    return /*#__PURE__*/React__default$1["default"].createElement("div", null, approvalButton(), additionalPaymentInformation(), mainAction());
+  });
 
-    var actions = function actions() {
-      return /*#__PURE__*/React__default$1["default"].createElement("div", null, payment.route.approvalRequired && !payment.route.directTransfer && approvalAction(), mainAction());
-    };
+  var DonationOverviewDialog = (function (props) {
+    var _useContext = React.useContext(ConfigurationContext),
+        currencyCode = _useContext.currencyCode;
+
+    var _useContext2 = React.useContext(ChangableAmountContext),
+        amount = _useContext2.amount;
+
+    var _useContext3 = React.useContext(PaymentContext),
+        payment = _useContext3.payment,
+        paymentState = _useContext3.paymentState;
+
+    var _useContext4 = React.useContext(reactDialogStack.NavigateStackContext),
+        navigate = _useContext4.navigate;
 
     if (payment == undefined) {
       return /*#__PURE__*/React__default$1["default"].createElement(DonationOverviewSkeleton, null);
@@ -3045,9 +3292,9 @@
 
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Donation")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -3071,7 +3318,7 @@
         className: "CardText"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, new depayLocalCurrency.Currency({
+      }, new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString())))), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3089,7 +3336,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3110,13 +3357,13 @@
         className: "CardAction"
       }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null)))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
-      }, actions())
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default$1["default"].createElement(Footer, null))
     });
   });
 
   var PaymentErrorDialog = (function () {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(PaymentContext),
@@ -3148,9 +3395,9 @@
         rel: "noopener noreferrer"
       }, "View on explorer")))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default$1["default"].createElement("button", {
-        className: "ButtonPrimary wide",
+        className: "ButtonPrimary",
         onClick: function onClick() {
           return navigate('back');
         }
@@ -3164,16 +3411,16 @@
     var _useContext = React.useContext(PaymentContext),
         payment = _useContext.payment;
 
-    var _useContext2 = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext2 = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext2.navigate;
 
-    var blockchain = depayWeb3Blockchains.Blockchain.findByName(payment.route.blockchain);
+    var blockchain = web3Blockchains.Blockchain.findByName(payment.route.blockchain);
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       stacked: true,
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Wrong Network")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -3190,7 +3437,7 @@
         className: "FontSizeM"
       }, "Please make sure you connect your wallet to the correct network before you try again!"))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default$1["default"].createElement("button", {
         className: "ButtonPrimary",
         onClick: function onClick() {
@@ -3205,7 +3452,7 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "DonationOverview",
@@ -3221,16 +3468,122 @@
     });
   });
 
-  var UpdateProvider = (function (props) {
-    var _useState = React.useState(true),
+  var TrackingProvider = (function (props) {
+    var _useContext = React.useContext(ConfigurationContext),
+        track = _useContext.track;
+
+    var _useState = React.useState(track && !!track.endpoint),
         _useState2 = _slicedToArray(_useState, 2),
-        update = _useState2[0],
-        setUpdate = _useState2[1];
+        tracking = _useState2[0],
+        setTracking = _useState2[1];
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        forward = _useState4[0],
+        setForward = _useState4[1];
+
+    var _useState5 = React.useState(),
+        _useState6 = _slicedToArray(_useState5, 2),
+        forwardTo = _useState6[0],
+        setForwardTo = _useState6[1];
+
+    var _useContext2 = React.useContext(ClosableContext),
+        setClosable = _useContext2.setClosable;
+
+    React.useEffect(function () {
+      setTracking(track && !!track.endpoint);
+    }, [track]);
+
+    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: 'PaymentChannel'
+          })
+        };
+        socket.send(JSON.stringify(msg));
+      };
 
-    return /*#__PURE__*/React__default$1["default"].createElement(UpdateContext.Provider, {
+      socket.onclose = function (event) {};
+
+      socket.onmessage = function (event) {
+        var item = JSON.parse(event.data);
+
+        if (item.type === "ping") {
+          return;
+        }
+
+        if (item.message && item.message.forward) {
+          setClosable(!item.message.forward_to);
+          setForwardTo(item.message.forward_to);
+          setForward(item.message.forward);
+          socket.close();
+
+          if (!!item.message.forward_to) {
+            setTimeout(function () {
+              props.document.location.href = item.message.forward_to;
+            }, 500);
+          }
+        }
+      };
+
+      socket.onerror = function (error) {
+        console.log('WebSocket Error: ' + error);
+      };
+    };
+
+    var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+      attempt = parseInt(attempt || 1, 10);
+      console.log('RETRY TRACKING ATTEMPT ', attempt);
+
+      if (attempt < 3) {
+        setTimeout(function () {
+          startTracking(transaction, afterBlock, attempt + 1);
+        }, 3000);
+      } else {
+        console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
+      }
+    };
+
+    var startTracking = function startTracking(transaction, afterBlock, attempt) {
+      fetch(track.endpoint, {
+        method: 'POST',
+        body: JSON.stringify({
+          blockchain: transaction.blockchain,
+          transaction: transaction.id.toLowerCase(),
+          sender: transaction.from.toLowerCase(),
+          nonce: transaction.nonce,
+          after_block: afterBlock
+        })
+      }).then(function (response) {
+        if (response.status == 200) {
+          console.log('TRACKING INITIALIZED');
+        } else {
+          retryStartTracking(transaction, afterBlock, attempt);
+        }
+      })["catch"](function (error) {
+        console.log('TRACKING FAILED', error);
+        retryStartTracking(transaction, afterBlock, attempt);
+      });
+    };
+
+    var initializeTracking = function initializeTracking(transaction, afterBlock) {
+      openSocket(transaction);
+      startTracking(transaction, afterBlock);
+    };
+
+    return /*#__PURE__*/React__default$1["default"].createElement(TrackingContext.Provider, {
       value: {
-        update: update,
-        setUpdate: setUpdate
+        tracking: tracking,
+        initializeTracking: initializeTracking,
+        forward: forward,
+        forwardTo: forwardTo
       }
     }, props.children);
   });
@@ -3333,12 +3686,12 @@
 
   var Donation = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, accept, event, sent, confirmed, ensured, failed, error, critical, style, blacklist, providers, currency, connected, closed, document, unmount;
+      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, document, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, ensured = _ref3.ensured, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, document = _ref3.document;
+              amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$2({
@@ -3364,26 +3717,27 @@
                       event: event,
                       sent: sent,
                       confirmed: confirmed,
-                      ensured: ensured,
                       failed: failed,
                       blacklist: blacklist,
                       providers: providers
                     }
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
+                  }, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
                     container: container,
                     connected: connected,
                     unmount: unmount
                   }, /*#__PURE__*/React__default$1["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ChangableAmountProvider, {
                     accept: accept
+                  }, /*#__PURE__*/React__default$1["default"].createElement(TrackingProvider, {
+                    document: ensureDocument(document)
                   }, /*#__PURE__*/React__default$1["default"].createElement(DonationRoutingProvider, {
                     container: container,
                     document: document
                   }, /*#__PURE__*/React__default$1["default"].createElement(DonationStack, {
                     document: document,
                     container: container
-                  })))))))));
+                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -3451,9 +3805,9 @@
 
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Payment")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -3467,7 +3821,7 @@
         className: "SkeletonBackground"
       }))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "SkeletonWrapper"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3482,96 +3836,29 @@
     var _useContext = React.useContext(ConfigurationContext),
         currencyCode = _useContext.currencyCode;
 
-    var _useContext2 = React.useContext(ChangableAmountContext),
-        amount = _useContext2.amount,
-        amountsMissing = _useContext2.amountsMissing;
+    var _useContext2 = React.useContext(PaymentContext),
+        payment = _useContext2.payment,
+        paymentState = _useContext2.paymentState;
 
-    var _useContext3 = React.useContext(PaymentContext),
-        payment = _useContext3.payment,
-        paymentState = _useContext3.paymentState,
-        pay = _useContext3.pay,
-        transaction = _useContext3.transaction,
-        approve = _useContext3.approve,
-        approvalTransaction = _useContext3.approvalTransaction;
+    var _useContext3 = React.useContext(ChangableAmountContext),
+        amount = _useContext3.amount,
+        amountsMissing = _useContext3.amountsMissing;
 
     var _useContext4 = React.useContext(PaymentValueContext),
         paymentValue = _useContext4.paymentValue;
 
-    var _useContext5 = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext5 = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext5.navigate;
 
-    var _useContext6 = React.useContext(ClosableContext),
-        close = _useContext6.close;
-
-    var mainAction = function mainAction() {
-      if (paymentState == 'initialized' || paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
-          onClick: function onClick() {
-            if (payment.route.approvalRequired && !payment.route.directTransfer) {
-              return;
-            }
-
-            pay({
-              navigate: navigate
-            });
-          }
-        }, "Pay ", amount ? new depayLocalCurrency.Currency({
-          amount: amount.toFixed(2),
-          code: currencyCode
-        }).toString() : paymentValue.toString().length ? paymentValue.toString() : "".concat(payment.amount));
-      } else if (paymentState == 'paying') {
-        return /*#__PURE__*/React__default$1["default"].createElement("a", {
-          className: "ButtonPrimary",
-          title: "Performing the payment - please wait",
-          href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Paying"));
-      } else if (paymentState == 'confirmed') {
-        return /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary round",
-          title: "Done",
-          onClick: close
-        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, null));
-      }
-    };
-
-    var approvalAction = function approvalAction() {
-      if (paymentState == 'initialized') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary wide",
-          onClick: approve,
-          title: "Allow ".concat(payment.symbol, " to be used as payment")
-        }, "Allow ", payment.symbol, " to be used as payment"));
-      } else if (paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("a", {
-          className: "ButtonPrimary wide",
-          title: "Approving payment token - please wait",
-          href: approvalTransaction === null || approvalTransaction === void 0 ? void 0 : approvalTransaction.url,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Approving")));
-      }
-    };
-
-    var actions = function actions() {
-      return /*#__PURE__*/React__default$1["default"].createElement("div", null, payment.route.approvalRequired && !payment.route.directTransfer && approvalAction(), mainAction());
-    };
-
     if (payment == undefined || paymentValue == undefined) {
       return /*#__PURE__*/React__default$1["default"].createElement(PaymentOverviewSkeleton, null);
     }
 
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Payment")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -3595,7 +3882,7 @@
         className: "CardText"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, new depayLocalCurrency.Currency({
+      }, new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString())))), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3613,7 +3900,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3634,8 +3921,8 @@
         className: "CardAction"
       }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null)))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
-      }, actions())
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default$1["default"].createElement(Footer, null))
     });
   });
 
@@ -3644,7 +3931,7 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "PaymentOverview",
@@ -3701,12 +3988,12 @@
 
   var Payment = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var accept, amount, event, sent, confirmed, ensured, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, document, unmount;
+      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, 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, ensured = _ref3.ensured, 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, 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, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$1({
@@ -3732,15 +4019,15 @@
                       event: event,
                       sent: sent,
                       confirmed: confirmed,
-                      ensured: ensured,
                       failed: failed,
                       whitelist: whitelist,
                       blacklist: blacklist,
-                      providers: providers
+                      providers: providers,
+                      track: track
                     }
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
+                  }, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
                     document: document,
                     container: container,
                     connected: connected,
@@ -3752,13 +4039,15 @@
                     whitelist: whitelist,
                     blacklist: blacklist,
                     event: event
+                  }, /*#__PURE__*/React__default$1["default"].createElement(TrackingProvider, {
+                    document: ensureDocument(document)
                   }, /*#__PURE__*/React__default$1["default"].createElement(PaymentProvider, {
                     container: container,
                     document: document
                   }, /*#__PURE__*/React__default$1["default"].createElement(PaymentValueProvider, null, /*#__PURE__*/React__default$1["default"].createElement(PaymentStack, {
                     document: document,
                     container: container
-                  })))))))))));
+                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -3868,9 +4157,9 @@
   var SaleOverviewSkeleton = (function (props) {
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Purchase")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -3887,7 +4176,7 @@
         className: "SkeletonBackground"
       }))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "SkeletonWrapper"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3899,101 +4188,34 @@
   });
 
   var SaleOverviewDialog = (function (props) {
-    var _useContext = React.useContext(ChangableAmountContext),
-        amount = _useContext.amount;
+    var _useContext = React.useContext(ChangableAmountContext);
+        _useContext.amount;
 
     var _useContext2 = React.useContext(ConfigurationContext),
-        currencyCode = _useContext2.currencyCode;
+        tokenImage = _useContext2.tokenImage;
 
     var _useContext3 = React.useContext(PaymentValueContext),
         paymentValue = _useContext3.paymentValue;
 
     var _useContext4 = React.useContext(PaymentContext),
         payment = _useContext4.payment,
-        paymentState = _useContext4.paymentState,
-        pay = _useContext4.pay,
-        transaction = _useContext4.transaction,
-        approve = _useContext4.approve,
-        approvalTransaction = _useContext4.approvalTransaction;
+        paymentState = _useContext4.paymentState;
 
-    var _useContext5 = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext5 = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext5.navigate;
 
-    var _useContext6 = React.useContext(ClosableContext),
-        close = _useContext6.close;
-
-    var _useContext7 = React.useContext(ToTokenContext),
-        toToken = _useContext7.toToken,
-        toTokenReadableAmount = _useContext7.toTokenReadableAmount;
+    var _useContext6 = React.useContext(ToTokenContext),
+        toToken = _useContext6.toToken,
+        toTokenReadableAmount = _useContext6.toTokenReadableAmount;
 
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
         salePerTokenValue = _useState2[0],
         setSalePerTokenValue = _useState2[1];
 
-    var mainAction = function mainAction() {
-      if (paymentState == 'initialized' || paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
-          onClick: function onClick() {
-            if (payment.route.approvalRequired && !payment.route.directTransfer) {
-              return;
-            }
-
-            pay({
-              navigate: navigate
-            });
-          }
-        }, "Pay ", new depayLocalCurrency.Currency({
-          amount: amount.toFixed(2),
-          code: currencyCode
-        }).toString());
-      } else if (paymentState == 'paying') {
-        return /*#__PURE__*/React__default$1["default"].createElement("a", {
-          className: "ButtonPrimary",
-          title: "Performing the payment - please wait",
-          href: transaction === null || transaction === void 0 ? void 0 : transaction.url,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Paying"));
-      } else if (paymentState == 'confirmed') {
-        return /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary round",
-          title: "Done",
-          onClick: close
-        }, /*#__PURE__*/React__default$1["default"].createElement(Checkmark, null));
-      }
-    };
-
-    var approvalAction = function approvalAction() {
-      if (paymentState == 'initialized') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("button", {
-          className: "ButtonPrimary wide",
-          onClick: approve,
-          title: "Allow ".concat(payment.symbol, " to be used as payment")
-        }, "Allow ", payment.symbol, " to be used as payment"));
-      } else if (paymentState == 'approving') {
-        return /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "PaddingBottomS"
-        }, /*#__PURE__*/React__default$1["default"].createElement("a", {
-          className: "ButtonPrimary wide",
-          title: "Approving payment token - please wait",
-          href: approvalTransaction === null || approvalTransaction === void 0 ? void 0 : approvalTransaction.url,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }, /*#__PURE__*/React__default$1["default"].createElement(LoadingText, null, "Approving")));
-      }
-    };
-
-    var actions = function actions() {
-      return /*#__PURE__*/React__default$1["default"].createElement("div", null, payment.route.approvalRequired && !payment.route.directTransfer && approvalAction(), mainAction());
-    };
-
     React.useEffect(function () {
       if (paymentValue) {
-        setSalePerTokenValue(new depayLocalCurrency.Currency({
+        setSalePerTokenValue(new localCurrency.Currency({
           amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
           code: paymentValue.code
         }).toString());
@@ -4004,11 +4226,24 @@
       return /*#__PURE__*/React__default$1["default"].createElement(SaleOverviewSkeleton, null);
     }
 
+    var tokenImageElement;
+
+    if (tokenImage) {
+      tokenImageElement = /*#__PURE__*/React__default$1["default"].createElement("img", {
+        src: tokenImage
+      });
+    } else {
+      tokenImageElement = /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
+        blockchain: payment.route.blockchain,
+        address: toToken.address
+      });
+    }
+
     return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM"
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
       }, /*#__PURE__*/React__default$1["default"].createElement("h1", {
-        className: "LineHeightL FontSizeL TextLeft"
+        className: "LineHeightL FontSizeL"
       }, "Purchase")),
       body: /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -4025,10 +4260,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
-        blockchain: payment.route.blockchain,
-        address: toToken.address
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, tokenImageElement), /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardBody"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardBodyWrapper"
@@ -4059,7 +4291,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -4080,8 +4312,8 @@
         className: "CardAction"
       }, /*#__PURE__*/React__default$1["default"].createElement(ChevronRight, null)))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
-        className: "PaddingTopXS PaddingRightM PaddingLeftM"
-      }, actions())
+        className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default$1["default"].createElement(Footer, null))
     });
   });
 
@@ -4090,7 +4322,7 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SaleOverview",
@@ -4154,12 +4386,12 @@
 
   var Sale = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, sell, sent, confirmed, ensured, failed, error, critical, style, blacklist, providers, currency, connected, closed, document, accept, unmount;
+      var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, document, accept, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              amount = _ref3.amount, sell = _ref3.sell, sent = _ref3.sent, confirmed = _ref3.confirmed, ensured = _ref3.ensured, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, document = _ref3.document;
+              amount = _ref3.amount, sell = _ref3.sell, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, tokenImage = _ref3.tokenImage, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight({
@@ -4185,31 +4417,33 @@
                     unmount: unmount
                   }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
                     configuration: {
+                      tokenImage: tokenImage,
                       amount: amount,
                       sell: sell,
                       currency: currency,
                       sent: sent,
                       confirmed: confirmed,
-                      ensured: ensured,
                       failed: failed,
                       blacklist: blacklist,
                       providers: providers
                     }
-                  }, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
+                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
                     unmount: unmount
-                  }, /*#__PURE__*/React__default$1["default"].createElement(UpdateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
+                  }, /*#__PURE__*/React__default$1["default"].createElement(WalletProvider, {
                     container: container,
                     connected: connected,
                     unmount: unmount
                   }, /*#__PURE__*/React__default$1["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ChangableAmountProvider, {
                     accept: accept
+                  }, /*#__PURE__*/React__default$1["default"].createElement(TrackingProvider, {
+                    document: ensureDocument(document)
                   }, /*#__PURE__*/React__default$1["default"].createElement(SaleRoutingProvider, {
                     container: container,
                     document: document
                   }, /*#__PURE__*/React__default$1["default"].createElement(SaleStack, {
                     document: document,
                     container: container
-                  })))))))));
+                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))))))))));
                 };
               });
               return _context2.abrupt("return", {
@@ -4243,7 +4477,7 @@
     Payment: Payment,
     Sale: Sale,
     Donation: Donation,
-    provider: depayWeb3Client.provider
+    provider: web3Client.provider
   };
 
   return DePayWidgets;