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

Merge branch 'develop' into feat/transaction-explorer

Browse Source
This commit is contained in:
Jefferson Mantovani
2025-10-24 15:43:58 -03:00
parent 799f7cfe09 364cdd3b60
commit 4b4ade2bfa
32 changed files with 260 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BuyerSteps/BuyConfirmedComponent.vue
View File

@@ -53,7 +53,7 @@ const getWalletTransactions = async () => {
const callWithdraw = async (amount: string) => {
if (amount) {
user.setLoadingWalletTransactions(true);
const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
const withdraw = await withdrawDeposit(amount, user.network.value.tokens[user.selectedToken.value].address);
if (withdraw) {
console.log("Saque realizado!");
await getWalletTransactions();

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

@@ -5,12 +5,11 @@ import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
import CustomButton from "@/components/ui/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
import { NetworkEnum } from "@/model/NetworkEnum";
import type { ValidDeposit } from "@/model/ValidDeposit";
import { decimalCount } from "@/utils/decimalCount";
import { getTokenImage } from "@/utils/imagesPath";
import { onClickOutside } from "@vueuse/core";
import { Networks } from "@/config/networks";
import { TokenEnum } from "@/model/NetworkEnum";
// Store reference
@@ -19,7 +18,7 @@ const selectTokenToggle = ref<boolean>(false);
const {
walletAddress,
networkName,
network,
selectedToken,
depositsValidList,
loadingNetworkLiquidity,
@@ -51,7 +50,7 @@ const connectAccount = async (): Promise<void> => {
const emitConfirmButton = async (): Promise<void> => {
const deposit = selectedDeposits.value?.find(
(d) => d.network === Number(networkName.value)
(d) => d.network === network.value
);
if (!deposit) return;
deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
@@ -99,7 +98,7 @@ const verifyLiquidity = (): void => {
);
selectedDeposits.value = selDeposits;
hasLiquidity.value = !!selDeposits.find(
(d) => d.network === Number(networkName.value)
(d) => d.network === network.value
);
enableOrDisableConfirmButton();
};
@@ -110,7 +109,7 @@ const enableOrDisableConfirmButton = (): void => {
return;
}
if (!selectedDeposits.value.find((d) => d.network === networkName.value)) {
if (!selectedDeposits.value.find((d) => d.network === network.value)) {
enableConfirmButton.value = false;
return;
}
@@ -118,7 +117,7 @@ const enableOrDisableConfirmButton = (): void => {
enableConfirmButton.value = true;
};
watch(networkName, (): void => {
watch(network, (): void => {
verifyLiquidity();
enableOrDisableConfirmButton();
});
@@ -234,22 +233,22 @@ const handleSubmit = async (e: Event): Promise<void> => {
<div class="flex gap-2">
<img
alt="Rootstock image"
src="@/assets/rootstock.svg?url"
src="@/assets/networks/rootstock.svg?url"
width="24"
height="24"
v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == NetworkEnum.rootstock)
selectedDeposits.find((d) => d.network == Networks.rootstockTestnet)
"
/>
<img
alt="Ethereum image"
src="@/assets/ethereum.svg?url"
src="@/assets/networks/ethereum.svg?url"
width="24"
height="24"
v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == NetworkEnum.sepolia)
selectedDeposits.find((d) => d.network == Networks.sepolia)
"
/>
</div>

8
src/components/ListingComponent/ListingComponent.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { NetworkEnum } from "@/model/NetworkEnum";
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction";
import { useUser } from "@/composables/useUser";
@@ -32,10 +31,7 @@ const showInitialItems = (): void => {
};
const openEtherscanUrl = (transactionHash: string): void => {
const networkUrl =
user.networkName.value == NetworkEnum.sepolia
? "sepolia.etherscan.io"
: "mumbai.polygonscan.com";
const networkUrl = user.network.value.blockExplorers?.default.url;
const url = `https://${networkUrl}/tx/${transactionHash}`;
window.open(url, "_blank");
};
@@ -84,7 +80,7 @@ showInitialItems();
:key="item.blockNumber"
:selected-token="user.selectedToken.value"
:transaction="item"
:network-name="user.networkName.value"
:network-name="user.network.value.name"
@open-explorer="openEtherscanUrl"
/>

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

@@ -1,12 +1,13 @@
<script setup lang="ts">
import type { WalletTransaction } from "@/model/WalletTransaction";
import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
import { TokenEnum } from "@/model/NetworkEnum";
import { computed } from "vue";
import StatusBadge, { type StatusType } from "../ui/StatusBadge.vue";
import { Networks } from "@/config/networks";
const props = defineProps<{
transaction: WalletTransaction;
networkName: NetworkEnum;
networkName: keyof typeof Networks;
selectedToken: TokenEnum;
}>();
@@ -28,7 +29,7 @@ const eventName = computed(() => {
});
const explorerName = computed(() => {
return props.networkName === NetworkEnum.sepolia ? "Etherscan" : "Polygonscan";
return Networks[props.networkName].blockExplorers?.default.name;
});
const statusType = computed((): StatusType => {

2
src/components/SellerSteps/SellerComponent.vue
View File

@@ -71,7 +71,7 @@ const handleSubmit = (e: Event): void => {
const data: Participant = {
offer: offer.value,
chainID: user.networkId.value,
chainID: user.network.value.id,
identification: processedIdentification,
bankIspb: selectedBank.value?.ISPB,
accountType: accountType.value,

4
src/components/SellerSteps/SellerSearchComponent.vue
View File

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

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

@@ -2,10 +2,8 @@
import { ref, watch } from "vue";
import { useUser } from "@/composables/useUser";
import { onClickOutside } from "@vueuse/core";
import { NetworkEnum } from "@/model/NetworkEnum";
import { getNetworkImage } from "@/utils/imagesPath";
import { Networks } from "@/model/Networks";
import { Networks } from "@/config/networks";
import { useOnboard } from "@web3-onboard/vue";
import ChevronDown from "@/assets/chevronDown.svg";
@@ -13,10 +11,12 @@ import TwitterIcon from "@/assets/twitterIcon.svg";
import LinkedinIcon from "@/assets/linkedinIcon.svg";
import GithubIcon from "@/assets/githubIcon.svg";
import { connectProvider } from "@/blockchain/provider";
import { DEFAULT_NETWORK } from "@/config/networks";
import type { NetworkConfig } from "@/model/NetworkEnum";
// Use the new composable
const user = useUser();
const { walletAddress, sellerView, networkId } = user;
const { walletAddress, sellerView, network } = user;
const menuOpenToggle = ref<boolean>(false);
const infoMenuOpenToggle = ref<boolean>(false);
@@ -40,20 +40,20 @@ watch(connectedWallet, async (newVal: any) => {
});
watch(connectedChain, (newVal: any) => {
// Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
// Check if connected chain is valid, otherwise default to Sepolia
if (
!newVal ||
!Object.values(Networks).some(
(network) => Number(network.chainId) === Number(newVal.id)
(network) => network.id === Number(newVal.id)
)
) {
console.log(
"Invalid or unsupported network detected, defaulting to Sepolia"
);
user.setNetworkId(user.networkId.value);
user.setNetwork(DEFAULT_NETWORK);
return;
}
user.setNetworkId(newVal?.id);
user.setNetworkById(newVal?.id);
});
const formatWalletAddress = (): string => {
@@ -78,14 +78,15 @@ const closeMenu = (): void => {
menuOpenToggle.value = false;
};
const networkChange = async (network: NetworkEnum): Promise<void> => {
const networkChange = async (network: NetworkConfig): Promise<void> => {
currencyMenuOpenToggle.value = false;
const chainId = network.id.toString(16)
try {
await setChain({
chainId: Networks[network].chainId,
chainId: `0x${chainId}`,
wallet: connectedWallet.value?.label || "",
});
user.setNetworkId(network);
user.setNetwork(network);
} catch (error) {
console.log("Error changing network", error);
}
@@ -271,7 +272,7 @@ onClickOutside(infoMenuRef, () => {
>
<img
alt="Choosed network image"
:src="getNetworkImage(NetworkEnum[user.networkName.value])"
:src="getNetworkImage(network.name)"
height="24"
width="24"
/>
@@ -280,9 +281,7 @@ onClickOutside(infoMenuRef, () => {
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
>
{{
Networks[user.networkName.value]
? Networks[user.networkName.value].chainName
: "Invalid Chain"
user.network.value.name || "Invalid Chain"
}}
</span>
<div
@@ -305,20 +304,20 @@ onClickOutside(infoMenuRef, () => {
class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<div
v-for="(chainData, network) in Networks"
:key="network"
v-for="network in Networks"
:key="network.id"
class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
@click="networkChange(network)"
>
<img
:alt="chainData.chainName + ' image'"
:alt="network.name + ' image'"
width="20"
height="20"
:src="getNetworkImage(NetworkEnum[network])"
:src="getNetworkImage(network.name)"
class="mr-2 ml-1"
/>
<span class="text-gray-900 font-semibold text-sm">
{{ chainData.chainName }}
{{ network.name }}
</span>
</div>
<div class="w-full flex justify-center">
@@ -478,19 +477,19 @@ onClickOutside(infoMenuRef, () => {
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div
v-for="(chainData, network) in Networks"
:key="network"
v-for="network in Networks"
:key="network.id"
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
@click="networkChange(network)"
>
<img
:alt="chainData.chainName + 'image'"
:alt="network.name + 'image'"
width="20"
height="20"
:src="getNetworkImage(NetworkEnum[network])"
:src="getNetworkImage(network.name)"
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm">
{{ chainData.chainName }}
{{ network.name }}
</span>
</div>
</div>

10
src/components/ui/NetworkBadges.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
import { computed } from "vue";
import { NetworkEnum } from "@/model/NetworkEnum";
import { getNetworkImage } from "@/utils/imagesPath";
import type { NetworkConfig } from "@/model/NetworkEnum";
const props = withDefaults(
defineProps<{
networks: NetworkEnum[];
networks: NetworkConfig[];
size?: "sm" | "md" | "lg";
showLabel?: boolean;
}>(),
@@ -24,8 +24,8 @@ const sizeMap = {
const networkData = computed(() => {
return props.networks.map((network) => ({
network,
image: getNetworkImage(String(network)),
name: String(network),
image: getNetworkImage(network.name),
name: network.name,
}));
});
</script>
@@ -34,7 +34,7 @@ const networkData = computed(() => {
<div class="network-badges">
<div
v-for="data in networkData"
:key="data.network"
:key="data.network.id"
class="network-badge"
:title="data.name"
>

24
src/components/ui/NetworkSelector.vue
View File

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

13
src/components/ui/ToasterComponent.vue
View File

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