@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
112 lines • 9.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { Flex, Text, ChainTokenIcon, Box, Anchor, ChainIcon } from '../../../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {} from '../../../../types/index.js';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
import useRelayClient from '../../../../hooks/useRelayClient.js';
import { faCheck, faExternalLink } from '@fortawesome/free-solid-svg-icons';
import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js';
import { truncateAddress } from '../../../../utils/truncate.js';
import { formatTransactionSteps } from '../../../../utils/steps.js';
import { formatBN } from '../../../../utils/numbers.js';
export const SwapConfirmationStep = ({ fromToken, toToken, fromChain, toChain, fromAmountFormatted, toAmountFormatted, quote, steps }) => {
const operation = quote?.details?.operation || 'swap';
const { formattedSteps, status } = useMemo(() => formatTransactionSteps({
steps,
fromToken,
fromChain,
toChain,
operation
}), [steps, fromToken, toToken, fromChain, toChain, operation]);
const gasTopUpAmountCurrency = quote?.details?.currencyGasTopup?.currency;
const formattedGasTopUpAmount = quote?.details?.currencyGasTopup?.amount
? formatBN(BigInt(quote?.details?.currencyGasTopup?.amount), 5, gasTopUpAmountCurrency?.decimals ?? 18)
: undefined;
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", justify: "between", direction: "column", css: { flexShrink: 0, bp500: { flexDirection: 'row' } }, children: [_jsxs(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: [_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: { height: 32, width: 32 } }), _jsxs(Flex, { direction: "column", align: "start", css: { gap: '1' }, children: [_jsx(Text, { color: "subtle", style: "subtitle2", children: fromChain?.displayName }), _jsxs(Text, { style: "h6", ellipsify: true, css: { lineHeight: '20px' }, children: [fromAmountFormatted, " ", fromToken?.symbol] })] })] }), _jsx(Text, { style: "body1", css: {
color: 'gray9',
p: '0 12px',
bp400Down: { transform: 'rotate(90deg)', p: '12px 0' }
}, children: _jsx(FontAwesomeIcon, { icon: faArrowRight, width: 16 }) }), _jsxs(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: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: { height: 32, width: 32 } }), _jsxs(Flex, { direction: "column", align: "start", css: { gap: '1' }, children: [_jsx(Text, { color: "subtle", style: "subtitle2", children: toChain?.displayName }), _jsxs(Text, { style: "h6", ellipsify: true, css: { lineHeight: '20px' }, children: [toAmountFormatted, " ", toToken?.symbol] })] })] })] }), formattedGasTopUpAmount ? (_jsxs(Flex, { direction: "row", justify: "between", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 2,
width: '100%',
alignItems: 'center'
}, children: [_jsx(Text, { style: "subtitle2", color: "subtle", children: "Additional Gas" }), _jsxs(Text, { style: "subtitle2", children: [formattedGasTopUpAmount, " ", gasTopUpAmountCurrency?.symbol] })] })) : null, _jsxs(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) => (_jsxs(Box, { children: [_jsx(StepRow, { ...step }), index !== formattedSteps.length - 1 && (_jsx(Box, { css: { height: '14px', pl: '12px', marginTop: '4px' }, children: _jsx(Box, { css: {
width: '1px',
height: '100%',
backgroundColor: 'gray7'
} }) }))] }, step.id))), status === 'delayed' ? (_jsx(Flex, { css: { p: '3', background: 'amber2', borderRadius: 12 }, children: _jsx(Text, { style: "subtitle3", color: "warning", children: "Your transaction is delayed. We apologize for the inconvenience. Contact support if you need help." }) })) : null] })] }));
};
export const StepRow = ({ action, isActive, isCompleted, txHashes, isWalletAction, chainId, isApproveStep }) => {
const relayClient = useRelayClient();
const hasTxHash = txHashes && txHashes.length > 0;
return (_jsx(Flex, { align: "center", justify: "between", css: { width: '100%', gap: '3' }, children: _jsxs(Flex, { align: "center", css: { gap: '3', height: 40 }, children: [_jsx(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 ? (_jsx(FontAwesomeIcon, { icon: faCheck, width: 12 })) : (_jsx(ChainIcon, { chainId: chainId, square: false, width: 24, height: 24, css: {
borderRadius: 9999999,
overflow: 'hidden',
filter: isActive ? 'none' : 'grayscale(100%)',
opacity: isActive ? 1 : 0.6
} })) }), _jsxs(Flex, { direction: "column", css: { gap: '2px' }, children: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(Text, { style: "subtitle2", color: isActive ? undefined : 'subtle', children: action }), isWalletAction && (_jsx(Box, { css: {
backgroundColor: 'primary3',
borderRadius: 100,
px: '2',
py: '1'
}, children: _jsx(Text, { style: "subtitle3", css: {
color: 'primary11',
fontSize: '10px',
lineHeight: '12px'
}, children: "In Wallet" }) }))] }), isApproveStep && !hasTxHash && !isCompleted && (_jsx(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 = getTxBlockExplorerUrl(chainId, relayClient?.chains, txHash);
if (txHash && txUrl) {
return (_jsxs(Anchor, { href: txUrl, target: "_blank", css: {
fontSize: 12,
display: 'flex',
alignItems: 'center',
gap: '1'
}, children: [!isApproveStep ? 'Deposit: ' : '', truncateAddress(txHash, '...', 6, 4), ' ', _jsx(FontAwesomeIcon, { icon: faExternalLink, width: 14 })] }, txHash));
}
})] })] }) }));
};
//# sourceMappingURL=SwapConfirmationStep.js.map