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

Dashboard 'My Next Step' panel + funded badge

Browse Source 
Adds a synthesized next-step panel to /my: the level ladder (you-are-here →
upgrade-next), the single clearest action (qualify vs upgrade), and a funded
badge that checks the member's wallet against their next upgrade cost.

Privacy: the wallet balance is checked server-side (chain.balanceOf via
eth_getBalance) and ONLY a funded true/false is returned — the raw balance is
never exposed on the ID-addressable dashboard.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-17 06:33:59 -05:00
parent f4481a390b
commit a3e9d05f5d
5 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+18
View File
@@ -74,6 +74,24 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
.banner-cell .meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 2px 0}
.banner-cell .sz{font-weight:800;color:var(--text);font-size:15px}.banner-cell .use{color:var(--muted);font-size:12px;text-align:right}
.banner-cell .acts{display:flex;gap:8px;margin-top:12px}.banner-cell .acts .btn{flex:1}
/* dashboard "My Next Step" plan panel + mini level ladder */
.ns-card{background:linear-gradient(150deg,#12293f,#0b1b2b);border:1px solid #2a4a63;border-radius:16px;padding:18px 20px;margin:0 0 22px}
.ns-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ns-eyebrow{color:var(--teal);text-transform:uppercase;letter-spacing:1.6px;font-weight:800;font-size:12px}
.ns-badge{font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
.ns-badge.ok{background:rgba(123,224,161,.12);color:var(--ok);border:1px solid rgba(123,224,161,.35)}
.ns-badge.no{background:rgba(243,190,67,.1);color:#f2c768;border:1px solid rgba(243,190,67,.3)}
.ns-h{font-size:20px;font-weight:900;letter-spacing:-.3px;margin:2px 0 6px}
.ns-p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 15px}.ns-p strong{color:var(--text)}
.nladder{display:flex;gap:6px}
.nlv{flex:1;text-align:center;background:#0d2135;border:1px solid #203c53;border-radius:9px;padding:9px 3px;position:relative}
.nlv .nlvn{font-size:11.5px;font-weight:700;color:#b7c6d5;line-height:1.1;display:block}
.nlv.done{opacity:.5}
.nlv.you{background:linear-gradient(160deg,#f3be43,#f7d074);border-color:#f3be43}.nlv.you .nlvn{color:#14202e}
.nlv.next{background:rgba(78,214,203,.12);border:1.5px solid var(--teal)}.nlv.next .nlvn{color:#7fe9df}
.nlvt{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:900;letter-spacing:.4px;padding:1.5px 6px;border-radius:99px;white-space:nowrap}
.nlv.you .nlvt{background:#14202e;color:#f3be43}.nlv.next .nlvt{background:var(--teal);color:#08222b}
@media(max-width:560px){.nladder{flex-wrap:wrap}.nlv{flex:0 0 calc(25% - 5px)}}
.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)}