<Common::RadioOption
  @name='deposit-token'
  @checked={{@checked}}
  @disabled={{@disabled}}
  @onInput={{@onInput}}
  class='token-option'
  data-test-deposit-transaction-setup-from-option={{@token.symbol}}
>
  <div class="token-option__currency">
    {{svg-jar @token.icon class="token-option__icon" role="presentation" width="40" height="40"}}
    <div>
      <div class="token-option__title" data-test-option={{@token.symbol}}>
        {{@token.symbol}}
      </div>
      <div class="token-option__desc">
        {{@token.description}}
      </div>
    </div>
  </div>
  <div>
    <div class="token-option__balance-header">Balance</div>
    <div class="token-option__balance" data-test-balance={{@token.symbol}}>
      {{@balance}} {{@token.symbol}}
    </div>
    <div class="token-option__usd-balance" data-test-usd-balance={{@token.symbol}}>
      {{#if @usdBalanceLoading}}
        <Boxel::LoadingIndicator class="token-option__loading-indicator"  data-test-usd-balance-loading/>
      {{else}}
        {{format-usd @balanceInUsd}}
      {{/if}}
    </div>
  </div>
</Common::RadioOption>