@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
42 lines • 3.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OnrampConfirmingStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../../../primitives/index.js");
const OnrampModal_js_1 = require("../OnrampModal.js");
const LoadingSpinner_js_1 = require("../../../../common/LoadingSpinner.js");
const events_js_1 = require("../../../../../constants/events.js");
const OnrampConfirmingStep = ({ toToken, fromToken, fromChain, toChain, requestId, depositAddress, recipient, amount, totalAmount, ethTotalAmount, isFetchingQuote, onAnalyticEvent, setStep }) => {
return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '4'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "h6", children: ["Buy ", toToken?.symbol, " (", toChain?.displayName, ")"] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
overflow: 'hidden',
borderRadius: 'widget-card-border-radius',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
p: '4'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", children: ["You'll purchase ", fromToken?.symbol, " (", fromChain?.displayName, ") via your card"] })] }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
height: 24,
width: 1,
background: 'gray5',
my: '5px',
ml: 4
} }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", children: ["Relay converts to ", toToken?.symbol, " (", toChain?.displayName, ")"] })] })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", children: ["This transaction occurs in two steps. MoonPay powers only your purchase of ", fromToken?.symbol, " (", fromChain?.displayName, ") which Relay then converts to ", toToken?.symbol, " (", toChain?.displayName, ").", ' ', (0, jsx_runtime_1.jsx)(index_js_1.Anchor, { href: "https://support.relay.link/en/articles/10517947-fiat-on-ramps", target: "_blank", css: { ml: '1' }, children: "Learn more" })] }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { disabled: !depositAddress || isFetchingQuote, css: { justifyContent: 'center' }, onClick: (e) => {
onAnalyticEvent?.(events_js_1.EventNames.ONRAMP_CTA_CLICKED, {
recipient,
depositAddress,
requestId,
amount,
totalAmount,
ethTotalAmount,
toToken: toToken.address,
toChain: toToken.chainId
});
setStep(OnrampModal_js_1.OnrampStep.Moonpay);
}, children: !depositAddress || isFetchingQuote ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_js_1.LoadingSpinner, { css: { height: 16, width: 16, fill: 'button-disabled-color' } })) : (`Purchase ${fromToken?.symbol} (${fromChain?.displayName})`) })] }));
};
exports.OnrampConfirmingStep = OnrampConfirmingStep;
//# sourceMappingURL=OnrampConfirmingStep.js.map