Paginate the live payment proof feed (Show more / Show fewer)
The feed showed only the latest 12 of 136 recorded payouts. Now: - chain.getPayoutsPublic(offset,limit) returns a page of the full reversed history plus total/offset/limit/hasMore (limit capped 100). - /api/public/payouts accepts ?offset & ?limit (defaults 0/40, so the live poll + toast detection are unchanged). - payouts.js keeps a deduped store keyed by payout key; the live poll refreshes the recent page while "Show more" pulls older pages 12 at a time (with slight overlap so a newly-arrived payout can't open a gap), and "Show fewer" collapses back. Verified in-browser: 12 → 48 → 136 rows, button flips to "Show fewer", collapses to 12, 0 console errors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
@@ -329,14 +329,21 @@ function isInTeam(id, rootId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function getPayoutsPublic() {
|
||||
const recent = state ? state.payouts.slice(-40).reverse() : [];
|
||||
function getPayoutsPublic(offset = 0, limit = 40) {
|
||||
const off = Math.max(0, Number.isFinite(offset) ? Math.floor(offset) : 0);
|
||||
const lim = Math.min(100, Math.max(1, Number.isFinite(limit) ? Math.floor(limit) : 40));
|
||||
const reversed = state ? state.payouts.slice().reverse() : []; // most recent first
|
||||
const page = reversed.slice(off, off + lim);
|
||||
return {
|
||||
updatedAt: state && state.updatedAt,
|
||||
ready: !!(state && state.snapshotAt),
|
||||
totals: state ? { payouts: state.totals.count, pol: +state.totals.pol.toFixed(2), members: Object.keys(state.members).length } : null,
|
||||
contract: CONTRACT,
|
||||
payouts: recent.map(p => ({
|
||||
total: reversed.length,
|
||||
offset: off,
|
||||
limit: lim,
|
||||
hasMore: off + lim < reversed.length,
|
||||
payouts: page.map(p => ({
|
||||
key: p.key, kind: p.kind, toId: p.toId, fromId: p.fromId,
|
||||
level: p.level, levelName: levelName(p.level), pol: p.pol, tx: p.tx, ts: p.ts, desc: p.desc,
|
||||
toAccount: state.members[p.toId] ? state.members[p.toId].account : undefined,
|
||||
|
||||
+63
-8
@@ -55,20 +55,75 @@
|
||||
const meta=p.kind==='referral'?`Direct referral reward from #${p.fromId}'s entry`:`${esc(p.desc||p.levelName)} — from #${p.fromId}`;
|
||||
return `<div class="pp-row"><div class="pp-icon">💸</div><div class="pp-body"><strong>Member #${p.toId} received ${fmtPol(p.pol)} POL</strong><div class="pp-meta">${meta} · ${when}</div></div>${verify}</div>`;
|
||||
}
|
||||
function render(d){
|
||||
// Paginated feed: keep a deduped store of payouts (by key), most-recent first.
|
||||
// The live poll refreshes the top (recent) page; "Show more" pulls older pages.
|
||||
const PAGE=12;
|
||||
const store=new Map(); // key -> payout
|
||||
let total=0, visible=PAGE, fetching=false;
|
||||
const allSorted=()=>[...store.values()].sort((a,b)=>(b.ts||0)-(a.ts||0));
|
||||
|
||||
function ingest(d){
|
||||
if(d&&Array.isArray(d.payouts))for(const p of d.payouts)store.set(p.key,p);
|
||||
if(d&&typeof d.total==='number')total=Math.max(total,d.total);
|
||||
}
|
||||
function updateTotals(d){
|
||||
const totals=document.getElementById('payoutTotals');
|
||||
if(totals&&d&&d.totals)totals.innerHTML=`<div class="fact"><small>Members on-chain</small><strong>${d.totals.members}</strong></div><div class="fact"><small>Payouts recorded</small><strong>${d.totals.payouts}</strong></div><div class="fact"><small>POL paid to members</small><strong>${Math.round(d.totals.pol).toLocaleString()}</strong></div>`;
|
||||
}
|
||||
|
||||
function ensureMoreBtn(){
|
||||
let btn=document.getElementById('ppMore');
|
||||
if(!btn){
|
||||
const feed=document.getElementById('payoutFeed');
|
||||
if(!feed)return null;
|
||||
btn=document.createElement('button');
|
||||
btn.id='ppMore';btn.type='button';btn.className='btn btn-secondary pp-more';
|
||||
btn.addEventListener('click',onMoreClick);
|
||||
feed.parentNode.insertBefore(btn,feed.nextSibling);
|
||||
}
|
||||
return btn;
|
||||
}
|
||||
function renderMoreBtn(loadedLen){
|
||||
const btn=ensureMoreBtn();if(!btn)return;
|
||||
const cap=Math.max(total,loadedLen);
|
||||
if(cap<=PAGE){btn.style.display='none';return}
|
||||
btn.style.display='';
|
||||
const showingNow=Math.min(visible,cap);
|
||||
if(showingNow<cap){btn.dataset.mode='more';btn.textContent=`Show more · showing ${showingNow} of ${cap}`;}
|
||||
else{btn.dataset.mode='less';btn.textContent='Show fewer';}
|
||||
}
|
||||
function renderFeed(){
|
||||
const feed=document.getElementById('payoutFeed');
|
||||
if(!feed)return;
|
||||
const totals=document.getElementById('payoutTotals');
|
||||
if(totals&&d.totals)totals.innerHTML=`<div class="fact"><small>Members on-chain</small><strong>${d.totals.members}</strong></div><div class="fact"><small>Payouts recorded</small><strong>${d.totals.payouts}</strong></div><div class="fact"><small>POL paid to members</small><strong>${Math.round(d.totals.pol).toLocaleString()}</strong></div>`;
|
||||
if(!d.payouts||!d.payouts.length){feed.innerHTML='<div class="empty">Reading the blockchain… check back in a minute.</div>';return}
|
||||
feed.innerHTML=d.payouts.slice(0,12).map(rowHtml).join('');
|
||||
const all=allSorted();
|
||||
if(!all.length){feed.innerHTML='<div class="empty">Reading the blockchain… check back in a minute.</div>';return}
|
||||
feed.innerHTML=all.slice(0,visible).map(rowHtml).join('');
|
||||
renderMoreBtn(all.length);
|
||||
}
|
||||
|
||||
async function fetchPage(offset,limit){
|
||||
if(fetching)return null;
|
||||
fetching=true;
|
||||
try{const r=await fetch(`/api/public/payouts?offset=${offset}&limit=${limit}`);const d=await r.json();ingest(d);updateTotals(d);return d}
|
||||
catch(e){return null}
|
||||
finally{fetching=false}
|
||||
}
|
||||
async function onMoreClick(){
|
||||
const btn=document.getElementById('ppMore');
|
||||
if(btn&&btn.dataset.mode==='less'){
|
||||
visible=PAGE;renderFeed();
|
||||
const sec=document.getElementById('proof');if(sec)sec.scrollIntoView({behavior:'smooth',block:'start'});
|
||||
return;
|
||||
}
|
||||
visible+=PAGE;
|
||||
if(visible>store.size&&store.size<total){await fetchPage(Math.max(0,store.size-4),PAGE+8);}
|
||||
renderFeed();
|
||||
}
|
||||
|
||||
async function poll(){
|
||||
let d;
|
||||
try{const r=await fetch('/api/public/payouts');d=await r.json()}catch(e){return}
|
||||
const d=await fetchPage(0,40); // recent page drives the live feed + toasts
|
||||
if(!d||!d.payouts)return;
|
||||
render(d);
|
||||
renderFeed();
|
||||
const now=Date.now()/1000;
|
||||
const fresh=d.payouts.filter(p=>p.ts&&(now-p.ts)<TOAST_FRESH_S&&!seen.has(p.key));
|
||||
fresh.slice(0,TOAST_MAX_QUEUE).reverse().forEach(p=>{remember(p.key);enqueue(p)});
|
||||
|
||||
@@ -61,6 +61,7 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
|
||||
.pp-passed{color:#f2c768;font-size:12px;margin-top:3px}
|
||||
.pp-verify{flex:0 0 auto;font-size:13px;color:var(--teal);text-decoration:none;border:1px solid rgba(78,214,203,.35);border-radius:9px;padding:7px 10px;white-space:nowrap}
|
||||
.pp-verify:hover{background:rgba(78,214,203,.1)}
|
||||
.pp-more{display:block;margin:14px auto 0}
|
||||
.pp-note{color:#8498aa;font-size:12.5px;margin-top:14px;line-height:1.5}
|
||||
.pp-stack{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;pointer-events:none}
|
||||
.pp-toast{pointer-events:auto;display:block;width:min(330px,calc(100vw - 32px));background:linear-gradient(145deg,#132d45,#0a1b2b);border:1px solid #38556b;border-left:3px solid var(--ok);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow);text-decoration:none;color:var(--text);opacity:0;transform:translateY(14px);transition:.4s ease}
|
||||
|
||||
@@ -368,7 +368,10 @@ async function handleApi(req,res,pathname){
|
||||
}catch(e){return json(res,502,{error:e.message||'Lookup failed'})}
|
||||
}
|
||||
if(req.method==='GET'&&pathname==='/api/public/payouts'){
|
||||
return json(res,200,chain.getPayoutsPublic(),{'Cache-Control':'public, max-age=20'});
|
||||
const q=new URL(req.url,'http://x').searchParams;
|
||||
const offset=Number(q.get('offset')||0);
|
||||
const limit=Number(q.get('limit')||40);
|
||||
return json(res,200,chain.getPayoutsPublic(offset,limit),{'Cache-Control':'public, max-age=20'});
|
||||
}
|
||||
if(req.method==='GET'&&pathname==='/api/public/org-stats'){
|
||||
const root=Number(getConfig().orgRootId||21);
|
||||
|
||||
Reference in New Issue
Block a user