@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
203 lines • 11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OnrampMoonPayStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../../../../primitives/index.js");
const OnrampModal_js_1 = require("../OnrampModal.js");
const events_js_1 = require("../../../../../constants/events.js");
const chains_1 = require("viem/chains");
const index_js_2 = require("../../../../../hooks/index.js");
const MoonPayBuyWidget = (0, react_1.memo)((0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@moonpay/moonpay-react'))).then((module) => ({
default: module.MoonPayBuyWidget
}))), (a, b) => {
return (window.relayOnrampStep === OnrampModal_js_1.OnrampStep.Moonpay ||
window.relayOnrampProcessingStep ===
OnrampModal_js_1.OnrampProcessingStep.Finalizing);
});
chains_1.arbitrum;
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;
(0, react_1.useEffect)(() => {
if (window) {
;
window.relayOnrampStep = step;
}
return () => {
;
window.relayOnrampStep = undefined;
};
}, [step]);
(0, react_1.useEffect)(() => {
if (window) {
;
window.relayOnrampProcessingStep = processingStep;
}
return () => {
;
window.processingStep = undefined;
};
}, [processingStep]);
(0, react_1.useEffect)(() => {
if (window) {
;
window.relayIsPassthrough = isPassthrough;
}
return () => {
;
window.relayIsPassthrough = undefined;
};
}, [isPassthrough]);
(0, index_js_2.useMoonPayTransaction)(moonPayExternalId, {
apiKey: moonPayApiKey
}, {
enabled: step !== OnrampModal_js_1.OnrampStep.Confirming &&
step !== OnrampModal_js_1.OnrampStep.Error &&
step !== OnrampModal_js_1.OnrampStep.Success,
refetchInterval: (query) => {
let data = query.state.data;
if (data && 'moonPayErrorCode' in data) {
const errorData = data;
if (errorData.moonPayErrorCode != '1_SYS_UNKNOWN') {
onAnalyticEvent?.(events_js_1.EventNames.ONRAMPING_MOONPAY_TX_API_ERROR, {
data,
isPassthrough
});
}
}
else if (data && 'status' in data) {
const responseData = data;
if (responseData?.status === 'failed') {
onAnalyticEvent?.(events_js_1.EventNames.ONRAMPING_MOONPAY_TX_FAILED, {
data,
isPassthrough
});
onError(new Error(`MoonPayTxFailed: ${data.failureReason ?? 'unknown'}`));
return 0;
}
if (responseData?.status === 'completed') {
onAnalyticEvent?.(events_js_1.EventNames.ONRAMPING_MOONPAY_TX_COMPLETE, {
data,
isPassthrough
});
if (step === OnrampModal_js_1.OnrampStep.Processing && !isPassthrough) {
setProcessingStep(OnrampModal_js_1.OnrampProcessingStep.Relaying);
}
else if (isPassthrough && step !== OnrampModal_js_1.OnrampStep.Success) {
setProcessingStep(undefined);
onPassthroughSuccess();
}
return 0;
}
if (responseData?.id && responseData?.status === 'pending') {
if (step === OnrampModal_js_1.OnrampStep.Moonpay) {
if (!isPassthrough) {
setStep(OnrampModal_js_1.OnrampStep.Processing);
setProcessingStep(OnrampModal_js_1.OnrampProcessingStep.Finalizing);
return 0;
}
else {
setStep(OnrampModal_js_1.OnrampStep.ProcessingPassthrough);
}
}
}
}
return 2000;
}
});
return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", id: "onramp-moonpay-step", css: {
width: '100%',
height: '100%',
position: step === OnrampModal_js_1.OnrampStep.Moonpay ? undefined : 'fixed',
top: step === OnrampModal_js_1.OnrampStep.Moonpay ? undefined : '-100%'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", css: { mb: '2' }, children: !isPassthrough
? `Buy ${toToken?.symbol} (${toChain?.displayName})`
: 'Checkout' }), !isPassthrough ? ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsxs)(index_js_1.Box, { css: { position: 'relative', width: 48, height: 52, flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: {
width: 32,
height: 32,
position: 'absolute',
top: 0,
right: 0,
zIndex: 1
} }), (0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
width: 32,
height: 32,
position: 'absolute',
bottom: 0,
left: 0
} })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", children: ["Purchase ", fromToken?.symbol, " (", fromChain?.displayName, ") via your card for Relay to convert to ", toToken?.symbol, " (", toChain?.displayName, ")"] })] })) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", {}), children: (0, jsx_runtime_1.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?.(events_js_1.EventNames.ONRAMPING_MOONPAY_TX_START, {
...props,
isPassthrough: window.relayIsPassthrough
});
if (window &&
window.relayOnrampStep === OnrampModal_js_1.OnrampStep.Moonpay) {
if (!window.relayIsPassthrough) {
setStep(OnrampModal_js_1.OnrampStep.Processing);
setProcessingStep(OnrampModal_js_1.OnrampProcessingStep.Finalizing);
}
else {
setStep(OnrampModal_js_1.OnrampStep.ProcessingPassthrough);
}
}
}, onTransactionCompleted: async (props) => {
onAnalyticEvent?.(events_js_1.EventNames.ONRAMPING_MOONPAY_TX_COMPLETE, {
...props,
isPassthrough: window.relayIsPassthrough
});
if (window &&
window.relayOnrampStep === OnrampModal_js_1.OnrampStep.Processing &&
!window.relayIsPassthrough) {
setProcessingStep(OnrampModal_js_1.OnrampProcessingStep.Relaying);
}
else if (window &&
window.relayIsPassthrough &&
window.relayOnrampStep !== OnrampModal_js_1.OnrampStep.Success) {
setProcessingStep(undefined);
onPassthroughSuccess();
}
} }) })] }));
};
exports.OnrampMoonPayStep = OnrampMoonPayStep;
//# sourceMappingURL=OnrampMoonPayStep.js.map