@depay/widgets 11.4.5 → 11.6.0

package/dist/umd/index.solana.d.ts

@@ -0,0 +1,184 @@
+declare namespace DePayWidgets {
+
+  interface ColorsOptions {
+    primary?: string;
+    text?: string;
+    buttonText?: string;
+    icons?: string;
+  }
+
+  interface StyleOptions {
+    colors?: ColorsOptions;
+    fontFamily?: string;
+    css?: string;
+  }
+
+  interface AcceptOptions {
+    blockchain: string;
+    token: string;
+    receiver: string;
+    amount?: number;
+    fee?: {
+      amount: string;
+      receiver: string;
+    };
+  }
+
+  interface BlockchainStringListOptions {
+    ethereum?: string[];
+    bsc?: string[];
+    polygon?: string[];
+    solana?: string[];
+  }
+
+  interface BlockchainStringOptions {
+    ethereum?: string;
+    bsc?: string;
+    polygon?: string;
+    solana?: string;
+  }
+
+  interface PaymentOptions {
+    accept: AcceptOptions[];
+    amount?: {
+      currency?: string;
+      fix?: number;
+    };
+    sent?: (transaction: any) => void;
+    succeeded?: (transaction: any) => void;
+    validated?: (successful: boolean, transaction: any) => void;
+    failed?: (transaction: any) => void;
+    error?: (error: any) => void;
+    critical?: (error: any) => void;
+    style?: StyleOptions;
+    whitelist?: BlockchainStringListOptions;
+    blacklist?: BlockchainStringListOptions;
+    providers?: BlockchainStringListOptions;
+    currency?: string;
+    connected?: (address: string) => void;
+    closed?: () => void;
+    track?: {
+      endpoint?: string;
+      method?: (payment: any) => void;
+      poll?: {
+        endpoint?: string;
+        method?: (payment: any) => void;
+      };
+    };
+    recover?: {
+      blockchain: string;
+      transaction: string;
+      sender: string;
+      nonce: number;
+      afterBlock: number;
+      token: string;
+      amount: number;
+    };
+    closable?: boolean;
+    integration?: string;
+    container?: HTMLElement;
+    before?: (payment: any) => Promise<void>;
+    wallet?: any;
+    title?: string;
+    action?: string;
+    document?: HTMLElement;
+  }
+
+  interface PaymentResponse {
+    unmount: () => void;
+  }
+
+  const Payment: (options: PaymentOptions) => Promise<PaymentResponse>;
+
+  interface ConnectOptions {
+    style?: StyleOptions;
+    error?: (error: any) => void;
+    document?: HTMLElement;
+  }
+
+  interface ConnectResponse {
+    account: string;
+    wallet: any;
+  }
+
+  const Connect: (options: ConnectOptions) => Promise<ConnectResponse>;
+  
+  interface LoginOptions {
+    message: string;
+    endpoint?: string;
+    recover?: (message: string, signature: string) => void;
+    wallet?: any;
+    style?: StyleOptions;
+    error?: (error: any) => void;
+    document?: HTMLElement;
+  }
+
+  interface LoginResponse {
+    account: string;
+    wallet: any;
+  }
+
+  const Login: (options: LoginOptions) => Promise<LoginResponse>;
+
+  interface SaleOptions {
+    sell: BlockchainStringOptions;
+    amount?: {
+      start?: number;
+      min?: number;
+      step?: number;
+      token?: boolean;
+    };
+    sent?: (transaction: any) => void;
+    succeeded?: (transaction: any) => void;
+    failed?: (transaction: any) => void;
+    error?: (error: any) => void;
+    critical?: (error: any) => void;
+    style?: StyleOptions;
+    blacklist?: BlockchainStringListOptions;
+    providers?: BlockchainStringListOptions;
+    currency?: string;
+    connected?: (address: string) => void;
+    closed?: () => void;
+    tokenImage: string;
+    closable?: boolean;
+    integration?: string;
+    wallet?: any;
+    document?: HTMLElement;
+  }
+
+  interface SaleResponse {
+    unmount: () => void;
+  }
+
+  const Sale: (options: SaleOptions) => Promise<SaleResponse>;
+
+  interface SelectOptions {
+    what: string;
+    style?: StyleOptions;
+    error?: (error: any) => void;
+    document?: HTMLElement;
+  }
+
+  const Select: (options: SelectOptions) => Promise<any>;
+
+  interface LoadingOptions {
+    text: string;
+    style?: StyleOptions;
+    error?: (error: any) => void;
+    critical?: (error: any) => void;
+    document?: HTMLElement;
+  }
+
+  const Loading: (options: LoadingOptions) => Promise<any>;
+}
+
+declare const DePayWidgets: {
+  Connect: DePayWidgets.Connect;
+  Login: DePayWidgets.Login;
+  Payment: DePayWidgets.Payment;
+  Sale: DePayWidgets.Sale;
+  Select: DePayWidgets.Select;
+  Loading: DePayWidgets.Loading;
+};
+
+export default DePayWidgets;

package/dist/umd/index.solana.js

@@ -557,17 +557,19 @@
     "mobile": {
       "ios": {
         "native": "metamask:",
-        "encoded": false,
         "universal": "https://metamask.app.link",
-        "connect": "WalletConnectV1",
-        "qr": "WalletConnectV1"
+        "qr": "WalletConnectV1",
+        "open": function open() {
+          return "https://metamask.app.link/dapp/".concat(window.location.toString().replace(/^(https*)*:\/\//, ''));
+        }
       },
       "android": {
         "native": "metamask:",
-        "encoded": false,
         "universal": "https://metamask.app.link",
-        "connect": "WalletConnectV1",
-        "qr": "WalletConnectV1"
+        "qr": "WalletConnectV1",
+        "open": function open() {
+          return "https://metamask.app.link/dapp/".concat(window.location.toString().replace(/^(https*)*:\/\//, ''));
+        }
       }
     },
     "logo": web3WalletsSolana.wallets.MetaMask.info.logo,
@@ -4256,6 +4258,13 @@
     "extension": "WindowSolana",
     "logo": web3WalletsSolana.wallets.WindowSolana.info.logo,
     "blockchains": _toConsumableArray(supported.evm)
+  }, {
+    "name": "WalletConnect V2",
+    "desktop": {
+      "qr": "WalletConnectV2"
+    },
+    "logo": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0ndXRmLTgnPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjUuNC4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAtLT48c3ZnIHZlcnNpb249JzEuMScgaWQ9J0xheWVyXzEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4JyB2aWV3Qm94PScwIDAgNTAwIDUwMCcgc3R5bGU9J2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAwIDUwMDsnIHhtbDpzcGFjZT0ncHJlc2VydmUnPjxzdHlsZSB0eXBlPSd0ZXh0L2Nzcyc+IC5zdDB7ZmlsbDojNTk5MUNEO30KPC9zdHlsZT48ZyBpZD0nUGFnZS0xJz48ZyBpZD0nd2FsbGV0Y29ubmVjdC1sb2dvLWFsdCc+PHBhdGggaWQ9J1dhbGxldENvbm5lY3QnIGNsYXNzPSdzdDAnIGQ9J00xMDIuNywxNjJjODEuNS03OS44LDIxMy42LTc5LjgsMjk1LjEsMGw5LjgsOS42YzQuMSw0LDQuMSwxMC41LDAsMTQuNEwzNzQsMjE4LjkgYy0yLDItNS4zLDItNy40LDBsLTEzLjUtMTMuMmMtNTYuOC01NS43LTE0OS01NS43LTIwNS44LDBsLTE0LjUsMTQuMWMtMiwyLTUuMywyLTcuNCwwTDkxLjksMTg3Yy00LjEtNC00LjEtMTAuNSwwLTE0LjQgTDEwMi43LDE2MnogTTQ2Ny4xLDIyOS45bDI5LjksMjkuMmM0LjEsNCw0LjEsMTAuNSwwLDE0LjRMMzYyLjMsNDA1LjRjLTQuMSw0LTEwLjcsNC0xNC44LDBjMCwwLDAsMCwwLDBMMjUyLDMxMS45IGMtMS0xLTIuNy0xLTMuNywwaDBsLTk1LjUsOTMuNWMtNC4xLDQtMTAuNyw0LTE0LjgsMGMwLDAsMCwwLDAsMEwzLjQsMjczLjZjLTQuMS00LTQuMS0xMC41LDAtMTQuNGwyOS45LTI5LjIgYzQuMS00LDEwLjctNCwxNC44LDBsOTUuNSw5My41YzEsMSwyLjcsMSwzLjcsMGMwLDAsMCwwLDAsMGw5NS41LTkzLjVjNC4xLTQsMTAuNy00LDE0LjgsMGMwLDAsMCwwLDAsMGw5NS41LDkzLjUgYzEsMSwyLjcsMSwzLjcsMGw5NS41LTkzLjVDNDU2LjQsMjI1LjksNDYzLDIyNS45LDQ2Ny4xLDIyOS45eicvPjwvZz48L2c+PC9zdmc+Cg==",
+    "blockchains": _toConsumableArray(supported.evm)
   }, {
     "name": "WalletConnect",
     "desktop": {
@@ -4615,8 +4624,6 @@
                   requireAllSignatures: false
                 });
                 txBase64 = serializedTransaction.toString('base64');
-                console.log('WIDGET TRACKING TRANSACTION TRACKING HERE!!!');
-                console.log('API TRACKING via TRACK HERE!!!');
                 this.socket.send(JSON.stringify({
                   command: 'message',
                   identifier: JSON.stringify({
@@ -4630,7 +4637,7 @@
                     transaction: txBase64
                   })
                 }));
-              case 8:
+              case 6:
               case "end":
                 return _context4.stop();
             }
@@ -21853,7 +21860,7 @@
   };
 
   var ConnectWalletDialog = (function (props) {
-    var _props$wallet, _props$platform9, _props$platform10, _props$platform11;
+    var _props$wallet, _props$platform9, _props$platform10, _props$platform11, _props$platform12, _props$platform13;
     var QRCodeElement = React__default["default"].useRef();
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -21985,7 +21992,9 @@
           }
           break;
         case 'WalletConnectV1':
+        case 'WalletConnectV2':
           if (QRCode == undefined) {
+            localStorage[atob('ZGVwYXk6d2FsbGV0czp3YzI6cHJvamVjdElk')] = atob('YjFmYzJmMDZlYTIxMDdmY2Q5OWM2OGY0MTI3MTQxYWI=');
             var _wallet = new web3WalletsSolana.wallets[props.platform.qr]();
             _wallet.connect({
               name: props.wallet.name,
@@ -22078,8 +22087,8 @@
     }, []);
     React.useEffect(function () {
       if (appIsConnected !== undefined) {
-        var _props$wallet3, _props$wallet3$deskto, _props$platform7;
-        setShowQRCode(!extensionIsAvailable && !isMobile() && !((_props$wallet3 = props.wallet) !== null && _props$wallet3 !== void 0 && (_props$wallet3$deskto = _props$wallet3.desktop) !== null && _props$wallet3$deskto !== void 0 && _props$wallet3$deskto["native"]) && ((_props$platform7 = props.platform) === null || _props$platform7 === void 0 ? void 0 : _props$platform7.qr) && (props.platform.qr !== 'SolanaPay' || props.accept && props.accept.every(function (accept) {
+        var _props$wallet3, _props$platform7;
+        setShowQRCode(!extensionIsAvailable && !isMobile() && !((_props$wallet3 = props.wallet) !== null && _props$wallet3 !== void 0 && (_props$wallet3 = _props$wallet3.desktop) !== null && _props$wallet3 !== void 0 && _props$wallet3["native"]) && ((_props$platform7 = props.platform) === null || _props$platform7 === void 0 ? void 0 : _props$platform7.qr) && (props.platform.qr !== 'SolanaPay' || props.accept && props.accept.every(function (accept) {
           return accept.amount;
         })));
       }
@@ -22118,7 +22127,17 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: QRCodeElement,
         className: "QRCode"
-      }), showQRCode && ((_props$platform10 = props.platform) === null || _props$platform10 === void 0 ? void 0 : _props$platform10.qr) !== 'WalletLink' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, showQRCode && ((_props$platform10 = props.platform) === null || _props$platform10 === void 0 ? void 0 : _props$platform10.qr) !== 'WalletLink' && QRCode === undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Skeleton",
+        style: {
+          width: "305px",
+          height: "305px"
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "SkeletonBackground"
+      }))), showQRCode && ((_props$platform11 = props.platform) === null || _props$platform11 === void 0 ? void 0 : _props$platform11.qr) !== 'WalletLink' && QRCode === undefined && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Opacity05 PaddingBottomXS PaddingTopS"
+      }, /*#__PURE__*/React__default["default"].createElement("small", null, "Generating QR code...")), showQRCode && ((_props$platform12 = props.platform) === null || _props$platform12 === void 0 ? void 0 : _props$platform12.qr) !== 'WalletLink' && QRCode !== undefined && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Opacity05 PaddingBottomXS PaddingTopS"
       }, /*#__PURE__*/React__default["default"].createElement("small", null, "Scan QR code with your wallet"))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingLeftL PaddingRightL PaddingTopS"
@@ -22215,7 +22234,7 @@
         className: "PaddingLeftS LineHeightXS"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardText FontWeightMedium"
-      }, "Scan QR code")))), ((_props$platform11 = props.platform) === null || _props$platform11 === void 0 ? void 0 : _props$platform11.connect) && props.platform.connect === 'WalletConnectV1' && props.platform.copyLink && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, "Scan QR code")))), ((_props$platform13 = props.platform) === null || _props$platform13 === void 0 ? void 0 : _props$platform13.connect) && ['WalletConnectV1', 'WalletConnectV2'].includes(props.platform.connect) && props.platform.copyLink && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingBottomXS TooltipWrapper"
       }, /*#__PURE__*/React__default["default"].createElement("button", {
         onClick: connectViaCopyLink,
@@ -22605,7 +22624,7 @@
           return null;
         }
         var connectionType = 'app';
-        if (wallet && wallet.constructor && ![web3WalletsSolana.wallets.WalletConnectV1, web3WalletsSolana.wallets.WalletLink].includes(wallet.constructor)) {
+        if (wallet && wallet.constructor && ![web3WalletsSolana.wallets.WalletConnectV1, web3WalletsSolana.wallets.WalletConnectV2, web3WalletsSolana.wallets.WalletLink].includes(wallet.constructor)) {
           connectionType = 'extension';
         }
         return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22739,7 +22758,7 @@
         src: QuestionsGraphic
       })), /*#__PURE__*/React__default["default"].createElement("p", {
         className: "FontSizeM PaddingTopS PaddingLeftM PaddingRightM"
-      }, "Wallets are used to send, receive, and store digital assets. Wallets come in many forms. They are either built into your browser, an extension added to your browser, a piece of hardware plugged into your computer or even an app on your phone."), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, "Wallets are used to send, receive, and store digital assets. Wallets come in many forms. They are either built into your browser, an extension added to your browser, an app on your phone, your computer or even a piece of hardware."), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS"
       }, /*#__PURE__*/React__default["default"].createElement("a", {
         className: "Link FontSizeM",
@@ -22846,7 +22865,8 @@
       if (!platform) {
         return;
       }
-      if (platform.connect == 'WalletConnectV1') {
+      if (['WalletConnectV1', 'WalletConnectV2'].includes(platform.connect)) {
+        localStorage[atob('ZGVwYXk6d2FsbGV0czp3YzI6cHJvamVjdElk')] = atob('YjFmYzJmMDZlYTIxMDdmY2Q5OWM2OGY0MTI3MTQxYWI=');
         var _wallet = new web3WalletsSolana.wallets[platform.connect]();
         _wallet.connect({
           name: walletMetaData.name,
@@ -22888,6 +22908,7 @@
         return;
       }
       set(walletMetaData.name);
+      console.log('open in app', platform.open());
       window.open(platform.open(), '_self', 'noreferrer noopener');
     };
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
@@ -23029,13 +23050,17 @@
     }
 
     componentDidMount() {
-      this.setState({ open: false }, () => {
+      if(this.props.animate === false) {
+        this.setState({ open: true });
+      } else {
         // make sure state is false first before opening the dialog
         // to ensure opening is animated
-        setTimeout(() => {
-          this.setState({ open: true });
-        }, 10);
-      });
+        this.setState({ open: false }, () => {
+          setTimeout(() => {
+            this.setState({ open: true });
+          }, 10);
+        });
+      }
       this.props.document.addEventListener('keydown', this.handler, true);
     }
 
@@ -23047,10 +23072,10 @@
       const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
       const style = ReactDialogStyle({ background: this.props.background });
       return (
-        React__default["default"].createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
-          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
-          , React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
-            , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
+        React__default["default"].createElement('div', { key: this.props.dialogKey, className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 59}}
+          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 60}}, style)
+          , React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 61}}
+            , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 62}} )
             , this.props.children
           )
         )
@@ -23087,7 +23112,8 @@
             background: this.props.background,
             close: this.props.close,
             document: _document,
-            open: this.props.open, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
+            open: this.props.open,
+            animate: this.props.animate, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
           
             , this.props.children
           ),
@@ -24522,18 +24548,17 @@
                         while (1) switch (_context3.prev = _context3.next) {
                           case 0:
                             if (!(wallet && wallet.isSolanaPay && routes && routes.length && wallet.isTransactionSend !== true)) {
-                              _context3.next = 8;
+                              _context3.next = 7;
                               break;
                             }
-                            console.log('TRACE HERE!!!');
                             route = routes[0];
                             _context3.t0 = wallet;
-                            _context3.next = 6;
+                            _context3.next = 5;
                             return route.getTransaction();
-                          case 6:
+                          case 5:
                             _context3.t1 = _context3.sent;
                             _context3.t0.sendTransaction.call(_context3.t0, _context3.t1);
-                          case 8:
+                          case 7:
                           case "end":
                             return _context3.stop();
                         }
@@ -26223,7 +26248,7 @@
               _context3.next = 7;
               break;
             }
-            return _context3.abrupt("return", transaction === null || transaction === void 0 ? void 0 : (_transaction$nonce = transaction.nonce) === null || _transaction$nonce === void 0 ? void 0 : _transaction$nonce.toString());
+            return _context3.abrupt("return", transaction === null || transaction === void 0 || (_transaction$nonce = transaction.nonce) === null || _transaction$nonce === void 0 ? void 0 : _transaction$nonce.toString());
           case 7:
             if (!blockchain) {
               _context3.next = 11;
@@ -26473,7 +26498,7 @@
               _context2.t9 = paymentRoute.toToken.address;
               _context2.t10 = paymentRoute.toAmount.toString();
               _context2.t11 = paymentRoute.toDecimals;
-              _context2.t12 = paymentRoute === null || paymentRoute === void 0 ? void 0 : (_paymentRoute$feeAmou = paymentRoute.feeAmount) === null || _paymentRoute$feeAmou === void 0 ? void 0 : _paymentRoute$feeAmou.toString();
+              _context2.t12 = paymentRoute === null || paymentRoute === void 0 || (_paymentRoute$feeAmou = paymentRoute.feeAmount) === null || _paymentRoute$feeAmou === void 0 ? void 0 : _paymentRoute$feeAmou.toString();
               _context2.t13 = transaction.deadline;
               _context2.t14 = {
                 blockchain: _context2.t1,
@@ -26720,7 +26745,7 @@
                 _context5.t7 = paymentRoute.toToken.address;
                 _context5.t8 = paymentRoute.toAmount.toString();
                 _context5.t9 = paymentRoute.toDecimals;
-                _context5.t10 = paymentRoute === null || paymentRoute === void 0 ? void 0 : (_paymentRoute$feeAmou2 = paymentRoute.feeAmount) === null || _paymentRoute$feeAmou2 === void 0 ? void 0 : _paymentRoute$feeAmou2.toString();
+                _context5.t10 = paymentRoute === null || paymentRoute === void 0 || (_paymentRoute$feeAmou2 = paymentRoute.feeAmount) === null || _paymentRoute$feeAmou2 === void 0 ? void 0 : _paymentRoute$feeAmou2.toString();
                 _context5.t11 = transaction.deadline;
                 payment = {
                   blockchain: _context5.t0,
@@ -27864,7 +27889,7 @@
       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);
+      var blockchain = (selection === null || selection === 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 || (_selection$collection = selection.collection) === null || _selection$collection === void 0 ? void 0 : _selection$collection.blockchain);
       setSelection(Object.assign(props.selection, {
         nft: {
           blockchain: blockchain,
@@ -27880,7 +27905,7 @@
     };
     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 blockchain = (selection === null || selection === 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 || (_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;
@@ -27954,10 +27979,10 @@
         className: "CardImage small"
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "transparent",
-        src: (_Blockchains$findByNa = Blockchains__default["default"].findByName((selection === null || selection === void 0 ? void 0 : (_selection$blockchain3 = selection.blockchain) === null || _selection$blockchain3 === void 0 ? void 0 : _selection$blockchain3.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection3 = selection.collection) === null || _selection$collection3 === void 0 ? void 0 : _selection$collection3.blockchain))) === null || _Blockchains$findByNa === void 0 ? void 0 : _Blockchains$findByNa.logo
+        src: (_Blockchains$findByNa = Blockchains__default["default"].findByName((selection === null || selection === 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 || (_selection$collection3 = selection.collection) === null || _selection$collection3 === void 0 ? void 0 : _selection$collection3.blockchain))) === null || _Blockchains$findByNa === void 0 ? void 0 : _Blockchains$findByNa.logo
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody FontSizeM"
-      }, (_Blockchains$findByNa2 = Blockchains__default["default"].findByName((selection === null || selection === void 0 ? void 0 : (_selection$blockchain4 = selection.blockchain) === null || _selection$blockchain4 === void 0 ? void 0 : _selection$blockchain4.name) || (selection === null || selection === void 0 ? void 0 : selection.blockchain) || (selection === null || selection === void 0 ? void 0 : (_selection$collection4 = selection.collection) === null || _selection$collection4 === void 0 ? void 0 : _selection$collection4.blockchain))) === null || _Blockchains$findByNa2 === void 0 ? void 0 : _Blockchains$findByNa2.label), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, (_Blockchains$findByNa2 = Blockchains__default["default"].findByName((selection === null || selection === 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 || (_selection$collection4 = selection.collection) === null || _selection$collection4 === void 0 ? void 0 : _selection$collection4.blockchain))) === null || _Blockchains$findByNa2 === void 0 ? void 0 : _Blockchains$findByNa2.label), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardAction"
       }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))))), idRequired && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS TextLeft"
@@ -28092,7 +28117,7 @@
         }
         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;
+            var result, blockchain, holders, additionalData, _additionalData$colle, _additionalData$colle2, _additionalData, _blockchain;
             return regenerator.wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -28106,7 +28131,7 @@
                   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;
+                    holders = additionalData === null || additionalData === void 0 || (_additionalData$colle = additionalData.collection) === null || _additionalData$colle === void 0 || (_additionalData$colle = _additionalData$colle.stats) === null || _additionalData$colle === void 0 ? void 0 : _additionalData$colle.num_owners;
                   }
                   result = {
                     blockchain: blockchain,
@@ -28142,7 +28167,7 @@
                 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;
+                  _additionalData === null || _additionalData === void 0 || (_additionalData$colle2 = _additionalData.collection) === null || _additionalData$colle2 === void 0 || (_additionalData$colle2 = _additionalData$colle2.stats) === null || _additionalData$colle2 === void 0 ? void 0 : _additionalData$colle2.num_owners;
                   result = {
                     blockchain: _blockchain,
                     id: null,