@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
120 lines • 7.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import {} from 'viem';
import { useEffect } from 'react';
import { TransactionModalRenderer, TransactionProgressStep } from './TransactionModalRenderer.js';
import { Modal } from '../Modal.js';
import { Flex, Text } from '../../primitives/index.js';
import { ErrorStep } from './steps/ErrorStep.js';
import { EventNames } from '../../../constants/events.js';
import { SwapConfirmationStep } from './steps/SwapConfirmationStep.js';
import {} from '../../../types/index.js';
import { SwapSuccessStep } from './steps/SwapSuccessStep.js';
import { formatBN } from '../../../utils/numbers.js';
import { extractQuoteId } from '../../../utils/quote.js';
export const TransactionModal = (transactionModalProps) => {
const { quote, steps, swapError, setSwapError, open, address, fromToken, toToken, useExternalLiquidity, slippageTolerance, isCanonical, wallet, onOpenChange, onAnalyticEvent, onSuccess, onSwapValidating } = transactionModalProps;
useEffect(() => {
onOpenChange(open);
}, [open]);
return (_jsx(TransactionModalRenderer, { open: open, fromToken: fromToken, toToken: toToken, quote: quote, steps: steps, swapError: swapError, setSwapError: setSwapError, slippageTolerance: slippageTolerance, address: address, wallet: wallet, onValidating: (quote) => {
const steps = quote?.steps;
const details = quote?.details;
const fees = quote?.fees;
onSwapValidating?.({
steps: steps,
fees: fees,
details: details
});
}, onSuccess: (quote, steps) => {
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 = steps ? extractQuoteId(steps) : undefined;
onAnalyticEvent?.(EventNames.SWAP_SUCCESS, {
...extraData,
chain_id_in: fromToken?.chainId,
currency_in: fromToken?.symbol,
chain_id_out: toToken?.chainId,
currency_out: toToken?.symbol,
currency_in_usd: details?.currencyIn?.amountUsd,
currency_out_usd: details?.currencyOut?.amountUsd,
is_canonical: useExternalLiquidity,
quote_id: quoteId,
txHashes: steps
?.map((step) => {
let txHashes = [];
step.items?.forEach((item) => {
if (item.txHashes) {
txHashes = txHashes.concat([
...(item.txHashes ?? []),
...(item.internalTxHashes ?? [])
]);
}
});
return txHashes;
})
.flat(),
steps
});
onSuccess?.({
steps: steps,
fees: fees,
details: details
});
}, children: (rendererProps) => {
return (_jsx(InnerTransactionModal, { address: address, onAnalyticEvent: onAnalyticEvent, isCanonical: isCanonical, ...transactionModalProps, ...rendererProps }));
} }));
};
const InnerTransactionModal = ({ open, onOpenChange, fromToken, toToken, quote, address, swapError, setSwapError, progressStep, setProgressStep, steps, setSteps, currentStep, setCurrentStep, setCurrentStepItem, allTxHashes, setAllTxHashes, transaction, executionTime, executionTimeSeconds, setStartTimestamp, onAnalyticEvent, timeEstimate, isCanonical, fromChain, toChain, isLoadingTransaction, setQuote, requestId }) => {
useEffect(() => {
if (!open) {
if (currentStep) {
onAnalyticEvent?.(EventNames.SWAP_MODAL_CLOSED);
}
setCurrentStep(null);
setCurrentStepItem(null);
setAllTxHashes([]);
setStartTimestamp(0);
setSwapError(null);
setSteps(null);
setQuote(null);
}
else {
setProgressStep(TransactionProgressStep.Confirmation);
onAnalyticEvent?.(EventNames.SWAP_MODAL_OPEN);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
const details = quote?.details;
const fromAmountFormatted = details?.currencyIn?.amount
? formatBN(details?.currencyIn?.amount, 6, fromToken?.decimals, false)
: '';
const toAmountFormatted = details?.currencyOut?.amount
? formatBN(details?.currencyOut.amount, 6, toToken?.decimals, false)
: '';
return (_jsx(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: _jsxs(Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '3'
}, children: [_jsx(Text, { style: "h6", css: { mb: 8 }, children: "Transaction Details" }), progressStep === TransactionProgressStep.Confirmation ? (_jsx(SwapConfirmationStep, { fromToken: fromToken, toToken: toToken, fromChain: fromChain, toChain: toChain, fromAmountFormatted: fromAmountFormatted, toAmountFormatted: toAmountFormatted, quote: quote, steps: steps })) : null, progressStep === TransactionProgressStep.Success ? (_jsx(SwapSuccessStep, { fromToken: fromToken, toToken: toToken, fromAmountFormatted: fromAmountFormatted, toAmountFormatted: toAmountFormatted, allTxHashes: allTxHashes, transaction: transaction, fillTime: executionTime ?? '', seconds: executionTimeSeconds ?? 0, onOpenChange: onOpenChange, timeEstimate: timeEstimate?.formattedTime, isCanonical: isCanonical, details: details, isLoadingTransaction: isLoadingTransaction, requestId: requestId })) : null, progressStep === TransactionProgressStep.Error ? (_jsx(ErrorStep, { error: swapError, allTxHashes: allTxHashes, address: address, onOpenChange: onOpenChange, transaction: transaction, fromChain: fromChain, toChain: toChain })) : null] }) }));
};
//# sourceMappingURL=TransactionModal.js.map