@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
135 lines • 5.89 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useState, useEffect } from 'react';
import {} from 'viem';
import {} from '@reservoir0x/relay-sdk';
import { calculateExecutionTime, calculateFillTime, extractDepositRequestId } from '../../../utils/relayTransaction.js';
import { useRequests } from '@reservoir0x/relay-kit-hooks';
import { useRelayClient } from '../../../hooks/index.js';
import { calculatePriceTimeEstimate } from '../../../utils/quote.js';
export var TransactionProgressStep;
(function (TransactionProgressStep) {
TransactionProgressStep[TransactionProgressStep["Confirmation"] = 0] = "Confirmation";
TransactionProgressStep[TransactionProgressStep["Success"] = 1] = "Success";
TransactionProgressStep[TransactionProgressStep["Error"] = 2] = "Error";
})(TransactionProgressStep || (TransactionProgressStep = {}));
export const TransactionModalRenderer = ({ open, address, fromToken, toToken, slippageTolerance, wallet, steps, quote, swapError, setSwapError, children, onSuccess, onValidating }) => {
const relayClient = useRelayClient();
const [progressStep, setProgressStep] = useState(TransactionProgressStep.Confirmation);
const [currentStep, setCurrentStep] = useState();
const [currentStepItem, setCurrentStepItem] = useState();
const [allTxHashes, setAllTxHashes] = useState([]);
const [startTimestamp, setStartTimestamp] = useState(0);
const [waitingForSteps, setWaitingForSteps] = useState(false);
const [hasStartedValidation, setHasStartedValidation] = useState(false);
useEffect(() => {
if (!open) {
setHasStartedValidation(false);
}
}, [open]);
useEffect(() => {
if (swapError) {
setProgressStep(TransactionProgressStep.Error);
return;
}
if (!steps) {
return;
}
const executableSteps = steps.filter((step) => step.items && step.items.length > 0);
let stepCount = executableSteps.length;
let txHashes = [];
let currentStep = null;
let currentStepItem;
for (const step of executableSteps) {
for (const item of step.items || []) {
if (item.txHashes && item.txHashes.length > 0) {
txHashes = item.txHashes.concat([...txHashes]);
}
if (item.internalTxHashes && item.internalTxHashes.length > 0) {
txHashes = item.internalTxHashes.concat([...txHashes]);
}
if (item.status === 'incomplete') {
currentStep = step;
currentStepItem = item;
break; // Exit the inner loop once the first incomplete item is found
}
}
if (currentStep && currentStepItem)
break; // Exit the outer loop if the current step and item have been found
}
setAllTxHashes(txHashes);
if (!hasStartedValidation &&
(txHashes.length > 0 || currentStepItem?.isValidatingSignature == true) &&
progressStep === TransactionProgressStep.Confirmation) {
onValidating?.(quote);
setStartTimestamp(new Date().getTime());
setHasStartedValidation(true);
}
if (!currentStep) {
currentStep = executableSteps[stepCount - 1];
}
setCurrentStep(currentStep);
setCurrentStepItem(currentStepItem);
if (steps.every((step) => !step.items ||
step.items.length == 0 ||
step.items?.every((item) => item.status === 'complete')) &&
progressStep !== TransactionProgressStep.Success) {
setProgressStep(TransactionProgressStep.Success);
onSuccess?.(quote, steps);
}
}, [steps, swapError]);
const requestId = useMemo(() => extractDepositRequestId(steps), [steps]);
// Fetch Success Tx
const { data: transactions, isInitialLoading: isLoadingTransaction } = useRequests((progressStep === TransactionProgressStep.Success ||
progressStep === TransactionProgressStep.Error) &&
requestId
? { id: requestId }
: undefined, relayClient?.baseApiUrl, {
enabled: (progressStep === TransactionProgressStep.Success ||
progressStep === TransactionProgressStep.Error) &&
(requestId || allTxHashes[0])
? true
: false,
refetchInterval(query) {
if (query.state.dataUpdateCount > 10) {
return 0;
}
if (!query.state.data?.pages[0].requests?.[0]) {
return 2500;
}
return 0;
}
});
const transaction = transactions[0];
const { fillTime, seconds } = calculateFillTime(transaction);
const { fillTime: executionTime, seconds: executionTimeSeconds } = calculateExecutionTime(Math.floor(startTimestamp / 1000), transaction);
const isAutoSlippage = slippageTolerance === undefined;
const timeEstimate = calculatePriceTimeEstimate(quote?.details);
return (_jsx(_Fragment, { children: children({
wallet,
progressStep,
setProgressStep,
currentStep,
setCurrentStep,
currentStepItem,
setCurrentStepItem,
quote,
steps,
waitingForSteps,
swapError,
setSwapError,
allTxHashes,
setAllTxHashes,
transaction,
fillTime,
seconds,
executionTime,
executionTimeSeconds,
startTimestamp,
setStartTimestamp,
requestId,
isLoadingTransaction,
isAutoSlippage,
timeEstimate
}) }));
};
//# sourceMappingURL=TransactionModalRenderer.js.map