<commit_before><template>
  <div class="modal-container">
    <b-modal
      ref="balance"
      :title="$t('interface.balance')"
      hide-footer
      centered
      class="bootstrap-modal balance nopadding"
    >
      <div class="content-block total-balance">
        <div class="flex-container">
          <h4 class="modal-title">{{ $t('common.totalBalance') }}</h4>
          <div class="margin-left-auto total-balance-amount">
            <span>{{ balance }}</span> ETH
          </div>
        </div>
      </div>

      <div class="content-block">
        <h4 class="equivalent-values-title">
          {{ $t('interface.equivalentValues') }}
        </h4>
        <ul class="equivalent-values">
          <li v-for="ev in equivalentValues" :key="ev.key">
            <img
              :src="
                require(`@/assets/images/currency/${ev.name.toLowerCase()}.svg`)
              "
            />
            <p>{{ ev.name }}</p>
            <p class="ev-value">{{ ev.value }}</p>
          </li>
        </ul>
      </div>
    </b-modal>
  </div>
</template>

<script>
import BigNumber from 'bignumber.js';
export default {
  props: {
    balance: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      equivalentValues: [
        {
          name: 'BTC',
          value: '102.22453'
        },
        {
          name: 'REP',
          value: '5656.22'
        },
        {
          name: 'CHF',
          value: '12410004.22453'
        },
        {
          name: 'USD'
        },
        {
          name: 'EUR',
          value: '12410.22'
        },
        {
          name: 'GBP',
          value: '687867.53'
        }
      ]
    };
  },
  watch: {
    balance() {
      this.fetchBalanceData();
    }
  },
  mounted() {
    this.fetchBalanceData();
  },
  methods: {
    async fetchBalanceData() {
      this.equivalentValues = [];
      const newArr = [];
      const url = 'https://cryptorates.mewapi.io/convert/ETH';
      const fetchValues = await fetch(url);
      const values = await fetchValues.json();
      Object.keys(values).forEach(item => {
        if (
          this.equivalentValues.find(curr => {
            return curr.name === item;
          })
        ) {
          const objectRes = {
            name: item,
            value: new BigNumber(this.balance)
              .multipliedBy(new BigNumber(values[item]))
              .decimalPlaces(18)
              .toFixed()
          };
          newArr.push(objectRes);
        }
      });

      this.equivalentValues = newArr;
    }
  }
};
</script>

<style lang="scss" scoped>
@import 'InterfaceBalanceModal.scss';
</style>
<commit_msg>Update balance modal to work<commit_after><template>
  <div class="modal-container">
    <b-modal
      ref="balance"
      :title="$t('interface.balance')"
      hide-footer
      centered
      class="bootstrap-modal balance nopadding"
    >
      <div class="content-block total-balance">
        <div class="flex-container">
          <h4 class="modal-title">{{ $t('common.totalBalance') }}</h4>
          <div class="margin-left-auto total-balance-amount">
            <span>{{ balance }}</span> ETH
          </div>
        </div>
      </div>

      <div class="content-block">
        <h4 class="equivalent-values-title">
          {{ $t('interface.equivalentValues') }}
        </h4>
        <ul class="equivalent-values">
          <li v-for="ev in equivalentValues" :key="ev.key">
            <img
              :src="
                require(`@/assets/images/currency/${ev.name.toLowerCase()}.svg`)
              "
            />
            <p>{{ ev.name }}</p>
            <p class="ev-value">{{ ev.value }}</p>
          </li>
        </ul>
      </div>
    </b-modal>
  </div>
</template>

<script>
import BigNumber from 'bignumber.js';
export default {
  props: {
    balance: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      equivalentValues: [
        {
          name: 'BTC',
          value: '102.22453'
        },
        {
          name: 'REP',
          value: '5656.22'
        },
        {
          name: 'CHF',
          value: '12410004.22453'
        },
        {
          name: 'USD'
        },
        {
          name: 'EUR',
          value: '12410.22'
        },
        {
          name: 'GBP',
          value: '687867.53'
        }
      ]
    };
  },
  watch: {
    balance() {
      this.fetchBalanceData();
    }
  },
  mounted() {
    this.fetchBalanceData();
  },
  methods: {
    async fetchBalanceData() {
      const newArr = [];
      const url = 'https://cryptorates.mewapi.io/convert/ETH';
      const fetchValues = await fetch(url);
      const values = await fetchValues.json();
      delete values['lastCalled'];
      Object.keys(values).forEach(item => {
        if (
          this.equivalentValues.find(curr => {
            return curr.name === item;
          })
        ) {
          const objectRes = {
            name: item,
            value: new BigNumber(this.balance)
              .multipliedBy(new BigNumber(values[item]))
              .decimalPlaces(18)
              .toFixed()
          };
          newArr.push(objectRes);
        }
      });
      this.equivalentValues = newArr;
    }
  }
};
</script>

<style lang="scss" scoped>
@import 'InterfaceBalanceModal.scss';
</style>

{'fraction_non_alphanumeric': 0.15823847732785967, 'fraction_numerical': 0.018286993842134728, 'mean_word_length': 1.5211665098777045, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 73, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, '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': '380543', 'n_tokens_mistral': 1717, 'n_tokens_neox': 1661, 'n_words': 297}