feat(mse): separate LD lending tokens in spot wallet view

LD* assets split into a collapsible sub-table "Lending Tokenları"
below the main spot table, with a note that they mirror Simple Earn positions.
Main spot list stays clean; LD section hidden when empty.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mukan Erkin TÖRÜK 2026-04-25 12:19:45 +03:00
parent bad653ff2d
commit 69420ab9e4

View file

@ -56,6 +56,9 @@
.loading { padding: 32px 18px; color: var(--muted); font-size: 13px; text-align: center; } .loading { padding: 32px 18px; color: var(--muted); font-size: 13px; text-align: center; }
.usdt-row td { background: rgba(46,204,113,.04); } .usdt-row td { background: rgba(46,204,113,.04); }
.usdt-row .asset-name { color: var(--green); } .usdt-row .asset-name { color: var(--green); }
.ld-section { margin-top: 16px; }
.ld-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 18px 6px; border-top: 1px solid var(--border); background: rgba(243,156,18,.03); }
.ld-label span { color: var(--yellow); }
</style> </style>
</head> </head>
<body> <body>
@ -82,6 +85,13 @@
<thead><tr><th>Varlık</th><th>Kullanılabilir</th><th>Kilitli</th></tr></thead> <thead><tr><th>Varlık</th><th>Kullanılabilir</th><th>Kilitli</th></tr></thead>
<tbody id="spot-body"><tr><td colspan="3" class="loading">Yükleniyor...</td></tr></tbody> <tbody id="spot-body"><tr><td colspan="3" class="loading">Yükleniyor...</td></tr></tbody>
</table> </table>
<div id="ld-section" style="display:none">
<div class="ld-label">Lending Tokenları <span>(Simple Earn — Spot yansıması)</span></div>
<table>
<thead><tr><th>Varlık</th><th>Kullanılabilir</th><th>Kilitli</th></tr></thead>
<tbody id="ld-body"></tbody>
</table>
</div>
</section> </section>
</div> </div>
@ -162,23 +172,39 @@ async function loadSpot() {
const balances = await res.json(); const balances = await res.json();
if (!balances.length) { tbody.innerHTML = '<tr><td colspan="3" class="empty">Bakiye yok</td></tr>'; return; } if (!balances.length) { tbody.innerHTML = '<tr><td colspan="3" class="empty">Bakiye yok</td></tr>'; return; }
balances.sort((a, b) => { const spot = balances.filter(b => !b.asset.startsWith('LD'));
const ld = balances.filter(b => b.asset.startsWith('LD'));
spot.sort((a, b) => {
if (a.asset === 'USDT') return -1; if (a.asset === 'USDT') return -1;
if (b.asset === 'USDT') return 1; if (b.asset === 'USDT') return 1;
return (b.free + b.locked) - (a.free + a.locked); return (b.free + b.locked) - (a.free + a.locked);
}); });
const usdt = balances.find(b => b.asset === 'USDT'); const usdt = spot.find(b => b.asset === 'USDT');
if (usdt) { if (usdt) {
document.getElementById('usdt-total').textContent = document.getElementById('usdt-total').textContent =
`${fmt(usdt.free)} serbest / ${fmt(usdt.free + usdt.locked)} USDT toplam`; `${fmt(usdt.free)} serbest / ${fmt(usdt.free + usdt.locked)} USDT toplam`;
} }
tbody.innerHTML = balances.map(b => `<tr class="${b.asset === 'USDT' ? 'usdt-row' : ''}"> function rowHtml(b) {
return `<tr class="${b.asset === 'USDT' ? 'usdt-row' : ''}">
<td><span class="asset-name">${b.asset}</span></td> <td><span class="asset-name">${b.asset}</span></td>
<td>${fmt(b.free)}</td> <td>${fmt(b.free)}</td>
<td>${b.locked > 0 ? `<span class="val-locked">${fmt(b.locked)}</span>` : '<span style="color:var(--muted)"></span>'}</td> <td>${b.locked > 0 ? `<span class="val-locked">${fmt(b.locked)}</span>` : '<span style="color:var(--muted)"></span>'}</td>
</tr>`).join(''); </tr>`;
}
tbody.innerHTML = spot.map(rowHtml).join('');
const ldSection = document.getElementById('ld-section');
if (ld.length) {
ld.sort((a, b) => (b.free + b.locked) - (a.free + a.locked));
document.getElementById('ld-body').innerHTML = ld.map(rowHtml).join('');
ldSection.style.display = '';
} else {
ldSection.style.display = 'none';
}
} }
async function loadEarn() { async function loadEarn() {