@depay/widgets 4.2.2 → 5.0.0

package/dist/cjs/index.js

@@ -1,21 +1,21 @@
 'use strict';
 
 var React = require('react');
-var depayReactDialogStack = require('depay-react-dialog-stack');
-var depayWeb3Wallets = require('depay-web3-wallets');
+var reactDialogStack = require('@depay/react-dialog-stack');
+var web3Wallets = require('@depay/web3-wallets');
 var ReactDOM = require('react-dom');
-var depayReactShadowDom = require('depay-react-shadow-dom');
+var reactShadowDom = require('@depay/react-shadow-dom');
 var ethers = require('ethers');
-var depayWeb3Constants = require('depay-web3-constants');
+var web3Constants = require('@depay/web3-constants');
 var decimal_js = require('decimal.js');
-var depayWeb3Exchanges = require('depay-web3-exchanges');
-var depayWeb3Tokens = require('depay-web3-tokens');
-var depayLocalCurrency = require('depay-local-currency');
-var depayWeb3Client = require('depay-web3-client');
-var depayWeb3Payments = require('depay-web3-payments');
+var web3Exchanges = require('@depay/web3-exchanges');
+var web3Tokens = require('@depay/web3-tokens');
+var localCurrency = require('@depay/local-currency');
+var web3Client = require('@depay/web3-client');
+var web3Payments = require('@depay/web3-payments');
 var Slider = require('react-rangeslider');
-var depayReactTokenImage = require('depay-react-token-image');
-var depayWeb3Blockchains = require('depay-web3-blockchains');
+var reactTokenImage = require('@depay/react-token-image');
+var web3Blockchains = require('@depay/web3-blockchains');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -901,6 +901,8 @@ function _slicedToArray(arr, i) {
 
 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),
@@ -912,11 +914,15 @@ var ClosableProvider = (function (props) {
       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);
   };
@@ -969,7 +975,7 @@ var CloseIcon = (function () {
 });
 
 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),
@@ -1000,16 +1006,11 @@ var Dialog$1 = (function (props) {
     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;
@@ -1055,9 +1056,9 @@ var ConnectingWalletDialog = (function (props) {
         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);
         }
@@ -1086,10 +1087,10 @@ var SelectWalletDialog = (function (props) {
       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) {
@@ -1125,7 +1126,7 @@ var SelectWalletDialog = (function (props) {
     props.connect(wallet);
   };
 
-  var availableWallets = [depayWeb3Wallets.wallets.WalletConnect];
+  var availableWallets = [web3Wallets.wallets.WalletConnect];
 
   if (wallet) {
     availableWallets.unshift(wallet);
@@ -1140,7 +1141,7 @@ var SelectWalletDialog = (function (props) {
         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", {
@@ -1153,9 +1154,9 @@ var SelectWalletDialog = (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"
     }, "Select a wallet")),
     body: /*#__PURE__*/React__default$1["default"].createElement("div", {
       className: "PaddingTopS PaddingBottomXS PaddingLeftS PaddingRightS"
@@ -1163,11 +1164,13 @@ var SelectWalletDialog = (function (props) {
     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."))
   });
@@ -1233,7 +1236,7 @@ var ConnectStack = (function (props) {
   };
 
   React.useEffect(function () {
-    var wallet = depayWeb3Wallets.getWallet();
+    var wallet = web3Wallets.getWallet();
 
     if (wallet) {
       setWallet(wallet);
@@ -1273,7 +1276,7 @@ var ConnectStack = (function (props) {
       }
     }, _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",
@@ -1385,8 +1388,7 @@ function ReactDialogStyle (styles) {
   let background =
     typeof styles === 'object' && styles.background ? styles.background : 'rgba(0,0,0,0.4)';
 
-  return (
-    `
+  return `
     .ReactDialog {
       bottom: 0;
       display: table;
@@ -1445,12 +1447,9 @@ function ReactDialogStyle (styles) {
       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);
@@ -1512,7 +1511,7 @@ class Dialog extends React__default['default'].Component {
   }
 }
 
-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);
@@ -1625,7 +1624,7 @@ var ErrorProvider = (function (props) {
     })), /*#__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
@@ -1643,15 +1642,12 @@ var ErrorProvider = (function (props) {
       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: {
@@ -1663,28 +1659,28 @@ var ErrorProvider = (function (props) {
   }
 });
 
+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 () {
@@ -1696,7 +1692,7 @@ var HeightStyle = (function () {
 });
 
 var IconStyle = (function (style) {
-  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 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) {
@@ -1715,10 +1711,18 @@ var LoadingTextStyle = (function (style) {
   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  ";
 });
@@ -1728,15 +1732,15 @@ var ResetStyle = (function () {
 });
 
 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 () {
@@ -1753,7 +1757,7 @@ var styleRenderer = (function (style) {
     },
     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) {
@@ -1777,7 +1781,7 @@ var mount = (function (_ref, content) {
     }, 300);
   };
 
-  var _ReactShadowDOM = depayReactShadowDom.ReactShadowDOM({
+  var _ReactShadowDOM = reactShadowDom.ReactShadowDOM({
     document: document,
     element: document.body,
     content: content(unmountShadowDOM),
@@ -1789,6 +1793,31 @@ var mount = (function (_ref, content) {
   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;
 
@@ -1805,7 +1834,7 @@ var Connect = function Connect(options) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              wallet = depayWeb3Wallets.getWallet();
+              wallet = web3Wallets.getWallet();
 
               if (!wallet) {
                 _context.next = 7;
@@ -1844,7 +1873,7 @@ var Connect = function Connect(options) {
                     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,
@@ -1852,7 +1881,7 @@ var Connect = function Connect(options) {
                     resolve: resolve,
                     reject: reject,
                     autoClose: true
-                  })));
+                  }), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null))));
                 };
               });
 
@@ -2011,9 +2040,9 @@ var ChangableAmountProvider = (function (props) {
   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,
@@ -2025,19 +2054,25 @@ var ChangableAmountProvider = (function (props) {
             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);
@@ -2046,23 +2081,23 @@ var ChangableAmountProvider = (function (props) {
   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());
@@ -2088,13 +2123,13 @@ var ChangableAmountProvider = (function (props) {
 });
 
 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]);
@@ -2120,7 +2155,7 @@ var ConversionRateProvider = (function (props) {
       setConversionRate = _useState2[1];
 
   React.useEffect(function () {
-    depayLocalCurrency.Currency.fromUSD({
+    localCurrency.Currency.fromUSD({
       amount: 1,
       code: currency,
       apiKey: apiKey
@@ -2159,7 +2194,9 @@ var NoPaymentMethodFoundDialog = (function () {
     }, /*#__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"))
@@ -2170,7 +2207,7 @@ var PaymentContext = /*#__PURE__*/React__default$1["default"].createContext();
 
 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),
@@ -2179,7 +2216,6 @@ var PaymentProvider = (function (props) {
   var _useContext2 = React.useContext(ConfigurationContext),
       _sent = _useContext2.sent,
       _confirmed = _useContext2.confirmed,
-      _ensured = _useContext2.ensured,
       _failed = _useContext2.failed;
 
   var _useContext3 = React.useContext(PaymentRoutingContext),
@@ -2193,13 +2229,17 @@ var PaymentProvider = (function (props) {
   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],
@@ -2220,53 +2260,81 @@ var PaymentProvider = (function (props) {
       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);
@@ -2287,15 +2355,20 @@ var PaymentProvider = (function (props) {
     });
   };
 
+  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,
@@ -2311,14 +2384,14 @@ var PaymentProvider = (function (props) {
   }, [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",
@@ -2379,8 +2452,8 @@ var PaymentRoutingProvider = (function (props) {
   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;
@@ -2395,13 +2468,13 @@ var PaymentRoutingProvider = (function (props) {
   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,
@@ -2500,13 +2573,13 @@ var PaymentRoutingProvider = (function (props) {
       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);
@@ -2536,8 +2609,8 @@ var PaymentValueProvider = (function (props) {
   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;
@@ -2556,23 +2629,23 @@ var PaymentValueProvider = (function (props) {
       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],
@@ -2581,7 +2654,7 @@ var PaymentValueProvider = (function (props) {
       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('');
@@ -2591,7 +2664,7 @@ var PaymentValueProvider = (function (props) {
       }
 
       var USDValue = ethers.ethers.utils.formatUnits(USDAmount, USDDecimals);
-      depayLocalCurrency.Currency.fromUSD({
+      localCurrency.Currency.fromUSD({
         amount: USDValue,
         code: currency,
         apiKey: apiKey
@@ -2602,7 +2675,7 @@ var PaymentValueProvider = (function (props) {
   React.useEffect(function () {
     if (account && payment) {
       getToTokenLocalValue({
-        update: update,
+        updatable: updatable,
         payment: payment
       });
     }
@@ -2611,13 +2684,13 @@ var PaymentValueProvider = (function (props) {
     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
@@ -2659,7 +2732,7 @@ var format = (function (input) {
 });
 
 var ChangeAmountDialog = (function (props) {
-  var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+  var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext.navigate;
 
   var _useContext2 = React.useContext(ErrorContext);
@@ -2772,7 +2845,9 @@ var ChangeAmountDialog = (function (props) {
         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"))
@@ -2823,7 +2898,7 @@ var ChangePaymentDialog = (function (props) {
   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([]),
@@ -2859,6 +2934,7 @@ var ChangePaymentDialog = (function (props) {
   }, [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",
@@ -2869,9 +2945,14 @@ var ChangePaymentDialog = (function (props) {
         }
       }, /*#__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", {
@@ -2886,11 +2967,7 @@ var ChangePaymentDialog = (function (props) {
         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]);
 
@@ -2916,25 +2993,12 @@ var ChangePaymentDialog = (function (props) {
   });
 });
 
-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"
@@ -2948,7 +3012,7 @@ var DonationOverviewSkeleton = (function (props) {
       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", {
@@ -2959,6 +3023,60 @@ var DonationOverviewSkeleton = (function (props) {
   });
 });
 
+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"
@@ -2971,26 +3089,143 @@ var LoadingText = (function (props) {
   }, "."));
 });
 
-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') {
@@ -3005,10 +3240,10 @@ var DonationOverviewDialog = (function (props) {
             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",
@@ -3018,39 +3253,51 @@ var DonationOverviewDialog = (function (props) {
         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);
@@ -3058,9 +3305,9 @@ var DonationOverviewDialog = (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"
@@ -3084,7 +3331,7 @@ var DonationOverviewDialog = (function (props) {
       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", {
@@ -3102,7 +3349,7 @@ var DonationOverviewDialog = (function (props) {
     }, /*#__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", {
@@ -3123,13 +3370,13 @@ var DonationOverviewDialog = (function (props) {
       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),
@@ -3161,9 +3408,9 @@ var PaymentErrorDialog = (function () {
       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');
       }
@@ -3177,16 +3424,16 @@ var WrongNetworkDialog = (function (props) {
   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"
@@ -3203,7 +3450,7 @@ var WrongNetworkDialog = (function (props) {
       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() {
@@ -3218,7 +3465,7 @@ var DonationStack = (function (props) {
       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",
@@ -3234,16 +3481,122 @@ var DonationStack = (function (props) {
   });
 });
 
-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);
 });
@@ -3346,12 +3699,12 @@ var preflight$2 = /*#__PURE__*/function () {
 
 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({
@@ -3377,26 +3730,27 @@ var Donation = /*#__PURE__*/function () {
                     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", {
@@ -3464,9 +3818,9 @@ var PaymentOverviewSkeleton = (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"
     }, "Payment")),
     body: /*#__PURE__*/React__default$1["default"].createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM PaddingBottomXS"
@@ -3480,7 +3834,7 @@ var PaymentOverviewSkeleton = (function (props) {
       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", {
@@ -3495,96 +3849,29 @@ var PaymentOverviewDialog = (function (props) {
   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"
@@ -3608,7 +3895,7 @@ var PaymentOverviewDialog = (function (props) {
       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", {
@@ -3626,7 +3913,7 @@ var PaymentOverviewDialog = (function (props) {
     }, /*#__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", {
@@ -3647,8 +3934,8 @@ var PaymentOverviewDialog = (function (props) {
       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))
   });
 });
 
@@ -3657,7 +3944,7 @@ var PaymentStack = (function (props) {
       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",
@@ -3714,12 +4001,12 @@ var preflight$1 = /*#__PURE__*/function () {
 
 var Payment = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var accept, amount, event, sent, confirmed, 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({
@@ -3745,15 +4032,15 @@ var Payment = /*#__PURE__*/function () {
                     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,
@@ -3765,13 +4052,15 @@ var Payment = /*#__PURE__*/function () {
                   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", {
@@ -3881,9 +4170,9 @@ var SaleRoutingProvider = (function (props) {
 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"
@@ -3900,7 +4189,7 @@ var SaleOverviewSkeleton = (function (props) {
       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", {
@@ -3912,101 +4201,34 @@ var SaleOverviewSkeleton = (function (props) {
 });
 
 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());
@@ -4017,11 +4239,24 @@ var SaleOverviewDialog = (function (props) {
     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"
@@ -4038,10 +4273,7 @@ var SaleOverviewDialog = (function (props) {
     }, /*#__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"
@@ -4072,7 +4304,7 @@ var SaleOverviewDialog = (function (props) {
     }, /*#__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", {
@@ -4093,8 +4325,8 @@ var SaleOverviewDialog = (function (props) {
       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))
   });
 });
 
@@ -4103,7 +4335,7 @@ var SaleStack = (function (props) {
       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",
@@ -4167,12 +4399,12 @@ var preflight = /*#__PURE__*/function () {
 
 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({
@@ -4198,31 +4430,33 @@ var Sale = /*#__PURE__*/function () {
                   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", {
@@ -4256,7 +4490,7 @@ var DePayWidgets = {
   Payment: Payment,
   Sale: Sale,
   Donation: Donation,
-  provider: depayWeb3Client.provider
+  provider: web3Client.provider
 };
 
 module.exports = DePayWidgets;