@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
83 lines • 6.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import {} from 'viem';
import { useEffect } from 'react';
import { DepositAddressModalRenderer, TransactionProgressStep } from './DepositAddressModalRenderer.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 {} from '../../../types/index.js';
import { SwapSuccessStep } from './steps/SwapSuccessStep.js';
import { formatBN } from '../../../utils/numbers.js';
import { extractQuoteId } from '../../../utils/quote.js';
import { WaitingForDepositStep } from './steps/WaitingForDepositStep.js';
import { DepositAddressValidatingStep } from './steps/DepositAddressValidatingStep.js';
export const DepositAddressModal = (depositAddressModalProps) => {
const { open, address, fromChain, fromToken, toToken, recipient, debouncedInputAmountValue, debouncedOutputAmountValue, onOpenChange, invalidateBalanceQueries, onAnalyticEvent, onSuccess } = depositAddressModalProps;
useEffect(() => {
onOpenChange(open);
}, [open]);
return (_jsx(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
? extractQuoteId(quote?.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,
quote_id: quoteId,
txHashes: [
...(executionStatus?.inTxHashes ?? []),
...(executionStatus?.txHashes ?? [])
],
steps: quote?.steps
});
onSuccess?.({
steps: quote?.steps,
fees: fees,
details: details
});
}, children: (rendererProps) => {
return (_jsx(InnerDepositAddressModal, { address: address, onAnalyticEvent: onAnalyticEvent, ...depositAddressModalProps, ...rendererProps }));
} }));
};
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
? formatBN(details?.currencyIn?.amount, 6, fromToken?.decimals, false)
: '';
const toAmountFormatted = details?.currencyOut?.amount
? formatBN(details?.currencyOut.amount, 6, toToken?.decimals, false)
: '';
const isWaitingForDeposit = progressStep === TransactionProgressStep.WaitingForDeposit;
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: isWaitingForDeposit ? '3' : '4'
}, children: [_jsx(Text, { style: "h6", css: { mb: 8 }, children: isWaitingForDeposit ? 'Manual Transfer' : 'Trade Details' }), progressStep === TransactionProgressStep.WaitingForDeposit ? (_jsx(WaitingForDepositStep, { fromToken: fromToken, fromChain: fromChain, fromAmountFormatted: fromAmountFormatted, isFetchingQuote: isFetchingQuote, depositAddress: depositAddress })) : null, progressStep === TransactionProgressStep.Validating ? (_jsx(DepositAddressValidatingStep, { status: executionStatus?.status, txHashes: executionStatus?.txHashes ?? [] })) : null, progressStep === TransactionProgressStep.Success ? (_jsx(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 === TransactionProgressStep.Error ? (_jsx(ErrorStep, { error: swapError || quoteError, allTxHashes: allTxHashes, address: address, onOpenChange: onOpenChange, transaction: transaction, fromChain: fromChain, toChain: toChain })) : null] }) }));
};
//# sourceMappingURL=DepositAddressModal.js.map