decentraland-ui
Version:
Decentraland's UI components and styles
191 lines (190 loc) • 13.3 kB
JavaScript
"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("@storybook/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.createElement(React.Fragment, null,
React.createElement(Header_1.Header, null, "Lorem Ipsum"),
React.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.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.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.")));
(0, react_1.storiesOf)('BuyManaWithFiatModal', module)
.add('BuyManaWithFiat options with default values', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat options with custom texts', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat with Polygon already selected and only one gateway', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat with Ethereum already selected', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat success modal without link to transaction explorer', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.createElement(FeedbackModal_1.FeedbackModal, { open: true, status: FeedbackModal_1.TransactionStatus.SUCCESS, onClose: function () { return undefined; }, onInfo: function () { return undefined; } }))); })
.add('BuyManaWithFiat success modal with link to transaction explorer', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat pending tx in Moon Pay', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat tx failed in Moon Pay', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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; } }))); })
.add('BuyManaWithFiat persisent message', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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: [] }
] }))); })
.add('BuyManaWithFiat error', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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: [] }
] }))); })
.add('Loading', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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: [] }
] }))); })
.add('Full example', function () { return (React.createElement("div", { className: "BuyManaWithFiatModal-story" },
lipsum,
React.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: [] }
] }))); });