@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
80 lines • 5.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import {} from 'react';
import { Box, Button, Flex, Text } from '../../../primitives/index.js';
import { motion } from 'framer-motion';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
import ErrorWell from '../../ErrorWell.js';
import {} from 'viem';
import {} from '../TransactionModalRenderer.js';
import { useRelayClient } from '../../../../hooks/index.js';
import { faCircleXmark, faRotateRight } from '@fortawesome/free-solid-svg-icons/index.js';
import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js';
import { JSONToError } from '../../../../utils/errors.js';
import { TransactionsByChain } from './TransactionsByChain.js';
import RefundReason from '../../../common/RefundReason.js';
export const ErrorStep = ({ error, address, allTxHashes, transaction, fromChain, toChain, onOpenChange }) => {
const parsedError = JSONToError(error);
const errorMessage = transaction?.data?.failReason ?? parsedError?.message;
const isRefund = errorMessage?.toLowerCase()?.includes('refunded') ||
transaction?.status === 'refund';
const hasTxHashes = allTxHashes && allTxHashes.length > 0;
const isSolverStatusTimeout = parsedError?.message?.includes('solver status check');
const relayClient = useRelayClient();
const baseTransactionUrl = relayClient?.baseApiUrl.includes('testnets')
? 'https://testnets.relay.link'
: 'https://relay.link';
const depositTx = allTxHashes ? allTxHashes[0] : undefined;
const depositTxUrl = getTxBlockExplorerUrl(depositTx?.chainId, relayClient?.chains, depositTx?.txHash);
let fillTx = allTxHashes && allTxHashes.length > 1
? allTxHashes[allTxHashes.length - 1]
: undefined;
if (transaction &&
transaction.status === 'refund' &&
transaction.data?.outTxs) {
fillTx = {
txHash: transaction.data.outTxs[0].hash,
chainId: transaction.data.outTxs[0].chainId
};
}
const fillTxUrl = getTxBlockExplorerUrl(fillTx?.chainId, relayClient?.chains, fillTx?.txHash);
const mergedError = isRefund && errorMessage ? new Error(errorMessage) : parsedError;
const refundDetails = transaction?.data?.refundCurrencyData;
const refundChain = transaction?.data?.refundCurrencyData?.currency?.chainId
? relayClient?.chains.find((chain) => chain.id === transaction.data?.refundCurrencyData?.currency?.chainId)
: null;
return (_jsxs(Flex, { direction: "column", align: "center", justify: "between", css: { width: '100%' }, children: [_jsxs(motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: {
type: 'spring',
stiffness: 260,
damping: 20
}, children: [isRefund ? (_jsx(Box, { css: { color: 'gray9', mr: '$2' }, children: _jsx(FontAwesomeIcon, { icon: faRotateRight, style: { height: 40 } }) })) : null, !isRefund && isSolverStatusTimeout ? (_jsx(Box, { css: { color: 'amber9', mr: '$2' }, children: _jsx(FontAwesomeIcon, { icon: faCircleExclamation, style: { height: 40 } }) })) : null, !isRefund && !isSolverStatusTimeout ? (_jsx(Box, { css: { color: 'red9', mr: '$2' }, children: _jsx(FontAwesomeIcon, { icon: faCircleXmark, style: { height: 40 } }) })) : null] }), isRefund ? (_jsxs(Text, { style: "subtitle2", css: { my: '4', textAlign: 'center' }, children: [_jsx(RefundReason, { reasonCode: transaction?.data?.failReason }), refundDetails
? `We’ve
refunded ${refundDetails.amountFormatted} ${refundDetails.currency?.symbol} on ${refundChain?.displayName}.`
: `We apologize for the inconvenience, a refund has been sent to your wallet address.`] })) : (_jsx(ErrorWell, { error: mergedError, hasTxHashes: hasTxHashes, fromChain: fromChain })), depositTx || fillTx ? (_jsxs(_Fragment, { children: [_jsx(Flex, { direction: "column", css: {
p: '3',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
gap: '3',
width: '100%',
borderRadius: 12,
mb: 24
}, children: _jsx(TransactionsByChain, { allTxHashes: allTxHashes, fromChain: fromChain, toChain: toChain, isSolverStatusTimeout: isSolverStatusTimeout, refundData: refundDetails }) }), _jsxs(Flex, { css: { gap: '3', width: '100%' }, children: [_jsx(Button, { color: "secondary", onClick: () => {
window.open(depositTx
? `${baseTransactionUrl}/transaction/${depositTx.txHash}`
: `${baseTransactionUrl}/transactions?address=${address}`, '_blank');
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "View Details" }), _jsx(Button, { onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" })] })] })) : (_jsx(Button, { onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" }))] }));
};
//# sourceMappingURL=ErrorStep.js.map