@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
153 lines • 9.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import {} from '@reservoir0x/relay-sdk';
import { isDeadAddress, tronDeadAddress } from '@reservoir0x/relay-sdk';
import {} from 'react';
import { Box, Flex, Text } from '../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
import {} from '../../constants/currencies.js';
import Tooltip from '../primitives/Tooltip.js';
import { useMediaQuery } from 'usehooks-ts';
export const WidgetErrorWell = ({ error, hasInsufficientBalance, quote, currency, relayerFeeProportion, isHighRelayerServiceFee, isCapacityExceededError, isCouldNotExecuteError, supportsExternalLiquidity, containerCss, recipientWalletSupportsChain, recipient, toChainWalletVMSupported, recipientLinkedWallet, toChainVmType }) => {
const isSmallDevice = useMediaQuery('(max-width: 600px)');
const fetchQuoteErrorMessage = error
? error?.response?.data?.message
? error?.response?.data.message === 'processing response error'
? 'Amount is higher than the available liquidity.'
: error?.response?.data.message
: 'Unknown Error'
: null;
const isHighPriceImpact = Number(quote?.details?.totalImpact?.percent) < -3.5;
const totalImpactUsd = quote?.details?.totalImpact?.usd;
const showHighPriceImpactWarning = isHighPriceImpact && totalImpactUsd && Number(totalImpactUsd) <= -10;
const isInsufficientLiquidityError = fetchQuoteErrorMessage?.includes('No quotes found');
const isMissingUsdTokenPrice = quote?.details?.currencyOut &&
(quote?.details?.currencyOut?.amountUsd === undefined ||
quote?.details?.currencyOut?.amountUsd === '0');
const isNoAvailableRoutesError = error?.response?.data?.errorCode === 'NO_SWAP_ROUTES_FOUND' ||
error?.response?.data?.errorCode === 'UNSUPPORTED_ROUTE';
if (isInsufficientLiquidityError || isNoAvailableRoutesError) {
return null;
}
/*
* Show wallet incompatibility warning when:
* • Wallet doesn't support destination chain
* • Valid recipient address (not dead/burn address)
* • Destination chain supports wallet's VM type
* • Wallet VM type matches destination chain VM
*/
if (!recipientWalletSupportsChain &&
recipient &&
!isDeadAddress(recipient) &&
recipient !== tronDeadAddress &&
toChainWalletVMSupported &&
(!recipientLinkedWallet || recipientLinkedWallet.vmType === toChainVmType)) {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
p: '3',
backgroundColor: 'amber2',
'--borderColor': 'colors.amber4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'amber9' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsx(Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Your selected wallet doesn't support the destination chain. Please choose a different wallet." })] }));
}
if (fetchQuoteErrorMessage && !quote) {
if (isCapacityExceededError && supportsExternalLiquidity && currency) {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
p: '3',
backgroundColor: 'amber2',
'--borderColor': 'colors.amber4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'amber9' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsx(Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Due to high demand the input amount can only be bridged natively. Reduce the amount to bridge instantly or switch to the native route for unlimited capacity." })] }));
}
else if (supportsExternalLiquidity &&
isCouldNotExecuteError &&
currency) {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
p: '3',
backgroundColor: 'red2',
'--borderColor': 'colors.red4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'red10' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsxs(Text, { style: "subtitle3", css: { color: 'red12' }, children: [fetchQuoteErrorMessage, " Please switch to the native route."] })] }));
}
else {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
p: '3',
backgroundColor: 'red2',
'--borderColor': 'colors.red4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'red10' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsx(Text, { style: "subtitle3", css: { color: 'red12' }, children: fetchQuoteErrorMessage })] }));
}
}
if (hasInsufficientBalance) {
return null;
}
if (relayerFeeProportion && relayerFeeProportion >= 40n) {
return (_jsx(Tooltip, { side: isSmallDevice ? 'top' : 'right', content: _jsx(Text, { style: "subtitle3", css: { maxWidth: 215, display: 'inline-block' }, children: "We recommend increasing the amount or waiting for the gas fee to be lower." }), children: _jsxs(Flex, { align: "center", css: {
gap: '2',
py: '3',
px: '3',
backgroundColor: 'amber2',
'--borderColor': 'colors.amber4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'amber10' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsx(Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Fees exceed 40% of the received amount." })] }) }));
}
if (showHighPriceImpactWarning) {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
py: '2',
px: '3',
backgroundColor: 'amber2',
'--borderColor': 'colors.amber4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'amber10' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsxs(Text, { style: "subtitle3", css: { color: 'amber12' }, children: ["The price impact is currently high (", quote?.details?.totalImpact?.percent, "%)."] })] }));
}
if (isMissingUsdTokenPrice) {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
py: '2',
px: '3',
backgroundColor: 'amber2',
'--borderColor': 'colors.amber4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'amber10' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsx(Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Unable to detect token price. Please confirm expected output before submitting." })] }));
}
if (isHighRelayerServiceFee) {
return (_jsxs(Flex, { align: "center", css: {
gap: '2',
py: '3',
px: '3',
backgroundColor: 'amber2',
'--borderColor': 'colors.amber4',
border: '1px solid var(--borderColor)',
borderRadius: 12,
mb: '3',
...containerCss
}, id: 'widget-error-well-section', children: [_jsx(Box, { css: { color: 'amber10' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationCircle, width: 16 }) }), _jsx(Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Due to high demand, Relayer fees have temporarily been increased." })] }));
}
return null;
};
//# sourceMappingURL=WidgetErrorWell.js.map