@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
263 lines • 14.4 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const objects_1 = require("@hypernetlabs/objects");
const core_1 = require("@material-ui/core");
const contexts_1 = require("../../contexts");
const formik_1 = require("formik");
const react_1 = __importStar(require("react"));
const components_1 = require("../../components");
const CreateBatchIdentityWidget_1 = __importDefault(require("../../widgets/CreateBatchIdentityWidget"));
const CreateIdentityWidget_1 = __importDefault(require("../../widgets/CreateIdentityWidget"));
const RegistryEntryListWidget_style_1 = require("../../widgets/RegistryEntryListWidget/RegistryEntryListWidget.style");
const REGISTRY_ENTRIES_PER_PAGE = 3;
var ERegistryEntrySearchBy;
(function (ERegistryEntrySearchBy) {
ERegistryEntrySearchBy[ERegistryEntrySearchBy["OWNER_ADDRESS"] = 0] = "OWNER_ADDRESS";
ERegistryEntrySearchBy[ERegistryEntrySearchBy["USERNAME"] = 1] = "USERNAME";
})(ERegistryEntrySearchBy || (ERegistryEntrySearchBy = {}));
const RegistryEntryListWidget = ({ onRegistryEntryDetailsNavigate, onRegistryListNavigate, registryName, }) => {
const classes = (0, RegistryEntryListWidget_style_1.useStyles)();
const { coreProxy, viewUtils } = (0, contexts_1.useStoreContext)();
const { setLoading, handleCoreError } = (0, contexts_1.useLayoutContext)();
const [registryEntries, setRegistryEntries] = (0, react_1.useState)([]);
const [registry, setRegistry] = (0, react_1.useState)();
const [accountAddress, setAccountAddress] = (0, react_1.useState)((0, objects_1.EthereumAccountAddress)(""));
const [reversedSortingEnabled, setReversedSortingEnabled] = (0, react_1.useState)(false);
const [createIdentityModalOpen, setCreateIdentityModalOpen] = (0, react_1.useState)(false);
const [createBatchIdentityModalOpen, setCreateBatchIdentityModalOpen] = (0, react_1.useState)(false);
const [lazyMintModeEnabled, setLazyMintModeEnabled] = (0, react_1.useState)(false);
const [page, setPage] = (0, react_1.useState)(1);
const [hasEmptyState, setHasEmptyState] = (0, react_1.useState)(false);
const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
const [registryFetched, setRegistryFetched] = (0, react_1.useState)(false);
const mounted = (0, react_1.useRef)(false);
(0, react_1.useEffect)(() => {
getRegistry();
}, []);
(0, react_1.useEffect)(() => {
if ((registry === null || registry === void 0 ? void 0 : registry.numberOfEntries) && registryFetched) {
getRegistryEntries();
}
}, [registry === null || registry === void 0 ? void 0 : registry.numberOfEntries, page, REGISTRY_ENTRIES_PER_PAGE]);
(0, react_1.useEffect)(() => {
if (mounted.current) {
handleRegistryEntriesRefresh();
}
else {
mounted.current = true;
}
}, [reversedSortingEnabled]);
(0, react_1.useEffect)(() => {
coreProxy.getEthereumAccounts().map((accounts) => {
setAccountAddress(accounts[0]);
});
}, []);
const handleRegistryEntriesRefresh = () => {
if (page === 1) {
getRegistryEntries();
}
else {
setPage(1);
}
};
const getRegistry = () => {
setLoading(true);
coreProxy.registries
.getRegistryByName([registryName])
.map((registryMap) => {
const registry = registryMap.get(registryName);
setRegistryFetched(true);
setRegistry(registry);
setHasEmptyState(!(registry === null || registry === void 0 ? void 0 : registry.numberOfEntries));
setLoading(false);
})
.mapErr(handleCoreError);
};
const getRegistryEntries = () => {
setLoading(true);
coreProxy.registries
.getRegistryEntries(registryName, page, REGISTRY_ENTRIES_PER_PAGE, reversedSortingEnabled
? objects_1.ERegistrySortOrder.REVERSED_ORDER
: objects_1.ERegistrySortOrder.DEFAULT)
.map((registryEntries) => {
setRegistryEntries(registryEntries);
setLoading(false);
})
.mapErr(handleCoreError);
};
const isRegistrar = (0, react_1.useMemo)(() => {
return registry === null || registry === void 0 ? void 0 : registry.registrarAddresses.some((address) => address === accountAddress);
}, [accountAddress, JSON.stringify(registry === null || registry === void 0 ? void 0 : registry.registrarAddresses)]);
const isRegistrationTokenEnabled = (0, react_1.useMemo)(() => {
return ((registry === null || registry === void 0 ? void 0 : registry.registrationToken) != null &&
!viewUtils.isZeroAddress(registry === null || registry === void 0 ? void 0 : registry.registrationToken));
}, [JSON.stringify(registry === null || registry === void 0 ? void 0 : registry.registrationToken)]);
const getHeaderActions = () => {
const canCreateNewRegistryEntry = isRegistrar || isRegistrationTokenEnabled;
const canCreateNewBatchRegistryEntry = isRegistrar && (registry === null || registry === void 0 ? void 0 : registry.modulesCapability.batchMintEnabled);
const cansubmitLazyMintSignature = isRegistrar && (registry === null || registry === void 0 ? void 0 : registry.modulesCapability.lazyMintEnabled);
const headerActions = [];
if (cansubmitLazyMintSignature) {
headerActions.push({
label: "Lazy Mint Identity",
onClick: () => {
setCreateIdentityModalOpen(true);
setLazyMintModeEnabled(true);
},
variant: "contained",
color: "primary",
});
}
if (canCreateNewBatchRegistryEntry) {
headerActions.push({
label: "Create Batch Identity",
onClick: () => setCreateBatchIdentityModalOpen(true),
variant: "contained",
color: "primary",
});
}
if (canCreateNewRegistryEntry) {
headerActions.push({
label: "Create New Identity",
onClick: () => {
setCreateIdentityModalOpen(true);
setLazyMintModeEnabled(false);
},
variant: "contained",
color: "primary",
});
}
return headerActions;
};
const onSearchByOwnerAddressClick = (value) => {
setLoading(true);
setSearchTerm(value);
coreProxy.registries
.getRegistryEntryListByOwnerAddress(registryName, (0, objects_1.EthereumAccountAddress)(value))
.map((registryEntries) => {
setRegistryEntries(registryEntries);
setPage(1);
setLoading(false);
})
.mapErr(handleSearchError);
};
const onSearchByUsernameClick = (value) => {
setLoading(true);
setSearchTerm(value);
coreProxy.registries
.getRegistryEntryListByUsername(registryName, value)
.map((registryEntries) => {
setRegistryEntries(registryEntries);
setPage(1);
setLoading(false);
})
.mapErr(handleSearchError);
};
const handleSearchError = (err) => {
console.error(err);
setRegistryEntries([]);
setLoading(false);
};
const hasEmptyFilterResult = (0, react_1.useMemo)(() => searchTerm && !registryEntries.length, [searchTerm, JSON.stringify(registryEntries)]);
const onRestartClick = () => {
setSearchTerm("");
handleRegistryEntriesRefresh();
};
const handleIdentityCallback = () => {
getRegistry();
setLazyMintModeEnabled(false);
setCreateIdentityModalOpen(false);
};
return (react_1.default.createElement(core_1.Box, null,
react_1.default.createElement(components_1.GovernanceWidgetHeader, { label: registryName, navigationLink: {
label: "Registry Entry List",
onClick: () => {
onRegistryListNavigate === null || onRegistryListNavigate === void 0 ? void 0 : onRegistryListNavigate();
},
}, headerActions: getHeaderActions(), bottomContent: react_1.default.createElement(core_1.Box, { className: classes.headerBottomContentWrapper },
react_1.default.createElement(formik_1.Formik, { initialValues: {
searchBy: ERegistryEntrySearchBy.OWNER_ADDRESS,
}, onSubmit: () => { } }, ({ handleSubmit, values }) => {
return (react_1.default.createElement(formik_1.Form, { onSubmit: handleSubmit, className: classes.searchForm },
react_1.default.createElement(components_1.GovernanceDialogSelectField, { title: "Search By", size: "small", name: "searchBy", wrapperClassName: classes.searchBySelectWrapper, options: [
{
primaryText: "Owner Address",
value: ERegistryEntrySearchBy.OWNER_ADDRESS,
},
{
primaryText: "Username",
value: ERegistryEntrySearchBy.USERNAME,
},
] }),
react_1.default.createElement(core_1.Box, { className: classes.searchFilterWrapper }, values.searchBy === ERegistryEntrySearchBy.USERNAME ? (react_1.default.createElement(components_1.GovernanceSearchFilter, { title: "Search by username", placeholder: "Search by username", onSearchClick: onSearchByUsernameClick, onRestartClick: onRestartClick })) : (react_1.default.createElement(components_1.GovernanceSearchFilter, { title: "Search by owner address", placeholder: "Search by owner address", onSearchClick: onSearchByOwnerAddressClick, onRestartClick: onRestartClick })))));
}),
react_1.default.createElement(core_1.Box, { className: classes.sortWrapper },
react_1.default.createElement(core_1.Typography, { className: classes.reverseSortLabel }, "Reverse sorting"),
react_1.default.createElement(components_1.GovernanceSwitch, { initialValue: reversedSortingEnabled, onChange: (reversedSorting) => setReversedSortingEnabled(reversedSorting) }))) }),
hasEmptyState && (react_1.default.createElement(components_1.GovernanceEmptyState, { title: "No registiry entries found.", description: "Registiry entries submitted by community members will appear here." })),
hasEmptyFilterResult && (react_1.default.createElement(components_1.GovernanceEmptyState, { title: "No registiry entries found.", description: "This filter/search returned no registry entries submitted by community members." })),
registryEntries.map((registryEntry) => (react_1.default.createElement(components_1.GovernanceRegistryListItem, { key: registryEntry.label, number: registryEntry.index != null
? (registryEntry.index + 1).toString()
: "-", title: "", fieldWithValueList: [
{
fieldTitle: "Label",
fieldValue: registryEntry.label || "-",
},
{
fieldTitle: "Token ID",
fieldValue: registryEntry.tokenId.toString(),
},
{
fieldTitle: "Owner",
fieldValue: registryEntry.owner || undefined,
},
{
fieldTitle: "Token URI",
fieldValue: registryEntry.tokenURI || undefined,
},
], ...((isRegistrar || registryEntry.owner === accountAddress) && {
actionButtonList: [
{
label: "View Registry Entry Details",
onClick: () => onRegistryEntryDetailsNavigate &&
onRegistryEntryDetailsNavigate(registryName, registryEntry.tokenId),
},
],
}) }))),
!!(registry === null || registry === void 0 ? void 0 : registry.numberOfEntries) && !searchTerm && (react_1.default.createElement(components_1.GovernancePagination, { customPageOptions: {
itemsPerPage: REGISTRY_ENTRIES_PER_PAGE,
totalItems: registry === null || registry === void 0 ? void 0 : registry.numberOfEntries,
currentPage: page,
}, onChange: (_, page) => {
setPage(page);
} })),
createIdentityModalOpen && (react_1.default.createElement(CreateIdentityWidget_1.default, { onCloseCallback: handleIdentityCallback, lazyMintModeEnabled: lazyMintModeEnabled, registryName: registryName, currentAccountAddress: accountAddress })),
createBatchIdentityModalOpen && (react_1.default.createElement(CreateBatchIdentityWidget_1.default, { onCloseCallback: () => {
getRegistry();
setCreateBatchIdentityModalOpen(false);
}, registryName: registryName, currentAccountAddress: accountAddress }))));
};
exports.default = RegistryEntryListWidget;
//# sourceMappingURL=RegistryEntryListWidget.js.map