@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
83 lines • 7.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Anchor, Box, Button, ChainTokenIcon, Flex, Pill, Text } from '../../../../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowUpRightFromSquare, faCheck, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
import { truncateAddress } from '../../../../../utils/truncate.js';
import { OnrampProcessingStep } from '../OnrampModal.js';
import { LoadingSpinner } from '../../../../common/LoadingSpinner.js';
export const OnrampProcessingStepUI = ({ toToken, fromToken, fromChain, toChain, moonpayTxUrl, fillTxHash, fillTxUrl, processingStep, baseTransactionUrl, requestId }) => {
const [delayedMoonpayTx, setDelayedMoonpayTx] = useState(false);
useEffect(() => {
let timer;
if (processingStep === OnrampProcessingStep.Finalizing) {
timer = setTimeout(() => {
setDelayedMoonpayTx(true);
}, 1000 * 60 * 5); //5 minutes
}
return () => {
if (timer) {
setDelayedMoonpayTx(false);
clearTimeout(timer);
}
};
}, [processingStep]);
return (_jsxs(Flex, { direction: "column", css: {
width: '100%',
height: '100%'
}, children: [_jsx(Text, { style: "h6", css: { mb: '4' }, children: "Processing Transaction" }), _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',
mb: '4'
}, children: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
width: 32,
height: 32,
filter: processingStep === OnrampProcessingStep.Relaying
? 'grayscale(1)'
: 'none'
} }), _jsxs(Flex, { css: { gap: '1' }, direction: "column", children: [_jsx(Text, { style: "subtitle1", color: processingStep === OnrampProcessingStep.Relaying
? 'subtle'
: undefined, children: processingStep === OnrampProcessingStep.Relaying
? `Purchased ${fromToken?.symbol}(${fromChain?.displayName}) via your card`
: `Finalizing your purchase of ${fromToken?.symbol}(${fromChain?.displayName}) via your card` }), moonpayTxUrl ? (_jsxs(Anchor, { href: moonpayTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1' }, children: ["Track MoonPay transaction", ' ', _jsx(FontAwesomeIcon, { icon: faUpRightFromSquare, style: { width: 14 } })] })) : null] }), processingStep === OnrampProcessingStep.Relaying ? (_jsx(Box, { css: { color: 'green9', ml: 'auto' }, children: _jsx(FontAwesomeIcon, { icon: faCheck, style: { height: 16 } }) })) : (_jsx(LoadingSpinner, { css: { height: 20, width: 20, fill: 'gray9', ml: 'auto' } }))] }), processingStep === OnrampProcessingStep.Finalizing ? (delayedMoonpayTx ? (_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: '2',
mb: '6px',
gap: '3',
mt: '6px'
}, children: [_jsx(Text, { color: "warning", style: "subtitle2", children: "Looks like its taking longer than expected. Please go to MoonPay to track your transaction." }), _jsxs(Button, { color: "warning", css: {
display: 'flex',
alignItems: 'center',
gap: '2',
justifyContent: 'center'
}, onClick: (e) => {
window.open(moonpayTxUrl, '_blank');
}, children: ["Go to MoonPay", ' ', _jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare, style: { width: 16, height: 16 } })] })] })) : (_jsx(Pill, { radius: "rounded", color: "gray", css: { width: '100%', py: '2', px: '3', mt: '6px' }, children: _jsx(Text, { style: "subtitle2", color: "subtle", children: "It might take a few minutes for the MoonPay transaction to finalize." }) }))) : null, _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, css: {
width: 32,
height: 32,
filter: processingStep === OnrampProcessingStep.Relaying
? 'none'
: 'grayscale(1)'
} }), _jsxs(Flex, { css: { gap: '1' }, direction: "column", children: [_jsx(Text, { style: "subtitle1", color: processingStep === OnrampProcessingStep.Relaying
? undefined
: 'subtle', children: processingStep === OnrampProcessingStep.Relaying
? `Converting to ${toToken?.symbol}(${toChain?.displayName})`
: `Relay converts to ${toToken?.symbol}(${toChain?.displayName})` }), fillTxUrl ? (_jsxs(Anchor, { href: fillTxUrl, target: "_blank", css: { display: 'flex', alignItems: 'center', gap: '1' }, children: ["View Tx: ", truncateAddress(fillTxHash)] })) : null] }), processingStep === OnrampProcessingStep.Relaying ? (_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'gray9', ml: 'auto' } })) : null] })] }), processingStep === OnrampProcessingStep.Relaying ? (_jsxs(Text, { style: "body2", color: "subtle", children: ["Feel free to leave at any time, you can track your progress within the", _jsx(Anchor, { href: `${baseTransactionUrl}/transaction/${requestId}`, target: "_blank", css: { ml: '1' }, children: "transaction page" }), "."] })) : (_jsxs(Text, { style: "subtitle2", color: "subtle", 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" })] }))] }));
};
//# sourceMappingURL=OnrampProcessingStepUI.js.map