@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
172 lines • 7.95 kB
JavaScript
;
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 react_1 = __importStar(require("react"));
const components_1 = require("../../components");
const CreateRegistryWidget_1 = __importDefault(require("../../widgets/CreateRegistryWidget"));
const REGISTIRES_PER_PAGE = 3;
const RegistryListWidget = ({ onRegistryEntryListNavigate, onRegistryDetailNavigate, onLazyMintRequestsNavigate, }) => {
const { coreProxy } = (0, contexts_1.useStoreContext)();
const { setLoading, handleCoreError } = (0, contexts_1.useLayoutContext)();
const [registries, setRegistries] = (0, react_1.useState)([]);
const [hasEmptyState, setHasEmptyState] = (0, react_1.useState)(false);
const [page, setPage] = (0, react_1.useState)(1);
const [registriesCount, setRegistriesCount] = (0, react_1.useState)(0);
const [reversedSortingEnabled, setReversedSortingEnabled] = (0, react_1.useState)(false);
const [accountAddress, setAccountAddress] = (0, react_1.useState)((0, objects_1.EthereumAccountAddress)(""));
const [createRegistryModalOpen, setCreateRegistryModalOpen] = (0, react_1.useState)(false);
const mounted = (0, react_1.useRef)(false);
(0, react_1.useEffect)(() => {
getNumberOfRegistries();
}, []);
(0, react_1.useEffect)(() => {
coreProxy.getEthereumAccounts().map((accounts) => {
setAccountAddress(accounts[0]);
});
}, []);
(0, react_1.useEffect)(() => {
getRegistries();
}, [page, registriesCount]);
(0, react_1.useEffect)(() => {
if (mounted.current) {
handleRegistryListRefresh();
}
else {
mounted.current = true;
}
}, [reversedSortingEnabled]);
const getNumberOfRegistries = () => {
setLoading(true);
coreProxy.registries
.getNumberOfRegistries()
.map((numberOfRegistries) => {
setRegistriesCount(numberOfRegistries);
if (!numberOfRegistries) {
setHasEmptyState(true);
}
setLoading(false);
})
.mapErr(handleCoreError);
};
const getRegistries = () => {
setLoading(true);
coreProxy.registries
.getRegistries(page, REGISTIRES_PER_PAGE, reversedSortingEnabled
? objects_1.ERegistrySortOrder.REVERSED_ORDER
: objects_1.ERegistrySortOrder.DEFAULT)
.map((registries) => {
if (!registries.length) {
setRegistries([]);
setHasEmptyState(true);
}
else {
setRegistries(registries);
setHasEmptyState(false);
}
setLoading(false);
})
.mapErr(handleCoreError);
};
const handleRegistryListRefresh = () => {
if (page === 1) {
getRegistries();
}
else {
setPage(1);
}
};
const handleCreateRegistryWidgetClose = () => {
getNumberOfRegistries();
handleRegistryListRefresh();
setCreateRegistryModalOpen(false);
};
const getRegistryNotAllowedChipItems = (registry) => {
const items = [];
!registry.allowLabelChange && items.push("Label Change not allowed");
!registry.allowStorageUpdate && items.push("Storage update not allowed");
!registry.allowTransfers && items.push("Transfers not allowed");
return items;
};
return (react_1.default.createElement(core_1.Box, null,
react_1.default.createElement(components_1.GovernanceWidgetHeader, { label: "Registries", headerActions: [
{
label: "Lazy Minting Requests",
onClick: () => onLazyMintRequestsNavigate && onLazyMintRequestsNavigate(),
variant: "outlined",
color: "primary",
},
{
label: "Create New Registry",
onClick: () => setCreateRegistryModalOpen(true),
variant: "contained",
color: "primary",
},
], rightContent: react_1.default.createElement(core_1.Box, { display: "flex", alignItems: "center", marginTop: 3 },
react_1.default.createElement(core_1.Typography, { style: { paddingRight: 5 } }, "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 registiries found.", description: "Registiries submitted by community members will appear here." })),
registries.map((registry, index) => (react_1.default.createElement(components_1.GovernanceRegistryListItem, { key: registry.name, number: registry.index != null ? (registry.index + 1).toString() : "-", title: registry.name, fieldWithValueList: [
{
fieldTitle: "Symbol",
fieldValue: registry.symbol,
},
{
fieldTitle: "Address",
fieldValue: registry.address,
},
{
fieldTitle: "Number of Entries",
fieldValue: registry.numberOfEntries.toString(),
},
{
fieldTitle: "Registration Fee",
fieldValue: registry.registrationFee,
},
], actionButtonList: [
{
label: "Detail",
variant: "text",
onClick: () => onRegistryDetailNavigate &&
onRegistryDetailNavigate(registry.name),
},
{
label: "View Registry Entries",
onClick: () => onRegistryEntryListNavigate &&
onRegistryEntryListNavigate(registry.name),
},
], chipItemList: getRegistryNotAllowedChipItems(registry) }))),
!!registriesCount && (react_1.default.createElement(components_1.GovernancePagination, { customPageOptions: {
itemsPerPage: REGISTIRES_PER_PAGE,
totalItems: registriesCount,
currentPage: page,
}, onChange: (_, page) => {
setPage(page);
} })),
createRegistryModalOpen && (react_1.default.createElement(CreateRegistryWidget_1.default, { onCloseCallback: handleCreateRegistryWidgetClose, currentAccountAddress: accountAddress }))));
};
exports.default = RegistryListWidget;
//# sourceMappingURL=RegistryListWidget.js.map