add basic error handling on subgraph queries

feat: add footer with app version

README.md

@@ -116,3 +116,5 @@ curl -X POST \
 https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia
 
 https://api.studio.thegraph.com/query/113713/p-2-pix/1
+
+curl --request POST --url 'https://api.hm.bb.com.br/testes-portal-desenvolvedor/v1/boletos-pix/pagar?gw-app-key=95cad3f03fd9013a9d15005056825665' --header 'content-type: application/json' --data '{"pix":"00020101021226070503***63041654" }'

env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;

package.json

@@ -1,13 +1,11 @@
 {
   "name": "p2pix-front-end",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "scripts": {
     "start": "vite --host=0.0.0.0 --port 3000",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
-    "test": "vitest",
     "serve": "vue-cli-service serve",
-    "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 --fix",
@@ -22,8 +20,6 @@
     "@web3-onboard/vue": "^2.9.0",
     "alchemy-sdk": "^2.3.0",
     "axios": "^1.2.1",
-    "crc": "^3.8.0",
-    "ethers": "^6.13.4",
     "marked": "^4.2.12",
     "qrcode": "^1.5.1",
     "viem": "^2.31.3",
@@ -37,29 +33,25 @@
     "@babel/preset-typescript": "^7.18.6",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/crc": "^3.8.0",
-    "@types/jest": "^27.0.0",
     "@types/marked": "^4.0.8",
     "@types/node": "^16.11.68",
     "@types/qrcode": "^1.5.0",
     "@types/vue-markdown": "^2.2.1",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "@vitest/coverage-c8": "^0.28.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.2.7",
     "@vue/tsconfig": "^0.1.3",
+    "@wagmi/cli": "^2.3.1",
     "autoprefixer": "^10.4.12",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
-    "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.2.1",
     "typescript": "~5.8.2",
     "vite": "^3.1.8",
-    "vitest": "^0.28.1",
     "vue-tsc": "^2.2.8"
   }
 }

src/App.vue

@@ -1,34 +1,25 @@
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
-import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
-import ToasterComponent from "@/components/ToasterComponent.vue";
+import ToasterComponent from "@/components/ui/ToasterComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
 import injectedModule from "@web3-onboard/injected-wallets";
-import { Networks } from "./model/Networks";
+import { Networks, DEFAULT_NETWORK } from "@/config/networks";
-import { NetworkEnum } from "./model/NetworkEnum";
 import { ref } from "vue";
 
 const route = useRoute();
 const injected = injectedModule();
-const targetNetwork = ref(NetworkEnum.sepolia);
+const targetNetwork = ref(DEFAULT_NETWORK);
 
 const web3Onboard = init({
   wallets: [injected],
-  chains: [
+  chains: Object.values(Networks).map((network) => ({
-    {
+    id: `0x${network.id.toString(16)}`,
-      id: Networks[NetworkEnum.sepolia].chainId,
+    token: network.nativeCurrency.symbol,
-      token: "ETH",
+    label: network.name,
-      label: "Sepolia",
+    rpcUrl: network.rpcUrls.default.http[0],
-      rpcUrl: import.meta.env.VITE_SEPOLIA_API_URL,
+  })),
-    },
-    {
-      id: Networks[NetworkEnum.rootstock].chainId,
-      token: "tRBTC",
-      label: "Rootstock Testnet",
-      rpcUrl: import.meta.env.VITE_ROOTSTOCK_API_URL,
-    },
-  ],
   connect: {
     autoConnectLastWallet: true,
   },
@@ -41,7 +32,7 @@ if (!connectedWallet) {
 </script>
 
 <template>
-  <div class="p-3 sm:p-4 md:p-8">
+  <main class="p-3 sm:p-4 md:p-8">
     <TopBar />
     <RouterView v-slot="{ Component }">
       <template v-if="Component">
@@ -62,5 +53,5 @@ if (!connectedWallet) {
       </template>
     </RouterView>
     <ToasterComponent :targetNetwork="targetNetwork" />
-  </div>
+  </main>
 </template>

src/blockchain/__tests__/addresses.spec.ts

@@ -1,98 +0,0 @@
-import { expectTypeOf, it, expect } from "vitest";
-import {
-  getTokenAddress,
-  getP2PixAddress,
-  getProviderUrl,
-  isPossibleNetwork,
-} from "../addresses";
-
-import { setActivePinia, createPinia } from "pinia";
-import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { useUser } from "@/composables/useUser";
-
-describe("addresses.ts types", () => {
-  it("My addresses.ts types work properly", () => {
-    expectTypeOf(getTokenAddress).toBeFunction();
-    expectTypeOf(getP2PixAddress).toBeFunction();
-    expectTypeOf(getProviderUrl).toBeFunction();
-    expectTypeOf(isPossibleNetwork).toBeFunction();
-  });
-});
-
-describe("addresses.ts functions", () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it("getTokenAddress Ethereum", () => {
-    const user = useUser();
-    user.setNetworkId(11155111);
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
-    );
-  });
-
-  it("getTokenAddress Rootstock", () => {
-    const user = useUser();
-    user.setNetworkId(30);
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0xfE841c74250e57640390f46d914C88d22C51e82e"
-    );
-  });
-
-  it("getTokenAddress Default", () => {
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
-    );
-  });
-
-  it("getP2PixAddress Ethereum", () => {
-    const user = useUser();
-    user.setNetworkId(11155111);
-    expect(getP2PixAddress()).toBe(
-      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
-    );
-  });
-
-  it("getP2PixAddress Rootstock", () => {
-    const user = useUser();
-    user.setNetworkId(30);
-    expect(getP2PixAddress()).toBe(
-      "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
-    );
-  });
-
-  it("getP2PixAddress Default", () => {
-    expect(getP2PixAddress()).toBe(
-      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
-    );
-  });
-
-  it("getProviderUrl Ethereum", () => {
-    const user = useUser();
-    user.setNetworkId(11155111);
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
-  });
-
-  it("getProviderUrl Rootstock", () => {
-    const user = useUser();
-    user.setNetworkId(30);
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
-  });
-
-  it("getProviderUrl Default", () => {
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
-  });
-
-  it("isPossibleNetwork Returns", () => {
-    const user = useUser();
-    user.setNetworkId(11155111);
-    expect(isPossibleNetwork(0x5 as NetworkEnum)).toBe(true);
-    expect(isPossibleNetwork(5 as NetworkEnum)).toBe(true);
-    expect(isPossibleNetwork(0x13881 as NetworkEnum)).toBe(true);
-    expect(isPossibleNetwork(80001 as NetworkEnum)).toBe(true);
-
-    expect(isPossibleNetwork(NaN as NetworkEnum)).toBe(false);
-    expect(isPossibleNetwork(0x55 as NetworkEnum)).toBe(false);
-  });
-});

src/blockchain/addresses.ts

@@ -1,67 +0,0 @@
-import { useUser } from "@/composables/useUser";
-import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { createPublicClient, http } from "viem";
-import { sepolia, rootstock } from "viem/chains";
-
-const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
-  [NetworkEnum.sepolia]: {
-    BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
-    // BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
-  },
-  [NetworkEnum.rootstock]: {
-    BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
-    // BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
-  },
-};
-
-export const getTokenByAddress = (address: string) => {
-  const user = useUser();
-  const networksTokens = Tokens[user.networkName.value];
-  for (const [token, tokenAddress] of Object.entries(networksTokens)) {
-    if (tokenAddress.toLowerCase() === address.toLowerCase()) {
-      return token;
-    }
-  }
-  return null;
-};
-
-export const getTokenAddress = (
-  token: TokenEnum,
-  network?: NetworkEnum
-): string => {
-  const user = useUser();
-  return Tokens[network ? network : user.networkName.value][token];
-};
-
-export const getP2PixAddress = (network?: NetworkEnum): string => {
-  const user = useUser();
-  const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
-    [NetworkEnum.sepolia]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
-    [NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
-  };
-
-  return possibleP2PixAddresses[network ? network : user.networkName.value];
-};
-
-export const getProviderUrl = (network?: NetworkEnum): string => {
-  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 || user.networkName.value];
-};
-
-export const getProviderByNetwork = (network: NetworkEnum) => {
-  console.log("network", network);
-  const chain = network === NetworkEnum.sepolia ? sepolia : rootstock;
-  return createPublicClient({
-    chain,
-    transport: http(getProviderUrl(network)),
-  });
-};
-
-export const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
-  return Number(networkChain) in NetworkEnum;
-};

src/blockchain/buyerMethods.ts

@@ -1,58 +1,80 @@
 import { getContract } from "./provider";
-import { getTokenAddress } from "./addresses";
+import { ChainContract } from "viem";
-import { parseEther } from "viem";
+import {
-import type { TokenEnum } from "@/model/NetworkEnum";
+  parseEther,
+  type Address,
+  type TransactionReceipt,
+} from "viem";
 
 export const addLock = async (
-  sellerAddress: string,
+  sellerAddress: Address,
-  tokenAddress: string,
+  tokenAddress: Address,
   amount: number
-): Promise<string> => {
+): Promise<bigint> => {
-  const { address, abi, wallet, client } = await getContract();
+  const { address, abi, wallet, client, account } = await getContract();
   const parsedAmount = parseEther(amount.toString());
 
-  const { request } = await client.simulateContract({
+  if (!wallet) {
+    throw new Error("Wallet not connected");
+  }
+
+  const { result, request } = await client.simulateContract({
     address,
     abi,
     functionName: "lock",
     args: [sellerAddress, tokenAddress, parsedAmount, [], []],
+    account,
   });
-  console.log(wallet);
   const hash = await wallet.writeContract(request);
   const receipt = await client.waitForTransactionReceipt({ hash });
 
-  return receipt.status ? receipt.logs[0].topics[2] : "";
+  if (!receipt.status)
+    throw new Error("Transaction failed: " + receipt.transactionHash);
+
+  return result;
 };
 
 export const withdrawDeposit = async (
   amount: string,
-  token: TokenEnum
+  token: Address
 ): Promise<boolean> => {
-  const { address, abi, wallet, client } = await getContract();
+  const { address, abi, wallet, client, account } = await getContract();
 
-  const tokenAddress = getTokenAddress(token);
+  if (!wallet) {
+    throw new Error("Wallet not connected");
+  }
 
   const { request } = await client.simulateContract({
     address,
     abi,
     functionName: "withdraw",
-    args: [tokenAddress, parseEther(amount), []],
+    args: [token, parseEther(amount), []],
+    account
   });
 
   const hash = await wallet.writeContract(request);
   const receipt = await client.waitForTransactionReceipt({ hash });
 
-  return receipt.status;
+  return receipt.status === "success";
 };
 
-export const releaseLock = async (solicitation: any): Promise<any> => {
+export const releaseLock = async (
-  const { address, abi, wallet, client } = await getContract();
+  lockID: bigint,
+  pixTimestamp: `0x${string}`&{lenght:34},
+  signature: `0x${string}`
+): Promise<TransactionReceipt> => {
+  const { address, abi, wallet, client, account } = await getContract();
+
+  if (!wallet) {
+    throw new Error("Wallet not connected");
+  }
 
   const { request } = await client.simulateContract({
     address,
     abi,
     functionName: "release",
-    args: [solicitation.lockId, solicitation.e2eId],
+    args: [BigInt(lockID), pixTimestamp, signature],
+    account
   });
 
   const hash = await wallet.writeContract(request);

src/blockchain/events.ts

@@ -1,13 +1,13 @@
 import { useUser } from "@/composables/useUser";
-import { formatEther, toHex, type PublicClient } from "viem";
+import { formatEther, toHex, stringToHex } from "viem";
-
+import type { PublicClient, Address } from "viem";
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
+import { Networks } from "@/config/networks";
 import { getContract } from "./provider";
+import { p2PixAbi } from "./abi"
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import { getP2PixAddress, getTokenAddress } from "./addresses";
+import type { NetworkConfig } from "@/model/NetworkEnum";
-import { getNetworkSubgraphURL, NetworkEnum } from "@/model/NetworkEnum";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
-import type { Pix } from "@/model/Pix";
+import { ChainContract } from "viem";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const user = useUser();
@@ -15,12 +15,10 @@ const getNetworksLiquidity = async (): Promise<void> => {
 
   const depositLists: ValidDeposit[][] = [];
 
-  for (const network of Object.values(NetworkEnum).filter(
+  for (const network of Object.values(Networks)) {
-    (v) => !isNaN(Number(v))
-  )) {
     const deposits = await getValidDeposits(
-      getTokenAddress(user.selectedToken.value),
+      user.network.value.tokens[user.selectedToken.value].address,
-      Number(network)
+      network
     );
     if (deposits) depositLists.push(deposits);
   }
@@ -30,10 +28,13 @@ const getNetworksLiquidity = async (): Promise<void> => {
   user.setLoadingNetworkLiquidity(false);
 };
 
-const getPixKey = async (seller: string, token: string): Promise<string> => {
+const getParticipantID = async (
+  seller: Address,
+  token: Address
+): Promise<string> => {
   const { address, abi, client } = await getContract();
 
-  const pixKeyHex = await client.readContract({
+  const participantIDHex = await client.readContract({
     address,
     abi,
     functionName: "getPixTarget",
@@ -42,13 +43,14 @@ const getPixKey = async (seller: string, token: string): Promise<string> => {
 
   // Remove '0x' prefix and convert hex to UTF-8 string
   const hexString =
-    typeof pixKeyHex === "string" ? pixKeyHex : toHex(pixKeyHex);
+    typeof participantIDHex === "string"
-  if (!hexString) throw new Error("PixKey not found");
+      ? participantIDHex
+      : toHex(participantIDHex as bigint);
+  if (!hexString) throw new Error("Participant ID not found");
   const bytes = new Uint8Array(
-    // @ts-ignore
     hexString
       .slice(2)
-      .match(/.{1,2}/g)
+      .match(/.{1,2}/g)!
       .map((byte: string) => parseInt(byte, 16))
   );
   // Remove null bytes from the end of the string
@@ -56,22 +58,19 @@ const getPixKey = async (seller: string, token: string): Promise<string> => {
 };
 
 const getValidDeposits = async (
-  token: string,
+  token: Address,
-  network: NetworkEnum,
+  network: NetworkConfig,
-  contractInfo?: { client: any; address: string }
+  contractInfo?: { client: PublicClient; address: Address }
 ): Promise<ValidDeposit[]> => {
-  let client: PublicClient, address, abi;
+  let client: PublicClient, abi;
 
   if (contractInfo) {
-    ({ client, address } = contractInfo);
+    ({ client } = contractInfo);
-    abi = p2pix.abi;
+    abi = p2PixAbi;
   } else {
-    ({ address, abi, client } = await getContract(true));
+    ({ abi, client } = await getContract(true));
   }
 
-  // TODO: Remove this once we have a subgraph for rootstock
-  if (network === NetworkEnum.rootstock) return [];
-
   const body = {
     query: `
       {
@@ -85,7 +84,7 @@ const getValidDeposits = async (
   `,
   };
 
-  const depositLogs = await fetch(getNetworkSubgraphURL(network), {
+  const depositLogs = await fetch( network.subgraphUrls[0], {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -95,13 +94,17 @@ const getValidDeposits = async (
 
   // remove doubles from sellers list
   const depositData = await depositLogs.json();
+  if (!depositData.data) {
+    console.error("Error fetching deposit logs");
+    return [];
+  }
   const depositAddeds = depositData.data.depositAddeds;
   const uniqueSellers = depositAddeds.reduce(
-    (acc: Record<string, boolean>, deposit: any) => {
+    (acc: Record<Address, boolean>, deposit: any) => {
       acc[deposit.seller] = true;
       return acc;
     },
-    {} as Record<string, boolean>
+    {} as Record<Address, boolean>
   );
 
   if (!contractInfo) {
@@ -111,10 +114,10 @@ const getValidDeposits = async (
 
   const depositList: { [key: string]: ValidDeposit } = {};
 
-  const sellersList = Object.keys(uniqueSellers);
+  const sellersList = Object.keys(uniqueSellers) as Address[];
   // Use multicall to batch all getBalance requests
   const balanceCalls = sellersList.map((seller) => ({
-    address: getP2PixAddress(network),
+    address: (network.contracts?.p2pix as ChainContract).address,
     abi,
     functionName: "getBalance",
     args: [seller, token],
@@ -130,12 +133,12 @@ const getValidDeposits = async (
 
     if (!mappedBalance.error && mappedBalance.result) {
       const validDeposit: ValidDeposit = {
-        token: token,
+        token,
         blockNumber: 0,
         remaining: Number(formatEther(mappedBalance.result as bigint)),
-        seller: seller,
+        seller,
         network,
-        pixKey: "",
+        participantID: "",
       };
       depositList[seller + token] = validDeposit;
     }
@@ -144,28 +147,22 @@ const getValidDeposits = async (
 };
 
 const getUnreleasedLockById = async (
-  lockID: string
+  lockID: bigint
 ): Promise<UnreleasedLock> => {
   const { address, abi, client } = await getContract();
-  const pixData: Pix = {
-    pixKey: "",
-  };
 
-  const lock = await client.readContract({
+  const [ , , , amount, token, seller ] = await client.readContract({
     address,
     abi,
     functionName: "mapLocks",
-    args: [BigInt(lockID)],
+    args: [lockID],
   });
 
-  const pixTarget = lock.pixTarget;
-  const amount = formatEther(lock.amount);
-  pixData.pixKey = pixTarget;
-  pixData.value = Number(amount);
-
   return {
-    lockID: lockID,
+    lockID,
-    pix: pixData,
+    amount: Number(formatEther(amount)),
+    tokenAddress: token,
+    sellerAddress: seller,
   };
 };
 
@@ -173,5 +170,5 @@ export {
   getValidDeposits,
   getNetworksLiquidity,
   getUnreleasedLockById,
-  getPixKey,
+  getParticipantID,
 };

src/blockchain/provider.ts

@@ -1,6 +1,5 @@
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
+import { p2PixAbi } from "./abi";
 import { updateWalletStatus } from "./wallet";
-import { getProviderUrl, getP2PixAddress } from "./addresses";
 import {
   createPublicClient,
   createWalletClient,
@@ -9,50 +8,46 @@ import {
   PublicClient,
   WalletClient,
 } from "viem";
-import { sepolia, rootstock } from "viem/chains";
 import { useUser } from "@/composables/useUser";
+import type { NetworkConfig } from "@/model/NetworkEnum";
+import type { ChainContract } from "viem";
 
-let publicClient: PublicClient | null = null;
 let walletClient: WalletClient | null = null;
 
-const getPublicClient: PublicClient | null = (onlyRpcProvider = false) => {
+const getPublicClient = (): PublicClient => {
-  if (onlyRpcProvider) {
     const user = useUser();
-    const rpcUrl = getProviderUrl();
+    const rpcUrl = (user.network.value as NetworkConfig).rpcUrls.default.http[0];
+    const chain = user.network.value;
+
     return createPublicClient({
-      chain:
+      chain,
-        Number(user.networkName.value) === sepolia.id ? sepolia : rootstock,
       transport: http(rpcUrl),
     });
-  }
-  return publicClient;
 };
 
-const getWalletClient: WalletClient | null = () => {
+const getWalletClient = (): WalletClient | null => {
   return walletClient;
 };
 
 const getContract = async (onlyRpcProvider = false) => {
-  const client = getPublicClient(onlyRpcProvider);
+  const client = getPublicClient();
-  const address = getP2PixAddress();
+  const user = useUser();
-  const abi = p2pix.abi;
+  const address = (user.network.value.contracts?.p2pix as ChainContract).address;
-  const wallet = getWalletClient();
+  const abi = p2PixAbi;
+  const wallet = onlyRpcProvider ? null : getWalletClient();
 
-  const [account] = wallet ? await wallet.getAddresses() : [""];
+  if (!client) {
+    throw new Error("Public client not initialized");
+  }
+
+  const [account] = wallet ? await wallet.getAddresses() : [null];
 
   return { address, abi, client, wallet, account };
 };
 
 const connectProvider = async (p: any): Promise<void> => {
-  console.log("Connecting to wallet provider...");
   const user = useUser();
-  const chain =
+  const chain = user.network.value;
-    Number(user.networkName.value) === sepolia.id ? sepolia : rootstock;
-
-  publicClient = createPublicClient({
-    chain,
-    transport: custom(p),
-  });
 
   const [account] = await p!.request({ method: "eth_requestAccounts" });
 

src/blockchain/sellerMethods.ts

@@ -1,11 +1,15 @@
 import { getContract, getPublicClient, getWalletClient } from "./provider";
-import { getTokenAddress, getP2PixAddress } from "./addresses";
+import { parseEther, toHex, ChainContract } from "viem";
-import { parseEther, toHex } from "viem";
+import { mockTokenAbi } from "./abi";
-
-import mockToken from "../utils/smart_contract_files/MockToken.json";
 import { useUser } from "@/composables/useUser";
 import { createParticipant } from "@/utils/bbPay";
 import type { Participant } from "@/utils/bbPay";
+import type { Address } from "viem";
+
+const getP2PixAddress = (): Address => {
+  const user = useUser();  
+  return (user.network.value.contracts?.p2pix as ChainContract).address;
+};
 
 const approveTokens = async (participant: Participant): Promise<any> => {
   const user = useUser();
@@ -20,24 +24,26 @@ const approveTokens = async (participant: Participant): Promise<any> => {
   const [account] = await walletClient.getAddresses();
 
   // Get token address
-  const tokenAddress = getTokenAddress(user.selectedToken.value);
+  const tokenAddress = user.network.value.tokens[user.selectedToken.value].address;
 
   // Check if the token is already approved
   const allowance = await publicClient.readContract({
     address: tokenAddress,
-    abi: mockToken.abi,
+    abi: mockTokenAbi,
     functionName: "allowance",
     args: [account, getP2PixAddress()],
   });
 
-  if (allowance < parseEther(participant.offer.toString())) {
+  if ( allowance < parseEther(participant.offer.toString()) ) {
     // Approve tokens
+    const chain = user.network.value;
     const hash = await walletClient.writeContract({
       address: tokenAddress,
-      abi: mockToken.abi,
+      abi: mockTokenAbi,
       functionName: "approve",
       args: [getP2PixAddress(), parseEther(participant.offer.toString())],
       account,
+      chain,
     });
 
     await publicClient.waitForTransactionReceipt({ hash });
@@ -59,19 +65,23 @@ const addDeposit = async (): Promise<any> => {
 
   const sellerId = await createParticipant(user.seller.value);
   user.setSellerId(sellerId.id);
-
+  if (!sellerId.id) {
+    throw new Error("Failed to create participant");
+  }
+  const chain = user.network.value;
   const hash = await walletClient.writeContract({
     address,
     abi,
     functionName: "deposit",
     args: [
-      user.networkId + "-" + sellerId.id,
+      user.network.value.id + "-" + sellerId.id,
       toHex("", { size: 32 }),
-      getTokenAddress(user.selectedToken.value),
+      user.network.value.tokens[user.selectedToken.value].address,
       parseEther(user.seller.value.offer.toString()),
       true,
     ],
     account,
+    chain,
   });
 
   const receipt = await client.waitForTransactionReceipt({ hash });

src/blockchain/wallet.ts

@@ -1,18 +1,14 @@
-import { decodeEventLog, formatEther, type Log } from "viem";
+import { formatEther, type Address } from "viem";
 import { useUser } from "@/composables/useUser";
 
 import { getPublicClient, getWalletClient, getContract } from "./provider";
-import { getTokenAddress } from "./addresses";
 
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
+import { getValidDeposits, getUnreleasedLockById } from "./events";
-
-import { getValidDeposits } from "./events";
 
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
-import type { Pix } from "@/model/Pix";
+import { LockStatus } from "@/model/LockStatus";
-import { getNetworkSubgraphURL } from "@/model/NetworkEnum";
 
 export const updateWalletStatus = async (): Promise<void> => {
   const user = useUser();
@@ -34,12 +30,12 @@ export const updateWalletStatus = async (): Promise<void> => {
 };
 
 export const listValidDepositTransactionsByWalletAddress = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<ValidDeposit[]> => {
   const user = useUser();
   const walletDeposits = await getValidDeposits(
-    getTokenAddress(user.selectedToken.value),
+    user.network.value.tokens[user.selectedToken.value].address,
-    user.networkName.value
+    user.network.value
   );
   if (walletDeposits) {
     return walletDeposits
@@ -52,72 +48,31 @@ export const listValidDepositTransactionsByWalletAddress = async (
   return [];
 };
 
-const getLockStatus = async (id: bigint): Promise<number> => {
+const getLockStatus = async (id: bigint): Promise<LockStatus> => {
   const { address, abi, client } = await getContract();
-  const result = await client.readContract({
+  const [ sortedIDs , status ] = await client.readContract({
     address,
     abi,
     functionName: "getLocksStatus",
     args: [[id]],
   });
-  return result[1][0];
+  return status[0];
-};
-
-const filterLockStatus = async (
-  transactions: Log[]
-): Promise<WalletTransaction[]> => {
-  const txs: WalletTransaction[] = [];
-
-  for (const transaction of transactions) {
-    try {
-      const decoded = decodeEventLog({
-        abi: p2pix.abi,
-        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),
-        amount: args.amount ? Number(formatEther(args.amount)) : -1,
-        seller: args.seller ? String(args.seller) : "",
-        buyer: args.buyer ? String(args.buyer) : "",
-        event: decoded.eventName || "",
-        lockStatus:
-          decoded.eventName == "LockAdded" && args.lockID
-            ? await getLockStatus(args.lockID)
-            : -1,
-        transactionHash: transaction.transactionHash
-          ? transaction.transactionHash
-          : "",
-        transactionID: args.lockID ? args.lockID.toString() : "",
-      };
-      txs.push(tx);
-    } catch (error) {
-      console.error("Error decoding log", error);
-    }
-  }
-  return txs;
 };
 
 export const listAllTransactionByWalletAddress = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<WalletTransaction[]> => {
   const user = useUser();
 
   // Get the current network for the subgraph URL
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for all relevant transactions
   const subgraphQuery = {
     query: `
       {
         depositAddeds(where: {seller: "${walletAddress.toLowerCase()}"}) {
+          id
           seller
           token
           amount
@@ -129,7 +84,6 @@ export const listAllTransactionByWalletAddress = async (
           buyer
           lockID
           seller
-          token
           amount
           blockTimestamp
           blockNumber
@@ -138,7 +92,6 @@ export const listAllTransactionByWalletAddress = async (
         lockReleaseds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
           buyer
           lockId
-          e2eId
           blockTimestamp
           blockNumber
           transactionHash
@@ -155,8 +108,7 @@ export const listAllTransactionByWalletAddress = async (
     `,
   };
 
-  console.log("Fetching transactions from subgraph");
+  const response = await fetch(network.subgraphUrls[0], {
-  const response = await fetch(getNetworkSubgraphURL(network), {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -165,23 +117,21 @@ export const listAllTransactionByWalletAddress = async (
   });
 
   const data = await response.json();
-  console.log("Subgraph data fetched:", data);
-
   // Convert all transactions to common WalletTransaction format
   const transactions: WalletTransaction[] = [];
 
   // Process deposit added events
   if (data.data?.depositAddeds) {
-    console.log("Processing deposit events");
     for (const deposit of data.data.depositAddeds) {
       transactions.push({
         token: deposit.token,
         blockNumber: parseInt(deposit.blockNumber),
+        blockTimestamp: parseInt(deposit.blockTimestamp),
         amount: parseFloat(formatEther(BigInt(deposit.amount))),
         seller: deposit.seller,
         buyer: "",
         event: "DepositAdded",
-        lockStatus: -1,
+        lockStatus: undefined,
         transactionHash: deposit.transactionHash,
       });
     }
@@ -189,7 +139,6 @@ export const listAllTransactionByWalletAddress = async (
 
   // Process lock added events
   if (data.data?.lockAddeds) {
-    console.log("Processing lock events");
     for (const lock of data.data.lockAddeds) {
       // Get lock status from the contract
       const lockStatus = await getLockStatus(BigInt(lock.lockID));
@@ -197,6 +146,7 @@ export const listAllTransactionByWalletAddress = async (
       transactions.push({
         token: lock.token,
         blockNumber: parseInt(lock.blockNumber),
+        blockTimestamp: parseInt(lock.blockTimestamp),
         amount: parseFloat(formatEther(BigInt(lock.amount))),
         seller: lock.seller,
         buyer: lock.buyer,
@@ -210,16 +160,16 @@ export const listAllTransactionByWalletAddress = async (
 
   // Process lock released events
   if (data.data?.lockReleaseds) {
-    console.log("Processing release events");
     for (const release of data.data.lockReleaseds) {
       transactions.push({
-        token: "", // Subgraph doesn't provide token in this event, we could enhance this later
+        token: undefined, // Subgraph doesn't provide token in this event, we could enhance this later
         blockNumber: parseInt(release.blockNumber),
+        blockTimestamp: parseInt(release.blockTimestamp),
         amount: -1, // Amount not available in this event
         seller: "",
         buyer: release.buyer,
         event: "LockReleased",
-        lockStatus: -1,
+        lockStatus: undefined,
         transactionHash: release.transactionHash,
         transactionID: release.lockId.toString(),
       });
@@ -228,16 +178,16 @@ export const listAllTransactionByWalletAddress = async (
 
   // Process deposit withdrawn events
   if (data.data?.depositWithdrawns) {
-    console.log("Processing withdrawal events");
     for (const withdrawal of data.data.depositWithdrawns) {
       transactions.push({
         token: withdrawal.token,
         blockNumber: parseInt(withdrawal.blockNumber),
+        blockTimestamp: parseInt(withdrawal.blockTimestamp),
         amount: parseFloat(formatEther(BigInt(withdrawal.amount))),
         seller: withdrawal.seller,
         buyer: "",
         event: "DepositWithdrawn",
-        lockStatus: -1,
+        lockStatus: undefined,
         transactionHash: withdrawal.transactionHash,
       });
     }
@@ -249,10 +199,10 @@ export const listAllTransactionByWalletAddress = async (
 
 // get wallet's release transactions
 export const listReleaseTransactionByWalletAddress = async (
-  walletAddress: string
+  walletAddress: Address
 ) => {
   const user = useUser();
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for release transactions
   const subgraphQuery = {
@@ -271,7 +221,7 @@ export const listReleaseTransactionByWalletAddress = async (
   };
 
   // Fetch data from subgraph
-  const response = await fetch(getNetworkSubgraphURL(network), {
+  const response = await fetch(network.subgraphUrls[0], {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -313,9 +263,9 @@ export const listReleaseTransactionByWalletAddress = async (
     .filter((decoded: any) => decoded !== null);
 };
 
-const listLockTransactionByWalletAddress = async (walletAddress: string) => {
+const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
   const user = useUser();
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for lock added transactions
   const subgraphQuery = {
@@ -325,7 +275,6 @@ const listLockTransactionByWalletAddress = async (walletAddress: string) => {
           buyer
           lockID
           seller
-          token
           amount
           blockTimestamp
           blockNumber
@@ -337,7 +286,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: string) => {
 
   try {
     // Fetch data from subgraph
-    const response = await fetch(getNetworkSubgraphURL(network), {
+    const response = await fetch(network.subgraphUrls[0], {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -365,7 +314,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: string) => {
               buyer: lock.buyer,
               lockID: BigInt(lock.lockID),
               seller: lock.seller,
-              token: lock.token,
+              token: undefined, // Token not available in LockAdded subgraph event
               amount: BigInt(lock.amount),
             },
             // Add other necessary fields to match the original format
@@ -383,10 +332,9 @@ const listLockTransactionByWalletAddress = async (walletAddress: string) => {
   }
 };
 
-const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
+const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
   const user = useUser();
-  const network = user.networkName.value;
+  const network = user.network.value;
-  console.log("Will get locks as seller", sellerAddress);
 
   // Query subgraph for lock added transactions where seller matches
   const subgraphQuery = {
@@ -396,7 +344,6 @@ const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
           buyer
           lockID
           seller
-          token
           amount
           blockTimestamp
           blockNumber
@@ -408,7 +355,7 @@ const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
 
   try {
     // Fetch data from subgraph
-    const response = await fetch(getNetworkSubgraphURL(network), {
+    const response = await fetch(network.subgraphUrls[0], {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -436,7 +383,7 @@ const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
               buyer: lock.buyer,
               lockID: BigInt(lock.lockID),
               seller: lock.seller,
-              token: lock.token,
+              token: undefined, // Token not available in LockAdded subgraph event
               amount: BigInt(lock.amount),
             },
             // Add other necessary fields to match the original format
@@ -456,54 +403,32 @@ const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
 };
 
 export const checkUnreleasedLock = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<UnreleasedLock | undefined> => {
   const { address, abi, client } = await getContract();
-  const pixData: Pix = {
-    pixKey: "",
-  };
-
   const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
 
   if (!addedLocks.length) return undefined;
 
   const lockIds = addedLocks.map((lock: any) => lock.args.lockID);
 
-  const lockStatus = await client.readContract({
+  const [ sortedIDs, status ] = await client.readContract({
     address,
     abi,
     functionName: "getLocksStatus",
     args: [lockIds],
   });
 
-  const unreleasedLockId = lockStatus[1].findIndex(
+  const unreleasedLockId = status.findIndex(
-    (status: number) => status == 1
+    (status: LockStatus) => status == LockStatus.Active
   );
   
-  if (unreleasedLockId !== -1) {
+  if (unreleasedLockId !== -1)
-    const lockID = lockStatus[0][unreleasedLockId];
+    return getUnreleasedLockById(sortedIDs[unreleasedLockId]);
-
-    const lock = await client.readContract({
-      address,
-      abi,
-      functionName: "mapLocks",
-      args: [lockID],
-    });
-
-    const pixTarget = lock.pixTarget;
-    const amount = formatEther(lock.amount);
-    pixData.pixKey = pixTarget;
-    pixData.value = Number(amount);
-
-    return {
-      lockID,
-      pix: pixData,
-    };
-  }
 };
 
 export const getActiveLockAmount = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<number> => {
   const { address, abi, client } = await getContract(true);
   const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
@@ -512,19 +437,19 @@ export const getActiveLockAmount = async (
 
   const lockIds = lockSeller.map((lock: any) => lock.args.lockID);
 
-  const lockStatus = await client.readContract({
+  const [ sortedIDs, status ] = await client.readContract({
     address,
     abi,
     functionName: "getLocksStatus",
     args: [lockIds],
   });
 
-  const mapLocksRequests = lockStatus[0].map((id: bigint) =>
+  const mapLocksRequests = status.map((id: LockStatus) =>
     client.readContract({
-      address,
+      address: address,
       abi,
       functionName: "mapLocks",
-      args: [id],
+      args: [BigInt(id)],
     })
   );
 
@@ -533,7 +458,7 @@ export const getActiveLockAmount = async (
   });
 
   return mapLocksResults.reduce((total: number, lock: any, index: number) => {
-    if (lockStatus[1][index] === 1) {
+    if (status[index] === 1) {
       return total + Number(formatEther(lock.amount));
     }
     return total;

src/components/BuyConfirmedComponent/__tests__/BuyConfirmedComponent.spec.ts

@@ -1,37 +0,0 @@
-import { mount } from "@vue/test-utils";
-import BuyConfirmedComponent from "../BuyConfirmedComponent.vue";
-import { createPinia, setActivePinia } from "pinia";
-
-describe("BuyConfirmedComponent.vue", async () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  const wrapper = mount(BuyConfirmedComponent, {
-    props: {
-      tokenAmount: 1,
-      isCurrentStep: false,
-    },
-  });
-
-  // test("Test component Header Text", () => {
-  //   expect(wrapper.html()).toContain("Os tokens já foram transferidos");
-  //   expect(wrapper.html()).toContain("para a sua carteira!");
-  // });
-
-  // test("Test component Container Text", () => {
-  //   expect(wrapper.html()).toContain("Tokens recebidos");
-  //   expect(wrapper.html()).toContain("BRZ");
-  //   expect(wrapper.html()).toContain("Não encontrou os tokens?");
-  //   expect(wrapper.html()).toContain("Clique no botão abaixo para");
-  //   expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira.");
-  // });
-
-  test("Test makeAnotherTransactionEmit", async () => {
-    wrapper.vm.$emit("makeAnotherTransaction");
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted("makeAnotherTransaction")).toBeTruthy();
-  });
-});

src/components/BuyerSteps/BuyConfirmedComponent.vue

@@ -5,12 +5,12 @@ import {
   listAllTransactionByWalletAddress,
   listValidDepositTransactionsByWalletAddress,
 } from "@/blockchain/wallet";
-import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomButton from "@/components/ui/CustomButton.vue";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useUser } from "@/composables/useUser";
 import { onMounted, ref, watch } from "vue";
-import ListingComponent from "../ListingComponent/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 
 // props
 const props = defineProps<{
@@ -53,7 +53,7 @@ const getWalletTransactions = async () => {
 const callWithdraw = async (amount: string) => {
   if (amount) {
     user.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
+    const withdraw = await withdrawDeposit(amount, user.network.value.tokens[user.selectedToken.value].address);
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();

src/components/BuyerSteps/BuyerSearchComponent.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useUser } from "@/composables/useUser";
-import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
-import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomButton from "@/components/ui/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
-import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
-import { getTokenImage } from "@/utils/imagesPath";
+import { getTokenImage, getNetworkImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
-
+import { Networks } from "@/config/networks";
 import { TokenEnum } from "@/model/NetworkEnum";
 
 // Store reference
@@ -19,7 +18,7 @@ const selectTokenToggle = ref<boolean>(false);
 
 const {
   walletAddress,
-  networkName,
+  network,
   selectedToken,
   depositsValidList,
   loadingNetworkLiquidity,
@@ -38,7 +37,7 @@ const selectedDeposits = ref<ValidDeposit[]>();
 
 import ChevronDown from "@/assets/chevronDown.svg";
 import { useOnboard } from "@web3-onboard/vue";
-import { getPixKey } from "@/blockchain/events";
+import { getParticipantID } from "@/blockchain/events";
 
 // Emits
 const emit = defineEmits(["tokenBuy"]);
@@ -51,10 +50,10 @@ const connectAccount = async (): Promise<void> => {
 
 const emitConfirmButton = async (): Promise<void> => {
   const deposit = selectedDeposits.value?.find(
-    (d) => d.network === Number(networkName.value)
+    (d) => d.network === network.value
   );
   if (!deposit) return;
-  deposit.pixKey = await getPixKey(deposit.seller, deposit.token);
+  deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
   emit("tokenBuy", deposit, tokenValue.value);
 };
 
@@ -90,6 +89,8 @@ const handleSelectedToken = (token: TokenEnum): void => {
 // Verify if there is a valid deposit to buy
 const verifyLiquidity = (): void => {
   enableConfirmButton.value = false;
+  if (!walletAddress.value)
+    return;
   const selDeposits = verifyNetworkLiquidity(
     tokenValue.value,
     walletAddress.value,
@@ -97,7 +98,7 @@ const verifyLiquidity = (): void => {
   );
   selectedDeposits.value = selDeposits;
   hasLiquidity.value = !!selDeposits.find(
-    (d) => d.network === Number(networkName.value)
+    (d) => d.network === network.value
   );
   enableOrDisableConfirmButton();
 };
@@ -108,7 +109,7 @@ const enableOrDisableConfirmButton = (): void => {
     return;
   }
 
-  if (!selectedDeposits.value.find((d) => d.network === networkName.value)) {
+  if (!selectedDeposits.value.find((d) => d.network === network.value)) {
     enableConfirmButton.value = false;
     return;
   }
@@ -116,7 +117,7 @@ const enableOrDisableConfirmButton = (): void => {
   enableConfirmButton.value = true;
 };
 
-watch(networkName, (): void => {
+watch(network, (): void => {
   verifyLiquidity();
   enableOrDisableConfirmButton();
 });
@@ -125,6 +126,13 @@ watch(walletAddress, (): void => {
   verifyLiquidity();
 });
 
+const availableNetworks = computed(() => {
+  if (!selectedDeposits.value) return [];
+  return Object.values(Networks).filter((network) =>
+    selectedDeposits.value?.some((d) => d.network.id === network.id)
+  );
+});
+
 // Add form submission handler
 const handleSubmit = async (e: Event): Promise<void> => {
   e.preventDefault();
@@ -158,7 +166,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
           <input
             type="number"
             name="tokenAmount"
-            class="border-none outline-none text-lg text-gray-900"
+            class="border-none outline-none text-lg text-gray-900 sm:flex-1 max-w-[60%]"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,
@@ -168,7 +176,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
             step=".01"
             required
           />
-          <div class="relative overflow-visible">
+          <div class="relative overflow-visible ml-auto sm:ml-0">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -231,24 +239,12 @@ const handleSubmit = async (e: Event): Promise<void> => {
           </p>
           <div class="flex gap-2">
             <img
-              alt="Rootstock image"
+              v-for="network in availableNetworks"
-              src="@/assets/rootstock.svg?url"
+              :key="network.id"
+              :alt="`${network.name} image`"
+              :src="getNetworkImage(network.name)"
               width="24"
               height="24"
-              v-if="
-                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == NetworkEnum.rootstock)
-              "
-            />
-            <img
-              alt="Ethereum image"
-              src="@/assets/ethereum.svg?url"
-              width="24"
-              height="24"
-              v-if="
-                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == NetworkEnum.sepolia)
-              "
             />
           </div>
         </div>

src/components/BuyerSteps/QrCodeComponent.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import CustomButton from "@/components/ui/CustomButton.vue";
+import CustomModal from "@/components/ui/CustomModal.vue";
+import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
+import { createSolicitation, getSolicitation, type Offer } from "@/utils/bbPay";
+import { getParticipantID } from "@/blockchain/events";
+import { getUnreleasedLockById } from "@/blockchain/events";
+import QRCode from "qrcode";
+
+// Props
+interface Props {
+  lockID: string;
+}
+
+const props = defineProps<Props>();
+
+const qrCode = ref<string>("");
+const qrCodeSvg = ref<string>("");
+const showWarnModal = ref<boolean>(true);
+const pixTimestamp = ref<string>("");
+const releaseSignature = ref<string>("");
+const solicitationData = ref<any>(null);
+const pollingInterval = ref<NodeJS.Timeout | null>(null);
+const copyFeedback = ref<boolean>(false);
+const copyFeedbackTimeout = ref<NodeJS.Timeout | null>(null);
+
+// Function to generate QR code SVG
+const generateQrCodeSvg = async (text: string) => {
+  try {
+    const svgString = await QRCode.toString(text, {
+      type: "svg",
+      width: 192, // 48 * 4 for better quality
+      margin: 2,
+      color: {
+        dark: "#000000",
+        light: "#FFFFFF",
+      },
+    });
+    qrCodeSvg.value = svgString;
+  } catch (error) {
+    console.error("Error generating QR code SVG:", error);
+  }
+};
+
+// Emits
+const emit = defineEmits(["pixValidated"]);
+
+// Function to check solicitation status
+const checkSolicitationStatus = async () => {
+  if (!solicitationData.value?.numeroSolicitacao) {
+    return;
+  }
+
+  try {
+    const response = await getSolicitation(
+      solicitationData.value.numeroSolicitacao
+    );
+
+    if (response.signature) {
+      pixTimestamp.value = response.pixTimestamp;
+      releaseSignature.value = response.signature;
+      // Stop polling when payment is confirmed
+      if (pollingInterval.value) {
+        clearInterval(pollingInterval.value);
+        pollingInterval.value = null;
+      }
+    }
+  } catch (error) {
+    console.error("Error checking solicitation status:", error);
+  }
+};
+
+// Function to start polling
+const startPolling = () => {
+  // Clear any existing interval
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+  }
+
+  // Start new polling interval (10 seconds)
+  pollingInterval.value = setInterval(checkSolicitationStatus, 10000);
+};
+
+
+const copyToClipboard = async () => {
+  if (!qrCode.value) {
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(qrCode.value);
+
+    if (copyFeedbackTimeout.value) {
+      clearTimeout(copyFeedbackTimeout.value);
+    }
+
+    copyFeedback.value = true;
+
+    copyFeedbackTimeout.value = setTimeout(() => {
+      copyFeedback.value = false;
+    }, 2000);
+  } catch (error) {
+    console.error("Error copying to clipboard:", error);
+  }
+};
+
+onMounted(async () => {
+  try {
+    const { tokenAddress, sellerAddress, amount } = await getUnreleasedLockById(
+      BigInt(props.lockID)
+    );
+
+    const participantId = await getParticipantID(
+      sellerAddress,
+      tokenAddress
+    );
+
+    const offer: Offer = {
+      amount,
+      sellerId: participantId,
+    };
+
+    const response = await createSolicitation(offer);
+    solicitationData.value = response;
+
+    // Update qrCode if the response contains QR code data
+    if (response?.informacoesPIX?.textoQrCode) {
+      qrCode.value = response.informacoesPIX?.textoQrCode;
+      // Generate SVG QR code
+      await generateQrCodeSvg(qrCode.value);
+    }
+
+    // Start polling for solicitation status
+    startPolling();
+  } catch (error) {
+    console.error("Error creating solicitation:", error);
+  }
+});
+
+// Clean up interval on component unmount
+onUnmounted(() => {
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+    pollingInterval.value = null;
+  }
+  if (copyFeedbackTimeout.value) {
+    clearTimeout(copyFeedbackTimeout.value);
+    copyFeedbackTimeout.value = null;
+  }
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span
+        class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]"
+      >
+        Utilize o QR Code ou copie o código para realizar o Pix
+      </span>
+      <span class="text font-medium lg:text-md text-sm max-w-[28rem]">
+        Após realizar o Pix no banco de sua preferência, clique no botão abaixo
+        para liberação dos tokens.
+      </span>
+    </div>
+    <div class="main-container max-w-md text-black">
+      <div
+        class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
+      >
+        <div
+          v-if="qrCodeSvg"
+          v-html="qrCodeSvg"
+          class="w-48 h-48 flex items-center justify-center"
+        ></div>
+        <div
+          v-else
+          class="w-48 h-48 flex items-center justify-center rounded-lg"
+        >
+          <SpinnerComponent width="8" height="8"></SpinnerComponent>
+        </div>
+        <span class="text-center font-bold">Código pix</span>
+        <div class="break-words w-4/5">
+          <span class="text-center text-xs">
+            {{ qrCode }}
+          </span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <img
+            alt="Copy PIX code"
+            src="@/assets/copyPix.svg?url"
+            width="16"
+            height="16"
+            class="pt-2 cursor-pointer hover:opacity-70 transition-opacity"
+            @click="copyToClipboard"
+          />
+          <transition name="fade">
+            <span
+              v-if="copyFeedback"
+              class="text-xs text-emerald-500 font-semibold"
+            >
+              Código copiado!
+            </span>
+          </transition>
+        </div>
+      </div>
+      <CustomButton
+        :is-disabled="releaseSignature === ''"
+        :text="
+          releaseSignature ? 'Enviar para a rede' : 'Validando pagamento...'
+        "
+        @button-clicked="
+          emit('pixValidated', { pixTimestamp, signature: releaseSignature })
+        "
+      />
+    </div>
+    <CustomModal
+      v-if="showWarnModal"
+      @close-modal="showWarnModal = false"
+      :isRedirectModal="false"
+    />
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+::placeholder {
+  /* Most modern browsers support this now. */
+  color: #9ca3af;
+}
+
+h4 {
+  color: #080808;
+  font-size: 14px;
+}
+
+h2 {
+  color: #080808;
+}
+
+.form-input {
+  @apply rounded-lg border border-gray-200 p-2 text-black;
+}
+
+.form-label {
+  @apply font-semibold tracking-wide text-emerald-50;
+}
+
+.custom-divide {
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+}
+.bottom-position {
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-white text-center;
+}
+
+.blur-container {
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6 max-w-screen-sm;
+}
+
+input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+/* Fade transition for copy feedback */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/CustomButton/CustomButton.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  text: String,
-  isDisabled: Boolean,
-});
-
-const emit = defineEmits(["buttonClicked"]);
-</script>
-
-<template>
-  <button
-    type="button"
-    class="button"
-    @click="emit('buttonClicked')"
-    v-bind:class="{ 'opacity-70': props.isDisabled }"
-    :disabled="props.isDisabled ? props.isDisabled : false"
-  >
-    {{ props.text }}
-  </button>
-</template>
-
-<style scoped>
-.button {
-  @apply rounded-lg w-full text-base font-semibold text-gray-900 p-4 bg-amber-400;
-}
-</style>

src/components/CustomButton/__tests__/CustomButton.spec.ts

@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import CustomButton from "../CustomButton.vue";
-
-describe("CustomButton.vue", () => {
-  test("Test button content", () => {
-    const wrapper = mount(CustomButton, {
-      props: {
-        text: "Testing",
-      },
-    });
-
-    expect(wrapper.html()).toContain("Testing");
-  });
-
-  test("Test if disabled props works", () => {
-    const wrapper = mount(CustomButton, {
-      props: {
-        isDisabled: true,
-      },
-    });
-
-    //@ts-ignore
-    const button = wrapper.find(".button") as HTMLButtonElement;
-    //@ts-ignore
-    expect(button.element.disabled).toBe(true);
-  });
-});

src/components/CustomModal/__tests__/CustomModal.spec.ts

@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import CustomModal from "../CustomModal.vue";
-
-describe("CustomModal test", () => {
-  test("Test custom modal when receive is redirect modal props as false", () => {
-    const wrapper = mount(CustomModal, {
-      props: {
-        isRedirectModal: false,
-      },
-    });
-
-    expect(wrapper.html()).toContain("ATENÇÃO!");
-    expect(wrapper.html()).toContain("Entendi");
-  });
-
-  test("Test custom modal when receive is redirect modal props as true", () => {
-    const wrapper = mount(CustomModal, {
-      props: {
-        isRedirectModal: true,
-      },
-    });
-
-    expect(wrapper.html()).toContain("Retomar a última compra?");
-    expect(wrapper.html()).toContain("Não");
-    expect(wrapper.html()).toContain("Sim");
-  });
-});

src/components/Explorer/AnalyticsCard.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+  value: string;
+  change?: string;
+  changeType?: 'positive' | 'negative' | 'neutral';
+  icon?: string;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  changeType: 'neutral',
+  loading: false
+});
+</script>
+
+<template>
+  <div class="analytics-card">
+    <div class="analytics-content">
+      <div v-if="loading" class="analytics-value">
+        <div class="animate-pulse bg-gray-300 h-8 w-16 rounded"></div>
+      </div>
+      <div v-else class="analytics-value">{{ value }}</div>
+      <div class="analytics-title">{{ title }}</div>
+      <div v-if="change && !loading" class="analytics-change" :class="`change-${changeType}`">
+        {{ change }}
+      </div>
+    </div>
+    <div v-if="icon && !loading" class="analytics-icon">
+      <img :src="icon" :alt="`${title} icon`" class="w-8 h-8" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.analytics-card {
+  @apply bg-white rounded-lg border border-gray-200 p-6 flex items-center justify-between shadow-lg;
+}
+
+.analytics-content {
+  @apply flex flex-col;
+}
+
+.analytics-value {
+  @apply text-2xl font-bold text-amber-400 mb-1 break-words overflow-hidden;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+.analytics-title {
+  @apply text-sm text-gray-900 mb-1;
+}
+
+.analytics-change {
+  @apply text-xs font-medium;
+}
+
+.change-positive {
+  @apply text-green-600;
+}
+
+.change-negative {
+  @apply text-red-600;
+}
+
+.change-neutral {
+  @apply text-gray-600;
+}
+
+.analytics-icon {
+  @apply flex-shrink-0;
+}
+</style>

src/components/Explorer/TransactionTable.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Transaction {
+  id: string;
+  type: 'deposit' | 'lock' | 'release' | 'return';
+  timestamp: string;
+  seller?: string;
+  buyer?: string | null;
+  amount: string;
+  token: string;
+  blockNumber: string;
+  transactionHash: string;
+}
+
+interface Props {
+  transactions: Transaction[];
+  networkExplorerUrl: string;
+}
+
+const props = defineProps<Props>();
+
+const copyFeedback = ref<{ [key: string]: boolean }>({});
+const copyFeedbackTimeout = ref<{ [key: string]: NodeJS.Timeout | null }>({});
+
+const getTransactionTypeInfo = (type: string) => {
+  const typeMap = {
+    deposit: { label: 'Depósito', status: 'completed' as const },
+    lock: { label: 'Bloqueio', status: 'open' as const },
+    release: { label: 'Liberação', status: 'completed' as const },
+    return: { label: 'Retorno', status: 'expired' as const }
+  };
+  return typeMap[type as keyof typeof typeMap] || { label: type, status: 'pending' as const };
+};
+
+const getTransactionTypeColor = (type: string) => {
+  const colorMap = {
+    deposit: 'text-emerald-600',
+    lock: 'text-amber-600', 
+    release: 'text-emerald-600',
+    return: 'text-gray-600'
+  };
+  return colorMap[type as keyof typeof colorMap] || 'text-gray-600';
+};
+
+const formatAddress = (address: string) => {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+const formatAmount = (amount: string, decimals: number = 18): string => {
+  const num = parseFloat(amount) / Math.pow(10, decimals);
+  return num.toString();
+};
+
+const getExplorerUrl = (txHash: string) => {
+  return `${props.networkExplorerUrl}/tx/${txHash}`;
+};
+
+const copyToClipboard = async (address: string, key: string) => {
+  if (!address) {
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(address);
+
+    if (copyFeedbackTimeout.value[key]) {
+      clearTimeout(copyFeedbackTimeout.value[key]!);
+    }
+
+    copyFeedback.value[key] = true;
+
+    copyFeedbackTimeout.value[key] = setTimeout(() => {
+      copyFeedback.value[key] = false;
+    }, 2000);
+  } catch (error) {
+    console.error('Error copying to clipboard:', error);
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="hidden lg:block overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-gray-200">
+            <th class="text-left py-3 px-4 text-gray-700 font-medium">Horário</th>
+            <th class="text-left py-3 px-4 text-gray-700 font-medium">Tipo</th>
+            <th class="text-left py-3 px-4 text-gray-700 font-medium">Participantes</th>
+            <th class="text-left py-3 px-4 text-gray-700 font-medium">Valor</th>
+            <th class="text-left py-3 px-4 text-gray-700 font-medium">Bloco</th>
+            <th class="text-left py-3 px-4 text-gray-700 font-medium">Ações</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr 
+            v-for="transaction in transactions" 
+            :key="transaction.id"
+            class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+          >
+            <td class="py-4 px-4">
+              <div class="text-sm text-gray-600">{{ transaction.timestamp }}</div>
+            </td>
+            <td class="py-4 px-4">
+              <span 
+                :class="getTransactionTypeColor(transaction.type)"
+                class="text-sm font-medium"
+              >
+                {{ getTransactionTypeInfo(transaction.type).label }}
+              </span>
+            </td>
+            <td class="py-4 px-4">
+              <div class="space-y-1">
+                <div v-if="transaction.seller" class="text-sm">
+                  <span class="text-gray-600">Vendedor: </span>
+                  <div class="relative inline-block">
+                    <span 
+                      class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
+                      @click="copyToClipboard(transaction.seller, `seller-${transaction.id}`)"
+                      title="Copiar"
+                    >
+                      {{ formatAddress(transaction.seller) }}
+                    </span>
+                    <transition name="fade">
+                      <span
+                        v-if="copyFeedback[`seller-${transaction.id}`]"
+                        class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
+                      >
+                        Copiado!
+                      </span>
+                    </transition>
+                  </div>
+                </div>
+                <div v-if="transaction.buyer" class="text-sm">
+                  <span class="text-gray-600">Comprador: </span>
+                  <div class="relative inline-block">
+                    <span 
+                      class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
+                      @click="copyToClipboard(transaction.buyer, `buyer-${transaction.id}`)"
+                      title="Copiar"
+                    >
+                      {{ formatAddress(transaction.buyer) }}
+                    </span>
+                    <transition name="fade">
+                      <span
+                        v-if="copyFeedback[`buyer-${transaction.id}`]"
+                        class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
+                      >
+                        Copiado!
+                      </span>
+                    </transition>
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="py-4 px-4">
+              <div class="text-sm font-semibold text-emerald-600">
+                {{ formatAmount(transaction.amount, 18) }} BRZ
+              </div>
+            </td>
+            <td class="py-4 px-4">
+              <div class="text-sm text-gray-600 font-mono">
+                #{{ transaction.blockNumber }}
+              </div>
+            </td>
+            <td class="py-4 px-4">
+              <a
+                :href="getExplorerUrl(transaction.transactionHash)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center px-3 py-1 bg-amber-400 text-gray-900 rounded-lg text-sm font-medium hover:bg-amber-500 transition-colors"
+              >
+                Explorador
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Mobile Cards -->
+    <div class="lg:hidden space-y-4">
+      <div 
+        v-for="transaction in transactions" 
+        :key="transaction.id"
+        class="bg-gray-50 rounded-lg p-4 border border-gray-200"
+      >
+        <div class="flex items-center justify-between mb-3">
+          <span 
+            :class="getTransactionTypeColor(transaction.type)"
+            class="text-sm font-medium"
+          >
+            {{ getTransactionTypeInfo(transaction.type).label }}
+          </span>
+          <div class="text-sm text-gray-600">{{ transaction.timestamp }}</div>
+        </div>
+        
+        <div class="space-y-2 mb-4">
+          <div v-if="transaction.seller" class="text-sm">
+            <span class="text-gray-600">Vendedor: </span>
+            <div class="relative inline-block">
+              <span 
+                class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
+                @click="copyToClipboard(transaction.seller, `seller-${transaction.id}`)"
+                title="Copiar"
+              >
+                {{ formatAddress(transaction.seller) }}
+              </span>
+              <transition name="fade">
+                <span
+                  v-if="copyFeedback[`seller-${transaction.id}`]"
+                  class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
+                >
+                  Copiado!
+                </span>
+              </transition>
+            </div>
+          </div>
+          <div v-if="transaction.buyer" class="text-sm">
+            <span class="text-gray-600">Comprador: </span>
+            <div class="relative inline-block">
+              <span 
+                class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
+                @click="copyToClipboard(transaction.buyer, `buyer-${transaction.id}`)"
+                title="Copiar"
+              >
+                {{ formatAddress(transaction.buyer) }}
+              </span>
+              <transition name="fade">
+                <span
+                  v-if="copyFeedback[`buyer-${transaction.id}`]"
+                  class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
+                >
+                  Copiado!
+                </span>
+              </transition>
+            </div>
+          </div>
+          <div class="text-sm">
+            <span class="text-gray-600">Valor: </span>
+              <span class="font-semibold text-emerald-600">{{ formatAmount(transaction.amount, 18) }} BRZ</span>
+            </div>
+          <div class="text-sm">
+            <span class="text-gray-600">Bloco: </span>
+            <span class="text-gray-900 font-mono">#{{ transaction.blockNumber }}</span>
+          </div>
+        </div>
+        
+        <a
+          :href="getExplorerUrl(transaction.transactionHash)"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center px-3 py-1 bg-amber-400 text-gray-900 rounded-lg text-sm font-medium hover:bg-amber-500 transition-colors"
+        >
+          Ver no Explorador
+        </a>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-if="transactions.length === 0" class="text-center py-12">
+      <div class="text-gray-500 text-lg mb-2">📭</div>
+      <p class="text-gray-600">Nenhuma transação encontrada</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/ListingComponent/BalanceCard.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import type { ValidDeposit } from "@/model/ValidDeposit";
+import { ref, watch, onMounted, computed } from "vue";
+import { debounce } from "@/utils/debounce";
+import { decimalCount } from "@/utils/decimalCount";
+import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
+import IconButton from "../ui/IconButton.vue";
+import withdrawIcon from "@/assets/withdraw.svg?url";
+
+const props = defineProps<{
+  validDeposits: ValidDeposit[];
+  activeLockAmount: number;
+  selectedToken: string;
+}>();
+
+const emit = defineEmits<{
+  withdraw: [amount: string];
+}>();
+
+const withdrawAmount = ref<string>("");
+const isCollapsibleOpen = ref<boolean>(false);
+const validDecimals = ref<boolean>(true);
+const validWithdrawAmount = ref<boolean>(true);
+const enableConfirmButton = ref<boolean>(false);
+const showInfoTooltip = ref<boolean>(false);
+const floatingArrow = ref(null);
+
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
+const infoText = ref<HTMLElement | null>(null);
+
+const remaining = computed(() => {
+  if (props.validDeposits.length > 0) {
+    const deposit = props.validDeposits[0];
+    return deposit ? deposit.remaining : 0;
+  }
+  return 0;
+});
+
+const handleInputEvent = (event: any): void => {
+  const { value } = event.target;
+
+  if (decimalCount(String(value)) > 2) {
+    validDecimals.value = false;
+    enableConfirmButton.value = false;
+    return;
+  }
+  validDecimals.value = true;
+
+  if (value > remaining.value) {
+    validWithdrawAmount.value = false;
+    enableConfirmButton.value = false;
+    return;
+  }
+  validWithdrawAmount.value = true;
+  enableConfirmButton.value = true;
+};
+
+const callWithdraw = () => {
+  if (enableConfirmButton.value && withdrawAmount.value) {
+    emit("withdraw", withdrawAmount.value);
+    // Reset form after withdraw
+    withdrawAmount.value = "";
+    isCollapsibleOpen.value = false;
+  }
+};
+
+const openWithdrawForm = () => {
+  isCollapsibleOpen.value = true;
+};
+
+const cancelWithdraw = () => {
+  isCollapsibleOpen.value = false;
+  withdrawAmount.value = "";
+  validDecimals.value = true;
+  validWithdrawAmount.value = true;
+  enableConfirmButton.value = false;
+};
+
+onMounted(() => {
+  useFloating(reference, floating, {
+    placement: "right",
+    middleware: [
+      offset(10),
+      flip(),
+      shift(),
+      arrow({ element: floatingArrow }),
+    ],
+  });
+});
+</script>
+
+<template>
+  <div class="w-full bg-white p-4 sm:p-6 rounded-lg">
+    <div class="flex justify-between items-center">
+      <div>
+        <p class="text-sm leading-5 font-medium text-gray-600">
+          Saldo disponível
+        </p>
+        <p class="text-xl leading-7 font-semibold text-gray-900">
+          {{ remaining }} {{ selectedToken }}
+        </p>
+        <div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0">
+          <span class="text-xs font-normal text-gray-400" ref="infoText">
+            {{ `com ${activeLockAmount.toFixed(2)} ${selectedToken} em lock` }}
+          </span>
+          <div
+            class="absolute mt-[2px] md-view"
+            :style="{ left: `${(infoText?.clientWidth ?? 108) + 4}px` }"
+          >
+            <img
+              alt="info image"
+              src="@/assets/info.svg?url"
+              aria-describedby="tooltip"
+              ref="reference"
+              @mouseover="showInfoTooltip = true"
+              @mouseout="showInfoTooltip = false"
+            />
+            <div
+              role="tooltip"
+              ref="floating"
+              class="w-56 z-50 tooltip md-view"
+              v-if="showInfoTooltip"
+            >
+              Valor "em lock" significa que a quantia está aguardando
+              confirmação de compra e só estará disponível para saque caso a
+              transação expire.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
+        <IconButton
+          text="Sacar"
+          :icon="withdrawIcon"
+          variant="outline"
+          size="md"
+          :full-width="false"
+          @click="openWithdrawForm"
+        />
+      </div>
+    </div>
+    <div class="pt-5">
+      <div v-show="isCollapsibleOpen" class="py-2 w-100">
+        <p class="text-sm leading-5 font-medium">Valor do saque</p>
+        <input
+          type="number"
+          @input="debounce(handleInputEvent, 500)($event)"
+          placeholder="0"
+          class="text-2xl text-gray-900 w-full outline-none"
+          v-model="withdrawAmount"
+        />
+      </div>
+      <div class="flex justify-center" v-if="!validDecimals">
+        <span class="text-red-500 font-normal text-sm">
+          Por favor utilize no máximo 2 casas decimais
+        </span>
+      </div>
+      <div class="flex justify-center" v-else-if="!validWithdrawAmount">
+        <span class="text-red-500 font-normal text-sm">
+          Saldo insuficiente
+        </span>
+      </div>
+      <hr v-show="isCollapsibleOpen" class="pb-3" />
+      <div
+        v-show="isCollapsibleOpen"
+        class="flex justify-between items-center"
+      >
+        <h1
+          @click="cancelWithdraw"
+          class="text-black font-medium cursor-pointer hover:text-gray-600 transition-colors"
+        >
+          Cancelar
+        </h1>
+
+        <IconButton
+          text="Sacar"
+          :icon="withdrawIcon"
+          variant="outline"
+          size="md"
+          :full-width="false"
+          :disabled="!enableConfirmButton"
+          @click="callWithdraw"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+p {
+  @apply text-gray-900;
+}
+
+.tooltip {
+  @apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
+}
+
+input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+@media screen and (max-width: 640px) {
+  .md-view {
+    display: none;
+  }
+}
+</style>
+

src/components/ListingComponent/ListingComponent.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useUser } from "@/composables/useUser";
-import { ref, watch, onMounted } from "vue";
+import { ref, watch } from "vue";
-import SpinnerComponent from "../SpinnerComponent.vue";
+import SpinnerComponent from "../ui/SpinnerComponent.vue";
-import { decimalCount } from "@/utils/decimalCount";
+import BalanceCard from "./BalanceCard.vue";
-import { debounce } from "@/utils/debounce";
+import TransactionCard from "./TransactionCard.vue";
-import { getTokenByAddress } from "@/blockchain/addresses";
-import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
 const user = useUser();
 
@@ -23,80 +20,10 @@ const emit = defineEmits(["depositWithdrawn"]);
 
 const { loadingWalletTransactions } = user;
 
-const remaining = ref<number>(0);
 const itemsToShow = ref<WalletTransaction[]>([]);
-const withdrawAmount = ref<string>("");
-const withdrawButtonOpacity = ref<number>(0.6);
-const withdrawButtonCursor = ref<string>("not-allowed");
-const isCollapsibleOpen = ref<boolean>(false);
-const validDecimals = ref<boolean>(true);
-const validWithdrawAmount = ref<boolean>(true);
-const enableConfirmButton = ref<boolean>(false);
-const showInfoTooltip = ref<boolean>(false);
-const floatingArrow = ref(null);
 
-const reference = ref<HTMLElement | null>(null);
+const callWithdraw = (amount: string) => {
-const floating = ref<HTMLElement | null>(null);
+  emit("depositWithdrawn", amount);
-const infoText = ref<HTMLElement | null>(null);
-
-// Debounce methods
-const handleInputEvent = (event: any): void => {
-  const { value } = event.target;
-
-  if (decimalCount(String(value)) > 2) {
-    validDecimals.value = false;
-    enableConfirmButton.value = false;
-    return;
-  }
-  validDecimals.value = true;
-
-  if (value > remaining.value) {
-    validWithdrawAmount.value = false;
-    enableConfirmButton.value = false;
-    return;
-  }
-  validWithdrawAmount.value = true;
-  enableConfirmButton.value = true;
-};
-
-const callWithdraw = () => {
-  emit("depositWithdrawn", withdrawAmount.value);
-};
-
-watch(enableConfirmButton, (): void => {
-  if (!enableConfirmButton.value) {
-    withdrawButtonOpacity.value = 0.7;
-    withdrawButtonCursor.value = "not-allowed";
-  } else {
-    withdrawButtonOpacity.value = 1;
-    withdrawButtonCursor.value = "pointer";
-  }
-});
-
-watch(withdrawAmount, (): void => {
-  if (!withdrawAmount.value || !enableConfirmButton.value) {
-    withdrawButtonOpacity.value = 0.7;
-    withdrawButtonCursor.value = "not-allowed";
-  } else {
-    withdrawButtonOpacity.value = 1;
-    withdrawButtonCursor.value = "pointer";
-  }
-});
-
-const getRemaining = (): number => {
-  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;
-    return deposit ? deposit.remaining : 0;
-  }
-  return 0;
-};
-
-const getExplorer = (): string => {
-  return user.networkName.value == NetworkEnum.sepolia
-    ? "Etherscan"
-    : "Polygonscan";
 };
 
 const showInitialItems = (): void => {
@@ -104,10 +31,7 @@ const showInitialItems = (): void => {
 };
 
 const openEtherscanUrl = (transactionHash: string): void => {
-  const networkUrl =
+  const networkUrl = user.network.value.blockExplorers?.default.url;
-    user.networkName.value == NetworkEnum.sepolia
-      ? "sepolia.etherscan.io"
-      : "mumbai.polygonscan.com";
   const url = `https://${networkUrl}/tx/${transactionHash}`;
   window.open(url, "_blank");
 };
@@ -119,31 +43,6 @@ const loadMore = (): void => {
   );
 };
 
-const getEventName = (event: string | undefined): string => {
-  if (!event) return "Desconhecido";
-
-  const possibleEventName: { [key: string]: string } = {
-    DepositAdded: "Oferta",
-    LockAdded: "Reserva",
-    LockReleased: "Compra",
-    DepositWithdrawn: "Retirada",
-  };
-
-  return possibleEventName[event];
-};
-
-onMounted(() => {
-  useFloating(reference, floating, {
-    placement: "right",
-    middleware: [
-      offset(10),
-      flip(),
-      shift(),
-      arrow({ element: floatingArrow }),
-    ],
-  });
-});
-
 // watch props changes
 watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -160,183 +59,31 @@ showInitialItems();
 </script>
 
 <template>
-  <div class="main-container max-w-md" v-if="loadingWalletTransactions">
+  <div
+    class="main-container max-w-md flex justify-center items-center min-h-[200px] w-16 h-16"
+    v-if="loadingWalletTransactions"
+  >
+    Carregando ofertas...
     <SpinnerComponent width="8" height="8"></SpinnerComponent>
   </div>
-  <div class="main-container max-w-md" v-if="!loadingWalletTransactions">
+  <div class="main-container max-w-md" v-else>
-    <div
+    <BalanceCard
-      class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-if="props.validDeposits.length > 0"
-    >
+      :valid-deposits="props.validDeposits"
-      <div class="flex justify-between items-center">
+      :active-lock-amount="activeLockAmount"
-        <div>
+      :selected-token="user.selectedToken.value"
-          <p class="text-sm leading-5 font-medium text-gray-600">
+      @withdraw="callWithdraw"
-            Saldo disponível
+    />
-          </p>
-          <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{ getRemaining() }} {{ etherStore.selectedToken }}
-          </p>
-          <div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0">
-            <span class="text-xs font-normal text-gray-400" ref="infoText">{{
-              `com ${activeLockAmount.toFixed(2)} ${
-                etherStore.selectedToken
-              } em lock`
-            }}</span>
-            <div
-              class="absolute mt-[2px] md-view"
-              :style="{ left: `${(infoText?.clientWidth ?? 108) + 4}px` }"
-            >
-              <img
-                alt="info image"
-                src="@/assets/info.svg?url"
-                aria-describedby="tooltip"
-                ref="reference"
-                @mouseover="showInfoTooltip = true"
-                @mouseout="showInfoTooltip = false"
-              />
-              <div
-                role="tooltip"
-                ref="floating"
-                class="w-56 z-50 tooltip md-view"
-                v-if="showInfoTooltip"
-              >
-                Valor “em lock” significa que a quantia está aguardando
-                confirmação de compra e só estará disponível para saque caso a
-                transação expire.
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
-          <div
-            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
-            @click="[(isCollapsibleOpen = true)]"
-          >
-            <img
-              alt="Withdraw image"
-              src="@/assets/withdraw.svg?url"
-              class="w-3 h-3 sm:w-4 sm:h-4"
-            />
-            <span class="last-release-info">Sacar</span>
-          </div>
-        </div>
-      </div>
-      <div class="pt-5">
-        <div v-show="isCollapsibleOpen" class="py-2 w-100">
-          <p class="text-sm leading-5 font-medium">Valor do saque</p>
-          <input
-            type="number"
-            name=""
-            @input="debounce(handleInputEvent, 500)($event)"
-            placeholder="0"
-            class="text-2xl text-gray-900 w-full outline-none"
-            v-model="withdrawAmount"
-          />
-        </div>
-        <div class="flex justify-center" v-if="!validDecimals">
-          <span class="text-red-500 font-normal text-sm"
-            >Por favor utilize no máximo 2 casas decimais</span
-          >
-        </div>
-        <div class="flex justify-center" v-else-if="!validWithdrawAmount">
-          <span class="text-red-500 font-normal text-sm"
-            >Saldo insuficiente</span
-          >
-        </div>
-        <hr v-show="isCollapsibleOpen" class="pb-3" />
-        <div
-          v-show="isCollapsibleOpen"
-          class="flex justify-between items-center"
-        >
-          <h1
-            @click="[(isCollapsibleOpen = false)]"
-            class="text-black font-medium cursor-pointer"
-          >
-            Cancelar
-          </h1>
 
-          <div
+    <TransactionCard
-            class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
-            @click="callWithdraw"
-          >
-            <img
-              alt="Withdraw image"
-              src="@/assets/withdraw.svg?url"
-              class="w-3 h-3 sm:w-4 sm:h-4"
-            />
-            <span class="last-release-info">Sacar</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-for="item in itemsToShow"
       :key="item.blockNumber"
-    >
+      :selected-token="user.selectedToken.value"
-      <div class="item-container">
+      :transaction="item"
-        <div class="flex flex-col self-start">
+      :network-name="user.network.value.name"
-          <span class="text-xs sm:text-sm leading-5 font-medium text-gray-600">
+      @open-explorer="openEtherscanUrl"
-            {{ getEventName(item.event) }}
+    />
-          </span>
+
-          <span
-            class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
-          >
-            {{ item.amount }}
-            {{ getTokenByAddress(item.token) }}
-          </span>
-        </div>
-        <div>
-          <div
-            class="bg-amber-300 status-text"
-            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
-          >
-            Em Aberto
-          </div>
-          <div
-            class="bg-[#94A3B8] status-text"
-            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 2"
-          >
-            Expirado
-          </div>
-          <div
-            class="bg-emerald-300 status-text"
-            v-if="
-              (getEventName(item.event) == 'Reserva' && item.lockStatus == 3) ||
-              getEventName(item.event) != 'Reserva'
-            "
-          >
-            Finalizado
-          </div>
-          <div
-            class="flex gap-2 cursor-pointer items-center justify-self-center w-full"
-            @click="openEtherscanUrl(item.transactionHash)"
-            v-if="getEventName(item.event) != 'Reserva' || item.lockStatus != 1"
-          >
-            <span class="last-release-info">{{ getExplorer() }}</span>
-            <img
-              alt="Redirect image"
-              src="@/assets/redirect.svg?url"
-              class="w-3 h-3 sm:w-4 sm:h-4"
-            />
-          </div>
-          <div
-            class="flex gap-2 justify-self-center w-full"
-            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
-          >
-            <RouterLink
-              :to="{
-                name: 'home',
-                force: true,
-                state: { lockID: item.transactionID },
-              }"
-              class="router-button"
-              >Continuar</RouterLink
-            >
-          </div>
-        </div>
-      </div>
-    </div>
     <div
       class="flex flex-col justify-center items-center w-full mt-2 gap-2"
       v-if="
@@ -346,14 +93,14 @@ showInitialItems();
     >
       <button
         type="button"
-        class="text-white font-semibold"
+        class="text-white font-semibold border-2 border-amber-300 rounded-lg px-4 py-2 hover:bg-amber-300/10 transition-colors cursor-pointer"
         @click="loadMore()"
       >
         Carregar mais
       </button>
-      <span class="text-gray-300">
+      <span class="text-gray-300 text-sm">
-        ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
+        {{ itemsToShow.length }} de {{ props.walletTransactions.length }}
-        transações )
+        transações
       </span>
     </div>
 
@@ -364,62 +111,5 @@ showInitialItems();
 </template>
 
 <style scoped>
-.page {
+/* Minimal styles - most styles moved to child components */
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-p {
-  @apply text-gray-900;
-}
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.item-container {
-  @apply flex justify-between items-center;
-}
-
-.status-text {
-  @apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center mb-2 px-2 py-1 mt-4;
-}
-.text {
-  @apply text-white text-center;
-}
-
-.grid-container {
-  @apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
-}
-
-.last-release-info {
-  @apply font-medium text-xs sm:text-sm text-gray-900 justify-self-center;
-}
-
-.tooltip {
-  @apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
-}
-
-.router-button {
-  @apply rounded-lg border-amber-300 border-2 px-3 py-2 text-gray-900 font-semibold sm:text-base text-xs hover:bg-transparent w-full text-center;
-}
-
-.withdraw-button {
-  opacity: v-bind(withdrawButtonOpacity);
-  cursor: v-bind(withdrawButtonCursor);
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-
-@media screen and (max-width: 640px) {
-  .md-view {
-    display: none;
-  }
-}
 </style>

src/components/ListingComponent/TransactionCard.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { WalletTransaction } from "@/model/WalletTransaction";
+import { TokenEnum } from "@/model/NetworkEnum";
+import { computed } from "vue";
+import StatusBadge, { type StatusType } from "../ui/StatusBadge.vue";
+import { Networks } from "@/config/networks";
+
+const props = defineProps<{
+  transaction: WalletTransaction;
+  networkName: keyof typeof Networks;
+  selectedToken: TokenEnum;
+}>();
+
+const emit = defineEmits<{
+  openExplorer: [transactionHash: string];
+}>();
+
+const eventName = computed(() => {
+  if (!props.transaction.event) return "Desconhecido";
+
+  const possibleEventName: { [key: string]: string } = {
+    DepositAdded: "Oferta",
+    LockAdded: "Reserva",
+    LockReleased: "Compra",
+    DepositWithdrawn: "Retirada",
+  };
+
+  return possibleEventName[props.transaction.event] || "Desconhecido";
+});
+
+const explorerName = computed(() => {
+  return Networks[(props.networkName as string).toLowerCase()].blockExplorers?.default.name;
+});
+
+const statusType = computed((): StatusType => {
+  if (eventName.value === "Reserva") {
+    switch (props.transaction.lockStatus) {
+      case 1:
+        return "open";
+      case 2:
+        return "expired";
+      case 3:
+        return "completed";
+      default:
+        return "completed";
+    }
+  }
+  return "completed";
+});
+
+const showExplorerLink = computed(() => {
+  return eventName.value !== "Reserva" || props.transaction.lockStatus !== 1;
+});
+
+const showContinueButton = computed(() => {
+  return eventName.value === "Reserva" && props.transaction.lockStatus === 1;
+});
+
+const formattedDate = computed(() => {
+  if (!props.transaction.blockTimestamp) return "";
+  
+  const timestamp = props.transaction.blockTimestamp;
+  const date = new Date(timestamp * 1000);
+  
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  
+  return `${day}/${month}/${year} ${hours}:${minutes}`;
+});
+
+const handleExplorerClick = () => {
+  emit("openExplorer", props.transaction.transactionHash);
+};
+</script>
+
+<template>
+  <div class="w-full bg-white p-4 sm:p-6 rounded-lg">
+    <div class="item-container">
+      <div class="flex flex-col self-start">
+        <span class="text-xs sm:text-sm leading-5 font-medium text-gray-600">
+          {{ eventName }}
+        </span>
+        <span class="text-xl sm:text-xl leading-7 font-semibold text-gray-900">
+          {{ transaction.amount }} {{ selectedToken }}
+        </span>
+        <span
+          v-if="formattedDate"
+          class="text-xs sm:text-sm leading-5 font-normal text-gray-500 mt-1"
+        >
+          {{ formattedDate }}
+        </span>
+      </div>
+      <div class="flex flex-col items-center justify-center">
+        <div class="mb-2 mt-4">
+          <StatusBadge :status="statusType" />
+        </div>
+        <div
+          v-if="showExplorerLink"
+          class="flex gap-2 cursor-pointer items-center justify-self-center w-full"
+          @click="handleExplorerClick"
+        >
+          <span class="last-release-info">{{ explorerName }}</span>
+          <img
+            alt="Redirect image"
+            src="@/assets/redirect.svg?url"
+            class="w-3 h-3 sm:w-4 sm:h-4"
+          />
+        </div>
+        <div
+          v-if="showContinueButton"
+          class="flex gap-2 justify-self-center w-full"
+        >
+          <RouterLink
+            :to="{
+              name: 'home',
+              force: true,
+              state: { lockID: transaction.transactionID },
+            }"
+            class="router-button"
+          >
+            Continuar
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item-container {
+  @apply flex justify-between items-center;
+}
+
+.last-release-info {
+  @apply font-medium text-xs sm:text-sm text-gray-900 justify-self-center;
+}
+
+.router-button {
+  @apply rounded-lg border-amber-300 border-2 px-3 py-2 text-gray-900 font-semibold sm:text-base text-xs hover:bg-transparent w-full text-center;
+}
+</style>
+

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

@@ -1,85 +0,0 @@
-import { describe, expect, beforeEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import ListingComponent from "../ListingComponent.vue";
-import { useUser } from "@/composables/useUser";
-import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
-import { MockWalletTransactions } from "@/model/mock/WalletTransactionMock";
-
-describe("ListingComponent.vue", () => {
-  beforeEach(() => {
-    useUser().setLoadingWalletTransactions(false);
-  });
-
-  test("Test Message when an empty array is received", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: [],
-        walletTransactions: [],
-        activeLockAmount: 0,
-      },
-    });
-
-    expect(wrapper.html()).toContain("Não há nenhuma transação anterior");
-  });
-
-  test("Test number of elements in the list first render", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: [],
-        walletTransactions: MockWalletTransactions,
-        activeLockAmount: 0,
-      },
-    });
-
-    const elements = wrapper.findAll(".item-container");
-
-    expect(elements).toHaveLength(3);
-  });
-
-  test("Test load more button behavior", async () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: MockValidDeposits,
-        walletTransactions: MockWalletTransactions,
-        activeLockAmount: 0,
-      },
-    });
-    const btn = wrapper.find("button");
-
-    let elements = wrapper.findAll(".item-container");
-    expect(elements).toHaveLength(3);
-
-    await btn.trigger("click");
-
-    elements = wrapper.findAll(".item-container");
-
-    expect(elements).toHaveLength(5);
-  });
-
-  test("Test withdraw offer button emit", async () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: MockValidDeposits,
-        walletTransactions: MockWalletTransactions,
-        activeLockAmount: 0,
-      },
-    });
-    wrapper.vm.$emit("depositWithdrawn");
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted("depositWithdrawn")).toBeTruthy();
-  });
-
-  test("Test should render lock info when active lock amount is greater than 0", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: MockValidDeposits,
-        walletTransactions: [],
-        activeLockAmount: 50,
-      },
-    });
-
-    expect(wrapper.html()).toContain("com 50.00 BRZ em lock");
-  });
-});

src/components/LoadingComponent/__tests__/LoadingComponent.spec.ts

@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import LoadingComponent from "../LoadingComponent.vue";
-
-describe("Loading.vue", () => {
-  test("Test loading content with received props", () => {
-    const wrapper = mount(LoadingComponent, {
-      props: {
-        title: "MockTitle",
-        message: "MockMessage",
-      },
-    });
-
-    expect(wrapper.html()).toContain("MockTitle");
-    expect(wrapper.html()).toContain("MockMessage");
-  });
-
-  test("Test default text if props title isnt passed", () => {
-    const wrapper = mount(LoadingComponent, {
-      props: {
-        message: "MockMessage",
-      },
-    });
-
-    expect(wrapper.html()).toContain("Confirme em sua carteira");
-    expect(wrapper.html()).toContain("MockMessage");
-  });
-});

src/components/QrCodeComponent.vue

@@ -1,132 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
-import CustomButton from "@/components/CustomButton/CustomButton.vue";
-import CustomModal from "@/components//CustomModal/CustomModal.vue";
-
-const windowSize = ref<number>(window.innerWidth);
-const qrCode = ref<string>("");
-const isPixValid = ref<boolean>(false);
-const showWarnModal = ref<boolean>(true);
-const releaseSignature = ref<string>("");
-
-// Emits
-const emit = defineEmits(["pixValidated"]);
-
-onMounted(() => {
-  window.addEventListener(
-    "resize",
-    () => (windowSize.value = window.innerWidth)
-  );
-});
-onUnmounted(() => {
-  window.removeEventListener(
-    "resize",
-    () => (windowSize.value = window.innerWidth)
-  );
-});
-</script>
-
-<template>
-  <div class="page">
-    <div class="text-container">
-      <span
-        class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]"
-      >
-        Utilize o QR Code ou copie o código para realizar o Pix
-      </span>
-      <span class="text font-medium lg:text-md text-sm max-w-[28rem]">
-        Após realizar o Pix no banco de sua preferência, clique no botão abaixo
-        para liberação dos tokens.
-      </span>
-    </div>
-    <div class="main-container max-w-md text-black">
-      <div
-        class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
-      >
-        <img alt="Qr code image" :src="qrCode" class="w-48 h-48" />
-        <span class="text-center font-bold">Código pix</span>
-        <div class="break-words w-4/5">
-          <span class="text-center text-xs">
-            {{ qrCode }}
-          </span>
-        </div>
-        <img
-          alt="Copy PIX code"
-          src="@/assets/copyPix.svg?url"
-          width="16"
-          height="16"
-          class="pt-2 lg:mb-5 cursor-pointer"
-        />
-      </div>
-      <CustomButton
-        :is-disabled="isPixValid == false"
-        :text="'Enviar para a rede'"
-        @button-clicked="emit('pixValidated', releaseSignature)"
-      />
-    </div>
-    <CustomModal
-      v-if="showWarnModal && windowSize <= 500"
-      @close-modal="showWarnModal = false"
-      :isRedirectModal="false"
-    />
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-::placeholder {
-  /* Most modern browsers support this now. */
-  color: #9ca3af;
-}
-
-h4 {
-  color: #080808;
-  font-size: 14px;
-}
-
-h2 {
-  color: #080808;
-}
-
-.form-input {
-  @apply rounded-lg border border-gray-200 p-2 text-black;
-}
-
-.form-label {
-  @apply font-semibold tracking-wide text-emerald-50;
-}
-
-.custom-divide {
-  width: 100%;
-  border-bottom: 1px solid #d1d5db;
-}
-.bottom-position {
-  top: -20px;
-  right: 50%;
-  transform: translateX(50%);
-}
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-white text-center;
-}
-
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6 max-w-screen-sm;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-</style>

src/components/SellerSteps/SellerComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useUser } from "@/composables/useUser";
-import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomButton from "@/components/ui/CustomButton.vue";
 import { postProcessKey } from "@/utils/pixKeyFormat";
 import { TokenEnum } from "@/model/NetworkEnum";
 import { getTokenImage } from "@/utils/imagesPath";
@@ -71,7 +71,7 @@ const handleSubmit = (e: Event): void => {
 
   const data: Participant = {
     offer: offer.value,
-    chainID: user.networkId.value,
+    chainID: user.network.value.id,
     identification: processedIdentification,
     bankIspb: selectedBank.value?.ISPB,
     accountType: accountType.value,

src/components/SellerSteps/SellerSearchComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useUser } from "@/composables/useUser";
-import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomButton from "@/components/ui/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { getTokenImage } from "@/utils/imagesPath";
@@ -90,13 +90,13 @@ const handleInputEvent = (event: any): void => {
           <div class="flex gap-2">
             <img
               alt="Polygon image"
-              src="@/assets/polygon.svg?url"
+              src="@/assets/networks/polygon.svg?url"
               width="24"
               height="24"
             />
             <img
               alt="Ethereum image"
-              src="@/assets/ethereum.svg?url"
+              src="@/assets/networks/ethereum.svg?url"
               width="24"
               height="24"
             />

src/components/SellerSteps/SendNetwork.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomButton from "@/components/ui/CustomButton.vue";
 
 // Emits
 const emit = defineEmits(["sendNetwork"]);

src/components/TopBar/TopBar.vue

@@ -2,10 +2,8 @@
 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";
-import { Networks } from "@/model/Networks";
+import { Networks } from "@/config/networks";
-
 import { useOnboard } from "@web3-onboard/vue";
 
 import ChevronDown from "@/assets/chevronDown.svg";
@@ -13,10 +11,24 @@ import TwitterIcon from "@/assets/twitterIcon.svg";
 import LinkedinIcon from "@/assets/linkedinIcon.svg";
 import GithubIcon from "@/assets/githubIcon.svg";
 import { connectProvider } from "@/blockchain/provider";
+import { DEFAULT_NETWORK } from "@/config/networks";
+import type { NetworkConfig } from "@/model/NetworkEnum";
+
+interface MenuOption {
+  label: string;
+  route?: string;
+  action?: () => void;
+  showInDesktop?: boolean;
+  showInMobile?: boolean;
+  isDynamic?: boolean;
+  dynamicLabel?: () => string;
+  dynamicRoute?: () => string;
+  showVersion?: boolean;
+}
 
 // Use the new composable
 const user = useUser();
-const { walletAddress, sellerView, networkId } = user;
+const { walletAddress, sellerView, network } = user;
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -40,23 +52,25 @@ watch(connectedWallet, async (newVal: any) => {
 });
 
 watch(connectedChain, (newVal: any) => {
-  // Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
+  // Check if connected chain is valid, otherwise default to Sepolia
   if (
     !newVal ||
     !Object.values(Networks).some(
-      (network) => Number(network.chainId) === Number(newVal.id)
+      (network) => network.id === Number(newVal.id)
     )
   ) {
     console.log(
       "Invalid or unsupported network detected, defaulting to Sepolia"
     );
-    user.setNetworkId(user.networkId.value);
+    user.setNetwork(DEFAULT_NETWORK);
     return;
   }
-  user.setNetworkId(newVal?.id);
+  user.setNetworkById(newVal?.id);
 });
 
 const formatWalletAddress = (): string => {
+  if (!walletAddress.value)
+    throw new Error("Wallet not connected");
   const walletAddressLength = walletAddress.value.length;
   const initialText = walletAddress.value.substring(0, 5);
   const finalText = walletAddress.value.substring(
@@ -67,7 +81,7 @@ const formatWalletAddress = (): string => {
 };
 
 const disconnectUser = async (): Promise<void> => {
-  user.setWalletAddress("");
+  user.setWalletAddress(null);
   await disconnectWallet({ label: connectedWallet.value?.label || "" });
   closeMenu();
 };
@@ -76,16 +90,24 @@ const closeMenu = (): void => {
   menuOpenToggle.value = false;
 };
 
-const networkChange = async (network: NetworkEnum): Promise<void> => {
+const networkChange = async (network: NetworkConfig): Promise<void> => {
   currencyMenuOpenToggle.value = false;
-  try {
+  
-    await setChain({
+  // If wallet is connected, try to change chain in wallet
-      chainId: Networks[network].chainId,
+  if (connectedWallet.value) {
-      wallet: connectedWallet.value?.label || "",
+    const chainId = network.id.toString(16)
-    });
+    try {
-    user.setNetworkId(network);
+      await setChain({
-  } catch (error) {
+        chainId: `0x${chainId}`,
-    console.log("Error changing network", error);
+        wallet: connectedWallet.value.label,
+      });
+      user.setNetwork(network);
+    } catch (error) {
+      console.log("Error changing network", error);
+    }
+  } else {
+    // If no wallet connected, just update the network state
+    user.setNetwork(network);
   }
 };
 
@@ -100,11 +122,80 @@ onClickOutside(currencyRef, () => {
 onClickOutside(infoMenuRef, () => {
   infoMenuOpenToggle.value = false;
 });
+
+const infoMenuOptions: MenuOption[] = [
+  {
+    label: "Explorar Transações",
+    route: "/explore",
+    showInDesktop: true,
+    showInMobile: false,
+  },
+  {
+    label: "Perguntas frequentes",
+    route: "/faq",
+    showInDesktop: true,
+    showInMobile: false,
+  },
+  {
+    label: "Versões",
+    route: "/versions",
+    showInDesktop: true,
+    showInMobile: false,
+  },
+];
+
+const walletMenuOptions: MenuOption[] = [
+  {
+    label: "Quero vender",
+    isDynamic: true,
+    dynamicLabel: () => (sellerView.value ? "Quero comprar" : "Quero vender"),
+    dynamicRoute: () => (sellerView.value ? "/" : "/seller"),
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Explorar Transações",
+    route: "/explore",
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Gerenciar Ofertas",
+    route: "/manage_bids",
+    showInDesktop: true,
+    showInMobile: true,
+  },
+  {
+    label: "Perguntas frequentes",
+    route: "/faq",
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Versões",
+    route: "/versions",
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Desconectar",
+    route: "/",
+    action: disconnectUser,
+    showInDesktop: true,
+    showInMobile: true,
+  },
+];
+
+const handleMenuOptionClick = (option: MenuOption): void => {
+  if (!option.action) {
+    closeMenu();
+  }
+};
 </script>
 
 <template>
   <header class="z-20">
-    <RouterLink :to="'/'" class="default-button">
+    <RouterLink :to="'/'" class="default-button flex items-center md:h-auto md:py-2 h-10 py-0">
       <img
         alt="P2Pix logo"
         class="logo hidden md:inline-block"
@@ -114,7 +205,7 @@ onClickOutside(infoMenuRef, () => {
       />
       <img
         alt="P2Pix logo"
-        class="logo inline-block md:hidden w-10/12"
+        class="logo inline-block md:hidden h-10"
         width="40"
         height="40"
         src="@/assets/logo2.svg?url"
@@ -152,26 +243,44 @@ onClickOutside(infoMenuRef, () => {
           >
             <div class="mt-2">
               <div class="bg-white rounded-md z-10 -left-36 w-52">
-                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                <template
-                  <span
+                  v-for="(option, index) in infoMenuOptions.filter(
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    (opt) => opt.showInDesktop
-                  >
+                  )"
-                    Documentação
+                  :key="index"
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
-                <RouterLink
-                  :to="'/faq'"
-                  class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 >
-                  <span
+                  <RouterLink
-                    class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                    v-if="option.route"
+                    :to="option.route"
+                    class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                   >
-                    Perguntas frequentes
+                    <span
-                  </span>
+                      class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
-                </RouterLink>
+                    >
+                      {{ option.label }}
+                    </span>
+                  </RouterLink>
+                  <div
+                    v-else
+                    class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                  >
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ option.label }}
+                    </span>
+                  </div>
+                  <div
+                    v-if="
+                      index <
+                      infoMenuOptions.filter((opt) => opt.showInDesktop).length -
+                        1
+                    "
+                    class="w-full flex justify-center"
+                  >
+                    <hr class="w-4/5" />
+                  </div>
+                </template>
                 <div class="w-full flex justify-center">
                   <hr class="w-4/5" />
                 </div>
@@ -217,13 +326,6 @@ onClickOutside(infoMenuRef, () => {
           </div>
         </transition>
       </div>
-      <RouterLink
-        :to="'/faq'"
-        v-if="!walletAddress"
-        class="default-button inline-block md:hidden"
-      >
-        FAQ
-      </RouterLink>
       <RouterLink
         :to="sellerView ? '/' : '/seller'"
         class="default-button whitespace-nowrap w-40 sm:w-44 md:w-36 hidden md:inline-block"
@@ -232,16 +334,7 @@ onClickOutside(infoMenuRef, () => {
           {{ sellerView ? "Quero comprar" : "Quero vender" }}
         </div>
       </RouterLink>
-      <RouterLink
+      <div class="flex flex-col relative">
-        :to="sellerView ? '/' : '/seller'"
-        v-if="!walletAddress"
-        class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden w-40 sm:w-44 md:w-36"
-      >
-        <div class="topbar-text topbar-link text-center mx-auto inline-block">
-          {{ sellerView ? "Quero comprar" : "Quero vender" }}
-        </div>
-      </RouterLink>
-      <div class="flex flex-col relative" v-if="walletAddress">
         <div
           ref="currencyRef"
           class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
@@ -256,7 +349,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(NetworkEnum[user.networkName.value])"
+            :src="getNetworkImage(network.name)"
             height="24"
             width="24"
           />
@@ -265,9 +358,7 @@ onClickOutside(infoMenuRef, () => {
             :class="{ '!text-gray-900': currencyMenuOpenToggle }"
           >
             {{
-              Networks[user.networkName.value]
+              user.network.value.name || "Invalid Chain"
-                ? Networks[user.networkName.value].chainName
-                : "Invalid Chain"
             }}
           </span>
           <div
@@ -290,20 +381,20 @@ onClickOutside(infoMenuRef, () => {
               class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
             >
               <div
-                v-for="(chainData, network) in Networks"
+                v-for="network in Networks"
-                :key="network"
+                :key="network.id"
                 class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
                 @click="networkChange(network)"
               >
                 <img
-                  :alt="chainData.chainName + ' image'"
+                  :alt="network.name + ' image'"
                   width="20"
                   height="20"
-                  :src="getNetworkImage(NetworkEnum[network])"
+                  :src="getNetworkImage(network.name)"
                   class="mr-2 ml-1"
                 />
                 <span class="text-gray-900 font-semibold text-sm">
-                  {{ chainData.chainName }}
+                  {{ network.name }}
                 </span>
               </div>
               <div class="w-full flex justify-center">
@@ -316,7 +407,7 @@ onClickOutside(infoMenuRef, () => {
       <button
         type="button"
         v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button hidden md:inline-block"
+        class="border-amber-500 border-2 sm:rounded !rounded-lg default-button hidden md:inline-block"
         @click="connnectWallet()"
       >
         Conectar carteira
@@ -324,7 +415,7 @@ onClickOutside(infoMenuRef, () => {
       <button
         type="button"
         v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button inline-block md:hidden"
+        class="border-amber-500 border-2 sm:rounded !rounded-lg default-button inline-block md:hidden h-10"
         @click="connnectWallet()"
       >
         Conectar
@@ -370,23 +461,40 @@ onClickOutside(infoMenuRef, () => {
                 <div
                   class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                 >
-                  <RouterLink
+                  <template
-                    to="/manage_bids"
+                    v-for="(option, index) in walletMenuOptions.filter(
-                    class="redirect_button menu-button"
+                      (opt) => opt.showInDesktop
-                    @click="closeMenu()"
+                    )"
+                    :key="index"
                   >
-                    Gerenciar Ofertas
+                    <RouterLink
-                  </RouterLink>
+                      v-if="option.route && !option.action"
-                  <div class="w-full flex justify-center">
+                      :to="option.route"
-                    <hr class="w-4/5" />
+                      class="redirect_button menu-button"
-                  </div>
+                      @click="closeMenu()"
-                  <RouterLink
+                    >
-                    to="/"
+                      {{ option.label }}
-                    class="redirect_button menu-button"
+                    </RouterLink>
-                    @click="disconnectUser"
+                    <RouterLink
-                  >
+                      v-else-if="option.route && option.action"
-                    Desconectar
+                      :to="option.route"
-                  </RouterLink>
+                      class="redirect_button menu-button"
+                      @click="option.action"
+                    >
+                      {{ option.label }}
+                    </RouterLink>
+                    <div
+                      v-if="
+                        index <
+                        walletMenuOptions.filter((opt) => opt.showInDesktop)
+                          .length -
+                          1
+                      "
+                      class="w-full flex justify-center"
+                    >
+                      <hr class="w-4/5" />
+                    </div>
+                  </template>
                 </div>
               </div>
             </div>
@@ -398,32 +506,49 @@ onClickOutside(infoMenuRef, () => {
       v-show="menuOpenToggle"
       class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
     >
-      <div class="pl-4 mt-2 h-full">
+      <div class="pl-4 h-full">
         <div class="bg-white rounded-md z-10 h-full">
-          <div class="menu-button" @click="closeMenu()">
+          <template
-            <RouterLink
+            v-for="(option, index) in walletMenuOptions.filter(
-              :to="sellerView ? '/' : '/seller'"
+              (opt) => opt.showInMobile
-              class="redirect_button mt-2"
+            )"
+            :key="index"
+          >
+            <div class="menu-button" @click="handleMenuOptionClick(option)">
+              <RouterLink
+                v-if="option.isDynamic"
+                :to="option.dynamicRoute ? option.dynamicRoute() : '/'"
+                class="redirect_button"
+                :class="{ 'mt-2': index === 0 }"
+              >
+                {{ option.dynamicLabel ? option.dynamicLabel() : option.label }}
+              </RouterLink>
+              <RouterLink
+                v-else-if="option.route && !option.action"
+                :to="option.route"
+                class="redirect_button"
+              >
+                {{ option.label }}
+              </RouterLink>
+              <RouterLink
+                v-else-if="option.route && option.action"
+                :to="option.route"
+                class="redirect_button"
+                @click.stop="option.action"
+              >
+                {{ option.label }}
+              </RouterLink>
+            </div>
+            <div
+              v-if="
+                index <
+                walletMenuOptions.filter((opt) => opt.showInMobile).length - 1
+              "
+              class="w-full flex justify-center"
             >
-              {{ sellerView ? "Quero comprar" : "Quero vender" }}
+              <hr class="w-4/5" />
-            </RouterLink>
+            </div>
-          </div>
+          </template>
-          <div class="w-full flex justify-center">
-            <hr class="w-4/5" />
-          </div>
-          <div class="menu-button" @click="closeMenu()">
-            <RouterLink to="/manage_bids" class="redirect_button">
-              Gerenciar Ofertas
-            </RouterLink>
-          </div>
-          <div class="w-full flex justify-center">
-            <hr class="w-4/5" />
-          </div>
-          <div class="menu-button" @click="disconnectUser">
-            <RouterLink to="/" class="redirect_button">
-              Desconectar
-            </RouterLink>
-          </div>
           <div class="w-full flex justify-center">
             <hr class="w-4/5" />
           </div>
@@ -457,22 +582,22 @@ onClickOutside(infoMenuRef, () => {
       v-show="currencyMenuOpenToggle"
       class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
     >
-      <div class="pl-4 mt-2 h-full">
+      <div class="pl-4 h-full">
         <div class="bg-white rounded-md z-10 h-full">
           <div
-            v-for="(chainData, network) in Networks"
+            v-for="network in Networks"
-            :key="network"
+            :key="network.id"
             class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
             @click="networkChange(network)"
           >
             <img
-              :alt="chainData.chainName + 'image'"
+              :alt="network.name + 'image'"
               width="20"
               height="20"
-              :src="getNetworkImage(NetworkEnum[network])"
+              :src="getNetworkImage(network.name)"
             />
             <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              {{ chainData.chainName }}
+              {{ network.name }}
             </span>
           </div>
         </div>
@@ -522,8 +647,12 @@ a:hover {
 }
 
 .mobile-menu {
-  margin-top: 1400px;
+  top: 60px;
-  bottom: 0px;
+  right: 10px;
-  height: auto;
+  left: auto;
+  max-height: calc(100vh - 60px);
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 </style>

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

@@ -1,35 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import TopBar from "../TopBar.vue";
-import { useUser } from "@/composables/useUser";
-
-import { createPinia, setActivePinia } from "pinia";
-
-describe("TopBar.vue", () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it("should render connect wallet button", () => {
-    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 = mount(TopBar);
-    expect(wrapper.html()).toContain("Quero vender");
-  });
-
-  it("should render button to change to seller view when in buyer screen", () => {
-    const user = useUser();
-    user.setSellerView(true);
-    const wrapper = mount(TopBar);
-    expect(wrapper.html()).toContain("Quero comprar");
-  });
-
-  it("should render the P2Pix logo correctly", () => {
-    const wrapper = mount(TopBar);
-    const img = wrapper.findAll(".logo");
-    expect(img.length).toBe(2);
-  });
-});

src/components/ui/AmountInput.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { TokenEnum } from "@/model/NetworkEnum";
+import { decimalCount } from "@/utils/decimalCount";
+import { debounce } from "@/utils/debounce";
+import TokenSelector from "./TokenSelector.vue";
+import ErrorMessage from "./ErrorMessage.vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    selectedToken: TokenEnum;
+    placeholder?: string;
+    showTokenSelector?: boolean;
+    showConversion?: boolean;
+    conversionRate?: number;
+    minValue?: number;
+    maxValue?: number;
+    disabled?: boolean;
+    required?: boolean;
+  }>(),
+  {
+    placeholder: "0",
+    showTokenSelector: true,
+    showConversion: true,
+    conversionRate: 1,
+    minValue: 0,
+    disabled: false,
+    required: false,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: number];
+  "update:selectedToken": [token: TokenEnum];
+  error: [message: string | null];
+  valid: [isValid: boolean];
+}>();
+
+const inputValue = ref<string>(String(props.modelValue || ""));
+const validDecimals = ref(true);
+const validRange = ref(true);
+
+const convertedValue = computed(() => {
+  return (props.modelValue * props.conversionRate).toFixed(2);
+});
+
+const errorMessage = computed(() => {
+  if (!validDecimals.value) {
+    return "Por favor utilize no máximo 2 casas decimais";
+  }
+  if (!validRange.value) {
+    if (props.minValue && props.modelValue < props.minValue) {
+      return `Valor mínimo: ${props.minValue}`;
+    }
+    if (props.maxValue && props.modelValue > props.maxValue) {
+      return `Valor máximo: ${props.maxValue}`;
+    }
+  }
+  return null;
+});
+
+const isValid = computed(() => {
+  return validDecimals.value && validRange.value;
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const value = target.value;
+  inputValue.value = value;
+  
+  const numValue = Number(value);
+  
+  // Validar decimais
+  if (decimalCount(value) > 2) {
+    validDecimals.value = false;
+    emit("error", "Por favor utilize no máximo 2 casas decimais");
+    emit("valid", false);
+    return;
+  }
+  validDecimals.value = true;
+  
+  // Validar range
+  if (props.minValue !== undefined && numValue < props.minValue) {
+    validRange.value = false;
+    emit("error", `Valor mínimo: ${props.minValue}`);
+    emit("valid", false);
+    return;
+  }
+  if (props.maxValue !== undefined && numValue > props.maxValue) {
+    validRange.value = false;
+    emit("error", `Valor máximo: ${props.maxValue}`);
+    emit("valid", false);
+    return;
+  }
+  validRange.value = true;
+  
+  emit("update:modelValue", numValue);
+  emit("error", null);
+  emit("valid", true);
+};
+
+const debouncedHandleInput = debounce(handleInput, 500);
+
+const handleTokenChange = (token: TokenEnum) => {
+  emit("update:selectedToken", token);
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal !== Number(inputValue.value)) {
+    inputValue.value = String(newVal || "");
+  }
+});
+</script>
+
+<template>
+  <div class="amount-input-container">
+    <div class="input-row">
+      <input
+        type="number"
+        :value="inputValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :required="required"
+        class="amount-input"
+        :class="{
+          'font-semibold text-xl': modelValue > 0,
+          'has-error': !isValid,
+        }"
+        step="0.01"
+        @input="debouncedHandleInput"
+      />
+      
+      <TokenSelector
+        v-if="showTokenSelector"
+        :model-value="selectedToken"
+        :disabled="disabled"
+        size="md"
+        @update:model-value="handleTokenChange"
+      />
+      
+      <div v-else class="token-display">
+        {{ selectedToken }}
+      </div>
+    </div>
+    
+    <div class="divider"></div>
+    
+    <div class="info-row">
+      <p v-if="showConversion" class="conversion-text">
+        ~ R$ {{ convertedValue }}
+      </p>
+      <slot name="extra-info"></slot>
+    </div>
+    
+    <ErrorMessage
+      v-if="errorMessage"
+      :message="errorMessage"
+      type="error"
+    />
+  </div>
+</template>
+
+<style scoped>
+.amount-input-container {
+  @apply flex flex-col w-full gap-2;
+}
+
+.input-row {
+  @apply flex justify-between items-center w-full gap-4;
+}
+
+.amount-input {
+  @apply border-none outline-none text-lg text-gray-900 flex-1 bg-transparent;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.amount-input::-webkit-inner-spin-button,
+.amount-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+.amount-input:disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.amount-input.has-error {
+  @apply text-red-500;
+}
+
+.token-display {
+  @apply flex items-center px-3 py-2 bg-gray-300 rounded-3xl min-w-fit text-gray-900 font-medium;
+}
+
+.divider {
+  @apply w-full border-b border-gray-300 my-2;
+}
+
+.info-row {
+  @apply flex justify-between items-center;
+}
+
+.conversion-text {
+  @apply text-gray-500 font-normal text-sm;
+}
+</style>
+

src/components/ui/BankSelector.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import bankList from "@/utils/files/isbpList.json";
+
+export interface Bank {
+  ISPB: string;
+  longName: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | null;
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: "Busque e selecione seu banco",
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  change: [bank: Bank];
+}>();
+
+const bankItems = computed(() => {
+  return bankList.map((bank) => ({
+    value: bank.ISPB,
+    label: bank.longName,
+    bank: bank,
+  }));
+});
+
+const selectedItem = computed(() => {
+  if (!props.modelValue) return null;
+  return bankItems.value.find((item) => item.value === props.modelValue);
+});
+
+const searchQuery = computed({
+  get: () => selectedItem.value?.label || "",
+  set: (value: string) => {
+    // Handled by input
+  },
+});
+
+const filteredBanks = computed(() => {
+  if (!searchQuery.value) return [];
+  
+  const query = searchQuery.value.toLowerCase();
+  return bankList
+    .filter((bank) => bank.longName.toLowerCase().includes(query))
+    .slice(0, 10);
+});
+
+const showBankList = computed(() => {
+  return filteredBanks.value.length > 0 && searchQuery.value.length > 0;
+});
+
+const selectBank = (bank: Bank) => {
+  emit("update:modelValue", bank.ISPB);
+  emit("change", bank);
+};
+</script>
+
+<template>
+  <div class="bank-selector">
+    <input
+      type="text"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      class="bank-input"
+      autocomplete="off"
+    />
+    
+    <transition name="dropdown-fade">
+      <div v-if="showBankList" class="bank-list">
+        <div
+          v-for="bank in filteredBanks"
+          :key="bank.ISPB"
+          class="bank-item"
+          @click="selectBank(bank)"
+        >
+          <span class="bank-name">{{ bank.longName }}</span>
+          <span class="bank-ispb">{{ bank.ISPB }}</span>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.bank-selector {
+  @apply relative w-full;
+}
+
+.bank-input {
+  @apply w-full px-4 py-3 border-none outline-none rounded-lg bg-white text-gray-900 text-sm;
+}
+
+.bank-input:focus {
+  @apply ring-2 ring-indigo-800;
+}
+
+.bank-input:disabled {
+  @apply opacity-50 cursor-not-allowed bg-gray-100;
+}
+
+.bank-list {
+  @apply absolute top-full left-0 right-0 mt-2 bg-white rounded-lg border border-gray-300 shadow-lg z-50 max-h-64 overflow-y-auto;
+}
+
+.bank-item {
+  @apply flex justify-between items-center px-4 py-3 cursor-pointer hover:bg-gray-100 transition-colors;
+}
+
+.bank-name {
+  @apply text-gray-900 font-medium text-sm flex-1;
+}
+
+.bank-ispb {
+  @apply text-gray-500 text-xs ml-2;
+}
+
+/* Animação */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  @apply transition-all duration-200;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+  @apply opacity-0 -translate-y-2;
+}
+</style>
+

src/components/ui/CustomButton.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg" | "xl";
+
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    isDisabled?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    fullWidth?: boolean;
+    loading?: boolean;
+  }>(),
+  {
+    isDisabled: false,
+    variant: "primary",
+    size: "xl",
+    iconPosition: "left",
+    fullWidth: true,
+    loading: false,
+  }
+);
+
+const emit = defineEmits(["buttonClicked"]);
+
+const handleClick = () => {
+  if (!props.isDisabled && !props.loading) {
+    emit("buttonClicked");
+  }
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="[
+      'button',
+      `variant-${variant}`,
+      `size-${size}`,
+      { 'is-disabled': isDisabled || loading, 'full-width': fullWidth },
+    ]"
+    :disabled="isDisabled || loading"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="loader"></span>
+    <template v-else>
+      <img
+        v-if="icon && iconPosition === 'left'"
+        :src="icon"
+        :alt="`${text} icon`"
+        class="button-icon"
+      />
+      <span class="button-text">{{ text }}</span>
+      <img
+        v-if="icon && iconPosition === 'right'"
+        :src="icon"
+        :alt="`${text} icon`"
+        class="button-icon"
+      />
+    </template>
+  </button>
+</template>
+
+<style scoped>
+.button {
+  @apply rounded-lg font-semibold transition-all duration-200 cursor-pointer flex items-center justify-center gap-2;
+}
+
+.button:hover:not(.is-disabled) {
+  @apply transform scale-[1.02];
+}
+
+.button.is-disabled {
+  @apply opacity-70 cursor-not-allowed;
+}
+
+.button.full-width {
+  @apply w-full;
+}
+
+/* Variantes */
+.variant-primary {
+  @apply bg-amber-400 text-gray-900 border-2 border-amber-400;
+}
+
+.variant-primary:hover:not(.is-disabled) {
+  @apply bg-amber-500 border-amber-500;
+}
+
+.variant-secondary {
+  @apply bg-gray-200 text-gray-900 border-2 border-gray-300;
+}
+
+.variant-secondary:hover:not(.is-disabled) {
+  @apply bg-gray-300 border-gray-400;
+}
+
+.variant-outline {
+  @apply bg-transparent text-gray-900 border-2 border-amber-400;
+}
+
+.variant-outline:hover:not(.is-disabled) {
+  @apply bg-amber-400/10;
+}
+
+.variant-ghost {
+  @apply bg-transparent text-gray-900 border-2 border-transparent;
+}
+
+.variant-ghost:hover:not(.is-disabled) {
+  @apply bg-gray-100;
+}
+
+/* Tamanhos */
+.size-sm {
+  @apply px-2 py-1 text-xs;
+}
+
+.size-sm .button-icon {
+  @apply w-3 h-3;
+}
+
+.size-md {
+  @apply px-3 py-2 text-sm;
+}
+
+.size-md .button-icon {
+  @apply w-4 h-4;
+}
+
+.size-lg {
+  @apply px-4 py-3 text-base;
+}
+
+.size-lg .button-icon {
+  @apply w-5 h-5;
+}
+
+.size-xl {
+  @apply p-4 text-base;
+}
+
+.size-xl .button-icon {
+  @apply w-5 h-5;
+}
+
+.button-icon {
+  @apply flex-shrink-0;
+}
+
+.button-text {
+  @apply font-semibold;
+}
+
+/* Loader animation */
+.loader {
+  @apply w-5 h-5 border-2 border-gray-900 border-t-transparent rounded-full animate-spin;
+}
+</style>

src/components/ui/CustomModal.vue

@@ -19,7 +19,7 @@ if (props.isRedirectModal) {
 <template>
   <div>
     <div
-      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+      class="modal-overlay inset-0 fixed hidden md:block justify-center backdrop-blur-sm sm:backdrop-blur-none"
       v-if="!isRedirectModal"
     >
       <div class="modal px-5 text-center">

src/components/ui/Dropdown.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts" generic="T">
+import { ref, computed } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import ChevronDown from "@/assets/chevronDown.svg";
+
+export interface DropdownItem<T = any> {
+  value: T;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: DropdownItem<T>[];
+    modelValue: T;
+    placeholder?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    showIcon?: boolean;
+  }>(),
+  {
+    placeholder: "Selecione...",
+    searchable: false,
+    disabled: false,
+    size: "md",
+    showIcon: true,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: T];
+  change: [value: T];
+}>();
+
+const isOpen = ref(false);
+const searchQuery = ref("");
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const selectedItem = computed(() => {
+  return props.items.find((item) => item.value === props.modelValue);
+});
+
+const filteredItems = computed(() => {
+  if (!props.searchable || !searchQuery.value) {
+    return props.items;
+  }
+  
+  const query = searchQuery.value.toLowerCase();
+  return props.items.filter((item) =>
+    item.label.toLowerCase().includes(query)
+  );
+});
+
+const toggleDropdown = () => {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value;
+    if (!isOpen.value) {
+      searchQuery.value = "";
+    }
+  }
+};
+
+const selectItem = (item: DropdownItem<T>) => {
+  if (!item.disabled) {
+    emit("update:modelValue", item.value);
+    emit("change", item.value);
+    isOpen.value = false;
+    searchQuery.value = "";
+  }
+};
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false;
+  searchQuery.value = "";
+});
+</script>
+
+<template>
+  <div ref="dropdownRef" class="dropdown-container">
+    <button
+      type="button"
+      :class="[
+        'dropdown-trigger',
+        `size-${size}`,
+        { disabled: disabled, open: isOpen },
+      ]"
+      @click="toggleDropdown"
+    >
+      <img
+        v-if="selectedItem?.icon && showIcon"
+        :src="selectedItem.icon"
+        :alt="selectedItem.label"
+        class="item-icon"
+      />
+      <span class="selected-text">
+        {{ selectedItem?.label || placeholder }}
+      </span>
+      <ChevronDown
+        class="chevron"
+        :class="{ rotated: isOpen }"
+      />
+    </button>
+
+    <transition name="dropdown-fade">
+      <div v-if="isOpen" class="dropdown-menu">
+        <input
+          v-if="searchable"
+          v-model="searchQuery"
+          type="text"
+          class="search-input"
+          placeholder="Buscar..."
+          @click.stop
+        />
+        
+        <div class="items-container">
+          <div
+            v-for="item in filteredItems"
+            :key="String(item.value)"
+            :class="[
+              'dropdown-item',
+              {
+                selected: item.value === modelValue,
+                disabled: item.disabled,
+              },
+            ]"
+            @click="selectItem(item)"
+          >
+            <img
+              v-if="item.icon && showIcon"
+              :src="item.icon"
+              :alt="item.label"
+              class="item-icon"
+            />
+            <span class="item-label">{{ item.label }}</span>
+          </div>
+          
+          <div v-if="filteredItems.length === 0" class="no-results">
+            Nenhum resultado encontrado
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.dropdown-container {
+  @apply relative inline-block;
+}
+
+.dropdown-trigger {
+  @apply flex items-center gap-2 bg-gray-300 hover:bg-gray-200 rounded-3xl transition-colors cursor-pointer border-none outline-none;
+}
+
+.dropdown-trigger:focus {
+  @apply outline-2 outline-indigo-800;
+}
+
+.dropdown-trigger.disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.dropdown-trigger.disabled:hover {
+  @apply bg-gray-300;
+}
+
+.size-sm {
+  @apply px-2 py-1 text-sm;
+}
+
+.size-md {
+  @apply px-3 py-2 text-base;
+}
+
+.size-lg {
+  @apply px-4 py-3 text-lg;
+}
+
+.item-icon {
+  @apply sm:w-fit w-4 flex-shrink-0;
+}
+
+.selected-text {
+  @apply text-gray-900 font-medium min-w-fit;
+}
+
+.chevron {
+  @apply transition-transform duration-300 invert pr-1;
+}
+
+.chevron.rotated {
+  @apply rotate-180;
+}
+
+.dropdown-menu {
+  @apply absolute right-0 mt-2 bg-white rounded-xl border border-gray-300 shadow-md z-50 min-w-max w-full;
+}
+
+.search-input {
+  @apply w-full px-4 py-3 border-b border-gray-200 outline-none text-gray-900;
+}
+
+.search-input:focus {
+  @apply border-indigo-800;
+}
+
+.items-container {
+  @apply max-h-64 overflow-y-auto;
+}
+
+.dropdown-item {
+  @apply flex items-center gap-2 px-4 py-4 cursor-pointer hover:bg-gray-300 transition-colors text-gray-900 font-semibold text-sm;
+}
+
+.dropdown-item.selected {
+  @apply bg-gray-100;
+}
+
+.dropdown-item.disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.dropdown-item.disabled:hover {
+  @apply bg-transparent;
+}
+
+.item-label {
+  @apply text-end;
+}
+
+.no-results {
+  @apply px-4 py-6 text-center text-gray-500 text-sm;
+}
+
+/* Animação */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  @apply transition-all duration-200;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+  @apply opacity-0 -translate-y-2;
+}
+</style>
+

src/components/ui/ErrorMessage.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+export type ErrorType = "error" | "warning" | "info";
+
+const props = withDefaults(
+  defineProps<{
+    message: string;
+    type?: ErrorType;
+    centered?: boolean;
+    icon?: boolean;
+  }>(),
+  {
+    type: "error",
+    centered: true,
+    icon: false,
+  }
+);
+
+const colorClasses = {
+  error: "text-red-500",
+  warning: "text-amber-500",
+  info: "text-blue-500",
+};
+</script>
+
+<template>
+  <div :class="['error-message-container', { centered: centered }]">
+    <div :class="['error-message', colorClasses[type]]">
+      <span v-if="icon" class="icon">⚠</span>
+      <span class="message">{{ message }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.error-message-container {
+  @apply flex w-full;
+}
+
+.error-message-container.centered {
+  @apply justify-center;
+}
+
+.error-message {
+  @apply font-normal text-sm flex items-center gap-2;
+}
+
+.icon {
+  @apply text-base;
+}
+
+.message {
+  @apply leading-tight;
+}
+</style>
+

src/components/ui/FormCard.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+export type FormCardPadding = "sm" | "md" | "lg";
+
+const props = withDefaults(
+  defineProps<{
+    padding?: FormCardPadding;
+    fullWidth?: boolean;
+    noBorder?: boolean;
+  }>(),
+  {
+    padding: "md",
+    fullWidth: true,
+    noBorder: false,
+  }
+);
+</script>
+
+<template>
+  <div
+    :class="[
+      'form-card',
+      `padding-${padding}`,
+      { 'full-width': fullWidth, 'no-border': noBorder },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.form-card {
+  @apply flex flex-col bg-white rounded-lg;
+}
+
+.form-card:not(.no-border) {
+  @apply border-y;
+}
+
+.form-card.full-width {
+  @apply w-full;
+}
+
+.padding-sm {
+  @apply px-4 py-3;
+}
+
+.padding-md {
+  @apply sm:px-10 px-6 py-5;
+}
+
+.padding-lg {
+  @apply px-12 py-8;
+}
+</style>
+

src/components/ui/IconButton.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+export type IconButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+export type IconButtonSize = "sm" | "md" | "lg";
+export type IconPosition = "left" | "right";
+
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    icon?: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    iconPosition?: IconPosition;
+    disabled?: boolean;
+    fullWidth?: boolean;
+  }>(),
+  {
+    variant: "outline",
+    size: "md",
+    iconPosition: "left",
+    disabled: false,
+    fullWidth: false,
+  }
+);
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const handleClick = () => {
+  if (!props.disabled) {
+    emit("click");
+  }
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="[
+      'icon-button',
+      `variant-${variant}`,
+      `size-${size}`,
+      { 'is-disabled': disabled, 'full-width': fullWidth },
+    ]"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <img
+      v-if="icon && iconPosition === 'left'"
+      :src="icon"
+      :alt="`${text} icon`"
+      class="button-icon"
+    />
+    <span class="button-text">{{ text }}</span>
+    <img
+      v-if="icon && iconPosition === 'right'"
+      :src="icon"
+      :alt="`${text} icon`"
+      class="button-icon"
+    />
+  </button>
+</template>
+
+<style scoped>
+.icon-button {
+  @apply flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-200 cursor-pointer;
+}
+
+.icon-button:hover:not(.is-disabled) {
+  @apply transform scale-[1.02];
+}
+
+.icon-button.is-disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.icon-button.full-width {
+  @apply w-full;
+}
+
+/* Variantes */
+.variant-primary {
+  @apply bg-amber-400 text-gray-900 border-2 border-amber-400;
+}
+
+.variant-primary:hover:not(.is-disabled) {
+  @apply bg-amber-500 border-amber-500;
+}
+
+.variant-secondary {
+  @apply bg-gray-200 text-gray-900 border-2 border-gray-300;
+}
+
+.variant-secondary:hover:not(.is-disabled) {
+  @apply bg-gray-300 border-gray-400;
+}
+
+.variant-outline {
+  @apply bg-transparent text-gray-900 border-2 border-amber-300;
+}
+
+.variant-outline:hover:not(.is-disabled) {
+  @apply bg-amber-300/10;
+}
+
+.variant-ghost {
+  @apply bg-transparent text-gray-900 border-2 border-transparent;
+}
+
+.variant-ghost:hover:not(.is-disabled) {
+  @apply bg-gray-100;
+}
+
+/* Tamanhos */
+.size-sm {
+  @apply px-2 py-1 text-xs;
+}
+
+.size-sm .button-icon {
+  @apply w-3 h-3;
+}
+
+.size-md {
+  @apply px-3 py-2 text-sm;
+}
+
+.size-md .button-icon {
+  @apply w-4 h-4;
+}
+
+.size-lg {
+  @apply px-4 py-3 text-base;
+}
+
+.size-lg .button-icon {
+  @apply w-5 h-5;
+}
+
+.button-text {
+  @apply font-semibold;
+}
+
+.button-icon {
+  @apply flex-shrink-0;
+}
+</style>
+

src/components/ui/InfoTooltip.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
+
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    iconSrc?: string;
+    showOnHover?: boolean;
+  }>(),
+  {
+    placement: "right",
+    iconSrc: "",
+    showOnHover: true,
+  }
+);
+
+const showTooltip = ref<boolean>(false);
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
+const floatingArrow = ref(null);
+
+onMounted(() => {
+  useFloating(reference, floating, {
+    placement: props.placement,
+    middleware: [offset(10), flip(), shift(), arrow({ element: floatingArrow })],
+  });
+});
+
+const handleMouseOver = () => {
+  if (props.showOnHover) {
+    showTooltip.value = true;
+  }
+};
+
+const handleMouseOut = () => {
+  if (props.showOnHover) {
+    showTooltip.value = false;
+  }
+};
+
+const toggleTooltip = () => {
+  if (!props.showOnHover) {
+    showTooltip.value = !showTooltip.value;
+  }
+};
+</script>
+
+<template>
+  <div class="info-tooltip-container">
+    <img
+      :src="iconSrc || '/src/assets/info.svg'"
+      alt="info icon"
+      class="info-icon"
+      ref="reference"
+      @mouseover="handleMouseOver"
+      @mouseout="handleMouseOut"
+      @click="toggleTooltip"
+    />
+    <div
+      v-if="showTooltip"
+      role="tooltip"
+      ref="floating"
+      class="tooltip-content"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.info-tooltip-container {
+  @apply relative inline-block;
+}
+
+.info-icon {
+  @apply cursor-pointer transition-opacity hover:opacity-70;
+}
+
+.tooltip-content {
+  @apply bg-white text-gray-900 font-medium text-xs md:text-sm px-3 py-2 rounded border-2 border-emerald-500 z-50 max-w-xs shadow-lg;
+}
+
+@media screen and (max-width: 640px) {
+  .tooltip-content {
+    display: none;
+  }
+}
+</style>
+

src/components/ui/LoadingState.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import SpinnerComponent from "./SpinnerComponent.vue";
+
+const props = withDefaults(
+  defineProps<{
+    message?: string;
+    size?: "sm" | "md" | "lg";
+    centered?: boolean;
+    inline?: boolean;
+  }>(),
+  {
+    message: "Carregando...",
+    size: "md",
+    centered: true,
+    inline: false,
+  }
+);
+
+const sizeMap = {
+  sm: { spinner: "4", text: "text-sm" },
+  md: { spinner: "6", text: "text-base" },
+  lg: { spinner: "8", text: "text-lg" },
+};
+</script>
+
+<template>
+  <div
+    :class="[
+      'loading-state',
+      { centered: centered, inline: inline },
+    ]"
+  >
+    <span v-if="message" :class="['loading-message', sizeMap[size].text]">
+      {{ message }}
+    </span>
+    <SpinnerComponent
+      :width="sizeMap[size].spinner"
+      :height="sizeMap[size].spinner"
+    />
+  </div>
+</template>
+
+<style scoped>
+.loading-state {
+  @apply flex items-center gap-2;
+}
+
+.loading-state.centered {
+  @apply justify-center;
+}
+
+.loading-state.inline {
+  @apply inline-flex;
+}
+
+.loading-message {
+  @apply text-gray-900 font-normal;
+}
+</style>
+

src/components/ui/NetworkBadges.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { getNetworkImage } from "@/utils/imagesPath";
+import type { NetworkConfig } from "@/model/NetworkEnum";
+
+const props = withDefaults(
+  defineProps<{
+    networks: NetworkConfig[];
+    size?: "sm" | "md" | "lg";
+    showLabel?: boolean;
+  }>(),
+  {
+    size: "md",
+    showLabel: false,
+  }
+);
+
+const sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 32,
+};
+
+const networkData = computed(() => {
+  return props.networks.map((network) => ({
+    network,
+    image: getNetworkImage(network.name),
+    name: network.name,
+  }));
+});
+</script>
+
+<template>
+  <div class="network-badges">
+    <div
+      v-for="data in networkData"
+      :key="data.network.id"
+      class="network-badge"
+      :title="data.name"
+    >
+      <img
+        :alt="`${data.name} logo`"
+        :src="data.image"
+        :width="sizeMap[size]"
+        :height="sizeMap[size]"
+        class="network-icon"
+      />
+      <span v-if="showLabel" class="network-label">
+        {{ data.name }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.network-badges {
+  @apply flex gap-2 items-center;
+}
+
+.network-badge {
+  @apply flex items-center gap-1;
+}
+
+.network-icon {
+  @apply flex-shrink-0;
+}
+
+.network-label {
+  @apply text-sm font-medium text-gray-900;
+}
+</style>
+

src/components/ui/NetworkSelector.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Networks } from "@/config/networks";
+import type { NetworkConfig } from "@/model/NetworkEnum";
+import { getNetworkImage } from "@/utils/imagesPath";
+import Dropdown, { type DropdownItem } from "./Dropdown.vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: NetworkConfig;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    availableNetworks?: NetworkConfig[];
+  }>(),
+  {
+    disabled: false,
+    size: "md",
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: NetworkConfig];
+  change: [value: NetworkConfig];
+}>();
+
+const networkItems = computed((): DropdownItem<NetworkConfig>[] => {  
+  return Object.values(Networks).map((network) => ({
+    value: network,
+    label: network.name,
+    icon: getNetworkImage(network.name),
+  }));
+});
+
+const handleChange = (value: NetworkConfig) => {
+  emit("update:modelValue", value);
+  emit("change", value);
+};
+</script>
+
+<template>
+  <Dropdown
+    :model-value="modelValue"
+    :items="networkItems"
+    :disabled="disabled"
+    :size="size"
+    :show-icon="true"
+    @update:model-value="handleChange"
+  />
+</template>
+

src/components/ui/PageHeader.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+export type HeaderSize = "sm" | "md" | "lg";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    subtitle?: string;
+    size?: HeaderSize;
+    centered?: boolean;
+  }>(),
+  {
+    size: "lg",
+    centered: true,
+  }
+);
+</script>
+
+<template>
+  <div
+    :class="['page-header', `size-${size}`, { centered: centered }]"
+  >
+    <h1 class="title text-white font-extrabold">
+      {{ title }}
+    </h1>
+    <p v-if="subtitle" class="subtitle text-white font-medium">
+      {{ subtitle }}
+    </p>
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  @apply flex flex-col gap-4;
+}
+
+.page-header.centered {
+  @apply items-center justify-center text-center;
+}
+
+/* Tamanhos */
+.size-sm .title {
+  @apply sm:text-2xl text-xl sm:max-w-[20rem] max-w-[16rem];
+}
+
+.size-sm .subtitle {
+  @apply sm:text-sm text-xs sm:max-w-[18rem] max-w-[14rem];
+}
+
+.size-md .title {
+  @apply sm:text-4xl text-2xl sm:max-w-[28rem] max-w-[22rem];
+}
+
+.size-md .subtitle {
+  @apply sm:text-base text-sm sm:max-w-[26rem] max-w-[20rem];
+}
+
+.size-lg .title {
+  @apply sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem];
+}
+
+.size-lg .subtitle {
+  @apply sm:text-base text-sm sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide;
+}
+</style>
+

src/components/ui/StatusBadge.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type StatusType = "open" | "expired" | "completed" | "pending";
+
+const props = defineProps<{
+  status: StatusType;
+  customText?: string;
+}>();
+
+const statusConfig = computed(() => {
+  const configs: Record<StatusType, { text: string; color: string }> = {
+    open: {
+      text: "Em Aberto",
+      color: "bg-amber-300",
+    },
+    expired: {
+      text: "Expirado",
+      color: "bg-[#94A3B8]",
+    },
+    completed: {
+      text: "Finalizado",
+      color: "bg-emerald-300",
+    },
+    pending: {
+      text: "Pendente",
+      color: "bg-gray-300",
+    },
+  };
+
+  return configs[props.status];
+});
+
+const displayText = computed(() => {
+  return props.customText || statusConfig.value.text;
+});
+</script>
+
+<template>
+  <div :class="[statusConfig.color, 'status-badge']">
+    {{ displayText }}
+  </div>
+</template>
+
+<style scoped>
+.status-badge {
+  @apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center px-2 py-1;
+}
+</style>
+

src/components/ui/ToasterComponent.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
 import { useOnboard } from "@web3-onboard/vue";
-import { Networks } from "../model/Networks";
+import { Networks } from "@/config/networks";
 import { useUser } from "@/composables/useUser";
 
 const { connectedWallet } = useOnboard();
 const user = useUser();
-const { networkId, networkName } = user;
+const { network } = user;
 
 const isWrongNetwork = ref(false);
-const targetNetworkName = computed(() => Networks[networkName.value].chainName);
+const targetNetworkName = computed(() => network.value.name);
 
 const checkNetwork = () => {
   if (connectedWallet.value) {
     const chainId = connectedWallet.value.chains[0].id;
-    isWrongNetwork.value = Number(chainId) !== networkId.value;
+    isWrongNetwork.value = Number(chainId) !== network.value.id;
   } else {
     isWrongNetwork.value = false; // No wallet connected yet
   }
@@ -23,11 +23,12 @@ const checkNetwork = () => {
 const switchNetwork = async () => {
   try {
     if (connectedWallet.value && connectedWallet.value.provider) {
+      let chainId = network.value.id.toString(16);
       await connectedWallet.value.provider.request({
         method: "wallet_switchEthereumChain",
         params: [
           {
-            chainId: Networks[networkName.value].chainId,
+            chainId: `0x${chainId}`,
           },
         ],
       });
@@ -39,7 +40,7 @@ const switchNetwork = async () => {
 
 onMounted(checkNetwork);
 watch(connectedWallet, checkNetwork);
-watch(networkId, checkNetwork, { immediate: true });
+watch(network, checkNetwork, { immediate: true });
 </script>
 
 <template>

src/components/ui/TokenSelector.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { TokenEnum } from "@/model/NetworkEnum";
+import { getTokenImage } from "@/utils/imagesPath";
+import Dropdown, { type DropdownItem } from "./Dropdown.vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: TokenEnum;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+  }>(),
+  {
+    disabled: false,
+    size: "md",
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: TokenEnum];
+  change: [value: TokenEnum];
+}>();
+
+const tokenItems = computed((): DropdownItem<TokenEnum>[] => {
+  return Object.values(TokenEnum).map((token) => ({
+    value: token,
+    label: token,
+    icon: getTokenImage(token),
+  }));
+});
+
+const handleChange = (value: TokenEnum) => {
+  emit("update:modelValue", value);
+  emit("change", value);
+};
+</script>
+
+<template>
+  <Dropdown
+    :model-value="modelValue"
+    :items="tokenItems"
+    :disabled="disabled"
+    :size="size"
+    :show-icon="true"
+    @update:model-value="handleChange"
+  />
+</template>
+

src/components/ui/WalletConnectButton.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import CustomButton from "./CustomButton.vue";
+
+const props = withDefaults(
+  defineProps<{
+    walletAddress: string | null;
+    variant?: "primary" | "secondary" | "outline";
+    showMenu?: boolean;
+  }>(),
+  {
+    variant: "primary",
+    showMenu: true,
+  }
+);
+
+const emit = defineEmits<{
+  connect: [];
+  disconnect: [];
+  viewTransactions: [];
+}>();
+
+const menuOpen = ref(false);
+const menuRef = ref<HTMLElement | null>(null);
+
+const isConnected = computed(() => {
+  return !!props.walletAddress;
+});
+
+const formattedAddress = computed(() => {
+  if (!props.walletAddress) return "";
+  
+  const address = props.walletAddress;
+  const length = address.length;
+  const start = address.substring(0, 5);
+  const end = address.substring(length - 4, length);
+  
+  return `${start}...${end}`;
+});
+
+const handleConnect = () => {
+  emit("connect");
+};
+
+const handleDisconnect = () => {
+  menuOpen.value = false;
+  emit("disconnect");
+};
+
+const handleViewTransactions = () => {
+  menuOpen.value = false;
+  emit("viewTransactions");
+};
+
+const toggleMenu = () => {
+  if (isConnected.value && props.showMenu) {
+    menuOpen.value = !menuOpen.value;
+  }
+};
+
+onClickOutside(menuRef, () => {
+  menuOpen.value = false;
+});
+</script>
+
+<template>
+  <div class="wallet-connect-container">
+    <CustomButton
+      v-if="!isConnected"
+      text="Conectar carteira"
+      :variant="variant"
+      @button-clicked="handleConnect"
+    />
+    
+    <div v-else ref="menuRef" class="wallet-connected">
+      <button
+        type="button"
+        class="wallet-button"
+        @click="toggleMenu"
+      >
+        <span class="wallet-address">{{ formattedAddress }}</span>
+        <div class="wallet-indicator"></div>
+      </button>
+      
+      <transition name="menu-fade">
+        <div v-if="menuOpen && showMenu" class="wallet-menu">
+          <button
+            type="button"
+            class="menu-item"
+            @click="handleViewTransactions"
+          >
+            <span>Ver transações</span>
+          </button>
+          <button
+            type="button"
+            class="menu-item disconnect"
+            @click="handleDisconnect"
+          >
+            <span>Desconectar</span>
+          </button>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wallet-connect-container {
+  @apply relative inline-block;
+}
+
+.wallet-connected {
+  @apply relative;
+}
+
+.wallet-button {
+  @apply flex items-center gap-3 px-4 py-2 bg-white border-2 border-amber-400 rounded-lg hover:bg-amber-50 transition-colors cursor-pointer;
+}
+
+.wallet-address {
+  @apply text-gray-900 font-semibold text-sm;
+}
+
+.wallet-indicator {
+  @apply w-2 h-2 bg-emerald-500 rounded-full;
+}
+
+.wallet-menu {
+  @apply absolute top-full right-0 mt-2 bg-white rounded-lg border border-gray-300 shadow-lg z-50 min-w-[200px] overflow-hidden;
+}
+
+.menu-item {
+  @apply w-full px-4 py-3 text-left text-gray-900 font-medium text-sm hover:bg-gray-100 transition-colors cursor-pointer border-none;
+}
+
+.menu-item.disconnect {
+  @apply text-red-500 hover:bg-red-50;
+}
+
+/* Animação */
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  @apply transition-all duration-200;
+}
+
+.menu-fade-enter-from,
+.menu-fade-leave-to {
+  @apply opacity-0 -translate-y-2;
+}
+</style>
+

src/composables/useGraphQL.ts

@@ -0,0 +1,475 @@
+import { NetworkConfig } from '@/model/NetworkEnum';
+import { ref, computed, type Ref } from 'vue';
+import { isTestnetEnvironment } from '@/config/networks';
+import { sepolia, rootstock, rootstockTestnet } from "viem/chains";
+
+export interface Transaction {
+  id: string;
+  type: 'deposit' | 'lock' | 'release' | 'return';
+  timestamp: string;
+  blockTimestamp: string;
+  seller?: string;
+  buyer?: string | null;
+  amount: string;
+  token: string;
+  blockNumber: string;
+  transactionHash: string;
+}
+
+export interface AnalyticsData {
+  totalVolume: string;
+  totalTransactions: string;
+  totalLocks: string;
+  totalDeposits: string;
+  totalReleases: string;
+}
+
+export function useGraphQL(network: Ref<NetworkConfig>) {
+  const searchAddress = ref('');
+  const selectedType = ref('all');
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const analyticsLoading = ref(false);
+  
+  const transactionsData = ref<Transaction[]>([]);
+  const analyticsData = ref<AnalyticsData>({
+    totalVolume: '0',
+    totalTransactions: '0',
+    totalLocks: '0',
+    totalDeposits: '0',
+    totalReleases: '0'
+  });
+
+  const getGraphQLUrl = () => {
+    const rskNetworkName = isTestnetEnvironment() ? rootstockTestnet.name : rootstock.name;  
+    
+    switch (network.value.name) {
+      case sepolia.name:
+        return import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL!;
+      case rskNetworkName:
+        return import.meta.env.VITE_RSK_SUBGRAPH_URL!;
+      default:
+        throw new Error(`Unsupported network: ${network.value.name}`);
+    }
+  };
+
+  const executeQuery = async (query: string, variables: any = {}) => {
+    const url = getGraphQLUrl();
+    
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          query,
+          variables,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      
+      if (data.errors) {
+        throw new Error(data.errors[0]?.message || 'GraphQL error');
+      }
+
+      return data.data;
+    } catch (err) {
+      console.error('GraphQL query error:', err);
+      throw err;
+    }
+  };
+
+  const fetchAllActivity = async () => {
+    loading.value = true;
+    error.value = null;
+
+    const query = `
+      query GetAllActivity($first: Int = 50) {
+        depositAddeds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          seller
+          token
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        depositWithdrawns(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          seller
+          token
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        lockAddeds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          buyer
+          lockID
+          seller
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        lockReleaseds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          buyer
+          lockId
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        lockReturneds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          buyer
+          lockId
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+      }
+    `;
+
+    try {
+      const data = await executeQuery(query, { first: 50 });
+      transactionsData.value = processActivityData(data);
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to fetch transactions';
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchUserActivity = async (userAddress: string) => {
+    loading.value = true;
+    error.value = null;
+
+    const query = `
+      query GetUserActivity($userAddress: String!, $first: Int = 50) {
+        depositAddeds(first: $first, where: { seller: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          seller
+          token
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        depositWithdrawns(first: $first, where: { seller: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          seller
+          token
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        lockAddeds(first: $first, where: { buyer: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          buyer
+          lockID
+          seller
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        lockReleaseds(first: $first, where: { buyer: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          buyer
+          lockId
+          amount
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+        lockReturneds(first: $first, where: { buyer: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
+          id
+          buyer
+          lockId
+          blockNumber
+          blockTimestamp
+          transactionHash
+        }
+      }
+    `;
+
+    try {
+      const data = await executeQuery(query, { userAddress, first: 50 });
+      transactionsData.value = processActivityData(data);
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to fetch user transactions';
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const clearData = () => {
+    transactionsData.value = [];
+    analyticsData.value = {
+      totalVolume: '0',
+      totalTransactions: '0',
+      totalLocks: '0',
+      totalDeposits: '0',
+      totalReleases: '0'
+    };
+  };
+
+  const fetchAnalytics = async () => {
+    analyticsLoading.value = true;
+
+    const query = `
+      query GetAnalytics {
+        depositAddeds(first: 1000) {
+          amount
+          blockTimestamp
+        }
+        depositWithdrawns(first: 1000) {
+          amount
+          blockTimestamp
+        }
+        lockAddeds(first: 1000) {
+          amount
+          blockTimestamp
+        }
+        lockReleaseds(first: 1000) {
+          amount
+          blockTimestamp
+        }
+        lockReturneds(first: 1000) {
+          blockTimestamp
+        }
+      }
+    `;
+
+    try {
+      const data = await executeQuery(query);
+      analyticsData.value = processAnalyticsData(data);
+    } catch (err) {
+      console.error('Failed to fetch analytics:', err);
+    } finally {
+      analyticsLoading.value = false;
+    }
+  };
+
+  const processActivityData = (data: any): Transaction[] => {
+    if (!data) return [];
+    
+    const activities: Transaction[] = [];
+    
+    if (data.depositAddeds) {
+      data.depositAddeds.forEach((deposit: any) => {
+        activities.push({
+          id: deposit.id,
+          blockNumber: deposit.blockNumber,
+          blockTimestamp: deposit.blockTimestamp,
+          transactionHash: deposit.transactionHash,
+          type: 'deposit',
+          seller: deposit.seller,
+          buyer: undefined,
+          amount: deposit.amount,
+          token: deposit.token,
+          timestamp: formatTimestamp(deposit.blockTimestamp)
+        });
+      });
+    }
+    
+    if (data.depositWithdrawns) {
+      data.depositWithdrawns.forEach((withdrawal: any) => {
+        activities.push({
+          id: withdrawal.id,
+          blockNumber: withdrawal.blockNumber,
+          blockTimestamp: withdrawal.blockTimestamp,
+          transactionHash: withdrawal.transactionHash,
+          type: 'deposit', // Treat as deposit withdrawal
+          seller: withdrawal.seller,
+          buyer: undefined,
+          amount: withdrawal.amount,
+          token: withdrawal.token,
+          timestamp: formatTimestamp(withdrawal.blockTimestamp)
+        });
+      });
+    }
+    
+    if (data.lockAddeds) {
+      data.lockAddeds.forEach((lock: any) => {
+        activities.push({
+          id: lock.id,
+          blockNumber: lock.blockNumber,
+          blockTimestamp: lock.blockTimestamp,
+          transactionHash: lock.transactionHash,
+          type: 'lock',
+          seller: lock.seller,
+          buyer: lock.buyer,
+          amount: lock.amount,
+          token: lock.token,
+          timestamp: formatTimestamp(lock.blockTimestamp)
+        });
+      });
+    }
+    
+    if (data.lockReleaseds) {
+      data.lockReleaseds.forEach((release: any) => {
+        activities.push({
+          id: release.id,
+          blockNumber: release.blockNumber,
+          blockTimestamp: release.blockTimestamp,
+          transactionHash: release.transactionHash,
+          type: 'release',
+          seller: undefined, // Release doesn't have seller info
+          buyer: release.buyer,
+          amount: release.amount,
+          token: 'BRZ', // Default token
+          timestamp: formatTimestamp(release.blockTimestamp)
+        });
+      });
+    }
+    
+    if (data.lockReturneds) {
+      data.lockReturneds.forEach((returnTx: any) => {
+        activities.push({
+          id: returnTx.id,
+          blockNumber: returnTx.blockNumber,
+          blockTimestamp: returnTx.blockTimestamp,
+          transactionHash: returnTx.transactionHash,
+          type: 'return',
+          seller: undefined, // Return doesn't have seller info
+          buyer: returnTx.buyer,
+          amount: '0', // Return doesn't have amount
+          token: 'BRZ', // Default token
+          timestamp: formatTimestamp(returnTx.blockTimestamp)
+        });
+      });
+    }
+    
+    return activities.sort((a, b) => parseInt(b.blockTimestamp) - parseInt(a.blockTimestamp));
+  };
+
+  const formatTimestamp = (timestamp: string): string => {
+    const now = Date.now() / 1000;
+    const diff = now - parseInt(timestamp);
+    
+    if (diff < 60) return 'Just now';
+    if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
+    return `${Math.floor(diff / 86400)} days ago`;
+  };
+
+  const formatAmount = (amount: string): string => {
+    const num = parseFloat(amount);
+    if (num >= 1000000000000000) return `${(num / 1000000000000000).toFixed(1)}Q`;
+    if (num >= 1000000000000) return `${(num / 1000000000000).toFixed(1)}T`;
+    if (num >= 1000000000) return `${(num / 1000000000).toFixed(1)}B`;
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+    if (num < 1) return num.toFixed(4);
+    return num.toFixed(2);
+  };
+
+  const processAnalyticsData = (data: any): AnalyticsData => {
+    if (!data) {
+      return {
+        totalVolume: '0',
+        totalTransactions: '0',
+        totalLocks: '0',
+        totalDeposits: '0',
+        totalReleases: '0'
+      };
+    }
+
+    let totalVolume = 0;
+    let totalTransactions = 0;
+    let totalLocks = 0;
+    let totalDeposits = 0;
+    let totalReleases = 0;
+
+    if (data.depositAddeds) {
+      data.depositAddeds.forEach((deposit: any) => {
+        totalVolume += parseFloat(deposit.amount || '0');
+        totalTransactions++;
+        totalDeposits++;
+      });
+    }
+
+    if (data.depositWithdrawns) {
+      data.depositWithdrawns.forEach((withdrawal: any) => {
+        totalVolume += parseFloat(withdrawal.amount || '0');
+        totalTransactions++;
+      });
+    }
+
+    if (data.lockAddeds) {
+      data.lockAddeds.forEach((lock: any) => {
+        totalVolume += parseFloat(lock.amount || '0');
+        totalTransactions++;
+        totalLocks++;
+      });
+    }
+
+    if (data.lockReleaseds) {
+      data.lockReleaseds.forEach((release: any) => {
+        totalVolume += parseFloat(release.amount || '0');
+        totalTransactions++;
+        totalReleases++;
+      });
+    }
+
+
+    if (data.lockReturneds) {
+      data.lockReturneds.forEach((returnTx: any) => {
+        totalTransactions++;
+      });
+    }
+
+    const result = {
+      totalVolume: formatAmount(totalVolume.toString()),
+      totalTransactions: totalTransactions.toString(),
+      totalLocks: totalLocks.toString(),
+      totalDeposits: totalDeposits.toString(),
+      totalReleases: totalReleases.toString()
+    };
+    
+    return result;
+  };
+
+  const filteredTransactions = computed(() => {
+    let filtered = transactionsData.value;
+    
+    if (selectedType.value !== 'all') {
+      filtered = filtered.filter(tx => tx.type === selectedType.value);
+    }
+    
+    if (searchAddress.value) {
+      const searchLower = searchAddress.value.toLowerCase();
+      filtered = filtered.filter(tx => 
+        tx.seller?.toLowerCase().includes(searchLower) ||
+        tx.buyer?.toLowerCase().includes(searchLower)
+      );
+    }
+    
+    return filtered;
+  });
+
+  return {
+    searchAddress,
+    selectedType,
+    transactions: filteredTransactions,
+    analytics: analyticsData,
+    loading,
+    error,
+    analyticsLoading,
+    fetchAllActivity,
+    fetchUserActivity,
+    fetchAnalytics,
+    clearData
+  };
+}

src/composables/useUser.ts

@@ -1,14 +1,14 @@
 import { ref } from "vue";
-import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { Participant } from "../utils/bbPay";
-import { NetworkById } from "@/model/Networks";
+import type { Address } from "viem"
+import { DEFAULT_NETWORK, Networks } from "@/config/networks";
+import { TokenEnum, NetworkConfig } from "@/model/NetworkEnum"
 
-const walletAddress = ref("");
+const walletAddress = ref<Address | null>(null);
 const balance = ref("");
-const networkId = ref(11155111);
+const network = ref(DEFAULT_NETWORK);
-const networkName = ref(NetworkEnum.sepolia);
+const selectedToken = ref<TokenEnum>(TokenEnum.BRZ);
-const selectedToken = ref(TokenEnum.BRZ);
 const loadingLock = ref(false);
 const sellerView = ref(false);
 const depositsValidList = ref<ValidDeposit[]>([]);
@@ -19,7 +19,7 @@ const sellerId = ref("");
 
 export function useUser() {
   // Actions become regular functions
-  const setWalletAddress = (address: string) => {
+  const setWalletAddress = (address: Address | null) => {
     walletAddress.value = address;
   };
 
@@ -31,9 +31,29 @@ export function useUser() {
     selectedToken.value = token;
   };
 
-  const setNetworkId = (network: string | number) => {
+  const setNetwork = (chain: NetworkConfig) => {
-    networkName.value = NetworkById(network) || NetworkEnum.sepolia;
+    network.value = chain;
-    networkId.value = Number(network);
+  };
+
+  const setNetworkById = (id: string | number) => {
+    let chainId: number;
+
+    if (typeof id === 'string') {
+      // Parse hex string or number string to number
+      if (id.startsWith('0x')) {
+        chainId = parseInt(id, 16);
+      } else {
+        chainId = parseInt(id, 10);
+      }
+    } else {
+      chainId = id;
+    }
+
+    // Find network by chain ID
+    const chain = Object.values(Networks).find(n => n.id === chainId);
+    if (chain) {
+      network.value = chain;
+    }
   };
 
   const setLoadingLock = (isLoading: boolean) => {
@@ -75,8 +95,7 @@ export function useUser() {
     // State
     walletAddress,
     balance,
-    networkId,
+    network,
-    networkName,
     selectedToken,
     loadingLock,
     sellerView,
@@ -90,7 +109,8 @@ export function useUser() {
     setWalletAddress,
     setBalance,
     setSelectedToken,
-    setNetworkId,
+    setNetwork,
+    setNetworkById,
     setLoadingLock,
     setSellerView,
     setDepositsValidList,

src/config/networks.ts

@@ -0,0 +1,30 @@
+import { sepolia, rootstock, rootstockTestnet } from "viem/chains";
+import { NetworkConfig } from "@/model/NetworkEnum"
+// TODO: import addresses from p2pix-smart-contracts deployments
+
+export const isTestnetEnvironment = () => {
+  return import.meta.env.VITE_ENVIRONMENT === 'testnet' || 
+         import.meta.env.NODE_ENV === 'development' ||
+         import.meta.env.MODE === 'development';
+};
+
+export const Networks: {[key:string]: NetworkConfig} = {
+  sepolia: { ...sepolia,
+    rpcUrls: { default: { http: [import.meta.env.VITE_SEPOLIA_API_URL]}},
+    contracts: { ...sepolia.contracts,
+      p2pix: { address: import.meta.env.VITE_SEPOLIA_P2PIX_ADDRESS } },
+    tokens: {
+      BRZ: { address: import.meta.env.VITE_SEPOLIA_TOKEN_ADDRESS } },
+    subgraphUrls: [import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL]
+  },
+  rootstock: { ...(isTestnetEnvironment() ? rootstockTestnet : rootstock),
+    rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL]}},
+    contracts: { ...(isTestnetEnvironment() ? rootstockTestnet.contracts : rootstock.contracts),
+      p2pix: { address: import.meta.env.VITE_RSK_P2PIX_ADDRESS } },
+    tokens: {
+      BRZ: { address: import.meta.env.VITE_RSK_TOKEN_ADDRESS } },
+    subgraphUrls: [import.meta.env.VITE_RSK_SUBGRAPH_URL]
+  },
+};
+
+export const DEFAULT_NETWORK = Networks.sepolia;

src/model/AppVersion.ts

@@ -0,0 +1,8 @@
+export interface AppVersion {
+  tag: string;
+  ipfsHash: string;
+  releaseDate: string;
+  description?: string;
+}
+
+

src/model/LockStatus.ts

@@ -0,0 +1,8 @@
+import type { Address } from "viem";
+
+export enum LockStatus { // from DataTypes.sol
+  Inexistent = 0, // Uninitialized Lock
+  Active = 1,     // Valid Lock
+  Expired = 2,    // Expired Lock
+  Released = 3    // Already released Lock
+}

src/model/NetworkEnum.ts

@@ -1,18 +1,10 @@
-export enum NetworkEnum {
+import type { Chain, ChainContract } from "viem";
-  sepolia = 11155111,
-  rootstock = 31,
-}
-
-export const getNetworkSubgraphURL = (network: NetworkEnum | number) => {
-  const networkMap: Record<number, string> = {
-    [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || "",
-    [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_SUBGRAPH_URL || "",
-  };
-
-  return networkMap[typeof network === "number" ? network : network] || "";
-};
 
 export enum TokenEnum {
-  BRZ = "BRZ",
+  BRZ = 'BRZ',
   // BRX = 'BRX'
 }
+export type NetworkConfig = Chain & {
+  tokens: Record<TokenEnum, ChainContract>,
+  subgraphUrls: string[]
+};

src/model/Networks.ts

@@ -1,37 +0,0 @@
-import { NetworkEnum } from "@/model/NetworkEnum";
-
-export const NetworkById = (
-  chainId: string | number
-): NetworkEnum | undefined => {
-  const normalizedChainId =
-    typeof chainId === "number" ? chainId : Number(chainId);
-
-  for (const [network, details] of Object.entries(Networks)) {
-    if (Number(details.chainId) === normalizedChainId) {
-      return network as unknown as NetworkEnum;
-    }
-  }
-
-  return undefined;
-};
-
-export const Networks = {
-  [NetworkEnum.sepolia]: {
-    chainId: "0xAA36A7",
-    chainName: "Sepolia Testnet",
-  },
-  [NetworkEnum.rootstock]: {
-    chainId: "0x1F",
-    chainName: "Rootstock Testnet",
-    rpcUrls: ["https://public-node.testnet.rsk.co/"],
-    iconUrls: [
-      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPOSURBVHgBxVhNUhpBFH6vGdxp4S4LoSYnEE8gnEA4AbpMJUQ4gXgCRJK1egLxBOIJJCdwJElVllMu49Cd1z04zD/dY1H5qihmut/M93VPv59uhHdAXFaPAaEDgA2/BaeA4hq/zG+gIBAKQoyr9yshid4Jdn+2oQAYFIC4rA2zxUhgS3yrDqEAjGdIDD/YYG09aRl7L7vYd10wgPkMlcoNfdvtFhjCXJBAeyO2S5gLQuFo25bEIxjCCt8oN2Z46I+Mu4A4SbjwojQBi1+BDl5LP+JNYlhtQRmPsjjQN1ILldwY7JTXOuD9bWL/jxO8dFy7oL9TyMcIu/PeSghxlLduQUA9jwPXiAk98HLw5jFiaFfAEjRLImPR0qi7z+2VmArZ7zzqcDAS01ljCKqf7QSjxb7jKkIhTohu6rOCq64RjsNiFEo7x7ocSNMvlddhPWb0CQ6gAAw4HKZpKGFDcWhzSEG6kbQCm4dLbi9m+XlpBTHea2D31zTSNtxrAGMNdcP5FPuxfhlKdCHgASUJxcd7zUcobkAPXvkzWGyf7uVCt2M2DtkMljaHSxu92WWLAz8OjWsD+juD/4tzcpqBSh3yQrmwoNFFMZNuDB7bJRsp/hzMMQqeT+NQ96KtNEBK+SG+23XgHgUyy8FPjpPozy3M4sZwh1/nLRMOK26Mn50Z5IHjA6XkBugJSn1XHkeBbK8dJsxsl0jMEOUpm0o9+gkX+7+TI0E+0x6Hsk0ijyNYQ/4OAqWn2aF+5cLxEoRq6idqtyEPtFhp/XyMNI2p9ADFUc/iYL5h7YzEXEEyptj04mvVHxkGP4F8MS4sWDsqRr4DbyGZRiIcqCKtpRMYeTMcpVVAFewqMVPSjUkMVQTBp6BPVKeiTqN65E0qP1AvIArWC98qcQsms39oDeBEtoXFKFgLbQ76ZKiXiRH2E01UF9Go+kGDh32/LWHZAD2OQ7mGdLO4ndrqWaHZyNyD6XJUWEq6yIQqReOweCe49ivD2DNUIutjJgXpHwyUtyPbY/IMWehfBA0IZxQSQoW9rKXL+ltq0oKqYC+RB6yLKys4xEw/Idde5R02cTGOcgh1LSNnid+nihIqcN0tr48MhL89L2uoG+Dqv5Px/IwqAhkqnEi296M1OyLPqVCgdKhcuKNjlUnQL4X78cRk1E1JlMkBME1sFE0gRrRJZGs3iT44bRZP5z0wQJHzIZMMbpztN1t+FDhsMBe0YNfatimHDetgLGiZGkYapqPwYt6YIAWPDYI9fSrETfjkwwSFT2EVrV/USY+r+/GGNp2I7zoW/gdR9aOdZ/lPGgAAAABJRU5ErkJggg==",
-    ],
-    nativeCurrency: {
-      name: "tRBTC",
-      symbol: "tRBTC",
-      decimals: 18,
-    },
-    blockExplorerUrls: ["https://explorer.testnet.rootstock.io/"],
-  },
-};

src/model/Pix.ts

@@ -1,11 +1,11 @@
 export type Pix = {
-  pixKey: string;
+    pixKey: string;
-  merchantCity?: string;
+    merchantCity?: string;
-  merchantName?: string;
+    merchantName?: string;
-  value?: number;
+    value?: number;
-  transactionId?: string;
+    transactionId?: string;
-  message?: string;
+    message?: string;
-  cep?: string;
+    cep?: string;
-  currency?: number;
+    currency?: number;
-  countryCode?: string;
+    countryCode?: string;
 };

src/model/UnreleasedLock.ts

@@ -1,6 +1,8 @@
-import type { Pix } from "./Pix";
+import { Address } from "viem";
 
 export type UnreleasedLock = {
-  lockID: string;
+  lockID: bigint;
-  pix: Pix;
+  sellerAddress: Address;
+  tokenAddress: Address;
+  amount: number;
 };

src/model/ValidDeposit.ts

@@ -1,11 +1,12 @@
-import { NetworkEnum } from "./NetworkEnum";
+import type { Address } from "viem";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 
 export type ValidDeposit = {
-  token: string;
+  token: Address;
   blockNumber: number;
   remaining: number;
-  seller: string;
+  seller: Address;
-  pixKey: string;
+  participantID: string;
-  network: NetworkEnum;
+  network: NetworkConfig;
   open?: boolean;
 };

src/model/WalletTransaction.ts

@@ -1,11 +1,15 @@
+import type { LockStatus } from "@/model/LockStatus"
+import type { Address } from "viem"
+
 export type WalletTransaction = {
-  token: string;
+  token?: Address;
   blockNumber: number;
+  blockTimestamp?: number;
   amount: number;
   seller: string;
   buyer: string;
   event: string;
-  lockStatus: number;
+  lockStatus?: LockStatus;
   transactionHash: string;
   transactionID?: string;
 };

src/model/mock/EventMock.ts

@@ -1,120 +0,0 @@
-import { vi } from "vitest";
-
-export const MockEvents = [
-  {
-    blockNumber: 1,
-    blockHash: "0x8",
-    transactionIndex: 1,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 1,
-    event: "DepositAdded",
-    eventSignature: "DepositAdded(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-  {
-    blockNumber: 2,
-    blockHash: "0x8",
-    transactionIndex: 2,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 2,
-    event: "LockAdded",
-    eventSignature: "LockAdded(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-  {
-    blockNumber: 3,
-    blockHash: "0x8",
-    transactionIndex: 3,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 3,
-    event: "LockReleased",
-    eventSignature: "LockReleased(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-  {
-    blockNumber: 4,
-    blockHash: "0x8",
-    transactionIndex: 4,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 4,
-    event: "LockReleased",
-    eventSignature: "LockReleased(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-];

src/model/mock/ValidDepositMock.ts

@@ -1,45 +0,0 @@
-import type { ValidDeposit } from "../ValidDeposit";
-import { NetworkEnum } from "@/model/NetworkEnum";
-
-export const MockValidDeposits: ValidDeposit[] = [
-  {
-    blockNumber: 1,
-    token: "1",
-    remaining: 70,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-    network: NetworkEnum.sepolia,
-  },
-  {
-    blockNumber: 2,
-    token: "2",
-    remaining: 200,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-    network: NetworkEnum.sepolia,
-  },
-  {
-    blockNumber: 3,
-    token: "3",
-    remaining: 1250,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-    network: NetworkEnum.sepolia,
-  },
-  {
-    blockNumber: 4,
-    token: "4",
-    remaining: 4000,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-    network: NetworkEnum.sepolia,
-  },
-  {
-    blockNumber: 5,
-    token: "5",
-    remaining: 2000,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-    network: NetworkEnum.sepolia,
-  },
-];

src/model/mock/WalletTransactionMock.ts

@@ -1,54 +0,0 @@
-import type { WalletTransaction } from "../WalletTransaction";
-
-export const MockWalletTransactions: WalletTransaction[] = [
-  {
-    blockNumber: 1,
-    token: "1",
-    amount: 70,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Deposit",
-    lockStatus: 0,
-    transactionHash: "1",
-  },
-  {
-    blockNumber: 2,
-    token: "2",
-    amount: 200,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Lock",
-    lockStatus: 1,
-    transactionHash: "2",
-  },
-  {
-    blockNumber: 3,
-    token: "3",
-    amount: 1250,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Release",
-    lockStatus: 2,
-    transactionHash: "3",
-  },
-  {
-    blockNumber: 4,
-    token: "4",
-    amount: 4000,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Deposit",
-    lockStatus: 0,
-    transactionHash: "4",
-  },
-  {
-    blockNumber: 5,
-    token: "5",
-    amount: 2000,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Deposit",
-    lockStatus: 3,
-    transactionHash: "5",
-  },
-];

src/router/index.ts

@@ -1,11 +1,15 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
 import HomeView from "@/views/HomeView.vue";
 import FaqView from "@/views/FaqView.vue";
 import ManageBidsView from "@/views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
+import ExploreView from "@/views/ExploreView.vue";
+import VersionsView from "@/views/VersionsView.vue";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: import.meta.env.MODE === 'production' && import.meta.env.BASE_URL === './' 
+    ? createWebHashHistory() 
+    : createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: "/",
@@ -33,6 +37,16 @@ const router = createRouter({
       name: "faq",
       component: FaqView,
     },
+    {
+      path: "/explore",
+      name: "explore",
+      component: ExploreView,
+    },
+    {
+      path: "/versions",
+      name: "versions",
+      component: VersionsView,
+    },
   ],
 });
 

src/utils/QrCodePix.ts

@@ -1,76 +0,0 @@
-import qrcode from "qrcode";
-import type { QRCodeToDataURLOptions } from "qrcode";
-import { crc16ccitt } from "crc";
-import type { Pix } from "@/model/Pix";
-
-const pix = ({
-  pixKey,
-  merchantCity = "city",
-  merchantName = "name",
-  value,
-  message,
-  cep,
-  transactionId = "***",
-  currency = 986,
-  countryCode = "BR",
-}: Pix) => {
-  const payloadKeyString = generatePixKey(pixKey, message);
-
-  const payload: string[] = [
-    formatEMV("00", "01"), //Payload Format Indicator
-    formatEMV("26", payloadKeyString), // Merchant Account Information
-    formatEMV("52", "0000"), //Merchant Category Code
-    formatEMV("53", String(currency)), // Transaction Currency
-  ];
-
-  if (String(value) === "0") {
-    value = undefined;
-  }
-  if (value) {
-    payload.push(formatEMV("54", value.toFixed(2)));
-  }
-
-  payload.push(formatEMV("58", countryCode.toUpperCase())); // Country Code
-  payload.push(formatEMV("59", merchantName)); // Merchant Name
-  payload.push(formatEMV("60", merchantCity)); // Merchant City
-
-  if (cep) {
-    payload.push(formatEMV("61", cep)); // Postal Code
-  }
-
-  payload.push(formatEMV("62", formatEMV("05", transactionId))); // Additional Data Field Template
-
-  payload.push("6304");
-
-  const stringPayload = payload.join("");
-  const crcResult = crc16ccitt(stringPayload)
-    .toString(16)
-    .toUpperCase()
-    .padStart(4, "0");
-
-  const payloadPIX = `${stringPayload}${crcResult}`;
-
-  return {
-    payload: (): string => payloadPIX,
-    base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> =>
-      qrcode.toDataURL(payloadPIX, options),
-  };
-};
-
-const generatePixKey = (pixKey: string, message?: string): string => {
-  const payload: string[] = [
-    formatEMV("00", "BR.GOV.BCB.PIX"),
-    formatEMV("01", pixKey),
-  ];
-  if (message) {
-    payload.push(formatEMV("02", message));
-  }
-  return payload.join("");
-};
-
-const formatEMV = (id: string, param: string): string => {
-  const len = param?.length?.toString().padStart(2, "0");
-  return `${id}${len}${param}`;
-};
-
-export { pix };

src/utils/__tests__/debounce.spec.ts

@@ -1,24 +0,0 @@
-import { it, expect, vi, type Mock } from "vitest";
-import { debounce } from "../debounce";
-
-vi.useFakeTimers();
-
-describe("debounce function test", () => {
-  let mockFunction: Mock;
-  let debounceFunction: Function;
-
-  beforeEach(() => {
-    mockFunction = vi.fn();
-    debounceFunction = debounce(mockFunction, 1000);
-  });
-
-  it("debounce function will be executed just once", () => {
-    for (let i = 0; i < 100; i++) {
-      debounceFunction();
-    }
-
-    vi.runAllTimers();
-
-    expect(mockFunction).toBeCalledTimes(1);
-  });
-});

src/utils/__tests__/decimalCount.spec.ts

@@ -1,12 +0,0 @@
-import { it, expect } from "vitest";
-import { decimalCount } from "../decimalCount";
-
-describe("decimalCount function test", () => {
-  it("decimalCount should return length 1 of decimal", () => {
-    expect(decimalCount("4.1")).toEqual(1);
-  });
-
-  it("decimalCount should return length 0 because no decimal found", () => {
-    expect(decimalCount("5")).toEqual(0);
-  });
-});

src/utils/__tests__/networkLiquidity.spec.ts

@@ -1,25 +0,0 @@
-import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
-import { it, expect, vi } from "vitest";
-import { verifyNetworkLiquidity } from "../networkLiquidity";
-
-vi.useFakeTimers();
-
-describe("verifyNetworkLiquidity function test", () => {
-  it("verifyNetworkLiquidity should return an element from valid deposit list when searching for other deposits", () => {
-    const liquidityElement = verifyNetworkLiquidity(
-      MockValidDeposits[0].remaining,
-      "strangeWalletAddress",
-      MockValidDeposits
-    );
-    expect(liquidityElement).toEqual(MockValidDeposits[0]);
-  });
-
-  it("verifyNetworkLiquidity should return undefined when all deposits on valid deposit list match connected wallet addres", () => {
-    const liquidityElement = verifyNetworkLiquidity(
-      MockValidDeposits[0].remaining,
-      MockValidDeposits[0].seller,
-      [MockValidDeposits[0]]
-    );
-    expect(liquidityElement).toEqual(undefined);
-  });
-});

src/utils/bbPay.ts

@@ -1,5 +1,3 @@
-import { off } from "process";
-
 export interface Participant {
   offer: string;
   chainID: number;
@@ -17,7 +15,6 @@ export interface ParticipantWithID extends Participant {
 
 export interface Offer {
   amount: number;
-  lockId: string;
   sellerId: string;
 }
 
@@ -25,7 +22,6 @@ export interface Offer {
 // https://apoio.developers.bb.com.br/sandbox/spec/665797498bb48200130fc32c
 
 export const createParticipant = async (participant: Participant) => {
-  console.log("Creating participant", participant);
   const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/register`, {
     method: "POST",
     headers: {
@@ -41,8 +37,14 @@ export const createParticipant = async (participant: Participant) => {
       codigoIspb: participant.bankIspb,
     }),
   });
+  if (!response.ok) {
+    throw new Error(`Error creating participant: ${response.statusText}`);
+  }
   const data = await response.json();
-  return { ...participant, id: data.id } as ParticipantWithID;
+  if (data.errors || data.erros) {
+    throw new Error(`Error creating participant: ${JSON.stringify(data)}`);
+  }
+  return { ...participant, id: data.numeroParticipante } as ParticipantWithID;
 };
 
 export const createSolicitation = async (offer: Offer) => {
@@ -53,25 +55,21 @@ export const createSolicitation = async (offer: Offer) => {
     },
     body: JSON.stringify({
       amount: offer.amount,
-      pixTarget: offer.sellerId,
+      pixTarget: offer.sellerId.split("-").pop(),
     }),
   });
   return response.json();
 };
 
-export const getSolicitation = async (id: string) => {
+export const getSolicitation = async (id: bigint): Promise<{pixTimestamp: `0x${string}`, signature: `0x${string}`}> => {
   const response = await fetch(
     `${import.meta.env.VITE_APP_API_URL}/release/${id}`
   );
 
-  const obj: any = response.json();
+  const obj = await response.json();
 
   return {
-    id: obj.numeroSolicitacao,
+    pixTimestamp: obj.pixTimestamp,
-    lockId: obj.codigoConciliacaoSolicitacao,
+    signature: obj.signature,
-    amount: obj.valorSolicitacao,
-    qrcode: obj.pix.textoQrCode,
-    status: obj.valorSomatorioPagamentosEfetivados >= obj.valorSolicitacao,
-    signature: obj.assinatura,
   };
 };

src/utils/imagesPath.ts

@@ -1,30 +1,11 @@
 import type { TokenEnum } from "@/model/NetworkEnum";
-
+import { Networks } from "@/config/networks";
-export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
-  eager: true,
-  query: "?url",
-  import: "default",
-});
 
 export const getNetworkImage = (networkName: string): string => {
-  try {
+  const normalizedName = networkName.toLowerCase().replace(/[^a-z0-9]/g, '-');
-    const path = Object.keys(imagesPath).find((key) =>
+  return new URL(`../assets/networks/${normalizedName}.svg`, import.meta.url).href;
-      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 => {
-  const path = Object.keys(imagesPath).find((key) =>
+  return new URL(`../assets/tokens/${tokenName.toLowerCase()}.svg`, import.meta.url).href;
-    key.endsWith(`${tokenName.toLowerCase()}.svg`)
-  );
-  return path ? imagesPath[path] : "";
 };

src/utils/networkLiquidity.ts

@@ -1,8 +1,9 @@
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { Address } from "viem";
 
 const verifyNetworkLiquidity = (
   tokenValue: number,
-  walletAddress: string,
+  walletAddress: Address,
   validDepositList: ValidDeposit[]
 ): ValidDeposit[] => {
   const filteredDepositList = validDepositList

src/utils/versions.ts

@@ -0,0 +1,30 @@
+import type { AppVersion } from "@/model/AppVersion";
+
+export const appVersions: AppVersion[] = [
+  {
+    tag: "1.1.0",
+    ipfsHash: "bafybeiaffdxrxoex3qh7kirnkkufnvpafb4gmkt7mjxufnnpbrq6tmqoha",
+    releaseDate: "2025-11-06",
+    description: "Explorer and versioning features added"
+  },
+  {
+    tag: "1.0.0",
+    ipfsHash: "bafybeiagfqnxnb5zdrks6dicfm7kxjdtzzzzm2ouluxgdseg2hrrotayzi",
+    releaseDate: "2023-01-28",
+    description: "Initial release"
+  },
+];
+
+export function getLatestVersion(): AppVersion | null {
+  return appVersions.length > 0 ? appVersions[0] : null;
+}
+
+export function getVersionByTag(tag: string): AppVersion | null {
+  return appVersions.find((v) => v.tag === tag) || null;
+}
+
+export function getIpfsUrl(ipfsHash: string): string {
+  return `https://${ipfsHash}.ipfs.dweb.link`;
+}
+
+

src/views/ExploreView.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import { useUser } from '@/composables/useUser';
+import { useGraphQL } from '@/composables/useGraphQL';
+import FormCard from '@/components/ui/FormCard.vue';
+import LoadingComponent from '@/components/ui/LoadingComponent.vue';
+import AnalyticsCard from '@/components/Explorer/AnalyticsCard.vue';
+import TransactionTable from '@/components/Explorer/TransactionTable.vue';
+
+const user = useUser();
+const { network } = user;
+
+const {
+  searchAddress,
+  selectedType,
+  transactions,
+  analytics,
+  loading,
+  error,
+  analyticsLoading,
+  fetchAllActivity,
+  fetchUserActivity,
+  fetchAnalytics,
+  clearData
+} = useGraphQL(network);
+
+const transactionTypes = [
+  { key: 'all', label: 'Todas' },
+  { key: 'deposit', label: 'Depósitos' },
+  { key: 'lock', label: 'Bloqueios' },
+  { key: 'release', label: 'Liberações' },
+  { key: 'return', label: 'Retornos' }
+];
+
+const handleTypeFilter = (type: string) => {
+  selectedType.value = type;
+};
+
+watch(searchAddress, async (newAddress) => {
+  if (newAddress.trim()) {
+    await fetchUserActivity(newAddress.trim());
+  } else {
+    await fetchAllActivity();
+  }
+});
+
+watch(network, async () => {
+  clearData();
+  await Promise.all([
+    fetchAllActivity(),
+    fetchAnalytics()
+  ]);
+}, { deep: true });
+
+onMounted(async () => {
+  await Promise.all([
+    fetchAllActivity(),
+    fetchAnalytics()
+  ]);
+});
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
+        <AnalyticsCard
+          title="Volume Total"
+          :value="analytics.totalVolume"
+          :loading="analyticsLoading"
+        />
+        
+        <AnalyticsCard
+          title="Total de Transações"
+          :value="analytics.totalTransactions"
+          :loading="analyticsLoading"
+        />
+        
+        <AnalyticsCard
+          title="Total de Bloqueios"
+          :value="analytics.totalLocks"
+          :loading="analyticsLoading"
+        />
+        
+        <AnalyticsCard
+          title="Total de Depósitos"
+          :value="analytics.totalDeposits"
+          :loading="analyticsLoading"
+        />
+        
+        <AnalyticsCard
+          title="Total de Liberações"
+          :value="analytics.totalReleases"
+          :loading="analyticsLoading"
+        />
+      </div>
+
+      <!-- Search and Filters -->
+      <FormCard padding="lg" class="mb-6">
+        <div class="space-y-4">
+          <!-- Search Input -->
+          <div class="flex-1">
+            <input
+              v-model="searchAddress"
+              type="text"
+              placeholder="Buscar por endereço de carteira..."
+              class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
+            />
+          </div>
+
+          <!-- Type Filters -->
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="type in transactionTypes"
+              :key="type.key"
+              @click="handleTypeFilter(type.key)"
+              :class="[
+                'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+                selectedType === type.key
+                  ? 'bg-amber-400 text-gray-900'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              ]"
+            >
+              {{ type.label }}
+            </button>
+          </div>
+        </div>
+      </FormCard>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="text-center py-12">
+        <LoadingComponent title="Carregando transações..." />
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="text-center py-12">
+        <div class="text-red-600 text-lg mb-2">⚠️</div>
+        <p class="text-red-600 mb-2">Erro ao carregar transações</p>
+        <p class="text-gray-600 text-sm">{{ error }}</p>
+      </div>
+
+      <!-- Transactions Table -->
+      <FormCard v-else padding="lg">
+        <div class="mb-6">
+          <h2 class="text-xl font-semibold text-gray-900 mb-2">Transações Recentes</h2>
+          <p class="text-gray-600">{{ transactions.length }} transações encontradas</p>
+        </div>
+
+        <TransactionTable 
+          :transactions="transactions"
+          :network-explorer-url="network.blockExplorers?.default.url || ''"
+        />
+      </FormCard>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  max-width: 1200px;
+}
+</style>

src/views/FaqView.vue

@@ -24,25 +24,24 @@ const openItem = (index: number) => {
   faq.value[selectedSection.value].items[index].content = marked(
     faq.value[selectedSection.value].items[index].content
   );
-  console.log(marked(faq.value[selectedSection.value].items[index].content));
 };
 </script>
 
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[50rem]"
+      <span class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[50rem] max-w-[90%]"
         >Perguntas Frequentes
       </span>
-      <span class="text font-medium text-base max-w-[40rem]"
+      <span class="text font-medium sm:text-base text-sm sm:max-w-[40rem] max-w-[90%]"
         >Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do
         Discord para falar diretamente conosco.</span
       >
     </div>
 
-    <div class="flex justify-between w-10/12 mt-20">
+    <div class="faq-container">
-      <div>
+      <div class="sumario-section">
-        <h1 class="text-3xl text-white font-bold">Sumário</h1>
+        <h1 class="sumario-title">Sumário</h1>
         <h3
           :class="index == selectedSection ? 'selected-sumario' : 'sumario'"
           v-for="(f, index) in faq"
@@ -53,7 +52,7 @@ const openItem = (index: number) => {
         </h3>
       </div>
 
-      <div class="w-4/6">
+      <div class="content-section">
         <div
           v-for="(item, index) in faq[selectedSection].items"
           v-bind:key="item.title"
@@ -62,16 +61,16 @@ const openItem = (index: number) => {
             <img
               alt="plus"
               src="@/assets/plus.svg?url"
-              class="mr-3"
+              class="icon"
               v-if="!item.isOpen"
             />
             <img
-              alt="plus"
+              alt="minus"
               src="@/assets/minus.svg?url"
-              class="mr-3"
+              class="icon"
               v-if="item.isOpen"
             />
-            <h4 class="text-white">{{ item.title }}</h4>
+            <h4 class="item-title">{{ item.title }}</h4>
           </div>
           <div class="content" v-if="item.isOpen" v-html="item.content"></div>
           <div class="hr"></div>
@@ -82,23 +81,52 @@ const openItem = (index: number) => {
 </template>
 
 <style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-8 sm:mt-16 px-4;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4 mb-8 sm:mb-12;
+}
+
+.text {
+  @apply text-white text-center;
+}
+
+.faq-container {
+  @apply flex flex-col sm:flex-row sm:justify-between w-full sm:w-10/12 max-w-7xl gap-8 sm:gap-0 mt-8 sm:mt-20;
+}
+
+.sumario-section {
+  @apply w-full sm:w-auto sm:min-w-[200px];
+}
+
+.sumario-title {
+  @apply text-xl sm:text-3xl text-white font-bold mb-4 sm:mb-0;
+}
+
 .sumario {
-  margin-top: 24px;
+  @apply text-white mt-6 sm:mt-6 cursor-pointer text-sm sm:text-base;
-  cursor: pointer;
 }
 
 .selected-sumario {
-  font-weight: bolder;
+  @apply text-white font-bold mt-6 sm:mt-6 cursor-pointer text-sm sm:text-base;
-  margin-top: 24px;
-  cursor: pointer;
 }
-.page {
+
-  @apply flex flex-col items-center justify-center w-full mt-16;
+.content-section {
+  @apply w-full sm:w-4/6;
+}
+
+.icon {
+  @apply mr-3 flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6;
+}
+
+.item-title {
+  @apply text-white font-semibold text-sm sm:text-base;
 }
 
 div.content {
-  padding-top: 24px;
+  @apply pt-6 text-white text-sm sm:text-base;
-  color: white;
 }
 
 .content :deep(ul) {
@@ -113,9 +141,12 @@ div.content {
   @apply list-disc m-1 p-1;
 }
 
+.content :deep(p) {
+  @apply mb-2;
+}
+
 .hr {
-  border: 1px solid #1f2937;
+  @apply border border-gray-700 my-6;
-  margin: 24px 0;
 }
 
 h3 {
@@ -126,12 +157,4 @@ h2,
 h4 {
   font-weight: 600;
 }
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-white text-center;
-}
 </style>

src/views/HomeView.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import SearchComponent from "@/components/SearchComponent.vue";
+import SearchComponent from "@/components/BuyerSteps/BuyerSearchComponent.vue";
-import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import LoadingComponent from "@/components/ui/LoadingComponent.vue";
-import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyerSteps/BuyConfirmedComponent.vue";
 import { ref, onMounted, watch } from "vue";
 import { useUser } from "@/composables/useUser";
-import QrCodeComponent from "@/components/QrCodeComponent.vue";
+import QrCodeComponent from "@/components/BuyerSteps/QrCodeComponent.vue";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { getUnreleasedLockById } from "@/blockchain/events";
-import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
+import CustomAlert from "@/components/ui/CustomAlert.vue";
 import { getSolicitation } from "@/utils/bbPay";
+import type { Address } from "viem";
 
 enum Step {
   Search,
@@ -23,9 +24,10 @@ const user = useUser();
 user.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress, networkName } = user;
+const { loadingLock, walletAddress, network } = user;
 const flowStep = ref<Step>(Step.Search);
-const pixTarget = ref<string>();
+const participantID = ref<string>();
+const sellerAddress = ref<Address>();
 const tokenAmount = ref<number>();
 const lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
@@ -37,7 +39,7 @@ const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
   tokenValue: number
 ) => {
-  pixTarget.value = selectedDeposit.pixKey;
+  participantID.value = selectedDeposit.participantID;
   tokenAmount.value = tokenValue;
 
   if (selectedDeposit) {
@@ -46,7 +48,7 @@ const confirmBuyClick = async (
 
     await addLock(selectedDeposit.seller, selectedDeposit.token, tokenValue)
       .then((_lockID) => {
-        lockID.value = _lockID;
+        lockID.value = String(_lockID);
       })
       .catch((err) => {
         console.log(err);
@@ -57,28 +59,28 @@ const confirmBuyClick = async (
   }
 };
 
-const releaseTransaction = async (lockId: string) => {
+const releaseTransaction = async (params: {
+  pixTimestamp: `0x${string}`&{lenght:34},
+  signature: `0x${string}`,
+}) => {
   flowStep.value = Step.List;
   showBuyAlert.value = true;
   loadingRelease.value = true;
 
-  const solicitation = await getSolicitation(lockId);
+  const release = await releaseLock(BigInt(lockID.value), params.pixTimestamp, params.signature);
 
-  if (solicitation.status) {
+  await updateWalletStatus();
-    const release = await releaseLock(solicitation);
+  loadingRelease.value = false;
-    await release.wait();
-
-    await updateWalletStatus();
-    loadingRelease.value = false;
-  }
 };
 
 const checkForUnreleasedLocks = async (): Promise<void> => {
-  const walletLocks = await checkUnreleasedLock(walletAddress.value);
+  if (!walletAddress.value)
-  if (walletLocks) {
+    throw new Error("Wallet not connected");
-    lockID.value = walletLocks.lockID;
+  const lock = await checkUnreleasedLock(walletAddress.value);
-    tokenAmount.value = walletLocks.pix.value;
+  if (lock) {
-    pixTarget.value = walletLocks.pix.pixKey;
+    lockID.value = String(lock.lockID);
+    tokenAmount.value = lock.amount;
+    sellerAddress.value = lock.sellerAddress;
     showModal.value = true;
   } else {
     flowStep.value = Step.Search;
@@ -87,11 +89,11 @@ const checkForUnreleasedLocks = async (): Promise<void> => {
 };
 
 if (paramLockID) {
-  const lockToRedirect = await getUnreleasedLockById(paramLockID as string);
+  const lockToRedirect = await getUnreleasedLockById(paramLockID);
   if (lockToRedirect) {
-    lockID.value = lockToRedirect.lockID;
+    lockID.value = String(lockToRedirect.lockID);
-    tokenAmount.value = lockToRedirect.pix.value;
+    tokenAmount.value = lockToRedirect.amount;
-    pixTarget.value = lockToRedirect.pix.pixKey;
+    sellerAddress.value = lockToRedirect.sellerAddress;
     flowStep.value = Step.Buy;
   } else {
     flowStep.value = Step.Search;
@@ -101,7 +103,7 @@ if (paramLockID) {
     await checkForUnreleasedLocks();
   });
 
-  watch(networkName, async () => {
+  watch(network, async () => {
     if (walletAddress.value) await checkForUnreleasedLocks();
   });
 }
@@ -134,8 +136,7 @@ onMounted(async () => {
     />
     <div v-if="flowStep == Step.Buy">
       <QrCodeComponent
-        :sellerId="String(pixTarget)"
+        :lockID="lockID"
-        :amount="tokenAmount"
         @pix-validated="releaseTransaction"
         v-if="!loadingLock"
       />

src/views/ManageBidsView.vue

@@ -2,8 +2,8 @@
 import { ref, onMounted, watch } from "vue";
 import { useUser } from "@/composables/useUser";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import LoadingComponent from "@/components/ui/LoadingComponent.vue";
-import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
+import CustomAlert from "@/components/ui/CustomAlert.vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
@@ -16,7 +16,7 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
 import router from "@/router/index";
 
 const user = useUser();
-const { walletAddress, networkName, selectedToken } = user;
+const { walletAddress, network, selectedToken } = user;
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(false);
 
@@ -29,7 +29,9 @@ const callWithdraw = async (amount: string) => {
     loadingWithdraw.value = true;
     let withdraw;
     try {
-      withdraw = await withdrawDeposit(amount, selectedToken.value);
+      withdraw = await withdrawDeposit(
+          amount,
+          network.value.tokens[selectedToken.value].address);
     } catch {
       loadingWithdraw.value = false;
     }
@@ -48,19 +50,15 @@ const callWithdraw = async (amount: string) => {
 const getWalletTransactions = async () => {
   user.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
-    console.log("Will fetch all required data...");
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
     );
-    console.log("Fetched deposits");
 
     const allUserTransactions = await listAllTransactionByWalletAddress(
       walletAddress.value
     );
-    console.log("Fetched all transactions");
 
     activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
-    console.log("Fetched active lock amount");
 
     if (walletDeposits) {
       depositList.value = walletDeposits;
@@ -83,7 +81,7 @@ watch(walletAddress, async () => {
   await getWalletTransactions();
 });
 
-watch(networkName, async () => {
+watch(network, async () => {
   await getWalletTransactions();
 });
 </script>

src/views/SellerView.vue

@@ -3,10 +3,10 @@ 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 LoadingComponent from "@/components/ui/LoadingComponent.vue";
 import { useUser } from "@/composables/useUser";
 import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
-import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
+import CustomAlert from "@/components/ui/CustomAlert.vue";
 import type { Participant } from "@/utils/bbPay";
 
 enum Step {
@@ -69,7 +69,7 @@ const sendNetwork = async () => {
     />
     <div v-if="flowStep == Step.Network">
       <SendNetwork
-        :sellerId="user.sellerId.value"
+        :sellerId="String(user.sellerId.value)"
         :offer="Number(user.seller.value.offer)"
         :selected-token="user.selectedToken.value"
         v-if="!loading"

src/views/VersionsView.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { appVersions, getIpfsUrl, getLatestVersion } from "@/utils/versions";
+import type { AppVersion } from "@/model/AppVersion";
+
+const versions = ref<AppVersion[]>([]);
+const latestVersion = ref<AppVersion | null>(null);
+const currentVersion = __APP_VERSION__;
+
+onMounted(() => {
+  versions.value = [...appVersions].sort((a, b) => 
+    new Date(b.releaseDate).getTime() - new Date(a.releaseDate).getTime()
+  );
+  latestVersion.value = getLatestVersion();
+});
+
+const openIpfsVersion = (ipfsHash: string) => {
+  const url = getIpfsUrl(ipfsHash);
+  window.open(url, "_blank", "noopener,noreferrer");
+};
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("pt-BR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-extrabold text-5xl max-w-[50rem]">
+        Versões do P2Pix
+      </span>
+      <span class="text font-medium text-base max-w-[40rem]">
+        Visualize todas as versões do P2Pix. Cada versão está
+        disponível no IPFS para acesso permanente e descentralizado.
+      </span>
+      <div v-if="currentVersion" class="mt-4">
+        <span class="text-gray-400 text-sm">
+          Versão atual: <span class="font-semibold text-white">{{ currentVersion }}</span>
+        </span>
+      </div>
+    </div>
+
+    <div class="versions-container">
+      <div
+        v-for="version in versions"
+        :key="version.tag"
+        class="version-card"
+      >
+        <div class="version-header">
+          <h3 class="version-tag">{{ version.tag }}</h3>
+          <span
+            v-if="version.tag === currentVersion"
+            class="current-badge"
+          >
+            Atual
+          </span>
+        </div>
+        <div class="version-info">
+          <p class="version-date">
+            <span class="label">Data de lançamento:</span>
+            {{ formatDate(version.releaseDate) }}
+          </p>
+          <p v-if="version.description" class="version-description">
+            {{ version.description }}
+          </p>
+          <div class="version-actions">
+            <button
+              v-if="currentVersion !== version.tag"
+              @click="openIpfsVersion(version.ipfsHash)"
+              class="ipfs-button"
+            >
+              Abrir no IPFS
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="versions.length === 0" class="empty-state">
+        <p class="text-gray-400">Nenhuma versão cadastrada ainda.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16 px-4;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4 mb-12;
+}
+
+.text {
+  @apply text-white text-center;
+}
+
+.versions-container {
+  @apply w-full max-w-4xl space-y-4;
+}
+
+.version-card {
+  @apply bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-amber-500 transition-colors;
+}
+
+.version-header {
+  @apply flex items-center justify-between mb-4;
+}
+
+.version-tag {
+  @apply text-2xl font-bold text-white;
+}
+
+.current-badge {
+  @apply px-3 py-1 bg-amber-500 text-gray-900 text-xs font-semibold rounded-full;
+}
+
+.version-info {
+  @apply space-y-3;
+}
+
+.version-date {
+  @apply text-gray-300 text-sm;
+}
+
+.label {
+  @apply text-gray-400 font-medium;
+}
+
+.version-description {
+  @apply text-gray-300 text-sm;
+}
+
+.version-actions {
+  @apply flex justify-center sm:justify-start items-center gap-4 pt-2 w-full;
+}
+
+.ipfs-button {
+  @apply px-4 py-2 bg-amber-500 text-gray-900 font-semibold rounded hover:bg-amber-600 transition-colors text-sm;
+}
+
+.ipfs-hash {
+  @apply text-gray-400 text-xs font-mono break-all;
+}
+
+.empty-state {
+  @apply text-center py-12;
+}
+</style>
+
+

tsconfig.config.json

@@ -2,7 +2,6 @@
   "extends": "@vue/tsconfig/tsconfig.node.json",
   "include": [
     "vite.config.*",
-    "vitest.config.*",
     "cypress.config.*",
     "playwright.config.*"
   ],

tsconfig.json

@@ -8,13 +8,13 @@
   ],
   "compilerOptions": {
     "baseUrl": ".",
+    "strict": true,
     "paths": {
       "@/*": [
         "./src/*"
       ]
     },
     "types": [
-      "jest",
       "node"
     ],
     "resolveJsonModule": true,

vite.config.ts

@@ -1,15 +1,29 @@
 import { fileURLToPath, URL } from "node:url";
+import { execSync } from "node:child_process";
 
-import { defineConfig } from "vitest/config";
+import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import svgLoader from "vite-svg-loader";
 
+function getGitTag(): string {
+  try {
+    const tags = execSync("git tag --sort=-version:refname").toString().trim().split("\n");
+    return tags.length > 0 ? tags[0] : "unknown";
+  } catch (fallbackError) {
+    return "";
+  }
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "./",
   build: {
     target: "esnext",
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(getGitTag()),
+  },
   optimizeDeps: {
     esbuildOptions: {
       target: "esnext",
@@ -21,17 +35,6 @@ export default defineConfig({
       },
     },
   },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    coverage: {
-      provider: "c8",
-      all: true,
-      src: ["./src"],
-      exclude: ["model/**", "**/__tests__/**"],
-      reporter: ["text", "lcov", "html"],
-    },
-  },
   plugins: [vue(), vueJsx(), svgLoader()],
   resolve: {
     alias: {

wagmi.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@wagmi/cli'
+import { hardhat } from '@wagmi/cli/plugins'
+
+export default defineConfig({
+  out: 'src/blockchain/abi.ts',
+  contracts: [],
+  plugins: [
+    hardhat({
+      project: '../p2pix-smart-contracts',
+    }),],
+})