@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
80 lines • 8.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ApprovalPlusSwapStep = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const LoadingSpinner_js_1 = require("../../LoadingSpinner.js");
const faArrowRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRight");
const numbers_js_1 = require("../../../../utils/numbers.js");
const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const truncate_js_1 = require("../../../../utils/truncate.js");
const getTxBlockExplorerUrl_js_1 = require("../../../../utils/getTxBlockExplorerUrl.js");
const useRelayClient_js_1 = tslib_1.__importDefault(require("../../../../hooks/useRelayClient.js"));
const ApprovalPlusSwapStep = ({ fromToken, toToken, quote, fromAmountFormatted, toAmountFormatted, steps }) => {
const details = quote?.details;
const relayClient = (0, useRelayClient_js_1.default)();
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.jsx)(index_js_1.Flex, { direction: "column", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 1,
width: '100%'
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "start", css: { gap: '1', cursor: 'pointer' }, 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.Text, { style: "h6", ellipsify: true, children: [fromAmountFormatted, " ", fromToken?.symbol] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", children: (0, numbers_js_1.formatDollar)(Number(details?.currencyIn?.amountUsd)) })] }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", css: {
color: 'gray9',
p: '0 16px',
bp400Down: { transform: 'rotate(90deg)' }
}, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faArrowRight_1.faArrowRight, width: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { direction: "column", css: {
backgroundColor: 'subtle-background-color',
p: '12px 16px',
borderRadius: 12,
gap: 1,
width: '100%'
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "start", css: { gap: '1', cursor: 'pointer' }, 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.Text, { style: "h6", ellipsify: true, children: [toAmountFormatted, " ", toToken?.symbol] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", children: (0, numbers_js_1.formatDollar)(Number(details?.currencyOut?.amountUsd)) })] }) })] }), (0, jsx_runtime_1.jsx)(index_js_1.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 ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { children: [(0, jsx_runtime_1.jsxs)(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: '2', height: 40 }, children: [step.id === 'approve' ? ((0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: fromToken?.chainId, tokenlogoURI: fromToken?.logoURI, tokenSymbol: fromToken?.symbol, css: {
borderRadius: 9999999,
flexShrink: 0,
filter: isCurrentStep ? 'none' : 'grayscale(100%)'
} })) : ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: {
height: 32,
width: 32,
borderRadius: 9999999,
flexShrink: 0,
backgroundColor: isCurrentStep ? 'primary5' : 'gray5',
color: isCurrentStep ? 'primary8' : 'gray9',
alignItems: 'center',
justifyContent: 'center'
}, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faRepeat, width: 16 }) })), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { gap: '2px' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: stepTitle }), isApproveStep && !hasTxHash && ((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?" })), hasTxHash &&
step?.items?.[0]?.txHashes?.map(({ txHash, chainId }) => {
const txUrl = (0, getTxBlockExplorerUrl_js_1.getTxBlockExplorerUrl)(chainId, relayClient?.chains, txHash);
return ((0, jsx_runtime_1.jsxs)(index_js_1.Anchor, { href: txUrl, target: "_blank", css: { fontSize: 12 }, children: ["View Tx: ", (0, truncate_js_1.truncateAddress)(txHash, '...', 6, 4)] }, txHash));
})] })] }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { children: isCurrentStep && hasTxHash ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_js_1.LoadingSpinner, { css: { height: 16, width: 16, fill: 'gray9' } })) : step?.items?.every((item) => item.status === 'complete') ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'green9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faCheck_1.faCheck, width: 16 }) })) : null })] }), index !== (steps?.length || 0) - 1 && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { height: '14px', pl: '16px', marginTop: '12px' }, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
width: '1px',
height: '100%',
backgroundColor: 'gray11'
} }) }))] }, step.id));
}) })] }));
};
exports.ApprovalPlusSwapStep = ApprovalPlusSwapStep;
//# sourceMappingURL=ApprovalPlusSwapStep.js.map