@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
85 lines • 6.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DepositAddressModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const DepositAddressModalRenderer_js_1 = require("./DepositAddressModalRenderer.js");
const Modal_js_1 = require("../Modal.js");
const index_js_1 = require("../../primitives/index.js");
const ErrorStep_js_1 = require("./steps/ErrorStep.js");
const events_js_1 = require("../../../constants/events.js");
const SwapSuccessStep_js_1 = require("./steps/SwapSuccessStep.js");
const numbers_js_1 = require("../../../utils/numbers.js");
const quote_js_1 = require("../../../utils/quote.js");
const WaitingForDepositStep_js_1 = require("./steps/WaitingForDepositStep.js");
const DepositAddressValidatingStep_js_1 = require("./steps/DepositAddressValidatingStep.js");
const DepositAddressModal = (depositAddressModalProps) => {
const { open, address, fromChain, fromToken, toToken, recipient, debouncedInputAmountValue, debouncedOutputAmountValue, onOpenChange, invalidateBalanceQueries, onAnalyticEvent, onSuccess } = depositAddressModalProps;
(0, react_1.useEffect)(() => {
onOpenChange(open);
}, [open]);
return ((0, jsx_runtime_1.jsx)(DepositAddressModalRenderer_js_1.DepositAddressModalRenderer, { open: open, fromChain: fromChain, fromToken: fromToken, toToken: toToken, debouncedInputAmountValue: debouncedInputAmountValue, debouncedOutputAmountValue: debouncedOutputAmountValue, address: address, recipient: recipient, invalidateBalanceQueries: invalidateBalanceQueries, onAnalyticEvent: onAnalyticEvent, onSuccess: (quote, executionStatus) => {
const details = quote?.details;
const fees = quote?.fees;
const extraData = {
amount_in: parseFloat(`${details?.currencyIn?.amountFormatted}`),
amount_out: parseFloat(`${details?.currencyOut?.amountFormatted}`)
};
if (fees?.gas?.amountFormatted) {
extraData.gas_fee = parseFloat(fees.gas.amountFormatted);
}
if (fees?.relayer?.amountFormatted) {
extraData.relayer_fee = parseFloat(fees.relayer.amountFormatted);
}
const quoteId = quote
? (0, quote_js_1.extractQuoteId)(quote?.steps)
: undefined;
onAnalyticEvent?.(events_js_1.EventNames.SWAP_SUCCESS, {
...extraData,
chain_id_in: fromToken?.chainId,
currency_in: fromToken?.symbol,
chain_id_out: toToken?.chainId,
currency_out: toToken?.symbol,
quote_id: quoteId,
txHashes: [
...(executionStatus?.inTxHashes ?? []),
...(executionStatus?.txHashes ?? [])
],
steps: quote?.steps
});
onSuccess?.({
steps: quote?.steps,
fees: fees,
details: details
});
}, children: (rendererProps) => {
return ((0, jsx_runtime_1.jsx)(InnerDepositAddressModal, { address: address, onAnalyticEvent: onAnalyticEvent, ...depositAddressModalProps, ...rendererProps }));
} }));
};
exports.DepositAddressModal = DepositAddressModal;
const InnerDepositAddressModal = ({ open, onOpenChange, fromToken, toToken, quote, isFetchingQuote, quoteError, address, swapError, progressStep, allTxHashes, transaction, timeEstimate, fillTime, seconds, fromChain, toChain, recipient, depositAddress, executionStatus, isLoadingTransaction, requestId }) => {
const details = quote?.details;
const fromAmountFormatted = details?.currencyIn?.amount
? (0, numbers_js_1.formatBN)(details?.currencyIn?.amount, 6, fromToken?.decimals, false)
: '';
const toAmountFormatted = details?.currencyOut?.amount
? (0, numbers_js_1.formatBN)(details?.currencyOut.amount, 6, toToken?.decimals, false)
: '';
const isWaitingForDeposit = progressStep === DepositAddressModalRenderer_js_1.TransactionProgressStep.WaitingForDeposit;
return ((0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { trigger: null, open: open, onOpenChange: onOpenChange, css: {
overflow: 'hidden',
p: '4',
maxWidth: '412px !important'
}, showCloseButton: true, onPointerDownOutside: (e) => {
const dynamicModalElements = Array.from(document.querySelectorAll('#dynamic-send-transaction'));
const clickedInsideDynamicModal = dynamicModalElements.some((el) => e.target ? el.contains(e.target) : false);
if (clickedInsideDynamicModal && dynamicModalElements.length > 0) {
e.preventDefault();
}
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: isWaitingForDeposit ? '3' : '4'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", css: { mb: 8 }, children: isWaitingForDeposit ? 'Manual Transfer' : 'Trade Details' }), progressStep === DepositAddressModalRenderer_js_1.TransactionProgressStep.WaitingForDeposit ? ((0, jsx_runtime_1.jsx)(WaitingForDepositStep_js_1.WaitingForDepositStep, { fromToken: fromToken, fromChain: fromChain, fromAmountFormatted: fromAmountFormatted, isFetchingQuote: isFetchingQuote, depositAddress: depositAddress })) : null, progressStep === DepositAddressModalRenderer_js_1.TransactionProgressStep.Validating ? ((0, jsx_runtime_1.jsx)(DepositAddressValidatingStep_js_1.DepositAddressValidatingStep, { status: executionStatus?.status, txHashes: executionStatus?.txHashes ?? [] })) : null, progressStep === DepositAddressModalRenderer_js_1.TransactionProgressStep.Success ? ((0, jsx_runtime_1.jsx)(SwapSuccessStep_js_1.SwapSuccessStep, { fromToken: fromToken, toToken: toToken, fromAmountFormatted: fromAmountFormatted, toAmountFormatted: toAmountFormatted, allTxHashes: allTxHashes, transaction: transaction, fillTime: fillTime, seconds: seconds ?? 0, onOpenChange: onOpenChange, timeEstimate: timeEstimate?.formattedTime, isCanonical: false, details: details, isLoadingTransaction: isLoadingTransaction, requestId: requestId })) : null, progressStep === DepositAddressModalRenderer_js_1.TransactionProgressStep.Error ? ((0, jsx_runtime_1.jsx)(ErrorStep_js_1.ErrorStep, { error: swapError || quoteError, allTxHashes: allTxHashes, address: address, onOpenChange: onOpenChange, transaction: transaction, fromChain: fromChain, toChain: toChain })) : null] }) }));
};
//# sourceMappingURL=DepositAddressModal.js.map