@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
82 lines • 6.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorStep = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../../primitives/index.js");
const framer_motion_1 = require("framer-motion");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const faCircleExclamation_1 = require("@fortawesome/free-solid-svg-icons/faCircleExclamation");
const ErrorWell_js_1 = tslib_1.__importDefault(require("../../ErrorWell.js"));
const index_js_2 = require("../../../../hooks/index.js");
const index_js_3 = require("@fortawesome/free-solid-svg-icons/index.js");
const getTxBlockExplorerUrl_js_1 = require("../../../../utils/getTxBlockExplorerUrl.js");
const errors_js_1 = require("../../../../utils/errors.js");
const TransactionsByChain_js_1 = require("./TransactionsByChain.js");
const RefundReason_js_1 = tslib_1.__importDefault(require("../../../common/RefundReason.js"));
const ErrorStep = ({ error, address, allTxHashes, transaction, fromChain, toChain, onOpenChange }) => {
const parsedError = (0, errors_js_1.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 = (0, index_js_2.useRelayClient)();
const baseTransactionUrl = relayClient?.baseApiUrl.includes('testnets')
? 'https://testnets.relay.link'
: 'https://relay.link';
const depositTx = allTxHashes ? allTxHashes[0] : undefined;
const depositTxUrl = (0, getTxBlockExplorerUrl_js_1.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 = (0, getTxBlockExplorerUrl_js_1.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 ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "center", justify: "between", css: { width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: {
type: 'spring',
stiffness: 260,
damping: 20
}, children: [isRefund ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9', mr: '$2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: index_js_3.faRotateRight, style: { height: 40 } }) })) : null, !isRefund && isSolverStatusTimeout ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber9', mr: '$2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faCircleExclamation_1.faCircleExclamation, style: { height: 40 } }) })) : null, !isRefund && !isSolverStatusTimeout ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'red9', mr: '$2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: index_js_3.faCircleXmark, style: { height: 40 } }) })) : null] }), isRefund ? ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", css: { my: '4', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(RefundReason_js_1.default, { 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.`] })) : ((0, jsx_runtime_1.jsx)(ErrorWell_js_1.default, { error: mergedError, hasTxHashes: hasTxHashes, fromChain: fromChain })), depositTx || fillTx ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.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: (0, jsx_runtime_1.jsx)(TransactionsByChain_js_1.TransactionsByChain, { allTxHashes: allTxHashes, fromChain: fromChain, toChain: toChain, isSolverStatusTimeout: isSolverStatusTimeout, refundData: refundDetails }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '3', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "secondary", onClick: () => {
window.open(depositTx
? `${baseTransactionUrl}/transaction/${depositTx.txHash}`
: `${baseTransactionUrl}/transactions?address=${address}`, '_blank');
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "View Details" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" })] })] })) : ((0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" }))] }));
};
exports.ErrorStep = ErrorStep;
//# sourceMappingURL=ErrorStep.js.map