@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
131 lines • 16.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwapSuccessStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../../primitives/index.js");
const framer_motion_1 = require("framer-motion");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const faBolt_1 = require("@fortawesome/free-solid-svg-icons/faBolt");
const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
const index_js_2 = require("../../../../hooks/index.js");
const faClockFour_1 = require("@fortawesome/free-solid-svg-icons/faClockFour");
const bitcoin_js_1 = require("../../../../utils/bitcoin.js");
const numbers_js_1 = require("../../../../utils/numbers.js");
const TransactionsByChain_js_1 = require("./TransactionsByChain.js");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const SwapSuccessStep = ({ fromToken, toToken, fromAmountFormatted, toAmountFormatted, allTxHashes, transaction, fillTime, seconds, timeEstimate, isCanonical, details, isLoadingTransaction, onOpenChange, requestId }) => {
const relayClient = (0, index_js_2.useRelayClient)();
const isWrap = details?.operation === 'wrap';
const isUnwrap = details?.operation === 'unwrap';
const _fromAmountFormatted = transaction?.data?.metadata?.currencyIn?.amount
? (0, numbers_js_1.formatBN)(transaction?.data?.metadata?.currencyIn?.amount, 5, transaction?.data?.metadata?.currencyIn?.currency?.decimals ?? 18)
: fromAmountFormatted;
const _fromToken = transaction?.data?.metadata?.currencyIn?.currency ?? fromToken;
const fromTokenLogoUri = transaction?.data?.metadata?.currencyIn?.currency?.metadata?.logoURI ??
fromToken?.logoURI;
const _toAmountFormatted = transaction?.data?.metadata?.currencyOut?.amount
? (0, numbers_js_1.formatBN)(transaction?.data?.metadata?.currencyOut?.amount, 5, transaction?.data?.metadata?.currencyOut?.currency?.decimals ?? 18)
: toAmountFormatted;
const _toToken = transaction?.data?.metadata?.currencyOut?.currency ?? toToken;
const toTokenLogoUri = transaction?.data?.metadata?.currencyOut?.currency?.metadata?.logoURI ??
toToken?.logoURI;
const actionTitle = isWrap ? 'wrapped' : isUnwrap ? 'unwrapped' : 'swapped';
const baseTransactionUrl = relayClient?.baseApiUrl.includes('testnets')
? 'https://testnets.relay.link'
: 'https://relay.link';
const fromChain = _fromToken
? relayClient?.chains.find((chain) => chain.id === _fromToken?.chainId)
: null;
const toChain = _toToken
? relayClient?.chains.find((chain) => chain.id === _toToken?.chainId)
: null;
const delayedTxUrl = requestId
? `${baseTransactionUrl}/transaction/${requestId}`
: null;
const timeEstimateMs = ((details?.timeEstimate ?? 0) +
(fromChain && fromChain.id === bitcoin_js_1.bitcoin.id ? 600 : 0)) *
1000;
const isDelayedTx = isCanonical ||
timeEstimateMs >
(relayClient?.maxPollingAttemptsBeforeTimeout ?? 30) *
(relayClient?.pollingInterval ?? 5000);
const gasTopUpAmountCurrency = transaction?.data?.metadata?.currencyGasTopup?.currency;
const formattedGasTopUpAmount = transaction?.data?.metadata?.currencyGasTopup
?.amount
? (0, numbers_js_1.formatBN)(BigInt(transaction?.data?.metadata?.currencyGasTopup?.amount), 5, gasTopUpAmountCurrency?.decimals ?? 18)
: undefined;
const showDetails = !allTxHashes.every((tx) => tx.isBatchTx) || formattedGasTopUpAmount;
return isDelayedTx ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "center", justify: "between", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: {
type: 'spring',
stiffness: 260,
damping: 20
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", justify: "center", css: {
height: 80,
width: 78,
position: 'relative',
backgroundColor: 'amber2',
borderRadius: '999999px'
}, children: [(0, jsx_runtime_1.jsxs)("svg", { style: { position: 'absolute', top: 7, left: 0, zIndex: 0 }, width: "76", height: "80", viewBox: "0 0 64 54", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("mask", { id: "path-1-inside-1_1551_3458", fill: "white", children: (0, jsx_runtime_1.jsx)("path", { d: "M60.5983 22C62.477 22 64.0187 23.5272 63.8194 25.3953C63.3839 29.4763 62.1661 33.4465 60.2215 37.0847C57.7408 41.7257 54.1538 45.6834 49.7782 48.607C45.4027 51.5307 40.3736 53.3301 35.1366 53.8459C29.8995 54.3617 24.616 53.578 19.7541 51.5641C14.8923 49.5503 10.6021 46.3685 7.26367 42.3006C3.92522 38.2327 1.64152 33.4042 0.614871 28.2429C-0.411778 23.0816 -0.149694 17.7467 1.37791 12.7109C2.57543 8.7632 4.52167 5.09478 7.09947 1.90114C8.27945 0.439263 10.4495 0.449489 11.7779 1.77792C13.1063 3.10635 13.0848 5.24829 11.9473 6.74343C10.1382 9.12126 8.76082 11.8094 7.88827 14.6858C6.68544 18.651 6.47907 22.8516 7.28745 26.9156C8.09583 30.9796 9.89401 34.7816 12.5227 37.9846C15.1514 41.1877 18.5294 43.693 22.3576 45.2787C26.1859 46.8644 30.346 47.4815 34.4697 47.0754C38.5934 46.6692 42.5532 45.2524 45.9985 42.9503C49.4438 40.6482 52.2682 37.532 54.2215 33.8776C55.6384 31.2267 56.5653 28.352 56.9674 25.3914C57.2203 23.5298 58.7197 22 60.5983 22Z" }) }), (0, jsx_runtime_1.jsx)("path", { d: "M60.5983 22C62.477 22 64.0187 23.5272 63.8194 25.3953C63.3839 29.4763 62.1661 33.4465 60.2215 37.0847C57.7408 41.7257 54.1538 45.6834 49.7782 48.607C45.4027 51.5307 40.3736 53.3301 35.1366 53.8459C29.8995 54.3617 24.616 53.578 19.7541 51.5641C14.8923 49.5503 10.6021 46.3685 7.26367 42.3006C3.92522 38.2327 1.64152 33.4042 0.614871 28.2429C-0.411778 23.0816 -0.149694 17.7467 1.37791 12.7109C2.57543 8.7632 4.52167 5.09478 7.09947 1.90114C8.27945 0.439263 10.4495 0.449489 11.7779 1.77792C13.1063 3.10635 13.0848 5.24829 11.9473 6.74343C10.1382 9.12126 8.76082 11.8094 7.88827 14.6858C6.68544 18.651 6.47907 22.8516 7.28745 26.9156C8.09583 30.9796 9.89401 34.7816 12.5227 37.9846C15.1514 41.1877 18.5294 43.693 22.3576 45.2787C26.1859 46.8644 30.346 47.4815 34.4697 47.0754C38.5934 46.6692 42.5532 45.2524 45.9985 42.9503C49.4438 40.6482 52.2682 37.532 54.2215 33.8776C55.6384 31.2267 56.5653 28.352 56.9674 25.3914C57.2203 23.5298 58.7197 22 60.5983 22Z", stroke: "#FFB224", strokeWidth: "8", strokeLinejoin: "round", mask: "url(#path-1-inside-1_1551_3458)" })] }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber9', mr: '$2', zIndex: 1 }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faClockFour_1.faClockFour, style: { height: 32 } }) })] }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", css: { mt: '4', mb: '2', textAlign: 'center' }, children: ["Processing the order to swap ", _fromAmountFormatted, ' ', _fromToken?.symbol, " into ", _toAmountFormatted, " ", _toToken?.symbol, ", this will take ~", timeEstimate, "."] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2', mb: 24 }, children: [fromChain ? ((0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: { alignItems: 'center', py: '2', px: '3' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: fromChain.id, height: 20, width: 20 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: fromChain.displayName })] })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: "?" })), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: { alignItems: 'center', justifyContent: 'center', p: '2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { style: { width: 14 }, icon: free_solid_svg_icons_1.faArrowRight }) }), toChain ? ((0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: { alignItems: 'center', py: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: toChain.id, height: 20, width: 20 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: toChain.displayName })] })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: "?" }))] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { css: {
background: 'gray2',
p: '4',
borderRadius: 12,
textAlign: 'center'
}, style: "body2", children: "You can close this modal while it finalizes on the blockchain. The transaction will continue in the background." })] }), !delayedTxUrl ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
p: '3',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
gap: '3',
width: '100%',
borderRadius: 12
}, children: [formattedGasTopUpAmount ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { justify: "between", 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.jsx)(TransactionsByChain_js_1.TransactionsByChain, { allTxHashes: allTxHashes, fromChain: fromChain, toChain: toChain })] })) : null, (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { width: '100%', mt: 8, gap: '3' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: 'secondary', onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" }), delayedTxUrl ? ((0, jsx_runtime_1.jsx)("a", { href: delayedTxUrl, style: { width: '100%' }, target: "_blank", children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: 'primary', css: {
justifyContent: 'center',
width: 'max-content'
}, children: "Track Progress" }) })) : null] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "center", justify: "between", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: {
type: 'spring',
stiffness: 260,
damping: 20
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", justify: "center", css: {
height: 80,
width: 80,
backgroundColor: 'green2',
'--borderColor': 'colors.green10',
border: '6px solid var(--borderColor)',
borderRadius: '999999px',
position: 'relative'
}, children: [fillTime !== '-' && seconds <= 10 && seconds >= 0 ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h3", children: fillTime })) : ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'green9', mr: '$2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faCheck_1.faCheck, style: { height: 40 } }) })), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { align: "center", justify: "center", css: {
position: 'absolute',
width: 50,
height: 50,
background: 'modal-background',
color: 'primary-color',
'--borderColor': 'colors.subtle-border-color',
border: '3px solid var(--borderColor)',
borderRadius: '999999px',
right: -40,
bottom: -12
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { width: 29, height: 27 }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faBolt_1.faBolt, width: 29, height: 27, style: { height: 27 } }) }) })] }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", css: { mt: '4', mb: '2', textAlign: 'center' }, children: ["Successfully ", actionTitle] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2', mb: 20 }, children: [_fromToken ? ((0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: { alignItems: 'center', py: '2', px: '3', gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: _fromToken.chainId, tokenlogoURI: fromTokenLogoUri, tokenSymbol: _fromToken.symbol }), isLoadingTransaction ? ((0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { height: 24, width: 60, background: 'gray5' } })) : ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", ellipsify: true, children: [_fromAmountFormatted, " ", _fromToken.symbol] }))] })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: "?" })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", color: "subtle", children: "to" }), _toToken ? ((0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: { alignItems: 'center', py: '2', px: '3', gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainTokenIcon, { chainId: _toToken.chainId, tokenlogoURI: toTokenLogoUri, tokenSymbol: _toToken.symbol }), isLoadingTransaction ? ((0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { height: 24, width: 60, background: 'gray5' } })) : ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle1", ellipsify: true, children: [_toAmountFormatted, " ", _toToken.symbol] }))] })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: "?" }))] }), showDetails && ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
p: '3',
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
gap: '3',
width: '100%',
borderRadius: 12
}, children: [formattedGasTopUpAmount ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { justify: "between", 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.jsx)(TransactionsByChain_js_1.TransactionsByChain, { allTxHashes: allTxHashes, fromChain: fromChain, toChain: toChain })] }))] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { width: '100%', mt: 8, gap: '3' }, children: [requestId ? ((0, jsx_runtime_1.jsx)("a", { href: `${baseTransactionUrl}/transaction/${requestId}`, style: { width: '100%' }, target: "_blank", onClick: (e) => {
e.stopPropagation();
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "secondary", css: {
justifyContent: 'center',
width: 'max-content'
}, children: "View Details" }) })) : null, (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => {
onOpenChange(false);
}, css: {
justifyContent: 'center',
width: '100%'
}, children: "Done" })] })] }));
};
exports.SwapSuccessStep = SwapSuccessStep;
//# sourceMappingURL=SwapSuccessStep.js.map