@pushchain/ui-kit
Version:
## Overview
73 lines • 3.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PushWalletToast = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const progress_hook_types_1 = require("@pushchain/core/src/lib/progress-hook/progress-hook.types");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const common_1 = require("../../components/common");
const PushWalletToast = ({ progress, setProgress }) => {
const handleViewOnScan = (txnHash) => {
if (txnHash) {
window.open(`https://donut.push.network/tx/${txnHash}`, '_blank');
}
};
if (!progress)
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
return ((0, jsx_runtime_1.jsxs)(ToastContainer, { children: [(0, jsx_runtime_1.jsx)(IconContainer, { children: progress.id === progress_hook_types_1.PROGRESS_HOOK.SEND_TX_99_01 ? (0, jsx_runtime_1.jsx)(common_1.TickIcon, {}) :
progress.id === progress_hook_types_1.PROGRESS_HOOK.SEND_TX_99_02 ? (0, jsx_runtime_1.jsx)(common_1.WarningIcon, {}) :
(0, jsx_runtime_1.jsx)(common_1.Spinner, { color: 'var(--pw-int-brand-primary-color)' }) }), (0, jsx_runtime_1.jsxs)(ContentContainer, { children: [(0, jsx_runtime_1.jsx)(TitleText, { children: progress.title }), progress.id === progress_hook_types_1.PROGRESS_HOOK.SEND_TX_99_01 &&
progress.response &&
((0, jsx_runtime_1.jsx)(LinkText, { onClick: () => handleViewOnScan(progress.response[0]['hash']), children: "View in Explorer" }))] }), (0, jsx_runtime_1.jsx)(CloseContainer, { onClick: () => setProgress(null), children: (0, jsx_runtime_1.jsx)(common_1.CrossIcon, { height: '18px', width: '18px', color: '#000000' }) })] }));
};
exports.PushWalletToast = PushWalletToast;
const ToastContainer = styled_components_1.default.div `
position: fixed;
bottom: 40px;
right: 30px;
display:flex;
flex-direction:row;
gap:8px;
align-items: flex-start;
border:1px solid #EAEBF2;
padding:16px;
border-radius:16px;
background-color:#fff;
z-index:9999;
width:320px;
max-width: 100%;
`;
const ContentContainer = styled_components_1.default.div `
display: flex;
flex-direction: column;
`;
const TitleText = styled_components_1.default.h4 `
font-size:14px;
font-weight:500;
line-height:21px;
margin:0;
font-family:var(--pw-int-font-family);
color:#17181B;
`;
const LinkText = styled_components_1.default.span `
font-size:14px;
font-weight:400;
line-height:21px;
cursor: pointer;
color: #0056D0;
font-family:var(--pw-int-font-family);
`;
const IconContainer = styled_components_1.default.div `
height: 21px;
width: 18px;
display: flex;
align-items: center;
`;
const CloseContainer = styled_components_1.default.div `
display: flex;
margin-left: auto;
align-items: center;
cursor: pointer;
height: 21px;
`;
//# sourceMappingURL=index.js.map