App.jsx

import { useEffect, useState, useMemo } from 'react';
import './App.css';

function App() {
  const [txStatus, setTxStatus] = useState({ type: '', message: '' });
  const [showTxStatus, setShowTxStatus] = useState(false);

  // Demo: Show popup on mount
  useEffect(() => {
    setTxStatus({ type: 'success', message: 'Token info refreshed' });
  }, []);

  // Auto-hide popup after 3 seconds
  useEffect(() => {
    if (txStatus.message) {
      setShowTxStatus(true);
      const timer = setTimeout(() => setShowTxStatus(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [txStatus]);

  return (
    <main style={{ padding: '2em' }}>
      {txStatus.message && (
        <div className={`tx-status-popup ${txStatus.type}${!showTxStatus ? ' hide' : ''}`}
             role="alert"
             aria-live="polite">
          <span className="tx-status-popup__icon">
            {txStatus.type === 'success' ? '✅' : txStatus.type === 'error' ? '❌' : 'ℹ️'}
          </span>
          <span>{txStatus.message}</span>
          <button className="tx-status-popup__close" onClick={() => setShowTxStatus(false)} title="Close notification">×</button>
        </div>
      )}
      <h1>Styled Popup Demo</h1>
      <button onClick={() => setTxStatus({ type: 'success', message: 'Token info refreshed' })}>Show Success</button>
      <button onClick={() => setTxStatus({ type: 'error', message: 'Something went wrong' })} style={{ marginLeft: '1em' }}>Show Error</button>
    </main>
  );
}

export default App;