<commit_before><template>
  <MenuNavigation
    :id="activeWallet.address"
    :class="{
      'WalletSidebar--basic': isBasic,
      'WalletSidebar--full': !isBasic
    }"
    class="WalletSidebar justify-start"
    @input="onSelect"
  >
    <MenuNavigationItem
      v-for="wallet in wallets"
      :id="wallet.id"
      :key="wallet.id"
      class="WalletSidebar__wallet"
    >
      <div
        slot-scope="{ isActive }"
        class="WalletSidebar__wallet__wrapper transition flex items-center w-full mx-6 py-6"
      >
        <img
          :src="assets_loadImage('pages/new-profile-avatar.svg')"
          width="50"
        >
        <div
          :class="{
            'text-theme-page-text': isActive,
            'text-theme-page-text-light': !isActive
          }"
          class="WalletSidebar__wallet__info flex flex-col font-semibold"
        >
          <span>{{ wallet.address | truncateMiddle(addressLength) }}</span>
          <span
            v-if="!isBasic"
            class="font-bold mt-2 text-xl"
          >
            <!-- FIXME localize + currency + filter -->
            {{ $n(wallet.balance, 'currency') }}
            <!-- TODO display a +/- n ARK on recent transactions -->
          </span>
        </div>
      </div>
    </MenuNavigationItem>
  </MenuNavigation>
</template>

<script>
import { MenuNavigation, MenuNavigationItem } from '@/components/Menu'

export default {
  name: 'WalletSidebar',

  components: {
    MenuNavigation,
    MenuNavigationItem
  },

  props: {
    isBasic: {
      type: Boolean,
      required: false,
      default: true
    }
  },

  computed: {
    addressLength () {
      return this.isBasic ? 6 : 12
    },
<commit_msg>fix: show the names of the wallets on `WalletSidebar` (#287)<commit_after><template>
  <MenuNavigation
    :id="activeWallet.address"
    :class="{
      'WalletSidebar--basic': isBasic,
      'WalletSidebar--full': !isBasic
    }"
    class="WalletSidebar justify-start"
    @input="onSelect"
  >
    <MenuNavigationItem
      v-for="wallet in wallets"
      :id="wallet.id"
      :key="wallet.id"
      class="WalletSidebar__wallet"
    >
      <div
        slot-scope="{ isActive }"
        class="WalletSidebar__wallet__wrapper transition flex items-center w-full mx-6 py-6"
      >
        <img
          src="https://api.adorable.io/avatars/285/abott@adorable.png"
          width="50"
        >
        <div
          :class="{
            'text-theme-page-text': isActive,
            'text-theme-page-text-light': !isActive
          }"
          class="WalletSidebar__wallet__info flex flex-col font-semibold"
        >
          <span>{{ wallet.name }}</span>
          <span
            v-if="!isBasic"
            class="font-bold mt-2 text-xl"
          >
            <!-- FIXME localize + currency + filter -->
            {{ $n(wallet.balance, 'currency') }}
            <!-- TODO display a +/- n ARK on recent transactions -->
          </span>
        </div>
      </div>
    </MenuNavigationItem>
  </MenuNavigation>
</template>

<script>
import { MenuNavigation, MenuNavigationItem } from '@/components/Menu'

export default {
  name: 'WalletSidebar',

  components: {
    MenuNavigation,
    MenuNavigationItem
  },

  props: {
    isBasic: {
      type: Boolean,
      required: false,
      default: true
    }
  },

  computed: {
{'fraction_non_alphanumeric': 0.1377049180327869, 'fraction_numerical': 0.005663189269746647, 'mean_word_length': 1.975177304964539, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 1, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '14572', 'n_tokens_mistral': 1041, 'n_tokens_neox': 1042, 'n_words': 197}