From 799f7cfe09f5f30637a7f8d8dab3df63db50be45 Mon Sep 17 00:00:00 2001 From: Jefferson Mantovani Date: Thu, 23 Oct 2025 15:40:09 -0300 Subject: [PATCH 1/2] feat: add transactions explorer page --- src/components/Explorer/AnalyticsCard.vue | 73 +++ src/components/Explorer/TransactionTable.vue | 279 +++++++++++ src/components/TopBar/TopBar.vue | 16 + src/components/ui/FormCard.vue | 2 +- src/composables/useGraphQL.ts | 471 +++++++++++++++++++ src/router/index.ts | 12 +- src/views/ExploreView.vue | 164 +++++++ vite.config.ts | 1 + 8 files changed, 1015 insertions(+), 3 deletions(-) create mode 100644 src/components/Explorer/AnalyticsCard.vue create mode 100644 src/components/Explorer/TransactionTable.vue create mode 100644 src/composables/useGraphQL.ts create mode 100644 src/views/ExploreView.vue diff --git a/src/components/Explorer/AnalyticsCard.vue b/src/components/Explorer/AnalyticsCard.vue new file mode 100644 index 0000000..038990e --- /dev/null +++ b/src/components/Explorer/AnalyticsCard.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/src/components/Explorer/TransactionTable.vue b/src/components/Explorer/TransactionTable.vue new file mode 100644 index 0000000..e4c38e9 --- /dev/null +++ b/src/components/Explorer/TransactionTable.vue @@ -0,0 +1,279 @@ + + + + + diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index e5fb31e..5c8e458 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -154,6 +154,19 @@ onClickOutside(infoMenuRef, () => { >
+ + + Explorar Transações + + +
+
+
{
+
+
+
Gerenciar Ofertas diff --git a/src/components/ui/FormCard.vue b/src/components/ui/FormCard.vue index 4cfd1af..cd024d5 100644 --- a/src/components/ui/FormCard.vue +++ b/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 { diff --git a/src/composables/useGraphQL.ts b/src/composables/useGraphQL.ts new file mode 100644 index 0000000..4235141 --- /dev/null +++ b/src/composables/useGraphQL.ts @@ -0,0 +1,471 @@ +import { ref, computed } from 'vue'; +import { NetworkEnum } from '@/model/NetworkEnum'; + +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(networkName: NetworkEnum) { + const searchAddress = ref(''); + const selectedType = ref('all'); + const loading = ref(false); + const error = ref(null); + const analyticsLoading = ref(false); + + const transactionsData = ref([]); + const analyticsData = ref({ + totalVolume: '0', + totalTransactions: '0', + totalLocks: '0', + totalDeposits: '0', + totalReleases: '0' + }); + + const getGraphQLUrl = (networkName: string) => { + switch (networkName) { + case 'sepolia': + return import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || 'https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia'; + case 'rootstockTestnet': + return import.meta.env.VITE_RSK_SUBGRAPH_URL || 'https://api.studio.thegraph.com/query/113713/p-2-pix/1'; + default: + return 'https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia'; + } + }; + + const executeQuery = async (query: string, variables: any = {}) => { + const url = getGraphQLUrl(networkName.toString()); + + 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 + }; +} diff --git a/src/router/index.ts b/src/router/index.ts index fe48ef0..a1ccc85 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,11 +1,14 @@ -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"; 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 +36,11 @@ const router = createRouter({ name: "faq", component: FaqView, }, + { + path: "/explore", + name: "explore", + component: ExploreView, + }, ], }); diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue new file mode 100644 index 0000000..66ffc50 --- /dev/null +++ b/src/views/ExploreView.vue @@ -0,0 +1,164 @@ + + + + + \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index beb48d4..23703a7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -7,6 +7,7 @@ import svgLoader from "vite-svg-loader"; // https://vitejs.dev/config/ export default defineConfig({ + base: "./", build: { target: "esnext", }, From 9eee78fa919160e6ce0da56d0ba5a597027ea177 Mon Sep 17 00:00:00 2001 From: Jefferson Mantovani Date: Fri, 24 Oct 2025 16:01:07 -0300 Subject: [PATCH 2/2] fix: network selection --- .../BuyerSteps/BuyerSearchComponent.vue | 2 +- src/composables/useGraphQL.ts | 26 +++++++++++-------- src/config/networks.ts | 20 +++++++++----- src/views/ExploreView.vue | 9 +++---- 4 files changed, 33 insertions(+), 24 deletions(-) diff --git a/src/components/BuyerSteps/BuyerSearchComponent.vue b/src/components/BuyerSteps/BuyerSearchComponent.vue index 1f66c9c..10cba93 100644 --- a/src/components/BuyerSteps/BuyerSearchComponent.vue +++ b/src/components/BuyerSteps/BuyerSearchComponent.vue @@ -238,7 +238,7 @@ const handleSubmit = async (e: Event): Promise => { height="24" v-if=" selectedDeposits && - selectedDeposits.find((d) => d.network == Networks.rootstockTestnet) + selectedDeposits.find((d) => d.network == Networks.rootstock) " /> ) { const searchAddress = ref(''); const selectedType = ref('all'); const loading = ref(false); @@ -38,19 +40,21 @@ export function useGraphQL(networkName: NetworkEnum) { totalReleases: '0' }); - const getGraphQLUrl = (networkName: string) => { - switch (networkName) { - case 'sepolia': - return import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || 'https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia'; - case 'rootstockTestnet': - return import.meta.env.VITE_RSK_SUBGRAPH_URL || 'https://api.studio.thegraph.com/query/113713/p-2-pix/1'; + 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: - return 'https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia'; + throw new Error(`Unsupported network: ${network.value.name}`); } }; const executeQuery = async (query: string, variables: any = {}) => { - const url = getGraphQLUrl(networkName.toString()); + const url = getGraphQLUrl(); try { const response = await fetch(url, { diff --git a/src/config/networks.ts b/src/config/networks.ts index 0192dad..589beaf 100644 --- a/src/config/networks.ts +++ b/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] }, }; diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue index 66ffc50..f22bdaf 100644 --- a/src/views/ExploreView.vue +++ b/src/views/ExploreView.vue @@ -6,10 +6,9 @@ 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'; -import { getBlockExplorerUrl } from '@/config/networks'; const user = useUser(); -const { networkName } = user; +const { network } = user; const { searchAddress, @@ -23,7 +22,7 @@ const { fetchUserActivity, fetchAnalytics, clearData -} = useGraphQL(networkName.value); +} = useGraphQL(network); const transactionTypes = [ { key: 'all', label: 'Todas' }, @@ -45,7 +44,7 @@ watch(searchAddress, async (newAddress) => { } }); -watch(networkName, async () => { +watch(network, async () => { clearData(); await Promise.all([ fetchAllActivity(), @@ -150,7 +149,7 @@ onMounted(async () => {