@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
148 lines • 10.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WidgetErrorWell = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const relay_sdk_1 = require("@reservoir0x/relay-sdk");
const index_js_1 = require("../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const faExclamationCircle_1 = require("@fortawesome/free-solid-svg-icons/faExclamationCircle");
const Tooltip_js_1 = tslib_1.__importDefault(require("../primitives/Tooltip.js"));
const usehooks_ts_1 = require("usehooks-ts");
const WidgetErrorWell = ({ error, hasInsufficientBalance, quote, currency, relayerFeeProportion, isHighRelayerServiceFee, isCapacityExceededError, isCouldNotExecuteError, supportsExternalLiquidity, containerCss, recipientWalletSupportsChain, recipient, toChainWalletVMSupported, recipientLinkedWallet, toChainVmType }) => {
const isSmallDevice = (0, usehooks_ts_1.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;
}
if (!recipientWalletSupportsChain &&
recipient &&
!(0, relay_sdk_1.isDeadAddress)(recipient) &&
recipient !== relay_sdk_1.tronDeadAddress &&
toChainWalletVMSupported &&
(!recipientLinkedWallet || recipientLinkedWallet.vmType === toChainVmType)) {
return ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.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 ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.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 ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'red10' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle3", css: { color: 'red12' }, children: [fetchQuoteErrorMessage, " Please switch to the native route."] })] }));
}
else {
return ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'red10' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", css: { color: 'red12' }, children: fetchQuoteErrorMessage })] }));
}
}
if (hasInsufficientBalance) {
return null;
}
if (relayerFeeProportion && relayerFeeProportion >= 40n) {
return ((0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { side: isSmallDevice ? 'top' : 'right', content: (0, jsx_runtime_1.jsx)(index_js_1.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: (0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber10' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Fees exceed 40% of the received amount." })] }) }));
}
if (showHighPriceImpactWarning) {
return ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber10' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle3", css: { color: 'amber12' }, children: ["The price impact is currently high (", quote?.details?.totalImpact?.percent, "%)."] })] }));
}
if (isMissingUsdTokenPrice) {
return ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber10' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Unable to detect token price. Please confirm expected output before submitting." })] }));
}
if (isHighRelayerServiceFee) {
return ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber10' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faExclamationCircle_1.faExclamationCircle, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", css: { color: 'amber12' }, children: "Due to high demand, Relayer fees have temporarily been increased." })] }));
}
return null;
};
exports.WidgetErrorWell = WidgetErrorWell;
//# sourceMappingURL=WidgetErrorWell.js.map