import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import copyToClipboard from "copy-to-clipboard";
import { t } from "ttag";
import Copy from "../input/copy";
import { currentTheme } from "../../theme";
import Button from "../button";
import { Box } from "../grid";
import Icons from "../icons";
import Text from "../text";
const shortHash = (hash) => `${hash.slice(0, 4)}...${hash.slice(-4)}`;
const Success = ({ scanUrl, tx, amount, onClose }) => {
    const { transactionHash, from, to, blockNumber } = tx;
    const [copiedTo, setCopiedTo] = React.useState(false);
    const [copiedFrom, setCopiedFrom] = React.useState(false);
    return (_jsxs(_Fragment, { children: [_jsx(Box, { className: "deposit-success__header", p: "16px 16px 4px 16px", children: _jsx(Text.H3, { fontSize: 16, fontFamily: "Heavy", children: t `Success` }) }), _jsxs(Box, { className: "deposit-success__content", m: "32px 16px 0", children: [_jsx(Box, { mb: "12px", children: _jsxs("div", { className: "transaction-hash", children: [_jsx(Text.F2, { children: t `Transaction hash` }), _jsx("a", { href: `${scanUrl}/tx/${tx.transactionHash}`, target: "_blank", style: { textDecoration: "none" }, children: _jsxs(Text.F2, { children: [_jsx(Icons.Etherscan, {}), shortHash(transactionHash)] }) })] }) }), _jsx(Box, { mb: "18px", style: { borderBottom: `1px solid ${currentTheme.colors.gray}` }, children: _jsx(Text.F2, { fontFamily: "Bold", gray: true, children: t `Transaction details` }) }), _jsxs(Box, { mb: "80px", children: [_jsxs("div", { className: "transaction-info", children: [_jsx(Text.F2, { as: "span", children: t `Block` }), _jsx(Text.F2, { as: "span", children: blockNumber })] }), _jsxs("div", { className: "transaction-info", children: [_jsx(Text.F2, { as: "span", children: t `Method` }), _jsx(Text.F2, { as: "span", children: "Transfer" })] }), _jsxs("div", { className: "transaction-info", children: [_jsx(Text.F2, { as: "div", children: t `From` }), copiedFrom ? (_jsx(Text.F2, { as: "div", children: t `Copied to clipboard` })) : (_jsxs(Text.F2, { as: "div", style: { display: "flex", alignItems: "center" }, children: [_jsx(Copy, { className: "copy__from", onClick: () => {
                                                    setCopiedFrom(true);
                                                    copyToClipboard(from);
                                                    setTimeout(() => setCopiedFrom(false), 1500);
                                                } }), shortHash(from)] }))] }), _jsxs("div", { className: "transaction-info", children: [_jsx(Text.F2, { as: "div", children: t `To` }), copiedTo ? (_jsx(Text.F2, { as: "div", children: t `Copied to clipboard` })) : (_jsxs(Text.F2, { as: "div", style: { display: "flex", alignItems: "center" }, children: [_jsx(Copy, { className: "copy__to", onClick: () => {
                                                    setCopiedTo(true);
                                                    copyToClipboard(to);
                                                    setTimeout(() => setCopiedTo(false), 1500);
                                                } }), shortHash(to)] }))] }), _jsxs("div", { className: "transaction-info", children: [_jsx(Text.F2, { as: "span", children: t `Value` }), _jsx(Text.F2, { as: "span", children: amount })] })] }), _jsx(Button, { onClick: onClose, width: "100%", size: "xs", children: t `ok` })] })] }));
};
export default Success;
//# sourceMappingURL=deposit-success.js.map