@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
168 lines • 9.63 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 BurnEntryWidget_1 = __importDefault(require("../BurnEntryWidget"));
const TransferIdentityWidget_1 = __importDefault(require("../TransferIdentityWidget"));
const components_1 = require("../../components");
const GovernanceTag_1 = require("../../components/GovernanceTag");
const theme_1 = require("../../theme");
const RegistryEntryDetailWidget = ({ onRegistryEntryListNavigate, registryName, entryTokenId, }) => {
const { coreProxy } = (0, contexts_1.useStoreContext)();
const { setLoading, handleCoreError } = (0, contexts_1.useLayoutContext)();
const [registryEntry, setRegistryEntry] = (0, react_1.useState)();
const [registry, setRegistry] = (0, react_1.useState)();
const [accountAddress, setAccountAddress] = (0, react_1.useState)((0, objects_1.EthereumAccountAddress)(""));
const [burnEntryModalOpen, setBurnEntryModalOpen] = (0, react_1.useState)(false);
const [transferIdentityModalOpen, setTransferIdentityModalOpen] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
getAccount();
}, []);
(0, react_1.useEffect)(() => {
getRegistryEntryByLabel();
}, []);
(0, react_1.useEffect)(() => {
getRegistryByName();
}, []);
const getAccount = () => {
coreProxy.getEthereumAccounts().map((accounts) => {
setAccountAddress(accounts[0]);
});
};
const getRegistryEntryByLabel = () => {
setLoading(true);
coreProxy.registries
.getRegistryEntryDetailByTokenId(registryName, entryTokenId)
.map((registryEntry) => {
setRegistryEntry(registryEntry);
setLoading(false);
})
.mapErr(handleCoreError);
};
const getRegistryByName = () => {
setLoading(true);
coreProxy.registries
.getRegistryByName([registryName])
.map((registryMap) => {
setRegistry(registryMap.get(registryName));
setLoading(false);
})
.mapErr(handleCoreError);
};
const updateLabel = (val) => {
setLoading(true);
coreProxy.registries
.updateRegistryEntryLabel(registryName, registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.tokenId, val)
.map((registryEntry) => {
setRegistryEntry(registryEntry);
setLoading(false);
})
.mapErr(handleCoreError);
};
const updateTokenURI = (val) => {
setLoading(true);
coreProxy.registries
.updateRegistryEntryTokenURI(registryName, registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.tokenId, val)
.map((registryEntry) => {
setRegistryEntry(registryEntry);
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 isOwner = (0, react_1.useMemo)(() => {
return accountAddress === (registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.owner);
}, [accountAddress, registryEntry]);
const canUpdateLabel = (0, react_1.useMemo)(() => {
return isRegistrar || (isOwner && (registry === null || registry === void 0 ? void 0 : registry.allowLabelChange));
}, [isRegistrar, isOwner]);
const canUpdateTokenURI = (0, react_1.useMemo)(() => {
return isRegistrar || (isOwner && (registry === null || registry === void 0 ? void 0 : registry.allowStorageUpdate));
}, [isRegistrar, isOwner]);
const getHeaderActions = () => {
const canTransfer = (0, react_1.useMemo)(() => {
return isRegistrar || (isOwner && (registry === null || registry === void 0 ? void 0 : registry.allowTransfers));
}, [isRegistrar, isOwner]);
const canBurn = (0, react_1.useMemo)(() => {
return isRegistrar || isOwner;
}, [isRegistrar, isOwner]);
const headerActions = [];
if (canBurn) {
headerActions.push({
label: "Burn Entry",
onClick: () => setBurnEntryModalOpen(true),
variant: "contained",
color: "secondary",
style: { backgroundColor: theme_1.colors.RED700 },
});
}
if (canTransfer) {
headerActions.push({
label: "Transfer NFI",
onClick: () => setTransferIdentityModalOpen(true),
variant: "contained",
color: "primary",
});
}
return headerActions;
};
return (react_1.default.createElement(core_1.Box, null,
react_1.default.createElement(components_1.GovernanceWidgetHeader, { label: "Registry Entry Details", ...(accountAddress &&
registryEntry && {
description: isOwner || isRegistrar ? (react_1.default.createElement(GovernanceTag_1.GovernanceTag, { text: "Owner", color: GovernanceTag_1.ETagColor.GREEN })) : (react_1.default.createElement(GovernanceTag_1.GovernanceTag, { text: "Viewer", color: GovernanceTag_1.ETagColor.PURPLE })),
}), navigationLink: {
label: "Registry Entries",
onClick: () => {
onRegistryEntryListNavigate === null || onRegistryEntryListNavigate === void 0 ? void 0 : onRegistryEntryListNavigate(registryName);
},
}, headerActions: getHeaderActions() }),
registryEntry && (react_1.default.createElement(components_1.GovernanceCard, null,
canUpdateLabel ? (react_1.default.createElement(components_1.GovernanceEditableValueWithTitle, { title: "Label", value: registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.label, onSave: (newValue) => {
updateLabel(newValue);
} })) : (react_1.default.createElement(components_1.GovernanceValueWithTitle, { title: "Label", value: registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.label })),
react_1.default.createElement(components_1.GovernanceValueWithTitle, { title: "Token ID", value: registryEntry.tokenId }),
react_1.default.createElement(components_1.GovernanceValueWithTitle, { title: "Current Owner", value: registryEntry.owner }),
canUpdateTokenURI ? (react_1.default.createElement(components_1.GovernanceEditableValueWithTitle, { title: "Identity Data", value: (registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.tokenURI) || "", onSave: (newValue) => {
updateTokenURI(newValue);
} })) : (react_1.default.createElement(components_1.GovernanceValueWithTitle, { title: "Identity Data", value: (registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.tokenURI) || "" })))),
burnEntryModalOpen && (registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.tokenId) && (react_1.default.createElement(BurnEntryWidget_1.default, { registryName: registryName, tokenId: registryEntry.tokenId, onSuccessCallback: () => {
setBurnEntryModalOpen(false);
onRegistryEntryListNavigate === null || onRegistryEntryListNavigate === void 0 ? void 0 : onRegistryEntryListNavigate(registryName);
}, onCloseCallback: () => {
setBurnEntryModalOpen(false);
} })),
transferIdentityModalOpen && (registryEntry === null || registryEntry === void 0 ? void 0 : registryEntry.tokenId) && (react_1.default.createElement(TransferIdentityWidget_1.default, { registryName: registryName, tokenId: registryEntry.tokenId, onSuccessCallback: () => {
setTransferIdentityModalOpen(false);
onRegistryEntryListNavigate === null || onRegistryEntryListNavigate === void 0 ? void 0 : onRegistryEntryListNavigate(registryName);
}, onCloseCallback: () => {
setTransferIdentityModalOpen(false);
} }))));
};
exports.default = RegistryEntryDetailWidget;
//# sourceMappingURL=RegistryEntryDetailWidget.js.map