StakeBoard • white & red

StakeBoard

0x4f3a…1b2c

<!-- stats -->
<div class="summary-grid">
  <div class="stat-card">
    <div class="stat-label"><i class="fas fa-coins"></i> Total staked</div>
    <div class="stat-value">$2,418,320</div>
    <div class="stat-sub"><i class="fas fa-arrow-up"></i> +12.4% this month</div>
  </div>
  <div class="stat-card">
    <div class="stat-label"><i class="fas fa-percent"></i> Avg. APY</div>
    <div class="stat-value">14.6%</div>
    <div class="stat-sub"><i class="fas fa-arrow-up"></i> +1.2% vs last week</div>
  </div>
  <div class="stat-card">
    <div class="stat-label"><i class="fas fa-user-group"></i> Active stakers</div>
    <div class="stat-value">1,284</div>
    <div class="stat-sub"><i class="fas fa-arrow-up"></i> +43 new</div>
  </div>
  <div class="stat-card">
    <div class="stat-label"><i class="fas fa-clock"></i> Rewards (24h)</div>
    <div class="stat-value">$4,932</div>
    <div class="stat-sub"><i class="fas fa-arrow-up"></i> +8.2%</div>
  </div>
</div>

<!-- stake table -->
<div class="section-title">
  <h2><i class="fas fa-bolt"></i>Active stakes</h2>
  <a href="#"><i class="fas fa-arrow-right"></i> View all</a>
</div>

<div class="stake-table-wrap">
  <table>
    <thead>
      <tr>
        <th>Asset</th>
        <th>Staked</th>
        <th>APY</th>
        <th>Liquidity</th>
        <th>Progress</th>
        <th style="text-align:right;">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="asset-cell">
            <div class="asset-icon">₿</div>
            <div>
              <span class="asset-name">Bitcoin</span>
              <span class="asset-symbol">BTC</span>
            </div>
          </div>
        </td>
        <td><span style="font-weight:600;">124.7</span> BTC</td>
        <td><span class="badge green">8.2%</span></td>
        <td>$8.4M</td>
        <td>
          <div class="progress-indicator">
            <div class="progress-track"><div class="progress-fill high" style="width:78%"></div></div>
            <span style="font-size:0.75rem; font-weight:500;">78%</span>
          </div>
        </td>
        <td style="text-align:right;"><span class="action-btn"><i class="fas fa-chevron-circle-right"></i> manage</span></td>
      </tr>
      <tr>
        <td>
          <div class="asset-cell">
            <div class="asset-icon" style="background:#f5e6e6; color:#a11f1f;">◆</div>
            <div>
              <span class="asset-name">Ethereum</span>
              <span class="asset-symbol">ETH</span>
            </div>
          </div>
        </td>
        <td><span style="font-weight:600;">3,420</span> ETH</td>
        <td><span class="badge">5.6%</span></td>
        <td>$12.1M</td>
        <td>
          <div class="progress-indicator">
            <div class="progress-track"><div class="progress-fill" style="width:43%"></div></div>
            <span style="font-size:0.75rem; font-weight:500;">43%</span>
          </div>
        </td>
        <td style="text-align:right;"><span class="action-btn"><i class="fas fa-chevron-circle-right"></i> manage</span></td>
      </tr>
      <tr>
        <td>
          <div class="asset-cell">
            <div class="asset-icon" style="background:#fce8e0; color:#a11f1f;">●</div>
            <div>
              <span class="asset-name">Solana</span>
              <span class="asset-symbol">SOL</span>
            </div>
          </div>
        </td>
        <td><span style="font-weight:600;">52,800</span> SOL</td>
        <td><span class="badge orange">11.3%</span></td>
        <td>$5.6M</td>
        <td>
          <div class="progress-indicator">
            <div class="progress-track"><div class="progress-fill medium" style="width:62%"></div></div>
            <span style="font-size:0.75rem; font-weight:500;">62%</span>
          </div>
        </td>
        <td style="text-align:right;"><span class="action-btn"><i class="fas fa-chevron-circle-right"></i> manage</span></td>
      </tr>
      <tr>
        <td>
          <div class="asset-cell">
            <div class="asset-icon" style="background:#f5e6e6; color:#a11f1f;">✦</div>
            <div>
              <span class="asset-name">Cardano</span>
              <span class="asset-symbol">ADA</span>
            </div>
          </div>
        </td>
        <td><span style="font-weight:600;">2.1M</span> ADA</td>
        <td><span class="badge">4.8%</span></td>
        <td>$3.2M</td>
        <td>
          <div class="progress-indicator">
            <div class="progress-track"><div class="progress-fill" style="width:31%"></div></div>
            <span style="font-size:0.75rem; font-weight:500;">31%</span>
          </div>
        </td>
        <td style="text-align:right;"><span class="action-btn"><i class="fas fa-chevron-circle-right"></i> manage</span></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- footer -->
<div class="stakeboard-footer">
  <div class="footer-links">
    <a href="#"><i class="fas fa-chart-pie"></i> Analytics</a>
    <a href="#"><i class="fas fa-rotate"></i> History</a>
    <a href="#"><i class="fas fa-file-invoice"></i> Rewards</a>
  </div>
  <div>
    <i class="fas fa-circle-check" style="color:#b31b1b;"></i> 
    <span style="font-weight:500;">Last update: 2 min ago</span>
  </div>
</div>
Scroll to Top