Merge branch 'develop' of https://github.com/liftlearning/P2Pix-Front-End into faq

2023-01-25 17:35:31 -03:00
parent 6793684c49 7dc8d587e2
commit 80e3296131
34 changed files with 978 additions and 15317 deletions
--- a/src/components/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
 import ListingComponent from "@/components/ListingComponent.vue";
+import type { Event } from "ethers";

 // props
 const props = defineProps<{
-  lastWalletReleaseTransactions: any[];
-  tokenAmount: Number | undefined;
+  lastWalletReleaseTransactions: Event[];
+  tokenAmount: number | undefined;
 }>();

 // Emits
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -1,42 +1,62 @@
 <script setup lang="ts">
-import blockchain from "@/utils/blockchain";
+import { NetworkEnum } from "@/model/NetworkEnum";
+import type { ValidDeposit } from "@/model/ValidDeposit";
+import { useEtherStore } from "@/store/ether";
+import { formatEther } from "@ethersproject/units";
+import type { Event } from "ethers";
 import { ref, watch } from "vue";

 // props
 const props = defineProps<{
-  walletTransactions: any[];
+  walletTransactions: (Event | ValidDeposit)[];
  isManageMode: boolean;
 }>();

-const itemsToShow = ref<any[]>([]);
+const etherStore = useEtherStore();
+
+const itemsToShow = ref<(Event | ValidDeposit)[]>([]);

 // Methods
-const showInitialItems = () => {
+const isValidDeposit = (
+  deposit: Event | ValidDeposit
+): deposit is ValidDeposit => {
+  return (deposit as ValidDeposit).depositID !== undefined;
+};
+
+const showInitialItems = (): void => {
  itemsToShow.value = props.walletTransactions.slice(0, 3);
 };

-const formatEventsAmount = (amount: any) => {
-  try {
-    const formated = blockchain.formatBigNumber(amount);
-    return formated;
-  } catch {
-    return "";
-  }
-};
-
-const openEtherscanUrl = (url: string) => {
+const openEtherscanUrl = (transactionHash: string): void => {
+  const networkUrl =
+    etherStore.networkName == NetworkEnum.ethereum
+      ? "goerli.etherscan.io"
+      : "mumbai.polygonscan.com";
+  const url = `https://${networkUrl}/tx/${transactionHash}`;
  window.open(url, "_blank");
 };

-const loadMore = () => {
+const loadMore = (): void => {
  const itemsShowing = itemsToShow.value.length;
  itemsToShow.value?.push(
    ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
  );
 };

+const getEventName = (event: string | undefined): string => {
+  if (!event) return "Desconhecido";
+
+  const possibleEventName: { [key: string]: string } = {
+    DepositAdded: "Oferta",
+    LockAdded: "Compra",
+    LockReleased: "Reserva",
+  };
+
+  return possibleEventName[event];
+};
+
 // watch props changes
-watch(props, async () => {
+watch(props, async (): Promise<void> => {
  const itemsToShowQty = itemsToShow.value.length;
  if (itemsToShowQty == 0) showInitialItems();
  else
@@ -75,11 +95,11 @@ showInitialItems();
    <div
      class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
      v-for="(item, index) in itemsToShow"
-      :key="item.depositID"
+      :key="item.blockNumber"
    >
      <span class="last-release-info">
        {{
-          item?.args ? formatEventsAmount(item?.args.amount) : item?.remaining
+          isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount)
        }}
        BRZ
      </span>
@@ -87,55 +107,38 @@ showInitialItems();
      <!-- TODO: change this hardcoded date -->
      <span class="last-release-info"> 20 out 2022 </span>

+      <span class="last-release-info" v-if="!props.isManageMode">
+        {{ getEventName((item as Event).event) }}
+      </span>
+
+      <div
+        v-if="!props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="openEtherscanUrl((item as Event)?.transactionHash)"
+      >
+        <span class="last-release-info">Etherscan</span>
+        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      </div>
+
      <div
        v-if="props.isManageMode"
        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', item.depositID, index)"
+        @click="emit('cancelDeposit', (item as ValidDeposit).depositID, index)"
      >
        <span class="last-release-info">Cancelar</span>
        <img alt="Cancel image" src="@/assets/cancel.svg" />
      </div>

-      <span
-        class="last-release-info"
-        v-if="item.event == 'DepositAdded' && !props.isManageMode"
-      >
-        {{ "Oferta" }}
-      </span>
-
-      <span
-        class="last-release-info"
-        v-if="item.event == 'LockAdded' && !props.isManageMode"
-      >
-        {{ "Reserva" }}
-      </span>
-
-      <span
-        class="last-release-info"
-        v-if="item.event == 'LockReleased' && !props.isManageMode"
-      >
-        {{ "Compra" }}
-      </span>
-
      <div
        v-if="props.isManageMode"
        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('withdrawDeposit', item.depositID, index)"
+        @click="
+          emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
+        "
      >
        <span class="last-release-info">Retirar</span>
        <img alt="Cancel image" src="@/assets/withdraw.svg" />
      </div>
-
-      <div
-        v-if="!props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="
-          openEtherscanUrl(`https://etherscan.io/tx/${item?.transactionHash}`)
-        "
-      >
-        <span class="last-release-info">Etherscan</span>
-        <img alt="Redirect image" src="@/assets/redirect.svg" />
-      </div>
    </div>
    <div
      class="flex flex-col justify-center items-center w-full mt-2 gap-2"
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -24,19 +24,20 @@ const pixQrCode = pix({
  pixKey: props.pixTarget ?? "",
  value: props.tokenValue,
 });
+
 pixQrCode.base64QrCode().then((code: string) => {
  qrCode.value = code;
 });

 qrCodePayload.value = pixQrCode.payload();

-const handleInputEvent = (event: any) => {
+const handleInputEvent = async (event: any): Promise<void> => {
  const { value } = event.target;
  e2eId.value = value;
-  validatePix();
+  await validatePix();
 };

-const validatePix = async () => {
+const validatePix = async (): Promise<void> => {
  if (e2eId.value == "") {
    isPixValid.value = false;
    isCodeInputEmpty.value = true;
@@ -146,7 +147,7 @@ const validatePix = async () => {
      <CustomButton
        :is-disabled="isPixValid == false"
        :text="'Enviar para a rede'"
-        @button-clicked="emit('pixValidated', { e2eId })"
+        @button-clicked="emit('pixValidated', e2eId)"
      />
    </div>
  </div>
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -1,41 +1,61 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import CustomButton from "../components/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import blockchain from "../utils/blockchain";
+import { connectProvider } from "@/blockchain/provider";
+import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
+import { NetworkEnum } from "@/model/NetworkEnum";
+import type { ValidDeposit } from "@/model/ValidDeposit";
+import { decimalCount } from "@/utils/decimalCount";

 // Store reference
 const etherStore = useEtherStore();

-const { walletAddress, depositsValidList } = storeToRefs(etherStore);
+const {
+  walletAddress,
+  networkName,
+  depositsValidListGoerli,
+  depositsValidListMumbai,
+} = storeToRefs(etherStore);

 // Reactive state
-const tokenValue = ref(0);
-const enableSelectButton = ref(false);
-const hasLiquidity = ref(true);
-const validDecimals = ref(true);
-const selectedDeposit = ref();
+const tokenValue = ref<number>(0);
+const enableConfirmButton = ref<boolean>(false);
+const enableWalletButton = ref<boolean>(false);
+const hasLiquidity = ref<boolean>(true);
+const validDecimals = ref<boolean>(true);
+const selectedGoerliDeposit = ref<ValidDeposit>();
+const selectedMumbaiDeposit = ref<ValidDeposit>();

 // Emits
 const emit = defineEmits(["tokenBuy"]);

 // Blockchain methods
-const connectAccount = async () => {
-  await blockchain.connectProvider();
-  verifyLiquidity();
+const connectAccount = async (): Promise<void> => {
+  await connectProvider();
+
+  enableOrDisableConfirmButton();
+};
+
+const emitConfirmButton = (): void => {
+  const selectedDeposit =
+    networkName.value == NetworkEnum.ethereum
+      ? selectedGoerliDeposit.value
+      : selectedMumbaiDeposit.value;
+  emit("tokenBuy", selectedDeposit, tokenValue.value);
 };

 // Debounce methods
-const handleInputEvent = (event: any) => {
+const handleInputEvent = (event: any): void => {
  const { value } = event.target;

  tokenValue.value = Number(value);

-  if (decimalCount(tokenValue.value) > 2) {
+  if (decimalCount(String(tokenValue.value)) > 2) {
    validDecimals.value = false;
-    enableSelectButton.value = false;
+    enableConfirmButton.value = false;
    return;
  }
  validDecimals.value = true;
@@ -43,41 +63,52 @@ const handleInputEvent = (event: any) => {
  verifyLiquidity();
 };

-// Enable button methods
-// Check if has more than 2 decimal places
-const decimalCount = (num: Number) => {
-  const numStr = String(num);
-  if (numStr.includes(".")) {
-    return numStr.split(".")[1].length;
-  }
-  return 0;
-};
-
 // Verify if there is a valid deposit to buy
-const verifyLiquidity = () => {
-  enableSelectButton.value = false;
-  selectedDeposit.value = null;
-  if (!walletAddress.value || tokenValue.value <= 0) return;
+const verifyLiquidity = (): void => {
+  enableConfirmButton.value = false;
+  selectedGoerliDeposit.value = undefined;
+  selectedMumbaiDeposit.value = undefined;

-  depositsValidList.value.find((element) => {
-    const remaining = element.remaining;
-    if (
-      tokenValue.value!! <= remaining &&
-      tokenValue.value!! != 0 &&
-      element.seller !== walletAddress.value
-    ) {
-      enableSelectButton.value = true;
-      hasLiquidity.value = true;
-      selectedDeposit.value = element;
-      return true;
-    }
-    return false;
-  });
+  if (tokenValue.value <= 0) {
+    enableWalletButton.value = false;
+    return;
+  }

-  if (!enableSelectButton.value) {
+  selectedGoerliDeposit.value = verifyNetworkLiquidity(
+    tokenValue.value,
+    walletAddress.value,
+    depositsValidListGoerli.value
+  );
+  selectedMumbaiDeposit.value = verifyNetworkLiquidity(
+    tokenValue.value,
+    walletAddress.value,
+    depositsValidListMumbai.value
+  );
+
+  enableOrDisableConfirmButton();
+  if (selectedGoerliDeposit.value || selectedMumbaiDeposit.value) {
+    hasLiquidity.value = true;
+    enableWalletButton.value = true;
+  } else {
    hasLiquidity.value = false;
+    enableWalletButton.value = true;
  }
 };
+
+const enableOrDisableConfirmButton = (): void => {
+  if (selectedGoerliDeposit.value && networkName.value == NetworkEnum.ethereum)
+    enableConfirmButton.value = true;
+  else if (
+    selectedMumbaiDeposit.value &&
+    networkName.value == NetworkEnum.polygon
+  )
+    enableConfirmButton.value = true;
+  else enableConfirmButton.value = false;
+};
+
+watch(networkName, (): void => {
+  enableOrDisableConfirmButton();
+});
 </script>

 <template>
@@ -126,12 +157,14 @@ const verifyLiquidity = () => {
              src="@/assets/polygon.svg"
              width="24"
              height="24"
+              v-if="selectedMumbaiDeposit"
            />
            <img
              alt="Ethereum image"
              src="@/assets/ethereum.svg"
              width="24"
              height="24"
+              v-if="selectedGoerliDeposit"
            />
          </div>
        </div>
@@ -149,13 +182,14 @@ const verifyLiquidity = () => {
      <CustomButton
        v-if="!walletAddress"
        :text="'Conectar carteira'"
+        :is-disabled="!enableWalletButton"
        @buttonClicked="connectAccount()"
      />
      <CustomButton
        v-if="walletAddress"
        :text="'Confirmar compra'"
-        :is-disabled="!enableSelectButton"
-        @buttonClicked="emit('tokenBuy', { selectedDeposit, tokenValue })"
+        :is-disabled="!enableConfirmButton"
+        @buttonClicked="emitConfirmButton()"
      />
    </div>
  </div>
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -2,39 +2,30 @@
 import { ref } from "vue";
 import CustomButton from "../../components/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
+import { decimalCount } from "@/utils/decimalCount";

 // Reactive state
-const tokenValue = ref(0);
-const enableSelectButton = ref(false);
-const hasLiquidity = ref(true);
-const validDecimals = ref(true);
+const tokenValue = ref<number>(0);
+const enableSelectButton = ref<boolean>(false);
+const hasLiquidity = ref<boolean>(true);
+const validDecimals = ref<boolean>(true);

 // Emits
 const emit = defineEmits(["tokenBuy"]);

 // Debounce methods
-const handleInputEvent = (event: any) => {
+const handleInputEvent = (event: any): void => {
  const { value } = event.target;

  tokenValue.value = Number(value);

-  if (decimalCount(tokenValue.value) > 2) {
+  if (decimalCount(String(tokenValue.value)) > 2) {
    validDecimals.value = false;
    enableSelectButton.value = false;
    return;
  }
  validDecimals.value = true;
 };
-
-// Enable button methods
-// Check if has more than 2 decimal places
-const decimalCount = (num: Number) => {
-  const numStr = String(num);
-  if (numStr.includes(".")) {
-    return numStr.split(".")[1].length;
-  }
-  return 0;
-};
 </script>

 <template>
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -2,23 +2,30 @@
 import { ref } from "vue";
 import CustomButton from "../CustomButton.vue";
 import { debounce } from "@/utils/debounce";
+import { decimalCount } from "@/utils/decimalCount";
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import { connectProvider } from "@/blockchain/provider";

 // Reactive state
-const offer = ref<string | number>("");
+const etherStore = useEtherStore();
+const { walletAddress } = storeToRefs(etherStore);
+
+const offer = ref<string>("");
 const pixKey = ref<string>("");

-const enableSelectButton = ref(false);
-const hasLiquidity = ref(true);
-const validDecimals = ref(true);
+const enableSelectButton = ref<boolean>(false);
+const hasLiquidity = ref<boolean>(true);
+const validDecimals = ref<boolean>(true);

 // Emits
 const emit = defineEmits(["approveTokens"]);

 // Debounce methods
-const handleInputEvent = (event: any) => {
+const handleInputEvent = (event: any): void => {
  const { value } = event.target;

-  offer.value = Number(value);
+  offer.value = value;

  if (decimalCount(offer.value) > 2) {
    validDecimals.value = false;
@@ -28,14 +35,12 @@ const handleInputEvent = (event: any) => {
  validDecimals.value = true;
 };

-// Enable button methods
-// Check if has more than 2 decimal places
-const decimalCount = (num: Number) => {
-  const numStr = String(num);
-  if (numStr.includes(".")) {
-    return numStr.split(".")[1].length;
-  }
-  return 0;
+const handleButtonClick = async (
+  offer: string,
+  pixKey: string
+): Promise<void> => {
+  if (walletAddress.value) emit("approveTokens", { offer, pixKey });
+  else await connectProvider();
 };
 </script>

@@ -99,8 +104,8 @@ const decimalCount = (num: Number) => {
        </div>
      </div>
      <CustomButton
-        :text="'Aprovar tokens'"
-        @buttonClicked="emit('approveTokens', { offer, pixKey })"
+        :text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'"
+        @buttonClicked="handleButtonClick(offer, pixKey)"
      />
    </div>
  </div>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -2,12 +2,15 @@
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
 import { ref } from "vue";
-import blockchain from "../utils/blockchain";
+import { NetworkEnum } from "@/model/NetworkEnum";
+import { connectProvider, requestNetworkChange } from "../blockchain/provider";
+import ethereumImage from "../assets/ethereum.svg";
+import polygonImage from "../assets/polygon.svg";

 // Store reference
 const etherStore = useEtherStore();

-const { walletAddress, balance, sellerView } = storeToRefs(etherStore);
+const { walletAddress, sellerView } = storeToRefs(etherStore);

 const menuOpenToggle = ref<boolean>(false);
 const menuHoverToggle = ref<boolean>(false);
@@ -16,8 +19,8 @@ const currencyMenuOpenToggle = ref<boolean>(false);
 const currencyMenuHoverToggle = ref<boolean>(false);

 //Methods
-const connectMetaMask = () => {
-  blockchain.connectProvider();
+const connectMetaMask = async (): Promise<void> => {
+  await connectProvider();
 };

 const formatWalletAddress = (): string => {
@@ -30,20 +33,31 @@ const formatWalletAddress = (): string => {
  return `${initialText}...${finalText}`;
 };

-const formatWalletBalance = (): String => {
-  const fixed = Number(balance.value);
-  return fixed.toFixed(2);
-};
-
-const disconnectUser = () => {
+const disconnectUser = (): void => {
  etherStore.setWalletAddress("");
  closeMenu();
  window.location.reload();
 };

-const closeMenu = () => {
+const closeMenu = (): void => {
  menuOpenToggle.value = false;
 };
+
+const networkChange = async (network: NetworkEnum): Promise<void> => {
+  currencyMenuOpenToggle.value = false;
+  const change = await requestNetworkChange(network);
+  if (change) etherStore.setNetworkName(network);
+};
+
+const getNetworkImage = (networkName: NetworkEnum): string => {
+  let validImages = {
+    Ethereum: ethereumImage,
+    Polygon: polygonImage,
+    Localhost: ethereumImage,
+  };
+
+  return validImages[networkName];
+};
 </script>

 <template>
@@ -63,6 +77,102 @@ const closeMenu = () => {
      <RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
        {{ sellerView ? "Quero comprar" : "Quero vender" }}
      </RouterLink>
+      <div class="flex flex-col" v-if="walletAddress">
+        <div
+          class="group top-bar-info cursor-pointer hover:bg-white"
+          @click="
+            [
+              (currencyMenuOpenToggle = !currencyMenuOpenToggle),
+              (menuOpenToggle = false),
+            ]
+          "
+          @mouseover="currencyMenuHoverToggle = true"
+          @mouseout="currencyMenuHoverToggle = false"
+          :style="{
+            backgroundColor: currencyMenuOpenToggle
+              ? '#F9F9F9'
+              : currencyMenuHoverToggle
+              ? '#F9F9F9'
+              : 'transparent',
+          }"
+        >
+          <img
+            alt="Choosed network image"
+            :src="getNetworkImage(etherStore.networkName)"
+          />
+          <span
+            class="default-text group-hover:text-gray-900"
+            :style="{
+              color: currencyMenuOpenToggle
+                ? '#000000'
+                : currencyMenuHoverToggle
+                ? '#000000'
+                : 'rgb(249 250 251)',
+            }"
+          >
+            {{ etherStore.networkName }}
+          </span>
+          <img
+            class="text-gray-900"
+            v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
+            alt="Chevron Down"
+            src="@/assets/chevronDown.svg"
+          />
+          <img
+            v-if="currencyMenuOpenToggle"
+            alt="Chevron Up"
+            src="@/assets/chevronUp.svg"
+          />
+          <img
+            v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
+            alt="Chevron Down Black"
+            src="@/assets/chevronDownBlack.svg"
+          />
+        </div>
+        <div
+          v-show="currencyMenuOpenToggle"
+          class="mt-10 pl-3 absolute w-full text-gray-900"
+        >
+          <div class="mt-2">
+            <div class="bg-white rounded-md z-10">
+              <div
+                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                @click="networkChange(NetworkEnum.ethereum)"
+              >
+                <img
+                  alt="Ethereum image"
+                  width="20"
+                  height="20"
+                  src="@/assets/ethereum.svg"
+                />
+                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                  Ethereum
+                </span>
+              </div>
+              <div class="w-full flex justify-center">
+                <hr class="w-4/5" />
+              </div>
+              <div
+                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                @click="networkChange(NetworkEnum.polygon)"
+              >
+                <img
+                  alt="Polygon image"
+                  width="20"
+                  height="20"
+                  src="@/assets/polygon.svg"
+                />
+                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                  Polygon
+                </span>
+              </div>
+              <div class="w-full flex justify-center">
+                <hr class="w-4/5" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
      <button
        type="button"
        v-if="!walletAddress"
@@ -72,95 +182,6 @@ const closeMenu = () => {
        Conectar carteira
      </button>
      <div v-if="walletAddress" class="account-info">
-        <div class="flex flex-col">
-          <div
-            class="group top-bar-info cursor-pointer hover:bg-white"
-            @click="
-              [
-                (currencyMenuOpenToggle = !currencyMenuOpenToggle),
-                (menuOpenToggle = false),
-              ]
-            "
-            @mouseover="currencyMenuHoverToggle = true"
-            @mouseout="currencyMenuHoverToggle = false"
-            :style="{
-              backgroundColor: currencyMenuOpenToggle
-                ? '#F9F9F9'
-                : currencyMenuHoverToggle
-                ? '#F9F9F9'
-                : 'transparent',
-            }"
-          >
-            <img alt="Ethereum image" src="@/assets/ethereum.svg" />
-            <span
-              class="default-text group-hover:text-gray-900"
-              :style="{
-                color: currencyMenuOpenToggle
-                  ? '#000000'
-                  : currencyMenuHoverToggle
-                  ? '#000000'
-                  : 'rgb(249 250 251)',
-              }"
-            >
-              Ethereum
-            </span>
-            <img
-              class="text-gray-900"
-              v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
-              alt="Chevron Down"
-              src="@/assets/chevronDown.svg"
-            />
-            <img
-              v-if="currencyMenuOpenToggle"
-              alt="Chevron Up"
-              src="@/assets/chevronUp.svg"
-            />
-            <img
-              v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
-              alt="Chevron Down Black"
-              src="@/assets/chevronDownBlack.svg"
-            />
-          </div>
-          <div
-            v-show="currencyMenuOpenToggle"
-            class="mt-10 pl-3 absolute w-full text-gray-900"
-          >
-            <div class="mt-2">
-              <div class="bg-white rounded-md z-10">
-                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                  <img
-                    alt="Ethereum image"
-                    width="20"
-                    height="20"
-                    src="@/assets/ethereum.svg"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
-                  >
-                    Ethereum
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
-                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                  <img
-                    alt="Polygon image"
-                    width="20"
-                    height="20"
-                    src="@/assets/polygon.svg"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
-                  >
-                    Polygon
-                  </span>
-                  <hr />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
        <div class="flex flex-col">
          <div
            class="top-bar-info cursor-pointer"
@@ -241,12 +262,6 @@ const closeMenu = () => {
            </div>
          </div>
        </div>
-        <div class="top-bar-info">
-          <span class="default-text text-sm">
-            MBRZ: {{ formatWalletBalance() }}
-          </span>
-        </div>
-        <!-- Temporary div, just to show a wallet's balance -->
      </div>
    </div>
  </header>