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

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"