marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Paginate the live payment proof feed (Show more / Show fewer)

Browse Source 
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
2026-08-15 11:16:12 -05:00
parent 95bc5bc90f
commit d36a405581
4 changed files with 88 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+11 -10
View File
@@ -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}
@@ -143,13 +144,13 @@ a.brand{text-decoration:none;color:inherit}
.team-stat .num.ok{color:var(--ok)}
.team-stat small{display:block;color:var(--muted);margin-top:9px;font-size:13px;line-height:1.45}
@media(max-width:720px){.team-stats{grid-template-columns:1fr 1fr}}
/* How-you-get-paid diagram page */
.pay-entry{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 0}
.pay-node{background:#0d2236;border:1px solid #2a4a66;border-radius:14px;padding:16px 20px;text-align:center;font-weight:800;line-height:1.3}
.pay-you{border-color:var(--gold);color:var(--gold)}
.pay-join{color:var(--teal);border-color:rgba(78,214,203,.4)}
.pay-arrow-up{display:flex;flex-direction:column;align-items:center;color:var(--ok);font-weight:900;font-size:22px;line-height:1}
.pay-arrow-up span{font-size:13px;margin-bottom:2px;white-space:nowrap}
.pay-diagram-wrap{overflow-x:auto;margin-top:8px}
.pay-diagram{width:100%;min-width:640px;height:auto;display:block}
/* How-you-get-paid diagram page */
.pay-entry{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 0}
.pay-node{background:#0d2236;border:1px solid #2a4a66;border-radius:14px;padding:16px 20px;text-align:center;font-weight:800;line-height:1.3}
.pay-you{border-color:var(--gold);color:var(--gold)}
.pay-join{color:var(--teal);border-color:rgba(78,214,203,.4)}
.pay-arrow-up{display:flex;flex-direction:column;align-items:center;color:var(--ok);font-weight:900;font-size:22px;line-height:1}
.pay-arrow-up span{font-size:13px;margin-bottom:2px;white-space:nowrap}
.pay-diagram-wrap{overflow-x:auto;margin-top:8px}
.pay-diagram{width:100%;min-width:640px;height:auto;display:block}