<div class="stat-wrapper center-col space-bottom-2x">
  <span class="stat" id="calories"></span>
  <span class="stat-label">Calories Available</span>
</div>

<div class="center-col">
  <span class="btn primary earn-button daily-reward" onClick="requestReward()">Claim Daily Reward</span>
</div>

<script>
function renderRewardBtn(Reward) {
  const btn = document.querySelector('.earn-button');

  if (Reward.isEligible()) {
    btn.classList.add('daily-reward');
  } else {
    btn.classList.remove('daily-reward');
  }
}

$('.earn-button').click(() => renderRewardBtn(Reward));

renderRewardBtn(Reward);
Balance.render();
</script>
<div class="stat-wrapper center-col space-bottom-2x">
  <span class="stat" id="calories"></span>
  <span class="stat-label">Calories Available</span>
</div>

<div class="center-col">
  <span class="btn primary earn-button daily-reward" onClick="requestReward()">Deposit Calories</span>
</div>

<script>
function renderRewardBtn(Reward) {
  const $btn = $('.earn-button');

  if (Reward.isEligible()) {
    $btn.addClass('daily-reward').text('Deposit Calories');
  } else {
    $btn.removeClass('daily-reward').text('Next deposit tomorrow morning');
  }
}

$('.earn-button').click(() => renderRewardBtn(Reward));

renderRewardBtn(Reward);
Balance.render();
</script>
Improve clarity of button messaging
Improve clarity of button messaging
