<template>
  <div class="overlay">
    <div class="text-overlay">
      <span class="badge bg-secondary message">{{ $t(i18nConst.overlayWrongNetwork) }}
      <!-- <BR/>{{ selectedNetwork }} -->
      </span>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import i18nConstantes from "@/constantes/i18n.constantes.js";

export default {
  computed: {
    ...mapGetters("global", ["selectedNetwork", "wrongNetwork"])
  },

  data() {
    return {
      i18nConst: i18nConstantes
    };
  },
}
</script>

<style scoped>
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1031;
  cursor: pointer;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.blockchain-logo {
  width: 20px;
}

.message {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  font-weight: 500;
}

</style>
