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