@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
175 lines • 9.03 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const formik_1 = require("formik");
const contexts_1 = require("../../contexts");
const ChainSelectorWidget_style_1 = require("../../widgets/ChainSelectorWidget/ChainSelectorWidget.style");
const react_alert_1 = require("react-alert");
const ChainSelectorWidget = () => {
const classes = (0, ChainSelectorWidget_style_1.useStyles)({});
const { coreProxy, UIData } = (0, contexts_1.useStoreContext)();
const { handleCoreError } = (0, contexts_1.useLayoutContext)();
const alert = (0, react_alert_1.useAlert)();
const [governanceChainId, setGovernanceChainId] = (0, react_1.useState)();
const [isDialogOpen, setIsDialogOpen] = (0, react_1.useState)(false);
const [chainInformationList, setChainInformationList] = (0, react_1.useState)([]);
const [mainProviderChainId, setMainProviderChainId] = (0, react_1.useState)();
const chainOptions = (0, react_1.useMemo)(() => {
return chainInformationList
.filter(({ isDev }) => isDev === false)
.map(({ chainId, name }) => ({
name: `${name} - ${chainId}`,
value: chainId,
}));
}, [JSON.stringify(chainInformationList)]);
(0, react_1.useEffect)(() => {
coreProxy.payments
.waitPaymentsInitialized()
.map(initializeData)
.mapErr(handleCoreError);
coreProxy.registries
.waitRegistriesInitialized()
.map(initializeData)
.mapErr(handleCoreError);
coreProxy.governance
.waitGovernanceInitialized()
.map(initializeData)
.mapErr(handleCoreError);
}, []);
(0, react_1.useEffect)(() => {
// Governance provider chain id change evet
coreProxy.onGovernanceChainChanged.subscribe((chainId) => {
setGovernanceChainId(chainId);
});
// Main provider chain id change evet
coreProxy.onChainChanged.subscribe((chainId) => {
setMainProviderChainId(chainId);
});
// Check for governance signer unavailable events
coreProxy.onGovernanceSignerUnavailable.subscribe((error) => {
alert.info((error === null || error === void 0 ? void 0 : error.message) ||
"Your signer is not available for the selected chain, please switch your network in metamask!");
});
}, []);
const initializeData = () => {
retrieveGovernanceChainInformation();
retrieveChainInformationList();
getMainProviderChainId();
};
const retrieveGovernanceChainInformation = () => {
coreProxy
.retrieveGovernanceChainInformation()
.map((governanceChainInformation) => {
setGovernanceChainId(governanceChainInformation.chainId);
})
.mapErr(handleCoreError);
};
const retrieveChainInformationList = () => {
coreProxy
.retrieveChainInformationList()
.map((chainInformationMap) => {
const chainInformationList = [];
chainInformationMap.forEach((chainInformation) => {
chainInformationList.push(chainInformation);
});
setChainInformationList(chainInformationList);
})
.mapErr(handleCoreError);
};
const getMainProviderChainId = () => {
coreProxy
.getMainProviderChainId()
.map((chainId) => {
setMainProviderChainId(chainId);
})
.mapErr(handleCoreError);
};
const toggleDialogOpen = () => {
setIsDialogOpen((open) => !open);
};
const handleSwitchChain = (chainId) => {
coreProxy
.initializeForChainId(chainId)
.map(() => {
window.location.reload();
})
.mapErr(handleCoreError);
};
const handleSwitchMetamaskNetwork = () => {
if (governanceChainId == null) {
return;
}
coreProxy
.switchProviderNetwork(governanceChainId)
.map(() => {
window.location.reload();
})
.mapErr(handleCoreError);
};
const showSwitchNetworkButton = (0, react_1.useMemo)(() => {
if (governanceChainId == null || mainProviderChainId == null) {
return false;
}
return governanceChainId !== mainProviderChainId;
}, [governanceChainId, mainProviderChainId]);
if (!chainInformationList.length || !governanceChainId) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
return (react_1.default.createElement(core_1.Box, { display: "flex" },
react_1.default.createElement(formik_1.Formik, { initialValues: { chainId: governanceChainId }, onSubmit: (values) => {
handleSwitchChain(values.chainId);
} }, ({ handleSubmit }) => (react_1.default.createElement(formik_1.Form, { onSubmit: handleSubmit, id: "ChwainSelectorForm" },
react_1.default.createElement(core_1.Box, { className: classes.wrapper, onClick: toggleDialogOpen },
react_1.default.createElement(formik_1.Field, { className: classes.field, name: "chainId", type: "select", placeholder: "select action", required: true, options: chainOptions }, ({ field, form }) => {
var _a;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(core_1.Box, { className: classes.fieldTextWrapper },
react_1.default.createElement(core_1.Typography, { variant: "body2" }, `Chain:
${(_a = chainOptions === null || chainOptions === void 0 ? void 0 : chainOptions.find((option) => option.value === field.value)) === null || _a === void 0 ? void 0 : _a.name}`),
react_1.default.createElement(icons_1.KeyboardArrowDown, null)),
react_1.default.createElement(core_1.Dialog, { open: isDialogOpen, onClose: () => {
setIsDialogOpen(false);
}, fullWidth: true, maxWidth: "sm", onClick: (e) => {
e.stopPropagation();
} },
react_1.default.createElement(core_1.DialogTitle, null,
react_1.default.createElement(core_1.Box, { className: classes.dialogTitle },
"Select Chain",
react_1.default.createElement(core_1.IconButton, { "aria-label": "close", onClick: () => {
setIsDialogOpen(false);
} },
react_1.default.createElement(icons_1.Close, null)))),
react_1.default.createElement(core_1.Divider, null),
react_1.default.createElement(core_1.List, { className: classes.list }, chainOptions === null || chainOptions === void 0 ? void 0 : chainOptions.map((option, index) => (react_1.default.createElement(core_1.ListItem, { key: index, className: classes.listItem, button: true, onClick: () => {
form.setFieldValue("chainId", option.value);
setIsDialogOpen(false);
handleSubmit();
} },
react_1.default.createElement(core_1.ListItemText, { ...(option.name && { primary: option.name }) }))))))));
}))))),
showSwitchNetworkButton && (react_1.default.createElement(core_1.Box, { className: classes.switchChainButton, onClick: handleSwitchMetamaskNetwork },
react_1.default.createElement(core_1.Typography, null, "Switch Network")))));
};
exports.default = ChainSelectorWidget;
//# sourceMappingURL=ChainSelectorWidget.js.map