hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge release/1.1.0 into develop

Browse Source
This commit is contained in:
Jefferson Mantovani 2025-11-06 10:57:27 -03:00
commit fad52d79d2
13 changed files with 519 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

8
src/App.vue
View File

@ -12,9 +12,6 @@ const route = useRoute();
const injected = injectedModule();
const targetNetwork = ref(DEFAULT_NETWORK);
const currentYear = new Date().getFullYear();
const appVersion = __APP_VERSION__;
const web3Onboard = init({
wallets: [injected],
chains: Object.values(Networks).map((network) => ({
@ -57,9 +54,4 @@ if (!connectedWallet) {
</RouterView>
<ToasterComponent :targetNetwork="targetNetwork" />
</main>
<footer class="mt-20 pt-2 pb-2 border-t border-gray-700 text-center">
<div class="flex justify-center items-center">
<p class="text-gray-400 text-xs"> Versão: {{ appVersion }} | © {{ currentYear }} P2Pix. Todos os direitos reservados.</p>
</div>
</footer>
</template>

9
src/blockchain/wallet.ts
View File

@ -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

35
src/components/BuyerSteps/BuyerSearchComponent.vue
View File

@ -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/networks/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.rootstock)
"
/>
<img
alt="Ethereum image"
src="@/assets/networks/ethereum.svg?url"
width="24"
height="24"
v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == Networks.sepolia)
"
/>
</div>
</div>

23
src/components/ListingComponent/TransactionCard.vue
View File

@ -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">

322
src/components/TopBar/TopBar.vue
View File

@ -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,39 +243,44 @@ 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"
<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"
>
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"
<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"
>
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"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
<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"
>
Perguntas frequentes
</span>
</RouterLink>
<hr class="w-4/5" />
</div>
</template>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
@ -233,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"
@ -248,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"
@ -330,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
@ -338,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
@ -384,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>
@ -412,35 +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="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>
@ -474,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"
@ -539,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>

8
src/model/AppVersion.ts Normal file
View File

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

1
src/model/WalletTransaction.ts
View File

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

6
src/router/index.ts
View File

@ -4,6 +4,7 @@ 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: import.meta.env.MODE === 'production' && import.meta.env.BASE_URL === './'
@ -41,6 +42,11 @@ const router = createRouter({
name: "explore",
component: ExploreView,
},
{
path: "/versions",
name: "versions",
component: VersionsView,
},
],
});

24
src/utils/versions.ts Normal file
View File

@ -0,0 +1,24 @@
import type { AppVersion } from "@/model/AppVersion";
export const appVersions: AppVersion[] = [
{
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`;
}

82
src/views/FaqView.vue
View File

@ -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>

156
src/views/VersionsView.vue Normal file
View File

@ -0,0 +1,156 @@
<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
@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>

14
vite.config.ts
View File

@ -6,11 +6,17 @@ import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import svgLoader from "vite-svg-loader";
function getGitCommitHash(): string {
function getGitTag(): string {
try {
return execSync("git rev-parse --short HEAD").toString().trim();
const tag = execSync("git describe --tags --abbrev=0").toString().trim();
return tag || "";
} catch (error) {
return "unknown";
try {
const tags = execSync("git tag --sort=-version:refname").toString().trim().split("\n");
return tags.length > 0 ? tags[0] : "unknown";
} catch (fallbackError) {
return "";
}
}
}
@ -21,7 +27,7 @@ export default defineConfig({
target: "esnext",
},
define: {
__APP_VERSION__: JSON.stringify(getGitCommitHash()),
__APP_VERSION__: JSON.stringify(getGitTag()),
},
optimizeDeps: {
esbuildOptions: {