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

2025-04-01 12:04:24 -03:00
parent e93cac6086
commit 9fa2b34a5d
26 changed files with 495 additions and 454 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,13 +2,16 @@
 import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import ToasterComponent from "@/components/ToasterComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
 import injectedModule from "@web3-onboard/injected-wallets";
 import { Networks } from "./model/Networks";
 import { NetworkEnum } from "./model/NetworkEnum";
+import { ref } from "vue";

 const route = useRoute();
 const injected = injectedModule();
+const targetNetwork = ref(NetworkEnum.sepolia);

 const web3Onboard = init({
  wallets: [injected],
@@ -58,5 +61,6 @@ if (!connectedWallet) {
        </Transition>
      </template>
    </RouterView>
+    <ToasterComponent :targetNetwork="targetNetwork" />
  </div>
 </template>
--- a/src/blockchain/tests/addresses.spec.ts
+++ b/src/blockchain/tests/addresses.spec.ts
@@ -8,7 +8,7 @@ import {

 import { setActivePinia, createPinia } from "pinia";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";

 describe("addresses.ts types", () => {
  it("My addresses.ts types work properly", () => {
@@ -25,16 +25,16 @@ describe("addresses.ts functions", () => {
  });

  it("getTokenAddress Ethereum", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.sepolia);
    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
    );
  });

  it("getTokenAddress Rootstock", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.rootstock);
    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
      "0xfE841c74250e57640390f46d914C88d22C51e82e"
    );
@@ -47,16 +47,16 @@ describe("addresses.ts functions", () => {
  });

  it("getP2PixAddress Ethereum", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.sepolia);
    expect(getP2PixAddress()).toBe(
      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
    );
  });

  it("getP2PixAddress Rootstock", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.rootstock);
    expect(getP2PixAddress()).toBe(
      "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
    );
@@ -69,14 +69,14 @@ describe("addresses.ts functions", () => {
  });

  it("getProviderUrl Ethereum", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.sepolia);
    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
  });

  it("getProviderUrl Rootstock", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.rootstock);
    expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
  });

@@ -85,8 +85,8 @@ describe("addresses.ts functions", () => {
  });

  it("isPossibleNetwork Returns", () => {
-    const etherStore = useViemStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    const user = useUser();
+    user.setNetworkId(NetworkEnum.sepolia);
    expect(isPossibleNetwork(0x5 as NetworkEnum)).toBe(true);
    expect(isPossibleNetwork(5 as NetworkEnum)).toBe(true);
    expect(isPossibleNetwork(0x13881 as NetworkEnum)).toBe(true);
--- a/src/blockchain/addresses.ts
+++ b/src/blockchain/addresses.ts
@@ -1,4 +1,4 @@
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 import { createPublicClient, http } from "viem";
 import { sepolia, rootstock } from "viem/chains";
@@ -15,8 +15,8 @@ const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
 };

 export const getTokenByAddress = (address: string) => {
-  const viemStore = useViemStore();
-  const networksTokens = Tokens[viemStore.networkName];
+  const user = useUser();
+  const networksTokens = Tokens[user.networkName.value];
  for (const [token, tokenAddress] of Object.entries(networksTokens)) {
    if (tokenAddress.toLowerCase() === address.toLowerCase()) {
      return token;
@@ -29,28 +29,28 @@ export const getTokenAddress = (
  token: TokenEnum,
  network?: NetworkEnum
 ): string => {
-  const viemStore = useViemStore();
-  return Tokens[network ? network : viemStore.networkName][token];
+  const user = useUser();
+  return Tokens[network ? network : user.networkName.value][token];
 };

 export const getP2PixAddress = (network?: NetworkEnum): string => {
-  const viemStore = useViemStore();
+  const user = useUser();
  const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
    [NetworkEnum.sepolia]: "0x2414817FF64A114d91eCFA16a834d3fCf69103d4",
    [NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
  };

-  return possibleP2PixAddresses[network ? network : viemStore.networkName];
+  return possibleP2PixAddresses[network ? network : user.networkName.value];
 };

 export const getProviderUrl = (network?: NetworkEnum): string => {
-  const viemStore = useViemStore();
+  const user = useUser();
  const possibleProvidersUrls: { [key in NetworkEnum]: string } = {
    [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_API_URL,
    [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_API_URL,
  };

-  return possibleProvidersUrls[network || viemStore.networkName];
+  return possibleProvidersUrls[network || user.networkName.value];
 };

 export const getProviderByNetwork = (network: NetworkEnum) => {
--- a/src/blockchain/buyerMethods.ts
+++ b/src/blockchain/buyerMethods.ts
@@ -1,141 +1,61 @@
-import { getContract, getWalletClient } from "./provider";
+import { getContract } from "./provider";
 import { getTokenAddress } from "./addresses";
-import { parseEther, stringToHex, toHex } from "viem";
-
+import { parseEther } from "viem";
 import type { TokenEnum } from "@/model/NetworkEnum";
-import { createSolicitation } from "../utils/bbPay";
-import type { Offer } from "../utils/bbPay";

-const addLock = async (
-  sellerId: string,
-  token: string,
+export const addLock = async (
+  sellerAddress: string,
+  tokenAddress: string,
  amount: number
 ): Promise<string> => {
  const { address, abi, client } = await getContract();
-  const walletClient = getWalletClient();
-  
-  if (!walletClient) {
-    throw new Error("Wallet client not initialized");
-  }
-  
-  const [account] = await walletClient.getAddresses();
-  
-  const hash = await walletClient.writeContract({
+
+  const parsedAmount = parseEther(amount.toString());
+
+  const { request } = await client.simulateContract({
    address,
    abi,
-    functionName: 'lock',
-    args: [
-      sellerId,
-      token,
-      parseEther(String(amount)),
-      [],
-      []
-    ],
-    account
+    functionName: "addLock",
+    args: [sellerAddress, tokenAddress, parsedAmount],
  });
-  
+
+  const hash = await client.writeContract(request);
  const receipt = await client.waitForTransactionReceipt({ hash });
-  const logs = receipt.logs;
-  
-  // Extract the lockID from transaction logs
-  // This is a simplified approach - in production you'll want more robust log parsing
-  const lockId = logs[0].topics[2]; // Simplified - adjust based on actual event structure
-  
-  const offer: Offer = {
-    amount,
-    lockId: String(lockId),
-    sellerId: sellerId,
-  };
-  
-  await createSolicitation(offer);
-  
-  return String(lockId);
+
+  return receipt.status ? receipt.logs[0].topics[2] : "";
 };

-const releaseLock = async (
-  pixKey: string,
-  amount: number,
-  e2eId: string,
-  lockId: string
-): Promise<any> => {
-  const { address, abi, client } = await getContract();
-  const walletClient = getWalletClient();
-  
-  if (!walletClient) {
-    throw new Error("Wallet client not initialized");
-  }
-  
-  const [account] = await walletClient.getAddresses();
-  
-  // In a real implementation, you would get this signature from your backend
-  // This is just a placeholder for the mock implementation
-  const signature = "0x1234567890";
-  
-  const hash = await walletClient.writeContract({
-    address,
-    abi,
-    functionName: 'release',
-    args: [
-      BigInt(lockId),
-      toHex(e2eId, { size: 32 }),
-      signature
-    ],
-    account
-  });
-  
-  const receipt = await client.waitForTransactionReceipt({ hash });
-  return receipt;
-};
-
-const cancelDeposit = async (depositId: bigint): Promise<any> => {
-  const { address, abi, client } = await getContract();
-  const walletClient = getWalletClient();
-  
-  if (!walletClient) {
-    throw new Error("Wallet client not initialized");
-  }
-  
-  const [account] = await walletClient.getAddresses();
-  
-  const hash = await walletClient.writeContract({
-    address,
-    abi,
-    functionName: 'cancelDeposit',
-    args: [depositId],
-    account
-  });
-  
-  const receipt = await client.waitForTransactionReceipt({ hash });
-  return receipt;
-};
-
-const withdrawDeposit = async (
+export const withdrawDeposit = async (
  amount: string,
  token: TokenEnum
-): Promise<any> => {
+): Promise<boolean> => {
  const { address, abi, client } = await getContract();
-  const walletClient = getWalletClient();
-  
-  if (!walletClient) {
-    throw new Error("Wallet client not initialized");
-  }
-  
-  const [account] = await walletClient.getAddresses();
-  
-  const hash = await walletClient.writeContract({
+
+  const tokenAddress = getTokenAddress(token);
+
+  const { request } = await client.simulateContract({
    address,
    abi,
-    functionName: 'withdraw',
-    args: [
-      getTokenAddress(token),
-      parseEther(String(amount)),
-      []
-    ],
-    account
+    functionName: "withdrawDeposit",
+    args: [tokenAddress, parseEther(amount)],
  });
-  
+
+  const hash = await client.writeContract(request);
  const receipt = await client.waitForTransactionReceipt({ hash });
-  return receipt;
+
+  return receipt.status;
 };

-export { cancelDeposit, withdrawDeposit, addLock, releaseLock };
+export const releaseLock = async (solicitation: any): Promise<any> => {
+  const { address, abi, client } = await getContract();
+
+  const { request } = await client.simulateContract({
+    address,
+    abi,
+    functionName: "releaseLock",
+    args: [solicitation.lockId, solicitation.e2eId],
+  });
+
+  const hash = await client.writeContract(request);
+  return client.waitForTransactionReceipt({ hash });
+};
--- a/src/blockchain/events.ts
+++ b/src/blockchain/events.ts
@@ -1,4 +1,4 @@
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import { formatEther, decodeEventLog, parseAbi, toHex, type PublicClient, type Address } from "viem";

 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
@@ -14,8 +14,8 @@ import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import type { Pix } from "@/model/Pix";

 const getNetworksLiquidity = async (): Promise<void> => {
-  const viemStore = useViemStore();
-  viemStore.setLoadingNetworkLiquidity(true);
+  const user = useUser();
+  user.setLoadingNetworkLiquidity(true);

  const depositLists: ValidDeposit[][] = [];

@@ -23,22 +23,16 @@ const getNetworksLiquidity = async (): Promise<void> => {
    (v) => !isNaN(Number(v))
  )) {
    console.log("getNetworksLiquidity", network);
-    
-    // Get public client for this network
-    const client = getProviderByNetwork(network as NetworkEnum);
-    const address = getP2PixAddress(network as NetworkEnum);
-    
-    depositLists.push(
-      await getValidDeposits(
-        getTokenAddress(viemStore.selectedToken, network as NetworkEnum),
-        network as NetworkEnum,
-        { client, address }
-      )
+    const deposits = await getValidDeposits(
+      getTokenAddress(user.selectedToken.value),
+      Number(network)
    );
+    if (deposits) depositLists.push(deposits);
  }

-  viemStore.setDepositsValidList(depositLists.flat());
-  viemStore.setLoadingNetworkLiquidity(false);
+  const allDeposits = depositLists.flat();
+  user.setDepositsValidList(allDeposits);
+  user.setLoadingNetworkLiquidity(false);
 };

 const getPixKey = async (seller: string, token: string): Promise<string> => {
--- a/src/blockchain/provider.ts
+++ b/src/blockchain/provider.ts
@@ -3,17 +3,17 @@ import { updateWalletStatus } from "./wallet";
 import { getProviderUrl, getP2PixAddress } from "./addresses";
 import { createPublicClient, createWalletClient, custom, http } from "viem";
 import { sepolia, rootstock } from "viem/chains";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";

 let publicClient = null;
 let walletClient = null;

 const getPublicClient = (onlyRpcProvider = false) => {
  if (onlyRpcProvider) {
-    const viemStore = useViemStore();
+    const user = useUser();
    const rpcUrl = getProviderUrl();
    return createPublicClient({
-      chain: viemStore.networkName === sepolia.id ? sepolia : rootstock,
+      chain: Number(user.networkName.value) === sepolia.id ? sepolia : rootstock,
      transport: http(rpcUrl)
    });
  }
@@ -28,24 +28,25 @@ const getContract = async (onlyRpcProvider = false) => {
  const client = getPublicClient(onlyRpcProvider);
  const address = getP2PixAddress();
  const abi = p2pix.abi;
-  
+
  return { address, abi, client };
 };

 const connectProvider = async (p: any): Promise<void> => {
-  const viemStore = useViemStore();
-  const chain = viemStore.networkName === sepolia.id ? sepolia : rootstock;
-  
+  console.log("Connecting to provider...");
+  const user = useUser();
+  const chain = Number(user.networkName.value) === sepolia.id ? sepolia : rootstock;
+
  publicClient = createPublicClient({
    chain,
    transport: custom(p)
  });
-  
+
  walletClient = createWalletClient({
    chain,
    transport: custom(p)
  });
-  
+
  await updateWalletStatus();
 };

--- a/src/blockchain/sellerMethods.ts
+++ b/src/blockchain/sellerMethods.ts
@@ -3,25 +3,25 @@ import { getTokenAddress, getP2PixAddress } from "./addresses";
 import { parseEther, toHex } from "viem";

 import mockToken from "../utils/smart_contract_files/MockToken.json";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import { createParticipant } from "@/utils/bbPay";
 import type { Participant } from "@/utils/bbPay";

 const approveTokens = async (participant: Participant): Promise<any> => {
-  const viemStore = useViemStore();
+  const user = useUser();
  const publicClient = getPublicClient();
  const walletClient = getWalletClient();
-  
+
  if (!publicClient || !walletClient) {
    throw new Error("Clients not initialized");
  }
-  
-  viemStore.setSeller(participant);
+
+  user.setSeller(participant);
  const [account] = await walletClient.getAddresses();
-  
+
  // Get token address
-  const tokenAddress = getTokenAddress(viemStore.selectedToken);
-  
+  const tokenAddress = getTokenAddress(user.selectedToken.value);
+
  // Check if the token is already approved
  const allowance = await publicClient.readContract({
    address: tokenAddress,
@@ -29,17 +29,17 @@ const approveTokens = async (participant: Participant): Promise<any> => {
    functionName: 'allowance',
    args: [account, getP2PixAddress()]
  });
-  
-  if (allowance < parseEther(participant.offer)) {
+
+  if (allowance < parseEther(participant.offer.toString())) {
    // Approve tokens
    const hash = await walletClient.writeContract({
      address: tokenAddress,
      abi: mockToken.abi,
      functionName: 'approve',
-      args: [getP2PixAddress(), parseEther(participant.offer)],
+      args: [getP2PixAddress(), parseEther(participant.offer.toString())],
      account
    });
-    
+
    await publicClient.waitForTransactionReceipt({ hash });
    return true;
  }
@@ -49,17 +49,17 @@ const approveTokens = async (participant: Participant): Promise<any> => {
 const addDeposit = async (): Promise<any> => {
  const { address, abi, client } = await getContract();
  const walletClient = getWalletClient();
-  const viemStore = useViemStore();
-  
+  const user = useUser();
+
  if (!walletClient) {
    throw new Error("Wallet client not initialized");
  }
-  
+
  const [account] = await walletClient.getAddresses();
-  
-  const sellerId = await createParticipant(viemStore.seller);
-  viemStore.setSellerId(sellerId.id);
-  
+
+  const sellerId = await createParticipant(user.seller.value);
+  user.setSellerId(sellerId.id);
+
  const hash = await walletClient.writeContract({
    address,
    abi,
@@ -67,13 +67,13 @@ const addDeposit = async (): Promise<any> => {
    args: [
      sellerId.id,
      toHex("", { size: 32 }),
-      getTokenAddress(viemStore.selectedToken),
-      parseEther(viemStore.seller.offer),
+      getTokenAddress(user.selectedToken.value),
+      parseEther(user.seller.value.offer),
      true
    ],
    account
  });
-  
+
  const receipt = await client.waitForTransactionReceipt({ hash });
  return receipt;
 };
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@@ -5,7 +5,7 @@ import {
  type Log,
  parseAbi,
 } from "viem";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";

 import { getPublicClient, getWalletClient, getContract } from "./provider";
 import { getTokenAddress, isPossibleNetwork } from "./addresses";
@@ -21,46 +21,31 @@ import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import type { Pix } from "@/model/Pix";

 export const updateWalletStatus = async (): Promise<void> => {
-  const viemStore = useViemStore();
+  const user = useUser();

  const publicClient = getPublicClient();
  const walletClient = getWalletClient();
-  
+
  if (!publicClient || !walletClient) {
    console.error("Client not initialized");
    return;
  }
-  
-  const chainId = await publicClient.getChainId();
-  if (!isPossibleNetwork(Number(chainId))) {
-    window.alert("Invalid chain!:" + chainId);
-    return;
-  }
-  viemStore.setNetworkId(Number(chainId));

-  // Get account address
-  const [address] = await walletClient.getAddresses();
-  
-  // Get token balance
-  const tokenAddress = getTokenAddress(viemStore.selectedToken);
-  const balanceResult = await publicClient.readContract({
-    address: tokenAddress,
-    abi: mockToken.abi,
-    functionName: 'balanceOf',
-    args: [address]
-  });
+  // Get balance
+  const [account] = await walletClient.getAddresses();
+  const balance = await publicClient.getBalance({ address: account });

-  viemStore.setBalance(formatEther(balanceResult));
-  viemStore.setWalletAddress(getAddress(address));
+  user.setWalletAddress(account);
+  user.setBalance(formatEther(balance));
 };

 export const listValidDepositTransactionsByWalletAddress = async (
  walletAddress: string
 ): Promise<ValidDeposit[]> => {
-  const viemStore = useViemStore();
+  const user = useUser();
  const walletDeposits = await getValidDeposits(
-    getTokenAddress(viemStore.selectedToken),
-    viemStore.networkName
+    getTokenAddress(user.selectedToken.value),
+    user.networkName.value
  );
  if (walletDeposits) {
    return walletDeposits
@@ -96,12 +81,12 @@ const filterLockStatus = async (
        data: transaction.data,
        topics: transaction.topics,
      });
-      
+
      if (!decoded || !decoded.args) continue;
-      
+
      // Type assertion to handle the args safely
      const args = decoded.args as Record<string, any>;
-      
+
      const tx: WalletTransaction = {
        token: args.token ? String(args.token) : "",
        blockNumber: Number(transaction.blockNumber),
@@ -244,7 +229,7 @@ const listLockTransactionByWalletAddress = async (
  });

  return lockLogs
-    .sort((a:Log, b:Log) => {
+    .sort((a: Log, b: Log) => {
      return Number(b.blockNumber) - Number(a.blockNumber);
    })
    .map((log: Log) => {
@@ -259,7 +244,7 @@ const listLockTransactionByWalletAddress = async (
        return null;
      }
    })
-    .filter((decoded:any) => decoded !== null);
+    .filter((decoded: any) => decoded !== null);
 };

 const listLockTransactionBySellerAddress = async (
@@ -267,7 +252,7 @@ const listLockTransactionBySellerAddress = async (
 ) => {
  const { address, abi, client } = await getContract(true);
  console.log("Will get locks as seller", sellerAddress);
-  
+
  const lockLogs = await client.getLogs({
    address,
    event: parseAbi(['event LockAdded(address indexed buyer, uint256 indexed lockID, address seller, address token, uint256 amount)'])[0],
@@ -290,8 +275,8 @@ const listLockTransactionBySellerAddress = async (
    })
    .filter((decoded: any) => decoded !== null)
    .filter(
-      (decoded:any) => decoded.args && decoded.args.seller && 
-      decoded.args.seller.toLowerCase() === sellerAddress.toLowerCase()
+      (decoded: any) => decoded.args && decoded.args.seller &&
+        decoded.args.seller.toLowerCase() === sellerAddress.toLowerCase()
    );
 };

@@ -304,25 +289,25 @@ export const checkUnreleasedLock = async (
  };

  const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
-  
+
  if (!addedLocks.length) return undefined;
-  
+
  const lockIds = addedLocks.map((lock: any) => lock.args.lockID);
-  
+
  const lockStatus = await client.readContract({
    address,
    abi,
    functionName: 'getLocksStatus',
    args: [lockIds]
  });
-  
+
  const unreleasedLockId = lockStatus[1].findIndex(
    (status: number) => status == 1
  );

  if (unreleasedLockId !== -1) {
    const lockID = lockStatus[0][unreleasedLockId];
-    
+
    const lock = await client.readContract({
      address,
      abi,
@@ -351,7 +336,7 @@ export const getActiveLockAmount = async (
  if (!lockSeller.length) return 0;

  const lockIds = lockSeller.map((lock: any) => lock.args.lockID);
-  
+
  const lockStatus = await client.readContract({
    address,
    abi,
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/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="() => {}" />
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/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}`;
--- a/src/components/ListingComponent/tests/ListingComponent.spec.ts
+++ b/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", () => {
--- a/src/components/SearchComponent.vue
+++ b/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;
 };

--- a/src/components/SellerSteps/SellerComponent.vue
+++ b/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>
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/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>
--- a/src/components/ToasterComponent.vue
+++ b/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>
--- a/src/components/TopBar/TopBar.vue
+++ b/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"
--- a/src/components/TopBar/tests/TopBar.spec.ts
+++ b/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");
  });
--- a/src/composables/useUser.ts
+++ b/src/composables/useUser.ts
@@ -0,0 +1,103 @@
+import { ref } from 'vue'
+import { NetworkEnum, TokenEnum } from "../model/NetworkEnum"
+import type { ValidDeposit } from "@/model/ValidDeposit"
+import type { Participant } from "../utils/bbPay"
+
+const walletAddress = ref("")
+const balance = ref("")
+const networkName = ref(NetworkEnum.sepolia)
+const selectedToken = ref(TokenEnum.BRZ)
+const loadingLock = ref(false)
+const sellerView = ref(false)
+const depositsValidList = ref<ValidDeposit[]>([])
+const loadingWalletTransactions = ref(false)
+const loadingNetworkLiquidity = ref(false)
+const seller = ref<Participant>({} as Participant)
+const sellerId = ref("")
+
+export function useUser() {
+
+  // Actions become regular functions
+  const setWalletAddress = (address: string) => {
+    walletAddress.value = address
+  }
+
+  const setBalance = (newBalance: string) => {
+    balance.value = newBalance
+  }
+
+  const setSelectedToken = (token: TokenEnum) => {
+    selectedToken.value = token
+  }
+
+  const setNetworkId = (network: NetworkEnum) => {
+    console.log("setNetworkId", network)
+    networkName.value = Number(network)
+  }
+
+  const setLoadingLock = (isLoading: boolean) => {
+    loadingLock.value = isLoading
+  }
+
+  const setSellerView = (view: boolean) => {
+    sellerView.value = view
+  }
+
+  const setDepositsValidList = (deposits: ValidDeposit[]) => {
+    depositsValidList.value = deposits
+  }
+
+  const setLoadingWalletTransactions = (isLoading: boolean) => {
+    loadingWalletTransactions.value = isLoading
+  }
+
+  const setLoadingNetworkLiquidity = (isLoading: boolean) => {
+    loadingNetworkLiquidity.value = isLoading
+  }
+
+  const setSeller = (newSeller: Participant) => {
+    seller.value = newSeller
+  }
+
+  const setSellerId = (id: string) => {
+    sellerId.value = id
+  }
+
+  // Getters become computed or regular functions
+  const getValidDepositByWalletAddress = (address: string) => {
+    return depositsValidList.value
+      .filter((deposit) => deposit.seller == address)
+      .sort((a, b) => b.blockNumber - a.blockNumber)
+  }
+
+  return {
+    // State
+    walletAddress,
+    balance,
+    networkName,
+    selectedToken,
+    loadingLock,
+    sellerView,
+    depositsValidList,
+    loadingWalletTransactions,
+    loadingNetworkLiquidity,
+    seller,
+    sellerId,
+
+    // Actions
+    setWalletAddress,
+    setBalance,
+    setSelectedToken,
+    setNetworkId,
+    setLoadingLock,
+    setSellerView,
+    setDepositsValidList,
+    setLoadingWalletTransactions,
+    setLoadingNetworkLiquidity,
+    setSeller,
+    setSellerId,
+
+    // Getters
+    getValidDepositByWalletAddress
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
-import { createPinia } from "pinia";

 import "./assets/main.css";
 import "./assets/transitions.css";
@@ -9,6 +8,5 @@ import "./assets/transitions.css";
 const app = createApp(App);

 app.use(router);
-app.use(createPinia());

 app.mount("#app");
--- a/src/store/viem.ts
+++ b/src/store/viem.ts
@@ -1,65 +0,0 @@
-import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
-import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { Participant } from "../utils/bbPay";
-import { defineStore } from "pinia";
-
-export const useViemStore = defineStore("viem", {
-  state: () => ({
-    walletAddress: "",
-    balance: "",
-    networkName: NetworkEnum.sepolia,
-    selectedToken: TokenEnum.BRZ,
-    loadingLock: false,
-    sellerView: false,
-    depositsValidList: [] as ValidDeposit[],
-    loadingWalletTransactions: false,
-    loadingNetworkLiquidity: false,
-    seller: {} as Participant,
-    sellerId: "",
-  }),
-  actions: {
-    setWalletAddress(walletAddress: string) {
-      this.walletAddress = walletAddress;
-    },
-    setBalance(balance: string) {
-      this.balance = balance;
-    },
-    setSelectedToken(token: TokenEnum) {
-      this.selectedToken = token;
-    },
-    setNetworkId(networkName: NetworkEnum) {
-      this.networkName = Number(networkName);
-    },
-    setLoadingLock(isLoadingLock: boolean) {
-      this.loadingLock = isLoadingLock;
-    },
-    setSellerView(sellerView: boolean) {
-      this.sellerView = sellerView;
-    },
-    setDepositsValidList(depositsValidList: ValidDeposit[]) {
-      this.depositsValidList = depositsValidList;
-    },
-    setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
-      this.loadingWalletTransactions = isLoadingWalletTransactions;
-    },
-    setLoadingNetworkLiquidity(isLoadingNetworkLiquidity: boolean) {
-      this.loadingNetworkLiquidity = isLoadingNetworkLiquidity;
-    },
-    setSeller(seller: Participant) {
-      this.seller = seller;
-    },
-    setSellerId(sellerId: string) {
-      this.sellerId = sellerId;
-    },
-  },
-  getters: {
-    getValidDepositByWalletAddress: (state) => {
-      return (walletAddress: string) =>
-        state.depositsValidList
-          .filter((deposit) => deposit.seller == walletAddress)
-          .sort((a, b) => {
-            return b.blockNumber - a.blockNumber;
-          });
-    },
-  },
-});
--- a/src/utils/imagesPath.ts
+++ b/src/utils/imagesPath.ts
@@ -7,10 +7,19 @@ export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
 });

 export const getNetworkImage = (networkName: string): string => {
-  const path = Object.keys(imagesPath).find((key) =>
-    key.endsWith(`${networkName.toLowerCase()}.svg`)
-  );
-  return path ? imagesPath[path] : "";
+  try {
+    const path = Object.keys(imagesPath).find((key) =>
+      key.endsWith(`${networkName.toLowerCase()}.svg`)
+    );
+    return path ? imagesPath[path] : "";
+  } catch (error) {
+    console.error("Error fetching network image");
+    const path = Object.keys(imagesPath).find((key) =>
+      key.endsWith(`invalidIcon.svg`)
+    );
+    return path ? imagesPath[path] : "";
+    return "";
+  }
 };

 export const getTokenImage = (tokenName: TokenEnum): string => {
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,9 +3,8 @@ import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
 import { ref, onMounted, watch } from "vue";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
-import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
@@ -20,11 +19,11 @@ enum Step {
  List,
 }

-const viemStore = useViemStore();
-viemStore.setSellerView(false);
+const user = useUser();
+user.setSellerView(false);

 // States
-const { loadingLock, walletAddress, networkName } = storeToRefs(viemStore);
+const { loadingLock, walletAddress, networkName } = user;
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<string>();
 const tokenAmount = ref<number>();
@@ -34,18 +33,13 @@ const showModal = ref<boolean>(false);
 const showBuyAlert = ref<boolean>(false);
 const paramLockID = window.history.state?.lockID;

-const confirmBuyClick = async (
-  selectedDeposit: ValidDeposit,
-  tokenValue: number
-) => {
-  // finish buy screen
+const confirmBuyClick = async (selectedDeposit: ValidDeposit, tokenValue: number) => {
  pixTarget.value = selectedDeposit.pixKey;
  tokenAmount.value = tokenValue;

-  // Makes lock with deposit ID and the Amount
  if (selectedDeposit) {
    flowStep.value = Step.Buy;
-    viemStore.setLoadingLock(true);
+    user.setLoadingLock(true);

    await addLock(selectedDeposit.seller, selectedDeposit.token, tokenValue)
      .then((_lockID) => {
@@ -56,7 +50,7 @@ const confirmBuyClick = async (
        flowStep.value = Step.Search;
      });

-    viemStore.setLoadingLock(false);
+    user.setLoadingLock(false);
  }
 };

--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
@@ -14,10 +14,9 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";

 import router from "@/router/index";
-import { storeToRefs } from "pinia";

-const viemStore = useViemStore();
-const { walletAddress, networkName, selectedToken } = storeToRefs(viemStore);
+const user = useUser();
+const { walletAddress, networkName, selectedToken } = user;
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(false);

@@ -47,7 +46,7 @@ const callWithdraw = async (amount: string) => {
 };

 const getWalletTransactions = async () => {
-  viemStore.setLoadingWalletTransactions(true);
+  user.setLoadingWalletTransactions(true);
  if (walletAddress.value) {
    console.log("Will fetch all required data...");
    const walletDeposits = await listValidDepositTransactionsByWalletAddress(
@@ -70,7 +69,7 @@ const getWalletTransactions = async () => {
      transactionsList.value = allUserTransactions;
    }
  }
-  viemStore.setLoadingWalletTransactions(false);
+  user.setLoadingWalletTransactions(false);
 };

 onMounted(async () => {
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import { storeToRefs } from "pinia";

 import SellerComponent from "@/components/SellerSteps/SellerComponent.vue";
 import SearchComponent from "@/components/SearchComponent.vue";
 import SendNetwork from "@/components/SellerSteps/SendNetwork.vue";
 import SellerSearchComponent from "@/components/SellerSteps/SellerSearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
-import { useViemStore } from "@/store/viem";
+import { useUser } from "@/composables/useUser";
 import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";

 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
@@ -19,12 +18,11 @@ enum Step {
  Network,
 }

-const viemStore = useViemStore();
-viemStore.setSellerView(true);
+const user = useUser();
+user.setSellerView(true);

 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);
-
 const showAlert = ref<boolean>(false);

 // Verificar tipagem
@@ -44,7 +42,7 @@ const approveOffer = async (args: Participant) => {
 const sendNetwork = async () => {
  loading.value = true;
  try {
-    if (viemStore.seller) {
+    if (user.seller.value) {
      await addDeposit();
      flowStep.value = Step.Sell;
      loading.value = false;
@@ -74,9 +72,9 @@ const sendNetwork = async () => {
    />
    <div v-if="flowStep == Step.Network">
      <SendNetwork
-        :sellerId="viemStore.sellerId"
-        :offer="Number(viemStore.seller.offer)"
-        :selected-token="viemStore.selectedToken"
+        :sellerId="user.sellerId"
+        :offer="Number(user.seller.offer)"
+        :selected-token="user.selectedToken"
        v-if="!loading"
        @send-network="sendNetwork"
      />