diff --git a/static/components/BlocksTable.js b/static/components/BlocksTable.js index 8ca5078..a2cf708 100644 --- a/static/components/BlocksTable.js +++ b/static/components/BlocksTable.js @@ -25,7 +25,7 @@ const normalize = (raw) => { }; }; -export default function BlocksTable({ live }) { +export default function BlocksTable({ live, onDisableLive }) { const [blocks, setBlocks] = useState([]); const [page, setPage] = useState(0); const [totalPages, setTotalPages] = useState(0); @@ -118,6 +118,7 @@ export default function BlocksTable({ live }) { // Go to a page const goToPage = (newPage) => { if (newPage >= 0 && fork != null) { + if (live) onDisableLive?.(); fetchBlocks(newPage, fork); } }; @@ -252,9 +253,8 @@ export default function BlocksTable({ live }) { 'button', { class: 'pill', - disabled: live || page === 0 || loading, + disabled: page === 0 || loading, onClick: () => goToPage(page - 1), - style: 'cursor:pointer;', }, 'Previous', ), @@ -267,9 +267,8 @@ export default function BlocksTable({ live }) { 'button', { class: 'pill', - disabled: live || page >= totalPages - 1 || loading, + disabled: page >= totalPages - 1 || loading, onClick: () => goToPage(page + 1), - style: 'cursor:pointer;', }, 'Next', ), diff --git a/static/components/TransactionsTable.js b/static/components/TransactionsTable.js index de02016..8f42410 100644 --- a/static/components/TransactionsTable.js +++ b/static/components/TransactionsTable.js @@ -100,7 +100,7 @@ function normalize(raw) { } // ---------- component ---------- -export default function TransactionsTable({ live }) { +export default function TransactionsTable({ live, onDisableLive }) { const [transactions, setTransactions] = useState([]); const [page, setPage] = useState(0); const [totalPages, setTotalPages] = useState(0); @@ -191,6 +191,7 @@ export default function TransactionsTable({ live }) { // Go to a page const goToPage = (newPage) => { if (newPage >= 0 && fork != null) { + if (live) onDisableLive?.(); fetchTransactions(newPage, fork); } }; @@ -298,9 +299,8 @@ export default function TransactionsTable({ live }) { 'button', { class: 'pill', - disabled: live || page === 0 || loading, + disabled: page === 0 || loading, onClick: () => goToPage(page - 1), - style: 'cursor:pointer;', }, 'Previous', ), @@ -313,9 +313,8 @@ export default function TransactionsTable({ live }) { 'button', { class: 'pill', - disabled: live || page >= totalPages - 1 || loading, + disabled: page >= totalPages - 1 || loading, onClick: () => goToPage(page + 1), - style: 'cursor:pointer;', }, 'Next', ), diff --git a/static/pages/Home.js b/static/pages/Home.js index ed76799..26b34eb 100644 --- a/static/pages/Home.js +++ b/static/pages/Home.js @@ -41,8 +41,8 @@ export default function HomeView() { ), ), h('section', { class: 'two-columns twocol' }, - h(BlocksTable, { live }), - h(TransactionsTable, { live }), + h(BlocksTable, { live, onDisableLive: () => setLive(false) }), + h(TransactionsTable, { live, onDisableLive: () => setLive(false) }), ), ); } diff --git a/static/styles.css b/static/styles.css index 336e4f8..9bbba3c 100644 --- a/static/styles.css +++ b/static/styles.css @@ -152,6 +152,14 @@ tr.ph td { opacity: 0.35; } +button.pill { + cursor: pointer; +} +button.pill:disabled { + opacity: 0.35; + cursor: default; +} + @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 4px #ff4444, 0 0 8px #ff4444; } 50% { box-shadow: 0 0 8px #ff4444, 0 0 16px #ff4444, 0 0 24px #ff6666; }