@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
45 lines • 4.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OnrampProcessingPassthroughStep = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../../../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const LoadingSpinner_js_1 = require("../../../../common/LoadingSpinner.js");
const MoonPayLogo_js_1 = tslib_1.__importDefault(require("../../../../../img/MoonPayLogo.js"));
const OnrampProcessingPassthroughStep = ({ toToken, moonpayTxUrl, amount, amountToTokenFormatted }) => {
return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
height: '100%'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", css: { mb: '4' }, children: "Processing Transaction" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: {
width: '100%',
p: '3',
mb: '2',
gap: '2',
background: 'gray2',
borderRadius: 12
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: {
width: 32,
height: 32
} }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "start", direction: "column", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "h6", children: [amountToTokenFormatted, " ", toToken.symbol] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", children: amount })] })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", justify: "center", align: "center", css: {
py: '4',
px: '3',
borderRadius: 'widget-card-border-radius',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Box, { css: { position: 'relative', width: 40, height: 40 }, children: [(0, jsx_runtime_1.jsx)(MoonPayLogo_js_1.default, { style: { borderRadius: 12, width: 40, height: 40 } }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { align: "center", justify: "center", css: {
width: 24,
height: 24,
borderRadius: '100%',
overflow: 'hidden',
background: 'primary3',
position: 'absolute',
bottom: '-6px',
right: '-6px',
'--borderColor': 'colors.modal-background',
border: '2px solid var(--borderColor)'
}, children: (0, jsx_runtime_1.jsx)(LoadingSpinner_js_1.LoadingSpinner, { css: { height: 16, width: 16, fill: 'primary-color' } }) })] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", css: { mt: '24px', textAlign: 'center' }, children: "Finalizing your purchase through MoonPay, it may take a few minutes to process." }), moonpayTxUrl ? ((0, jsx_runtime_1.jsxs)(index_js_1.Anchor, { href: moonpayTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1', mt: '2' }, children: ["Track MoonPay transaction", ' ', (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUpRightFromSquare, style: { width: 14 } })] })) : null] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body2", color: "subtle", css: { mt: '2' }, children: "Feel free to leave at any time, MoonPay will email you with updates." })] }));
};
exports.OnrampProcessingPassthroughStep = OnrampProcessingPassthroughStep;
//# sourceMappingURL=OnrampProcessingPassthroughStep.js.map