agsola-react-ens-address
Version:
React ENS address component
524 lines (522 loc) • 22.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _lodash = _interopRequireDefault(require("lodash"));
var _address2 = require("./utils/address.js");
var _Loader = _interopRequireDefault(require("./Loader.js"));
var _Blockies = require("./Blockies.js");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
//import './style.css' Import in your own website
var ENS_NOT_FOUND = 'ENS name not found';
function Address(props) {
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
resolvedAddress = _useState2[0],
setResolvedAddress = _useState2[1];
var inputValue = props.inputValue;
var setInputValue = props.setterFunction;
//const [inputValue, setInputValue] = useState('')
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
isResolvingInProgressValue = _useState4[0],
setIsResolvingInProgress = _useState4[1];
var isResolvingInProgress = isResolvingInProgressValue > 0;
var _useState5 = (0, _react.useState)(null),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
error = _useState6[0],
setError = _useState6[1];
var _useState7 = (0, _react.useState)(null),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
avatarURL = _useState8[0],
setAvatarURL = _useState8[1];
//const [ENS, setENS] = useState(null)
var _useState9 = (0, _react.useState)(null),
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
provider = _useState10[0],
setProvider = _useState10[1];
var currentInput = (0, _react.useRef)();
var inputDebouncerHandler = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(input) {
var domainRegex, starProtocolDomainRegex, spaceIdDomainRegex, urlToFetch, fetchData, data, _urlToFetch, result, json, _data, code, message, tld, _urlToFetch2, _result, _json, _code, address, _result2, _address, type, name, avatar;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
// Regular expression to check if input is a domain
domainRegex = new RegExp('^[^.]{1,63}(\\.[^.]{2,3})+$');
starProtocolDomainRegex = new RegExp('^[^.]{1,63}\\.(zk|linea|line|base|bas|ba|lin|li)$');
spaceIdDomainRegex = new RegExp('^[^.]{1,63}\\.(bnb|arb|bn|ar)$');
if (!starProtocolDomainRegex.test(input)) {
_context.next = 31;
break;
}
if (!input.endsWith('.zk')) {
_context.next = 16;
break;
}
urlToFetch = "https://omniapi.zkns.app/domain-resolver/getRecord/".concat(input); // console.log("1urlToFetch", urlToFetch);
_context.next = 9;
return fetch(urlToFetch);
case 9:
fetchData = _context.sent;
_context.next = 12;
return fetchData.text();
case 12:
data = _context.sent;
// console.log("starProtocolDomain data: ", data);
if ((0, _address2.isAddress)(data)) {
setError(null);
setResolvedAddress(data);
props.onResolve({
address: data,
name: input,
type: _address2.ETH_ADDRESS_TYPE.address
});
props.onError(null);
} else {
console.error("starProtocolDomain: Invalid domain");
}
_context.next = 29;
break;
case 16:
if (!(input.endsWith('.linea') | input.endsWith('.base'))) {
_context.next = 28;
break;
}
_urlToFetch = "https://mainnet-api.sns.so/domain/getRecord/".concat(input); // console.log("2urlToFetch", urlToFetch);
_context.next = 20;
return fetch(_urlToFetch);
case 20:
result = _context.sent;
_context.next = 23;
return result.json();
case 23:
json = _context.sent;
// console.log("starProtocolDomain json: ", json);
_data = json.data, code = json.code, message = json.message; // console.log("starProtocolDomain", data, code, message);
if (code === 200 && (0, _address2.isAddress)(_data)) {
setError(null);
setResolvedAddress(_data);
props.onResolve({
address: _data,
name: input,
type: _address2.ETH_ADDRESS_TYPE.address
});
props.onError(null);
} else {
console.error("starProtocolDomain: Invalid domain");
}
_context.next = 29;
break;
case 28:
// Todavía no ha llegado aquí.
setError(null);
case 29:
_context.next = 57;
break;
case 31:
if (!spaceIdDomainRegex.test(input)) {
_context.next = 49;
break;
}
if (!(input.endsWith('.arb') || input.endsWith('.bnb'))) {
_context.next = 47;
break;
}
if (input.endsWith('.arb')) {
tld = "arb1";
} else {
tld = "bnb";
}
_urlToFetch2 = "https://api.prd.space.id/v1/getAddress?tld=".concat(tld, "&domain=").concat(input);
console.log("spaceId urlToFetch:", _urlToFetch2);
_context.next = 38;
return fetch(_urlToFetch2);
case 38:
_result = _context.sent;
console.log("spaceId result: ", _result);
_context.next = 42;
return _result.json();
case 42:
_json = _context.sent;
console.log("spaceId json: ", _json);
_code = _json.code, address = _json.address;
console.log("spaceId code, address: ", _code, address);
if (_code === 0 && (0, _address2.isAddress)(address) && address !== "0x0000000000000000000000000000000000000000") {
setError(null);
setResolvedAddress(address);
props.onResolve({
address: address,
name: input,
type: _address2.ETH_ADDRESS_TYPE.address
});
props.onError(null);
} else {
console.error("starProtocolDomain: Invalid domain");
}
case 47:
_context.next = 57;
break;
case 49:
if (!domainRegex.test(input)) {
_context.next = 56;
break;
}
_context.next = 52;
return resolveName(input);
case 52:
_result2 = _context.sent;
if (input === currentInput.current) {
if (error !== null) setError(null);
_address = _result2.address, type = _result2.type, name = _result2.name, avatar = _result2.avatar;
if (type === _address2.ETH_ADDRESS_TYPE.name) {
setResolvedAddress(_address);
} else if (type === _address2.ETH_ADDRESS_TYPE.address) {
setResolvedAddress(name);
}
setAvatarURL(avatar);
props.onResolve(_result2);
props.onError(null);
}
_context.next = 57;
break;
case 56:
if (error) setError(null);
case 57:
_context.next = 66;
break;
case 59:
_context.prev = 59;
_context.t0 = _context["catch"](0);
setError(_context.t0.toString());
setResolvedAddress(null);
setAvatarURL(null);
props.onResolve({
address: input,
name: null,
type: null
});
props.onError(_context.t0);
case 66:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 59]]);
}));
return function inputDebouncerHandler(_x) {
return _ref.apply(this, arguments);
};
}();
var inputDebouncer = _lodash["default"].debounce(inputDebouncerHandler, 500);
(0, _react.useEffect)(function () {
setProvider(props.provider);
/* async function setup() {
const options = {}
if(props.ensAddress){
options.ensAddress = props.ensAddress
}
if (props.provider) {
options.customProvider = props.provider
}
const { ens } = await setupENS(options)
setENS(ens)
}
setup() */
}, [props.provider]);
var handleInput = (0, _react.useCallback)( /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(address) {
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (!address || address.length === 0) {
setInputValue('');
setError(null);
setResolvedAddress(null);
if (inputDebouncer) {
inputDebouncer.cancel();
}
}
setInputValue(address);
if (inputDebouncer) {
inputDebouncer(address);
}
case 3:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function (_x2) {
return _ref2.apply(this, arguments);
};
}(), [inputDebouncer]);
(0, _react.useEffect)(function () {
if (props.presetValue.length !== 0) {
handleInput(props.presetValue);
}
}, [props.presetValue]);
(0, _react.useEffect)(function () {
if (props.inputValue.length === 0) {
handleInput(props.inputValue);
}
}, [props.inputValue]);
if (!provider) {
return /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
className: "loader"
});
}
var handleResolver = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(fn) {
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.prev = 0;
// console.log("ags BEFORE RESOLVER");
setIsResolvingInProgress(function (current) {
return current + 1;
});
setResolvedAddress(null);
_context3.next = 5;
return fn();
case 5:
return _context3.abrupt("return", _context3.sent);
case 8:
_context3.prev = 8;
_context3.t0 = _context3["catch"](0);
if (!(_context3.t0 && _context3.t0.message && _context3.t0.message === ENS_NOT_FOUND)) {
_context3.next = 12;
break;
}
return _context3.abrupt("return");
case 12:
throw _context3.t0;
case 13:
_context3.prev = 13;
setIsResolvingInProgress(function (current) {
return current - 1;
});
// console.log("ags AFTER RESOLVER");
return _context3.finish(13);
case 16:
case "end":
return _context3.stop();
}
}, _callee3, null, [[0, 8, 13, 16]]);
}));
return function handleResolver(_x3) {
return _ref3.apply(this, arguments);
};
}();
var resolveName = /*#__PURE__*/function () {
var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(inputValue) {
var addressType;
return _regenerator["default"].wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
// update latest input resolving
currentInput.current = inputValue;
addressType = (0, _address2.getEthAddressType)(inputValue);
if (!(addressType === _address2.ETH_ADDRESS_TYPE.name)) {
_context6.next = 8;
break;
}
_context6.next = 5;
return handleResolver( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
var _yield$resolverENS$ge;
var resolverENS;
return _regenerator["default"].wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return provider.getResolver(inputValue);
case 2:
resolverENS = _context4.sent;
_context4.t0 = inputValue;
_context4.next = 6;
return resolverENS.getAddress();
case 6:
_context4.t1 = _context4.sent;
_context4.next = 9;
return resolverENS.getAvatar();
case 9:
_context4.t3 = _yield$resolverENS$ge = _context4.sent;
_context4.t2 = _context4.t3 === null;
if (_context4.t2) {
_context4.next = 13;
break;
}
_context4.t2 = _yield$resolverENS$ge === void 0;
case 13:
if (!_context4.t2) {
_context4.next = 17;
break;
}
_context4.t4 = void 0;
_context4.next = 18;
break;
case 17:
_context4.t4 = _yield$resolverENS$ge.url;
case 18:
_context4.t5 = _context4.t4;
_context4.t6 = inputValue;
return _context4.abrupt("return", {
input: _context4.t0,
address: _context4.t1,
avatar: _context4.t5,
name: _context4.t6,
type: 'name'
});
case 21:
case "end":
return _context4.stop();
}
}, _callee4);
})));
case 5:
return _context6.abrupt("return", _context6.sent);
case 8:
if (!(addressType === _address2.ETH_ADDRESS_TYPE.address)) {
_context6.next = 12;
break;
}
_context6.next = 11;
return handleResolver( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
var tempName, tempAvatar;
return _regenerator["default"].wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
_context5.next = 2;
return provider.lookupAddress(inputValue);
case 2:
tempName = _context5.sent;
if (!tempName) {
_context5.next = 7;
break;
}
_context5.next = 6;
return provider.getAvatar(tempName);
case 6:
tempAvatar = _context5.sent;
case 7:
return _context5.abrupt("return", {
input: inputValue,
name: tempName,
avatar: tempAvatar,
address: inputValue,
type: 'address'
});
case 8:
case "end":
return _context5.stop();
}
}, _callee5);
})));
case 11:
return _context6.abrupt("return", _context6.sent);
case 12:
setAvatarURL(null);
throw 'Incorrect address or name';
case 14:
case "end":
return _context6.stop();
}
}, _callee6);
}));
return function resolveName(_x4) {
return _ref4.apply(this, arguments);
};
}();
var isResolveNameNotFound = function isResolveNameNotFound() {
// console.log("ags resolvedAddress", resolvedAddress);
// console.log("ags inputValue", inputValue);
// console.log("ags isResolvingInProgress", isResolvingInProgress);
return !resolvedAddress && inputValue && !isResolvingInProgress && (0, _address2.getEthAddressType)(inputValue) !== _address2.ETH_ADDRESS_TYPE.address;
};
var showBlockies = function showBlockies() {
if (props.showBlockies) {
var address;
if ((0, _address2.isAddress)(inputValue)) {
address = inputValue;
} else if ((0, _address2.isAddress)(resolvedAddress)) {
address = resolvedAddress;
}
if (address) {
return /*#__PURE__*/_react["default"].createElement(_Blockies.SingleNameBlockies, {
address: address.toLowerCase(),
imageSize: 30,
className: "blockies",
avatarURL: avatarURL
});
}
}
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "cmp-address-wrapper ".concat(props.className)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "w-full cmp-address ".concat(resolvedAddress ? 'resolved' : '', " ").concat(error ? 'error' : '')
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "input-wrapper"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "indicator"
}, isResolvingInProgress && /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
className: "loader"
}), !isResolvingInProgress && showBlockies(), isResolveNameNotFound() && /*#__PURE__*/_react["default"].createElement("div", {
alt: "warning icon",
className: "icon-wrapper error-icon mt-2 ml-2"
}, /*#__PURE__*/_react["default"].createElement("svg", {
width: "19",
height: "17",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M9.2456 5.0302c.5001-.1232 1.021.1232 1.2294.5954.0625.1643.1042.3285.1042.5133-.0209.5133-.0625 1.047-.1042 1.5604-.0417.8007-.1042 1.622-.1459 2.4227-.0208.2669-.0208.2874-.0208.5543-.0208.4312-.3542.7597-.7918.7597-.4376 0-.771-.308-.7918-.7391-.0625-1.2525-.1458-2.2996-.2083-3.552-.0209-.3285-.0417-.657-.0625-1.006-.0209-.5133.2917-.965.7917-1.1087m.271 9.4444c-.5835 0-1.0627-.4722-1.0627-1.047 0-.575.4792-1.0472 1.0626-1.0472.5834 0 1.0627.4723 1.0418 1.0677.0209.5543-.4792 1.0265-1.0418 1.0265M2.849 17h13.2936c2.1878 0 3.563-2.3611 2.4795-4.209L11.9544 1.4168c-1.0835-1.889-3.834-1.889-4.9174 0L.3694 12.791C-.6933 14.6594.661 17 2.8489 17",
fill: "#DC2E2E",
fillRule: "evenodd"
}))), props.DefaultIcon && !inputValue && /*#__PURE__*/_react["default"].createElement(DefaultIcon, null)), /*#__PURE__*/_react["default"].createElement("input", {
disabled: props.disabled,
value: inputValue,
onChange: function onChange(e) {
return handleInput(e.currentTarget.value);
},
placeholder: props.placeholder,
spellCheck: false,
name: "ethereum"
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "info-wrapper"
}, resolvedAddress && /*#__PURE__*/_react["default"].createElement("div", {
className: "resolved"
}, resolvedAddress))));
}
Address.propTypes = {
provider: _propTypes["default"].object.isRequired,
placeholder: _propTypes["default"].string,
showBlockies: _propTypes["default"].bool,
DefaultIcon: function DefaultIcon(props, propName) {
if (props[propName] && !(0, _react.isValidElementType)(props[propName])) {
return new Error("Invalid prop 'component' supplied to 'Route': the prop is not a valid React component");
}
},
onError: _propTypes["default"].func,
onResolve: _propTypes["default"].func,
className: _propTypes["default"].string
};
Address.defaultProps = {
presetValue: '',
placeholder: 'Enter Ethereum name or address',
showBlockies: true,
DefaultIcon: null,
className: '',
onError: function onError() {},
onResolve: function onResolve() {}
};
var _default = Address;
exports["default"] = _default;