@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
117 lines • 10.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepRow = exports.SwapConfirmationStep = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../../../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const faArrowRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRight");
const useRelayClient_js_1 = tslib_1.__importDefault(require("../../../../hooks/useRelayClient.js"));
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const getTxBlockExplorerUrl_js_1 = require("../../../../utils/getTxBlockExplorerUrl.js");
const truncate_js_1 = require("../../../../utils/truncate.js");
const steps_js_1 = require("../../../../utils/steps.js");
const numbers_js_1 = require("../../../../utils/numbers.js");
const SwapConfirmationStep = ({ fromToken, toToken, fromChain, toChain, fromAmountFormatted, toAmountFormatted, quote, steps }) => {
const operation = quote?.details?.operation || 'swap';
const { formattedSteps, status } = (0, react_1.useMemo)(() => (0, steps_js_1.formatTransactionSteps)({
steps,
fromToken,
fromChain,
toChain,
operation
}), [steps, fromToken, toToken, fromChain, toChain, operation]);
const gasTopUpAmountCurrency = quote?.details?.currencyGasTopup?.currency;
const formattedGasTopUpAmount = quote?.details?.currencyGasTopup?.amount
? (0, numbers_js_1.formatBN)(BigInt(quote?.details?.currencyGasTopup?.amount), 5, gasTopUpAmountCurrency?.decimals ?? 18)
: undefined;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", justify: "between", direction: "column", css: { flexShrink: 0, bp500: { flexDirection: 'row' } }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "row", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 2,
width: '100%',
alignItems: 'center',
bp500: { flexDirection: 'column', gap: 1, alignItems: 'flex-start' }
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: { height: 32, width: 32 } }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "start", css: { gap: '1' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { color: "subtle", style: "subtitle2", children: fromChain?.displayName }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "h6", ellipsify: true, css: { lineHeight: '20px' }, children: [fromAmountFormatted, " ", fromToken?.symbol] })] })] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", css: {
color: 'gray9',
p: '0 12px',
bp400Down: { transform: 'rotate(90deg)', p: '12px 0' }
}, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faArrowRight_1.faArrowRight, width: 16 }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "row", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 2,
width: '100%',
alignItems: 'center',
bp500: { flexDirection: 'column', gap: 1, alignItems: 'flex-start' }
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: { height: 32, width: 32 } }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "start", css: { gap: '1' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { color: "subtle", style: "subtitle2", children: toChain?.displayName }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "h6", ellipsify: true, css: { lineHeight: '20px' }, children: [toAmountFormatted, " ", toToken?.symbol] })] })] })] }), formattedGasTopUpAmount ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "row", justify: "between", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 2,
width: '100%',
alignItems: 'center'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", children: "Additional Gas" }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", children: [formattedGasTopUpAmount, " ", gasTopUpAmountCurrency?.symbol] })] })) : null, (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
'--borderColor': 'colors.gray3',
border: '1px solid var(--borderColor)',
borderRadius: 12,
px: '3',
py: '2',
gap: '1'
}, children: [formattedSteps.map((step, index) => ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { children: [(0, jsx_runtime_1.jsx)(exports.StepRow, { ...step }), index !== formattedSteps.length - 1 && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { height: '14px', pl: '12px', marginTop: '4px' }, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
width: '1px',
height: '100%',
backgroundColor: 'gray7'
} }) }))] }, step.id))), status === 'delayed' ? ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: { p: '3', background: 'amber2', borderRadius: 12 }, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "warning", children: "Your transaction is delayed. We apologize for the inconvenience. Contact support if you need help." }) })) : null] })] }));
};
exports.SwapConfirmationStep = SwapConfirmationStep;
const StepRow = ({ action, isActive, isCompleted, txHashes, isWalletAction, chainId, isApproveStep }) => {
const relayClient = (0, useRelayClient_js_1.default)();
const hasTxHash = txHashes && txHashes.length > 0;
return ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { align: "center", justify: "between", css: { width: '100%', gap: '3' }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '3', height: 40 }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: {
height: 24,
width: 24,
borderRadius: 9999999,
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: isCompleted
? 'green3'
: isActive
? 'primary6'
: 'gray5',
color: isCompleted ? 'green11' : isActive ? 'primary6' : 'gray9',
animation: isActive && !isCompleted ? 'pulse-shadow 1s infinite' : 'none',
animationDirection: 'alternate-reverse'
}, children: isCompleted ? ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, width: 12 })) : ((0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: chainId, square: false, width: 24, height: 24, css: {
borderRadius: 9999999,
overflow: 'hidden',
filter: isActive ? 'none' : 'grayscale(100%)',
opacity: isActive ? 1 : 0.6
} })) }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { gap: '2px' }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: isActive ? undefined : 'subtle', children: action }), isWalletAction && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
backgroundColor: 'primary3',
borderRadius: 100,
px: '2',
py: '1'
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", css: {
color: 'primary11',
fontSize: '10px',
lineHeight: '12px'
}, children: "In Wallet" }) }))] }), isApproveStep && !hasTxHash && !isCompleted && ((0, jsx_runtime_1.jsx)(index_js_1.Anchor, { css: { fontSize: 12 }, href: "https://support.relay.link/en/articles/10371133-why-do-i-have-to-approve-a-token", target: "_blank", children: "Why do I have to approve a token?" })), txHashes &&
txHashes.length > 0 &&
txHashes.map(({ txHash, chainId }) => {
const txUrl = (0, getTxBlockExplorerUrl_js_1.getTxBlockExplorerUrl)(chainId, relayClient?.chains, txHash);
if (txHash && txUrl) {
return ((0, jsx_runtime_1.jsxs)(index_js_1.Anchor, { href: txUrl, target: "_blank", css: {
fontSize: 12,
display: 'flex',
alignItems: 'center',
gap: '1'
}, children: [!isApproveStep ? 'Deposit: ' : '', (0, truncate_js_1.truncateAddress)(txHash, '...', 6, 4), ' ', (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faExternalLink, width: 14 })] }, txHash));
}
})] })] }) }));
};
exports.StepRow = StepRow;
//# sourceMappingURL=SwapConfirmationStep.js.map