@depay/widgets 9.1.1 → 9.2.0

package/dist/umd/index.js

@@ -1217,7 +1217,7 @@
   });
 
   var CardStyle = (function (style) {
-    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 13px;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 8px;\n      min-height: 76px;\n      padding: 16px 10px;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 69px;\n      padding: 7px 21px;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 19px;\n      line-height: 40px;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 17px;\n    }\n\n    .Card.Row .CardImage {\n      width: 40px;\n    }\n\n    .Card.Row .CardImage img {\n      height: 30px;\n      width: 30px;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 8px 8px;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 27px;\n    }\n\n    .CardImage.small img {\n      height: 27px;\n      width: 27px;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 7px;\n    }\n\n    .CardImage {\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 58px;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 27px;\n      padding-left: 10px;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 9999px;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 45px;\n      position: relative;\n      vertical-align: middle;\n      width: 45px;\n    }\n\n    .CardImage.square img {\n      border-radius: 0;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 15px;\n      color: rgb(150,150,150);\n      line-height: 20px;\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 21px;\n      line-height: 26px;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText.small, .CardText.small small {\n      font-size: 18px;\n      color: rgb(150,150,150);\n      line-height: 20px;\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
+    return "\n\n    .Card {\n      align-items: center;\n      background: rgb(255,255,255);\n      border-radius: 13px;\n      box-shadow: 0 0 8px rgba(0,0,0,0.03);\n      cursor: pointer;\n      display: flex;\n      flex-direction: row;\n      margin-bottom: 8px;\n      min-height: 76px;\n      padding: 16px 10px;\n      width: 100%;\n    }\n\n    .Card.Row {\n      border-radius: 0;\n      margin-bottom: 0;\n      box-shadow: none;\n      min-height: 69px;\n      padding: 7px 21px;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .Card.Row .CardText {\n      font-size: 19px;\n      line-height: 40px;\n    }\n\n    .CardTokenSymbol {\n      width: 40%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenFullName {\n      width: 100%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .CardTokenName {\n      text-align: right;\n      opacity: 0.5;\n      width: 60%;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .Card.Row .CardTokenName .CardText {\n      font-size: 17px;\n    }\n\n    .Card.Row .CardImage {\n      width: 40px;\n    }\n\n    .Card.Row .CardImage img {\n      height: 30px;\n      width: 30px;\n    }\n\n    a.Card, a.Card * {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .Card.transparent {\n      background: none;\n      box-shadow: none;\n    }\n\n    .Card.small {\n      min-height: auto;\n      padding: 8px 8px;\n      margin: 0;\n    }\n\n    .CardImage.small {\n      width: 27px;\n    }\n\n    .CardImage.small img {\n      height: 27px;\n      width: 27px;\n    }\n\n    .Card.disabled {\n      cursor: default;\n    }\n\n    .Card:hover:not(.disabled) {\n      background: rgb(240,240,240);\n      box-shadow: 0 0 0 rgba(0,0,0,0); \n    }\n\n    .Card:active:not(.disabled) {\n      background: rgb(235,235,235);\n      box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n      color: inherit;\n    }\n\n    .Card:hover:not(.disabled) .CardAction {\n      opacity: 0.4;\n    }\n\n    .CardImage, .CardBody, .CardAction, .CardInfo {\n      align-items: center;\n      display: flex;\n      min-width: 0;\n      padding: 0 7px;\n    }\n\n    .CardImage {\n      display: inline-flex;\n      flex-basis: auto;\n      flex-grow: 0;\n      flex-shrink: 0;\n      justify-content: center;\n      position: relative;\n      width: 58px;\n    }\n\n    .CardBody {\n      flex-basis: auto;\n      flex-grow: 1;\n      flex-shrink: 1;\n      line-height: 27px;\n      padding-left: 10px;\n      text-align: left;\n    }\n\n    .CardBodyWrapper {\n      min-width: 0;\n    }\n\n    .CardAction {\n      flex-basis: auto;\n      flex-shrink: 0;\n      flex-grow: 0;\n      padding-right: 0;\n      margin-left: auto;\n    }\n\n    .Card.disabled .CardAction {\n      opacity: 0;  \n    }\n\n    .CardInfo {\n      display: flex;\n      flex-basis: auto;\n      flex-direction: column;\n      flex-grow: 0;\n      flex-shrink: 1;\n      justify-content: center;\n      margin-left: auto; \n      padding-right: 0;\n    }\n\n    .CardImage img {\n      background: white;\n      border-radius: 9999px;\n      border: 1px solid white;\n      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n      height: 45px;\n      position: relative;\n      vertical-align: middle;\n      width: 45px;\n    }\n\n    .CardImage.square img {\n      border-radius: 0;\n    }\n\n    .CardImage img.transparent {\n      border: none;\n      background: none;\n      box-shadow: none;\n    }\n    \n    .CardImage .BlockchainLogo {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    .CardTitle {\n      font-size: 15px;\n      color: rgb(150,150,150);\n      line-height: 20px;\n    }\n    \n    .CardText, a .CardText {\n      color: ".concat(style.colors.text, ";\n      flex: 1;\n      font-size: 21px;\n      line-height: 26px;\n    }\n\n    .CardText strong {\n      font-weight: 500;\n    }\n\n    .CardText.small, .CardText.small small {\n      font-size: 18px;\n      color: rgb(150,150,150);\n      line-height: 20px;\n    }\n\n    .CardAction {\n      opacity: 0.2;\n    }\n\n    .Card.More {\n      display: inline-block;\n      text-align: center;\n    }\n  ");
   });
 
   var DialogStyle = (function (style) {
@@ -1293,7 +1293,7 @@
   });
 
   var TextStyle = (function (style) {
-    return "\n\n    * {\n      color: ".concat(style.colors.text, ";\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n      display: block;\n    }\n\n    .Text {\n      font-size: 16px;\n      line-height: 24px\n    }\n\n    .TextLeft, .TextLeft * {\n      text-align: left;\n    }\n\n    .TextCenter, .TextCenter * {\n      text-align: center;\n    }\n\n    .LineHeightL {\n      line-height: 32px;\n    }\n\n    .ErrorSnippetText {\n      background: rgb(30, 30, 20);\n      border-radius: 19px;\n      border: 8px solid rgb(30, 30, 20);\n      color: #00FF41;\n      font-size: 15px;\n      font-style: italic;\n      max-height: 100px;\n      padding: 6px;\n      overflow-wrap: break-word;\n      overflow-y: auto;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n  ");
+    return "\n\n    * {\n      color: ".concat(style.colors.text, ";\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n      display: block;\n    }\n\n    .Text {\n      font-size: 16px;\n      line-height: 24px\n    }\n\n    .TextLeft, .TextLeft * {\n      text-align: left !important;\n    }\n\n    .TextCenter, .TextCenter * {\n      text-align: center;\n    }\n\n    .LineHeightL {\n      line-height: 32px;\n    }\n\n    .ErrorSnippetText {\n      background: rgb(30, 30, 20);\n      border-radius: 19px;\n      border: 8px solid rgb(30, 30, 20);\n      color: #00FF41;\n      font-size: 15px;\n      font-style: italic;\n      max-height: 100px;\n      padding: 6px;\n      overflow-wrap: break-word;\n      overflow-y: auto;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n  ");
   });
 
   var TokenAmountStyle = (function () {
@@ -19351,12 +19351,12 @@
     return obj;
   }
 
-  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var prepareAcceptedPayments = function prepareAcceptedPayments(accept) {
     var toAddress = _typeof(accept.receiver) == 'object' ? accept.receiver.address : accept.receiver;
     var toContract = _typeof(accept.receiver) == 'object' ? accept.receiver : undefined;
-    return _objectSpread$1(_objectSpread$1({}, accept), {}, {
+    return _objectSpread$3(_objectSpread$3({}, accept), {}, {
       toAddress: toAddress,
       toContract: toContract
     });
@@ -19384,8 +19384,8 @@
     });
   });
 
-  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var PaymentRoutingProvider = (function (props) {
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19547,7 +19547,7 @@
         return regenerator.wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              setSelectedRoute(_objectSpread({}, updatedRouteWithNewPrice));
+              setSelectedRoute(_objectSpread$2({}, updatedRouteWithNewPrice));
               setUpdatedRouteWithNewPrice(null);
             case 2:
             case "end":
@@ -20502,7 +20502,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       stacked: true,
       header: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Wrong Network")),
@@ -20643,12 +20643,13 @@
     var openSocket = function openSocket(transaction) {
       var socket = new WebSocket('wss://integrate.depay.com/cable');
       socket.onopen = function (event) {
+        var _transaction$nonce;
         var msg = {
           command: 'subscribe',
           identifier: JSON.stringify({
             blockchain: transaction.blockchain,
             sender: transaction.from,
-            nonce: transaction.nonce.toString(),
+            nonce: transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce = transaction.nonce) === null || _transaction$nonce === void 0 ? void 0 : _transaction$nonce.toString(),
             channel: 'PaymentChannel'
           })
         };
@@ -20721,12 +20722,12 @@
       }
     };
     var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
-      var _paymentRoute$feeAmou;
+      var _transaction$nonce2, _paymentRoute$feeAmou;
       callTracking({
         blockchain: transaction.blockchain,
         transaction: transaction.id,
         sender: transaction.from,
-        nonce: transaction.nonce.toString(),
+        nonce: transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce2 = transaction.nonce) === null || _transaction$nonce2 === void 0 ? void 0 : _transaction$nonce2.toString(),
         after_block: afterBlock.toString(),
         from_token: paymentRoute.fromToken.address,
         from_amount: paymentRoute.fromAmount.toString(),
@@ -20744,6 +20745,7 @@
       });
     };
     var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+      var _transaction$nonce3;
       if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
         return;
       }
@@ -20751,7 +20753,7 @@
         blockchain: transaction.blockchain,
         transaction: transaction.id,
         sender: transaction.from,
-        nonce: transaction.nonce.toString(),
+        nonce: transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce3 = transaction.nonce) === null || _transaction$nonce3 === void 0 ? void 0 : _transaction$nonce3.toString(),
         after_block: afterBlock.toString(),
         to_token: paymentRoute.toToken.address
       };
@@ -20804,6 +20806,7 @@
       };
     }, [polling, transaction, afterBlock, paymentRoute]);
     var storePayment = function storePayment(transaction, afterBlock, paymentRoute, attempt) {
+      var _transaction$nonce4;
       fetch('https://public.depay.com/payments', {
         headers: {
           'Content-Type': 'application/json'
@@ -20813,7 +20816,7 @@
           blockchain: transaction.blockchain,
           transaction: transaction.id,
           sender: transaction.from,
-          nonce: transaction.nonce.toString(),
+          nonce: transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce4 = transaction.nonce) === null || _transaction$nonce4 === void 0 ? void 0 : _transaction$nonce4.toString(),
           receiver: paymentRoute.toAddress,
           token: paymentRoute.toToken.address,
           amount: paymentRoute.fee ? ethers.ethers.utils.formatUnits(paymentRoute.transaction.params.amounts[1], paymentRoute.toDecimals) : ethers.ethers.utils.formatUnits(paymentRoute.toAmount, paymentRoute.toDecimals),
@@ -20991,6 +20994,7 @@
       }
     }, [polling]);
     var createTracking = function createTracking(transaction, afterBlock, attempt) {
+      var _transaction$nonce;
       if (attempt > 3) {
         console.log('TRANSACTION TRACKING FAILED AFTER 3 ATTEMPTS!');
         return;
@@ -21005,7 +21009,7 @@
           after_block: afterBlock.toString(),
           blockchain: transaction.blockchain,
           sender: transaction.from,
-          nonce: transaction.nonce.toString()
+          nonce: transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce = transaction.nonce) === null || _transaction$nonce === void 0 ? void 0 : _transaction$nonce.toString()
         })
       }).then(function (response) {
         if (response.status == 200 || response.status == 201) {
@@ -21026,12 +21030,13 @@
     var openSocket = function openSocket(transaction) {
       var socket = new WebSocket('wss://integrate.depay.com/cable');
       socket.onopen = function (event) {
+        var _transaction$nonce2;
         var msg = {
           command: 'subscribe',
           identifier: JSON.stringify({
             blockchain: transaction.blockchain,
             sender: transaction.from,
-            nonce: transaction.nonce.toString(),
+            nonce: transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce2 = transaction.nonce) === null || _transaction$nonce2 === void 0 ? void 0 : _transaction$nonce2.toString(),
             channel: 'TransactionChannel'
           })
         };
@@ -22292,51 +22297,52 @@
     };
   });
 
-  var ConfirmTokenSelectionDialog = (function (props) {
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var ConfirmNFTSelectionDialog = (function (props) {
+    var _selection$nft, _selection$blockchain;
     var _useContext = React.useContext(SelectionContext),
       selection = _useContext.selection;
+      _useContext.setSelection;
     var _useContext2 = React.useContext(ClosableContext),
       setOpen = _useContext2.setOpen;
-    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 age = token.first_transfer ? msToTime(new Date() - new Date(token.first_transfer)) : undefined;
-    if (age) {
+    var _useContext3 = React.useContext(reactDialogStack.NavigateStackContext),
+      navigate = _useContext3.navigate;
+    var age, holders;
+    if (selection.nft.createdAt) {
+      age = msToTime(new Date() - new Date(selection.nft.createdAt));
       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) {
         return n;
       }).join(' ');
     }
-    var holders = token.unique_senders ? token.unique_senders : undefined;
-    if (holders) {
-      if (holders > 1000000) {
+    if (selection.nft.holders) {
+      if (selection.nft.holders > 1000000) {
         holders = "Millions";
-      } else if (holders > 100000) {
+      } else if (selection.nft.holders > 100000) {
         holders = "Hundreds of Thousands";
-      } else if (holders > 2000) {
+      } else if (selection.nft.holders > 2000) {
         holders = "Thousands";
-      } else if (holders > 100) {
+      } else if (selection.nft.holders > 100) {
         holders = "Hundreds";
       } else {
         holders = "Only a Few!!!";
       }
     }
+    var blockchain = ((_selection$nft = selection.nft) === null || _selection$nft === void 0 ? void 0 : _selection$nft.blockchain) || ((_selection$blockchain = selection.blockchain) === null || _selection$blockchain === void 0 ? void 0 : _selection$blockchain.name);
+    if (blockchain == undefined) {
+      navigate('SelectBlockchain');
+      return null;
+    }
     var onClickConfirm = function onClickConfirm() {
       setOpen(false);
-      props.resolve({
-        blockchain: token.blockchain,
-        address: token.external_id || token.address,
-        symbol: token.symbol,
-        name: token.name,
-        decimals: token.decimals,
-        logo: token.image || token.logo,
-        routable: token.routable
-      });
+      props.resolve(_objectSpread$1(_objectSpread$1({}, selection.nft), {}, {
+        blockchain: blockchain
+      }));
       setTimeout(props.unmount, 300);
     };
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Confirm Selection"))),
@@ -22345,11 +22351,8 @@
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TokenImage medium TextCenter"
-      }, logo && /*#__PURE__*/React__default["default"].createElement("img", {
-        src: logo
-      }), !logo && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
-        blockchain: token.blockchain,
-        address: address
+      }, selection.nft.image && /*#__PURE__*/React__default["default"].createElement("img", {
+        src: selection.nft.image
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS TextCenter"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22361,20 +22364,25 @@
       }, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TableSubTitle"
       }, "Address")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
-        className: "Link FontSizeM",
-        title: address,
-        href: blockchain.explorerUrlFor({
-          token: address
+        className: "Link",
+        title: selection.nft.address,
+        href: web3Blockchains.Blockchain.findByName(blockchain).explorerUrlFor({
+          token: selection.nft.address
         }),
         target: "_blank",
         rel: "noopener noreferrer"
-      }, addressEllipsis(address, 4))))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, addressEllipsis(selection.nft.address, 6))))), 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, blockchain.label))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, "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"
-      }, "Symbol")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, token.symbol))), /*#__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, 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", {
         className: "TableSubTitle"
-      }, "Name")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, token.name))), age && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, "Name")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "Link",
+        href: selection.nft.link,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, selection.nft.name))), age && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TableSubTitle"
       }, "Age")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, age))), holders && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "TableSubTitle"
@@ -22388,19 +22396,227 @@
     });
   });
 
+  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 _useContext = React.useContext(reactDialogStack.NavigateStackContext),
+      navigate = _useContext.navigate;
+    var _useContext2 = React.useContext(SelectionContext),
+      selection = _useContext2.selection,
+      setSelection = _useContext2.setSelection;
+    var _useState = React.useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      id = _useState2[0],
+      setId = _useState2[1];
+    var _useState3 = React.useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      image = _useState4[0],
+      setImage = _useState4[1];
+    var _useState5 = React.useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      link = _useState6[0],
+      setLink = _useState6[1];
+    var _useState7 = React.useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      name = _useState8[0],
+      setName = _useState8[1];
+    var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      idRequired = _useState10[0],
+      setIdRequired = _useState10[1];
+    var confirm = function confirm() {
+      var _selection$blockchain, _selection$collection;
+      var blockchain = (selection === null || selection === void 0 ? void 0 : (_selection$blockchain = selection.blockchain) === null || _selection$blockchain === void 0 ? void 0 : _selection$blockchain.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection = selection.collection) === null || _selection$collection === void 0 ? void 0 : _selection$collection.blockchain);
+      setSelection(Object.assign(props.selection, {
+        nft: {
+          blockchain: blockchain,
+          id: id,
+          image: image,
+          name: name,
+          link: link,
+          address: selection.nft.address,
+          type: idRequired ? '1155' : '721'
+        }
+      }));
+      navigate('ConfirmNFTSelection');
+    };
+    React.useEffect(function () {
+      var _selection$blockchain2, _selection$collection2;
+      var blockchain = (selection === null || selection === void 0 ? void 0 : (_selection$blockchain2 = selection.blockchain) === null || _selection$blockchain2 === void 0 ? void 0 : _selection$blockchain2.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection2 = selection.collection) === null || _selection$collection2 === void 0 ? void 0 : _selection$collection2.blockchain);
+      var checkForIdRequired = /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+          var balanceWithId;
+          return regenerator.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!blockchain) {
+                  _context.next = 10;
+                  break;
+                }
+                _context.prev = 1;
+                _context.next = 4;
+                return web3Client.request({
+                  blockchain: blockchain,
+                  address: selection.nft.address,
+                  method: 'balanceOf',
+                  api: web3Tokens.Token[blockchain][1155],
+                  params: ['0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02', '1']
+                });
+              case 4:
+                balanceWithId = _context.sent;
+                _context.next = 9;
+                break;
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](1);
+              case 9:
+                if (balanceWithId) {
+                  setIdRequired(true);
+                }
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[1, 7]]);
+        }));
+        return function checkForIdRequired() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      checkForIdRequired();
+    }, [selection.blockchain]);
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      stacked: true,
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "LineHeightL FontSizeL PaddingTopXS"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardImage small"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
+        src: OpenSea
+      }))))),
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterNFTBlockchain"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Select Blockchain"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Card small",
+        onClick: function onClick() {
+          return navigate('SelectBlockchain');
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        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
+      })), /*#__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", {
+        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"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterNFTTokenId"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Enter Token ID"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "DePayWidgetsEnterNFTTokenId",
+        name: "DePayWidgetsEnterNFTTokenId",
+        value: id,
+        onChange: function onChange(event) {
+          return setId(event.target.value);
+        },
+        className: "Search"
+      }))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterNFTName"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Enter NFT Name"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "DePayWidgetsEnterNFTName",
+        name: "DePayWidgetsEnterNFTName",
+        value: name,
+        onChange: function onChange(event) {
+          return setName(event.target.value);
+        },
+        placeholder: "CryptoPunks",
+        className: "Search"
+      }))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterNFTImage"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Enter Image URL"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "DePayWidgetsEnterNFTImage",
+        name: "DePayWidgetsEnterNFTImage",
+        value: image,
+        onChange: function onChange(event) {
+          return setImage(event.target.value);
+        },
+        placeholder: "https://i.seadn.io/gae/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE?auto=format&w=128",
+        className: "Search"
+      }))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterNFTLink"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Enter Link URL"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "DePayWidgetsEnterNFTLink",
+        name: "DePayWidgetsEnterNFTLink",
+        value: link,
+        onChange: function onChange(event) {
+          return setLink(event.target.value);
+        },
+        placeholder: "https://opensea.io/collection/cryptopunks",
+        className: "Search"
+      })))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomM"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        className: ['ButtonPrimary', !image.length || !link.length || !name.length || idRequired && !id.length ? 'disabled' : ''].join(' '),
+        onClick: function onClick() {
+          if (!image.length || !link.length || !name.length || idRequired && !id.length) {
+            return;
+          }
+          confirm();
+        }
+      }, "Continue"))
+    });
+  });
+
   var SelectBlockchainDialog = (function (props) {
     var _useContext = React.useContext(SelectionContext),
       setSelection = _useContext.setSelection;
     var _useContext2 = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext2.navigate;
-    var stacked = Object.keys(props.selection).length > 1;
+    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 selectBlockchain = function selectBlockchain(blockchain) {
       window._depay_token_selection_selected_blockchain = blockchain.name;
       setSelection(Object.assign(props.selection, {
         blockchain: blockchain
       }));
-      if (stacked) {
+      if (stacked && props.navigateBack !== false) {
         navigate('back');
       } else {
         props.resolve(blockchain);
@@ -22426,7 +22642,7 @@
     });
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
         className: "LineHeightL FontSizeL"
       }, "Select Blockchain"))),
@@ -22441,115 +22657,746 @@
     });
   });
 
-  var SelectTokenDialog = (function (props) {
+  var BLOCKCHAIN_NAMES$1 = {
+    'ethereum': 'ethereum',
+    'matic': 'polygon,'
+  };
+  var SelectNFTContractOnOpenSeaDialog = (function (props) {
     var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
       navigate = _useContext.navigate;
-    var _useContext2 = React.useContext(ClosableContext),
-      setOpen = _useContext2.setOpen;
-    var _useContext3 = React.useContext(SelectionContext),
-      setSelection = _useContext3.setSelection;
     var _useState = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       searchTerm = _useState2[0],
       setSearchTerm = _useState2[1];
-    var _useState3 = React.useState(),
+    var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      blockchain = _useState4[0],
-      setBlockchain = _useState4[1];
-    var _useState5 = React.useState(false),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+    var _useState5 = React.useState([]),
       _useState6 = _slicedToArray(_useState5, 2),
-      showAddToken = _useState6[0],
-      setShowAddToken = _useState6[1];
-    var _useState7 = React.useState([]),
-      _useState8 = _slicedToArray(_useState7, 2),
-      tokens = _useState8[0],
-      setTokens = _useState8[1];
-    var _useState9 = React.useState(),
-      _useState10 = _slicedToArray(_useState9, 2);
-      _useState10[0];
-      _useState10[1];
-    var searchElement = React.useRef();
-    var wallet = web3Wallets.getWallets()[0];
-    var startWithBlockchain = function startWithBlockchain(name) {
-      var blockchain = web3Blockchains.Blockchain.findByName(name);
-      setBlockchain(blockchain);
+      searchResults = _useState6[0],
+      setSearchResults = _useState6[1];
+    var _useContext2 = React.useContext(SelectionContext),
+      setSelection = _useContext2.setSelection;
+    var select = function select(nft) {
       setSelection(Object.assign(props.selection, {
-        blockchain: blockchain,
-        token: undefined
+        nft: nft
       }));
-      setTokens(blockchain.tokens);
+      navigate('ConfirmNFTSelection');
     };
-    React.useEffect(function () {
-      if (wallet) {
-        wallet.connectedTo().then(function (name) {
-          var blockchain = web3Blockchains.Blockchain.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) {
-            startWithBlockchain(name);
-          } else {
-            startWithBlockchain('ethereum');
+    var dataForCollectionViaAsset = function dataForCollectionViaAsset(address) {
+      return new Promise(function (resolve, reject) {
+        fetch("https://api.opensea.io/api/v1/assets?asset_contract_address=".concat(address)).then(function (response) {
+          if (response.status != 200) {
+            return resolve();
           }
-        });
-      } else {
-        startWithBlockchain('ethereum');
-      }
-    }, []);
-    React.useEffect(function () {
-      if (props.selection.blockchain) {
-        setBlockchain(props.selection.blockchain);
-        setTokens(props.selection.blockchain.tokens);
-        if (searchElement.current) {
-          searchElement.current.value = '';
-          searchElement.current.focus();
-        }
-      }
-    }, [props.selection, props.selection.blockchain]);
-    var onClickChangeBlockchain = function onClickChangeBlockchain() {
-      navigate('SelectBlockchain');
-    };
-    var onClickAddToken = function onClickAddToken() {
-      setShowAddToken(true);
-      if (searchElement.current) {
-        searchElement.current.value = '';
-        searchElement.current.focus();
-      }
-    };
-    var searchTokens = React.useCallback(lodash.debounce(function (term, blockchainName) {
-      fetch("https://public.depay.com/tokens/search?blockchain=".concat(blockchainName, "&term=").concat(term)).then(function (response) {
-        if (response.status == 200) {
-          response.json().then(function (tokens) {
-            setTokens(tokens);
+          response.json().then(function (data) {
+            return resolve(data.assets ? data.assets[0] : undefined);
           })["catch"](function () {
-            return reject;
+            return resolve();
           });
-        } else {
-          reject();
+        })["catch"](function () {
+          return resolve();
+        });
+      });
+    };
+    var searchContract = React.useCallback(lodash.debounce(function (address) {
+      fetch("https://api.opensea.io/api/v1/asset_contract/".concat(address)).then(function (response) {
+        if (response.status != 200) {
+          setLoading(false);
+          return;
         }
+        response.json().then( /*#__PURE__*/function () {
+          var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(data) {
+            var result, blockchain, holders, additionalData, _additionalData$colle, _additionalData$colle2, _additionalData$colle3, _additionalData$colle4, _additionalData, _blockchain;
+            return regenerator.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  if (!(data.asset_contract_type == 'non-fungible')) {
+                    _context.next = 8;
+                    break;
+                  }
+                  _context.next = 3;
+                  return dataForCollectionViaAsset(address);
+                case 3:
+                  additionalData = _context.sent;
+                  if (additionalData) {
+                    blockchain = additionalData !== null && additionalData !== void 0 && additionalData.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//) ? BLOCKCHAIN_NAMES$1[additionalData.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//)[1]] : undefined;
+                    holders = additionalData === null || additionalData === void 0 ? void 0 : (_additionalData$colle = additionalData.collection) === null || _additionalData$colle === void 0 ? void 0 : (_additionalData$colle2 = _additionalData$colle.stats) === null || _additionalData$colle2 === void 0 ? void 0 : _additionalData$colle2.num_owners;
+                  }
+                  result = {
+                    blockchain: blockchain,
+                    holders: holders,
+                    createdAt: data.created_date,
+                    image: data.image_url,
+                    name: data.collection ? data.collection.name : undefined,
+                    link: data.collection ? "https://opensea.io/collection/".concat(data.collection.slug) : undefined,
+                    address: ethers.ethers.utils.getAddress(data.address),
+                    type: '721'
+                  };
+                  _context.next = 22;
+                  break;
+                case 8:
+                  if (!(data.asset_contract_type == 'semi-fungible')) {
+                    _context.next = 21;
+                    break;
+                  }
+                  if (!(data.symbol == 'OPENSTORE' && data.name == 'OpenSea Collection')) {
+                    _context.next = 13;
+                    break;
+                  }
+                  result = {
+                    id: null,
+                    address: ethers.ethers.utils.getAddress(data.address),
+                    type: '1155'
+                  };
+                  _context.next = 19;
+                  break;
+                case 13:
+                  _context.next = 15;
+                  return dataForCollectionViaAsset(address);
+                case 15:
+                  _additionalData = _context.sent;
+                  _blockchain = _additionalData !== null && _additionalData !== void 0 && _additionalData.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//) ? BLOCKCHAIN_NAMES$1[_additionalData.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//)[1]] : undefined;
+                  _additionalData === null || _additionalData === void 0 ? void 0 : (_additionalData$colle3 = _additionalData.collection) === null || _additionalData$colle3 === void 0 ? void 0 : (_additionalData$colle4 = _additionalData$colle3.stats) === null || _additionalData$colle4 === void 0 ? void 0 : _additionalData$colle4.num_owners;
+                  result = {
+                    blockchain: _blockchain,
+                    id: null,
+                    createdAt: data.created_date,
+                    image: data.image_url,
+                    name: data.collection ? data.collection.name : undefined,
+                    link: data.collection ? "https://opensea.io/collection/".concat(data.collection.slug) : undefined,
+                    address: ethers.ethers.utils.getAddress(data.address),
+                    type: '1155'
+                  };
+                case 19:
+                  _context.next = 22;
+                  break;
+                case 21:
+                  // like matic/polygon (which is not yet supported by opensea apis)
+                  if (data.address) {
+                    result = {
+                      address: ethers.ethers.utils.getAddress(data.address)
+                    };
+                  }
+                case 22:
+                  if (result) {
+                    if (result.type == undefined) {
+                      setSelection(Object.assign(props.selection, {
+                        nft: result,
+                        blockchain: result.blockchain || 'polygon'
+                      }));
+                      navigate('EnterNFTDataForOpenSea');
+                      setSearchTerm('');
+                    } else if (result.id !== null) {
+                      select(result);
+                      setSearchResults([result]);
+                      navigate('ConfirmNFTSelection');
+                    } else {
+                      setSelection(Object.assign(props.selection, {
+                        nft: result
+                      }));
+                      navigate('SelectNFTIdOnOpenSea');
+                      setSearchTerm('');
+                    }
+                  }
+                  setLoading(false);
+                case 24:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x) {
+            return _ref.apply(this, arguments);
+          };
+        }())["catch"](function () {
+          setLoading(false);
+        });
       })["catch"](function () {
-        return reject;
+        setLoading(false);
       });
-    }, 300), []);
-    var onChangeSearch = function onChangeSearch(event) {
-      setShowAddToken(false);
+    }, 500), []);
+    var onChangeTermSearch = function onChangeTermSearch(event) {
+      setLoading(true);
+      setSearchResults([]);
       var term = event.target.value;
       setSearchTerm(term);
-      if (term.match(/^0x/)) {
-        setTokens([]);
-        var token;
-        try {
-          token = new web3Tokens.Token({
-            blockchain: blockchain.name,
-            address: term
-          });
-        } catch (_unused) {}
-        if (token == undefined) {
-          return;
+      if (term && term.length) {
+        searchContract(term);
+      } else {
+        setLoading(false);
+      }
+    };
+    var elements;
+    if (loading) {
+      elements = [/*#__PURE__*/React__default["default"].createElement("div", {
+        className: "SkeletonWrapper",
+        key: 'loading'
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Skeleton",
+        style: {
+          height: '69px',
+          width: '100%'
         }
-        Promise.all([token.name(), token.symbol(), token.decimals(), fetch("https://public.depay.com/tokens/routable/".concat(blockchain.name, "/").concat(term)).then(function (response) {
-          if (response.status == 200) {
-            return response.json();
-          }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "SkeletonBackground"
+      })))];
+    } else {
+      elements = searchResults.map(function (result, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: index,
+          className: "Card Row",
+          onClick: function onClick() {
+            return select(result);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React__default["default"].createElement("img", {
+          src: result.image
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardTokenFullName",
+          title: result.name
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "CardText"
+        }, result.name))));
+      });
+    }
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      stacked: true,
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "LineHeightL FontSizeL PaddingTopXS"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardImage small"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
+        src: OpenSea
+      })))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingBottomXS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterContractAddress"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Enter contract address"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "DePayWidgetsEnterContractAddress",
+        name: "DePayWidgetsEnterContractAddress",
+        value: searchTerm,
+        onChange: onChangeTermSearch,
+        className: "Search",
+        autoFocus: true,
+        placeholder: "0x495f947276749ce646f68ac8c248420045cb7b5e"
+      }))),
+      bodyClassName: "ScrollHeight",
+      body: /*#__PURE__*/React__default["default"].createElement("div", null, elements)
+    });
+  });
+
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var BLOCKCHAIN_NAMES = {
+    'ethereum': 'ethereum',
+    'matic': 'polygon,'
+  };
+  var SelectNFTIdOnOpenSeaDialog = (function (props) {
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
+      navigate = _useContext.navigate;
+    var _useState = React.useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchTerm = _useState2[0],
+      setSearchTerm = _useState2[1];
+    var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+    var _useState5 = React.useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchResults = _useState6[0],
+      setSearchResults = _useState6[1];
+    var _useContext2 = React.useContext(SelectionContext),
+      selection = _useContext2.selection,
+      setSelection = _useContext2.setSelection;
+    var select = function select(nft) {
+      setSelection(Object.assign(props.selection, {
+        nft: nft
+      }));
+      navigate('ConfirmNFTSelection');
+    };
+    var searchForCollectionById = React.useCallback(lodash.debounce(function (id) {
+      fetch("https://api.opensea.io/api/v1/asset/".concat(selection.nft.address, "/").concat(id)).then(function (response) {
+        if (response.status != 200) {
+          return resolve();
+        }
+        response.json().then( /*#__PURE__*/function () {
+          var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(data) {
+            var blockchain, result;
+            return regenerator.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  blockchain = data !== null && data !== void 0 && data.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//) ? BLOCKCHAIN_NAMES[data.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//)[1]] : undefined;
+                  result = _objectSpread(_objectSpread({}, selection.nft), {}, {
+                    blockchain: blockchain,
+                    id: data.token_id,
+                    image: data.image_url,
+                    name: data.name,
+                    link: data.permalink
+                  });
+                  setSearchResults([result]);
+                  select(result);
+                  setLoading(false);
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x) {
+            return _ref.apply(this, arguments);
+          };
+        }())["catch"](function () {
+          setLoading(false);
+        });
+      })["catch"](function () {
+        setLoading(false);
+      });
+    }, 500), []);
+    var onChangeTermSearch = function onChangeTermSearch(event) {
+      setLoading(true);
+      setSearchResults([]);
+      var term = event.target.value;
+      setSearchTerm(term);
+      if (term && term.length) {
+        searchForCollectionById(term);
+      } else {
+        setLoading(false);
+      }
+    };
+    React.useEffect(function () {
+      fetch("https://api.opensea.io/api/v1/assets?asset_contract_address=".concat(selection.nft.address)).then(function (response) {
+        if (response.status != 200) {
+          return resolve();
+        }
+        response.json().then(function (data) {
+          if (data.assets.length <= 6) {
+            var results = data.assets.map(function (data) {
+              var blockchain = data !== null && data !== void 0 && data.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//) ? BLOCKCHAIN_NAMES[data.permalink.match(/https:\/\/opensea\.io\/assets\/(\w*)\//)[1]] : undefined;
+              return _objectSpread(_objectSpread({}, selection.nft), {}, {
+                blockchain: blockchain,
+                id: data.token_id,
+                image: data.image_url,
+                name: data.name,
+                link: data.permalink
+              });
+            });
+            setSearchResults(results);
+            if (results.length == 1) {
+              select(results[0]);
+            }
+          }
+        });
+      });
+    }, []);
+    var elements;
+    if (loading) {
+      elements = [/*#__PURE__*/React__default["default"].createElement("div", {
+        className: "SkeletonWrapper",
+        key: 'loading'
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Skeleton",
+        style: {
+          height: '69px',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "SkeletonBackground"
+      })))];
+    } else {
+      elements = searchResults.map(function (result, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: index,
+          className: "Card Row",
+          onClick: function onClick() {
+            return select(result);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React__default["default"].createElement("img", {
+          src: result.image
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardTokenFullName",
+          title: result.name
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "CardText"
+        }, result.name))));
+      });
+    }
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      stacked: true,
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "LineHeightL FontSizeL PaddingTopXS"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardImage small"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "transparent",
+        src: OpenSea
+      })))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingBottomXS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "DePayWidgetsEnterCollectionId"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Enter Token ID"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "DePayWidgetsEnterCollectionId",
+        name: "DePayWidgetsEnterCollectionId",
+        value: searchTerm,
+        onChange: onChangeTermSearch,
+        className: "Search",
+        placeholder: "35347623114821255323888368639026081793120226253597860997754787918389704654849"
+      }))),
+      bodyClassName: "ScrollHeight",
+      body: /*#__PURE__*/React__default["default"].createElement("div", null, elements)
+    });
+  });
+
+  var SelectNFTPlatformDialog = (function (props) {
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
+      navigate = _useContext.navigate;
+    var select = function select(marketplace) {
+      navigate(marketplace.navigate);
+    };
+    var elements = [{
+      name: 'OpenSea',
+      navigate: 'SelectNFTContractOnOpenSea',
+      logo: OpenSea
+    }].map(function (marketplace, index) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: index,
+        className: "Card Row",
+        onClick: function onClick() {
+          return select(marketplace);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardImage"
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        src: marketplace.logo
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardBody"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardTokenSymbol",
+        title: marketplace.name
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "CardText"
+      }, marketplace.name)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardTokenName PaddingTopXS"
+      }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))));
+    });
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
+        className: "LineHeightL FontSizeL"
+      }, "Select NFT")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingBottomS"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "FontSizeM Opacity05"
+      }, "Choose which marketplace"))),
+      bodyClassName: "ScrollHeight",
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: ""
+      }, elements)
+    });
+  });
+
+  var SelectNFTStack = (function (props) {
+    var _ref;
+    var _useContext = React.useContext(ConfigurationContext),
+      what = _useContext.what;
+    var _useContext2 = React.useContext(ClosableContext),
+      open = _useContext2.open,
+      close = _useContext2.close;
+    var _useContext3 = React.useContext(SelectionContext),
+      selection = _useContext3.selection;
+      _useContext3.setSelection;
+    var _useState = React.useState(),
+      _useState2 = _slicedToArray(_useState, 2);
+      _useState2[0];
+      var _setNavigator = _useState2[1];
+    var start;
+    switch (what) {
+      default:
+        start = 'SelectMarketplace';
+    }
+    return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
+      open: open,
+      close: close,
+      start: start,
+      container: props.container,
+      document: props.document,
+      setNavigator: function setNavigator(navigator) {
+        _setNavigator(navigator);
+      },
+      dialogs: (_ref = {
+        SelectMarketplace: /*#__PURE__*/React__default["default"].createElement(SelectNFTPlatformDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        }),
+        SelectNFTContractOnOpenSea: /*#__PURE__*/React__default["default"].createElement(SelectNFTContractOnOpenSeaDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        }),
+        SelectNFTIdOnOpenSea: /*#__PURE__*/React__default["default"].createElement(SelectNFTIdOnOpenSeaDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        }),
+        SelectBlockchain: /*#__PURE__*/React__default["default"].createElement(SelectNFTIdOnOpenSeaDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        }),
+        EnterNFTDataForOpenSea: /*#__PURE__*/React__default["default"].createElement(EnterNFTDataForOpenSeaDialog, {
+          selection: selection,
+          resolve: props.resolve,
+          unmount: props.unmount
+        })
+      }, _defineProperty(_ref, "SelectBlockchain", /*#__PURE__*/React__default["default"].createElement(SelectBlockchainDialog, {
+        selection: selection,
+        stacked: true,
+        resolve: props.resolve,
+        unmount: props.unmount
+      })), _defineProperty(_ref, "ConfirmNFTSelection", /*#__PURE__*/React__default["default"].createElement(ConfirmNFTSelectionDialog, {
+        selection: selection,
+        resolve: props.resolve,
+        unmount: props.unmount
+      })), _ref)
+    });
+  });
+
+  var ConfirmTokenSelectionDialog = (function (props) {
+    var _useContext = React.useContext(SelectionContext),
+      selection = _useContext.selection;
+    var _useContext2 = React.useContext(ClosableContext),
+      setOpen = _useContext2.setOpen;
+    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 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) {
+        return n;
+      }).join(' ');
+    }
+    var holders = token.unique_senders ? token.unique_senders : undefined;
+    if (holders) {
+      if (holders > 1000000) {
+        holders = "Millions";
+      } else if (holders > 100000) {
+        holders = "Hundreds of Thousands";
+      } else if (holders > 2000) {
+        holders = "Thousands";
+      } else if (holders > 100) {
+        holders = "Hundreds";
+      } else {
+        holders = "Only a Few!!!";
+      }
+    }
+    var onClickConfirm = function onClickConfirm() {
+      setOpen(false);
+      props.resolve({
+        blockchain: token.blockchain,
+        address: token.external_id || token.address,
+        symbol: token.symbol,
+        name: token.name,
+        decimals: token.decimals,
+        logo: token.image || token.logo,
+        routable: token.routable
+      });
+      setTimeout(props.unmount, 300);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
+      header: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", {
+        className: "LineHeightL FontSizeL"
+      }, "Confirm Selection"))),
+      stacked: true,
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingLeftM PaddingRightM"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TokenImage medium TextCenter"
+      }, logo && /*#__PURE__*/React__default["default"].createElement("img", {
+        src: logo
+      }), !logo && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
+        blockchain: token.blockchain,
+        address: address
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS TextCenter"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Alert FontSizeS"
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Please review this information"))), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS"
+      }, /*#__PURE__*/React__default["default"].createElement("table", {
+        className: "Table TextLeft FontSizeS"
+      }, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Address")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "Link",
+        title: address,
+        href: blockchain.explorerUrlFor({
+          token: address
+        }),
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, addressEllipsis(address, 8))))), /*#__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, blockchain.label))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Symbol")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, token.symbol))), /*#__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("div", null, token.name))), age && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Age")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, age))), holders && /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TableSubTitle"
+      }, "Holders")), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("div", null, holders))))))),
+      footer: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopS PaddingRightM PaddingLeftM PaddingBottomS"
+      }, /*#__PURE__*/React__default["default"].createElement("button", {
+        className: "ButtonPrimary",
+        onClick: onClickConfirm
+      }, "Confirm"))
+    });
+  });
+
+  var SelectTokenDialog = (function (props) {
+    var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
+      navigate = _useContext.navigate;
+    var _useContext2 = React.useContext(ClosableContext),
+      setOpen = _useContext2.setOpen;
+    var _useContext3 = React.useContext(SelectionContext),
+      setSelection = _useContext3.setSelection;
+    var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+    var _useState3 = React.useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchTerm = _useState4[0],
+      setSearchTerm = _useState4[1];
+    var _useState5 = React.useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      blockchain = _useState6[0],
+      setBlockchain = _useState6[1];
+    var _useState7 = React.useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      showAddToken = _useState8[0],
+      setShowAddToken = _useState8[1];
+    var _useState9 = React.useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      tokens = _useState10[0],
+      setTokens = _useState10[1];
+    var _useState11 = React.useState(),
+      _useState12 = _slicedToArray(_useState11, 2);
+      _useState12[0];
+      _useState12[1];
+    var searchElement = React.useRef();
+    var wallet = web3Wallets.getWallets()[0];
+    var startWithBlockchain = function startWithBlockchain(name) {
+      var blockchain = web3Blockchains.Blockchain.findByName(name);
+      setBlockchain(blockchain);
+      setSelection(Object.assign(props.selection, {
+        blockchain: blockchain,
+        token: undefined
+      }));
+      setTokens(blockchain.tokens);
+    };
+    React.useEffect(function () {
+      if (wallet) {
+        wallet.connectedTo().then(function (name) {
+          var blockchain = web3Blockchains.Blockchain.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) {
+            startWithBlockchain(name);
+          } else {
+            startWithBlockchain('ethereum');
+          }
+        });
+      } else {
+        startWithBlockchain('ethereum');
+      }
+    }, []);
+    React.useEffect(function () {
+      if (props.selection.blockchain) {
+        setBlockchain(props.selection.blockchain);
+        setTokens(props.selection.blockchain.tokens);
+        if (searchElement.current) {
+          searchElement.current.value = '';
+          searchElement.current.focus();
+        }
+      }
+    }, [props.selection, props.selection.blockchain]);
+    var onClickChangeBlockchain = function onClickChangeBlockchain() {
+      navigate('SelectBlockchain');
+    };
+    var onClickAddToken = function onClickAddToken() {
+      setShowAddToken(true);
+      if (searchElement.current) {
+        searchElement.current.value = '';
+        searchElement.current.focus();
+      }
+    };
+    var searchTokens = React.useCallback(lodash.debounce(function (term, blockchainName) {
+      fetch("https://public.depay.com/tokens/search?blockchain=".concat(blockchainName, "&term=").concat(term)).then(function (response) {
+        if (response.status == 200) {
+          response.json().then(function (tokens) {
+            setTokens(tokens);
+            setLoading(false);
+          })["catch"](function () {
+            return reject;
+          });
+        } else {
+          reject();
+        }
+      })["catch"](function () {
+        return reject;
+      });
+    }, 500), []);
+    var onChangeSearch = function onChangeSearch(event) {
+      setShowAddToken(false);
+      setLoading(true);
+      var term = event.target.value;
+      setSearchTerm(term);
+      if (term.match(/^0x/)) {
+        setTokens([]);
+        var token;
+        try {
+          token = new web3Tokens.Token({
+            blockchain: blockchain.name,
+            address: term
+          });
+        } catch (_unused) {}
+        if (token == undefined) {
+          setLoading(false);
+          return;
+        }
+        Promise.all([token.name(), token.symbol(), token.decimals(), fetch("https://public.depay.com/tokens/routable/".concat(blockchain.name, "/").concat(term)).then(function (response) {
+          if (response.status == 200) {
+            return response.json();
+          }
         })]).then(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 4),
             name = _ref2[0],
@@ -22564,12 +23411,14 @@
             blockchain: blockchain.name,
             routable: !!routable
           }]);
+          setLoading(false);
         });
       } else if (term && term.length) {
         setTokens([]);
         searchTokens(term, blockchain.name);
       } else {
         setTokens(blockchain.tokens);
+        setLoading(false);
       }
     };
     var select = function select(token) {
@@ -22600,36 +23449,52 @@
         navigate('ConfirmTokenSelection');
       }
     };
-    var elements = tokens.map(function (token, index) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: "".concat(index, "-").concat(token.address),
-        className: "Card Row",
-        onClick: function onClick() {
-          return select(token);
-        }
+    var elements;
+    if (loading) {
+      elements = [/*#__PURE__*/React__default["default"].createElement("div", {
+        className: "SkeletonWrapper",
+        key: 'loading'
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "CardImage"
-      }, token.logo && /*#__PURE__*/React__default["default"].createElement("img", {
-        src: token.logo
-      }), token.image && /*#__PURE__*/React__default["default"].createElement("img", {
-        src: token.image
-      }), !(token.logo || token.image) && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
-        blockchain: token.blockchain,
-        address: token.external_id || token.address
-      })), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "CardBody"
+        className: "Skeleton",
+        style: {
+          height: '69px',
+          width: '100%'
+        }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "CardTokenSymbol",
-        title: token.symbol
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "CardText"
-      }, token.symbol)), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "CardTokenName",
-        title: token.name
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "CardText"
-      }, token.name))));
-    });
+        className: "SkeletonBackground"
+      })))];
+    } else {
+      elements = tokens.map(function (token, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: "".concat(index, "-").concat(token.address),
+          className: "Card Row",
+          onClick: function onClick() {
+            return select(token);
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardImage"
+        }, token.logo && /*#__PURE__*/React__default["default"].createElement("img", {
+          src: token.logo
+        }), token.image && /*#__PURE__*/React__default["default"].createElement("img", {
+          src: token.image
+        }), !(token.logo || token.image) && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
+          blockchain: token.blockchain,
+          address: token.external_id || token.address
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardTokenSymbol",
+          title: token.symbol
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "CardText"
+        }, token.symbol)), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "CardTokenName",
+          title: token.name
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "CardText"
+        }, token.name))));
+      });
+    }
     if (blockchain == undefined) {
       return null;
     }
@@ -22686,7 +23551,7 @@
     });
   });
 
-  var SelectStack = (function (props) {
+  var SelectTokenStack = (function (props) {
     var _useContext = React.useContext(ConfigurationContext),
       what = _useContext.what;
     var _useContext2 = React.useContext(ClosableContext),
@@ -22736,7 +23601,7 @@
     var startupError;
     if (what == undefined) {
       startupError = '"what" needs to be configured!';
-    } else if (['token'].indexOf(what) < 0) {
+    } else if (['token', 'nft'].indexOf(what) < 0) {
       startupError = "Unknown \"what\" configured: ".concat(what, "!");
     }
     return new Promise( /*#__PURE__*/function () {
@@ -22764,7 +23629,12 @@
                     }
                   }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
                     unmount: userClosedDialog
-                  }, /*#__PURE__*/React__default["default"].createElement(SelectionProvider, null, /*#__PURE__*/React__default["default"].createElement(SelectStack, {
+                  }, /*#__PURE__*/React__default["default"].createElement(SelectionProvider, null, what == 'token' && /*#__PURE__*/React__default["default"].createElement(SelectTokenStack, {
+                    document: document,
+                    container: container,
+                    unmount: unmount,
+                    resolve: resolve
+                  }), what == 'nft' && /*#__PURE__*/React__default["default"].createElement(SelectNFTStack, {
                     document: document,
                     container: container,
                     unmount: unmount,