@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
200 lines • 15.1 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 GrantRoleWidget_1 = __importDefault(require("../../widgets/GrantRoleWidget"));
const RegistryDetailWidget_style_1 = require("../../widgets/RegistryDetailWidget/RegistryDetailWidget.style");
const RenounceRoleWidget_1 = __importDefault(require("../../widgets/RenounceRoleWidget"));
const RevokeRoleWidget_1 = __importDefault(require("../../widgets/RevokeRoleWidget"));
const RegistryDetailWidget = ({ onRegistryListNavigate, registryName, }) => {
const classes = (0, RegistryDetailWidget_style_1.useStyles)();
const { coreProxy } = (0, contexts_1.useStoreContext)();
const { setLoading, handleCoreError } = (0, contexts_1.useLayoutContext)();
const [registry, setRegistry] = (0, react_1.useState)();
const [registryModules, setRegistryModules] = (0, react_1.useState)([]);
const [isEditing, setIsEditing] = (0, react_1.useState)(false);
const [accountAddress, setAccountAddress] = (0, react_1.useState)((0, objects_1.EthereumAccountAddress)(""));
const [grantRoleModalOpen, setGrantRoleModalOpen] = (0, react_1.useState)(false);
const [revokeRoleModalOpen, setRevokeRoleModalOpen] = (0, react_1.useState)(false);
const [renounceRoleModalOpen, setRenounceRoleModalOpen] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
coreProxy.getEthereumAccounts().map((accounts) => {
setAccountAddress(accounts[0]);
});
}, []);
(0, react_1.useEffect)(() => {
getRegistryDetails();
getRegistryModules();
}, []);
const getRegistryDetails = () => {
setLoading(true);
coreProxy.registries
.getRegistryByName([registryName])
.map((registryMap) => {
setRegistry(registryMap.get(registryName));
setLoading(false);
})
.mapErr(handleCoreError);
};
const getRegistryModules = () => {
setLoading(true);
coreProxy.registries
.getRegistryModules()
.map((registryModules) => {
setRegistryModules(registryModules);
setLoading(false);
})
.mapErr(handleCoreError);
};
const updateRegistryParams = ({ registrationFee, registrationToken, burnAddress, burnFee, baseURI, allowStorageUpdate, allowLabelChange, allowTransfers, }) => {
setLoading(true);
coreProxy.registries
.updateRegistryParams(new objects_1.RegistryParams(registryName, allowStorageUpdate, allowLabelChange, allowTransfers, (0, objects_1.EthereumContractAddress)(registrationToken), registrationFee, (0, objects_1.EthereumAccountAddress)(burnAddress), Number(burnFee) * 100, baseURI))
.map((registry) => {
setRegistry(registry);
setLoading(false);
})
.mapErr(handleCoreError);
};
const updateRegistrarRole = (value, moduleAddress) => {
if ((registry === null || registry === void 0 ? void 0 : registry.name) == null) {
return;
}
setLoading(true);
if (value) {
coreProxy.registries
.grantRegistrarRole(registry === null || registry === void 0 ? void 0 : registry.name, moduleAddress)
.map(() => {
getRegistryDetails();
})
.mapErr(handleCoreError);
}
else {
coreProxy.registries
.revokeRegistrarRole(registry === null || registry === void 0 ? void 0 : registry.name, moduleAddress)
.map(() => {
getRegistryDetails();
})
.mapErr(handleCoreError);
}
};
const isRegistrar = registry === null || registry === void 0 ? void 0 : registry.registrarAddresses.some((address) => address === accountAddress);
return (react_1.default.createElement(react_1.default.Fragment, null, registry && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(components_1.GovernanceWidgetHeader, { label: registry.name, description: react_1.default.createElement(core_1.Box, null,
react_1.default.createElement(core_1.Box, { className: classes.headerDescriptionContainer },
react_1.default.createElement(core_1.Typography, null, "Address:"),
react_1.default.createElement(components_1.GovernanceChip, { className: classes.addressChip, label: registry === null || registry === void 0 ? void 0 : registry.address, color: "gray" })),
react_1.default.createElement(core_1.Box, { className: classes.headerDescriptionContainer },
react_1.default.createElement(core_1.Typography, null, "Registrar Addresses:"),
react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "column" }, registry === null || registry === void 0 ? void 0 : registry.registrarAddresses.map((registrarAddress) => (react_1.default.createElement(components_1.GovernanceChip, { className: classes.addressChip, label: registrarAddress, color: "gray" }))))),
react_1.default.createElement(core_1.Box, { className: classes.headerDescriptionContainer },
react_1.default.createElement(core_1.Typography, null, "Registrar Admin Addresses:"),
react_1.default.createElement(components_1.GovernanceChip, { className: classes.addressChip, label: registry === null || registry === void 0 ? void 0 : registry.registrarAdminAddresses.join("-"), color: "gray" }))), navigationLink: {
label: "Registries",
onClick: () => {
onRegistryListNavigate === null || onRegistryListNavigate === void 0 ? void 0 : onRegistryListNavigate();
},
}, rightContent: react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "row" },
react_1.default.createElement(components_1.GovernanceButton, { color: "secondary", size: "medium", onClick: () => {
setRevokeRoleModalOpen(true);
}, variant: "outlined", disabled: !isRegistrar }, "Revoke Registrar"),
react_1.default.createElement(core_1.Box, { marginLeft: "10px" },
react_1.default.createElement(components_1.GovernanceButton, { color: "primary", size: "medium", onClick: () => {
setRenounceRoleModalOpen(true);
}, variant: "outlined", disabled: !isRegistrar }, "Renounce Registrar")),
react_1.default.createElement(core_1.Box, { marginLeft: "10px" },
react_1.default.createElement(components_1.GovernanceButton, { color: "primary", size: "medium", onClick: () => {
setGrantRoleModalOpen(true);
}, variant: "contained", disabled: !isRegistrar }, "Grant Registrar"))) }),
react_1.default.createElement(formik_1.Formik, { enableReinitialize: true, initialValues: {
symbol: registry.symbol,
numberOfEntries: registry.numberOfEntries,
registrationFee: registry.registrationFee,
primaryRegistry: registry.primaryRegistry,
registrationToken: registry.registrationToken,
burnAddress: registry.burnAddress,
burnFee: (registry.burnFee / 100).toString(),
baseURI: registry.baseURI,
allowStorageUpdate: registry.allowStorageUpdate,
allowLabelChange: registry.allowLabelChange,
allowTransfers: registry.allowTransfers,
}, onSubmit: updateRegistryParams }, ({ handleSubmit, setFieldValue }) => {
return (react_1.default.createElement(formik_1.Form, { className: classes.form, onSubmit: handleSubmit },
react_1.default.createElement(components_1.GovernanceCard, null,
react_1.default.createElement(components_1.GovernanceField, { disabled: true, name: "symbol", title: "Symbol", type: "input" }),
react_1.default.createElement(components_1.GovernanceField, { disabled: true, name: "numberOfEntries", title: "Number of Entries", type: "input" }),
react_1.default.createElement(components_1.GovernanceField, { ...(isEditing && { className: classes.editableField }), disabled: !isEditing, name: "registrationFee", title: "Registration Fee", type: "input" }),
react_1.default.createElement(components_1.GovernanceField, { ...(isEditing && { className: classes.editableField }), name: "primaryRegistry", title: "Primary Registry", type: "input", disabled: true }),
react_1.default.createElement(components_1.GovernanceField, { ...(isEditing && { className: classes.editableField }), disabled: !isEditing, name: "registrationToken", title: "Registration Token", type: "input" }),
react_1.default.createElement(components_1.GovernanceField, { ...(isEditing && { className: classes.editableField }), disabled: !isEditing, name: "burnAddress", title: "Burn Address", type: "input" }),
react_1.default.createElement(components_1.GovernanceField, { ...(isEditing && { className: classes.editableField }), disabled: !isEditing, name: "burnFee", title: "Burn Fee", type: "input" }),
react_1.default.createElement(components_1.GovernanceField, { ...(isEditing && { className: classes.editableField }), disabled: !isEditing, name: "baseURI", title: "base URI", type: "input" })),
react_1.default.createElement(components_1.GovernanceCard, { className: classes.optionsContainer },
react_1.default.createElement(core_1.Box, { className: classes.optionsRow, mb: 3 },
react_1.default.createElement(core_1.Box, { className: classes.switchContainer },
react_1.default.createElement(core_1.Typography, { className: classes.switchTitle }, "Allow Storage Update"),
react_1.default.createElement(components_1.GovernanceSwitch, { initialValue: registry.allowStorageUpdate, onChange: (value) => {
setFieldValue("allowStorageUpdate", value);
}, disabled: !isEditing }))),
react_1.default.createElement(core_1.Box, { className: classes.optionsRow },
react_1.default.createElement(core_1.Box, { className: classes.switchContainer },
react_1.default.createElement(core_1.Typography, { className: classes.switchTitle }, "Allow Label Change"),
react_1.default.createElement(components_1.GovernanceSwitch, { initialValue: registry.allowLabelChange, onChange: (value) => {
setFieldValue("allowLabelChange", value);
}, disabled: !isEditing })),
react_1.default.createElement(core_1.Box, { className: classes.switchContainer },
react_1.default.createElement(core_1.Typography, { className: classes.switchTitle }, "Allow Transfers"),
react_1.default.createElement(components_1.GovernanceSwitch, { initialValue: registry.allowTransfers, onChange: (value) => {
setFieldValue("allowTransfers", value);
}, disabled: !isEditing })))),
!!registryModules.length && (react_1.default.createElement(components_1.GovernanceCard, { className: classes.optionsContainer },
react_1.default.createElement(core_1.Box, { className: classes.optionsRow }, registryModules.map((registryModule) => (react_1.default.createElement(core_1.Box, { className: classes.switchContainer, key: registryModule.address },
react_1.default.createElement(core_1.Typography, { className: classes.switchTitle }, registryModule.name),
react_1.default.createElement(components_1.GovernanceSwitch, { initialValue: registry.registrarAddresses.includes(registryModule.address), onChange: (value) => {
updateRegistrarRole(value, registryModule.address);
}, disabled: !isEditing }))))))),
isRegistrar && (react_1.default.createElement(react_1.default.Fragment, null, isEditing ? (react_1.default.createElement(components_1.GovernanceButton, { className: classes.button, color: "primary", variant: "outlined", onClick: handleSubmit }, "Save Changes")) : (react_1.default.createElement(components_1.GovernanceButton, { className: classes.button, color: "primary", variant: "outlined", onClick: () => {
setIsEditing(true);
} }, "Edit"))))));
}),
grantRoleModalOpen && (react_1.default.createElement(GrantRoleWidget_1.default, { onCloseCallback: () => {
getRegistryDetails();
setGrantRoleModalOpen(false);
}, registrarName: registryName })),
revokeRoleModalOpen && (react_1.default.createElement(RevokeRoleWidget_1.default, { onCloseCallback: () => {
getRegistryDetails();
setRevokeRoleModalOpen(false);
}, registrarName: registryName })),
renounceRoleModalOpen && (react_1.default.createElement(RenounceRoleWidget_1.default, { onCloseCallback: () => {
getRegistryDetails();
setRenounceRoleModalOpen(false);
}, registrarName: registryName }))))));
};
exports.default = RegistryDetailWidget;
//# sourceMappingURL=RegistryDetailWidget.js.map