62 changed files with 1108 additions and 16011 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/App.vue
+++ b/src/App.vue
@ -1,25 +1,34 @@
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
-import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
-import ToasterComponent from "@/components/ui/ToasterComponent.vue";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import ToasterComponent from "@/components/ToasterComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
 import injectedModule from "@web3-onboard/injected-wallets";
-import { Networks, DEFAULT_NETWORK } from "@/config/networks";
+import { Networks } from "./model/Networks";
+import { NetworkEnum } from "./model/NetworkEnum";
 import { ref } from "vue";

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

 const web3Onboard = init({
  wallets: [injected],
-  chains: Object.values(Networks).map((network) => ({
-    id: `0x${network.id.toString(16)}`,
-    token: network.nativeCurrency.symbol,
-    label: network.name,
-    rpcUrl: network.rpcUrls.default.http[0],
-  })),
+  chains: [
+    {
+      id: Networks[NetworkEnum.sepolia].chainId,
+      token: "ETH",
+      label: "Sepolia",
+      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,
  },
--- a/src/assets/tokens/brx.svg
+++ b/src/assets/tokens/brx.svg
--- a/src/assets/tokens/brz.svg
+++ b/src/assets/tokens/brz.svg
--- a/src/assets/networks/ethereum.svg
+++ b/src/assets/networks/ethereum.svg
--- a/src/assets/networks/rootstock-testnet.svg
+++ b/src/assets/networks/rootstock-testnet.svg
--- a/src/assets/networks/polygon.svg
+++ b/src/assets/networks/polygon.svg
--- a/src/assets/networks/rootstock.svg
+++ b/src/assets/networks/rootstock.svg
--- a/src/assets/networks/sepolia.svg
+++ b/src/assets/networks/sepolia.svg
--- a/src/blockchain/addresses.ts
+++ b/src/blockchain/addresses.ts
@ -0,0 +1,70 @@
+import { useUser } from "@/composables/useUser";
+import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
+import { createPublicClient, http, type Address } from "viem";
+import { sepolia, rootstockTestnet } from "viem/chains";
+
+const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: Address } } = {
+  [NetworkEnum.sepolia]: {
+    BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
+    // BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
+  },
+  [NetworkEnum.rootstock]: {
+    BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+    // BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+  },
+};
+
+export const getTokenByAddress = (address: Address) => {
+  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
+): Address => {
+  const user = useUser();
+  return Tokens[network ? network : user.networkName.value][
+    token
+  ];
+};
+
+export const getP2PixAddress = (network?: NetworkEnum): Address => {
+  const user = useUser();
+  const possibleP2PixAddresses: { [key in NetworkEnum]: Address } = {
+    [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) => {
+  const chain = network === NetworkEnum.sepolia ? sepolia : rootstockTestnet;
+  return createPublicClient({
+    chain,
+    transport: http(getProviderUrl(network)),
+  });
+};
+
+export const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
+  return Number(networkChain) in NetworkEnum;
+};
--- a/src/blockchain/buyerMethods.ts
+++ b/src/blockchain/buyerMethods.ts
@ -1,10 +1,18 @@
 import { getContract } from "./provider";
-import { ChainContract } from "viem";
+import { getTokenAddress } from "./addresses";
 import {
+  bytesToHex,
+  encodeAbiParameters,
+  keccak256,
+  parseAbiParameters,
  parseEther,
+  stringToBytes,
+  stringToHex,
+  toBytes,
  type Address,
  type TransactionReceipt,
 } from "viem";
+import type { TokenEnum } from "@/model/NetworkEnum";

 export const addLock = async (
  sellerAddress: Address,
@ -36,7 +44,7 @@ export const addLock = async (

 export const withdrawDeposit = async (
  amount: string,
-  token: Address
+  token: TokenEnum
 ): Promise<boolean> => {
  const { address, abi, wallet, client, account } = await getContract();

@ -44,11 +52,13 @@ export const withdrawDeposit = async (
    throw new Error("Wallet not connected");
  }

+  const tokenAddress = getTokenAddress(token);
+
  const { request } = await client.simulateContract({
    address,
    abi,
    functionName: "withdraw",
-    args: [token, parseEther(amount), []],
+    args: [tokenAddress, parseEther(amount), []],
    account
  });

--- a/src/blockchain/events.ts
+++ b/src/blockchain/events.ts
@ -1,13 +1,14 @@
 import { useUser } from "@/composables/useUser";
 import { formatEther, toHex, stringToHex } from "viem";
 import type { PublicClient, Address } from "viem";
-import { Networks } from "@/config/networks";
+
 import { getContract } from "./provider";
+import { getP2PixAddress, getTokenAddress } from "./addresses";
 import { p2PixAbi } from "./abi"
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { NetworkConfig } from "@/model/NetworkEnum";
+import { getNetworkSubgraphURL, NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
-import { ChainContract } from "viem";
+import type { LockStatus } from "@/model/LockStatus"

 const getNetworksLiquidity = async (): Promise<void> => {
  const user = useUser();
@ -15,10 +16,12 @@ const getNetworksLiquidity = async (): Promise<void> => {

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

-  for (const network of Object.values(Networks)) {
+  for (const network of Object.values(NetworkEnum).filter(
+    (v) => !isNaN(Number(v))
+  )) {
    const deposits = await getValidDeposits(
-      user.network.value.tokens[user.selectedToken.value].address,
-      network
+      getTokenAddress(user.selectedToken.value),
+      Number(network)
    );
    if (deposits) depositLists.push(deposits);
  }
@ -59,7 +62,7 @@ const getParticipantID = async (

 const getValidDeposits = async (
  token: Address,
-  network: NetworkConfig,
+  network: NetworkEnum,
  contractInfo?: { client: PublicClient; address: Address }
 ): Promise<ValidDeposit[]> => {
  let client: PublicClient, abi;
@ -71,6 +74,9 @@ const getValidDeposits = async (
    ({ abi, client } = await getContract(true));
  }

+  // TODO: Remove this once we have a subgraph for rootstock
+  if (network === NetworkEnum.rootstock) return [];
+
  const body = {
    query: `
      {
@ -84,7 +90,7 @@ const getValidDeposits = async (
  `,
  };

-  const depositLogs = await fetch( network.subgraphUrls[0], {
+  const depositLogs = await fetch(getNetworkSubgraphURL(network), {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
@ -94,10 +100,6 @@ 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<Address, boolean>, deposit: any) => {
@ -117,7 +119,7 @@ const getValidDeposits = async (
  const sellersList = Object.keys(uniqueSellers) as Address[];
  // Use multicall to batch all getBalance requests
  const balanceCalls = sellersList.map((seller) => ({
-    address: (network.contracts?.p2pix as ChainContract).address,
+    address: getP2PixAddress(network),
    abi,
    functionName: "getBalance",
    args: [seller, token],
--- a/src/blockchain/provider.ts
+++ b/src/blockchain/provider.ts
@ -1,5 +1,6 @@
 import { p2PixAbi } from "./abi";
 import { updateWalletStatus } from "./wallet";
+import { getProviderUrl, getP2PixAddress } from "./addresses";
 import {
  createPublicClient,
  createWalletClient,
@ -8,19 +9,17 @@ import {
  PublicClient,
  WalletClient,
 } from "viem";
+import { sepolia, rootstockTestnet } from "viem/chains";
 import { useUser } from "@/composables/useUser";
-import type { NetworkConfig } from "@/model/NetworkEnum";
-import type { ChainContract } from "viem";

 let walletClient: WalletClient | null = null;

 const getPublicClient = (): PublicClient => {
    const user = useUser();
-    const rpcUrl = (user.network.value as NetworkConfig).rpcUrls.default.http[0];
-    const chain = user.network.value;
-
+    const rpcUrl = getProviderUrl();
    return createPublicClient({
-      chain,
+      chain:
+        Number(user.networkName.value) === sepolia.id ? sepolia : rootstockTestnet,
      transport: http(rpcUrl),
    });
 };
@ -31,8 +30,7 @@ const getWalletClient = (): WalletClient | null => {

 const getContract = async (onlyRpcProvider = false) => {
  const client = getPublicClient();
-  const user = useUser();
-  const address = (user.network.value.contracts?.p2pix as ChainContract).address;
+  const address = getP2PixAddress();
  const abi = p2PixAbi;
  const wallet = onlyRpcProvider ? null : getWalletClient();

@ -47,7 +45,8 @@ const getContract = async (onlyRpcProvider = false) => {

 const connectProvider = async (p: any): Promise<void> => {
  const user = useUser();
-  const chain = user.network.value;
+  const chain =
+    Number(user.networkName.value) === sepolia.id ? sepolia : rootstockTestnet;

  const [account] = await p!.request({ method: "eth_requestAccounts" });

--- a/src/blockchain/sellerMethods.ts
+++ b/src/blockchain/sellerMethods.ts
@ -1,15 +1,12 @@
 import { getContract, getPublicClient, getWalletClient } from "./provider";
-import { parseEther, toHex, ChainContract } from "viem";
+import { getTokenAddress, getP2PixAddress } from "./addresses";
+import { parseEther, toHex } from "viem";
+import { sepolia, rootstockTestnet } from "viem/chains";
+
 import { mockTokenAbi } from "./abi";
 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();
@ -24,7 +21,7 @@ const approveTokens = async (participant: Participant): Promise<any> => {
  const [account] = await walletClient.getAddresses();

  // Get token address
-  const tokenAddress = user.network.value.tokens[user.selectedToken.value].address;
+  const tokenAddress = getTokenAddress(user.selectedToken.value);

  // Check if the token is already approved
  const allowance = await publicClient.readContract({
@ -36,7 +33,7 @@ const approveTokens = async (participant: Participant): Promise<any> => {

  if ( allowance < parseEther(participant.offer.toString()) ) {
    // Approve tokens
-    const chain = user.network.value;
+    const chain = user.networkId.value === sepolia.id ? sepolia : rootstockTestnet;
    const hash = await walletClient.writeContract({
      address: tokenAddress,
      abi: mockTokenAbi,
@ -68,15 +65,15 @@ const addDeposit = async (): Promise<any> => {
  if (!sellerId.id) {
    throw new Error("Failed to create participant");
  }
-  const chain = user.network.value;
+  const chain = user.networkId.value === sepolia.id ? sepolia : rootstockTestnet;
  const hash = await walletClient.writeContract({
    address,
    abi,
    functionName: "deposit",
    args: [
-      user.network.value.id + "-" + sellerId.id,
+      user.networkId.value + "-" + sellerId.id,
      toHex("", { size: 32 }),
-      user.network.value.tokens[user.selectedToken.value].address,
+      getTokenAddress(user.selectedToken.value),
      parseEther(user.seller.value.offer.toString()),
      true,
    ],
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@ -1,7 +1,8 @@
-import { formatEther, type Address } from "viem";
+import { formatEther, hexToString, type Address } from "viem";
 import { useUser } from "@/composables/useUser";

 import { getPublicClient, getWalletClient, getContract } from "./provider";
+import { getTokenAddress } from "./addresses";

 import { getValidDeposits, getUnreleasedLockById } from "./events";

@ -9,6 +10,7 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import { LockStatus } from "@/model/LockStatus";
+import { getNetworkSubgraphURL } from "@/model/NetworkEnum";

 export const updateWalletStatus = async (): Promise<void> => {
  const user = useUser();
@ -34,8 +36,8 @@ export const listValidDepositTransactionsByWalletAddress = async (
 ): Promise<ValidDeposit[]> => {
  const user = useUser();
  const walletDeposits = await getValidDeposits(
-    user.network.value.tokens[user.selectedToken.value].address,
-    user.network.value
+    getTokenAddress(user.selectedToken.value),
+    user.networkName.value
  );
  if (walletDeposits) {
    return walletDeposits
@ -65,7 +67,7 @@ export const listAllTransactionByWalletAddress = async (
  const user = useUser();

  // Get the current network for the subgraph URL
-  const network = user.network.value;
+  const network = user.networkName.value;

  // Query subgraph for all relevant transactions
  const subgraphQuery = {
@ -108,7 +110,7 @@ export const listAllTransactionByWalletAddress = async (
    `,
  };

-  const response = await fetch(network.subgraphUrls[0], {
+  const response = await fetch(getNetworkSubgraphURL(network), {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
@ -198,7 +200,7 @@ export const listReleaseTransactionByWalletAddress = async (
  walletAddress: Address
 ) => {
  const user = useUser();
-  const network = user.network.value;
+  const network = user.networkName.value;

  // Query subgraph for release transactions
  const subgraphQuery = {
@ -217,7 +219,7 @@ export const listReleaseTransactionByWalletAddress = async (
  };

  // Fetch data from subgraph
-  const response = await fetch(network.subgraphUrls[0], {
+  const response = await fetch(getNetworkSubgraphURL(network), {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
@ -261,7 +263,7 @@ export const listReleaseTransactionByWalletAddress = async (

 const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
  const user = useUser();
-  const network = user.network.value;
+  const network = user.networkName.value;

  // Query subgraph for lock added transactions
  const subgraphQuery = {
@ -282,7 +284,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {

  try {
    // Fetch data from subgraph
-    const response = await fetch(network.subgraphUrls[0], {
+    const response = await fetch(getNetworkSubgraphURL(network), {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@ -330,7 +332,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {

 const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
  const user = useUser();
-  const network = user.network.value;
+  const network = user.networkName.value;

  // Query subgraph for lock added transactions where seller matches
  const subgraphQuery = {
@ -352,7 +354,7 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {

  try {
    // Fetch data from subgraph
-    const response = await fetch(network.subgraphUrls[0], {
+    const response = await fetch(getNetworkSubgraphURL(network), {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@ -461,3 +463,18 @@ export const getActiveLockAmount = async (
    return total;
  }, 0);
 };
+
+export const getSellerParticipantId = async (
+  sellerAddress: Address,
+  tokenAddress: Address
+): Promise<string> => {
+  const { address, abi, client } = await getContract();
+
+  const participantId = await client.readContract({
+    address,
+    abi,
+    functionName: "getPixTarget",
+    args: [sellerAddress, tokenAddress],
+  });
+  return hexToString(participantId);
+};
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@ -5,12 +5,12 @@ import {
  listAllTransactionByWalletAddress,
  listValidDepositTransactionsByWalletAddress,
 } from "@/blockchain/wallet";
-import CustomButton from "@/components/ui/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/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 "@/components/ListingComponent/ListingComponent.vue";
+import ListingComponent from "../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.network.value.tokens[user.selectedToken.value].address);
+    const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
    if (withdraw) {
      console.log("Saque realizado!");
      await getWalletTransactions();
--- a/src/components/CustomAlert/CustomAlert.vue
+++ b/src/components/CustomAlert/CustomAlert.vue
--- a/src/components/CustomButton/CustomButton.vue
+++ b/src/components/CustomButton/CustomButton.vue
@ -0,0 +1,26 @@
+<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>
--- a/src/components/CustomModal/CustomModal.vue
+++ b/src/components/CustomModal/CustomModal.vue
--- a/src/components/Explorer/AnalyticsCard.vue
+++ b/src/components/Explorer/AnalyticsCard.vue
@ -1,73 +0,0 @@
-<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>
--- a/src/components/Explorer/TransactionTable.vue
+++ b/src/components/Explorer/TransactionTable.vue
@ -1,279 +0,0 @@
-<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>
--- a/src/components/ListingComponent/BalanceCard.vue
+++ b/src/components/ListingComponent/BalanceCard.vue
@ -1,215 +0,0 @@
-<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>
-
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@ -1,11 +1,13 @@
 <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 } from "vue";
-import SpinnerComponent from "../ui/SpinnerComponent.vue";
-import BalanceCard from "./BalanceCard.vue";
-import TransactionCard from "./TransactionCard.vue";
+import { ref, watch, onMounted } from "vue";
+import SpinnerComponent from "../SpinnerComponent.vue";
+import { decimalCount } from "@/utils/decimalCount";
+import { debounce } from "@/utils/debounce";
+import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";

 const user = useUser();

@ -20,10 +22,80 @@ 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 callWithdraw = (amount: string) => {
-  emit("depositWithdrawn", amount);
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
+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 => {
@ -31,7 +103,10 @@ const showInitialItems = (): void => {
 };

 const openEtherscanUrl = (transactionHash: string): void => {
-  const networkUrl = user.network.value.blockExplorers?.default.url;
+  const networkUrl =
+    user.networkName.value == NetworkEnum.sepolia
+      ? "sepolia.etherscan.io"
+      : "mumbai.polygonscan.com";
  const url = `https://${networkUrl}/tx/${transactionHash}`;
  window.open(url, "_blank");
 };
@ -43,6 +118,31 @@ 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;
@ -67,23 +167,179 @@ showInitialItems();
    <SpinnerComponent width="8" height="8"></SpinnerComponent>
  </div>
  <div class="main-container max-w-md" v-else>
-    <BalanceCard
+    <div
+      class="w-full bg-white p-4 sm:p-6 rounded-lg"
      v-if="props.validDeposits.length > 0"
-      :valid-deposits="props.validDeposits"
-      :active-lock-amount="activeLockAmount"
-      :selected-token="user.selectedToken.value"
-      @withdraw="callWithdraw"
-    />
+    >
+      <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">
+            {{ getRemaining() }} {{ user.selectedToken.value }}
+          </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)} ${
+                user.selectedToken.value
+              } 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>

-    <TransactionCard
+          <div
+            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"
-      :transaction="item"
-      :network-name="user.network.value.name"
-      @open-explorer="openEtherscanUrl"
-    />
-
+    >
+      <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">
+            {{ 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 class="flex flex-col items-center justify-center">
+          <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="
@ -93,14 +349,14 @@ showInitialItems();
    >
      <button
        type="button"
-        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"
+        class="text-white font-semibold"
        @click="loadMore()"
      >
        Carregar mais
      </button>
-      <span class="text-gray-300 text-sm">
-        {{ itemsToShow.length }} de {{ props.walletTransactions.length }}
-        transações
+      <span class="text-gray-300">
+        ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
+        transações )
      </span>
    </div>

@ -111,5 +367,63 @@ showInitialItems();
 </template>

 <style scoped>
-/* Minimal styles - most styles moved to child components */
+.page {
+  @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"] {
+  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>
--- a/src/components/ListingComponent/TransactionCard.vue
+++ b/src/components/ListingComponent/TransactionCard.vue
@ -1,124 +0,0 @@
-<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].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 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>
-      </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>
-
--- a/src/components/LoadingComponent/LoadingComponent.vue
+++ b/src/components/LoadingComponent/LoadingComponent.vue
--- a/src/components/BuyerSteps/QrCodeComponent.vue
+++ b/src/components/BuyerSteps/QrCodeComponent.vue
@ -1,10 +1,10 @@
 <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 CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomModal from "@/components//CustomModal/CustomModal.vue";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import { createSolicitation, getSolicitation, type Offer } from "@/utils/bbPay";
-import { getParticipantID } from "@/blockchain/events";
+import { getSellerParticipantId } from "@/blockchain/wallet";
 import { getUnreleasedLockById } from "@/blockchain/events";
 import QRCode from "qrcode";

@ -22,8 +22,6 @@ 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) => {
@ -82,36 +80,13 @@ const startPolling = () => {
  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(
+    const participantId = await getSellerParticipantId(
      sellerAddress,
      tokenAddress
    );
@ -144,10 +119,6 @@ onUnmounted(() => {
    clearInterval(pollingInterval.value);
    pollingInterval.value = null;
  }
-  if (copyFeedbackTimeout.value) {
-    clearTimeout(copyFeedbackTimeout.value);
-    copyFeedbackTimeout.value = null;
-  }
 });
 </script>

@ -185,24 +156,13 @@ onUnmounted(() => {
            {{ 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>
+        <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="releaseSignature === ''"
@ -280,15 +240,4 @@ 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>
--- a/src/components/BuyerSteps/BuyerSearchComponent.vue
+++ b/src/components/BuyerSteps/BuyerSearchComponent.vue
@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useUser } from "@/composables/useUser";
-import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
-import CustomButton from "@/components/ui/CustomButton.vue";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import CustomButton from "@/components/CustomButton/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 { onClickOutside } from "@vueuse/core";
-import { Networks } from "@/config/networks";
+
 import { TokenEnum } from "@/model/NetworkEnum";

 // Store reference
@ -18,7 +19,7 @@ const selectTokenToggle = ref<boolean>(false);

 const {
  walletAddress,
-  network,
+  networkName,
  selectedToken,
  depositsValidList,
  loadingNetworkLiquidity,
@ -50,7 +51,7 @@ const connectAccount = async (): Promise<void> => {

 const emitConfirmButton = async (): Promise<void> => {
  const deposit = selectedDeposits.value?.find(
-    (d) => d.network === network.value
+    (d) => d.network === Number(networkName.value)
  );
  if (!deposit) return;
  deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
@ -98,7 +99,7 @@ const verifyLiquidity = (): void => {
  );
  selectedDeposits.value = selDeposits;
  hasLiquidity.value = !!selDeposits.find(
-    (d) => d.network === network.value
+    (d) => d.network === Number(networkName.value)
  );
  enableOrDisableConfirmButton();
 };
@ -109,7 +110,7 @@ const enableOrDisableConfirmButton = (): void => {
    return;
  }

-  if (!selectedDeposits.value.find((d) => d.network === network.value)) {
+  if (!selectedDeposits.value.find((d) => d.network === networkName.value)) {
    enableConfirmButton.value = false;
    return;
  }
@ -117,7 +118,7 @@ const enableOrDisableConfirmButton = (): void => {
  enableConfirmButton.value = true;
 };

-watch(network, (): void => {
+watch(networkName, (): void => {
  verifyLiquidity();
  enableOrDisableConfirmButton();
 });
@ -233,22 +234,22 @@ const handleSubmit = async (e: Event): Promise<void> => {
          <div class="flex gap-2">
            <img
              alt="Rootstock image"
-              src="@/assets/networks/rootstock.svg?url"
+              src="@/assets/rootstock.svg?url"
              width="24"
              height="24"
              v-if="
                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == Networks.rootstock)
+                selectedDeposits.find((d) => d.network == NetworkEnum.rootstock)
              "
            />
            <img
              alt="Ethereum image"
-              src="@/assets/networks/ethereum.svg?url"
+              src="@/assets/ethereum.svg?url"
              width="24"
              height="24"
              v-if="
                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == Networks.sepolia)
+                selectedDeposits.find((d) => d.network == NetworkEnum.sepolia)
              "
            />
          </div>
--- a/src/components/SellerSteps/SellerComponent.vue
+++ b/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/ui/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/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.network.value.id,
+    chainID: user.networkId.value,
    identification: processedIdentification,
    bankIspb: selectedBank.value?.ISPB,
    accountType: accountType.value,
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/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/ui/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/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/networks/polygon.svg?url"
+              src="@/assets/polygon.svg?url"
              width="24"
              height="24"
            />
            <img
              alt="Ethereum image"
-              src="@/assets/networks/ethereum.svg?url"
+              src="@/assets/ethereum.svg?url"
              width="24"
              height="24"
            />
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CustomButton from "@/components/ui/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";

 // Emits
 const emit = defineEmits(["sendNetwork"]);
--- a/src/components/ui/SpinnerComponent.vue
+++ b/src/components/ui/SpinnerComponent.vue
--- a/src/components/ui/ToasterComponent.vue
+++ b/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 "@/config/networks";
+import { Networks } from "../model/Networks";
 import { useUser } from "@/composables/useUser";

 const { connectedWallet } = useOnboard();
 const user = useUser();
-const { network } = user;
+const { networkId, networkName } = user;

 const isWrongNetwork = ref(false);
-const targetNetworkName = computed(() => network.value.name);
+const targetNetworkName = computed(() => Networks[networkName.value].chainName);

 const checkNetwork = () => {
  if (connectedWallet.value) {
    const chainId = connectedWallet.value.chains[0].id;
-    isWrongNetwork.value = Number(chainId) !== network.value.id;
+    isWrongNetwork.value = Number(chainId) !== networkId.value;
  } else {
    isWrongNetwork.value = false; // No wallet connected yet
  }
@ -23,12 +23,11 @@ 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: `0x${chainId}`,
+            chainId: Networks[networkName.value].chainId,
          },
        ],
      });
@ -40,7 +39,7 @@ const switchNetwork = async () => {

 onMounted(checkNetwork);
 watch(connectedWallet, checkNetwork);
-watch(network, checkNetwork, { immediate: true });
+watch(networkId, checkNetwork, { immediate: true });
 </script>

 <template>
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@ -2,8 +2,10 @@
 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 "@/config/networks";
+import { Networks } from "@/model/Networks";
+
 import { useOnboard } from "@web3-onboard/vue";

 import ChevronDown from "@/assets/chevronDown.svg";
@ -11,12 +13,10 @@ 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";

 // Use the new composable
 const user = useUser();
-const { walletAddress, sellerView, network } = user;
+const { walletAddress, sellerView, networkId } = user;

 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@ -40,20 +40,20 @@ watch(connectedWallet, async (newVal: any) => {
 });

 watch(connectedChain, (newVal: any) => {
-  // Check if connected chain is valid, otherwise default to Sepolia
+  // Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
  if (
    !newVal ||
    !Object.values(Networks).some(
-      (network) => network.id === Number(newVal.id)
+      (network) => Number(network.chainId) === Number(newVal.id)
    )
  ) {
    console.log(
      "Invalid or unsupported network detected, defaulting to Sepolia"
    );
-    user.setNetwork(DEFAULT_NETWORK);
+    user.setNetworkId(user.networkId.value);
    return;
  }
-  user.setNetworkById(newVal?.id);
+  user.setNetworkId(newVal?.id);
 });

 const formatWalletAddress = (): string => {
@ -78,15 +78,14 @@ const closeMenu = (): void => {
  menuOpenToggle.value = false;
 };

-const networkChange = async (network: NetworkConfig): Promise<void> => {
+const networkChange = async (network: NetworkEnum): Promise<void> => {
  currencyMenuOpenToggle.value = false;
-  const chainId = network.id.toString(16)
  try {
    await setChain({
-      chainId: `0x${chainId}`,
+      chainId: Networks[network].chainId,
      wallet: connectedWallet.value?.label || "",
    });
-    user.setNetwork(network);
+    user.setNetworkId(network);
  } catch (error) {
    console.log("Error changing network", error);
  }
@ -155,19 +154,6 @@ onClickOutside(infoMenuRef, () => {
          >
            <div class="mt-2">
              <div class="bg-white rounded-md z-10 -left-36 w-52">
-                <RouterLink
-                  :to="'/explore'"
-                  class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                >
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
-                  >
-                    Explorar Transações
-                  </span>
-                </RouterLink>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
                  <span
                    class="text-gray-900 py-4 text-end font-semibold text-sm"
@ -272,7 +258,7 @@ onClickOutside(infoMenuRef, () => {
        >
          <img
            alt="Choosed network image"
-            :src="getNetworkImage(network.name)"
+            :src="getNetworkImage(NetworkEnum[user.networkName.value])"
            height="24"
            width="24"
          />
@ -281,7 +267,9 @@ onClickOutside(infoMenuRef, () => {
            :class="{ '!text-gray-900': currencyMenuOpenToggle }"
          >
            {{
-              user.network.value.name || "Invalid Chain"
+              Networks[user.networkName.value]
+                ? Networks[user.networkName.value].chainName
+                : "Invalid Chain"
            }}
          </span>
          <div
@ -304,20 +292,20 @@ onClickOutside(infoMenuRef, () => {
              class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
            >
              <div
-                v-for="network in Networks"
-                :key="network.id"
+                v-for="(chainData, network) in Networks"
+                :key="network"
                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="network.name + ' image'"
+                  :alt="chainData.chainName + ' image'"
                  width="20"
                  height="20"
-                  :src="getNetworkImage(network.name)"
+                  :src="getNetworkImage(NetworkEnum[network])"
                  class="mr-2 ml-1"
                />
                <span class="text-gray-900 font-semibold text-sm">
-                  {{ network.name }}
+                  {{ chainData.chainName }}
                </span>
              </div>
              <div class="w-full flex justify-center">
@ -425,9 +413,6 @@ onClickOutside(infoMenuRef, () => {
          <div class="w-full flex justify-center">
            <hr class="w-4/5" />
          </div>
-          <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
@ -477,19 +462,19 @@ onClickOutside(infoMenuRef, () => {
      <div class="pl-4 mt-2 h-full">
        <div class="bg-white rounded-md z-10 h-full">
          <div
-            v-for="network in Networks"
-            :key="network.id"
+            v-for="(chainData, network) in Networks"
+            :key="network"
            class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
            @click="networkChange(network)"
          >
            <img
-              :alt="network.name + 'image'"
+              :alt="chainData.chainName + 'image'"
              width="20"
              height="20"
-              :src="getNetworkImage(network.name)"
+              :src="getNetworkImage(NetworkEnum[network])"
            />
            <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              {{ network.name }}
+              {{ chainData.chainName }}
            </span>
          </div>
        </div>
--- a/src/components/ui/AmountInput.vue
+++ b/src/components/ui/AmountInput.vue
@ -1,208 +0,0 @@
-<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>
-
--- a/src/components/ui/BankSelector.vue
+++ b/src/components/ui/BankSelector.vue
@ -1,137 +0,0 @@
-<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>
-
--- a/src/components/ui/CustomButton.vue
+++ b/src/components/ui/CustomButton.vue
@ -1,161 +0,0 @@
-<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>
--- a/src/components/ui/Dropdown.vue
+++ b/src/components/ui/Dropdown.vue
@ -1,248 +0,0 @@
-<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>
-
--- a/src/components/ui/ErrorMessage.vue
+++ b/src/components/ui/ErrorMessage.vue
@ -1,55 +0,0 @@
-<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>
-
--- a/src/components/ui/FormCard.vue
+++ b/src/components/ui/FormCard.vue
@ -1,55 +0,0 @@
-<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>
-
--- a/src/components/ui/IconButton.vue
+++ b/src/components/ui/IconButton.vue
@ -1,147 +0,0 @@
-<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>
-
--- a/src/components/ui/InfoTooltip.vue
+++ b/src/components/ui/InfoTooltip.vue
@ -1,91 +0,0 @@
-<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>
-
--- a/src/components/ui/LoadingState.vue
+++ b/src/components/ui/LoadingState.vue
@ -1,60 +0,0 @@
-<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>
-
--- a/src/components/ui/NetworkBadges.vue
+++ b/src/components/ui/NetworkBadges.vue
@ -1,72 +0,0 @@
-<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>
-
--- a/src/components/ui/NetworkSelector.vue
+++ b/src/components/ui/NetworkSelector.vue
@ -1,50 +0,0 @@
-<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>
-
--- a/src/components/ui/PageHeader.vue
+++ b/src/components/ui/PageHeader.vue
@ -1,66 +0,0 @@
-<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>
-
--- a/src/components/ui/StatusBadge.vue
+++ b/src/components/ui/StatusBadge.vue
@ -1,50 +0,0 @@
-<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>
-
--- a/src/components/ui/TokenSelector.vue
+++ b/src/components/ui/TokenSelector.vue
@ -1,48 +0,0 @@
-<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>
-
--- a/src/components/ui/WalletConnectButton.vue
+++ b/src/components/ui/WalletConnectButton.vue
@ -1,152 +0,0 @@
-<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>
-
--- a/src/composables/useGraphQL.ts
+++ b/src/composables/useGraphQL.ts
@ -1,475 +0,0 @@
-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
-  };
-}
--- a/src/composables/useUser.ts
+++ b/src/composables/useUser.ts
@ -1,14 +1,15 @@
 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<Address | null>(null);
 const balance = ref("");
-const network = ref(DEFAULT_NETWORK);
-const selectedToken = ref<TokenEnum>(TokenEnum.BRZ);
+const networkId = ref(11155111);
+const networkName = ref(NetworkEnum.sepolia);
+const selectedToken = ref(TokenEnum.BRZ);
 const loadingLock = ref(false);
 const sellerView = ref(false);
 const depositsValidList = ref<ValidDeposit[]>([]);
@ -31,29 +32,9 @@ export function useUser() {
    selectedToken.value = token;
  };

-  const setNetwork = (chain: NetworkConfig) => {
-    network.value = chain;
-  };
-
-  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 setNetworkId = (network: string | number) => {
+    networkName.value = NetworkById(network) || NetworkEnum.sepolia;
+    networkId.value = Number(network);
  };

  const setLoadingLock = (isLoading: boolean) => {
@ -95,7 +76,8 @@ export function useUser() {
    // State
    walletAddress,
    balance,
-    network,
+    networkId,
+    networkName,
    selectedToken,
    loadingLock,
    sellerView,
@ -109,8 +91,7 @@ export function useUser() {
    setWalletAddress,
    setBalance,
    setSelectedToken,
-    setNetwork,
-    setNetworkById,
+    setNetworkId,
    setLoadingLock,
    setSellerView,
    setDepositsValidList,
--- a/src/config/networks.ts
+++ b/src/config/networks.ts
@ -1,30 +0,0 @@
-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;
--- a/src/model/NetworkEnum.ts
+++ b/src/model/NetworkEnum.ts
@ -1,10 +1,18 @@
-import type { Chain, ChainContract } from "viem";
+export enum NetworkEnum {
+  sepolia = 11155111,
+  rootstock = 31,
+}
+
+export const getNetworkSubgraphURL = (network: NetworkEnum) => {
+  const networkMap: Record<NetworkEnum, string> = {
+    [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || "",
+    [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_SUBGRAPH_URL || "",
+  };
+
+  return networkMap[network] || "";
+};

 export enum TokenEnum {
-  BRZ = 'BRZ',
+  BRZ = "BRZ",
  // BRX = 'BRX'
 }
-export type NetworkConfig = Chain & {
-  tokens: Record<TokenEnum, ChainContract>,
-  subgraphUrls: string[]
-};
--- a/src/model/Networks.ts
+++ b/src/model/Networks.ts
@ -0,0 +1,37 @@
+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/"],
+  },
+};
--- a/src/model/ValidDeposit.ts
+++ b/src/model/ValidDeposit.ts
@ -1,5 +1,5 @@
+import { NetworkEnum } from "./NetworkEnum";
 import type { Address } from "viem";
-import type { NetworkConfig } from "@/model/NetworkEnum";

 export type ValidDeposit = {
  token: Address;
@ -7,6 +7,6 @@ export type ValidDeposit = {
  remaining: number;
  seller: Address;
  participantID: string;
-  network: NetworkConfig;
+  network: NetworkEnum;
  open?: boolean;
 };
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,14 +1,11 @@
-import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHistory } 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";

 const router = createRouter({
-  history: import.meta.env.MODE === 'production' && import.meta.env.BASE_URL === './' 
-    ? createWebHashHistory() 
-    : createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
@ -36,11 +33,6 @@ const router = createRouter({
      name: "faq",
      component: FaqView,
    },
-    {
-      path: "/explore",
-      name: "explore",
-      component: ExploreView,
-    },
  ],
 });

--- a/src/utils/imagesPath.ts
+++ b/src/utils/imagesPath.ts
@ -1,11 +1,30 @@
 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 => {
-  const normalizedName = networkName.toLowerCase().replace(/[^a-z0-9]/g, '-');
-  return new URL(`../assets/networks/${normalizedName}.svg`, import.meta.url).href;
+  try {
+    const path = Object.keys(imagesPath).find((key) =>
+      key.endsWith(`${networkName.toLowerCase()}.svg`)
+    );
+    return path ? imagesPath[path] : "";
+  } catch (error) {
+    console.error("Error fetching network image");
+    const path = Object.keys(imagesPath).find((key) =>
+      key.endsWith(`invalidIcon.svg`)
+    );
+    return path ? imagesPath[path] : "";
+    return "";
+  }
 };

 export const getTokenImage = (tokenName: TokenEnum): string => {
-  return new URL(`../assets/tokens/${tokenName.toLowerCase()}.svg`, import.meta.url).href;
+  const path = Object.keys(imagesPath).find((key) =>
+    key.endsWith(`${tokenName.toLowerCase()}.svg`)
+  );
+  return path ? imagesPath[path] : "";
 };
--- a/src/views/ExploreView.vue
+++ b/src/views/ExploreView.vue
@ -1,163 +0,0 @@
-<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>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,16 +1,16 @@
 <script setup lang="ts">
-import SearchComponent from "@/components/BuyerSteps/BuyerSearchComponent.vue";
-import LoadingComponent from "@/components/ui/LoadingComponent.vue";
-import BuyConfirmedComponent from "@/components/BuyerSteps/BuyConfirmedComponent.vue";
+import SearchComponent from "@/components/SearchComponent.vue";
+import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
 import { ref, onMounted, watch } from "vue";
 import { useUser } from "@/composables/useUser";
-import QrCodeComponent from "@/components/BuyerSteps/QrCodeComponent.vue";
+import QrCodeComponent from "@/components/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/ui/CustomAlert.vue";
+import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 import { getSolicitation } from "@/utils/bbPay";
 import type { Address } from "viem";

@ -24,7 +24,7 @@ const user = useUser();
 user.setSellerView(false);

 // States
-const { loadingLock, walletAddress, network } = user;
+const { loadingLock, walletAddress, networkName } = user;
 const flowStep = ref<Step>(Step.Search);
 const participantID = ref<string>();
 const sellerAddress = ref<Address>();
@ -103,7 +103,7 @@ if (paramLockID) {
    await checkForUnreleasedLocks();
  });

-  watch(network, async () => {
+  watch(networkName, async () => {
    if (walletAddress.value) await checkForUnreleasedLocks();
  });
 }
--- a/src/views/ManageBidsView.vue
+++ b/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/ui/LoadingComponent.vue";
-import CustomAlert from "@/components/ui/CustomAlert.vue";
+import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import CustomAlert from "@/components/CustomAlert/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, network, selectedToken } = user;
+const { walletAddress, networkName, selectedToken } = user;
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(false);

@ -29,9 +29,7 @@ const callWithdraw = async (amount: string) => {
    loadingWithdraw.value = true;
    let withdraw;
    try {
-      withdraw = await withdrawDeposit(
-          amount,
-          network.value.tokens[selectedToken.value].address);
+      withdraw = await withdrawDeposit(amount, selectedToken.value);
    } catch {
      loadingWithdraw.value = false;
    }
@ -81,7 +79,7 @@ watch(walletAddress, async () => {
  await getWalletTransactions();
 });

-watch(network, async () => {
+watch(networkName, async () => {
  await getWalletTransactions();
 });
 </script>
--- a/src/views/SellerView.vue
+++ b/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/ui/LoadingComponent.vue";
+import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import { useUser } from "@/composables/useUser";
 import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
-import CustomAlert from "@/components/ui/CustomAlert.vue";
+import CustomAlert from "@/components/CustomAlert/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="String(user.sellerId.value)"
+        :sellerId="user.sellerId.value"
        :offer="Number(user.seller.value.offer)"
        :selected-token="user.selectedToken.value"
        v-if="!loading"
--- a/vite.config.ts
+++ b/vite.config.ts
@ -7,7 +7,6 @@ import svgLoader from "vite-svg-loader";

 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "./",
  build: {
    target: "esnext",
  },
--- a/yarn.lock
+++ b/yarn.lock