@arbius/aa-wallet
Version:
A secure and flexible Account Abstraction wallet implementation for Arbitrum One chain applications.
107 lines (106 loc) • 4.89 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.TransactionToast = void 0;
const react_1 = __importStar(require("react"));
const useTransactions_1 = require("../hooks/useTransactions");
const types_1 = require("../types");
const lucide_react_1 = require("lucide-react");
const TransactionToast = ({ position = 'bottom-right', autoClose = true, autoCloseTime = 5000, }) => {
const { transactions } = (0, useTransactions_1.useTransactions)();
const [visibleTxs, setVisibleTxs] = react_1.default.useState([]);
// Add new transactions
(0, react_1.useEffect)(() => {
setVisibleTxs(prev => [
...prev,
...transactions.filter(tx => !prev.find(vTx => vTx.id === tx.id))
]);
}, [transactions]);
// Update status of existing transactions
(0, react_1.useEffect)(() => {
setVisibleTxs(prev => prev.map(vTx => transactions.find(tx => tx.id === vTx.id) || vTx));
}, [transactions]);
// Auto-close completed transactions
(0, react_1.useEffect)(() => {
if (!autoClose)
return undefined;
const completedTxs = visibleTxs.filter(tx => tx.status === types_1.TransactionStatus.SUCCESS ||
tx.status === types_1.TransactionStatus.ERROR);
if (completedTxs.length > 0) {
const timers = completedTxs.map(tx => setTimeout(() => {
setVisibleTxs(prev => prev.filter(t => t.id !== tx.id));
}, autoCloseTime));
return () => {
timers.forEach(timer => clearTimeout(timer));
};
}
return undefined;
}, [visibleTxs, autoClose, autoCloseTime]);
const handleClose = (txId) => {
setVisibleTxs(prev => prev.filter(tx => tx.id !== txId));
};
const positionClass = {
'top-right': 'top-4 right-4',
'top-left': 'top-4 left-4',
'bottom-right': 'bottom-4 right-4',
'bottom-left': 'bottom-4 left-4',
}[position];
if (visibleTxs.length === 0) {
return null;
}
return (<div className={`fixed ${positionClass} z-50 space-y-2 max-w-md w-full`}>
{visibleTxs.map(tx => (<div key={tx.id} className="bg-white rounded-lg shadow-lg p-4 border border-gray-200 flex items-center">
<div className="mr-3">
{tx.status === types_1.TransactionStatus.PENDING && (<lucide_react_1.Loader className="h-5 w-5 text-blue-500 animate-spin"/>)}
{tx.status === types_1.TransactionStatus.SUCCESS && (<lucide_react_1.CheckCircle className="h-5 w-5 text-green-500"/>)}
{tx.status === types_1.TransactionStatus.ERROR && (<lucide_react_1.XCircle className="h-5 w-5 text-red-500"/>)}
</div>
<div className="flex-1">
<div className="font-medium">
{tx.status === types_1.TransactionStatus.PENDING && 'Transaction Pending'}
{tx.status === types_1.TransactionStatus.SUCCESS && 'Transaction Confirmed'}
{tx.status === types_1.TransactionStatus.ERROR && 'Transaction Failed'}
</div>
<div className="text-sm text-gray-500 truncate">
{tx.hash ? `${tx.hash.slice(0, 10)}...${tx.hash.slice(-8)}` : 'Processing...'}
</div>
</div>
<button onClick={() => handleClose(tx.id)} className="text-gray-400 hover:text-gray-600">
<lucide_react_1.XCircle className="h-4 w-4"/>
</button>
</div>))}
</div>);
};
exports.TransactionToast = TransactionToast;