@depay/widgets 10.2.9 → 10.2.11

package/dist/umd/index.js

@@ -1,14 +1,15 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@uiw/copy-to-clipboard'), require('@depay/react-dialog-stack'), require('qr-code-styling'), require('@depay/web3-wallets'), require('@depay/web3-blockchains'), require('fuse.js'), require('@tanstack/react-virtual'), 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('@depay/react-token-image')) :
-  typeof define === 'function' && define.amd ? define(['react', '@uiw/copy-to-clipboard', '@depay/react-dialog-stack', 'qr-code-styling', '@depay/web3-wallets', '@depay/web3-blockchains', 'fuse.js', '@tanstack/react-virtual', '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', '@depay/react-token-image'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.copyTextToClipboard, global.ReactDialogStack, global.QRCodeStyling, global.Web3Wallets, global.Web3Blockchains, global.Fuse, global.ReactVirtual, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactTokenImage));
-})(this, (function (React, copy, reactDialogStack, QRCodeStyling, web3Wallets, web3Blockchains, Fuse, reactVirtual, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, reactTokenImage) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@uiw/copy-to-clipboard'), require('@depay/react-dialog-stack'), require('qr-code-styling'), require('@depay/web3-wallets'), require('@depay/web3-blockchains'), require('fuse.js'), require('@tanstack/react-virtual'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-payments'), require('@depay/react-token-image')) :
+  typeof define === 'function' && define.amd ? define(['react', '@uiw/copy-to-clipboard', '@depay/react-dialog-stack', 'qr-code-styling', '@depay/web3-wallets', '@depay/web3-blockchains', 'fuse.js', '@tanstack/react-virtual', 'react-dom', '@depay/react-shadow-dom', 'ethers', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-payments', '@depay/react-token-image'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.copyTextToClipboard, global.ReactDialogStack, global.QRCodeStyling, global.Web3Wallets, global.Web3Blockchains, global.Fuse, global.ReactVirtual, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Payments, global.ReactTokenImage));
+})(this, (function (React, copy, reactDialogStack, QRCodeStyling, web3Wallets, Blockchains, Fuse, reactVirtual, ReactDOM, reactShadowDom, ethers, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Payments, reactTokenImage) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
   var QRCodeStyling__default = /*#__PURE__*/_interopDefaultLegacy(QRCodeStyling);
+  var Blockchains__default = /*#__PURE__*/_interopDefaultLegacy(Blockchains);
   var Fuse__default = /*#__PURE__*/_interopDefaultLegacy(Fuse);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
@@ -3583,7 +3584,7 @@
     var _useContext2 = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext2.navigate;
     var stacked = props.stacked || Object.keys(props.selection).length > 1;
-    var blockchains = [web3Blockchains.Blockchain.findByName('ethereum'), web3Blockchains.Blockchain.findByName('bsc'), web3Blockchains.Blockchain.findByName('polygon')];
+    var blockchains = [Blockchains__default["default"].findByName('ethereum'), Blockchains__default["default"].findByName('bsc'), Blockchains__default["default"].findByName('polygon')];
     var selectBlockchain = function selectBlockchain(blockchain) {
       window._depay_token_selection_selected_blockchain = blockchain.name;
       setSelection(Object.assign(props.selection, {
@@ -4530,7 +4531,7 @@
   });
 
   var ButtonPrimaryStyle = (function (style) {
-    return "\n\n    .ButtonPrimary {\n      align-items: center;\n      align-self: center;\n      background: ".concat(style.colors.primary, ";\n      border-radius: 13px;\n      border: 1px solid transparent;\n      box-shadow: 0 0 16px rgba(0,0,0,0.1);\n      font-size: 22px;\n      font-weight: 400;\n      line-height: 45px;\n      height: 58px;\n      justify-content: center;\n      width: 100%;\n      overflow: hidden;\n      padding: 7px 0;\n      position: relative;\n      text-align: center;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      transition: background 0.1s;\n      vertical-align: middle;\n      display: inline-block;\n    }\n\n    .ButtonPrimary, .ButtonPrimary * {\n      color: ").concat(style.colors.buttonText, ";\n    }\n\n    .ButtonPrimary.disabled {\n      background: rgb(210,210,210);\n      color: rgb(140,140,140);\n    }\n\n    .ButtonPrimary:not(.disabled){\n      cursor: pointer;\n    }\n    .ButtonPrimary:not(.disabled):hover {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n    }\n    .ButtonPrimary:not(.disabled):active {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n    }\n  ");
+    return "\n\n    .ButtonPrimary {\n      align-items: center;\n      align-self: center;\n      background: ".concat(style.colors.primary, ";\n      border-radius: 13px;\n      border: 1px solid transparent;\n      box-shadow: 0 0 16px rgba(0,0,0,0.1);\n      font-size: 22px;\n      font-weight: 400;\n      line-height: 40px;\n      height: 58px;\n      justify-content: center;\n      width: 100%;\n      overflow: hidden;\n      padding: 7px 0;\n      position: relative;\n      text-align: center;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      transition: background 0.1s;\n      vertical-align: middle;\n      display: inline-block;\n    }\n\n    .ButtonPrimary, .ButtonPrimary * {\n      color: ").concat(style.colors.buttonText, ";\n    }\n\n    .ButtonPrimary.disabled {\n      background: rgb(210,210,210);\n      color: rgb(140,140,140);\n    }\n\n    .ButtonPrimary:not(.disabled){\n      cursor: pointer;\n    }\n    .ButtonPrimary:not(.disabled):hover {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n    }\n    .ButtonPrimary:not(.disabled):active {\n      box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n    }\n  ");
   });
 
   var CardStyle = (function (style) {
@@ -4626,7 +4627,7 @@
   });
 
   var TokenAmountStyle = (function () {
-    return "\n        \n    .TokenAmountRow {\n      min-width: 0;\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n    }\n\n    .TokenAmountCell {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .TokenSymbolCell {\n    }\n  ";
+    return "\n        \n    .TokenAmountRow {\n      min-width: 0;\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n    }\n    \n    .TokenAmountRow.small {\n      font-size: 17px;\n      line-height: 17px;\n    }\n\n    .TokenAmountRow.grey {\n      opacity: 0.5;\n    }\n\n    .TokenAmountCell {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .TokenSymbolCell {\n    }\n  ";
   });
 
   var TokenImageStyle = (function (style) {
@@ -22123,12 +22124,12 @@
         } else {
           Promise.all(props.accept.map(function (configuration) {
             if (fixedAmount) {
-              if (web3Constants.CONSTANTS[configuration.blockchain].USD == configuration.token) {
+              if (Blockchains__default["default"][configuration.blockchain].stables.usd[0] == configuration.token) {
                 return 1.00 / fixedCurrencyConversionRate * fixedAmount;
               } else {
                 return web3Exchanges.route({
                   blockchain: configuration.blockchain,
-                  tokenIn: web3Constants.CONSTANTS[configuration.blockchain].USD,
+                  tokenIn: Blockchains__default["default"][configuration.blockchain].stables.usd[0],
                   amountIn: 1.00 / fixedCurrencyConversionRate * fixedAmount,
                   tokenOut: configuration.token,
                   fromAddress: account,
@@ -22136,12 +22137,12 @@
                 });
               }
             } else {
-              if (web3Constants.CONSTANTS[configuration.blockchain].USD == configuration.token) {
+              if (Blockchains__default["default"][configuration.blockchain].stables.usd[0] == configuration.token) {
                 return 1.00 / conversionRate * amount;
               } else {
                 return web3Exchanges.route({
                   blockchain: configuration.blockchain,
-                  tokenIn: web3Constants.CONSTANTS[configuration.blockchain].USD,
+                  tokenIn: Blockchains__default["default"][configuration.blockchain].stables.usd[0],
                   amountIn: 1.00 / conversionRate * amount,
                   tokenOut: configuration.token,
                   fromAddress: account,
@@ -22235,14 +22236,14 @@
                 setMaxAmount(maxAmount > 10 ? Math.round(maxAmount - 1) : round(maxAmount - 1));
               })["catch"](setError);
             })["catch"](setError);
-          } else if (maxRoute.fromToken.address == web3Constants.CONSTANTS[maxRoute.blockchain].USD) {
+          } else if (maxRoute.fromToken.address == Blockchains__default["default"][maxRoute.blockchain].stables.usd[0]) {
             var _maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).mul(conversionRate).toString());
             setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount - 1) : _maxAmount - 1);
           } else {
             web3Exchanges.route({
               blockchain: maxRoute.blockchain,
               tokenIn: maxRoute.fromToken.address,
-              tokenOut: web3Constants.CONSTANTS[maxRoute.blockchain].USD,
+              tokenOut: Blockchains__default["default"][maxRoute.blockchain].stables.usd[0],
               amountIn: parseFloat(readableMaxAmount),
               fromAddress: account,
               toAddress: account
@@ -22253,7 +22254,7 @@
               web3Tokens.Token.readable({
                 amount: routes[0].amountOut,
                 blockchain: maxRoute.blockchain,
-                address: web3Constants.CONSTANTS[maxRoute.blockchain].USD
+                address: Blockchains__default["default"][maxRoute.blockchain].stables.usd[0]
               }).then(function (readableMaxAmount) {
                 var slippage = 1.01;
                 var maxAmount = parseFloat(new decimal_js.Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
@@ -22559,7 +22560,7 @@
         setTransaction({
           blockchain: recover.blockchain,
           id: recover.transaction,
-          url: web3Blockchains.Blockchain.findByName(recover.blockchain).explorerUrlFor({
+          url: Blockchains__default["default"].findByName(recover.blockchain).explorerUrlFor({
             transaction: {
               id: recover.transaction
             }
@@ -22589,7 +22590,7 @@
         if (foundTransaction.id != transaction.id) {
           newTransaction = Object.assign({}, transaction, {
             id: foundTransaction.id,
-            url: web3Blockchains.Blockchain.findByName(transaction.blockchain).explorerUrlFor({
+            url: Blockchains__default["default"].findByName(transaction.blockchain).explorerUrlFor({
               transaction: foundTransaction
             })
           });
@@ -22935,30 +22936,28 @@
       if (updatable == false || (payment === null || payment === void 0 ? void 0 : payment.route) == undefined) {
         return;
       }
+      setPaymentValue(null);
       setPaymentValueLoss(null);
-      Promise.all([web3Exchanges.route({
-        blockchain: payment.route.blockchain,
-        tokenIn: payment.route.fromToken.address,
-        tokenOut: web3Constants.CONSTANTS[payment.route.blockchain].USD,
-        amountIn: payment.route.fromAmount,
-        fromAddress: account,
-        toAddress: account
-      }), !payment.route.directTransfer ? web3Exchanges.route({
+      Promise.all([Promise.all(Blockchains__default["default"][payment.route.blockchain].stables.usd.map(function (stable) {
+        return web3Exchanges.route({
+          blockchain: payment.route.blockchain,
+          tokenIn: payment.route.fromToken.address,
+          tokenOut: stable,
+          amountIn: payment.route.fromAmount,
+          fromAddress: account,
+          toAddress: account
+        });
+      })), !payment.route.directTransfer ? web3Exchanges.route({
         blockchain: payment.route.blockchain,
         tokenIn: payment.route.toToken.address,
         tokenOut: payment.route.fromToken.address,
         amountIn: payment.route.toAmount,
         fromAddress: account,
         toAddress: account
-      }) : Promise.resolve([]), new web3Tokens.Token({
-        blockchain: payment.route.blockchain,
-        address: web3Constants.CONSTANTS[payment.route.blockchain].USD
-      }).decimals()]).then(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 3),
+      }) : Promise.resolve([])]).then(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
           fromTokenUSDExchangeRoutes = _ref3[0],
-          reverseRoutes = _ref3[1],
-          USDDecimals = _ref3[2];
-        var fromTokenUSDRoute = fromTokenUSDExchangeRoutes[0];
+          reverseRoutes = _ref3[1];
         var reverseRoute = reverseRoutes[0];
         if (reverseRoute) {
           var reverseAmountOutBN = ethers.ethers.BigNumber.from(reverseRoute.amountOut);
@@ -22970,18 +22969,44 @@
             setPaymentValueLoss(null);
           }
         }
-        var fromTokenUSDAmount;
-        if (payment.route.fromToken.address == web3Constants.CONSTANTS[payment.route.blockchain].USD) {
-          fromTokenUSDAmount = payment.route.fromAmount.toString();
-        } else if (fromTokenUSDRoute == undefined) {
-          setPaymentValue('');
-          return;
+        var USDValue;
+        if (Blockchains__default["default"][payment.route.blockchain].stables.usd.includes(payment.route.fromToken.address)) {
+          // is stable
+
+          var decimals = Blockchains__default["default"][payment.route.blockchain].tokens.find(function (token) {
+            return token.address === payment.route.fromToken.address;
+          }).decimals;
+          USDValue = ethers.ethers.utils.formatUnits(payment.route.fromAmount.toString(), decimals);
         } else {
-          fromTokenUSDAmount = fromTokenUSDRoute.amountOut.toString();
+          var USDRoutes = fromTokenUSDExchangeRoutes.map(function (routes) {
+            return routes ? routes[0] : undefined;
+          }).filter(Boolean);
+          if (USDRoutes.length == 0) {
+            setPaymentValue('');
+            return;
+          } else {
+            var amounts = USDRoutes.map(function (route) {
+              var decimals = Blockchains__default["default"][payment.route.blockchain].tokens.find(function (token) {
+                return token.address === route.tokenOut;
+              }).decimals;
+              return parseFloat(ethers.ethers.utils.formatUnits(route.amountOut, decimals));
+            });
+
+            // remove outliers
+            var average = amounts.reduce(function (a, b) {
+              return a + b;
+            }) / amounts.length;
+            var diff = 0.1; // 10%
+            amounts = amounts.filter(function (amount) {
+              return amount < average + average * diff && amount > average - average * diff;
+            });
+            USDValue = amounts.reduce(function (a, b) {
+              return a + b;
+            }) / amounts.length;
+          }
         }
-        var fromTokenUSDValue = ethers.ethers.utils.formatUnits(fromTokenUSDAmount, USDDecimals);
         localCurrency.Currency.fromUSD({
-          amount: fromTokenUSDValue,
+          amount: USDValue,
           code: currency
         }).then(setPaymentValue);
       })["catch"](setError);
@@ -23243,7 +23268,7 @@
     }, [allRoutes]);
     React.useEffect(function () {
       setCards(allPaymentRoutesWithData.map(function (payment, index) {
-        var blockchain = web3Blockchains.Blockchain.findByName(payment.route.blockchain);
+        var blockchain = Blockchains__default["default"].findByName(payment.route.blockchain);
         return /*#__PURE__*/React__default["default"].createElement("div", {
           key: index,
           className: "Card",
@@ -23441,9 +23466,7 @@
       transaction = _useContext3.transaction,
       approve = _useContext3.approve,
       approvalTransaction = _useContext3.approvalTransaction;
-    var _useContext4 = React.useContext(PaymentValueContext);
-      _useContext4.paymentValue;
-      var displayedPaymentValue = _useContext4.displayedPaymentValue,
+    var _useContext4 = React.useContext(PaymentValueContext),
       paymentValueLoss = _useContext4.paymentValueLoss;
     var _useContext5 = React.useContext(PaymentRoutingContext),
       updatedRouteWithNewPrice = _useContext5.updatedRouteWithNewPrice,
@@ -23589,7 +23612,7 @@
           className: "ButtonPrimary",
           onClick: approve,
           title: "Allow ".concat(payment.symbol, " to be used as payment")
-        }, "Allow ", payment.symbol, " to be used as payment"));
+        }, "Approve use of ", payment.symbol));
       } else if (paymentState == 'approving') {
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "PaddingBottomXS"
@@ -23619,10 +23642,10 @@
           className: "PaddingBottomXS"
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Alert"
-        }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/React__default["default"].createElement("button", {
+        }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Payment would lose ", paymentValueLoss, "% of its value!"))), /*#__PURE__*/React__default["default"].createElement("button", {
           className: "ButtonPrimary disabled",
           onClick: function onClick() {}
-        }, "Pay ", displayedPaymentValue));
+        }, "Pay"));
       } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
         return /*#__PURE__*/React__default["default"].createElement("button", {
           className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
@@ -23632,7 +23655,7 @@
             }
             pay();
           }
-        }, "Pay ", displayedPaymentValue);
+        }, "Pay");
       } else if (paymentState == 'paying') {
         return /*#__PURE__*/React__default["default"].createElement("a", {
           className: "ButtonPrimary",
@@ -23694,7 +23717,7 @@
     if (payment == undefined) {
       return /*#__PURE__*/React__default["default"].createElement(DonationOverviewSkeleton, null);
     }
-    var blockchain = web3Blockchains.Blockchain.findByName(payment.blockchain);
+    var blockchain = Blockchains__default["default"].findByName(payment.blockchain);
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -23821,7 +23844,7 @@
       _useState2 = _slicedToArray(_useState, 2);
       _useState2[0];
       _useState2[1];
-    var blockchain = web3Blockchains.Blockchain.findByName(payment.route.blockchain);
+    var blockchain = Blockchains__default["default"].findByName(payment.route.blockchain);
     var switchNetwork = function switchNetwork() {
       wallet.switchTo(payment.blockchain);
       navigate('back');
@@ -24449,10 +24472,12 @@
         wallet = _ref.wallet;
       setAccount(account);
       setWallet(wallet);
-      setWalletState('connected');
-      if (props.connected) {
-        props.connected(account);
-      }
+      setTimeout(function () {
+        setWalletState('connected');
+        if (props.connected) {
+          props.connected(account);
+        }
+      }, 200);
     };
     var disconnect = function disconnect() {
       setAccount();
@@ -24998,7 +25023,8 @@
     var _useContext4 = React.useContext(WalletContext),
       disconnect = _useContext4.disconnect;
     var _useContext5 = React.useContext(PaymentValueContext),
-      paymentValue = _useContext5.paymentValue;
+      paymentValue = _useContext5.paymentValue,
+      displayedPaymentValue = _useContext5.displayedPaymentValue;
     var _useContext6 = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext6.navigate;
     var _useState = React.useState(false),
@@ -25029,7 +25055,7 @@
         alternativeHeaderAction: alternativeHeaderActionElement
       });
     }
-    var blockchain = web3Blockchains.Blockchain.findByName(payment.blockchain);
+    var blockchain = Blockchains__default["default"].findByName(payment.blockchain);
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -25099,7 +25125,11 @@
         className: "TokenSymbolCell"
       }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "TokenAmountCell"
-      }, format(payment.amount)))))), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, format(payment.amount))), displayedPaymentValue != "".concat(payment.symbol, " ").concat(format(payment.amount)) && !(amountsMissing && !fixedCurrency) && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TokenAmountRow small grey"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "TokenAmountCell"
+      }, displayedPaymentValue))))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
       }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))),
       footer: /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25517,7 +25547,7 @@
         address: toToken.address
       });
     }
-    var blockchain = web3Blockchains.Blockchain.findByName(payment.blockchain);
+    var blockchain = Blockchains__default["default"].findByName(payment.blockchain);
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -25847,7 +25877,7 @@
       }, "Address")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
         className: "Link",
         title: selection.nft.address,
-        href: web3Blockchains.Blockchain.findByName(blockchain).explorerUrlFor({
+        href: Blockchains__default["default"].findByName(blockchain).explorerUrlFor({
           token: selection.nft.address
         }),
         target: "_blank",
@@ -25856,7 +25886,7 @@
         className: "TableSubTitle"
       }, "Token ID")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, selection.nft.id))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TableSubTitle"
-      }, "Blockchain")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, web3Blockchains.Blockchain.findByName(blockchain).label))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, "Blockchain")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, Blockchains__default["default"].findByName(blockchain).label))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TableSubTitle"
       }, "Name")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("a", {
         className: "Link",
@@ -25880,7 +25910,7 @@
   var OpenSea = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjMuMjUwODg5bW0iIGhlaWdodD0iNjMuMjUwODg5bW0iIHZpZXdCb3g9IjAgMCA2My4yNTA4ODYgNjMuMjUwODg4Ij4KICA8ZyBmaWxsPSJub25lIiB0cmFuc2Zvcm09InNjYWxlKC42MzI1KSI+CiAgICA8cGF0aCBmaWxsPSIjMjA4MWUyIiBkPSJNMTAwIDUwYzAgMjcuNjEyNy0yMi4zODczIDUwLTUwIDUwUzAgNzcuNjEyNyAwIDUwIDIyLjM4NzMgMCA1MCAwYzI3LjYxODUgMCA1MCAyMi4zODczIDUwIDUweiIvPgogICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0ibTI0LjY2NzkgNTEuNjgwMS4yMTU3LS4zMzkxIDEzLjAwNy0yMC4zNDc4Yy4xOTAxLS4yOTc5LjYzNy0uMjY3MS43ODA4LjA1NjUgMi4xNzMgNC44Njk5IDQuMDQ4IDEwLjkyNjUgMy4xNjk2IDE0LjY5NzEtLjM3NSAxLjU1MTQtMS40MDI0IDMuNjUyNC0yLjU1ODMgNS41OTQyLS4xNDg5LjI4MjYtLjMxMzMuNTYtLjQ4OC44MjcxLS4wODIyLjEyMzMtLjIyMDkuMTk1Mi0uMzY5OS4xOTUySDI1LjA0OGMtLjM1OTYgMC0uNTcwMi0uMzkwNC0uMzgwMS0uNjgzMnoiLz4KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik04Mi42NDQ0IDU1LjQ2MXYzLjIyMDljMCAuMTg0OS0uMTEzLjM0OTMtLjI3NzQuNDIxMi0xLjAwNjguNDMxNS00LjQ1MzggMi4wMTM3LTUuODg3IDQuMDA2OS0zLjY1NzYgNS4wOTA4LTYuNDUyMSAxMi4zNy0xMi42OTg4IDEyLjM3SDM3LjcyMUMyOC40ODQ3IDc1LjQ4IDIxIDY3Ljk2OTcgMjEgNTguNzAyNHYtLjI5NzljMC0uMjQ2Ni4yMDAzLS40NDY5LjQ0NjktLjQ0NjloMTQuNTI3NmMuMjg3NiAwIC40OTgyLjI2NzEuNDcyNi41NDk2LS4xMDI4Ljk0NTIuMDcxOSAxLjkxMS41MTg4IDIuNzg5NC44NjMgMS43NTE4IDIuNjUwNyAyLjg0NiA0LjU4MjIgMi44NDZINDguNzR2LTUuNjE0OGgtNy4xMDk3Yy0uMzY0NyAwLS41ODA0LS40MjEzLS4zNjk4LS43MTkyLjA3Ny0uMTE4Mi4xNjQ0LS4yNDE0LjI1NjgtLjM4MDEuNjczLS45NTU1IDEuNjMzNi0yLjQ0MDEgMi41ODkxLTQuMTMwMi42NTI0LTEuMTQwNCAxLjI4NDItMi4zNTc5IDEuNzkyOC0zLjU4MDUuMTAyOC0uMjIwOS4xODQ5LS40NDcuMjY3MS0uNjY3OS4xMzg3LS4zOTA0LjI4MjYtLjc1NTEuMzg1My0xLjExOTguMTAyOC0uMzA4My4xODQ5LS42MzE5LjI2NzEtLjkzNS4yNDE1LTEuMDM3Ny4zNDQyLTIuMTM3LjM0NDItMy4yNzc0IDAtLjQ0NjktLjAyMDUtLjkxNDQtLjA2MTYtMS4zNjEzLS4wMjA2LS40ODgtLjA4MjItLjk3NjEtLjE0MzktMS40NjQxLS4wNDExLS40MzE1LS4xMTgxLS44NTc5LS4yMDAzLTEuMzA0OC0uMTAyNy0uNjUyNC0uMjQ2Ni0xLjI5OTYtLjQxMS0xLjk1MjFsLS4wNTY1LS4yNDY1Yy0uMTIzMy0uNDQ3LS4yMjYtLjg3MzMtLjM2OTgtMS4zMjAyLS40MDU5LTEuNDAyNS0uODczMy0yLjc2ODktMS4zNjY1LTQuMDQ4LS4xNzk4LS41MDg2LS4zODUzLS45OTY2LS41OTA4LTEuNDg0Ni0uMzAzLS43MzQ2LS42MTEzLTEuNDAyNC0uODkzOC0yLjAzNDMtLjE0MzgtLjI4NzctLjI2NzEtLjU0OTctLjM5MDQtLjgxNjgtLjEzODctLjMwMzEtLjI4MjUtLjYwNjItLjQyNjQtLjg5MzgtLjEwMjctLjIyMDktLjIyMDktLjQyNjQtLjMwMzEtLjYzMTlsLS44Nzg0LTEuNjIzM2MtLjEyMzMtLjIyMDkuMDgyMi0uNDgyOS4zMjM2LS40MTYxbDUuNDk2NyAxLjQ4OTdoLjAxNTRjLjAxMDIgMCAuMDE1NC4wMDUyLjAyMDUuMDA1MmwuNzI0My4yMDAzLjc5NjMuMjI2MS4yOTI4LjA4MjF2LTMuMjY3MUM0OC43NCAyMS4yNzkxIDUwLjAwMzcgMjAgNTEuNTY1NCAyMGMuNzgwOCAwIDEuNDg5Ny4zMTg1IDEuOTk4My44MzczLjUwODUuNTE4OS44MjcgMS4yMjc4LjgyNyAyLjAxODl2NC44NDk0bC41ODU3LjE2NDNjLjA0NjIuMDE1NS4wOTI0LjAzNi4xMzM1LjA2NjguMTQzOS4xMDc5LjM0OTMuMjY3MS42MTEzLjQ2MjQuMjA1NS4xNjQzLjQyNjQuMzY0Ny42OTM1LjU3MDIuNTI5MS40MjYzIDEuMTYxLjk3NiAxLjg1NDUgMS42MDc5LjE4NDkuMTU5Mi4zNjQ3LjMyMzYuNTI5MS40ODguODkzOS44MzIyIDEuODk1NiAxLjgwODIgMi44NTExIDIuODg3LjI2NzEuMzAzMS41MjkxLjYxMTMuNzk2Mi45MzQ5LjI2NzEuMzI4OC41NDk3LjY1MjQuNzk2Mi45NzYxLjMyMzcuNDMxNS42NzMuODc4NC45NzYxIDEuMzQ1OS4xNDM4LjIyMDkuMzA4Mi40NDY5LjQ0NjkuNjY3OC4zOTA0LjU5MDcuNzM0NiAxLjIwMjEgMS4wNjM0IDEuODEzNC4xMzg3LjI4MjUuMjgyNS41OTA3LjQwNTguODkzOC4zNjQ3LjgxNjguNjUyNCAxLjY0OS44MzczIDIuNDgxMi4wNTY1LjE3OTguMDk3Ni4zNzUuMTE4Mi41NDk3di4wNDExYy4wNjE2LjI0NjUuMDgyMi41MDg1LjEwMjcuNzc1Ni4wODIyLjg1MjguMDQxMSAxLjcwNTUtLjE0MzggMi41NjM0LS4wNzcxLjM2NDgtLjE3OTguNzA4OS0uMzAzMSAxLjA3MzctLjEyMzMuMzQ5My0uMjQ2Ni43MTQtLjQwNTggMS4wNTgyLS4zMDgyLjcxNC0uNjczIDEuNDI4MS0xLjEwNDUgMi4wOTU5LS4xMzg3LjI0NjYtLjMwMzEuNTA4Ni0uNDY3NS43NTUyLS4xNzk4LjI2MTktLjM2NDcuNTA4NS0uNTI5MS43NS0uMjI2LjMwODItLjQ2NzQuNjMxOC0uNzE0LjkxOTUtLjIyMDkuMzAzMS0uNDQ2OS42MDYyLS42OTM1Ljg3MzMtLjM0NDIuNDA1OC0uNjczLjc5MTEtMS4wMTcyIDEuMTYxLS4yMDU0LjI0MTQtLjQyNjMuNDg4LS42NTI0LjcwODktLjIyMDguMjQ2NS0uNDQ2OS40Njc0LS42NTI0LjY3MjktLjM0NDEuMzQ0Mi0uNjMxOC42MTEzLS44NzMzLjgzMjJsLS41NjUuNTE4OWMtLjA4MjIuMDcxOS0uMTkwMS4xMTMtLjMwMzEuMTEzaC00LjM3Njh2NS42MTQ4aDUuNTA2OWMxLjIzMjkgMCAyLjQwNDItLjQzNjcgMy4zNDk0LTEuMjM4MS4zMjM2LS4yODI1IDEuNzM2My0xLjUwNTEgMy40MDU4LTMuMzQ5My4wNTY1LS4wNjE3LjEyODUtLjEwNzkuMjEwNy0uMTI4NGwxNS4yMTA3LTQuMzk3M2MuMjgyNi0uMDgyMi41NzAyLjEzMzUuNTcwMi40MzE1eiIvPgogIDwvZz4KPC9zdmc+';
 
   var EnterNFTDataForOpenSeaDialog = (function (props) {
-    var _Blockchain$findByNam, _selection$blockchain3, _selection$collection3, _Blockchain$findByNam2, _selection$blockchain4, _selection$collection4;
+    var _Blockchains$findByNa, _selection$blockchain3, _selection$collection3, _Blockchains$findByNa2, _selection$blockchain4, _selection$collection4;
     var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext.navigate;
     var _useContext2 = React.useContext(SelectionContext),
@@ -25998,10 +26028,10 @@
         className: "CardImage small"
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "transparent",
-        src: (_Blockchain$findByNam = web3Blockchains.Blockchain.findByName((selection === null || selection === void 0 ? void 0 : (_selection$blockchain3 = selection.blockchain) === null || _selection$blockchain3 === void 0 ? void 0 : _selection$blockchain3.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection3 = selection.collection) === null || _selection$collection3 === void 0 ? void 0 : _selection$collection3.blockchain))) === null || _Blockchain$findByNam === void 0 ? void 0 : _Blockchain$findByNam.logo
+        src: (_Blockchains$findByNa = Blockchains__default["default"].findByName((selection === null || selection === void 0 ? void 0 : (_selection$blockchain3 = selection.blockchain) === null || _selection$blockchain3 === void 0 ? void 0 : _selection$blockchain3.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection3 = selection.collection) === null || _selection$collection3 === void 0 ? void 0 : _selection$collection3.blockchain))) === null || _Blockchains$findByNa === void 0 ? void 0 : _Blockchains$findByNa.logo
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody FontSizeM"
-      }, (_Blockchain$findByNam2 = web3Blockchains.Blockchain.findByName((selection === null || selection === void 0 ? void 0 : (_selection$blockchain4 = selection.blockchain) === null || _selection$blockchain4 === void 0 ? void 0 : _selection$blockchain4.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection4 = selection.collection) === null || _selection$collection4 === void 0 ? void 0 : _selection$collection4.blockchain))) === null || _Blockchain$findByNam2 === void 0 ? void 0 : _Blockchain$findByNam2.label), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, (_Blockchains$findByNa2 = Blockchains__default["default"].findByName((selection === null || selection === void 0 ? void 0 : (_selection$blockchain4 = selection.blockchain) === null || _selection$blockchain4 === void 0 ? void 0 : _selection$blockchain4.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection4 = selection.collection) === null || _selection$collection4 === void 0 ? void 0 : _selection$collection4.blockchain))) === null || _Blockchains$findByNa2 === void 0 ? void 0 : _Blockchains$findByNa2.label), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
       }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))))), idRequired && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS TextLeft"
@@ -26617,7 +26647,7 @@
     var token = selection.token;
     var address = token.address || token.external_id;
     var logo = token.logo || token.image;
-    var blockchain = web3Blockchains.Blockchain.findByName(token.blockchain);
+    var blockchain = Blockchains__default["default"].findByName(token.blockchain);
     var age = token.first_transfer ? msToTime(new Date() - new Date(token.first_transfer)) : undefined;
     if (age) {
       age = [age.year && age.year >= 1 ? age.year >= 2 ? "".concat(age.year, " years") : "1 year" : undefined, age.month && age.month >= 1 ? age.month >= 2 ? "".concat(age.month, " months") : "1 month" : undefined, age.day && age.day >= 1 && age.month <= 1 && age.year < 1 ? age.day >= 2 ? "".concat(age.day, " days !!!") : "1 day !!!" : undefined].filter(function (n) {
@@ -26739,7 +26769,7 @@
     var searchElement = React.useRef();
     var wallet = web3Wallets.getWallets()[0];
     var startWithBlockchain = function startWithBlockchain(name) {
-      var blockchain = web3Blockchains.Blockchain.findByName(name);
+      var blockchain = Blockchains__default["default"].findByName(name);
       setBlockchain(blockchain);
       setSelection(Object.assign(props.selection, {
         blockchain: blockchain,
@@ -26750,7 +26780,7 @@
     React.useEffect(function () {
       if (wallet) {
         wallet.connectedTo().then(function (name) {
-          var blockchain = web3Blockchains.Blockchain.findByName(name);
+          var blockchain = Blockchains__default["default"].findByName(name);
           if (window._depay_token_selection_selected_blockchain) {
             startWithBlockchain(window._depay_token_selection_selected_blockchain);
           } else if (name && name.length && blockchain && blockchain.tokens && blockchain.tokens.length) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "10.2.9",
+  "version": "10.2.11",
   "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/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -38,18 +38,17 @@
     "@depay/local-currency": "^3.6.0",
     "@depay/react-dialog-stack": "^7.0.3",
     "@depay/react-shadow-dom": "^5.0.5",
-    "@depay/react-token-image": "^4.4.2",
-    "@depay/solana-web3.js": "^1.19.0",
+    "@depay/react-token-image": "^4.8.1",
+    "@depay/solana-web3.js": "^1.20.15",
     "@depay/walletconnect-v1": "^1.8.0",
     "@depay/walletconnect-v2": "^2.4.2",
-    "@depay/web3-assets": "^6.6.2",
-    "@depay/web3-blockchains": "^6.4.0",
-    "@depay/web3-client": "^10.3.2",
-    "@depay/web3-constants": "^6.4.2",
-    "@depay/web3-exchanges": "^11.3.4",
-    "@depay/web3-payments": "^11.0.3",
-    "@depay/web3-tokens": "^9.14.0",
-    "@depay/web3-wallets": "^15.2.3",
+    "@depay/web3-assets": "^6.7.0",
+    "@depay/web3-blockchains": "^7.1.0",
+    "@depay/web3-client": "^10.7.1",
+    "@depay/web3-exchanges": "^11.6.1",
+    "@depay/web3-payments": "^11.1.0",
+    "@depay/web3-tokens": "^9.16.0",
+    "@depay/web3-wallets": "^15.4.5",
     "@tanstack/react-virtual": "^3.0.0-beta.45",
     "@uiw/copy-to-clipboard": "^1.0.12",
     "decimal.js": "^10.3.1",
@@ -66,13 +65,14 @@
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
-    "@depay/web3-mock": "^13.22.14",
+    "@depay/web3-mock": "^13.26.0",
     "@peculiar/webcrypto": "^1.3.3",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-sucrase": "^3.1.0",
+    "@types/node": "^18.15.9",
     "babel-loader": "^8.2.2",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -96,6 +96,7 @@
     "rollup-plugin-polyfill-node": "^0.7.0",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^5.0.2",
     "util": "0.10.0",
     "webpack": "^5.73.0"
   }