decentraland-ui
Version:
Decentraland's UI components and styles
168 lines (167 loc) • 8.83 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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 });
exports.BuyManaWithFiatModal = void 0;
var React = __importStar(require("react"));
var ModalContent_1 = __importDefault(require("semantic-ui-react/dist/commonjs/modules/Modal/ModalContent"));
var classnames_1 = __importDefault(require("classnames"));
var schemas_1 = require("@dcl/schemas");
var network_1 = require("../../lib/network");
var Modal_1 = require("../Modal/Modal");
var ModalNavigation_1 = require("../ModalNavigation/ModalNavigation");
var Loader_1 = require("../Loader/Loader");
var Network_1 = require("./Network");
require("./BuyManaWithFiatModal.css");
require("./Network.css");
var BuyManaWithFiatModalNetwork = /** @class */ (function (_super) {
__extends(BuyManaWithFiatModalNetwork, _super);
function BuyManaWithFiatModalNetwork() {
return _super !== null && _super.apply(this, arguments) || this;
}
BuyManaWithFiatModalNetwork.prototype.render = function () {
var _a = this.props, type = _a.type, i18n = _a.i18n, onClick = _a.onClick;
var networkMANADescription = (0, network_1.getNetworkMANADescription)(type);
var cta = networkMANADescription;
var ctaSubtitle = '';
switch (type) {
case schemas_1.Network.MATIC:
ctaSubtitle = "Use it to buy most wearables and emotes in ".concat(networkMANADescription, ".");
break;
case schemas_1.Network.ETHEREUM:
ctaSubtitle = "Use it to buy LAND, names and specific wearables in ".concat(networkMANADescription, ".");
break;
}
return (React.createElement("div", { className: "dcl option ".concat(type.toLowerCase()), onClick: onClick, key: type },
React.createElement("div", { className: "image" }),
React.createElement("div", { className: "info" },
React.createElement("div", { className: "cta" }, (i18n === null || i18n === void 0 ? void 0 : i18n.cta) || cta),
React.createElement("div", { className: "ctaSubtitle" }, (i18n === null || i18n === void 0 ? void 0 : i18n.ctaSubtitle) || ctaSubtitle))));
};
return BuyManaWithFiatModalNetwork;
}(React.PureComponent));
var BuyManaWithFiatModal = /** @class */ (function (_super) {
__extends(BuyManaWithFiatModal, _super);
function BuyManaWithFiatModal() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
selectedNetwork: null
};
_this.unselectNetwork = function () { return _this.setState({ selectedNetwork: null }); };
_this.handleOnClose = function () {
_this.unselectNetwork();
_this.props.onClose();
};
_this.handleNetworkOnClick = function (network) {
var _a;
_this.setState({
selectedNetwork: network
});
(_a = network.onClick) === null || _a === void 0 ? void 0 : _a.call(network);
};
return _this;
}
BuyManaWithFiatModal.prototype.componentDidMount = function () {
if (this.props.networks.length === 1) {
this.setState({ selectedNetwork: this.props.networks[0] });
}
};
BuyManaWithFiatModal.prototype.componentDidUpdate = function () {
if (this.props.networks &&
this.props.networks.length === 1 &&
!this.state.selectedNetwork) {
this.setState({ selectedNetwork: this.props.networks[0] });
}
};
BuyManaWithFiatModal.prototype.render = function () {
var _this = this;
var selectedNetwork = this.state.selectedNetwork;
var _a = selectedNetwork
? selectedNetwork
: this.props, className = _a.className, message = _a.message, i18n = _a.i18n, onInfo = _a.onInfo;
var title = (i18n === null || i18n === void 0 ? void 0 : i18n.title) ||
(selectedNetwork
? "Buy ".concat((0, network_1.getNetworkMANADescription)(selectedNetwork.type))
: 'Buy MANA');
var defaultNetworkMessage = 'If this is the first time you use any of these providers you will first need to create an account on their platform. If you have already have an account, you will just need to login.';
var errorClasses = 'error';
if (this.props.hasError) {
errorClasses += ' visible';
}
return (React.createElement(Modal_1.Modal, { open: this.props.open, className: (0, classnames_1.default)('dcl', selectedNetwork ? 'network' : 'buy-mana-with-fiat-modal', className, selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.type.toLowerCase().replace(' ', '-')) },
React.createElement(ModalNavigation_1.ModalNavigation, { title: title, subtitle: selectedNetwork ? '' : this.props.i18n.subtitle, onInfo: onInfo, onClose: this.handleOnClose, onBack: selectedNetwork &&
this.props.networks.length > 1 &&
this.unselectNetwork }),
React.createElement(ModalContent_1.default, null,
selectedNetwork ? (React.createElement(Network_1.BuyWithFiatNetwork, { type: selectedNetwork.type, gateways: selectedNetwork.gateways })) : (this.props.networks.map(function (network) { return (React.createElement(BuyManaWithFiatModalNetwork, __assign({}, network, { key: network.type, type: network.type, onClick: function () { return _this.handleNetworkOnClick(network); } }))); })),
message || selectedNetwork ? (React.createElement("small", { className: "message" }, message || defaultNetworkMessage)) : null),
this.props.hasError ? (React.createElement("p", { className: errorClasses }, i18n.error)) : null,
this.props.loading ? (React.createElement(React.Fragment, null,
React.createElement(Loader_1.Loader, { size: "big", active: true }),
React.createElement("div", { className: "loader-background" }))) : null));
};
BuyManaWithFiatModal.defaultProps = {
className: '',
hasError: false,
loading: false,
i18n: {
title: 'Buy MANA',
subtitle: 'Select which mana you want to buy',
message: '',
error: 'Could not process the payment'
}
};
BuyManaWithFiatModal.Network = BuyManaWithFiatModalNetwork;
return BuyManaWithFiatModal;
}(React.Component));
exports.BuyManaWithFiatModal = BuyManaWithFiatModal;