decentraland-ui
Version:
Decentraland's UI components and styles
199 lines (198 loc) • 14 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FullExample = exports.Loading = exports.BuyManaWithFiatError = exports.BuyManaWithFiatPersisentMessage = exports.BuyManaWithFiatTxFailedInMoonPay = exports.BuyManaWithFiatPendingTxInMoonPay = exports.BuyManaWithFiatSuccessModalWithLinkToTransactionExplorer = exports.BuyManaWithFiatSuccessModalWithoutLinkToTransactionExplorer = exports.BuyManaWithFiatWithEthereumAlreadySelected = exports.BuyManaWithFiatWithPolygonAlreadySelectedAndOnlyOneGateway = exports.BuyManaWithFiatOptionsWithCustomTexts = exports.BuyManaWithFiatOptionsWithDefaultValues = void 0;
var react_1 = __importDefault(require("react"));
var schemas_1 = require("@dcl/schemas");
var BuyManaWithFiatModal_1 = require("../BuyManaWithFiatModal/BuyManaWithFiatModal");
var Header_1 = require("../Header/Header");
var FeedbackModal_1 = require("./FeedbackModal");
var Network_1 = require("./Network");
require("./BuyManaWithFiatModal.stories.css");
var lipsum = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Header_1.Header, null, "Lorem Ipsum"),
react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tincidunt lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare rutrum lorem vehicula finibus. Donec vitae lorem consequat, suscipit nibh sit amet, euismod nunc. Sed gravida faucibus nulla vitae luctus. Aliquam libero lacus, faucibus ac neque ut, hendrerit pulvinar quam. Nunc porta porttitor nulla et dignissim. Aenean lobortis libero aliquet dolor pulvinar dapibus. Sed tristique scelerisque nulla, in feugiat neque lacinia in. Cras vulputate turpis in orci interdum accumsan."),
react_1.default.createElement("p", null, "Phasellus sit amet eleifend sapien, vel commodo nibh. Morbi mi lectus, vulputate eget turpis nec, aliquam efficitur lacus. Morbi gravida nisi et purus facilisis, at molestie neque vulputate. Sed in nulla mollis justo aliquam egestas. Aliquam gravida porta augue, et lobortis ante tincidunt ut. Nam varius lorem suscipit dolor malesuada finibus. Quisque ullamcorper purus ut tincidunt vehicula. Sed hendrerit porttitor lacinia. Fusce eget arcu augue. Quisque ullamcorper imperdiet libero, sed interdum augue congue eu. Fusce finibus scelerisque odio, id facilisis ante sagittis sit amet. Nulla vulputate lobortis tellus in dapibus. Suspendisse non tempus nulla. Nulla egestas malesuada interdum. Aliquam malesuada placerat nisl nec ultrices."),
react_1.default.createElement("p", null, "Duis a viverra ipsum, in pellentesque est. Nullam interdum vehicula massa sed porttitor. Ut condimentum lacinia iaculis. Pellentesque porta euismod nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae mattis ipsum, a bibendum nisi. Sed nec ante ultricies, pretium nulla sit amet, congue sem. Nulla at sodales enim. Nam a dignissim tortor. Quisque feugiat est nec tortor eleifend ornare nec vel velit. Praesent rhoncus nisl ut convallis posuere. Nam sollicitudin eros sem, a consectetur sem interdum non. Phasellus ac dolor eget lacus feugiat ullamcorper.")));
var meta = {
title: 'BuyManaWithFiatModal',
component: BuyManaWithFiatModal_1.BuyManaWithFiatModal
};
exports.default = meta;
exports.BuyManaWithFiatOptionsWithDefaultValues = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, networks: [
{
type: schemas_1.Network.MATIC,
gateways: [
{
type: Network_1.NetworkGatewayType.TRANSAK,
learnMoreLink: 'https://transak.com/',
onContinue: function () { return undefined; }
}
]
},
{
type: schemas_1.Network.ETHEREUM,
gateways: [
{
type: Network_1.NetworkGatewayType.MOON_PAY,
onContinue: function () { return undefined; }
},
{
type: Network_1.NetworkGatewayType.TRANSAK,
onContinue: function () { return undefined; }
}
]
}
], onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatOptionsWithCustomTexts = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, i18n: {
title: 'Title of the modal',
subtitle: 'Subtitle of the modal',
error: 'Could not render the modal'
}, networks: [
{
type: schemas_1.Network.MATIC,
i18n: {
cta: 'Call to action',
ctaSubtitle: 'The subtitle of the CTA',
title: 'Title of the network',
error: 'Could not render the network'
},
message: 'This is a custom message',
gateways: [
{
type: Network_1.NetworkGatewayType.TRANSAK,
i18n: {
title: 'Title of the gateway',
subtitle: 'Subtitle of the gateway',
continueButtonText: 'Continue with gateway',
learnMoreText: 'Learn more about the gateway'
},
onContinue: function () { return undefined; }
}
]
},
{
type: schemas_1.Network.ETHEREUM,
gateways: [
{
type: Network_1.NetworkGatewayType.MOON_PAY,
onContinue: function () { return undefined; }
},
{
type: Network_1.NetworkGatewayType.TRANSAK,
onContinue: function () { return undefined; }
}
]
}
], onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatWithPolygonAlreadySelectedAndOnlyOneGateway = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, networks: [
{
type: schemas_1.Network.MATIC,
gateways: [
{
type: Network_1.NetworkGatewayType.TRANSAK,
learnMoreLink: 'https://transak.com/',
onContinue: function () { return undefined; }
}
]
}
], onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatWithEthereumAlreadySelected = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, networks: [
{
type: schemas_1.Network.ETHEREUM,
gateways: [
{
type: Network_1.NetworkGatewayType.MOON_PAY,
learnMoreLink: 'https://moonpay.com/',
onContinue: function () { return undefined; }
},
{
type: Network_1.NetworkGatewayType.TRANSAK,
learnMoreLink: 'https://transak.com/',
onContinue: function () { return undefined; }
}
]
}
], onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatSuccessModalWithoutLinkToTransactionExplorer = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(FeedbackModal_1.FeedbackModal, { open: true, status: FeedbackModal_1.TransactionStatus.SUCCESS, onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatSuccessModalWithLinkToTransactionExplorer = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(FeedbackModal_1.FeedbackModal, { open: true, status: FeedbackModal_1.TransactionStatus.SUCCESS, transactionUrl: "https://goerli.etherscan.io/tx/0xb4a0b25c6e9ef69ba4f643a40bba2e1ec220a68c7404bfb705ba04d34b52acfaa", onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatPendingTxInMoonPay = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(FeedbackModal_1.FeedbackModal, { open: true, status: FeedbackModal_1.TransactionStatus.PENDING, goToUrl: "https://buy-sandbox.moonpay.com/transaction_receipt?transactionId=0a1cbb99-1b3c-4106-9d88-318ef2201123", i18n: {
title: 'Buy Ethereum MANA',
statusTitle: 'The transaction is processing',
description: 'Wait a few minutes while the transaction is being processed',
goToText: 'Go to MoonPay tab'
}, selectedNetwork: schemas_1.Network.ETHEREUM, selectedGateway: Network_1.NetworkGatewayType.MOON_PAY, onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatTxFailedInMoonPay = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(FeedbackModal_1.FeedbackModal, { open: true, status: FeedbackModal_1.TransactionStatus.FAILURE, goToUrl: "https://buy-sandbox.moonpay.com/transaction_receipt?transactionId=0a1cbb99-1b3c-4106-9d88-318ef2201123", i18n: {
title: 'Buy Ethereum MANA',
statusTitle: 'The transaction failed',
description: 'You can try again with Moon Pay or select other provider',
goToText: 'Go to MoonPay tab',
cta: 'Try again',
secondaryCta: 'Select other provider'
}, selectedNetwork: schemas_1.Network.ETHEREUM, selectedGateway: Network_1.NetworkGatewayType.MOON_PAY, onClose: function () { return undefined; }, onInfo: function () { return undefined; }, onClickCta: function () { return undefined; }, onClickSecondaryCta: function () { return undefined; } }))); }
};
exports.BuyManaWithFiatPersisentMessage = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, message: "This is a custom persistent message", onClose: function () { return undefined; }, onInfo: function () { return undefined; }, networks: [
{ type: schemas_1.Network.MATIC, gateways: [] },
{ type: schemas_1.Network.ETHEREUM, gateways: [] }
] }))); }
};
exports.BuyManaWithFiatError = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, hasError: true, onClose: function () { return undefined; }, onInfo: function () { return undefined; }, networks: [
{ type: schemas_1.Network.MATIC, gateways: [] },
{ type: schemas_1.Network.ETHEREUM, gateways: [] }
] }))); }
};
exports.Loading = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, loading: true, onClose: function () { return undefined; }, onInfo: function () { return undefined; }, networks: [
{ type: schemas_1.Network.MATIC, gateways: [] },
{ type: schemas_1.Network.ETHEREUM, gateways: [] }
] }))); }
};
exports.FullExample = {
render: function () { return (react_1.default.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
react_1.default.createElement(BuyManaWithFiatModal_1.BuyManaWithFiatModal, { open: true, message: "This is a custom persistent message", hasError: true, loading: true, onClose: function () { return undefined; }, onInfo: function () { return undefined; }, networks: [
{ type: schemas_1.Network.MATIC, gateways: [] },
{ type: schemas_1.Network.ETHEREUM, gateways: [] }
] }))); }
};