Update all to useUSer composabe. Still some bugs to resolve.

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -8,7 +8,7 @@ import {
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { onMounted, ref, watch } from "vue";
 import ListingComponent from "../ListingComponent/ListingComponent.vue";
@@ -19,8 +19,8 @@ const props = defineProps<{
   isCurrentStep: boolean;
 }>();
 
-const viemStore = useViemStore();
-const { walletAddress } = storeToRefs(viemStore);
+const user = useUser();
+const { walletAddress } = useUser();
 
 const lastWalletTransactions = ref<WalletTransaction[]>([]);
 const depositList = ref<ValidDeposit[]>([]);
@@ -29,7 +29,7 @@ const activeLockAmount = ref<number>(0);
 // methods
 
 const getWalletTransactions = async () => {
-  viemStore.setLoadingWalletTransactions(true);
+  user.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
@@ -48,20 +48,20 @@ const getWalletTransactions = async () => {
       lastWalletTransactions.value = allUserTransactions;
     }
   }
-  viemStore.setLoadingWalletTransactions(false);
+  user.setLoadingWalletTransactions(false);
 };
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
-    viemStore.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount, viemStore.selectedToken);
+    user.setLoadingWalletTransactions(true);
+    const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();
     } else {
       console.log("Não foi possível realizar o saque!");
     }
-    viemStore.setLoadingWalletTransactions(false);
+    user.setLoadingWalletTransactions(false);
   }
 };
 
@@ -93,14 +93,14 @@ onMounted(async () => {
         <div>
           <p>Tokens recebidos</p>
           <p class="text-2xl text-gray-900">
-            {{ props.tokenAmount }} {{ viemStore.selectedToken }}
+            {{ props.tokenAmount }} {{ user.selectedToken }}
           </p>
         </div>
         <div class="my-5">
           <p class="text-sm">
             <b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
             <br />
-            cadastrar o {{ viemStore.selectedToken }} em sua carteira.
+            cadastrar o {{ user.selectedToken }} em sua carteira.
           </p>
         </div>
         <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />

src/components/ListingComponent/ListingComponent.vue

@@ -3,8 +3,7 @@ import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useViemStore } from "@/store/viem";
-import { storeToRefs } from "pinia";
+import { useUser } from "@/composables/useUser";
 import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
@@ -12,7 +11,7 @@ import { debounce } from "@/utils/debounce";
 import { getTokenByAddress } from "@/blockchain/addresses";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
-const etherStore = useViemStore();
+const user = useUser();
 
 // props
 const props = defineProps<{
@@ -23,8 +22,9 @@ const props = defineProps<{
 
 const emit = defineEmits(["depositWithdrawn"]);
 
-const { loadingWalletTransactions } = storeToRefs(etherStore);
-const remaining = ref<number>(0.0);
+const { loadingWalletTransactions } = user;
+
+const remaining = ref<number>(0);
 const itemsToShow = ref<WalletTransaction[]>([]);
 const withdrawAmount = ref<string>("");
 const withdrawButtonOpacity = ref<number>(0.6);
@@ -85,8 +85,7 @@ watch(withdrawAmount, (): void => {
 });
 
 const getRemaining = (): number => {
-  if (props.validDeposits instanceof Array) {
-    // Here we are getting only the first element of the list because
+  if (props.validDeposits.length > 0) {
     // in this release only the BRL token is being used.
     const deposit = props.validDeposits[0];
     remaining.value = deposit ? deposit.remaining : 0;
@@ -96,7 +95,7 @@ const getRemaining = (): number => {
 };
 
 const getExplorer = (): string => {
-  return etherStore.networkName == NetworkEnum.sepolia
+  return user.networkName.value == NetworkEnum.sepolia
     ? "Etherscan"
     : "Polygonscan";
 };
@@ -107,7 +106,7 @@ const showInitialItems = (): void => {
 
 const openEtherscanUrl = (transactionHash: string): void => {
   const networkUrl =
-    etherStore.networkName == NetworkEnum.sepolia
+    user.networkName.value == NetworkEnum.sepolia
       ? "sepolia.etherscan.io"
       : "mumbai.polygonscan.com";
   const url = `https://${networkUrl}/tx/${transactionHash}`;

src/components/ListingComponent/__tests__/ListingComponent.spec.ts

@@ -2,13 +2,13 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import ListingComponent from "../ListingComponent.vue";
 import SpinnerComponent from "../../SpinnerComponent.vue";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
 import { MockWalletTransactions } from "@/model/mock/WalletTransactionMock";
 
 describe("ListingComponent.vue", () => {
   beforeEach(() => {
-    useViemStore().setLoadingWalletTransactions(false);
+    useUser().setLoadingWalletTransactions(false);
   });
 
   test("Test Message when an empty array is received", () => {

src/components/SearchComponent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { storeToRefs } from "pinia";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
@@ -15,7 +14,7 @@ import { onClickOutside } from "@vueuse/core";
 import { TokenEnum } from "@/model/NetworkEnum";
 
 // Store reference
-const viemStore = useViemStore();
+const user = useUser();
 const selectTokenToggle = ref<boolean>(false);
 
 const {
@@ -24,7 +23,7 @@ const {
   selectedToken,
   depositsValidList,
   loadingNetworkLiquidity,
-} = storeToRefs(viemStore);
+} = user;
 
 // html references
 const tokenDropdownRef = ref<any>(null);
@@ -84,7 +83,7 @@ onClickOutside(tokenDropdownRef, () => {
 });
 
 const handleSelectedToken = (token: TokenEnum): void => {
-  viemStore.setSelectedToken(token);
+  user.setSelectedToken(token);
   selectTokenToggle.value = false;
 };
 

src/components/SellerSteps/SellerComponent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
 import { TokenEnum } from "@/model/NetworkEnum";
@@ -24,8 +23,8 @@ const tokenDropdownRef = ref<any>(null);
 const formRef = ref<HTMLFormElement | null>(null);
 
 // Reactive state
-const viemStore = useViemStore();
-const { walletAddress, selectedToken } = storeToRefs(viemStore);
+const user = useUser();
+const { walletAddress, selectedToken } = user;
 
 const fullName = ref<string>("");
 const offer = ref<string>("");
@@ -91,7 +90,7 @@ const openTokenSelection = (): void => {
 };
 
 const handleSelectedToken = (token: TokenEnum): void => {
-  viemStore.setSelectedToken(token);
+  user.setSelectedToken(token);
   selectTokenToggle.value = false;
 };
 </script>

src/components/SellerSteps/SellerSearchComponent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
@@ -10,8 +9,8 @@ import { getTokenImage } from "@/utils/imagesPath";
 import { useOnboard } from "@web3-onboard/vue";
 
 // Store
-const viemStore = useViemStore();
-const { walletAddress } = storeToRefs(viemStore);
+const user = useUser();
+const { walletAddress } = user;
 
 // Reactive state
 const tokenValue = ref<number>(0);
@@ -76,10 +75,10 @@ const handleInputEvent = (event: any): void => {
             <img
               alt="Token image"
               class="w-fit"
-              :src="getTokenImage(viemStore.selectedToken)"
+              :src="getTokenImage(user.selectedToken.value)"
             />
             <span class="text-gray-900 text-lg w-fit" id="token">{{
-              viemStore.selectedToken
+              user.selectedToken
             }}</span>
           </div>
         </div>

src/components/ToasterComponent.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, watchEffect } from "vue";
+import { useOnboard } from "@web3-onboard/vue";
+import { Networks } from "../model/Networks";
+import { NetworkEnum } from "../model/NetworkEnum";
+import type { PropType } from "vue";
+import { useUser } from "@/composables/useUser";
+
+const props = defineProps({
+  targetNetwork: {
+    type: Object as PropType<NetworkEnum>,
+    default: NetworkEnum.sepolia,
+  },
+});
+
+const { connectedWallet } = useOnboard();
+const user = useUser();
+const { networkName } = user;
+
+const isWrongNetwork = ref(false);
+const currentNetworkName = ref("");
+const targetNetworkName = computed(
+  () => Networks[props.targetNetwork as keyof typeof Networks].chainName
+);
+
+const checkNetwork = () => {
+  if (connectedWallet.value) {
+    const chainId = connectedWallet.value.chains[0].id;
+    const targetChainId =
+      Networks[props.targetNetwork as keyof typeof Networks].chainId;
+
+    isWrongNetwork.value =
+      chainId.toLowerCase() !== targetChainId.toLowerCase();
+
+    // Find current network name
+    Object.entries(Networks).forEach(([key, network]) => {
+      if (network.chainId === chainId) {
+        currentNetworkName.value = network.chainName;
+      }
+    });
+  } else {
+    isWrongNetwork.value = false; // No wallet connected yet
+  }
+};
+
+const switchNetwork = async () => {
+  try {
+    if (connectedWallet.value && connectedWallet.value.provider) {
+      const targetChainId =
+        Networks[props.targetNetwork as keyof typeof Networks].chainId;
+      await connectedWallet.value.provider.request({
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId: targetChainId }],
+      });
+    }
+  } catch (error) {
+    console.error("Failed to switch network:", error);
+  }
+};
+
+onMounted(checkNetwork);
+watch(connectedWallet, checkNetwork, { immediate: true });
+watch(networkName, checkNetwork, { immediate: true });
+</script>
+
+<template>
+  <transition name="slide-up" appear>
+    <div
+      v-if="isWrongNetwork"
+      class="fixed bottom-0 left-0 right-0 bg-red-500 text-white p-4 flex justify-between items-center z-50"
+    >
+      <div>
+        <span class="font-bold">Wrong network!</span>
+        <span v-if="currentNetworkName"
+          >You are connected to {{ currentNetworkName }}.</span
+        >
+        <span> Please switch to {{ targetNetworkName }}.</span>
+      </div>
+      <button
+        @click="switchNetwork"
+        class="bg-white text-red-500 px-4 py-2 rounded font-bold hover:bg-gray-100 transition-colors"
+      >
+        Switch Network
+      </button>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.slide-up-enter-to,
+.slide-up-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+</style>

src/components/TopBar/TopBar.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import { useViemStore } from "@/store/viem";
-import { storeToRefs } from "pinia";
+import { useUser } from "@/composables/useUser";
 import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
@@ -16,10 +15,9 @@ import LinkedinIcon from "@/assets/linkedinIcon.svg";
 import GithubIcon from "@/assets/githubIcon.svg";
 import { connectProvider } from "@/blockchain/provider";
 
-// Store reference
-const viemStore = useViemStore();
-
-const { walletAddress, sellerView } = storeToRefs(viemStore);
+// Use the new composable
+const user = useUser();
+const { walletAddress, sellerView } = user;
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -39,11 +37,11 @@ const connnectWallet = async (): Promise<void> => {
 watch(connectedWallet, async (newVal: any) => {
   connectProvider(newVal.provider);
   const addresses = await newVal.provider.request({ method: "eth_accounts" });
-  viemStore.setWalletAddress(addresses.shift());
+  user.setWalletAddress(addresses.shift());
 });
 
 watch(connectedChain, (newVal: any) => {
-  viemStore.setNetworkId(newVal?.id);
+  user.setNetworkId(newVal?.id);
 });
 
 const formatWalletAddress = (): string => {
@@ -57,7 +55,7 @@ const formatWalletAddress = (): string => {
 };
 
 const disconnectUser = async (): Promise<void> => {
-  viemStore.setWalletAddress("");
+  user.setWalletAddress("");
   await disconnectWallet({ label: connectedWallet.value?.label || "" });
   closeMenu();
 };
@@ -73,7 +71,7 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
       chainId: Networks[network].chainId,
       wallet: connectedWallet.value?.label || "",
     });
-    viemStore.setNetworkId(network);
+    user.setNetworkId(network);
   } catch (error) {
     console.log("Error changing network", error);
   }
@@ -246,7 +244,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(NetworkEnum[viemStore.networkName])"
+            :src="getNetworkImage(NetworkEnum[user.networkName.value])"
             height="24"
             width="24"
           />
@@ -254,7 +252,11 @@ onClickOutside(infoMenuRef, () => {
             class="default-text hidden sm:inline-block text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out whitespace-nowrap text-ellipsis overflow-hidden"
             :class="{ '!text-gray-900': currencyMenuOpenToggle }"
           >
-            {{ Networks[viemStore.networkName].chainName }}
+            {{
+              Networks[user.networkName.value]
+                ? Networks[user.networkName.value].chainName
+                : "Invalid Chain"
+            }}
           </span>
           <div
             class="transition-all duration-500 ease-in-out mt-1"

src/components/TopBar/__tests__/TopBar.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import TopBar from "../TopBar.vue";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 
 import { createPinia, setActivePinia } from "pinia";
 
@@ -21,8 +21,8 @@ describe("TopBar.vue", () => {
   });
 
   it("should render button to change to seller view when in buyer screen", () => {
-    const viemStore = useViemStore();
-    viemStore.setSellerView(true);
+    const user = useUser();
+    user.setSellerView(true);
     const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Quero comprar");
   });