@pushchain/ui-kit
Version:
Push Chain is a true universal L1 that is 100% EVM compatible. It allows developers to deploy once and make their apps instantly compatible with users from all other L1s (Ethereum, Solana, etc) with zero on-chain code change.
220 lines (218 loc) • 9.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getUniversalTxId = exports.TOAST_POSITION = exports.PushWalletToast = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const progress_hook_types_1 = require("@pushchain/core/src/lib/progress-hook/progress-hook.types");
const styled_components_1 = tslib_1.__importStar(require("styled-components"));
const common_1 = require("../../components/common");
const CaretDown_1 = tslib_1.__importDefault(require("../common/icons/CaretDown"));
const CaretUp_1 = tslib_1.__importDefault(require("../common/icons/CaretUp"));
const trackTransaction_1 = require("./trackTransaction");
const TOAST_POSITION = {
TOP_LEFT: 'top-left',
TOP_MIDDLE: 'top-middle',
TOP_RIGHT: 'top-right',
BOTTOM_LEFT: 'bottom-left',
BOTTOM_MIDDLE: 'bottom-middle',
BOTTOM_RIGHT: 'bottom-right',
};
exports.TOAST_POSITION = TOAST_POSITION;
const TRANSACTION_START_IDS = [
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_001,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_101,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_201,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_301,
];
const SUCCESS_TERMINAL_IDS = [
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_199_01,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_299_01,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_399_01,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_999_01,
progress_hook_types_1.PROGRESS_HOOK.UEA_MIG_9901,
];
const FAILURE_TERMINAL_IDS = [
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_199_02,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_299_02,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_299_03,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_399_02,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_399_03,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_999_02,
progress_hook_types_1.PROGRESS_HOOK.SEND_TX_999_03,
];
const PushWalletToast = ({ progress, setProgress, initialChain, className = 'PUAToast', toastPosition = 'bottom-right', hidden = false, }) => {
if (hidden)
return null;
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
const textRef = (0, react_1.useRef)(null);
const trackedTxRef = (0, react_1.useRef)(null);
const previousProgressIdRef = (0, react_1.useRef)(null);
const handleViewOnScan = (txnHash) => {
if (txnHash) {
window.open(`https://donut.push.network/tx/${txnHash}`, '_blank');
}
};
const handleViewLifecycle = (universalTxId) => {
window.open(`https://donut.push.network/track?utx=${universalTxId}`, '_blank', 'noopener,noreferrer');
};
(0, react_1.useEffect)(() => {
setIsOpen(false);
}, [progress?.id]);
(0, react_1.useEffect)(() => {
if (textRef.current) {
const el = textRef.current;
const overflow = el.scrollWidth > el.clientWidth;
setIsOverflowing(overflow);
}
else {
setIsOverflowing(false);
}
}, [progress?.message]);
if (!progress)
return null;
const progressMessage = progress.message ?? '';
const isInsufficientFundsError = progressMessage.includes('insufficient funds for gas');
const isSuccess = SUCCESS_TERMINAL_IDS.includes(progress.id);
const isFailure = FAILURE_TERMINAL_IDS.includes(progress.id) || progress.level === 'ERROR';
const txHash = progress.response?.txHash;
const isNewTransaction = TRANSACTION_START_IDS.includes(progress.id)
&& previousProgressIdRef.current !== progress.id;
if (isNewTransaction)
trackedTxRef.current = null;
previousProgressIdRef.current = progress.id;
trackedTxRef.current ??= (0, trackTransaction_1.getUniversalTxId)(progress, initialChain);
const trackedTx = trackedTxRef.current;
return ((0, jsx_runtime_1.jsxs)(ToastContainer, { className: className, "$position": toastPosition, children: [(0, jsx_runtime_1.jsx)(IconContainer, { children: isSuccess ? ((0, jsx_runtime_1.jsx)(common_1.TickIcon, {})) : isFailure ? ((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 }), isSuccess && txHash && ((0, jsx_runtime_1.jsx)(LinkText, { onClick: () => handleViewOnScan(txHash), children: "View in Explorer" })), !isSuccess && !isFailure && trackedTx && ((0, jsx_runtime_1.jsxs)(LinkText, { onClick: () => handleViewLifecycle(trackedTx), children: ["Track Live Progress ", (0, jsx_runtime_1.jsx)(ExternalArrow, { "aria-hidden": "true", children: "\u2197" })] })), isFailure && progressMessage && ((0, jsx_runtime_1.jsxs)(DescriptionContainer, { children: [(0, jsx_runtime_1.jsxs)(DescriptionText, { ref: textRef, "$expanded": isOpen, children: [isInsufficientFundsError && 'Insufficient funds for gas: \n', progressMessage] }), isOverflowing && (isOpen ? ((0, jsx_runtime_1.jsxs)(ExpandButton, { onClick: () => setIsOpen(false), children: ["View Less", (0, jsx_runtime_1.jsx)(CaretUp_1.default, { height: "18px", width: "18px", color: "#6B7280" })] })) : ((0, jsx_runtime_1.jsxs)(ExpandButton, { onClick: () => setIsOpen(true), children: ["View More", (0, jsx_runtime_1.jsx)(CaretDown_1.default, { height: "18px", width: "18px", color: "#6B7280" })] })))] })), isFailure && trackedTx && ((0, jsx_runtime_1.jsxs)(LinkText, { onClick: () => handleViewLifecycle(trackedTx), children: ["View Tx Lifecycle ", (0, jsx_runtime_1.jsx)(ExternalArrow, { "aria-hidden": "true", children: "\u2197" })] }))] }), (0, jsx_runtime_1.jsx)(CloseContainer, { onClick: () => {
setProgress(null);
setIsOpen(false);
}, children: (0, jsx_runtime_1.jsx)(common_1.CrossIcon, { height: "18px", width: "18px", color: "#000000" }) })] }));
};
exports.PushWalletToast = PushWalletToast;
var trackTransaction_2 = require("./trackTransaction");
Object.defineProperty(exports, "getUniversalTxId", { enumerable: true, get: function () { return trackTransaction_2.getUniversalTxId; } });
const getToastPositionStyles = (position) => {
switch (position) {
case 'top-left':
return (0, styled_components_1.css) `
top: 40px;
left: 30px;
`;
case 'top-middle':
return (0, styled_components_1.css) `
top: 40px;
left: 50%;
transform: translateX(-50%);
`;
case 'top-right':
return (0, styled_components_1.css) `
top: 40px;
right: 30px;
`;
case 'bottom-left':
return (0, styled_components_1.css) `
bottom: 40px;
left: 30px;
`;
case 'bottom-middle':
return (0, styled_components_1.css) `
bottom: 40px;
left: 50%;
transform: translateX(-50%);
`;
case 'bottom-right':
default:
return (0, styled_components_1.css) `
bottom: 40px;
right: 30px;
`;
}
};
const ToastContainer = styled_components_1.default.div `
position: fixed;
${({ $position }) => getToastPositionStyles($position)}
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: 999999990;
width: 320px;
max-width: calc(100vw - 32px);
`;
const ContentContainer = styled_components_1.default.div `
display: flex;
flex-direction: column;
align-items: flex-start;
width: 80%;
gap: 2px;
`;
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 DescriptionContainer = styled_components_1.default.div `
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
`;
const DescriptionText = styled_components_1.default.span `
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin: 0;
font-family: var(--pw-int-font-family);
color: #313338;
width: 100%;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
overflow-wrap: anywhere;
white-space: ${({ $expanded }) => ($expanded ? 'pre-wrap' : 'nowrap')};
`;
const ExpandButton = styled_components_1.default.div `
display: flex;
align-items: center;
font-family: var(--pw-int-font-family);
font-size: 12px;
color: #6B7280;
cursor: pointer;
&:hover {
color: #4B5563;
}
`;
const LinkText = styled_components_1.default.span `
font-size: 14px;
font-weight: 400;
line-height: 18px;
cursor: pointer;
color: #0056D0;
font-family: var(--pw-int-font-family);
`;
const ExternalArrow = styled_components_1.default.span `
display: inline-block;
margin-left: 4px;
`;
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