@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
176 lines • 9.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { lazy, memo, Suspense, useEffect } from 'react';
import { Box, ChainTokenIcon, Flex, Text } from '../../../../primitives/index.js';
import { OnrampProcessingStep, OnrampStep } from '../OnrampModal.js';
import { EventNames } from '../../../../../constants/events.js';
import { arbitrum } from 'viem/chains';
import { useMoonPayTransaction } from '../../../../../hooks/index.js';
const MoonPayBuyWidget = memo(lazy(() => import('@moonpay/moonpay-react').then((module) => ({
default: module.MoonPayBuyWidget
}))), (a, b) => {
return (window.relayOnrampStep === OnrampStep.Moonpay ||
window.relayOnrampProcessingStep ===
OnrampProcessingStep.Finalizing);
});
arbitrum;
export const OnrampMoonPayStep = ({ step, processingStep, toToken, fromToken, fromChain, toChain, depositAddress, recipient, totalAmount, fiatCurrency, isPassthrough, moonPayCurrencyCode, moonPayThemeId, moonPayThemeMode, quoteRequestId, moonPayApiKey, passthroughExternalId, onAnalyticEvent, setStep, setProcessingStep, setMoonPayRequestId, moonpayOnUrlSignatureRequested, onPassthroughSuccess, onError }) => {
const moonPayExternalId = !isPassthrough
? (quoteRequestId ?? undefined)
: passthroughExternalId;
useEffect(() => {
if (window) {
;
window.relayOnrampStep = step;
}
return () => {
;
window.relayOnrampStep = undefined;
};
}, [step]);
useEffect(() => {
if (window) {
;
window.relayOnrampProcessingStep = processingStep;
}
return () => {
;
window.processingStep = undefined;
};
}, [processingStep]);
useEffect(() => {
if (window) {
;
window.relayIsPassthrough = isPassthrough;
}
return () => {
;
window.relayIsPassthrough = undefined;
};
}, [isPassthrough]);
useMoonPayTransaction(moonPayExternalId, {
apiKey: moonPayApiKey
}, {
enabled: step !== OnrampStep.Confirming &&
step !== OnrampStep.Error &&
step !== OnrampStep.Success,
refetchInterval: (query) => {
let data = query.state.data;
if (data && 'moonPayErrorCode' in data) {
const errorData = data;
if (errorData.moonPayErrorCode != '1_SYS_UNKNOWN') {
onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_API_ERROR, {
data,
isPassthrough
});
}
}
else if (data && 'status' in data) {
const responseData = data;
if (responseData?.status === 'failed') {
onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_FAILED, {
data,
isPassthrough
});
onError(new Error(`MoonPayTxFailed: ${data.failureReason ?? 'unknown'}`));
return 0;
}
if (responseData?.status === 'completed') {
onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_COMPLETE, {
data,
isPassthrough
});
if (step === OnrampStep.Processing && !isPassthrough) {
setProcessingStep(OnrampProcessingStep.Relaying);
}
else if (isPassthrough && step !== OnrampStep.Success) {
setProcessingStep(undefined);
onPassthroughSuccess();
}
return 0;
}
if (responseData?.id && responseData?.status === 'pending') {
if (step === OnrampStep.Moonpay) {
if (!isPassthrough) {
setStep(OnrampStep.Processing);
setProcessingStep(OnrampProcessingStep.Finalizing);
return 0;
}
else {
setStep(OnrampStep.ProcessingPassthrough);
}
}
}
}
return 2000;
}
});
return (_jsxs(Flex, { direction: "column", id: "onramp-moonpay-step", css: {
width: '100%',
height: '100%',
position: step === OnrampStep.Moonpay ? undefined : 'fixed',
top: step === OnrampStep.Moonpay ? undefined : '-100%'
}, children: [_jsx(Text, { style: "h6", css: { mb: '2' }, children: !isPassthrough
? `Buy ${toToken?.symbol} (${toChain?.displayName})`
: 'Checkout' }), !isPassthrough ? (_jsxs(Flex, { align: "center", css: {
width: '100%',
overflow: 'hidden',
borderRadius: 'widget-card-border-radius',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
p: '4',
gap: 2,
mb: '2'
}, children: [_jsxs(Box, { css: { position: 'relative', width: 48, height: 52, flexShrink: 0 }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: {
width: 32,
height: 32,
position: 'absolute',
top: 0,
right: 0,
zIndex: 1
} }), _jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
width: 32,
height: 32,
position: 'absolute',
bottom: 0,
left: 0
} })] }), _jsxs(Text, { style: "subtitle2", children: ["Purchase ", fromToken?.symbol, " (", fromChain?.displayName, ") via your card for Relay to convert to ", toToken?.symbol, " (", toChain?.displayName, ")"] })] })) : null, _jsx(Suspense, { fallback: _jsx("div", {}), children: _jsx(MoonPayBuyWidget, { variant: "embedded", baseCurrencyCode: fiatCurrency.code, quoteCurrencyAmount: `${totalAmount}`, lockAmount: "true", currencyCode: moonPayCurrencyCode, paymentMethod: "credit_debit_card", walletAddress: !isPassthrough ? depositAddress : recipient, themeId: moonPayThemeId, theme: moonPayThemeMode, externalTransactionId: moonPayExternalId, showWalletAddressForm: "false", visible: true, style: {
margin: 0,
width: '100%',
border: 'none',
height: 500,
overflowY: 'scroll'
}, onUrlSignatureRequested: moonpayOnUrlSignatureRequested, onTransactionCreated: async (props) => {
setMoonPayRequestId(props.id);
onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_START, {
...props,
isPassthrough: window.relayIsPassthrough
});
if (window &&
window.relayOnrampStep === OnrampStep.Moonpay) {
if (!window.relayIsPassthrough) {
setStep(OnrampStep.Processing);
setProcessingStep(OnrampProcessingStep.Finalizing);
}
else {
setStep(OnrampStep.ProcessingPassthrough);
}
}
}, onTransactionCompleted: async (props) => {
onAnalyticEvent?.(EventNames.ONRAMPING_MOONPAY_TX_COMPLETE, {
...props,
isPassthrough: window.relayIsPassthrough
});
if (window &&
window.relayOnrampStep === OnrampStep.Processing &&
!window.relayIsPassthrough) {
setProcessingStep(OnrampProcessingStep.Relaying);
}
else if (window &&
window.relayIsPassthrough &&
window.relayOnrampStep !== OnrampStep.Success) {
setProcessingStep(undefined);
onPassthroughSuccess();
}
} }) })] }));
};
//# sourceMappingURL=OnrampMoonPayStep.js.map