@depay/widgets 4.2.0 → 4.4.0

package/dist/umd/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('depay-react-dialog-stack'), require('depay-web3-wallets'), require('react-dom'), require('depay-react-shadow-dom'), require('ethers'), require('depay-web3-constants'), require('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', '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.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage, global.Web3Blockchains));
-})(this, (function (React, depayReactDialogStack, depayWeb3Wallets, ReactDOM, depayReactShadowDom, ethers, depayWeb3Constants, depayWeb3Exchanges, depayWeb3Tokens, depayLocalCurrency, depayWeb3Client, depayWeb3Payments, Slider, depayReactTokenImage, depayWeb3Blockchains) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image'), require('@depay/web3-blockchains')) :
+  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image', '@depay/web3-blockchains'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage, global.Web3Blockchains));
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, Slider, reactTokenImage, web3Blockchains) { 'use strict';
 
   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);
@@ -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,7 +2008,7 @@
               return;
             }
 
-            return depayWeb3Tokens.Token.readable({
+            return web3Tokens.Token.readable({
               blockchain: props.accept[index].blockchain,
               amount: routes[0].amountOut,
               address: routes[0].tokenOut
@@ -2033,24 +2029,27 @@
     React.useEffect(function () {
       if (amountsMissing && maxRoute) {
         maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
-          if (maxRoute.fromToken.address == depayWeb3Constants.CONSTANTS[maxRoute.blockchain].USD) {
-            setMaxAmount(parseInt((parseFloat(readableMaxAmount) * conversionRate).toFixed(0), 10));
+          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;
-                setMaxAmount(parseInt((parseFloat(readableMaxAmount) / slippage * conversionRate).toFixed(0), 10));
+                var maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
+                setMaxAmount(maxAmount > 10 ? Math.round(maxAmount) : round(maxAmount));
               })["catch"](setError);
             })["catch"](setError);
           }
@@ -2072,13 +2071,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]);
@@ -2104,7 +2103,7 @@
         setConversionRate = _useState2[1];
 
     React.useEffect(function () {
-      depayLocalCurrency.Currency.fromUSD({
+      localCurrency.Currency.fromUSD({
         amount: 1,
         code: currency,
         apiKey: apiKey
@@ -2302,7 +2301,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",
@@ -2385,7 +2384,7 @@
         return;
       }
 
-      depayWeb3Payments.route({
+      web3Payments.route({
         accept: props.accept.map(prepareAcceptedPayments),
         whitelist: props.whitelist,
         blacklist: props.blacklist,
@@ -2547,16 +2546,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],
@@ -2565,7 +2564,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('');
@@ -2575,7 +2574,7 @@
         }
 
         var USDValue = ethers.ethers.utils.formatUnits(USDAmount, USDDecimals);
-        depayLocalCurrency.Currency.fromUSD({
+        localCurrency.Currency.fromUSD({
           amount: USDValue,
           code: currency,
           apiKey: apiKey
@@ -2643,7 +2642,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);
@@ -2685,16 +2684,22 @@
       setInputAmount(value);
     };
 
-    var toValidValue = function toValidValue(value) {
+    var toValidStep = function toValidStep(value) {
       if (step) {
-        value = Math.round(value / step) * step;
+        value = parseFloat(new decimal_js.Decimal(Math.floor(new decimal_js.Decimal(value).div(step))).mul(step).toString());
       }
 
+      return value;
+    };
+
+    var toValidValue = function toValidValue(value) {
+      value = toValidStep(value);
       value = Math.max(min, Math.min(value, maxAmount));
+      value = toValidStep(value);
       return value;
     };
 
-    var ensureValidity = function ensureValidity(value) {
+    var setValidValue = function setValidValue(value) {
       setInputAmount(toValidValue(value));
     };
 
@@ -2727,7 +2732,7 @@
           changeAmount(event.target.value);
         },
         onBlur: function onBlur(event) {
-          ensureValidity(event.target.value);
+          setValidValue(event.target.value);
         }
       })), /*#__PURE__*/React__default$1["default"].createElement(Slider__default["default"], {
         max: parseFloat(maxAmount),
@@ -2735,19 +2740,19 @@
         step: step,
         value: parseFloat(inputAmount),
         onChange: function onChange(value) {
-          changeAmount(value);
+          changeAmount(toValidStep(value));
         },
         onChangeComplete: function onChangeComplete() {
-          ensureValidity(inputAmount);
+          setValidValue(inputAmount);
         }
       }), /*#__PURE__*/React__default$1["default"].createElement("div", {
         style: {
           height: '40px'
         }
-      }, /*#__PURE__*/React__default$1["default"].createElement("div", null, format(maxAmount), /*#__PURE__*/React__default$1["default"].createElement("button", {
+      }, /*#__PURE__*/React__default$1["default"].createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React__default$1["default"].createElement("button", {
         className: "TextButton",
         onClick: function onClick() {
-          changeAmount(maxAmount);
+          changeAmount(toValidValue(maxAmount));
         }
       }, "(Max)")))))),
       footer: /*#__PURE__*/React__default$1["default"].createElement("div", null, /*#__PURE__*/React__default$1["default"].createElement("button", {
@@ -2801,7 +2806,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([]),
@@ -2847,7 +2852,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", {
@@ -2964,7 +2969,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),
@@ -2983,7 +2988,7 @@
               navigate: navigate
             });
           }
-        }, "Pay ", new depayLocalCurrency.Currency({
+        }, "Pay ", new localCurrency.Currency({
           amount: amount.toFixed(2),
           code: currencyCode
         }).toString());
@@ -3062,7 +3067,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", {
@@ -3080,7 +3085,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", {
@@ -3107,7 +3112,7 @@
   });
 
   var PaymentErrorDialog = (function () {
-    var _useContext = React.useContext(depayReactDialogStack.NavigateStackContext),
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
         navigate = _useContext.navigate;
 
     var _useContext2 = React.useContext(PaymentContext),
@@ -3155,10 +3160,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", {
@@ -3196,7 +3201,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",
@@ -3488,7 +3493,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),
@@ -3507,7 +3512,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));
@@ -3586,7 +3591,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", {
@@ -3604,7 +3609,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", {
@@ -3635,7 +3640,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",
@@ -3894,7 +3899,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;
@@ -3907,7 +3913,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),
@@ -3935,7 +3941,7 @@
               navigate: navigate
             });
           }
-        }, "Pay ", new depayLocalCurrency.Currency({
+        }, "Pay ", new localCurrency.Currency({
           amount: amount.toFixed(2),
           code: currencyCode
         }).toString());
@@ -3984,7 +3990,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());
@@ -3995,6 +4001,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"
@@ -4016,10 +4035,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"
@@ -4050,7 +4066,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", {
@@ -4081,7 +4097,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",
@@ -4145,12 +4161,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({
@@ -4176,6 +4192,7 @@
                     unmount: unmount
                   }, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
                     configuration: {
+                      tokenImage: tokenImage,
                       amount: amount,
                       sell: sell,
                       currency: currency,
@@ -4234,7 +4251,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.0",
+  "version": "4.4.0",
   "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,19 +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-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.0",
-    "depay-web3-wallets": "^5.7.3",
+    "@depay/web3-assets": "^3.0.0",
+    "@depay/web3-blockchains": "^3.0.0",
+    "@depay/web3-client": "^7.1.0",
+    "@depay/web3-constants": "^4.0.0",
+    "@depay/web3-exchanges": "^7.1.0",
+    "@depay/web3-payments": "^7.0.0",
+    "@depay/web3-tokens": "^7.2.0",
+    "@depay/web3-wallets": "^6.0.0",
+    "decimal.js": "^10.3.1",
     "react-rangeslider": "^2.2.0"
   },
   "peerDependencies": {
@@ -58,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",
@@ -67,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",