@depay/widgets 10.2.9 → 10.2.11

package/dist/esm/index.js

@@ -3,13 +3,12 @@ import copy from '@uiw/copy-to-clipboard';
 import { NavigateStackContext, ReactDialogStack } from '@depay/react-dialog-stack';
 import QRCodeStyling from 'qr-code-styling';
 import { wallets, getWallets } from '@depay/web3-wallets';
-import { Blockchain } from '@depay/web3-blockchains';
+import Blockchains from '@depay/web3-blockchains';
 import Fuse from 'fuse.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import ReactDOM from 'react-dom';
 import { ReactShadowDOM } from '@depay/react-shadow-dom';
 import { ethers } from 'ethers';
-import { CONSTANTS } from '@depay/web3-constants';
 import { Decimal } from 'decimal.js';
 import { route } from '@depay/web3-exchanges';
 import { Token } from '@depay/web3-tokens';
@@ -3589,7 +3588,7 @@ var SelectBlockchainDialog = (function (props) {
   var _useContext2 = useContext(NavigateStackContext),
     navigate = _useContext2.navigate;
   var stacked = props.stacked || Object.keys(props.selection).length > 1;
-  var blockchains = [Blockchain.findByName('ethereum'), Blockchain.findByName('bsc'), Blockchain.findByName('polygon')];
+  var blockchains = [Blockchains.findByName('ethereum'), Blockchains.findByName('bsc'), Blockchains.findByName('polygon')];
   var selectBlockchain = function selectBlockchain(blockchain) {
     window._depay_token_selection_selected_blockchain = blockchain.name;
     setSelection(Object.assign(props.selection, {
@@ -4536,7 +4535,7 @@ var ButtonCircularStyle = (function (style) {
 });
 
 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) {
@@ -4632,7 +4631,7 @@ var TextStyle = (function (style) {
 });
 
 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) {
@@ -22129,12 +22128,12 @@ var ChangableAmountProvider = (function (props) {
       } else {
         Promise.all(props.accept.map(function (configuration) {
           if (fixedAmount) {
-            if (CONSTANTS[configuration.blockchain].USD == configuration.token) {
+            if (Blockchains[configuration.blockchain].stables.usd[0] == configuration.token) {
               return 1.00 / fixedCurrencyConversionRate * fixedAmount;
             } else {
               return route({
                 blockchain: configuration.blockchain,
-                tokenIn: CONSTANTS[configuration.blockchain].USD,
+                tokenIn: Blockchains[configuration.blockchain].stables.usd[0],
                 amountIn: 1.00 / fixedCurrencyConversionRate * fixedAmount,
                 tokenOut: configuration.token,
                 fromAddress: account,
@@ -22142,12 +22141,12 @@ var ChangableAmountProvider = (function (props) {
               });
             }
           } else {
-            if (CONSTANTS[configuration.blockchain].USD == configuration.token) {
+            if (Blockchains[configuration.blockchain].stables.usd[0] == configuration.token) {
               return 1.00 / conversionRate * amount;
             } else {
               return route({
                 blockchain: configuration.blockchain,
-                tokenIn: CONSTANTS[configuration.blockchain].USD,
+                tokenIn: Blockchains[configuration.blockchain].stables.usd[0],
                 amountIn: 1.00 / conversionRate * amount,
                 tokenOut: configuration.token,
                 fromAddress: account,
@@ -22241,14 +22240,14 @@ var ChangableAmountProvider = (function (props) {
               setMaxAmount(maxAmount > 10 ? Math.round(maxAmount - 1) : round(maxAmount - 1));
             })["catch"](setError);
           })["catch"](setError);
-        } else if (maxRoute.fromToken.address == CONSTANTS[maxRoute.blockchain].USD) {
+        } else if (maxRoute.fromToken.address == Blockchains[maxRoute.blockchain].stables.usd[0]) {
           var _maxAmount = parseFloat(new Decimal(readableMaxAmount).mul(conversionRate).toString());
           setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount - 1) : _maxAmount - 1);
         } else {
           route({
             blockchain: maxRoute.blockchain,
             tokenIn: maxRoute.fromToken.address,
-            tokenOut: CONSTANTS[maxRoute.blockchain].USD,
+            tokenOut: Blockchains[maxRoute.blockchain].stables.usd[0],
             amountIn: parseFloat(readableMaxAmount),
             fromAddress: account,
             toAddress: account
@@ -22259,7 +22258,7 @@ var ChangableAmountProvider = (function (props) {
             Token.readable({
               amount: routes[0].amountOut,
               blockchain: maxRoute.blockchain,
-              address: CONSTANTS[maxRoute.blockchain].USD
+              address: Blockchains[maxRoute.blockchain].stables.usd[0]
             }).then(function (readableMaxAmount) {
               var slippage = 1.01;
               var maxAmount = parseFloat(new Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
@@ -22565,7 +22564,7 @@ var PaymentProvider = (function (props) {
       setTransaction({
         blockchain: recover.blockchain,
         id: recover.transaction,
-        url: Blockchain.findByName(recover.blockchain).explorerUrlFor({
+        url: Blockchains.findByName(recover.blockchain).explorerUrlFor({
           transaction: {
             id: recover.transaction
           }
@@ -22595,7 +22594,7 @@ var PaymentProvider = (function (props) {
       if (foundTransaction.id != transaction.id) {
         newTransaction = Object.assign({}, transaction, {
           id: foundTransaction.id,
-          url: Blockchain.findByName(transaction.blockchain).explorerUrlFor({
+          url: Blockchains.findByName(transaction.blockchain).explorerUrlFor({
             transaction: foundTransaction
           })
         });
@@ -22941,30 +22940,28 @@ var PaymentValueProvider = (function (props) {
     if (updatable == false || (payment === null || payment === void 0 ? void 0 : payment.route) == undefined) {
       return;
     }
+    setPaymentValue(null);
     setPaymentValueLoss(null);
-    Promise.all([route({
-      blockchain: payment.route.blockchain,
-      tokenIn: payment.route.fromToken.address,
-      tokenOut: CONSTANTS[payment.route.blockchain].USD,
-      amountIn: payment.route.fromAmount,
-      fromAddress: account,
-      toAddress: account
-    }), !payment.route.directTransfer ? route({
+    Promise.all([Promise.all(Blockchains[payment.route.blockchain].stables.usd.map(function (stable) {
+      return route({
+        blockchain: payment.route.blockchain,
+        tokenIn: payment.route.fromToken.address,
+        tokenOut: stable,
+        amountIn: payment.route.fromAmount,
+        fromAddress: account,
+        toAddress: account
+      });
+    })), !payment.route.directTransfer ? 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 Token({
-      blockchain: payment.route.blockchain,
-      address: 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.BigNumber.from(reverseRoute.amountOut);
@@ -22976,18 +22973,44 @@ var PaymentValueProvider = (function (props) {
           setPaymentValueLoss(null);
         }
       }
-      var fromTokenUSDAmount;
-      if (payment.route.fromToken.address == CONSTANTS[payment.route.blockchain].USD) {
-        fromTokenUSDAmount = payment.route.fromAmount.toString();
-      } else if (fromTokenUSDRoute == undefined) {
-        setPaymentValue('');
-        return;
+      var USDValue;
+      if (Blockchains[payment.route.blockchain].stables.usd.includes(payment.route.fromToken.address)) {
+        // is stable
+
+        var decimals = Blockchains[payment.route.blockchain].tokens.find(function (token) {
+          return token.address === payment.route.fromToken.address;
+        }).decimals;
+        USDValue = 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[payment.route.blockchain].tokens.find(function (token) {
+              return token.address === route.tokenOut;
+            }).decimals;
+            return parseFloat(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.utils.formatUnits(fromTokenUSDAmount, USDDecimals);
       Currency.fromUSD({
-        amount: fromTokenUSDValue,
+        amount: USDValue,
         code: currency
       }).then(setPaymentValue);
     })["catch"](setError);
@@ -23249,7 +23272,7 @@ var ChangePaymentDialog = (function (props) {
   }, [allRoutes]);
   useEffect(function () {
     setCards(allPaymentRoutesWithData.map(function (payment, index) {
-      var blockchain = Blockchain.findByName(payment.route.blockchain);
+      var blockchain = Blockchains.findByName(payment.route.blockchain);
       return /*#__PURE__*/React.createElement("div", {
         key: index,
         className: "Card",
@@ -23447,9 +23470,7 @@ var Footer = (function () {
     transaction = _useContext3.transaction,
     approve = _useContext3.approve,
     approvalTransaction = _useContext3.approvalTransaction;
-  var _useContext4 = useContext(PaymentValueContext);
-    _useContext4.paymentValue;
-    var displayedPaymentValue = _useContext4.displayedPaymentValue,
+  var _useContext4 = useContext(PaymentValueContext),
     paymentValueLoss = _useContext4.paymentValueLoss;
   var _useContext5 = useContext(PaymentRoutingContext),
     updatedRouteWithNewPrice = _useContext5.updatedRouteWithNewPrice,
@@ -23595,7 +23616,7 @@ var Footer = (function () {
         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.createElement("div", {
         className: "PaddingBottomXS"
@@ -23625,10 +23646,10 @@ var Footer = (function () {
         className: "PaddingBottomXS"
       }, /*#__PURE__*/React.createElement("div", {
         className: "Alert"
-      }, /*#__PURE__*/React.createElement("strong", null, "Payment token would lose ", paymentValueLoss, "% of it's value!"))), /*#__PURE__*/React.createElement("button", {
+      }, /*#__PURE__*/React.createElement("strong", null, "Payment would lose ", paymentValueLoss, "% of its value!"))), /*#__PURE__*/React.createElement("button", {
         className: "ButtonPrimary disabled",
         onClick: function onClick() {}
-      }, "Pay ", displayedPaymentValue));
+      }, "Pay"));
     } else if ((paymentState == 'initialized' || paymentState == 'approving') && payment.route) {
       return /*#__PURE__*/React.createElement("button", {
         className: ["ButtonPrimary", payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled' : ''].join(' '),
@@ -23638,7 +23659,7 @@ var Footer = (function () {
           }
           pay();
         }
-      }, "Pay ", displayedPaymentValue);
+      }, "Pay");
     } else if (paymentState == 'paying') {
       return /*#__PURE__*/React.createElement("a", {
         className: "ButtonPrimary",
@@ -23700,7 +23721,7 @@ var DonationOverviewDialog = (function (props) {
   if (payment == undefined) {
     return /*#__PURE__*/React.createElement(DonationOverviewSkeleton, null);
   }
-  var blockchain = Blockchain.findByName(payment.blockchain);
+  var blockchain = Blockchains.findByName(payment.blockchain);
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -23827,7 +23848,7 @@ var WrongNetworkDialog = (function (props) {
     _useState2 = _slicedToArray(_useState, 2);
     _useState2[0];
     _useState2[1];
-  var blockchain = Blockchain.findByName(payment.route.blockchain);
+  var blockchain = Blockchains.findByName(payment.route.blockchain);
   var switchNetwork = function switchNetwork() {
     wallet.switchTo(payment.blockchain);
     navigate('back');
@@ -24455,10 +24476,12 @@ var WalletProvider = (function (props) {
       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();
@@ -25004,7 +25027,8 @@ var PaymentOverviewDialog = (function (props) {
   var _useContext4 = useContext(WalletContext),
     disconnect = _useContext4.disconnect;
   var _useContext5 = useContext(PaymentValueContext),
-    paymentValue = _useContext5.paymentValue;
+    paymentValue = _useContext5.paymentValue,
+    displayedPaymentValue = _useContext5.displayedPaymentValue;
   var _useContext6 = useContext(NavigateStackContext),
     navigate = _useContext6.navigate;
   var _useState = useState(false),
@@ -25035,7 +25059,7 @@ var PaymentOverviewDialog = (function (props) {
       alternativeHeaderAction: alternativeHeaderActionElement
     });
   }
-  var blockchain = Blockchain.findByName(payment.blockchain);
+  var blockchain = Blockchains.findByName(payment.blockchain);
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -25105,7 +25129,11 @@ var PaymentOverviewDialog = (function (props) {
       className: "TokenSymbolCell"
     }, payment.symbol), /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement("span", {
       className: "TokenAmountCell"
-    }, format(payment.amount)))))), /*#__PURE__*/React.createElement("div", {
+    }, format(payment.amount))), displayedPaymentValue != "".concat(payment.symbol, " ").concat(format(payment.amount)) && !(amountsMissing && !fixedCurrency) && /*#__PURE__*/React.createElement("div", {
+      className: "TokenAmountRow small grey"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "TokenAmountCell"
+    }, displayedPaymentValue))))), /*#__PURE__*/React.createElement("div", {
       className: "CardAction"
     }, /*#__PURE__*/React.createElement(ChevronRight, null)))),
     footer: /*#__PURE__*/React.createElement("div", {
@@ -25523,7 +25551,7 @@ var SaleOverviewDialog = (function (props) {
       address: toToken.address
     });
   }
-  var blockchain = Blockchain.findByName(payment.blockchain);
+  var blockchain = Blockchains.findByName(payment.blockchain);
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -25853,7 +25881,7 @@ var ConfirmNFTSelectionDialog = (function (props) {
     }, "Address")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
       className: "Link",
       title: selection.nft.address,
-      href: Blockchain.findByName(blockchain).explorerUrlFor({
+      href: Blockchains.findByName(blockchain).explorerUrlFor({
         token: selection.nft.address
       }),
       target: "_blank",
@@ -25862,7 +25890,7 @@ var ConfirmNFTSelectionDialog = (function (props) {
       className: "TableSubTitle"
     }, "Token ID")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, selection.nft.id))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
       className: "TableSubTitle"
-    }, "Blockchain")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, Blockchain.findByName(blockchain).label))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+    }, "Blockchain")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, Blockchains.findByName(blockchain).label))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
       className: "TableSubTitle"
     }, "Name")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("a", {
       className: "Link",
@@ -25886,7 +25914,7 @@ var ConfirmNFTSelectionDialog = (function (props) {
 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 = useContext(NavigateStackContext),
     navigate = _useContext.navigate;
   var _useContext2 = useContext(SelectionContext),
@@ -26004,10 +26032,10 @@ var EnterNFTDataForOpenSeaDialog = (function (props) {
       className: "CardImage small"
     }, /*#__PURE__*/React.createElement("img", {
       className: "transparent",
-      src: (_Blockchain$findByNam = 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.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.createElement("div", {
       className: "CardBody FontSizeM"
-    }, (_Blockchain$findByNam2 = 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.createElement("div", {
+    }, (_Blockchains$findByNa2 = Blockchains.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.createElement("div", {
       className: "CardAction"
     }, /*#__PURE__*/React.createElement(ChevronRight, null))))), idRequired && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS TextLeft"
@@ -26623,7 +26651,7 @@ var ConfirmTokenSelectionDialog = (function (props) {
   var token = selection.token;
   var address = token.address || token.external_id;
   var logo = token.logo || token.image;
-  var blockchain = Blockchain.findByName(token.blockchain);
+  var blockchain = Blockchains.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) {
@@ -26745,7 +26773,7 @@ var SelectTokenDialog = (function (props) {
   var searchElement = useRef();
   var wallet = getWallets()[0];
   var startWithBlockchain = function startWithBlockchain(name) {
-    var blockchain = Blockchain.findByName(name);
+    var blockchain = Blockchains.findByName(name);
     setBlockchain(blockchain);
     setSelection(Object.assign(props.selection, {
       blockchain: blockchain,
@@ -26756,7 +26784,7 @@ var SelectTokenDialog = (function (props) {
   useEffect(function () {
     if (wallet) {
       wallet.connectedTo().then(function (name) {
-        var blockchain = Blockchain.findByName(name);
+        var blockchain = Blockchains.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) {