@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
38 lines • 3.32 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Anchor, Box, Button, ChainTokenIcon, Flex, Text } from '../../../../primitives/index.js';
import { OnrampStep } from '../OnrampModal.js';
import { LoadingSpinner } from '../../../../common/LoadingSpinner.js';
import { EventNames } from '../../../../../constants/events.js';
export const OnrampConfirmingStep = ({ toToken, fromToken, fromChain, toChain, requestId, depositAddress, recipient, amount, totalAmount, ethTotalAmount, isFetchingQuote, onAnalyticEvent, setStep }) => {
return (_jsxs(Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '4'
}, children: [_jsxs(Text, { style: "h6", children: ["Buy ", toToken?.symbol, " (", toChain?.displayName, ")"] }), _jsxs(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: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol }), _jsxs(Text, { style: "subtitle1", children: ["You'll purchase ", fromToken?.symbol, " (", fromChain?.displayName, ") via your card"] })] }), _jsx(Box, { css: {
height: 24,
width: 1,
background: 'gray5',
my: '5px',
ml: 4
} }), _jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol }), _jsxs(Text, { style: "subtitle1", children: ["Relay converts to ", toToken?.symbol, " (", toChain?.displayName, ")"] })] })] }), _jsxs(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, ").", ' ', _jsx(Anchor, { href: "https://support.relay.link/en/articles/10517947-fiat-on-ramps", target: "_blank", css: { ml: '1' }, children: "Learn more" })] }), _jsx(Button, { disabled: !depositAddress || isFetchingQuote, css: { justifyContent: 'center' }, onClick: (e) => {
onAnalyticEvent?.(EventNames.ONRAMP_CTA_CLICKED, {
recipient,
depositAddress,
requestId,
amount,
totalAmount,
ethTotalAmount,
toToken: toToken.address,
toChain: toToken.chainId
});
setStep(OnrampStep.Moonpay);
}, children: !depositAddress || isFetchingQuote ? (_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'button-disabled-color' } })) : (`Purchase ${fromToken?.symbol} (${fromChain?.displayName})`) })] }));
};
//# sourceMappingURL=OnrampConfirmingStep.js.map