@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
77 lines • 7.32 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import {} from 'react';
import { Flex, Text, ChainTokenIcon, Box, Anchor } from '../../../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { LoadingSpinner } from '../../LoadingSpinner.js';
import {} from '../../../../types/index.js';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
import { formatDollar } from '../../../../utils/numbers.js';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { faRepeat } from '@fortawesome/free-solid-svg-icons';
import { truncateAddress } from '../../../../utils/truncate.js';
import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js';
import useRelayClient from '../../../../hooks/useRelayClient.js';
export const ApprovalPlusSwapStep = ({ fromToken, toToken, quote, fromAmountFormatted, toAmountFormatted, steps }) => {
const details = quote?.details;
const relayClient = useRelayClient();
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", justify: "between", direction: "column", css: { flexShrink: 0, bp500: { flexDirection: 'row' } }, children: [_jsx(Flex, { direction: "column", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 1,
width: '100%'
}, children: _jsxs(Flex, { direction: "column", align: "start", css: { gap: '1', cursor: 'pointer' }, children: [_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: { height: 32, width: 32 } }), _jsxs(Text, { style: "h6", ellipsify: true, children: [fromAmountFormatted, " ", fromToken?.symbol] }), _jsx(Text, { style: "subtitle3", color: "subtle", children: formatDollar(Number(details?.currencyIn?.amountUsd)) })] }) }), _jsx(Text, { style: "body1", css: {
color: 'gray9',
p: '0 16px',
bp400Down: { transform: 'rotate(90deg)' }
}, children: _jsx(FontAwesomeIcon, { icon: faArrowRight, width: 16 }) }), _jsx(Flex, { direction: "column", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 1,
width: '100%'
}, children: _jsxs(Flex, { direction: "column", align: "start", css: { gap: '1', cursor: 'pointer' }, children: [_jsx(ChainTokenIcon, { chainId: toToken?.chainId, tokenlogoURI: toToken?.logoURI, tokenSymbol: toToken?.symbol, css: { height: 32, width: 32 } }), _jsxs(Text, { style: "h6", ellipsify: true, children: [toAmountFormatted, " ", toToken?.symbol] }), _jsx(Text, { style: "subtitle3", color: "subtle", children: formatDollar(Number(details?.currencyOut?.amountUsd)) })] }) })] }), _jsx(Flex, { direction: "column", css: {
'--borderColor': 'colors.gray3',
border: '1px solid var(--borderColor)',
borderRadius: 12,
p: '3',
height: 260,
gap: '8px'
}, children: steps?.map((step, index) => {
const isCurrentStep = step.items?.some((item) => item.status === 'incomplete') &&
!steps
?.slice(0, steps?.indexOf(step))
?.some((s) => s.items?.some((item) => item.status === 'incomplete'));
const hasTxHash = step?.items?.[0]?.txHashes?.length &&
step?.items?.[0]?.txHashes?.length > 0;
const isApproveStep = step.id === 'approve';
const stepTitle = isApproveStep
? 'Approve in wallet'
: hasTxHash
? `Swapping ${fromToken?.symbol} for ${toToken?.symbol}`
: 'Confirm swap in wallet';
return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", justify: "between", css: { width: '100%', gap: '3' }, children: [_jsxs(Flex, { align: "center", css: { gap: '2', height: 40 }, children: [step.id === 'approve' ? (_jsx(ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
borderRadius: 9999999,
flexShrink: 0,
filter: isCurrentStep ? 'none' : 'grayscale(100%)'
} })) : (_jsx(Flex, { css: {
height: 32,
width: 32,
borderRadius: 9999999,
flexShrink: 0,
backgroundColor: isCurrentStep ? 'primary5' : 'gray5',
color: isCurrentStep ? 'primary8' : 'gray9',
alignItems: 'center',
justifyContent: 'center'
}, children: _jsx(FontAwesomeIcon, { icon: faRepeat, width: 16 }) })), _jsxs(Flex, { direction: "column", css: { gap: '2px' }, children: [_jsx(Text, { style: "subtitle2", children: stepTitle }), isApproveStep && !hasTxHash && (_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?" })), hasTxHash &&
step?.items?.[0]?.txHashes?.map(({ txHash, chainId }) => {
const txUrl = getTxBlockExplorerUrl(chainId, relayClient?.chains, txHash);
return (_jsxs(Anchor, { href: txUrl, target: "_blank", css: { fontSize: 12 }, children: ["View Tx: ", truncateAddress(txHash, '...', 6, 4)] }, txHash));
})] })] }), _jsx(Flex, { children: isCurrentStep && hasTxHash ? (_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'gray9' } })) : step?.items?.every((item) => item.status === 'complete') ? (_jsx(Box, { css: { color: 'green9' }, children: _jsx(FontAwesomeIcon, { icon: faCheck, width: 16 }) })) : null })] }), index !== (steps?.length || 0) - 1 && (_jsx(Box, { css: { height: '14px', pl: '16px', marginTop: '12px' }, children: _jsx(Box, { css: {
width: '1px',
height: '100%',
backgroundColor: 'gray11'
} }) }))] }, step.id));
}) })] }));
};
//# sourceMappingURL=ApprovalPlusSwapStep.js.map