@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
119 lines • 7.36 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 objects_1 = require("@hypernetlabs/objects");
const core_1 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const contexts_1 = require("../../contexts");
const react_1 = __importStar(require("react"));
const react_alert_1 = require("react-alert");
const components_1 = require("../../components");
const GatewayInfoModalWidget_style_1 = require("../../widgets/GatewayInfoModalWidget/GatewayInfoModalWidget.style");
var ETokenState;
(function (ETokenState) {
ETokenState["NOT_REGISTERED"] = "NOT_REGISTERED";
ETokenState["REGISTERED"] = "REGISTERED";
ETokenState["REGISTERED_WITH_NO_FUND"] = "REGISTERED_WITH_NO_FUND";
})(ETokenState || (ETokenState = {}));
const GatewayInfoModalWidget = (props) => {
const { gatewayUrl, closeCallback } = props;
const classes = (0, GatewayInfoModalWidget_style_1.useStyles)();
const alert = (0, react_alert_1.useAlert)();
const { coreProxy } = (0, contexts_1.useStoreContext)();
const { setLoading, handleCoreError } = (0, contexts_1.useLayoutContext)();
const [gatewayTokenInfo, setGatewayTokenInfo] = (0, react_1.useState)([]);
const [tokensStateChannelsMap, setTokensStateChannelsMap] = (0, react_1.useState)(new Map());
(0, react_1.useEffect)(() => {
setLoading(true);
coreProxy.payments
.getGatewayTokenInfo([gatewayUrl])
.map((gatewayTokenInfoMap) => {
const gatewayTokenInfoVal = gatewayTokenInfoMap.get(gatewayUrl);
if (gatewayTokenInfoVal != null) {
setGatewayTokenInfo(gatewayTokenInfoVal);
}
checkTokensStateChannelsStatus(gatewayTokenInfoVal);
})
.mapErr(handleCoreError);
}, []);
const checkTokensStateChannelsStatus = (_gatewayTokenInfo = gatewayTokenInfo) => {
setLoading(true);
coreProxy.payments.getBalances().map((balances) => {
coreProxy.payments
.getActiveStateChannels()
.map((activeStateChannels) => {
const activeRouters = activeStateChannels.map((activeStateChannel) => activeStateChannel.routerPublicIdentifier);
_gatewayTokenInfo.forEach((tokenInfo) => {
const allRoutersMatch = tokenInfo.routerPublicIdentifiers.every((routerPublicIdentifier) => {
return activeRouters.includes(routerPublicIdentifier);
});
const fundedTokenAssets = balances.assets
.filter((assetBalance) => assetBalance.totalAmount > (0, objects_1.BigNumberString)("0"))
.map((assetBalance) => {
return assetBalance.assetAddress;
});
const tokenHasFunds = fundedTokenAssets.includes(tokenInfo.tokenAddress);
setTokensStateChannelsMap(new Map(tokensStateChannelsMap.set(tokenInfo.tokenAddress, allRoutersMatch
? tokenHasFunds
? ETokenState.REGISTERED
: ETokenState.REGISTERED_WITH_NO_FUND
: ETokenState.NOT_REGISTERED)));
});
setLoading(false);
})
.mapErr(handleCoreError);
});
};
const addToken = (gatewayToken) => {
setLoading(true);
coreProxy.payments
.createStateChannel(gatewayToken.routerPublicIdentifiers, gatewayToken.chainId)
.map((activeStateChannel) => {
checkTokensStateChannelsStatus();
alert.success("Your token has been registered and a new account has been created!");
})
.mapErr(handleCoreError);
};
const addFunds = (gatewayToken) => {
console.log("addFunds gatewayToken: ", gatewayToken);
};
return (react_1.default.createElement(components_1.GovernanceDialog, { title: react_1.default.createElement(core_1.Typography, { variant: "h4" }, `Gateway: ${gatewayUrl}`), isOpen: true, onClose: closeCallback, content: react_1.default.createElement(components_1.List, { style: { margin: 0 } }, gatewayTokenInfo.map((gatewayToken) => (react_1.default.createElement(components_1.ListItem, { title: `Token:${gatewayToken.tokenAddress}`, disableDivider: true, rightContent: react_1.default.createElement(react_1.default.Fragment, null,
(tokensStateChannelsMap.get(gatewayToken.tokenAddress) ==
null ||
tokensStateChannelsMap.get(gatewayToken.tokenAddress) ===
ETokenState.NOT_REGISTERED) && (react_1.default.createElement(core_1.Tooltip, { title: "Add token", placement: "top" },
react_1.default.createElement(core_1.IconButton, { "aria-label": "Add token", onClick: () => addToken(gatewayToken) },
react_1.default.createElement(icons_1.Add, null)))),
tokensStateChannelsMap.get(gatewayToken.tokenAddress) ===
ETokenState.REGISTERED && (react_1.default.createElement(core_1.Tooltip, { title: "Token Already Registered", placement: "top" },
react_1.default.createElement(core_1.IconButton, { "aria-label": "Registered token", className: classes.iconButton },
react_1.default.createElement(icons_1.Check, { color: "primary" })))),
tokensStateChannelsMap.get(gatewayToken.tokenAddress) ===
ETokenState.REGISTERED_WITH_NO_FUND && (react_1.default.createElement(core_1.Box, { display: "flex" },
react_1.default.createElement(core_1.Tooltip, { title: "Token Already Registered", placement: "top" },
react_1.default.createElement(core_1.IconButton, { "aria-label": "Registered token", className: classes.iconButton },
react_1.default.createElement(icons_1.Check, { color: "primary" }))),
react_1.default.createElement(core_1.Tooltip, { title: "Fund Your Account", placement: "top" },
react_1.default.createElement(core_1.IconButton, { "aria-label": "Fund your account", onClick: () => addFunds(gatewayToken) },
react_1.default.createElement(icons_1.LocalGasStation, { color: "secondary" })))))) })))) }));
};
exports.default = GatewayInfoModalWidget;
//# sourceMappingURL=GatewayInfoModalWidget.js.map