@depay/widgets 4.2.1 → 4.4.1

package/dist/umd/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('depay-react-dialog-stack'), require('depay-web3-wallets'), require('react-dom'), require('depay-react-shadow-dom'), require('ethers'), require('depay-web3-constants'), require('decimal.js'), require('depay-web3-exchanges'), require('depay-web3-tokens'), require('depay-local-currency'), require('depay-web3-client'), require('depay-web3-payments'), require('react-rangeslider'), require('depay-react-token-image'), require('depay-web3-blockchains')) :
-  typeof define === 'function' && define.amd ? define(['react', 'depay-react-dialog-stack', 'depay-web3-wallets', 'react-dom', 'depay-react-shadow-dom', 'ethers', 'depay-web3-constants', 'decimal.js', 'depay-web3-exchanges', 'depay-web3-tokens', 'depay-local-currency', 'depay-web3-client', 'depay-web3-payments', 'react-rangeslider', 'depay-react-token-image', 'depay-web3-blockchains'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image'), require('@depay/web3-blockchains')) :
+  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image', '@depay/web3-blockchains'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage, global.Web3Blockchains));
-})(this, (function (React, depayReactDialogStack, depayWeb3Wallets, ReactDOM, depayReactShadowDom, ethers, depayWeb3Constants, decimal_js, depayWeb3Exchanges, depayWeb3Tokens, depayLocalCurrency, depayWeb3Client, depayWeb3Payments, Slider, depayReactTokenImage, depayWeb3Blockchains) { 'use strict';
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, Slider, reactTokenImage, web3Blockchains) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -956,7 +956,7 @@
   });
 
   var Dialog$1 = (function (props) {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(ClosableContext),
@@ -996,7 +996,7 @@
   });
 
   var ConnectingWalletDialog = (function (props) {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var wallet = props.wallet;
@@ -1073,10 +1073,10 @@
         showExplanation = _useState2[0],
         setShowExplanation = _useState2[1];
 
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
-    var wallet = depayWeb3Wallets.getWallet();
+    var wallet = web3Wallets.getWallet();
     React.useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
       var accounts;
       return regenerator.wrap(function _callee$(_context) {
@@ -1112,7 +1112,7 @@
       props.connect(wallet);
     };
 
-    var availableWallets = [depayWeb3Wallets.wallets.WalletConnect];
+    var availableWallets = [web3Wallets.wallets.WalletConnect];
 
     if (wallet) {
       availableWallets.unshift(wallet);
@@ -1220,7 +1220,7 @@
     };
 
     React.useEffect(function () {
-      var wallet = depayWeb3Wallets.getWallet();
+      var wallet = web3Wallets.getWallet();
 
       if (wallet) {
         setWallet(wallet);
@@ -1260,7 +1260,7 @@
         }
       }, _callee2);
     })), [wallet]);
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SelectWallet",
@@ -1372,8 +1372,7 @@
     let background =
       typeof styles === 'object' && styles.background ? styles.background : 'rgba(0,0,0,0.4)';
 
-    return (
-      `
+    return `
     .ReactDialog {
       bottom: 0;
       display: table;
@@ -1432,12 +1431,9 @@
       top: -5vh;
     }
   `
-    )
   }
 
-  const _jsxFileName = "/Users/sebastian/Work/DePay/depay-react-dialog/src/components/Dialog.jsx";
-
-
+  const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
   class Dialog extends React__default['default'].Component {
     constructor(props) {
       super(props);
@@ -1499,7 +1495,7 @@
     }
   }
 
-  const _jsxFileName$1 = "/Users/sebastian/Work/DePay/depay-react-dialog/src/index.jsx";
+  const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
   class ReactDialog extends React__default['default'].Component {
     constructor(props) {
       super(props);
@@ -1663,7 +1659,7 @@
   });
 
   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) {
@@ -1764,7 +1760,7 @@
       }, 300);
     };
 
-    var _ReactShadowDOM = depayReactShadowDom.ReactShadowDOM({
+    var _ReactShadowDOM = reactShadowDom.ReactShadowDOM({
       document: document,
       element: document.body,
       content: content(unmountShadowDOM),
@@ -1792,7 +1788,7 @@
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                wallet = depayWeb3Wallets.getWallet();
+                wallet = web3Wallets.getWallet();
 
                 if (!wallet) {
                   _context.next = 7;
@@ -1998,9 +1994,9 @@
     React.useEffect(function () {
       if (amountsMissing && account && conversionRate) {
         Promise.all(props.accept.map(function (configuration) {
-          return depayWeb3Exchanges.route({
+          return web3Exchanges.route({
             blockchain: configuration.blockchain,
-            tokenIn: depayWeb3Constants.CONSTANTS[configuration.blockchain].USD,
+            tokenIn: web3Constants.CONSTANTS[configuration.blockchain].USD,
             amountIn: 1.00 / conversionRate * amount,
             tokenOut: configuration.token,
             fromAddress: account,
@@ -2012,19 +2008,25 @@
               return;
             }
 
-            return depayWeb3Tokens.Token.readable({
+            return web3Tokens.Token.readable({
               blockchain: props.accept[index].blockchain,
               amount: routes[0].amountOut,
               address: routes[0].tokenOut
             });
           })).then(function (amounts) {
             setAcceptWithAmount(props.accept.map(function (configuration, index) {
+              if (amounts[index] == undefined) {
+                return;
+              }
+
               return {
                 blockchain: configuration.blockchain,
-                amount: round(amounts[index]) || 1,
+                amount: round(amounts[index]),
                 token: configuration.token,
                 receiver: configuration.receiver || account
               };
+            }).filter(function (configuration) {
+              return !!configuration;
             }));
           })["catch"](setError);
         })["catch"](setError);
@@ -2033,23 +2035,23 @@
     React.useEffect(function () {
       if (amountsMissing && maxRoute) {
         maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-          if (maxRoute.fromToken.address == depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD) {
+          if (maxRoute.fromToken.address == web3Constants.CONSTANTS[maxRoute.blockchain].USD) {
             var _maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).mul(conversionRate).toString());
 
             setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount) : _maxAmount);
           } else {
-            depayWeb3Exchanges.route({
+            web3Exchanges.route({
               blockchain: maxRoute.blockchain,
               tokenIn: maxRoute.fromToken.address,
-              tokenOut: depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD,
+              tokenOut: web3Constants.CONSTANTS[maxRoute.blockchain].USD,
               amountIn: parseFloat(readableMaxAmount),
               fromAddress: account,
               toAddress: account
             }).then(function (routes) {
-              depayWeb3Tokens.Token.readable({
+              web3Tokens.Token.readable({
                 amount: routes[0].amountOut,
                 blockchain: maxRoute.blockchain,
-                address: depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD
+                address: web3Constants.CONSTANTS[maxRoute.blockchain].USD
               }).then(function (readableMaxAmount) {
                 var slippage = 1.01;
                 var maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
@@ -2075,13 +2077,13 @@
   });
 
   var ConfigurationProvider = (function (props) {
-    var currencyCode = new depayLocalCurrency.Currency({
+    var currencyCode = new localCurrency.Currency({
       code: props.configuration.currency
     }).code;
     React.useEffect(function () {
       if (props.configuration.providers != undefined) {
         Object.entries(props.configuration.providers).forEach(function (entry) {
-          depayWeb3Client.setProvider(entry[0], entry[1]);
+          web3Client.setProviderEndpoints(entry[0], entry[1]);
         });
       }
     }, [props.configuration]);
@@ -2107,7 +2109,7 @@
         setConversionRate = _useState2[1];
 
     React.useEffect(function () {
-      depayLocalCurrency.Currency.fromUSD({
+      localCurrency.Currency.fromUSD({
         amount: 1,
         code: currency,
         apiKey: apiKey
@@ -2305,7 +2307,7 @@
     }, [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",
@@ -2388,7 +2390,7 @@
         return;
       }
 
-      depayWeb3Payments.route({
+      web3Payments.route({
         accept: props.accept.map(prepareAcceptedPayments),
         whitelist: props.whitelist,
         blacklist: props.blacklist,
@@ -2550,16 +2552,16 @@
         return;
       }
 
-      Promise.all([depayWeb3Exchanges.route({
+      Promise.all([web3Exchanges.route({
         blockchain: payment.route.blockchain,
         tokenIn: payment.route.toToken.address,
-        tokenOut: depayWeb3Constants.CONSTANTS[payment.route.blockchain].USD,
+        tokenOut: web3Constants.CONSTANTS[payment.route.blockchain].USD,
         amountIn: payment.route.toAmount,
         fromAddress: account,
         toAddress: account
-      }), new depayWeb3Tokens.Token({
+      }), new web3Tokens.Token({
         blockchain: payment.route.blockchain,
-        address: depayWeb3Constants.CONSTANTS[payment.route.blockchain].USD
+        address: web3Constants.CONSTANTS[payment.route.blockchain].USD
       }).decimals()]).then(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
             USDExchangeRoutes = _ref3[0],
@@ -2568,7 +2570,7 @@
         var USDRoute = USDExchangeRoutes[0];
         var USDAmount;
 
-        if (payment.route.toToken.address.toLowerCase() == depayWeb3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
+        if (payment.route.toToken.address.toLowerCase() == web3Constants.CONSTANTS[payment.route.blockchain].USD.toLowerCase()) {
           USDAmount = payment.route.toAmount.toString();
         } else if (USDRoute == undefined) {
           setPaymentValue('');
@@ -2578,7 +2580,7 @@
         }
 
         var USDValue = ethers.ethers.utils.formatUnits(USDAmount, USDDecimals);
-        depayLocalCurrency.Currency.fromUSD({
+        localCurrency.Currency.fromUSD({
           amount: USDValue,
           code: currency,
           apiKey: apiKey
@@ -2646,7 +2648,7 @@
   });
 
   var ChangeAmountDialog = (function (props) {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(ErrorContext);
@@ -2810,7 +2812,7 @@
     var _useContext3 = React.useContext(PaymentValueContext),
         paymentValue = _useContext3.paymentValue;
 
-    var _useContext4 = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext4 = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext4.navigate;
 
     var _useState = React.useState([]),
@@ -2856,7 +2858,7 @@
           }
         }, /*#__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", {
@@ -2873,11 +2875,7 @@
           className: "TokenAmountCell"
         }, format(payment.amount)))), /*#__PURE__*/React__default$1["default"].createElement("h3", {
           className: "CardText"
-        }, /*#__PURE__*/React__default$1["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))), /*#__PURE__*/React__default$1["default"].createElement("div", {
-          className: "CardInfo"
-        }, payment.route.approvalRequired && /*#__PURE__*/React__default$1["default"].createElement("span", {
-          className: "Label"
-        }, "Requires Approval")));
+        }, /*#__PURE__*/React__default$1["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
       }));
     }, [allPaymentRoutesWithData]);
 
@@ -2973,7 +2971,7 @@
         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),
@@ -2992,7 +2990,7 @@
               navigate: navigate
             });
           }
-        }, "Pay ", new depayLocalCurrency.Currency({
+        }, "Pay ", new localCurrency.Currency({
           amount: amount.toFixed(2),
           code: currencyCode
         }).toString());
@@ -3071,7 +3069,7 @@
         className: "CardText"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, new depayLocalCurrency.Currency({
+      }, new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString())))), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3089,7 +3087,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3116,7 +3114,7 @@
   });
 
   var PaymentErrorDialog = (function () {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(PaymentContext),
@@ -3164,10 +3162,10 @@
     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", {
@@ -3205,7 +3203,7 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "DonationOverview",
@@ -3497,7 +3495,7 @@
     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),
@@ -3516,7 +3514,7 @@
               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));
@@ -3595,7 +3593,7 @@
         className: "CardText"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "TokenAmountRow"
-      }, new depayLocalCurrency.Currency({
+      }, new localCurrency.Currency({
         amount: amount.toFixed(2),
         code: currencyCode
       }).toString())))), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3613,7 +3611,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -3644,7 +3642,7 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "PaymentOverview",
@@ -3903,7 +3901,8 @@
         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;
@@ -3916,7 +3915,7 @@
         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),
@@ -3944,7 +3943,7 @@
               navigate: navigate
             });
           }
-        }, "Pay ", new depayLocalCurrency.Currency({
+        }, "Pay ", new localCurrency.Currency({
           amount: amount.toFixed(2),
           code: currencyCode
         }).toString());
@@ -3993,7 +3992,7 @@
 
     React.useEffect(function () {
       if (paymentValue) {
-        setSalePerTokenValue(new depayLocalCurrency.Currency({
+        setSalePerTokenValue(new localCurrency.Currency({
           amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
           code: paymentValue.code
         }).toString());
@@ -4004,6 +4003,19 @@
       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"
@@ -4025,10 +4037,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
-        blockchain: payment.route.blockchain,
-        address: toToken.address
-      })), /*#__PURE__*/React__default$1["default"].createElement("div", {
+      }, tokenImageElement), /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardBody"
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardBodyWrapper"
@@ -4059,7 +4068,7 @@
       }, /*#__PURE__*/React__default$1["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, /*#__PURE__*/React__default$1["default"].createElement(depayReactTokenImage.TokenImage, {
+      }, /*#__PURE__*/React__default$1["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
       })), /*#__PURE__*/React__default$1["default"].createElement("div", {
@@ -4090,7 +4099,7 @@
         open = _useContext.open,
         close = _useContext.close;
 
-    return /*#__PURE__*/React__default$1["default"].createElement(depayReactDialogStack.ReactDialogStack, {
+    return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
       start: "SaleOverview",
@@ -4154,12 +4163,12 @@
 
   var Sale = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, sell, sent, confirmed, ensured, failed, error, critical, style, blacklist, providers, currency, connected, closed, document, accept, unmount;
+      var amount, sell, sent, confirmed, 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({
@@ -4185,6 +4194,7 @@
                     unmount: unmount
                   }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
                     configuration: {
+                      tokenImage: tokenImage,
                       amount: amount,
                       sell: sell,
                       currency: currency,
@@ -4243,7 +4253,7 @@
     Payment: Payment,
     Sale: Sale,
     Donation: Donation,
-    provider: depayWeb3Client.provider
+    provider: web3Client.provider
   };
 
   return DePayWidgets;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "4.2.1",
+  "version": "4.4.1",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/cjs/index.js",
   "files": [
@@ -32,20 +32,20 @@
     "test": "yarn test:jest && yarn test:cypress"
   },
   "dependencies": {
+    "@depay/local-currency": "^2.0.0",
+    "@depay/react-dialog-stack": "^3.0.1",
+    "@depay/react-shadow-dom": "^3.0.0",
+    "@depay/react-token-image": "^2.0.0",
     "@depay/walletconnect": "^1.0.2",
+    "@depay/web3-assets": "^3.0.0",
+    "@depay/web3-blockchains": "^3.0.0",
+    "@depay/web3-client": "^7.1.0",
+    "@depay/web3-constants": "^4.0.1",
+    "@depay/web3-exchanges": "^7.1.1",
+    "@depay/web3-payments": "^7.0.1",
+    "@depay/web3-tokens": "^7.2.0",
+    "@depay/web3-wallets": "^6.0.0",
     "decimal.js": "^10.3.1",
-    "depay-local-currency": "^1.1.0",
-    "depay-react-dialog-stack": "^2.1.0",
-    "depay-react-shadow-dom": "^2.0.4",
-    "depay-react-token-image": "^1.1.3",
-    "depay-web3-assets": "^2.2.0",
-    "depay-web3-blockchains": "^2.6.0",
-    "depay-web3-client": "^6.0.0",
-    "depay-web3-constants": "^3.0.1",
-    "depay-web3-exchanges": "^6.2.2",
-    "depay-web3-payments": "^6.3.5",
-    "depay-web3-tokens": "^6.0.1",
-    "depay-web3-wallets": "^5.7.3",
     "react-rangeslider": "^2.2.0"
   },
   "peerDependencies": {
@@ -59,6 +59,7 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@cypress/react": "^5.9.1",
+    "@depay/web3-mock": "^9.1.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
@@ -68,7 +69,6 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "cypress": "^7.6.0",
-    "depay-web3-mock": "^8.2.7",
     "eslint": "^7.15.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",