@depay/widgets 4.2.1 → 4.4.1

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 }; }
 
@@ -969,7 +969,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),
@@ -1009,7 +1009,7 @@ var Dialog$1 = (function (props) {
 });
 
 var ConnectingWalletDialog = (function (props) {
-  var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+  var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext.navigate;
 
   var wallet = props.wallet;
@@ -1086,10 +1086,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 +1125,7 @@ var SelectWalletDialog = (function (props) {
     props.connect(wallet);
   };
 
-  var availableWallets = [depayWeb3Wallets.wallets.WalletConnect];
+  var availableWallets = [web3Wallets.wallets.WalletConnect];
 
   if (wallet) {
     availableWallets.unshift(wallet);
@@ -1233,7 +1233,7 @@ var ConnectStack = (function (props) {
   };
 
   React.useEffect(function () {
-    var wallet = depayWeb3Wallets.getWallet();
+    var wallet = web3Wallets.getWallet();
 
     if (wallet) {
       setWallet(wallet);
@@ -1273,7 +1273,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 +1385,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 +1444,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 +1508,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);
@@ -1676,7 +1672,7 @@ var CardStyle = (function (style) {
 });
 
 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      .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  ";
 });
 
 var FontStyle = (function (style) {
@@ -1777,7 +1773,7 @@ var mount = (function (_ref, content) {
     }, 300);
   };
 
-  var _ReactShadowDOM = depayReactShadowDom.ReactShadowDOM({
+  var _ReactShadowDOM = reactShadowDom.ReactShadowDOM({
     document: document,
     element: document.body,
     content: content(unmountShadowDOM),
@@ -1805,7 +1801,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;
@@ -2011,9 +2007,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 +2021,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 +2048,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 +2090,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 +2122,7 @@ var ConversionRateProvider = (function (props) {
       setConversionRate = _useState2[1];
 
   React.useEffect(function () {
-    depayLocalCurrency.Currency.fromUSD({
+    localCurrency.Currency.fromUSD({
       amount: 1,
       code: currency,
       apiKey: apiKey
@@ -2318,7 +2320,7 @@ var PaymentProvider = (function (props) {
   }, [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",
@@ -2401,7 +2403,7 @@ var PaymentRoutingProvider = (function (props) {
       return;
     }
 
-    depayWeb3Payments.route({
+    web3Payments.route({
       accept: props.accept.map(prepareAcceptedPayments),
       whitelist: props.whitelist,
       blacklist: props.blacklist,
@@ -2563,16 +2565,16 @@ var PaymentValueProvider = (function (props) {
       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 +2583,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 +2593,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
@@ -2659,7 +2661,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);
@@ -2823,7 +2825,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([]),
@@ -2869,7 +2871,7 @@ 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("div", {
@@ -2886,11 +2888,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]);
 
@@ -2986,7 +2984,7 @@ var DonationOverviewDialog = (function (props) {
       approve = _useContext3.approve,
       approvalTransaction = _useContext3.approvalTransaction;
 
-  var _useContext4 = React.useContext(depayReactDialogStack.NavigateStackContext),
+  var _useContext4 = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext4.navigate;
 
   var _useContext5 = React.useContext(ClosableContext),
@@ -3005,7 +3003,7 @@ var DonationOverviewDialog = (function (props) {
             navigate: navigate
           });
         }
-      }, "Pay ", new depayLocalCurrency.Currency({
+      }, "Pay ", new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString());
@@ -3084,7 +3082,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 +3100,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", {
@@ -3129,7 +3127,7 @@ var DonationOverviewDialog = (function (props) {
 });
 
 var PaymentErrorDialog = (function () {
-  var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+  var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext.navigate;
 
   var _useContext2 = React.useContext(PaymentContext),
@@ -3177,10 +3175,10 @@ 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", {
@@ -3218,7 +3216,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",
@@ -3510,7 +3508,7 @@ var PaymentOverviewDialog = (function (props) {
   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),
@@ -3529,7 +3527,7 @@ var PaymentOverviewDialog = (function (props) {
             navigate: navigate
           });
         }
-      }, "Pay ", amount ? new depayLocalCurrency.Currency({
+      }, "Pay ", amount ? new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString() : paymentValue.toString().length ? paymentValue.toString() : "".concat(payment.amount));
@@ -3608,7 +3606,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 +3624,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", {
@@ -3657,7 +3655,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",
@@ -3916,7 +3914,8 @@ var SaleOverviewDialog = (function (props) {
       amount = _useContext.amount;
 
   var _useContext2 = React.useContext(ConfigurationContext),
-      currencyCode = _useContext2.currencyCode;
+      currencyCode = _useContext2.currencyCode,
+      tokenImage = _useContext2.tokenImage;
 
   var _useContext3 = React.useContext(PaymentValueContext),
       paymentValue = _useContext3.paymentValue;
@@ -3929,7 +3928,7 @@ var SaleOverviewDialog = (function (props) {
       approve = _useContext4.approve,
       approvalTransaction = _useContext4.approvalTransaction;
 
-  var _useContext5 = React.useContext(depayReactDialogStack.NavigateStackContext),
+  var _useContext5 = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext5.navigate;
 
   var _useContext6 = React.useContext(ClosableContext),
@@ -3957,7 +3956,7 @@ var SaleOverviewDialog = (function (props) {
             navigate: navigate
           });
         }
-      }, "Pay ", new depayLocalCurrency.Currency({
+      }, "Pay ", new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString());
@@ -4006,7 +4005,7 @@ var SaleOverviewDialog = (function (props) {
 
   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,6 +4016,19 @@ 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"
@@ -4038,10 +4050,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 +4081,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", {
@@ -4103,7 +4112,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 +4176,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, ensured, 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, 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, tokenImage = _ref3.tokenImage, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight({
@@ -4198,6 +4207,7 @@ var Sale = /*#__PURE__*/function () {
                   unmount: unmount
                 }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
                   configuration: {
+                    tokenImage: tokenImage,
                     amount: amount,
                     sell: sell,
                     currency: currency,
@@ -4256,7 +4266,7 @@ var DePayWidgets = {
   Payment: Payment,
   Sale: Sale,
   Donation: Donation,
-  provider: depayWeb3Client.provider
+  provider: web3Client.provider
 };
 
 module.exports = DePayWidgets;