@depay/widgets 9.0.4 → 9.1.0

package/dist/esm/index.js

@@ -22262,6 +22262,18 @@ var SelectionProvider = (function (props) {
   }, props.children);
 });
 
+function addressEllipsis (address) {
+  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  if (address === undefined) {
+    return address;
+  }
+  var _address = "";
+  _address += address.slice(0, length + 2);
+  _address += '...';
+  _address += address.slice(address.length - length, address.length);
+  return _address;
+}
+
 var msToTime = (function (ms) {
   var year, month, day, hour, minute, second;
   second = Math.floor(ms / 1000);
@@ -22322,7 +22334,8 @@ var ConfirmTokenSelectionDialog = (function (props) {
       symbol: token.symbol,
       name: token.name,
       decimals: token.decimals,
-      logo: token.image || token.logo
+      logo: token.image || token.logo,
+      routable: token.routable
     });
     setTimeout(props.unmount, 300);
   };
@@ -22350,18 +22363,17 @@ var ConfirmTokenSelectionDialog = (function (props) {
       className: "PaddingTopXS"
     }, /*#__PURE__*/React.createElement("table", {
       className: "Table TextLeft FontSizeS"
-    }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
-      className: "small TextCenter"
-    }, /*#__PURE__*/React.createElement("td", {
-      colSpan: "2"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-      className: "Link",
+    }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      className: "TableSubTitle"
+    }, "Address")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      className: "Link FontSizeM",
+      title: address,
       href: blockchain.explorerUrlFor({
         token: address
       }),
       target: "_blank",
       rel: "noopener noreferrer"
-    }, address)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+    }, addressEllipsis(address, 4))))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
       className: "TableSubTitle"
     }, "Blockchain")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, blockchain.label))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
       className: "TableSubTitle"
@@ -22389,6 +22401,7 @@ var SelectBlockchainDialog = (function (props) {
   var stacked = Object.keys(props.selection).length > 1;
   var blockchains = [Blockchain.findByName('ethereum'), Blockchain.findByName('bsc'), Blockchain.findByName('polygon')];
   var selectBlockchain = function selectBlockchain(blockchain) {
+    window._depay_token_selection_selected_blockchain = blockchain.name;
     setSelection(Object.assign(props.selection, {
       blockchain: blockchain
     }));
@@ -22475,7 +22488,9 @@ var SelectTokenDialog = (function (props) {
     if (wallet) {
       wallet.connectedTo().then(function (name) {
         var blockchain = Blockchain.findByName(name);
-        if (name && name.length && blockchain && blockchain.tokens && blockchain.tokens.length) {
+        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');
@@ -22521,6 +22536,7 @@ var SelectTokenDialog = (function (props) {
     });
   }, 300), []);
   var onChangeSearch = function onChangeSearch(event) {
+    setShowAddToken(false);
     var term = event.target.value;
     setSearchTerm(term);
     if (term.match(/^0x/)) {
@@ -22535,17 +22551,23 @@ var SelectTokenDialog = (function (props) {
       if (token == undefined) {
         return;
       }
-      Promise.all([token.name(), token.symbol(), token.decimals()]).then(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 3),
+      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],
           symbol = _ref2[1],
-          decimals = _ref2[2];
+          decimals = _ref2[2],
+          routable = _ref2[3];
         setTokens([{
           name: name,
           symbol: symbol,
           decimals: decimals,
           address: term,
-          blockchain: blockchain.name
+          blockchain: blockchain.name,
+          routable: !!routable
         }]);
       });
     } else if (term && term.length) {
@@ -22556,6 +22578,12 @@ var SelectTokenDialog = (function (props) {
     }
   };
   var select = function select(token) {
+    if (token.address) {
+      token.address = ethers.utils.getAddress(token.address);
+    }
+    if (token.external_id) {
+      token.external_id = ethers.utils.getAddress(token.external_id);
+    }
     if (blockchain.tokens.find(function (majorToken) {
       return majorToken.address == (token.address || token.external_id);
     })) {
@@ -22566,7 +22594,8 @@ var SelectTokenDialog = (function (props) {
         logo: token.logo || token.image,
         name: token.name,
         symbol: token.symbol,
-        decimals: token.decimals
+        decimals: token.decimals,
+        routable: true
       });
       setTimeout(props.unmount, 300);
     } else {
@@ -22625,13 +22654,16 @@ var SelectTokenDialog = (function (props) {
       className: "transparent",
       src: blockchain.logo
     })), /*#__PURE__*/React.createElement("div", {
-      className: "CardBody FontSizeS"
+      className: "CardBody FontSizeM"
     }, blockchain.label), /*#__PURE__*/React.createElement("div", {
       className: "CardAction"
     }, /*#__PURE__*/React.createElement(ChevronRight, null)))), /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS PaddingBottomS"
     }, /*#__PURE__*/React.createElement("input", {
       value: searchTerm,
+      onBlur: function onBlur() {
+        return setShowAddToken(false);
+      },
       onChange: onChangeSearch,
       className: "Search",
       autoFocus: true,