@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
136 lines • 6.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TransactionModalRenderer = exports.TransactionProgressStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const relayTransaction_js_1 = require("../../../utils/relayTransaction.js");
const relay_kit_hooks_1 = require("@reservoir0x/relay-kit-hooks");
const index_js_1 = require("../../../hooks/index.js");
const quote_js_1 = require("../../../utils/quote.js");
var TransactionProgressStep;
(function (TransactionProgressStep) {
TransactionProgressStep[TransactionProgressStep["Confirmation"] = 0] = "Confirmation";
TransactionProgressStep[TransactionProgressStep["Success"] = 1] = "Success";
TransactionProgressStep[TransactionProgressStep["Error"] = 2] = "Error";
})(TransactionProgressStep || (exports.TransactionProgressStep = TransactionProgressStep = {}));
const TransactionModalRenderer = ({ open, address, fromToken, toToken, slippageTolerance, wallet, steps, quote, swapError, setSwapError, children, onSuccess, onValidating }) => {
const relayClient = (0, index_js_1.useRelayClient)();
const [progressStep, setProgressStep] = (0, react_1.useState)(TransactionProgressStep.Confirmation);
const [currentStep, setCurrentStep] = (0, react_1.useState)();
const [currentStepItem, setCurrentStepItem] = (0, react_1.useState)();
const [allTxHashes, setAllTxHashes] = (0, react_1.useState)([]);
const [startTimestamp, setStartTimestamp] = (0, react_1.useState)(0);
const [waitingForSteps, setWaitingForSteps] = (0, react_1.useState)(false);
const [hasStartedValidation, setHasStartedValidation] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
if (!open) {
setHasStartedValidation(false);
}
}, [open]);
(0, react_1.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;
}
}
if (currentStep && currentStepItem)
break;
}
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 = (0, react_1.useMemo)(() => (0, relayTransaction_js_1.extractDepositRequestId)(steps), [steps]);
const { data: transactions, isInitialLoading: isLoadingTransaction } = (0, relay_kit_hooks_1.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 } = (0, relayTransaction_js_1.calculateFillTime)(transaction);
const { fillTime: executionTime, seconds: executionTimeSeconds } = (0, relayTransaction_js_1.calculateExecutionTime)(Math.floor(startTimestamp / 1000), transaction);
const isAutoSlippage = slippageTolerance === undefined;
const timeEstimate = (0, quote_js_1.calculatePriceTimeEstimate)(quote?.details);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.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
}) }));
};
exports.TransactionModalRenderer = TransactionModalRenderer;
//# sourceMappingURL=TransactionModalRenderer.js.map