@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
39 lines • 4.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OnrampSuccessStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
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 truncate_js_1 = require("../../../../../utils/truncate.js");
const OnrampSuccessStep = ({ toToken, moonpayTxUrl, isLoadingTransaction, toAmountFormatted, fillTxHash, fillTxUrl, baseTransactionUrl, onOpenChange }) => {
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: "Transaction Details" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "center", justify: "between", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: {
type: 'spring',
stiffness: 260,
damping: 20
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Flex, { align: "center", justify: "center", css: {
height: 80,
width: 80,
backgroundColor: 'green2',
'--borderColor': 'colors.green10',
border: '6px solid var(--borderColor)',
borderRadius: '999999px',
position: 'relative'
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'green9', mr: '$2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, style: { height: 40 } }) }) }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { mt: '4', textAlign: 'center' }, children: "Successfully purchased" }), (0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: { alignItems: 'center', my: '4', py: '2', px: '3', gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: toToken.chainId, tokenlogoURI: toToken.logoURI, tokenSymbol: toToken.symbol, css: { height: 32, width: 32 } }), isLoadingTransaction ? ((0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { height: 24, width: 60, background: 'gray5' } })) : ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", ellipsify: true, children: [toAmountFormatted, " ", toToken.symbol] }))] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { gap: '2' }, align: "center", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Anchor, { href: moonpayTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1' }, children: ["View MoonPay transaction", ' ', (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUpRightFromSquare, style: { width: 14 } })] }), fillTxUrl ? ((0, jsx_runtime_1.jsxs)(index_js_1.Anchor, { href: fillTxUrl, target: "_blank", children: ["View Tx: ", (0, truncate_js_1.truncateAddress)(fillTxHash)] })) : null] })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { width: '100%', mt: '24px', gap: '3' }, children: [fillTxHash ? ((0, jsx_runtime_1.jsx)("a", { href: `${baseTransactionUrl}/transaction/${fillTxHash}`, style: { width: '100%' }, target: "_blank", onClick: (e) => {
e.stopPropagation();
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "secondary", css: {
justifyContent: 'center',
width: 'max-content'
}, children: "View Details" }) })) : null, (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" })] })] }));
};
exports.OnrampSuccessStep = OnrampSuccessStep;
//# sourceMappingURL=OnrampSuccessStep.js.map