@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
306 lines • 24.6 kB
JavaScript
"use strict";
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 MainContainer_1 = __importDefault(require("../../containers/MainContainer"));
const core_1 = require("@material-ui/core");
const react_alert_1 = require("react-alert");
const react_alert_template_basic_1 = __importDefault(require("react-alert-template-basic"));
const contexts_1 = require("../../contexts");
const GatewaysWidget_1 = __importDefault(require("../../widgets/GatewaysWidget"));
const neverthrow_1 = require("neverthrow");
const react_1 = __importDefault(require("react"));
const react_dom_1 = __importDefault(require("react-dom"));
const uuid_1 = require("uuid");
const components_1 = require("../../components");
const constants_1 = require("../../constants");
const ConnectorAuthorizationFlow_1 = __importDefault(require("../../flows/ConnectorAuthorizationFlow"));
const OnboardingFlow_1 = __importDefault(require("../../flows/OnboardingFlow"));
const PrivateKeysFlow_1 = __importDefault(require("../../flows/PrivateKeysFlow"));
const utils_1 = require("../../utils");
const BalancesWidget_1 = __importDefault(require("../../widgets/BalancesWidget"));
const BalancesSummaryWidget_1 = __importDefault(require("../../widgets/BalancesSummaryWidget"));
const FundWidget_1 = __importDefault(require("../../widgets/FundWidget"));
const WithdrawWidget_1 = __importDefault(require("../../widgets/WithdrawWidget"));
const LinksWidget_1 = __importDefault(require("../../widgets/LinksWidget"));
const PaymentWidget_1 = require("../../widgets/PaymentWidget");
const PublicIdentifierWidget_1 = __importDefault(require("../../widgets/PublicIdentifierWidget"));
const StateChannelsWidget_1 = __importDefault(require("../../widgets/StateChannelsWidget"));
const ProposalsWidget_1 = __importDefault(require("../../widgets/ProposalsWidget"));
const CreateProposalWidget_1 = __importDefault(require("../../widgets/CreateProposalWidget"));
const ProposalDetailWidget_1 = __importDefault(require("../../widgets/ProposalDetailWidget"));
const RegistryListWidget_1 = __importDefault(require("../../widgets/RegistryListWidget"));
const RegistryEntryDetailWidget_1 = __importDefault(require("../../widgets/RegistryEntryDetailWidget"));
const RegistryDetailWidget_1 = __importDefault(require("../../widgets/RegistryDetailWidget"));
const RegistryEntryListWidget_1 = __importDefault(require("../../widgets/RegistryEntryListWidget"));
const HypertokenBalanceWidget_1 = __importDefault(require("../../widgets/HypertokenBalanceWidget"));
const VotingPowerWidget_1 = __importDefault(require("../../widgets/VotingPowerWidget"));
const ConnectedAccountWidget_1 = __importDefault(require("../../widgets/ConnectedAccountWidget"));
const WalletConnectWidget_1 = __importDefault(require("../../widgets/WalletConnectWidget"));
const RegistryLazyMintingRequestsWidget_1 = __importDefault(require("../../widgets/RegistryLazyMintingRequestsWidget"));
const ChainSelectorWidget_1 = __importDefault(require("../../widgets/ChainSelectorWidget"));
const theme_1 = require("../../theme");
class HypernetWebUI {
constructor(_coreInstance, _UIData, iframeURL, defaultGovernanceChainId, theme, debug) {
this.theme = null;
this.payments = {
renderBalancesWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(BalancesWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true, config === null || config === void 0 ? void 0 : config.hideLoadingSpinner), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.BALANCES_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderGatewaysWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(GatewaysWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.BALANCES_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderFundWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(FundWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.FUND_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderWithdrawWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(WithdrawWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.WITHDRAW_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderLinksWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(LinksWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.LINKS_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderPublicIdentifierWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(PublicIdentifierWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.PUBLIC_IDENTIFIER_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderStateChannelsWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(StateChannelsWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.STATE_CHANNELS_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderConnectorAuthorizationFlow: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(ConnectorAuthorizationFlow_1.default, { connectorUrl: config.connectorUrl, connectorName: config.connectorName, connectorLogoUrl: config.connectorLogoUrl }), config.showInModal), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.CONNECTOR_AUTHORIZATION_FLOW_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
startOnboardingFlow: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(OnboardingFlow_1.default, { gatewayUrl: config.gatewayUrl, gatewayName: config.gatewayName, gatewayLogoUrl: config.gatewayLogoUrl, closeCallback: config.closeCallback, excludeCardWrapper: true, launchpadUrl: config.launchpadUrl, renderGatewayApprovalContent: config === null || config === void 0 ? void 0 : config.renderGatewayApprovalContent }), config.showInModal, config.closeCallback, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.ONBOARDING_FLOW_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderBalancesSummaryWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(BalancesSummaryWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.BALANCES_SUMMARY_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderPaymentWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(PaymentWidget_1.PaymentWidget, { counterPartyAccount: config === null || config === void 0 ? void 0 : config.counterPartyAccount, amount: config === null || config === void 0 ? void 0 : config.amount, expirationDate: config === null || config === void 0 ? void 0 : config.expirationDate, requiredStake: config === null || config === void 0 ? void 0 : config.requiredStake, paymentTokenAddress: config === null || config === void 0 ? void 0 : config.paymentTokenAddress, gatewayUrl: config === null || config === void 0 ? void 0 : config.gatewayUrl, paymentType: config === null || config === void 0 ? void 0 : config.paymentType }), config === null || config === void 0 ? void 0 : config.showInModal), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.PAYMENT_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
};
this.governance = {
renderProposalsWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(ProposalsWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.PROPOSALS_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderProposalDetailWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(ProposalDetailWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.PROPOSALS_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderProposalCreateWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(CreateProposalWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.PROPOSAL_CREATE_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderHypertokenBalanceWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(HypertokenBalanceWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true, config === null || config === void 0 ? void 0 : config.hideLoadingSpinner), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.HYPERTOKEN_BALANCE_WIDGET));
};
return this._getThrowableRender(renderReact);
},
renderVotingPowerWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(VotingPowerWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true, config === null || config === void 0 ? void 0 : config.hideLoadingSpinner), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.VOTING_POWER_WIDGET));
};
return this._getThrowableRender(renderReact);
},
};
this.registries = {
renderRegistryListWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(RegistryListWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.REGISTRY_LIST_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderRegistryDetailWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(RegistryDetailWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.REGISTRY_LIST_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderRegistryEntryListWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(RegistryEntryListWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.REGISTRY_ENTRY_LIST_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderRegistryEntryDetailWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(RegistryEntryDetailWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.REGISTRY_ENTRY_DETAIL_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
renderRegistryLazyMintingRequestsWidget: (config) => {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(RegistryLazyMintingRequestsWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) ||
constants_1.REGISTRY_LAZY_MINTING_REQUESTS_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
},
};
if (_coreInstance) {
this.coreInstance = _coreInstance;
}
else if (window.hypernetCoreInstance) {
this.coreInstance = window.hypernetCoreInstance;
}
else {
throw new Error("core instance is required");
}
this.defaultGovernanceChainId = (0, objects_1.ChainId)(defaultGovernanceChainId || 1);
this.theme = theme;
// This is to cache web ui instance in window so it may prevent from having multiple web ui instances
window.hypernetWebUIInstance = HypernetWebUI.instance;
this.UIData = _UIData;
this.viewUtils = new utils_1.ViewUtils();
this.dateUtils = new utils_1.DateUtils();
}
_generateDomElement(selector, forceRegenerate) {
if (forceRegenerate) {
this._removeExistedElement(selector);
}
if (document.getElementById(selector) == null) {
const element = document.createElement("div");
element.setAttribute("id", selector);
document.body.appendChild(element);
document.getElementById(selector);
return element;
}
return document.getElementById(selector);
}
_removeExistedElement(selector) {
const element = document.getElementById(selector);
if (element) {
element.remove();
}
}
_bootstrapComponent(component, withModal = false, closeCallback, modalStyle, hasTheme, hideLoadingSpinner) {
var _a;
if (this.coreInstance == null) {
throw new Error("core instance is required");
}
// Material-Ui v4 has a problem with multiple theme provider in the same react tree level
// For fixing that issue we need to provide a single top level Theme provider.
// But we can not do that because of the our widget renderer functions are under control of the customers/our library users
// We can export a parent top level theme provider and expect that in the integration flow users should use it for wrapping the our rendered widgets.
// But not gonna work in all situations
// Also we are using multipe react init point with calling ReactDom.render method. And material ui has some problems with that to.
// For fixin these issues first we need to provide a seed for our classname generation on the top of the widget renderer function
// And also that seed should be unique for the same react tree level rendered widgets
// For making them unique we added widgetUniqueIdentifier as a unique prefix
const widgetUniqueIdentifier = `hypernetlabs-${(0, uuid_1.v4)()}`;
const Theme = hasTheme ? core_1.ThemeProvider : core_1.Box;
const generateClassName = (0, core_1.createGenerateClassName)({
seed: widgetUniqueIdentifier,
});
// TODO: Add theme switching.
const customTheme = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.light;
const theme = customTheme
? (0, theme_1.injectCustomPaletteToTheme)(theme_1.lightTheme, customTheme)
: theme_1.lightTheme;
return (react_1.default.createElement(contexts_1.StoreProvider, { coreProxy: this.coreInstance, UIData: this.UIData, viewUtils: this.viewUtils, dateUtils: this.dateUtils, widgetUniqueIdentifier: widgetUniqueIdentifier, defaultGovernanceChainId: this.defaultGovernanceChainId },
react_1.default.createElement(core_1.StylesProvider, { generateClassName: generateClassName },
react_1.default.createElement(Theme, { theme: theme },
react_1.default.createElement(react_alert_1.Provider, { template: react_alert_template_basic_1.default, timeout: 10000, position: react_alert_1.positions.BOTTOM_CENTER },
react_1.default.createElement(contexts_1.LayoutProvider, null,
react_1.default.createElement(MainContainer_1.default, { withModal: withModal, closeCallback: closeCallback, modalStyle: modalStyle, isV2: hasTheme, hideLoadingSpinner: hideLoadingSpinner }, component)))))));
}
_getThrowableRender(renderReact) {
const throwable = neverthrow_1.Result.fromThrowable(renderReact, (err) => {
return new objects_1.RenderError("Error in fromThrowable", err);
});
return throwable();
}
renderPrivateKeysModal() {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(PrivateKeysFlow_1.default, null), true, undefined, {
zIndex: 99999,
}), this._generateDomElement(constants_1.PRIVATE_KEYS_FLOW_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
}
renderMetamaskWarningModal() {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(components_1.MetamaskWarning, null), true, undefined, {
zIndex: 99999,
}, true), this._generateDomElement(constants_1.METAMASK_WARNING_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
}
renderWalletConnectWidget(config) {
const renderReact = () => {
console.log("renderWalletConnectWidget");
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(WalletConnectWidget_1.default, null), config.showInModal, () => {
if (this.coreInstance) {
this.coreInstance.rejectProviderIdRequest();
}
}, {
zIndex: 99999,
}, true, config.hideLoadingSpinner), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.CONNECT_WALLET_WIDGET_SELECTOR, true));
};
return this._getThrowableRender(renderReact);
}
renderChainSelectorWidget(config) {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(ChainSelectorWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true, config === null || config === void 0 ? void 0 : config.hideLoadingSpinner), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.CHAIN_SELECTOR_WIDGET_ID_SELECTOR));
};
return this._getThrowableRender(renderReact);
}
renderWarningAlertModal(errorMessage) {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(components_1.WarningAlert, { errorMessage: errorMessage }), true, undefined, {
zIndex: 99999,
}), this._generateDomElement(constants_1.WARNING_ALERT_SELECTOR));
};
return this._getThrowableRender(renderReact);
}
renderConnectedAccountWidget(config) {
const renderReact = () => {
return react_dom_1.default.render(this._bootstrapComponent(react_1.default.createElement(ConnectedAccountWidget_1.default, { ...config }), config === null || config === void 0 ? void 0 : config.showInModal, undefined, undefined, true, config === null || config === void 0 ? void 0 : config.hideLoadingSpinner), this._generateDomElement((config === null || config === void 0 ? void 0 : config.selector) || constants_1.CONNECTED_ACCOUNT_WIDGET));
};
return this._getThrowableRender(renderReact);
}
}
exports.default = HypernetWebUI;
window.HypernetWebUI = HypernetWebUI;
//# sourceMappingURL=HypernetWebUI.js.map