Merge branch 'libraries-refactor' into buy-refactor

package.json

@@ -10,7 +10,7 @@
     "coverage": "vitest run --coverage",
     "build-only": "vite build",
     "type-check": "vue-tsc --skipLibCheck --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
@@ -25,9 +25,8 @@
     "crc": "^3.8.0",
     "ethers": "^6.13.4",
     "marked": "^4.2.12",
-    "pinia": "^2.0.23",
     "qrcode": "^1.5.1",
-    "viem": "2.x",
+    "viem": "2.19.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.2.41",
     "vue-markdown": "^2.2.4",
@@ -36,7 +35,6 @@
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@pinia/testing": "^0.0.14",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/crc": "^3.8.0",
     "@types/jest": "^27.0.0",

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>

src/assets/main.css

@@ -28,3 +28,9 @@ a,
 .main-container {
   @apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
 }
+
+input[type="number"] {
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}

src/blockchain/__tests__/addresses.spec.ts

@@ -8,7 +8,7 @@ import {
 
 import { setActivePinia, createPinia } from "pinia";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { useEtherStore } from "@/store/ether";
+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 = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(NetworkEnum.sepolia);
     expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
   });
 
   it("getTokenAddress Rootstock", () => {
-    const etherStore = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
+    user.setNetworkId(NetworkEnum.rootstock);
     expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0xfE841c74250e57640390f46d914C88d22C51e82e"
     );
@@ -47,16 +47,16 @@ describe("addresses.ts functions", () => {
   });
 
   it("getP2PixAddress Ethereum", () => {
-    const etherStore = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(NetworkEnum.sepolia);
     expect(getP2PixAddress()).toBe(
       "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
     );
   });
 
   it("getP2PixAddress Rootstock", () => {
-    const etherStore = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
+    user.setNetworkId(NetworkEnum.rootstock);
     expect(getP2PixAddress()).toBe(
       "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
     );
@@ -69,14 +69,14 @@ describe("addresses.ts functions", () => {
   });
 
   it("getProviderUrl Ethereum", () => {
-    const etherStore = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(NetworkEnum.sepolia);
     expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
   });
 
   it("getProviderUrl Rootstock", () => {
-    const etherStore = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
+    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 = useEtherStore();
+    const user = useUser();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
+    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);

src/blockchain/addresses.ts

@@ -1,6 +1,7 @@
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { JsonRpcProvider } from "ethers";
+import { createPublicClient, http } from "viem";
+import { sepolia, rootstock } from "viem/chains";
 
 const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
   [NetworkEnum.sepolia]: {
@@ -14,57 +15,53 @@ const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
 };
 
 export const getTokenByAddress = (address: string) => {
-  for (const network of Object.values(NetworkEnum).filter(
+  const user = useUser();
-    (v) => !isNaN(Number(v))
+  const networksTokens = Tokens[user.networkName.value];
-  )) {
+  for (const [token, tokenAddress] of Object.entries(networksTokens)) {
-    for (const token of Object.keys(Tokens[network as NetworkEnum])) {
+    if (tokenAddress.toLowerCase() === address.toLowerCase()) {
-      if (address === Tokens[network as NetworkEnum][token as TokenEnum]) {
+      return token;
-        return token as TokenEnum;
-      }
     }
   }
-
   return null;
 };
 
-const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
+export const getTokenAddress = (
-  const etherStore = useEtherStore();
+  token: TokenEnum,
-  return Tokens[network ? network : etherStore.networkName][token];
+  network?: NetworkEnum
+): string => {
+  const user = useUser();
+  return Tokens[network ? network : user.networkName.value][token];
 };
 
-const getP2PixAddress = (network?: NetworkEnum): string => {
+export const getP2PixAddress = (network?: NetworkEnum): string => {
-  const etherStore = useEtherStore();
+  const user = useUser();
   const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
-    [NetworkEnum.sepolia]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
+    [NetworkEnum.sepolia]: "0x2414817FF64A114d91eCFA16a834d3fCf69103d4",
     [NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
   };
 
-  return possibleP2PixAddresses[network ? network : etherStore.networkName];
+  return possibleP2PixAddresses[network ? network : user.networkName.value];
 };
 
-const getProviderUrl = (network?: NetworkEnum): string => {
+export const getProviderUrl = (network?: NetworkEnum): string => {
-  const etherStore = useEtherStore();
+  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 || etherStore.networkName];
+  return possibleProvidersUrls[network || user.networkName.value];
 };
 
-const getProviderByNetwork = (network: NetworkEnum): JsonRpcProvider => {
+export const getProviderByNetwork = (network: NetworkEnum) => {
   console.log("network", network);
-  return new JsonRpcProvider(getProviderUrl(network), network);
+  const chain = network === NetworkEnum.sepolia ? sepolia : rootstock;
+  return createPublicClient({
+    chain,
+    transport: http(getProviderUrl(network)),
+  });
 };
 
-const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
+export const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
   return Number(networkChain) in NetworkEnum;
 };
-
-export {
-  getTokenAddress,
-  getProviderUrl,
-  isPossibleNetwork,
-  getP2PixAddress,
-  getProviderByNetwork,
-};

src/blockchain/buyerMethods.ts

@@ -1,94 +1,61 @@
-import { getContract, getProvider } from "./provider";
+import { getContract } from "./provider";
-import { getP2PixAddress, getTokenAddress } from "./addresses";
+import { getTokenAddress } from "./addresses";
-import { encodeBytes32String, Signature, Contract, parseEther } from "ethers";
+import { parseEther } from "viem";
-
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
-
 import type { TokenEnum } from "@/model/NetworkEnum";
-import { createSolicitation } from "../utils/bbPay";
-import type { Offer } from "../utils/bbPay";
 
-const addLock = async (
+export const addLock = async (
-  sellerId: string,
+  sellerAddress: string,
-  token: string,
+  tokenAddress: string,
   amount: number
 ): Promise<string> => {
-  const p2pContract = await getContract();
+  const { address, abi, client } = await getContract();
 
-  const lock = await p2pContract.lock(
+  const parsedAmount = parseEther(amount.toString());
-    sellerId,
-    token,
-    parseEther(String(amount)), // BigNumber
-    [],
-    []
-  );
 
-  const lock_rec = await lock.wait();
+  const { request } = await client.simulateContract({
-  const [t] = lock_rec.events;
+    address,
+    abi,
+    functionName: "addLock",
+    args: [sellerAddress, tokenAddress, parsedAmount],
+  });
 
-  const offer: Offer = {
+  const hash = await client.writeContract(request);
-    amount,
+  const receipt = await client.waitForTransactionReceipt({ hash });
-    lockId: String(t.args.lockID),
-    sellerId: sellerId,
-  };
-  const solicitation = await createSolicitation(offer);
 
-  return;
+  return receipt.status ? receipt.logs[0].topics[2] : "";
 };
 
-const releaseLock = async (solicitation: any): Promise<any> => {
+export const withdrawDeposit = async (
-  // const mockBacenSigner = new Wallet(
-  //   "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
-  // );
-
-  // const messageToSign = solidityPackedKeccak256(
-  //   ["bytes32", "uint256", "bytes32"],
-  //   [sellerId, parseEther(String(amount)), encodeBytes32String(signature)]
-  // );
-
-  // const messageHashBytes = getBytes(messageToSign);
-  // const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
-
-  const provider = getProvider();
-
-  const sig = Signature.from(flatSig);
-  console.log(sig);
-  const signer = await provider.getSigner();
-  const p2pContract = new Contract(getP2PixAddress(), p2pix.abi, signer);
-
-  const release = await p2pContract.release(
-    BigInt(lockId),
-    encodeBytes32String(e2eId),
-    flatSig
-  );
-  await release.wait();
-
-  return release;
-};
-
-const cancelDeposit = async (depositId: bigint): Promise<any> => {
-  const contract = await getContract();
-
-  const cancel = await contract.cancelDeposit(depositId);
-  await cancel.wait();
-
-  return cancel;
-};
-
-const withdrawDeposit = async (
   amount: string,
   token: TokenEnum
-): Promise<any> => {
+): Promise<boolean> => {
-  const contract = await getContract();
+  const { address, abi, client } = await getContract();
 
-  const withdraw = await contract.withdraw(
+  const tokenAddress = getTokenAddress(token);
-    getTokenAddress(token),
-    parseEther(String(amount)),
-    []
-  );
-  await withdraw.wait();
 
-  return withdraw;
+  const { request } = await client.simulateContract({
+    address,
+    abi,
+    functionName: "withdrawDeposit",
+    args: [tokenAddress, parseEther(amount)],
+  });
+
+  const hash = await client.writeContract(request);
+  const receipt = await client.waitForTransactionReceipt({ hash });
+
+  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 });
+};

src/blockchain/events.ts

@@ -1,21 +1,23 @@
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
-import { Contract, formatEther, Interface } from "ethers";
+import {
+  formatEther,
+  decodeEventLog,
+  parseAbi,
+  toHex,
+  type PublicClient,
+} from "viem";
 
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 import { getContract } from "./provider";
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import {
+import { getTokenAddress } from "./addresses";
-  getP2PixAddress,
-  getProviderByNetwork,
-  getTokenAddress,
-} from "./addresses";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import type { Pix } from "@/model/Pix";
 
 const getNetworksLiquidity = async (): Promise<void> => {
-  const etherStore = useEtherStore();
+  const user = useUser();
-  etherStore.setLoadingNetworkLiquidity(true);
+  user.setLoadingNetworkLiquidity(true);
 
   const depositLists: ValidDeposit[][] = [];
 
@@ -23,31 +25,35 @@ const getNetworksLiquidity = async (): Promise<void> => {
     (v) => !isNaN(Number(v))
   )) {
     console.log("getNetworksLiquidity", network);
-    const p2pContract = new Contract(
+    const deposits = await getValidDeposits(
-      getP2PixAddress(network as NetworkEnum),
+      getTokenAddress(user.selectedToken.value),
-      p2pix.abi,
+      Number(network)
-      getProviderByNetwork(network as NetworkEnum)
-    );
-
-    depositLists.push(
-      await getValidDeposits(
-        getTokenAddress(etherStore.selectedToken, network as NetworkEnum),
-        network as NetworkEnum,
-        p2pContract
-      )
     );
+    if (deposits) depositLists.push(deposits);
   }
 
-  etherStore.setDepositsValidList(depositLists.flat());
+  const allDeposits = depositLists.flat();
-  etherStore.setLoadingNetworkLiquidity(false);
+  user.setDepositsValidList(allDeposits);
+  user.setLoadingNetworkLiquidity(false);
 };
 
 const getPixKey = async (seller: string, token: string): Promise<string> => {
-  const p2pContract = await getContract();
+  const { address, abi, client } = await getContract();
-  const pixKeyHex = await p2pContract.getPixTarget(seller, token);
+
+  const pixKeyHex = await client.readContract({
+    address,
+    abi,
+    functionName: "getPixTarget",
+    args: [seller, token],
+  });
+
   // Remove '0x' prefix and convert hex to UTF-8 string
+  const hexString =
+    typeof pixKeyHex === "string" ? pixKeyHex : toHex(pixKeyHex);
+  if (!hexString) throw new Error("PixKey not found");
   const bytes = new Uint8Array(
-    pixKeyHex
+    // @ts-ignore
+    hexString
       .slice(2)
       .match(/.{1,2}/g)
       .map((byte: string) => parseInt(byte, 16))
@@ -59,50 +65,67 @@ const getPixKey = async (seller: string, token: string): Promise<string> => {
 const getValidDeposits = async (
   token: string,
   network: NetworkEnum,
-  contract?: Contract
+  contractInfo?: { client: any; address: string }
 ): Promise<ValidDeposit[]> => {
-  let p2pContract: Contract;
+  let client: PublicClient, address, abi;
 
-  if (contract) {
+  if (contractInfo) {
-    p2pContract = contract;
+    ({ client, address } = contractInfo);
+    abi = p2pix.abi;
   } else {
-    p2pContract = await getContract(true);
+    ({ address, abi, client } = await getContract(true));
+  }
+
+  const depositLogs = await client.getLogs({
+    address,
+    event: parseAbi([
+      "event DepositAdded(address indexed seller, address token, uint256 amount)",
+    ])[0],
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
+
+  if (!contractInfo) {
+    // Get metamask provider contract
+    ({ address, abi, client } = await getContract());
   }
 
-  const filterDeposits = p2pContract.filters.DepositAdded(null);
-  const eventsDeposits = await p2pContract.queryFilter(
-    filterDeposits
-    // 0,
-    // "latest"
-  );
-  if (!contract) p2pContract = await getContract(); // get metamask provider contract
   const depositList: { [key: string]: ValidDeposit } = {};
 
-  for (const deposit of eventsDeposits) {
+  for (const log of depositLogs) {
-    const IPix2Pix = new Interface(p2pix.abi);
+    try {
-    const decoded = IPix2Pix.parseLog({
+      const decoded = decodeEventLog({
-      topics: deposit.topics,
+        abi,
-      data: deposit.data,
+        data: log.data,
-    });
+        topics: log.topics,
-    // Get liquidity only for the selected token
+      });
-    if (decoded?.args.token != token) continue;
-    const mappedBalance = await p2pContract.getBalance(
-      decoded.args.seller,
-      token
-    );
-    let validDeposit: ValidDeposit | null = null;
 
-    if (mappedBalance) {
+      // Get liquidity only for the selected token
-      validDeposit = {
+      if (decoded?.args.token.toLowerCase() !== token.toLowerCase()) continue;
-        token: token,
+
-        blockNumber: deposit.blockNumber,
+      const mappedBalance = await client.readContract({
-        remaining: Number(formatEther(mappedBalance)),
+        address,
-        seller: decoded.args.seller,
+        abi,
-        network,
+        functionName: "getBalance",
-        pixKey: "",
+        args: [decoded.args.seller, token],
-      };
+      });
+
+      let validDeposit: ValidDeposit | null = null;
+
+      if (mappedBalance) {
+        validDeposit = {
+          token: token,
+          blockNumber: Number(log.blockNumber),
+          remaining: Number(formatEther(mappedBalance)),
+          seller: decoded.args.seller,
+          network,
+          pixKey: "",
+        };
+      }
+      if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
+    } catch (error) {
+      console.error("Error decoding log", error);
     }
-    if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
   }
 
   return Object.values(depositList);
@@ -111,15 +134,20 @@ const getValidDeposits = async (
 const getUnreleasedLockById = async (
   lockID: string
 ): Promise<UnreleasedLock> => {
-  const p2pContract = await getContract();
+  const { address, abi, client } = await getContract();
   const pixData: Pix = {
     pixKey: "",
   };
 
-  const lock = await p2pContract.mapLocks(lockID);
+  const lock = await client.readContract({
+    address,
+    abi,
+    functionName: "mapLocks",
+    args: [BigInt(lockID)],
+  });
 
   const pixTarget = lock.pixTarget;
-  const amount = formatEther(lock?.amount);
+  const amount = formatEther(lock.amount);
   pixData.pixKey = pixTarget;
   pixData.value = Number(amount);
 

src/blockchain/provider.ts

@@ -1,27 +1,55 @@
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 import { updateWalletStatus } from "./wallet";
 import { getProviderUrl, getP2PixAddress } from "./addresses";
-import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
+import { createPublicClient, createWalletClient, custom, http } from "viem";
+import { sepolia, rootstock } from "viem/chains";
+import { useUser } from "@/composables/useUser";
 
-let provider: BrowserProvider | JsonRpcProvider | null = null;
+let publicClient = null;
+let walletClient = null;
 
-const getProvider = (onlyAlchemyProvider: boolean = false) => {
+const getPublicClient = (onlyRpcProvider = false) => {
-  if (onlyAlchemyProvider) return new JsonRpcProvider(getProviderUrl()); // alchemy provider
+  if (onlyRpcProvider) {
-  return provider;
+    const user = useUser();
+    const rpcUrl = getProviderUrl();
+    return createPublicClient({
+      chain:
+        Number(user.networkName.value) === sepolia.id ? sepolia : rootstock,
+      transport: http(rpcUrl),
+    });
+  }
+  return publicClient;
 };
 
-const getContract = async (onlyAlchemyProvider: boolean = false) => {
+const getWalletClient = () => {
-  const p = getProvider(onlyAlchemyProvider);
+  return walletClient;
-  try {
+};
-    const signer = await p?.getSigner();
+
-    return new Contract(getP2PixAddress(), p2pix.abi, signer);
+const getContract = async (onlyRpcProvider = false) => {
-  } catch (err) {
+  const client = getPublicClient(onlyRpcProvider);
-    return new Contract(getP2PixAddress(), p2pix.abi, p);
+  const address = getP2PixAddress();
-  }
+  const abi = p2pix.abi;
+
+  return { address, abi, client };
 };
 
 const connectProvider = async (p: any): Promise<void> => {
-  provider = new BrowserProvider(p, "any");
+  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();
 };
-export { getProvider, getContract, connectProvider };
+
+export { getPublicClient, getWalletClient, getContract, connectProvider };

src/blockchain/sellerMethods.ts

@@ -1,60 +1,81 @@
-import { getContract, getProvider } from "./provider";
+import { getContract, getPublicClient, getWalletClient } from "./provider";
 import { getTokenAddress, getP2PixAddress } from "./addresses";
-
+import { parseEther, toHex } from "viem";
-import { encodeBytes32String, Contract, parseEther } from "ethers";
 
 import mockToken from "../utils/smart_contract_files/MockToken.json";
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
 import { createParticipant } from "@/utils/bbPay";
 import type { Participant } from "@/utils/bbPay";
 
 const approveTokens = async (participant: Participant): Promise<any> => {
-  const provider = getProvider();
+  const user = useUser();
-  const signer = await provider?.getSigner();
+  const publicClient = getPublicClient();
-  const etherStore = useEtherStore();
+  const walletClient = getWalletClient();
 
-  etherStore.setSeller(participant);
+  if (!publicClient || !walletClient) {
-  const tokenContract = new Contract(
+    throw new Error("Clients not initialized");
-    getTokenAddress(etherStore.selectedToken),
+  }
-    mockToken.abi,
+
-    signer
+  user.setSeller(participant);
-  );
+  const [account] = await walletClient.getAddresses();
+
+  // Get token address
+  const tokenAddress = getTokenAddress(user.selectedToken.value);
 
   // Check if the token is already approved
-  const approved = await tokenContract.allowance(
+  const allowance = await publicClient.readContract({
-    await signer?.getAddress(),
+    address: tokenAddress,
-    getP2PixAddress()
+    abi: mockToken.abi,
-  );
+    functionName: "allowance",
-  if (approved < parseEther(participant.offer)) {
+    args: [account, getP2PixAddress()],
+  });
+
+  if (allowance < parseEther(participant.offer.toString())) {
     // Approve tokens
-    const apprv = await tokenContract.approve(
+    const hash = await walletClient.writeContract({
-      getP2PixAddress(),
+      address: tokenAddress,
-      parseEther(participant.offer)
+      abi: mockToken.abi,
-    );
+      functionName: "approve",
-    await apprv.wait();
+      args: [getP2PixAddress(), parseEther(participant.offer.toString())],
+      account,
+    });
+
+    await publicClient.waitForTransactionReceipt({ hash });
     return true;
   }
   return true;
 };
 
 const addDeposit = async (): Promise<any> => {
-  const p2pContract = await getContract();
+  const { address, abi, client } = await getContract();
-  const etherStore = useEtherStore();
+  const walletClient = getWalletClient();
+  const user = useUser();
 
-  const sellerId = await createParticipant(etherStore.seller);
+  if (!walletClient) {
-  etherStore.setSellerId(sellerId.id);
+    throw new Error("Wallet client not initialized");
+  }
 
-  const deposit = await p2pContract.deposit(
+  const [account] = await walletClient.getAddresses();
-    sellerId,
-    encodeBytes32String(""),
-    getTokenAddress(etherStore.selectedToken),
-    parseEther(etherStore.seller.offer),
-    true
-  );
 
-  await deposit.wait();
+  const sellerId = await createParticipant(user.seller.value);
+  user.setSellerId(sellerId.id);
 
-  return deposit;
+  const hash = await walletClient.writeContract({
+    address,
+    abi,
+    functionName: "deposit",
+    args: [
+      sellerId.id,
+      toHex("", { size: 32 }),
+      getTokenAddress(user.selectedToken.value),
+      parseEther(user.seller.value.offer),
+      true,
+    ],
+    account,
+  });
+
+  const receipt = await client.waitForTransactionReceipt({ hash });
+  return receipt;
 };
 
 export { approveTokens, addDeposit };

src/blockchain/wallet.ts

@@ -1,17 +1,9 @@
-import {
+import { decodeEventLog, formatEther, type Log, parseAbi } from "viem";
-  Contract,
+import { useUser } from "@/composables/useUser";
-  formatEther,
-  getAddress,
-  Interface,
-  Log,
-  LogDescription,
-} from "ethers";
-import { useEtherStore } from "@/store/ether";
 
-import { getContract, getProvider } from "./provider";
+import { getPublicClient, getWalletClient, getContract } from "./provider";
-import { getTokenAddress, isPossibleNetwork } from "./addresses";
+import { getTokenAddress } from "./addresses";
 
-import mockToken from "@/utils/smart_contract_files/MockToken.json";
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
 import { getValidDeposits } from "./events";
@@ -22,43 +14,36 @@ import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import type { Pix } from "@/model/Pix";
 
 export const updateWalletStatus = async (): Promise<void> => {
-  const etherStore = useEtherStore();
+  const user = useUser();
 
-  const provider = await getProvider();
+  const publicClient = getPublicClient();
-  const signer = await provider?.getSigner();
+  const walletClient = getWalletClient();
-  const network = await provider?.getNetwork();
+
-  const chainId = network?.chainId;
+  if (!publicClient || !walletClient) {
-  if (!isPossibleNetwork(Number(chainId))) {
+    console.error("Client not initialized");
-    window.alert("Invalid chain!:" + chainId);
     return;
   }
-  etherStore.setNetworkId(Number(chainId));
 
-  const mockTokenContract = new Contract(
+  // Get balance
-    getTokenAddress(etherStore.selectedToken),
+  const [account] = await walletClient.getAddresses();
-    mockToken.abi,
+  const balance = await publicClient.getBalance({ address: account });
-    signer
-  );
 
-  const walletAddress = await provider?.send("eth_requestAccounts", []);
+  user.setWalletAddress(account);
-  const balance = await mockTokenContract.balanceOf(walletAddress[0]);
+  user.setBalance(formatEther(balance));
-
-  etherStore.setBalance(formatEther(balance));
-  etherStore.setWalletAddress(getAddress(walletAddress[0]));
 };
 
 export const listValidDepositTransactionsByWalletAddress = async (
   walletAddress: string
 ): Promise<ValidDeposit[]> => {
-  const etherStore = useEtherStore();
+  const user = useUser();
   const walletDeposits = await getValidDeposits(
-    getTokenAddress(etherStore.selectedToken),
+    getTokenAddress(user.selectedToken.value),
-    etherStore.networkName
+    user.networkName.value
   );
   if (walletDeposits) {
     return walletDeposits
       .filter((deposit) => deposit.seller == walletAddress)
-      .sort((a, b) => {
+      .sort((a: ValidDeposit, b: ValidDeposit) => {
         return b.blockNumber - a.blockNumber;
       });
   }
@@ -66,10 +51,15 @@ export const listValidDepositTransactionsByWalletAddress = async (
   return [];
 };
 
-const getLockStatus = async (id: [BigInt]): Promise<number> => {
+const getLockStatus = async (id: bigint): Promise<number> => {
-  const p2pContract = await getContract();
+  const { address, abi, client } = await getContract();
-  const res = await p2pContract.getLocksStatus([id]);
+  const result = await client.readContract({
-  return res[1][0];
+    address,
+    abi,
+    functionName: "getLocksStatus",
+    args: [[id]],
+  });
+  return result[1][0];
 };
 
 const filterLockStatus = async (
@@ -78,31 +68,38 @@ const filterLockStatus = async (
   const txs: WalletTransaction[] = [];
 
   for (const transaction of transactions) {
-    const IPix2Pix = new Interface(p2pix.abi);
+    try {
-    const decoded = IPix2Pix.parseLog({
+      const decoded = decodeEventLog({
-      topics: transaction.topics,
+        abi: p2pix.abi,
-      data: transaction.data,
+        data: transaction.data,
-    });
+        topics: transaction.topics,
-    if (!decoded) continue;
+      });
-    const tx: WalletTransaction = {
+
-      token: decoded.args.token ? decoded.args.token : "",
+      if (!decoded || !decoded.args) continue;
-      blockNumber: transaction.blockNumber,
+
-      amount: decoded.args.amount
+      // Type assertion to handle the args safely
-        ? Number(formatEther(decoded.args.amount))
+      const args = decoded.args as Record<string, any>;
-        : -1,
+
-      seller: decoded.args.seller ? decoded.args.seller : "",
+      const tx: WalletTransaction = {
-      buyer: decoded.args.buyer ? decoded.args.buyer : "",
+        token: args.token ? String(args.token) : "",
-      event: decoded.name,
+        blockNumber: Number(transaction.blockNumber),
-      lockStatus:
+        amount: args.amount ? Number(formatEther(args.amount)) : -1,
-        decoded.name == "LockAdded"
+        seller: args.seller ? String(args.seller) : "",
-          ? await getLockStatus(decoded.args.lockID)
+        buyer: args.buyer ? String(args.buyer) : "",
-          : -1,
+        event: decoded.eventName || "",
-      transactionHash: transaction.transactionHash
+        lockStatus:
-        ? transaction.transactionHash
+          decoded.eventName == "LockAdded" && args.lockID
-        : "",
+            ? await getLockStatus(args.lockID)
-      transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
+            : -1,
-    };
+        transactionHash: transaction.transactionHash
-    txs.push(tx);
+          ? transaction.transactionHash
+          : "",
+        transactionID: args.lockID ? args.lockID.toString() : "",
+      };
+      txs.push(tx);
+    } catch (error) {
+      console.error("Error decoding log", error);
+    }
   }
   return txs;
 };
@@ -110,162 +107,224 @@ const filterLockStatus = async (
 export const listAllTransactionByWalletAddress = async (
   walletAddress: string
 ): Promise<WalletTransaction[]> => {
-  const p2pContract = await getContract(true);
+  const { address, client } = await getContract(true);
 
   // Get deposits
-  const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
+  const depositLogs = await client.getLogs({
-  const eventsDeposits = await p2pContract.queryFilter(
+    address,
-    filterDeposits,
+    event: parseAbi([
-    0,
+      "event DepositAdded(address indexed seller, address token, uint256 amount)",
-    "latest"
+    ])[0],
-  );
+    args: {
+      seller: walletAddress,
+    },
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
   console.log("Fetched all wallet deposits");
 
   // Get locks
-  const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
+  const lockLogs = await client.getLogs({
-  const eventsAddedLocks = await p2pContract.queryFilter(
+    address,
-    filterAddedLocks,
+    event: parseAbi([
-    0,
+      "event LockAdded(address indexed buyer, uint256 indexed lockID, address seller, address token, uint256 amount)",
-    "latest"
+    ])[0],
-  );
+    args: {
+      buyer: walletAddress,
+    },
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
   console.log("Fetched all wallet locks");
 
   // Get released locks
-  const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
+  const releasedLogs = await client.getLogs({
-  const eventsReleasedLocks = await p2pContract.queryFilter(
+    address,
-    filterReleasedLocks,
+    event: parseAbi([
-    0,
+      "event LockReleased(address indexed buyer, uint256 indexed lockID, string e2eId)",
-    "latest"
+    ])[0],
-  );
+    args: {
+      buyer: walletAddress,
+    },
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
   console.log("Fetched all wallet released locks");
 
   // Get withdrawn deposits
-  const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
+  const withdrawnLogs = await client.getLogs({
-    walletAddress,
+    address,
-  ]);
+    event: parseAbi([
-  const eventsWithdrawnDeposits = await p2pContract.queryFilter(
+      "event DepositWithdrawn(address indexed seller, address token, uint256 amount)",
-    filterWithdrawnDeposits
+    ])[0],
-  );
+    args: {
+      seller: walletAddress,
+    },
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
   console.log("Fetched all wallet withdrawn deposits");
 
-  const lockStatusFiltered = await filterLockStatus(
+  const allLogs = [
-    [
+    ...depositLogs,
-      ...eventsDeposits,
+    ...lockLogs,
-      ...eventsAddedLocks,
+    ...releasedLogs,
-      ...eventsReleasedLocks,
+    ...withdrawnLogs,
-      ...eventsWithdrawnDeposits,
+  ].sort((a: Log, b: Log) => {
-    ].sort((a, b) => {
+    return Number(b.blockNumber) - Number(a.blockNumber);
-      return b.blockNumber - a.blockNumber;
+  });
-    })
-  );
 
-  return lockStatusFiltered;
+  return await filterLockStatus(allLogs);
 };
 
 // get wallet's release transactions
 export const listReleaseTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<LogDescription[]> => {
+) => {
-  const p2pContract = await getContract(true);
+  const { address, client } = await getContract(true);
 
-  const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
+  const releasedLogs = await client.getLogs({
-  const eventsReleasedLocks = await p2pContract.queryFilter(
+    address,
-    filterReleasedLocks,
+    event: parseAbi([
-    0,
+      "event LockReleased(address indexed buyer, uint256 indexed lockID, string e2eId)",
-    "latest"
+    ])[0],
-  );
+    args: {
+      buyer: walletAddress,
+    },
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
 
-  return eventsReleasedLocks
+  return releasedLogs
-    .sort((a, b) => {
+    .sort((a: Log, b: Log) => {
-      return b.blockNumber - a.blockNumber;
+      return Number(b.blockNumber) - Number(a.blockNumber);
     })
-    .map((lock) => {
+    .map((log: Log) => {
-      const IPix2Pix = new Interface(p2pix.abi);
+      try {
-      const decoded = IPix2Pix.parseLog({
+        return decodeEventLog({
-        topics: lock.topics,
+          abi: p2pix.abi,
-        data: lock.data,
+          data: log.data,
-      });
+          topics: log.topics,
-      return decoded;
+        });
+      } catch (error) {
+        console.error("Error decoding log", error);
+        return null;
+      }
     })
-    .filter((lock) => lock !== null);
+    .filter((decoded: any) => decoded !== null);
 };
 
-const listLockTransactionByWalletAddress = async (
+const listLockTransactionByWalletAddress = async (walletAddress: string) => {
-  walletAddress: string
+  const { address, client } = await getContract(true);
-): Promise<LogDescription[]> => {
-  const p2pContract = await getContract(true);
 
-  const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
+  const lockLogs = await client.getLogs({
-  const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
+    address,
+    event: parseAbi([
+      "event LockAdded(address indexed buyer, uint256 indexed lockID, address seller, address token, uint256 amount)",
+    ])[0],
+    args: {
+      buyer: walletAddress,
+    },
+    fromBlock: 0n,
+    toBlock: "latest",
+  });
 
-  return eventsReleasedLocks
+  return lockLogs
-    .sort((a, b) => {
+    .sort((a: Log, b: Log) => {
-      return b.blockNumber - a.blockNumber;
+      return Number(b.blockNumber) - Number(a.blockNumber);
     })
-    .map((lock) => {
+    .map((log: Log) => {
-      const IPix2Pix = new Interface(p2pix.abi);
+      try {
-      const decoded = IPix2Pix.parseLog({
+        return decodeEventLog({
-        topics: lock.topics,
+          abi: p2pix.abi,
-        data: lock.data,
+          data: log.data,
-      });
+          topics: log.topics,
-      return decoded;
+        });
+      } catch (error) {
+        console.error("Error decoding log", error);
+        return null;
+      }
     })
-    .filter((lock) => lock !== null);
+    .filter((decoded: any) => decoded !== null);
 };
 
-const listLockTransactionBySellerAddress = async (
+const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
-  sellerAddress: string
+  const { address, client } = await getContract(true);
-): Promise<LogDescription[]> => {
-  const p2pContract = await getContract(true);
   console.log("Will get locks as seller", sellerAddress);
-  const filterAddedLocks = p2pContract.filters.LockAdded();
+
-  const eventsReleasedLocks = await p2pContract.queryFilter(
+  const lockLogs = await client.getLogs({
-    filterAddedLocks
+    address,
-    // 0,
+    event: parseAbi([
-    // "latest"
+      "event LockAdded(address indexed buyer, uint256 indexed lockID, address seller, address token, uint256 amount)",
-  );
+    ])[0],
-  return eventsReleasedLocks
+    fromBlock: 0n,
-    .map((lock) => {
+    toBlock: "latest",
-      const IPix2Pix = new Interface(p2pix.abi);
+  });
-      const decoded = IPix2Pix.parseLog({
+
-        topics: lock.topics,
+  return lockLogs
-        data: lock.data,
+    .map((log: Log) => {
-      });
+      try {
-      return decoded;
+        return decodeEventLog({
+          abi: p2pix.abi,
+          data: log.data,
+          topics: log.topics,
+        });
+      } catch (error) {
+        console.error("Error decoding log", error);
+        return null;
+      }
     })
-    .filter((lock) => lock !== null)
+    .filter((decoded: any) => decoded !== null)
     .filter(
-      (lock) => lock.args.seller.toLowerCase() == sellerAddress.toLowerCase()
+      (decoded: any) =>
+        decoded.args &&
+        decoded.args.seller &&
+        decoded.args.seller.toLowerCase() === sellerAddress.toLowerCase()
     );
 };
 
 export const checkUnreleasedLock = async (
   walletAddress: string
 ): Promise<UnreleasedLock | undefined> => {
-  const p2pContract = await getContract();
+  const { address, abi, client } = await getContract();
   const pixData: Pix = {
     pixKey: "",
   };
 
   const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
-  const lockStatus = await p2pContract.getLocksStatus(
+
-    addedLocks.map((lock) => lock.args?.lockID)
+  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(
-    (lockStatus: number) => lockStatus == 1
+    (status: number) => status == 1
   );
 
-  if (unreleasedLockId != -1) {
+  if (unreleasedLockId !== -1) {
-    const _lockID = lockStatus[0][unreleasedLockId];
+    const lockID = lockStatus[0][unreleasedLockId];
-    const lock = await p2pContract.mapLocks(_lockID);
+
+    const lock = await client.readContract({
+      address,
+      abi,
+      functionName: "mapLocks",
+      args: [lockID],
+    });
 
     const pixTarget = lock.pixTarget;
-    const amount = formatEther(lock?.amount);
+    const amount = formatEther(lock.amount);
     pixData.pixKey = pixTarget;
     pixData.value = Number(amount);
 
     return {
-      lockID: _lockID,
+      lockID,
       pix: pixData,
     };
   }
@@ -274,27 +333,33 @@ export const checkUnreleasedLock = async (
 export const getActiveLockAmount = async (
   walletAddress: string
 ): Promise<number> => {
-  const p2pContract = await getContract(true);
+  const { address, abi, client } = await getContract(true);
   const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
 
-  const lockStatus = await p2pContract.getLocksStatus(
+  if (!lockSeller.length) return 0;
-    lockSeller.map((lock) => lock.args?.lockID)
-  );
 
-  const activeLockAmount = await lockStatus[1].reduce(
+  const lockIds = lockSeller.map((lock: any) => lock.args.lockID);
-    async (sumValue: Promise<number>, currentStatus: number, index: number) => {
-      const currValue = await sumValue;
-      let valueToSum = 0;
 
-      if (currentStatus == 1) {
+  const lockStatus = await client.readContract({
-        const lock = await p2pContract.mapLocks(lockStatus[0][index]);
+    address,
-        valueToSum = Number(formatEther(lock?.amount));
+    abi,
-      }
+    functionName: "getLocksStatus",
+    args: [lockIds],
+  });
 
-      return currValue + valueToSum;
+  let activeLockAmount = 0;
-    },
+  for (let i = 0; i < lockStatus[1].length; i++) {
-    Promise.resolve(0)
+    if (lockStatus[1][i] === 1) {
-  );
+      const lockId = lockStatus[0][i];
+      const lock = await client.readContract({
+        address,
+        abi,
+        functionName: "mapLocks",
+        args: [lockId],
+      });
+      activeLockAmount += Number(formatEther(lock.amount));
+    }
+  }
 
   return activeLockAmount;
 };

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -8,8 +8,7 @@ import {
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
-import { storeToRefs } from "pinia";
 import { onMounted, ref, watch } from "vue";
 import ListingComponent from "../ListingComponent/ListingComponent.vue";
 
@@ -19,8 +18,8 @@ const props = defineProps<{
   isCurrentStep: boolean;
 }>();
 
-const etherStore = useEtherStore();
+const user = useUser();
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress } = useUser();
 
 const lastWalletTransactions = ref<WalletTransaction[]>([]);
 const depositList = ref<ValidDeposit[]>([]);
@@ -29,7 +28,7 @@ const activeLockAmount = ref<number>(0);
 // methods
 
 const getWalletTransactions = async () => {
-  etherStore.setLoadingWalletTransactions(true);
+  user.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
@@ -48,20 +47,20 @@ const getWalletTransactions = async () => {
       lastWalletTransactions.value = allUserTransactions;
     }
   }
-  etherStore.setLoadingWalletTransactions(false);
+  user.setLoadingWalletTransactions(false);
 };
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
-    etherStore.setLoadingWalletTransactions(true);
+    user.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount, etherStore.selectedToken);
+    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!");
     }
-    etherStore.setLoadingWalletTransactions(false);
+    user.setLoadingWalletTransactions(false);
   }
 };
 
@@ -93,14 +92,14 @@ onMounted(async () => {
         <div>
           <p>Tokens recebidos</p>
           <p class="text-2xl text-gray-900">
-            {{ props.tokenAmount }} {{ etherStore.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 {{ etherStore.selectedToken }} em sua carteira.
+            cadastrar o {{ user.selectedToken }} em sua carteira.
           </p>
         </div>
         <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />
@@ -150,10 +149,6 @@ p {
   @apply font-medium text-base text-gray-900;
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;

src/components/ListingComponent/ListingComponent.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
-import { storeToRefs } from "pinia";
 import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
@@ -12,7 +10,7 @@ import { debounce } from "@/utils/debounce";
 import { getTokenByAddress } from "@/blockchain/addresses";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
-const etherStore = useEtherStore();
+const user = useUser();
 
 // props
 const props = defineProps<{
@@ -23,8 +21,9 @@ const props = defineProps<{
 
 const emit = defineEmits(["depositWithdrawn"]);
 
-const { loadingWalletTransactions } = storeToRefs(etherStore);
+const { loadingWalletTransactions } = user;
-const remaining = ref<number>(0.0);
+
+const remaining = ref<number>(0);
 const itemsToShow = ref<WalletTransaction[]>([]);
 const withdrawAmount = ref<string>("");
 const withdrawButtonOpacity = ref<number>(0.6);
@@ -85,8 +84,7 @@ watch(withdrawAmount, (): void => {
 });
 
 const getRemaining = (): number => {
-  if (props.validDeposits instanceof Array) {
+  if (props.validDeposits.length > 0) {
-    // Here we are getting only the first element of the list because
     // in this release only the BRL token is being used.
     const deposit = props.validDeposits[0];
     remaining.value = deposit ? deposit.remaining : 0;
@@ -96,7 +94,7 @@ const getRemaining = (): number => {
 };
 
 const getExplorer = (): string => {
-  return etherStore.networkName == NetworkEnum.sepolia
+  return user.networkName.value == NetworkEnum.sepolia
     ? "Etherscan"
     : "Polygonscan";
 };
@@ -107,7 +105,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

@@ -1,15 +1,13 @@
+import { describe, expect, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
+import ListingComponent from "../ListingComponent.vue";
-import { createPinia, setActivePinia } from "pinia";
+import { useUser } from "@/composables/useUser";
-import { expect } from "vitest";
 import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
 import { MockWalletTransactions } from "@/model/mock/WalletTransactionMock";
-import { useEtherStore } from "@/store/ether";
 
 describe("ListingComponent.vue", () => {
   beforeEach(() => {
-    setActivePinia(createPinia());
+    useUser().setLoadingWalletTransactions(false);
-    useEtherStore().setLoadingWalletTransactions(false);
   });
 
   test("Test Message when an empty array is received", () => {

src/components/QrCodeComponent.vue

@@ -2,14 +2,6 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import CustomModal from "@/components//CustomModal/CustomModal.vue";
-import QRCode from "qrcode";
-
-// props and store references
-const props = defineProps({
-  sellerId: String,
-  amount: Number,
-  qrcode: String,
-});
 
 const windowSize = ref<number>(window.innerWidth);
 const qrCode = ref<string>("");

src/components/SearchComponent.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useUser } from "@/composables/useUser";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
 import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
-import SpinnerComponent from "./SpinnerComponent.vue";
 import { getTokenImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
 
 import { TokenEnum } from "@/model/NetworkEnum";
 
 // Store reference
-const etherStore = useEtherStore();
+const user = useUser();
 const selectTokenToggle = ref<boolean>(false);
 
 const {
@@ -24,7 +23,7 @@ const {
   selectedToken,
   depositsValidList,
   loadingNetworkLiquidity,
-} = storeToRefs(etherStore);
+} = user;
 
 // html references
 const tokenDropdownRef = ref<any>(null);
@@ -84,7 +83,7 @@ onClickOutside(tokenDropdownRef, () => {
 });
 
 const handleSelectedToken = (token: TokenEnum): void => {
-  etherStore.setSelectedToken(token);
+  user.setSelectedToken(token);
   selectTokenToggle.value = false;
 };
 

src/components/SellerSteps/SellerComponent.vue

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

src/components/SellerSteps/SellerSearchComponent.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useUser } from "@/composables/useUser";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
-
-import { useEtherStore } from "@/store/ether";
 import { getTokenImage } from "@/utils/imagesPath";
-import { storeToRefs } from "pinia";
 import { useOnboard } from "@web3-onboard/vue";
 
 // Store
-const etherStore = useEtherStore();
+const user = useUser();
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress } = user;
 
 // Reactive state
 const tokenValue = ref<number>(0);
@@ -76,10 +74,10 @@ const handleInputEvent = (event: any): void => {
             <img
               alt="Token image"
               class="w-fit"
-              :src="getTokenImage(etherStore.selectedToken)"
+              :src="getTokenImage(user.selectedToken.value)"
             />
             <span class="text-gray-900 text-lg w-fit" id="token">{{
-              etherStore.selectedToken
+              user.selectedToken
             }}</span>
           </div>
         </div>
@@ -153,10 +151,6 @@ const handleInputEvent = (event: any): void => {
   @apply text-white text-center;
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;

src/components/SellerSteps/SendNetwork.vue

@@ -26,7 +26,7 @@ const props = defineProps({
         os tokens de volta.</span
       >
     </div>
-    <div class="main-container sm:w-1/3">
+    <div class="main-container">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -79,10 +79,6 @@ p {
   @apply font-medium text-base;
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;

src/components/ToasterComponent.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } 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,7 +1,6 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useEtherStore } from "@/store/ether";
 import { ref, watch } from "vue";
+import { useUser } from "@/composables/useUser";
 import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
@@ -15,10 +14,9 @@ import LinkedinIcon from "@/assets/linkedinIcon.svg";
 import GithubIcon from "@/assets/githubIcon.svg";
 import { connectProvider } from "@/blockchain/provider";
 
-// Store reference
+// Use the new composable
-const etherStore = useEtherStore();
+const user = useUser();
-
+const { walletAddress, sellerView } = user;
-const { walletAddress, sellerView } = storeToRefs(etherStore);
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -38,11 +36,11 @@ const connnectWallet = async (): Promise<void> => {
 watch(connectedWallet, async (newVal: any) => {
   connectProvider(newVal.provider);
   const addresses = await newVal.provider.request({ method: "eth_accounts" });
-  etherStore.setWalletAddress(addresses.shift());
+  user.setWalletAddress(addresses.shift());
 });
 
 watch(connectedChain, (newVal: any) => {
-  etherStore.setNetworkId(newVal?.id);
+  user.setNetworkId(newVal?.id);
 });
 
 const formatWalletAddress = (): string => {
@@ -56,7 +54,7 @@ const formatWalletAddress = (): string => {
 };
 
 const disconnectUser = async (): Promise<void> => {
-  etherStore.setWalletAddress("");
+  user.setWalletAddress("");
   await disconnectWallet({ label: connectedWallet.value?.label || "" });
   closeMenu();
 };
@@ -72,7 +70,7 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
       chainId: Networks[network].chainId,
       wallet: connectedWallet.value?.label || "",
     });
-    etherStore.setNetworkId(network);
+    user.setNetworkId(network);
   } catch (error) {
     console.log("Error changing network", error);
   }
@@ -245,7 +243,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(NetworkEnum[etherStore.networkName])"
+            :src="getNetworkImage(NetworkEnum[user.networkName.value])"
             height="24"
             width="24"
           />
@@ -253,7 +251,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[etherStore.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 @@
-/* eslint-disable no-undef */
+import { describe, it, expect, beforeEach } from "vitest";
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import TopBar from "../TopBar.vue";
-import { useEtherStore } from "../../../store/ether";
+import { useUser } from "@/composables/useUser";
 
 import { createPinia, setActivePinia } from "pinia";
 
@@ -11,24 +11,24 @@ describe("TopBar.vue", () => {
   });
 
   it("should render connect wallet button", () => {
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Conectar carteira");
   });
 
   it("should render button to change to seller view when in buyer screen", () => {
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Quero vender");
   });
 
   it("should render button to change to seller view when in buyer screen", () => {
-    const etherStore = useEtherStore();
+    const user = useUser();
-    etherStore.setSellerView(true);
+    user.setSellerView(true);
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Quero comprar");
   });
 
   it("should render the P2Pix logo correctly", () => {
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     const img = wrapper.findAll(".logo");
     expect(img.length).toBe(2);
   });

src/composables/useUser.ts

@@ -0,0 +1,102 @@
+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,
+  };
+}

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");

src/store/ether.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 useEtherStore = defineStore("ether", {
-  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;
-          });
-    },
-  },
-});

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) =>
+  try {
-    key.endsWith(`${networkName.toLowerCase()}.svg`)
+    const path = Object.keys(imagesPath).find((key) =>
-  );
+      key.endsWith(`${networkName.toLowerCase()}.svg`)
-  return path ? imagesPath[path] : "";
+    );
+    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 => {

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 { useEtherStore } from "@/store/ether";
+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 etherStore = useEtherStore();
+const user = useUser();
-etherStore.setSellerView(false);
+user.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
+const { loadingLock, walletAddress, networkName } = user;
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<string>();
 const tokenAmount = ref<number>();
@@ -38,14 +37,12 @@ const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
   tokenValue: number
 ) => {
-  // finish buy screen
   pixTarget.value = selectedDeposit.pixKey;
   tokenAmount.value = tokenValue;
 
-  // Makes lock with deposit ID and the Amount
   if (selectedDeposit) {
     flowStep.value = Step.Buy;
-    etherStore.setLoadingLock(true);
+    user.setLoadingLock(true);
 
     await addLock(selectedDeposit.seller, selectedDeposit.token, tokenValue)
       .then((_lockID) => {
@@ -56,7 +53,7 @@ const confirmBuyClick = async (
         flowStep.value = Step.Search;
       });
 
-    etherStore.setLoadingLock(false);
+    user.setLoadingLock(false);
   }
 };
 

src/views/ManageBidsView.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useEtherStore } from "@/store/ether";
+import { ref, onMounted, watch } from "vue";
-import { storeToRefs } from "pinia";
+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";
-import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
@@ -16,8 +15,8 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
 
 import router from "@/router/index";
 
-const etherStore = useEtherStore();
+const user = useUser();
-const { walletAddress, networkName, selectedToken } = storeToRefs(etherStore);
+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 () => {
-  etherStore.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;
     }
   }
-  etherStore.setLoadingWalletTransactions(false);
+  user.setLoadingWalletTransactions(false);
 };
 
 onMounted(async () => {

src/views/SellerView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 import SellerComponent from "@/components/SellerSteps/SellerComponent.vue";
 import SendNetwork from "@/components/SellerSteps/SendNetwork.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import { useUser } from "@/composables/useUser";
 import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
-
-import { ref } from "vue";
-import { useEtherStore } from "@/store/ether";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 import type { Participant } from "@/utils/bbPay";
 
@@ -15,12 +15,11 @@ enum Step {
   Network,
 }
 
-const etherStore = useEtherStore();
+const user = useUser();
-etherStore.setSellerView(true);
+user.setSellerView(true);
 
 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);
-
 const showAlert = ref<boolean>(false);
 
 // Verificar tipagem
@@ -40,7 +39,7 @@ const approveOffer = async (args: Participant) => {
 const sendNetwork = async () => {
   loading.value = true;
   try {
-    if (etherStore.seller) {
+    if (user.seller.value) {
       await addDeposit();
       flowStep.value = Step.Sell;
       loading.value = false;
@@ -70,9 +69,9 @@ const sendNetwork = async () => {
     />
     <div v-if="flowStep == Step.Network">
       <SendNetwork
-        :sellerId="etherStore.sellerId"
+        :sellerId="user.sellerId.value"
-        :offer="Number(etherStore.seller.offer)"
+        :offer="Number(user.seller.value.offer)"
-        :selected-token="etherStore.selectedToken"
+        :selected-token="user.selectedToken.value"
         v-if="!loading"
         @send-network="sendNetwork"
       />

tsconfig.json

@@ -27,7 +27,7 @@
     ],
     "preserveValueImports": false,
     "importsNotUsedAsValues": "remove",
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": false
   },
   "references": [
     {
@@ -38,4 +38,4 @@
     "node_modules",
     "./node_modules"
   ]
-}
+}

vite.config.ts

@@ -36,6 +36,9 @@ export default defineConfig({
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
+      "viem/errors": fileURLToPath(
+        new URL("./node_modules/viem/errors", import.meta.url)
+      ),
     },
   },
 });

yarn.lock

@@ -12,11 +12,6 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz#63430d04bd8c5e74f8d7d049338f1cd9d4f02069"
   integrity sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==
 
-"@adraffy/ens-normalize@1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.11.0.tgz#42cc67c5baa407ac25059fcd7d405cc5ecdb0c33"
-  integrity sha512-/3DDPKHqqIqxUULp8yP4zODUY1i+2xvVWsv8A79xGWdCAG+8sb0hRh0Rk2QyOJUnnbyPUAZYcpBuRe3nS2OIUg==
-
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz"
@@ -1615,22 +1610,41 @@
   dependencies:
     "@noble/hashes" "1.3.2"
 
-"@noble/curves@1.6.0", "@noble/curves@^1.4.0", "@noble/curves@~1.6.0":
+"@noble/curves@1.4.0":
-  version "1.6.0"
+  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.6.0.tgz#be5296ebcd5a1730fccea4786d420f87abfeb40b"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.0.tgz#f05771ef64da724997f69ee1261b2417a49522d6"
-  integrity sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==
+  integrity sha512-p+4cb332SFCrReJkCYe8Xzm0OWi4Jji5jVdIZRL/PmacmDkFNw6MrrV+gGpiPxLHbV+zKFRywUWbaseT+tZRXg==
   dependencies:
-    "@noble/hashes" "1.5.0"
+    "@noble/hashes" "1.4.0"
+
+"@noble/curves@^1.4.0":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.8.2.tgz#8f24c037795e22b90ae29e222a856294c1d9ffc7"
+  integrity sha512-vnI7V6lFNe0tLAuJMu+2sX+FcL14TaCWy1qiczg1VwRmPrpQCdq5ESXQMqUc2tluRNf6irBXrWbl1mGN8uaU/g==
+  dependencies:
+    "@noble/hashes" "1.7.2"
+
+"@noble/curves@~1.4.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.2.tgz#40309198c76ed71bc6dbf7ba24e81ceb4d0d1fe9"
+  integrity sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==
+  dependencies:
+    "@noble/hashes" "1.4.0"
 
 "@noble/hashes@1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
   integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
 
-"@noble/hashes@1.5.0", "@noble/hashes@^1.4.0", "@noble/hashes@~1.5.0":
+"@noble/hashes@1.4.0", "@noble/hashes@~1.4.0":
-  version "1.5.0"
+  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.5.0.tgz#abadc5ca20332db2b1b2aa3e496e9af1213570b0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.4.0.tgz#45814aa329f30e4fe0ba49426f49dfccdd066426"
-  integrity sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==
+  integrity sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==
+
+"@noble/hashes@1.7.2", "@noble/hashes@^1.4.0":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.7.2.tgz#d53c65a21658fb02f3303e7ee3ba89d6754c64b4"
+  integrity sha512-biZ0NUSxyjLLqo6KxEJ1b+C2NAx0wtDoFvCaXHGgUkeHzf3Xc1xKumFKREuT7f7DARNZ/slvYUwFG6B0f2b6hQ==
 
 "@noble/hashes@~1.3.0", "@noble/hashes@~1.3.2":
   version "1.3.3"
@@ -1658,19 +1672,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@pinia/testing@^0.0.14":
-  version "0.0.14"
-  resolved "https://registry.npmjs.org/@pinia/testing/-/testing-0.0.14.tgz"
-  integrity sha512-ZmZwVNd/NnKYLIfjfuKl0zlJ3UdiXFpsHzSlL6wCeezSlyrqGMxsIQKv0J6fleu38gyCNTPBEipfxrt8V4+VIg==
-  dependencies:
-    vue-demi "*"
-
 "@rushstack/eslint-patch@^1.1.4":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
-"@scure/base@~1.1.0", "@scure/base@~1.1.2", "@scure/base@~1.1.7", "@scure/base@~1.1.8":
+"@scure/base@~1.1.0", "@scure/base@~1.1.2", "@scure/base@~1.1.6":
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.9.tgz#e5e142fbbfe251091f9c5f1dd4c834ac04c3dbd1"
   integrity sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==
@@ -1684,14 +1691,14 @@
     "@noble/hashes" "~1.3.2"
     "@scure/base" "~1.1.2"
 
-"@scure/bip32@1.5.0":
+"@scure/bip32@1.4.0":
-  version "1.5.0"
+  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.5.0.tgz#dd4a2e1b8a9da60e012e776d954c4186db6328e6"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.4.0.tgz#4e1f1e196abedcef395b33b9674a042524e20d67"
-  integrity sha512-8EnFYkqEQdnkuGBVpCzKxyIwDCBLDVj3oiX0EKUFre/tOjL/Hqba1D6n/8RcmaQy4f95qQFrO2A8Sr6ybh4NRw==
+  integrity sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==
   dependencies:
-    "@noble/curves" "~1.6.0"
+    "@noble/curves" "~1.4.0"
-    "@noble/hashes" "~1.5.0"
+    "@noble/hashes" "~1.4.0"
-    "@scure/base" "~1.1.7"
+    "@scure/base" "~1.1.6"
 
 "@scure/bip39@1.2.1":
   version "1.2.1"
@@ -1701,13 +1708,13 @@
     "@noble/hashes" "~1.3.0"
     "@scure/base" "~1.1.0"
 
-"@scure/bip39@1.4.0":
+"@scure/bip39@1.3.0":
-  version "1.4.0"
+  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.4.0.tgz#664d4f851564e2e1d4bffa0339f9546ea55960a6"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.3.0.tgz#0f258c16823ddd00739461ac31398b4e7d6a18c3"
-  integrity sha512-BEEm6p8IueV/ZTfQLp/0vhw4NPnT9oWf5+28nvmeUICjP99f4vr2d+qc7AVGDDtwRep6ifR43Yed9ERVmiITzw==
+  integrity sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==
   dependencies:
-    "@noble/hashes" "~1.5.0"
+    "@noble/hashes" "~1.4.0"
-    "@scure/base" "~1.1.8"
+    "@scure/base" "~1.1.6"
 
 "@sideway/address@^4.1.3":
   version "4.1.5"
@@ -2117,7 +2124,7 @@
     de-indent "^1.0.2"
     he "^1.2.0"
 
-"@vue/devtools-api@^6.4.4", "@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.4.5":
   version "6.4.5"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz"
   integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
@@ -2324,10 +2331,10 @@ abitype@1.0.0:
   resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.0.tgz#237176dace81d90d018bebf3a45cb42f2a2d9e97"
   integrity sha512-NMeMah//6bJ56H5XRj8QCV4AwuW6hB6zqz2LnhhLdcWVQOsXki6/Pn3APeqxCma62nXIcmZWdu1DlHWS74umVQ==
 
-abitype@1.0.6:
+abitype@1.0.5:
-  version "1.0.6"
+  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.6.tgz#76410903e1d88e34f1362746e2d407513c38565b"
+  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.5.tgz#29d0daa3eea867ca90f7e4123144c1d1270774b6"
-  integrity sha512-MMSqYh4+C/aVqI2RQaWqbvI4Kxo5cQV40WQ4QFtDnNzCkqChm8MuENhElmynZlO0qUy/ObkEUaXtKqYnx1Kp3A==
+  integrity sha512-YzDhti7cjlfaBhHutMaboYB21Ha3rXR9QTkNJFzYC4kC8YclaiwPBBBJY8ejFdu2wnJeZCVZSMlQJ7fi8S6hsw==
 
 acorn-globals@^7.0.0:
   version "7.0.1"
@@ -4222,11 +4229,6 @@ isows@1.0.4:
   resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.4.tgz#810cd0d90cc4995c26395d2aa4cfa4037ebdf061"
   integrity sha512-hEzjY+x9u9hPmBom9IIAqdJCwNLax+xrPb51vEPpERoFlIxgmZcHzsT5jKG06nvInKOBGvReAVz80Umed5CczQ==
 
-isows@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.6.tgz#0da29d706fa51551c663c627ace42769850f86e7"
-  integrity sha512-lPHCayd40oW98/I0uvgaHKWCSvkzY27LjWLbtzOm64yQ+G3Q5npjjbdppU65iZXkK1Zt+kH9pfegli0AYfwYYw==
-
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz"
@@ -4996,14 +4998,6 @@ pify@^3.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
   integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
 
-pinia@^2.0.23:
-  version "2.0.23"
-  resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz"
-  integrity sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==
-  dependencies:
-    "@vue/devtools-api" "^6.4.4"
-    vue-demi "*"
-
 pkg-types@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.1.tgz"
@@ -5950,20 +5944,20 @@ viem@2.12.0:
     isows "1.0.4"
     ws "8.13.0"
 
-viem@2.x:
+viem@2.19.0:
-  version "2.21.41"
+  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.41.tgz#40c9af3f6e0fdbb45b532838b4e1be2418d1b0de"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-2.19.0.tgz#267abcaa847646f7b543d1d957b7e57a5145bb53"
-  integrity sha512-FxDALzW6I9lGSISbGKqGLfsc4GCtALrgm3mpQcOi7gpyTBkKkl39IWgRjAK1KGNOOvqneQmUKSxWsApkUYSn5w==
+  integrity sha512-3UYVzNHhXW6Fug/di4IpISWDUACFEo4CHR+/BgmiNwzEQ/1mskBAsoTjfF5WdWUMeq0HGTGyzjNKipxsak5Jbw==
   dependencies:
-    "@adraffy/ens-normalize" "1.11.0"
+    "@adraffy/ens-normalize" "1.10.0"
-    "@noble/curves" "1.6.0"
+    "@noble/curves" "1.4.0"
-    "@noble/hashes" "1.5.0"
+    "@noble/hashes" "1.4.0"
-    "@scure/bip32" "1.5.0"
+    "@scure/bip32" "1.4.0"
-    "@scure/bip39" "1.4.0"
+    "@scure/bip39" "1.3.0"
-    abitype "1.0.6"
+    abitype "1.0.5"
-    isows "1.0.6"
+    isows "1.0.4"
-    webauthn-p256 "0.0.10"
+    webauthn-p256 "0.0.5"
-    ws "8.18.0"
+    ws "8.17.1"
 
 vite-node@0.28.1:
   version "0.28.1"
@@ -6160,10 +6154,10 @@ w3c-xmlserializer@^4.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
-webauthn-p256@0.0.10:
+webauthn-p256@0.0.5:
-  version "0.0.10"
+  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/webauthn-p256/-/webauthn-p256-0.0.10.tgz#877e75abe8348d3e14485932968edf3325fd2fdd"
+  resolved "https://registry.yarnpkg.com/webauthn-p256/-/webauthn-p256-0.0.5.tgz#0baebd2ba8a414b21cc09c0d40f9dd0be96a06bd"
-  integrity sha512-EeYD+gmIT80YkSIDb2iWq0lq2zbHo1CxHlQTeJ+KkCILWpVy3zASH3ByD4bopzfk0uCwXxLqKGLqp2W4O28VFA==
+  integrity sha512-drMGNWKdaixZNobeORVIqq7k5DsRC9FnG201K2QjeOoQLmtSDaSsVZdkg6n5jUALJKcAG++zBPJXmv6hy0nWFg==
   dependencies:
     "@noble/curves" "^1.4.0"
     "@noble/hashes" "^1.4.0"
@@ -6286,11 +6280,6 @@ ws@8.17.1:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
   integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
-ws@8.18.0:
-  version "8.18.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
-  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
-
 ws@^8.11.0:
   version "8.12.0"
   resolved "https://registry.npmjs.org/ws/-/ws-8.12.0.tgz"