@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
20 lines • 2.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Anchor, Button, Flex, Text } from '../../../primitives/index.js';
import { LoadingSpinner } from '../../LoadingSpinner.js';
import { useExecutionStatus } from '@reservoir0x/relay-kit-hooks';
import { useRelayClient } from '../../../../hooks/index.js';
import getChainBlockExplorerUrl from '../../../../utils/getChainBlockExplorerUrl.js';
import { truncateAddress } from '../../../../utils/truncate.js';
export const DepositAddressValidatingStep = ({ txHashes, status }) => {
const relayClient = useRelayClient();
const transactionBaseUrl = relayClient?.baseApiUrl && relayClient.baseApiUrl.includes('testnet')
? 'https://testnets.relay.link'
: 'https://relay.link';
const txHash = txHashes && txHashes[0] ? txHashes[0] : undefined;
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: "column", align: "center", justify: "between", children: [_jsx(LoadingSpinner, { css: { height: 40, width: 40, fill: 'primary-color' } }), _jsx(Text, { style: "subtitle2", css: { mt: '4', mb: '2', textAlign: 'center' }, children: "Funds received. Your transaction is now in progress." }), status === 'delayed' ? (_jsx(Flex, { css: { px: '4', py: '3', background: 'amber2', borderRadius: 12 }, children: _jsx(Text, { style: "subtitle2", css: { textAlign: 'center' }, children: "Your transaction is currently delayed. We apologize for the inconvenience and appreciate your patience. After 5 minutes, your transaction will either be processed or refunded. If this is urgent, please contact support." }) })) : null, _jsxs(Text, { color: "subtle", style: "body2", css: { mt: 12, textAlign: 'center' }, children: ["Feel free to leave at any time, you can track your progress within the", ' ', _jsxs(Anchor, { href: `${transactionBaseUrl}/transaction/${txHash}`, target: "_blank", rel: "noreffer", children: [' ', "transaction page"] }), "."] })] }), _jsxs(Button, { disabled: true, css: {
color: 'button-disabled-color !important',
mt: 8,
justifyContent: 'center'
}, children: [_jsx(LoadingSpinner, { css: { height: 16, width: 16, fill: 'button-disabled-color' } }), "Validating Transaction"] })] }));
};
//# sourceMappingURL=DepositAddressValidatingStep.js.map