add basic error handling on subgraph queries

feat: add footer with app version

env.d.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p2pix-front-end",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "scripts": {
     "start": "vite --host=0.0.0.0 --port 3000",
     "build": "run-p type-check build-only",

src/App.vue

@@ -15,7 +15,7 @@ const targetNetwork = ref(DEFAULT_NETWORK);
 const web3Onboard = init({
   wallets: [injected],
   chains: Object.values(Networks).map((network) => ({
-    id: network.id,
+    id: `0x${network.id.toString(16)}`,
     token: network.nativeCurrency.symbol,
     label: network.name,
     rpcUrl: network.rpcUrls.default.http[0],
@@ -32,7 +32,7 @@ if (!connectedWallet) {
 </script>
 
 <template>
-  <div class="p-3 sm:p-4 md:p-8">
+  <main class="p-3 sm:p-4 md:p-8">
     <TopBar />
     <RouterView v-slot="{ Component }">
       <template v-if="Component">
@@ -53,5 +53,5 @@ if (!connectedWallet) {
       </template>
     </RouterView>
     <ToasterComponent :targetNetwork="targetNetwork" />
-  </div>
+  </main>
 </template>

src/blockchain/events.ts

@@ -94,6 +94,10 @@ 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) => {

src/blockchain/wallet.ts

@@ -126,6 +126,7 @@ export const listAllTransactionByWalletAddress = async (
       transactions.push({
         token: deposit.token,
         blockNumber: parseInt(deposit.blockNumber),
+        blockTimestamp: parseInt(deposit.blockTimestamp),
         amount: parseFloat(formatEther(BigInt(deposit.amount))),
         seller: deposit.seller,
         buyer: "",
@@ -145,6 +146,7 @@ export const listAllTransactionByWalletAddress = async (
       transactions.push({
         token: lock.token,
         blockNumber: parseInt(lock.blockNumber),
+        blockTimestamp: parseInt(lock.blockTimestamp),
         amount: parseFloat(formatEther(BigInt(lock.amount))),
         seller: lock.seller,
         buyer: lock.buyer,
@@ -162,6 +164,7 @@ export const listAllTransactionByWalletAddress = async (
       transactions.push({
         token: undefined, // Subgraph doesn't provide token in this event, we could enhance this later
         blockNumber: parseInt(release.blockNumber),
+        blockTimestamp: parseInt(release.blockTimestamp),
         amount: -1, // Amount not available in this event
         seller: "",
         buyer: release.buyer,
@@ -179,6 +182,7 @@ export const listAllTransactionByWalletAddress = async (
       transactions.push({
         token: withdrawal.token,
         blockNumber: parseInt(withdrawal.blockNumber),
+        blockTimestamp: parseInt(withdrawal.blockTimestamp),
         amount: parseFloat(formatEther(BigInt(withdrawal.amount))),
         seller: withdrawal.seller,
         buyer: "",
@@ -310,7 +314,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
               buyer: lock.buyer,
               lockID: BigInt(lock.lockID),
               seller: lock.seller,
-              token: lock.token,
+              token: undefined, // Token not available in LockAdded subgraph event
               amount: BigInt(lock.amount),
             },
             // Add other necessary fields to match the original format
@@ -340,7 +344,6 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
           buyer
           lockID
           seller
-          token
           amount
           blockTimestamp
           blockNumber
@@ -380,7 +383,7 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
               buyer: lock.buyer,
               lockID: BigInt(lock.lockID),
               seller: lock.seller,
-              token: lock.token,
+              token: undefined, // Token not available in LockAdded subgraph event
               amount: BigInt(lock.amount),
             },
             // Add other necessary fields to match the original format

src/components/BuyerSteps/BuyerSearchComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useUser } from "@/composables/useUser";
 import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
 import CustomButton from "@/components/ui/CustomButton.vue";
@@ -7,7 +7,7 @@ import { debounce } from "@/utils/debounce";
 import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
-import { getTokenImage } from "@/utils/imagesPath";
+import { getTokenImage, getNetworkImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
 import { Networks } from "@/config/networks";
 import { TokenEnum } from "@/model/NetworkEnum";
@@ -126,6 +126,13 @@ watch(walletAddress, (): void => {
   verifyLiquidity();
 });
 
+const availableNetworks = computed(() => {
+  if (!selectedDeposits.value) return [];
+  return Object.values(Networks).filter((network) =>
+    selectedDeposits.value?.some((d) => d.network.id === network.id)
+  );
+});
+
 // Add form submission handler
 const handleSubmit = async (e: Event): Promise<void> => {
   e.preventDefault();
@@ -159,7 +166,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
           <input
             type="number"
             name="tokenAmount"
-            class="border-none outline-none text-lg text-gray-900"
+            class="border-none outline-none text-lg text-gray-900 sm:flex-1 max-w-[60%]"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,
@@ -169,7 +176,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
             step=".01"
             required
           />
-          <div class="relative overflow-visible">
+          <div class="relative overflow-visible ml-auto sm:ml-0">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -232,24 +239,12 @@ const handleSubmit = async (e: Event): Promise<void> => {
           </p>
           <div class="flex gap-2">
             <img
-              alt="Rootstock image"
-              src="@/assets/rootstock.svg?url"
+              v-for="network in availableNetworks"
+              :key="network.id"
+              :alt="`${network.name} image`"
+              :src="getNetworkImage(network.name)"
               width="24"
               height="24"
-              v-if="
-                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == Networks.rootstockTestnet)
-              "
-            />
-            <img
-              alt="Ethereum image"
-              src="@/assets/ethereum.svg?url"
-              width="24"
-              height="24"
-              v-if="
-                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == Networks.sepolia)
-              "
             />
           </div>
         </div>

src/components/Explorer/AnalyticsCard.vue

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

src/components/Explorer/TransactionTable.vue

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

src/components/ListingComponent/TransactionCard.vue

@@ -29,7 +29,7 @@ const eventName = computed(() => {
 });
 
 const explorerName = computed(() => {
-  return Networks[props.networkName].blockExplorers?.default.name;
+  return Networks[(props.networkName as string).toLowerCase()].blockExplorers?.default.name;
 });
 
 const statusType = computed((): StatusType => {
@@ -56,6 +56,21 @@ const showContinueButton = computed(() => {
   return eventName.value === "Reserva" && props.transaction.lockStatus === 1;
 });
 
+const formattedDate = computed(() => {
+  if (!props.transaction.blockTimestamp) return "";
+  
+  const timestamp = props.transaction.blockTimestamp;
+  const date = new Date(timestamp * 1000);
+  
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  
+  return `${day}/${month}/${year} ${hours}:${minutes}`;
+});
+
 const handleExplorerClick = () => {
   emit("openExplorer", props.transaction.transactionHash);
 };
@@ -71,6 +86,12 @@ const handleExplorerClick = () => {
         <span class="text-xl sm:text-xl leading-7 font-semibold text-gray-900">
           {{ transaction.amount }} {{ selectedToken }}
         </span>
+        <span
+          v-if="formattedDate"
+          class="text-xs sm:text-sm leading-5 font-normal text-gray-500 mt-1"
+        >
+          {{ formattedDate }}
+        </span>
       </div>
       <div class="flex flex-col items-center justify-center">
         <div class="mb-2 mt-4">

src/components/SellerSteps/SellerSearchComponent.vue

@@ -90,13 +90,13 @@ const handleInputEvent = (event: any): void => {
           <div class="flex gap-2">
             <img
               alt="Polygon image"
-              src="@/assets/polygon.svg?url"
+              src="@/assets/networks/polygon.svg?url"
               width="24"
               height="24"
             />
             <img
               alt="Ethereum image"
-              src="@/assets/ethereum.svg?url"
+              src="@/assets/networks/ethereum.svg?url"
               width="24"
               height="24"
             />

src/components/TopBar/TopBar.vue

@@ -14,6 +14,18 @@ import { connectProvider } from "@/blockchain/provider";
 import { DEFAULT_NETWORK } from "@/config/networks";
 import type { NetworkConfig } from "@/model/NetworkEnum";
 
+interface MenuOption {
+  label: string;
+  route?: string;
+  action?: () => void;
+  showInDesktop?: boolean;
+  showInMobile?: boolean;
+  isDynamic?: boolean;
+  dynamicLabel?: () => string;
+  dynamicRoute?: () => string;
+  showVersion?: boolean;
+}
+
 // Use the new composable
 const user = useUser();
 const { walletAddress, sellerView, network } = user;
@@ -80,15 +92,22 @@ const closeMenu = (): void => {
 
 const networkChange = async (network: NetworkConfig): Promise<void> => {
   currencyMenuOpenToggle.value = false;
-  const chainId = network.id.toString(16)
-  try {
-    await setChain({
-      chainId: `0x${chainId}`,
-      wallet: connectedWallet.value?.label || "",
-    });
+  
+  // If wallet is connected, try to change chain in wallet
+  if (connectedWallet.value) {
+    const chainId = network.id.toString(16)
+    try {
+      await setChain({
+        chainId: `0x${chainId}`,
+        wallet: connectedWallet.value.label,
+      });
+      user.setNetwork(network);
+    } catch (error) {
+      console.log("Error changing network", error);
+    }
+  } else {
+    // If no wallet connected, just update the network state
     user.setNetwork(network);
-  } catch (error) {
-    console.log("Error changing network", error);
   }
 };
 
@@ -103,11 +122,80 @@ onClickOutside(currencyRef, () => {
 onClickOutside(infoMenuRef, () => {
   infoMenuOpenToggle.value = false;
 });
+
+const infoMenuOptions: MenuOption[] = [
+  {
+    label: "Explorar Transações",
+    route: "/explore",
+    showInDesktop: true,
+    showInMobile: false,
+  },
+  {
+    label: "Perguntas frequentes",
+    route: "/faq",
+    showInDesktop: true,
+    showInMobile: false,
+  },
+  {
+    label: "Versões",
+    route: "/versions",
+    showInDesktop: true,
+    showInMobile: false,
+  },
+];
+
+const walletMenuOptions: MenuOption[] = [
+  {
+    label: "Quero vender",
+    isDynamic: true,
+    dynamicLabel: () => (sellerView.value ? "Quero comprar" : "Quero vender"),
+    dynamicRoute: () => (sellerView.value ? "/" : "/seller"),
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Explorar Transações",
+    route: "/explore",
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Gerenciar Ofertas",
+    route: "/manage_bids",
+    showInDesktop: true,
+    showInMobile: true,
+  },
+  {
+    label: "Perguntas frequentes",
+    route: "/faq",
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Versões",
+    route: "/versions",
+    showInDesktop: false,
+    showInMobile: true,
+  },
+  {
+    label: "Desconectar",
+    route: "/",
+    action: disconnectUser,
+    showInDesktop: true,
+    showInMobile: true,
+  },
+];
+
+const handleMenuOptionClick = (option: MenuOption): void => {
+  if (!option.action) {
+    closeMenu();
+  }
+};
 </script>
 
 <template>
   <header class="z-20">
-    <RouterLink :to="'/'" class="default-button">
+    <RouterLink :to="'/'" class="default-button flex items-center md:h-auto md:py-2 h-10 py-0">
       <img
         alt="P2Pix logo"
         class="logo hidden md:inline-block"
@@ -117,7 +205,7 @@ onClickOutside(infoMenuRef, () => {
       />
       <img
         alt="P2Pix logo"
-        class="logo inline-block md:hidden w-10/12"
+        class="logo inline-block md:hidden h-10"
         width="40"
         height="40"
         src="@/assets/logo2.svg?url"
@@ -155,26 +243,44 @@ onClickOutside(infoMenuRef, () => {
           >
             <div class="mt-2">
               <div class="bg-white rounded-md z-10 -left-36 w-52">
-                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
-                  >
-                    Documentação
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
-                <RouterLink
-                  :to="'/faq'"
-                  class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                <template
+                  v-for="(option, index) in infoMenuOptions.filter(
+                    (opt) => opt.showInDesktop
+                  )"
+                  :key="index"
                 >
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                  <RouterLink
+                    v-if="option.route"
+                    :to="option.route"
+                    class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                   >
-                    Perguntas frequentes
-                  </span>
-                </RouterLink>
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                    >
+                      {{ option.label }}
+                    </span>
+                  </RouterLink>
+                  <div
+                    v-else
+                    class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                  >
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ option.label }}
+                    </span>
+                  </div>
+                  <div
+                    v-if="
+                      index <
+                      infoMenuOptions.filter((opt) => opt.showInDesktop).length -
+                        1
+                    "
+                    class="w-full flex justify-center"
+                  >
+                    <hr class="w-4/5" />
+                  </div>
+                </template>
                 <div class="w-full flex justify-center">
                   <hr class="w-4/5" />
                 </div>
@@ -220,13 +326,6 @@ onClickOutside(infoMenuRef, () => {
           </div>
         </transition>
       </div>
-      <RouterLink
-        :to="'/faq'"
-        v-if="!walletAddress"
-        class="default-button inline-block md:hidden"
-      >
-        FAQ
-      </RouterLink>
       <RouterLink
         :to="sellerView ? '/' : '/seller'"
         class="default-button whitespace-nowrap w-40 sm:w-44 md:w-36 hidden md:inline-block"
@@ -235,16 +334,7 @@ onClickOutside(infoMenuRef, () => {
           {{ sellerView ? "Quero comprar" : "Quero vender" }}
         </div>
       </RouterLink>
-      <RouterLink
-        :to="sellerView ? '/' : '/seller'"
-        v-if="!walletAddress"
-        class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden w-40 sm:w-44 md:w-36"
-      >
-        <div class="topbar-text topbar-link text-center mx-auto inline-block">
-          {{ sellerView ? "Quero comprar" : "Quero vender" }}
-        </div>
-      </RouterLink>
-      <div class="flex flex-col relative" v-if="walletAddress">
+      <div class="flex flex-col relative">
         <div
           ref="currencyRef"
           class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
@@ -317,7 +407,7 @@ onClickOutside(infoMenuRef, () => {
       <button
         type="button"
         v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button hidden md:inline-block"
+        class="border-amber-500 border-2 sm:rounded !rounded-lg default-button hidden md:inline-block"
         @click="connnectWallet()"
       >
         Conectar carteira
@@ -325,7 +415,7 @@ onClickOutside(infoMenuRef, () => {
       <button
         type="button"
         v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button inline-block md:hidden"
+        class="border-amber-500 border-2 sm:rounded !rounded-lg default-button inline-block md:hidden h-10"
         @click="connnectWallet()"
       >
         Conectar
@@ -371,23 +461,40 @@ onClickOutside(infoMenuRef, () => {
                 <div
                   class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                 >
-                  <RouterLink
-                    to="/manage_bids"
-                    class="redirect_button menu-button"
-                    @click="closeMenu()"
+                  <template
+                    v-for="(option, index) in walletMenuOptions.filter(
+                      (opt) => opt.showInDesktop
+                    )"
+                    :key="index"
                   >
-                    Gerenciar Ofertas
-                  </RouterLink>
-                  <div class="w-full flex justify-center">
-                    <hr class="w-4/5" />
-                  </div>
-                  <RouterLink
-                    to="/"
-                    class="redirect_button menu-button"
-                    @click="disconnectUser"
-                  >
-                    Desconectar
-                  </RouterLink>
+                    <RouterLink
+                      v-if="option.route && !option.action"
+                      :to="option.route"
+                      class="redirect_button menu-button"
+                      @click="closeMenu()"
+                    >
+                      {{ option.label }}
+                    </RouterLink>
+                    <RouterLink
+                      v-else-if="option.route && option.action"
+                      :to="option.route"
+                      class="redirect_button menu-button"
+                      @click="option.action"
+                    >
+                      {{ option.label }}
+                    </RouterLink>
+                    <div
+                      v-if="
+                        index <
+                        walletMenuOptions.filter((opt) => opt.showInDesktop)
+                          .length -
+                          1
+                      "
+                      class="w-full flex justify-center"
+                    >
+                      <hr class="w-4/5" />
+                    </div>
+                  </template>
                 </div>
               </div>
             </div>
@@ -399,32 +506,49 @@ onClickOutside(infoMenuRef, () => {
       v-show="menuOpenToggle"
       class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
     >
-      <div class="pl-4 mt-2 h-full">
+      <div class="pl-4 h-full">
         <div class="bg-white rounded-md z-10 h-full">
-          <div class="menu-button" @click="closeMenu()">
-            <RouterLink
-              :to="sellerView ? '/' : '/seller'"
-              class="redirect_button mt-2"
+          <template
+            v-for="(option, index) in walletMenuOptions.filter(
+              (opt) => opt.showInMobile
+            )"
+            :key="index"
+          >
+            <div class="menu-button" @click="handleMenuOptionClick(option)">
+              <RouterLink
+                v-if="option.isDynamic"
+                :to="option.dynamicRoute ? option.dynamicRoute() : '/'"
+                class="redirect_button"
+                :class="{ 'mt-2': index === 0 }"
+              >
+                {{ option.dynamicLabel ? option.dynamicLabel() : option.label }}
+              </RouterLink>
+              <RouterLink
+                v-else-if="option.route && !option.action"
+                :to="option.route"
+                class="redirect_button"
+              >
+                {{ option.label }}
+              </RouterLink>
+              <RouterLink
+                v-else-if="option.route && option.action"
+                :to="option.route"
+                class="redirect_button"
+                @click.stop="option.action"
+              >
+                {{ option.label }}
+              </RouterLink>
+            </div>
+            <div
+              v-if="
+                index <
+                walletMenuOptions.filter((opt) => opt.showInMobile).length - 1
+              "
+              class="w-full flex justify-center"
             >
-              {{ sellerView ? "Quero comprar" : "Quero vender" }}
-            </RouterLink>
-          </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
-            </RouterLink>
-          </div>
-          <div class="w-full flex justify-center">
-            <hr class="w-4/5" />
-          </div>
-          <div class="menu-button" @click="disconnectUser">
-            <RouterLink to="/" class="redirect_button">
-              Desconectar
-            </RouterLink>
-          </div>
+              <hr class="w-4/5" />
+            </div>
+          </template>
           <div class="w-full flex justify-center">
             <hr class="w-4/5" />
           </div>
@@ -458,7 +582,7 @@ onClickOutside(infoMenuRef, () => {
       v-show="currencyMenuOpenToggle"
       class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
     >
-      <div class="pl-4 mt-2 h-full">
+      <div class="pl-4 h-full">
         <div class="bg-white rounded-md z-10 h-full">
           <div
             v-for="network in Networks"
@@ -523,8 +647,12 @@ a:hover {
 }
 
 .mobile-menu {
-  margin-top: 1400px;
-  bottom: 0px;
-  height: auto;
+  top: 60px;
+  right: 10px;
+  left: auto;
+  max-height: calc(100vh - 60px);
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 </style>

src/components/ui/FormCard.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
 }
 
 .form-card:not(.no-border) {
-  @apply border-y-10;
+  @apply border-y;
 }
 
 .form-card.full-width {

src/composables/useGraphQL.ts

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

src/config/networks.ts

@@ -1,22 +1,28 @@
-import { sepolia, rootstockTestnet } from "viem/chains";
+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:"0xb7cD135F5eFD9760981e02E2a898790b688939fe"} },
+      p2pix: { address: import.meta.env.VITE_SEPOLIA_P2PIX_ADDRESS } },
     tokens: {
-      BRZ: {address:"0x3eBE67A2C7bdB2081CBd34ba3281E90377462289"} },
+      BRZ: { address: import.meta.env.VITE_SEPOLIA_TOKEN_ADDRESS } },
     subgraphUrls: [import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL]
   },
-  rootstockTestnet: { ...rootstockTestnet,
+  rootstock: { ...(isTestnetEnvironment() ? rootstockTestnet : rootstock),
     rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL]}},
-    contracts: { ...rootstockTestnet.contracts,
-      p2pix: {address:"0x57Dcba05980761169508886eEdc6f5E7EC0411Dc"} },
+    contracts: { ...(isTestnetEnvironment() ? rootstockTestnet.contracts : rootstock.contracts),
+      p2pix: { address: import.meta.env.VITE_RSK_P2PIX_ADDRESS } },
     tokens: {
-      BRZ: {address:"0xfE841c74250e57640390f46d914C88d22C51e82e"} },
+      BRZ: { address: import.meta.env.VITE_RSK_TOKEN_ADDRESS } },
     subgraphUrls: [import.meta.env.VITE_RSK_SUBGRAPH_URL]
   },
 };

src/model/AppVersion.ts

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

src/model/WalletTransaction.ts

@@ -4,6 +4,7 @@ import type { Address } from "viem"
 export type WalletTransaction = {
   token?: Address;
   blockNumber: number;
+  blockTimestamp?: number;
   amount: number;
   seller: string;
   buyer: string;

src/router/index.ts

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

src/utils/versions.ts

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

src/views/ExploreView.vue

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

src/views/FaqView.vue

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

src/views/SellerView.vue

@@ -69,7 +69,7 @@ const sendNetwork = async () => {
     />
     <div v-if="flowStep == Step.Network">
       <SendNetwork
-        :sellerId="Number(user.sellerId.value)"
+        :sellerId="String(user.sellerId.value)"
         :offer="Number(user.seller.value.offer)"
         :selected-token="user.selectedToken.value"
         v-if="!loading"

src/views/VersionsView.vue

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

vite.config.ts

@@ -1,15 +1,29 @@
 import { fileURLToPath, URL } from "node:url";
+import { execSync } from "node:child_process";
 
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import svgLoader from "vite-svg-loader";
 
+function getGitTag(): string {
+  try {
+    const tags = execSync("git tag --sort=-version:refname").toString().trim().split("\n");
+    return tags.length > 0 ? tags[0] : "unknown";
+  } catch (fallbackError) {
+    return "";
+  }
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "./",
   build: {
     target: "esnext",
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(getGitTag()),
+  },
   optimizeDeps: {
     esbuildOptions: {
       target: "esnext",