tabler/preview/pages/dashboard-crypto.html

---
title: Crypto Dashboard
page-header: Crypto Dashboard
page-menu: dashboards.crypto
page-libs: [apexcharts]
layout: default
permalink: dashboard-crypto.html
---

{% assign btc = crypto-currencies | where: "symbol", "BTC" | first %}
{% assign ltc = crypto-currencies | where: "symbol", "LTC" | first %}
{% assign eth = crypto-currencies | where: "symbol", "ETH" | first %}
{% assign xmr = crypto-currencies | where: "symbol", "XMR" | first %}
{% assign btc_balance = 2.30 %}
{% assign btc_price_num = btc.price | remove: "$" | remove: "," | plus: 0 %}
{% assign total_usd_raw = btc_price_num | times: btc_balance %}
{% assign ltc_price_num = ltc.price | remove: "$" | remove: "," | plus: 0 %}
{% assign eth_price_num = eth.price | remove: "$" | remove: "," | plus: 0 %}
{% assign xmr_price_num = xmr.price | remove: "$" | remove: "," | plus: 0 %}
{% assign ltc_btc = ltc_price_num | divided_by: btc_price_num %}
{% assign eth_btc = eth_price_num | divided_by: btc_price_num %}
{% assign xmr_btc = xmr_price_num | divided_by: btc_price_num %}

<div class="row row-cards">
   <div class="col-12">
      <div class="row row-cards">
         <div class="col-12 col-md-6 col-xxl">
            <div class="card">
               <div class="card-body">
                  <div class="row"> 
                     <div class="col mt-0">
                        <h5 class="card-title">Total balance</h5>
                     </div>
                     <div class="col-auto">
                        {% include "ui/avatar.html" icon="currency-dollar" %}
                     </div>
                  </div>
                  <div class="mb-1">
                     <span class="h3">${{ total_usd_raw | round | format_number }}</span>
                     <span class="text-muted">{{ btc_balance }} {{ btc.symbol }}</span>
                  </div>
                  <div class="mb-0">
                     {% include "ui/trending.html" value=btc.p24h %}
                     <span class="text-muted">Since last week</span>
                  </div>
               </div>
            </div>
         </div>
      
         <div class="col-12 col-md-6 col-xxl">
            <div class="card">
               <div class="card-body">
                  <div class="row">
                     <div class="col mt-0">
                        <h5 class="card-title">USD/BTC</h5>
                     </div>
                     <div class="col-auto">
                        {% include "ui/avatar.html" icon="currency-bitcoin" %}
                     </div>
                  </div>
                  <div class="mb-1">
                     <span class="h3">{{ btc.price }}</span>
                     <span class="text-muted">{{ btc.price}}</span>
                  </div>
                  <div class="mb-0">
                     <span class="text-muted">Volume: {{ btc.volume-24h }}</span>
                  </div>
               </div>
            </div>
         </div>
      
         <div class="col-12 col-md-6 col-xxl">
            <div class="card">
               <div class="card-body">
                  <div class="row">
                     <div class="col mt-0">
                        <h5 class="card-title">LTC/BTC</h5>
                     </div>
                     <div class="col-auto">
                        {% include "ui/avatar.html" icon="currency-litecoin" %}
                     </div>
                  </div>
                  <div class="mb-1">
                     <span class="h3">{{ ltc_btc | round: 8 }}</span>
                     <span class="text-muted">{{ ltc.price }}</span>
                  </div>
                  <div class="mb-0">
                     <span class="text-muted">Volume: {{ ltc.volume-24h | remove: "$" }}</span>
                  </div>
               </div>
            </div>
         </div>
      
         <div class="col-12 col-md-6 col-xxl">
            <div class="card">
               <div class="card-body">
                  <div class="row">
                     <div class="col mt-0">
                        <h5 class="card-title">ETH/BTC</h5>
                     </div>
                     <div class="col-auto">
                        {% include "ui/avatar.html" icon="currency-ethereum" %}
                     </div>
                  </div>
                  <div class="mb-1">
                     <span class="h3">{{ eth_btc | round: 8 }}</span>
                     <span class="text-muted">{{ eth.price }}</span>
                  </div>
                  <div class="mb-0">
                     <span class="text-muted">Volume: {{ eth.volume-24h | remove: "$" }}</span>
                  </div>
               </div>
            </div>
         </div>
      
         <div class="col-12 col-md-6 col-xxl">
            <div class="card">
               <div class="card-body">
                  <div class="row">
                     <div class="col mt-0">
                        <h5 class="card-title">XMR/BTC</h5>
                     </div>
                     <div class="col-auto">
                        {% include "ui/avatar.html" icon="currency-monero" %}
                     </div>
                  </div>
                  <div class="mb-1">
                     <span class="h3">{{ xmr_btc | round: 8 }}</span>
                     <span class="text-muted">{{ xmr.price }}</span>
                  </div>
                  <div class="mb-0">
                     <span class="text-muted">Volume: {{ xmr.volume-24h | remove: "$" }}</span>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-12">
      <div class="row row-cards">
         <div class="col-12 col-lg-5">
            <div class="card">
               <div class="card-header">
                  <h5 class="card-title mb-0">Markets</h5>
                  <div class="card-actions">
                     {% include "ui/card-dropdown.html" %}
                  </div>
               </div>
               <table class="table card-table table-striped">
                  <thead>
                     <tr>
                        <th>
                           {% include "ui/switch-icon.html" icon="star" icon-b-color="yellow" variant="slide-up" %}
                        </th>
                        <th>Coin</th>
                        <th>Price</th>
                        <th class="d-none d-xl-table-cell">Volume</th>
                        <th class="d-none d-xl-table-cell text-end">Change</th>
                     </tr>
                  </thead>
                  <tbody>
                     {% for market in crypto-markets limit: 10 %}
                     <tr>
                        <td>
                           {% include "ui/switch-icon.html" icon="star" icon-b-color="yellow" variant="slide-up" %}
                        </td>
                        <td>{{ market.coin }}</td>
                        <td class="">{{ market.price }}</td>
                        <td class="d-none d-xl-table-cell">{{ market.volume }}</td>
                        <td class="d-none d-xl-table-cell text-end">
                           {% include "ui/trending.html" value=market.change %}
                        </td>
                     </tr>
                     {% endfor %}
                  </tbody>
               </table>
            </div>
         </div>
      
         <div class="col-12 col-lg-7">
            <div class="card">
               <div class="card-header">
                  <h5 class="card-title mb-0">LTC/BTC</h5>
                  <div class="card-actions">
                     {% include "ui/nav-segmented.html" items="1m,5m,30m,1h,1d" name="timeframe" size="sm" default=2 %}
                  </div>
               </div>
                <div class="card-body">
                   {% include "ui/chart.html" chart-id="dashboard-crypto-candlestick" height=28 %}
                </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-12">
      <div class="row row-cards">
         <div class="col-12 col-lg-12 col-xxl-3">
            <div class="card">
               <div class="card-header">
                  <h5 class="card-title mb-0">Operations</h5>
                  <div class="card-actions">
                     {% include "ui/nav-segmented.html" items="Buy,Sell,Send" name="operations" size="sm" %}
                  </div>
               </div>
      
               <div class="card-body">
                  <p>Place new order:</p>
      
                  <div class="input-group mb-3">
                     <label class="input-group-text">Amount</label>
                     <select class="form-select">
                        {% for currency in crypto-currencies limit: 20 %}
                        <option value="{{ currency.symbol }}"{% if forloop.first %} selected{% endif %}>{{ currency.symbol }}</option>
                        {% endfor %}
                     </select>
                     <input type="text" class="form-control" value="0.25">
                  </div>
      
                  <div class="input-group mb-3">
                     <label class="input-group-text">Price</label>
                     <input type="text" class="form-control" readonly="" value="23,077.05">
                     <label class="input-group-text">$</label>
                  </div>
      
                  <div class="input-group mb-3">
                     <label class="input-group-text">Total</label>
                     <input type="text" class="form-control" readonly="" value="5,769.27">
                     <label class="input-group-text">$</label>
                  </div>
      
                  <div class="d-grid">
                     <button type="button" class="btn btn-primary mb-3">Process to wallet</button>
                  </div>
      
                  <p class="text-muted mb-0 small">The final amount could change depending on current market conditions.</p>
               </div>
            </div>
         </div>
      
         <div class="col-12 col-lg-6 col-xxl">
            <div class="card">
               <div class="card-header">
                  <h5 class="card-title mb-0">Sell Orders</h5>
                  <div class="card-actions">
                     <button class="btn btn-sm">View all</button>
                  </div>
               </div>
               <table class="table card-table table-striped">
                  <thead>
                     <tr>
                        <th>Price</th>
                        <th class="d-none d-xl-table-cell">BTC</th>
                        <th>Sum(BTC)</th>
                     </tr>
                  </thead>
                  <tbody>
                     {% for order in crypto-orders.sell_orders %}
                     <tr>
                        <td>{{ order.price }}</td>
                        <td class="d-none d-xl-table-cell">{{ order.btc }}</td>
                        <td>{{ order.sum }}</td>
                     </tr>
                     {% endfor %}
                  </tbody>
               </table>
            </div>
         </div>
      
         <div class="col-12 col-lg-6 col-xxl">
            <div class="card">
               <div class="card-header">
                  <h5 class="card-title mb-0">Buy Orders</h5>
                  <div class="card-actions">
                     <button class="btn btn-sm">View all</button>
                  </div>
               </div>
               <table class="table card-table table-striped">
                  <thead>
                     <tr>
                        <th>Price</th>
                        <th class="d-none d-xl-table-cell">BTC</th>
                        <th>Sum(BTC)</th>
                     </tr>
                  </thead>
                  <tbody>
                     {% for order in crypto-orders.buy_orders %}
                     <tr>
                        <td>{{ order.price }}</td>
                        <td class="d-none d-xl-table-cell">{{ order.btc }}</td>
                        <td>{{ order.sum }}</td>
                     </tr>
                     {% endfor %}
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>