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

Compare commits

base: hueso:1264d91f5c8784b8496776efd9f9c0d2441cc8e3
Branches Tags
hueso:develop
hueso:refactor/network-dynamize
hueso:type-check
hueso:buy-refactor
hueso:rsk
..
compare: hueso:2ed7cad96c987f51f38afe40bd32b64ae40c061d
Branches Tags
hueso:develop
hueso:refactor/network-dynamize
hueso:type-check
hueso:buy-refactor
hueso:rsk

No commits in common. "1264d91f5c8784b8496776efd9f9c0d2441cc8e3" and "2ed7cad96c987f51f38afe40bd32b64ae40c061d" have entirely different histories.
1264d91f5c ... 2ed7cad96c

25 changed files with 201 additions and 639 deletions
Show Stats Expand all files Collapse all files

6
index.html
View File

@ -2,11 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.ico">
<link rel="icon" href="/p2pix.svg" type="image/svg+xml">
<link rel="shortcut icon" href="/p2pix.svg" type="image/svg+xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P2Pix</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
package.json
View File

@ -14,7 +14,6 @@
"lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
}, },
"dependencies": { "dependencies": {
"@floating-ui/vue": "^0.2.1",
"@headlessui/vue": "^1.7.3", "@headlessui/vue": "^1.7.3",
"@heroicons/vue": "^2.0.12", "@heroicons/vue": "^2.0.12",
"@vueuse/core": "^9.12.0", "@vueuse/core": "^9.12.0",

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

72
public/p2pix.svg
View File

@ -1,72 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="81.253998"
height="81.253998"
viewBox="0 0 81.253998 81.253998"
fill="none"
version="1.1"
id="svg8"
sodipodi:docname="p2pix.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="5.0617761"
inkscape:cx="129.5"
inkscape:cy="23.805873"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<path
d="m 21.877862,66.609161 c 0,4.29324 -2.73444,7.334258 -6.49095,7.334258 -2.197613,0 -3.884411,-1.07331 -4.906471,-2.657693 v 8.739769 H 7.5927121 v -20.44393 h 2.8877289 v 2.402197 c 1.02206,-1.609964 2.708858,-2.708857 4.932061,-2.708857 3.67975,0 6.46536,3.041058 6.46536,7.334256 z m -2.91311,0 c 0,-2.683233 -1.73796,-4.574316 -4.19099,-4.574316 -2.453445,0 -4.318904,1.891083 -4.318904,4.574316 0,2.708816 1.865459,4.574317 4.318904,4.574317 2.42745,0 4.19099,-1.865501 4.19099,-4.574317 z"
fill="#14b8a6"
id="path1"
style="stroke-width:0.419393" />
<path
d="m 37.722102,70.876818 v 2.759941 h -13.56988 v -2.069955 l 5.18789,-4.548777 c 4.01191,-3.501007 5.03397,-4.395445 5.03397,-5.979827 0,-1.558841 -1.20114,-2.836605 -3.39876,-2.836605 -2.17203,0 -3.37317,1.252181 -3.7565,3.296595 h -2.9131 c 0.40891,-3.731044 3.09218,-6.056523 6.79752,-6.056523 3.80767,0 6.18437,2.453268 6.18437,5.468744 0,2.708816 -1.89105,4.31878 -5.54564,7.513127 l -2.81077,2.427739 -0.0512,0.02554 z"
fill="#f59e0b"
id="path2"
style="stroke-width:0.419393" />
<path
d="m 54.869392,66.609161 c 0,4.29324 -2.73444,7.334258 -6.49094,7.334258 -2.19804,0 -3.88442,-1.07331 -4.9069,-2.657693 v 8.739769 h -2.88752 v -20.44393 h 2.88752 v 2.402197 c 1.02248,-1.609964 2.70886,-2.708857 4.93248,-2.708857 3.67975,0 6.46536,3.041058 6.46536,7.334256 z m -2.91352,0 c 0,-2.683233 -1.73755,-4.574316 -4.19099,-4.574316 -2.45303,0 -4.31849,1.891083 -4.31849,4.574316 0,2.708816 1.86546,4.574317 4.31849,4.574317 2.42786,0 4.19099,-1.865501 4.19099,-4.574317 z"
fill="#14b8a6"
id="path3"
style="stroke-width:0.419393" />
<path
d="m 61.104502,55.007239 c 0,1.047748 -0.79223,1.814394 -1.89104,1.814394 -1.04764,0 -1.86546,-0.766646 -1.86546,-1.814394 0,-1.022194 0.81782,-1.763286 1.86546,-1.763286 1.09881,0 1.89104,0.741092 1.89104,1.763286 z m -3.32201,4.574326 h 2.88752 v 14.055194 h -2.88752 z"
fill="#14b8a6"
id="path4"
style="stroke-width:0.419393" />
<path
d="m 73.089912,73.636759 -3.39876,-5.034308 -3.27126,5.034308 h -3.47551 l 5.03439,-7.23201 -4.75298,-6.823143 h 3.44992 l 3.11735,4.702064 3.01585,-4.702064 h 3.47509 l -4.75297,6.874225 5.0088,7.180928 z"
fill="#14b8a6"
id="path5"
style="stroke-width:0.419393" />
<path
d="m 8.11425,0 c 3.66615,0 6.76355,2.43731 7.76895,5.77851 3.8591,0.2742 7.5557,1.9498 10.2875,4.702 l 14.7458,14.7356 c 0.0508,0.0508 0.1117,0.1016 0.1625,0.1625 l 16.1676,16.1574 c 1.9702,1.9803 4.6918,3.1076 7.4744,3.1076 0.0102,0 0.0203,0 0.0305,0 h 0.8937 c 1.2187,-2.9349 4.113,-4.9965 7.4948,-4.9965 4.4785,0 8.1142,3.6357 8.1142,8.1142 0,4.4786 -3.6357,8.1143 -8.1142,8.1143 -3.6154,0 -6.6621,-2.3561 -7.7182,-5.6262 h -0.6601 c -0.0102,0 -0.0305,0 -0.0407,0 -4.2551,0 -8.4189,-1.7264 -11.4147,-4.7426 L 38.4995,30.70011 c -0.0609,-0.0508 -0.132,-0.1016 -0.1929,-0.1625 L 22.1898,14.42081 c -1.7671,-1.7772 -4.1536,-2.8638 -6.6519,-3.067 -1.2491,2.8639 -4.1028,4.8645 -7.43381,4.8645 C 3.63567,16.21831 0,12.59281 0,8.11421 0,3.63571 3.63567,0 8.11425,0 Z"
fill="#f59e0b"
id="path6" />
<path
d="m 8.11425,39.64711 c 3.38175,0 6.26595,2.0616 7.49475,4.9965 h 0.8937 c 0.0102,0 0.0203,0 0.0305,0 2.7927,0 5.5144,-1.1272 7.4744,-3.1075 l 9.6477,-9.6478 3.9505,3.9505 -9.6578,9.6579 c -3.0061,3.0162 -7.1597,4.7426 -11.4148,4.7426 -0.0102,0 -0.0305,0 -0.0407,0 h -0.6601 c -1.046,3.2599 -4.1028,5.6262 -7.71815,5.6262 C 3.63567,55.86551 0,52.22981 0,47.75121 c 0,-4.4786 3.63567,-8.1041 8.11425,-8.1041 z"
fill="#f59e0b"
id="path7" />
<path
d="m 73.1298,16.21831 c -3.3818,0 -6.266,-2.0615 -7.4948,-4.9965 h -0.8937 c -0.0101,0 -0.0203,0 -0.0304,0 -2.7928,0 -5.5145,1.1273 -7.4745,3.1076 l -9.6477,9.6478 -3.9505,-3.9505 9.6579,-9.6579 c 3.006,-3.0162 7.1596,-4.7426 11.4148,-4.7426 0.0101,0 0.0304,0 0.0406,0 h 0.6601 c 1.0562,-3.2701 4.113,-5.6262 7.7182,-5.6262 4.4786,0 8.1142,3.6357 8.1142,8.1143 0,4.4785 -3.6356,8.104 -8.1142,8.104 z"
fill="#f59e0b"
id="path8" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

6
src/App.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import TopBar from "@/components/TopBar/TopBar.vue"; import TopBar from "@/components/TopBar/TopBar.vue";
import SpinnerComponent from "@/components/SpinnerComponent.vue";
</script> </script>
<template> <template>
@ -9,11 +8,6 @@ import SpinnerComponent from "@/components/SpinnerComponent.vue";
<template v-if="Component"> <template v-if="Component">
<Suspense> <Suspense>
<component :is="Component"></component> <component :is="Component"></component>
<template #fallback>
<div class="flex w-full h-full justify-center items-center">
<SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
</div>
</template>
</Suspense> </Suspense>
</template> </template>
</RouterView> </RouterView>

5
src/assets/info.svg
View File

@ -1,5 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 13.125C3.61726 13.125 0.875 10.3827 0.875 7C0.875 3.61726 3.61726 0.875 7 0.875C10.3827 0.875 13.125 3.61726 13.125 7C13.125 10.3827 10.3827 13.125 7 13.125ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="#6B7280"/>
<path d="M7.81437 5.7644L5.80973 6.01562L5.73795 6.34888L6.13272 6.42065C6.38907 6.48218 6.44034 6.57446 6.38395 6.83081L5.73795 9.86597C5.56876 10.6504 5.83023 11.0195 6.44547 11.0195C6.92228 11.0195 7.47599 10.7991 7.72721 10.4966L7.80411 10.1326C7.6298 10.2864 7.37345 10.3479 7.20426 10.3479C6.96329 10.3479 6.87613 10.1787 6.93766 9.88135L7.81437 5.7644Z" fill="#6B7280"/>
<path d="M7.875 3.9375C7.875 4.42075 7.48325 4.8125 7 4.8125C6.51675 4.8125 6.125 4.42075 6.125 3.9375C6.125 3.45425 6.51675 3.0625 7 3.0625C7.48325 3.0625 7.875 3.45425 7.875 3.9375Z" fill="#6B7280"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 975 B

24
src/assets/rootstock.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

19
src/blockchain/addresses.ts
View File

@ -5,9 +5,8 @@ const getTokenAddress = (network?: NetworkEnum): string => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const possibleTokenAddresses: { [key: string]: string } = { const possibleTokenAddresses: { [key: string]: string } = {
Ethereum: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289", Ethereum: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29", Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
Rootstock: "0xfE841c74250e57640390f46d914C88d22C51e82e",
}; };
return possibleTokenAddresses[network ? network : etherStore.networkName]; return possibleTokenAddresses[network ? network : etherStore.networkName];
@ -17,9 +16,8 @@ const getP2PixAddress = (network?: NetworkEnum): string => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const possibleP2PixAddresses: { [key: string]: string } = { const possibleP2PixAddresses: { [key: string]: string } = {
Ethereum: "0xb7cD135F5eFD9760981e02E2a898790b688939fe", Ethereum: "0x2414817FF64A114d91eCFA16a834d3fCf69103d4",
Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00", Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
Rootstock: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
}; };
return possibleP2PixAddresses[network ? network : etherStore.networkName]; return possibleP2PixAddresses[network ? network : etherStore.networkName];
@ -29,29 +27,28 @@ const getProviderUrl = (): string => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const possibleProvidersUrls: { [key: string]: string } = { const possibleProvidersUrls: { [key: string]: string } = {
Ethereum: import.meta.env.VITE_SEPOLIA_API_URL, Ethereum: import.meta.env.VITE_GOERLI_API_URL,
Polygon: import.meta.env.VITE_MUMBAI_API_URL, Polygon: import.meta.env.VITE_MUMBAI_API_URL,
Rootstock: import.meta.env.VITE_RSK_API_URL,
}; };
return possibleProvidersUrls[etherStore.networkName]; return possibleProvidersUrls[etherStore.networkName];
}; };
const possibleChains: { [key: string]: NetworkEnum } = { const possibleChains: { [key: string]: NetworkEnum } = {
"11155111": NetworkEnum.ethereum, "0x5": NetworkEnum.ethereum,
"5": NetworkEnum.ethereum,
"0x13881": NetworkEnum.polygon,
"80001": NetworkEnum.polygon, "80001": NetworkEnum.polygon,
"31": NetworkEnum.rootstock,
}; };
const network2Chain: { [key: string]: string } = { const network2Chain: { [key: string]: string } = {
Ethereum: "0xAA36A7", Ethereum: "0x5",
Polygon: "0x13881", Polygon: "0x13881",
Localhost: "0x7a69", Localhost: "0x7a69",
Rootstock: "0x1f",
}; };
const isPossibleNetwork = (networkChain: string): boolean => { const isPossibleNetwork = (networkChain: string): boolean => {
if (Object.keys(possibleChains).includes(networkChain.toString())) { if (Object.keys(possibleChains).includes(networkChain)) {
return true; return true;
} }
return false; return false;

60
src/blockchain/events.ts
View File

@ -7,29 +7,23 @@ import { getContract } from "./provider";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import { getP2PixAddress, getTokenAddress } from "./addresses"; import { getP2PixAddress, getTokenAddress } from "./addresses";
import { NetworkEnum } from "@/model/NetworkEnum"; import { NetworkEnum } from "@/model/NetworkEnum";
import type { UnreleasedLock } from "@/model/UnreleasedLock";
import type { Pix } from "@/model/Pix";
const getNetworksLiquidity = async (): Promise<void> => { const getNetworksLiquidity = async (): Promise<void> => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const sepoliaProvider = new ethers.providers.JsonRpcProvider( const goerliProvider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_SEPOLIA_API_URL, import.meta.env.VITE_GOERLI_API_URL,
11155111 5
); // sepolia provider ); // goerli provider
const mumbaiProvider = new ethers.providers.JsonRpcProvider( const mumbaiProvider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_MUMBAI_API_URL, import.meta.env.VITE_MUMBAI_API_URL,
80001 80001
); // mumbai provider ); // mumbai provider
const rootstockProvider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_RSK_API_URL,
31
); // rootstock provider
const p2pContractSepolia = new ethers.Contract( const p2pContractGoerli = new ethers.Contract(
getP2PixAddress(NetworkEnum.ethereum), getP2PixAddress(NetworkEnum.ethereum),
p2pix.abi, p2pix.abi,
sepoliaProvider goerliProvider
); );
const p2pContractMumbai = new ethers.Contract( const p2pContractMumbai = new ethers.Contract(
getP2PixAddress(NetworkEnum.polygon), getP2PixAddress(NetworkEnum.polygon),
@ -37,17 +31,10 @@ const getNetworksLiquidity = async (): Promise<void> => {
mumbaiProvider mumbaiProvider
); );
const p2pContractRootstock = new ethers.Contract(
getP2PixAddress(NetworkEnum.rootstock),
p2pix.abi,
rootstockProvider
);
etherStore.setLoadingNetworkLiquidity(true); etherStore.setLoadingNetworkLiquidity(true);
const depositListGoerli = await getValidDeposits(
const depositListSepolia = await getValidDeposits(
getTokenAddress(NetworkEnum.ethereum), getTokenAddress(NetworkEnum.ethereum),
p2pContractSepolia p2pContractGoerli
); );
const depositListMumbai = await getValidDeposits( const depositListMumbai = await getValidDeposits(
@ -55,14 +42,8 @@ const getNetworksLiquidity = async (): Promise<void> => {
p2pContractMumbai p2pContractMumbai
); );
const depositListRootstock = await getValidDeposits( etherStore.setDepositsValidListGoerli(depositListGoerli);
getTokenAddress(NetworkEnum.rsktestnet),
p2pContractRootstock
);
etherStore.setDepositsValidListSepolia(depositListSepolia);
etherStore.setDepositsValidListMumbai(depositListMumbai); etherStore.setDepositsValidListMumbai(depositListMumbai);
etherStore.setDepositsValidListRootstock(depositListRootstock);
etherStore.setLoadingNetworkLiquidity(false); etherStore.setLoadingNetworkLiquidity(false);
}; };
@ -119,25 +100,4 @@ const getValidDeposits = async (
return Object.values(depositList); return Object.values(depositList);
}; };
const getUnreleasedLockById = async ( export { getValidDeposits, getNetworksLiquidity };
lockID: string
): Promise<UnreleasedLock> => {
const p2pContract = getContract();
const pixData: Pix = {
pixKey: "",
};
const lock = await p2pContract.mapLocks(lockID);
const pixTarget = lock.pixTarget;
const amount = formatEther(lock?.amount);
pixData.pixKey = String(Number(pixTarget));
pixData.value = Number(amount);
return {
lockID: lockID,
pix: pixData,
};
};
export { getValidDeposits, getNetworksLiquidity, getUnreleasedLockById };

52
src/blockchain/wallet.ts
View File

@ -1,7 +1,7 @@
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { getContract, getProvider } from "./provider"; import { getContract, getProvider } from "./provider";
import { getTokenAddress, possibleChains, isPossibleNetwork } from "./addresses"; import { getTokenAddress, possibleChains } from "./addresses";
import mockToken from "@/utils/smart_contract_files/MockToken.json"; import mockToken from "@/utils/smart_contract_files/MockToken.json";
@ -21,10 +21,6 @@ const updateWalletStatus = async (): Promise<void> => {
const signer = provider.getSigner(); const signer = provider.getSigner();
const { chainId } = await provider.getNetwork(); const { chainId } = await provider.getNetwork();
if(!isPossibleNetwork(chainId)){
window.alert("Invalid chain!:"+chainId);
return false;
}
etherStore.setNetworkName(possibleChains[chainId]); etherStore.setNetworkName(possibleChains[chainId]);
const mockTokenContract = new ethers.Contract( const mockTokenContract = new ethers.Contract(
@ -84,9 +80,6 @@ const filterLockStatus = async (
transactionHash: transaction.transactionHash transactionHash: transaction.transactionHash
? transaction.transactionHash ? transaction.transactionHash
: "", : "",
transactionID: transaction.args?.lockID
? String(transaction.args?.lockID)
: "",
}; };
return tx; return tx;
@ -162,22 +155,6 @@ const listLockTransactionByWalletAddress = async (
}); });
}; };
const listLockTransactionBySellerAddress = async (
sellerAddress: string
): Promise<Event[]> => {
const p2pContract = getContract(true);
const filterAddedLocks = p2pContract.filters.LockAdded();
const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
return eventsReleasedLocks.filter((lock) =>
lock.args?.seller
.toHexString()
.substring(3)
.includes(sellerAddress.substring(2).toLowerCase())
);
};
const checkUnreleasedLock = async ( const checkUnreleasedLock = async (
walletAddress: string walletAddress: string
): Promise<UnreleasedLock | undefined> => { ): Promise<UnreleasedLock | undefined> => {
@ -210,37 +187,10 @@ const checkUnreleasedLock = async (
} }
}; };
const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
const p2pContract = getContract();
const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
const lockStatus = await p2pContract.getLocksStatus(
lockSeller.map((lock) => lock.args?.lockID)
);
const activeLockAmount = await lockStatus[1].reduce(
async (sumValue: Promise<number>, currentStatus: number, index: number) => {
const currValue = await sumValue;
let valueToSum = 0;
if (currentStatus == 1) {
const lock = await p2pContract.mapLocks(lockStatus[0][index]);
valueToSum = Number(formatEther(lock?.amount));
}
return currValue + valueToSum;
},
Promise.resolve(0)
);
return activeLockAmount;
};
export { export {
updateWalletStatus, updateWalletStatus,
listValidDepositTransactionsByWalletAddress, listValidDepositTransactionsByWalletAddress,
listAllTransactionByWalletAddress, listAllTransactionByWalletAddress,
listReleaseTransactionByWalletAddress, listReleaseTransactionByWalletAddress,
checkUnreleasedLock, checkUnreleasedLock,
getActiveLockAmount,
}; };

88
src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
View File

@ -1,81 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { withdrawDeposit } from "@/blockchain/buyerMethods";
import {
getActiveLockAmount,
listAllTransactionByWalletAddress,
listValidDepositTransactionsByWalletAddress,
} from "@/blockchain/wallet";
import CustomButton from "@/components/CustomButton/CustomButton.vue"; import CustomButton from "@/components/CustomButton/CustomButton.vue";
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction";
import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia";
import { onMounted, ref, watch } from "vue";
import ListingComponent from "../ListingComponent/ListingComponent.vue";
// props // props
const props = defineProps<{ const props = defineProps<{
tokenAmount: number | undefined; tokenAmount: number | undefined;
isCurrentStep: boolean;
}>(); }>();
const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore);
const lastWalletTransactions = ref<WalletTransaction[]>([]);
const depositList = ref<ValidDeposit[]>([]);
const activeLockAmount = ref<number>(0);
// methods
const getWalletTransactions = async () => {
etherStore.setLoadingWalletTransactions(true);
if (walletAddress.value) {
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
walletAddress.value
);
const allUserTransactions = await listAllTransactionByWalletAddress(
walletAddress.value
);
activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
if (walletDeposits) {
depositList.value = walletDeposits;
}
if (allUserTransactions) {
lastWalletTransactions.value = allUserTransactions;
}
}
etherStore.setLoadingWalletTransactions(false);
};
const callWithdraw = async (amount: string) => {
if (amount) {
etherStore.setLoadingWalletTransactions(true);
const withdraw = await withdrawDeposit(amount);
if (withdraw) {
console.log("Saque realizado!");
await getWalletTransactions();
} else {
console.log("Não foi possível realizar o saque!");
}
etherStore.setLoadingWalletTransactions(false);
}
};
// Emits // Emits
const emit = defineEmits(["makeAnotherTransaction"]); const emit = defineEmits(["makeAnotherTransaction"]);
// observer
watch(props, async (): Promise<void> => {
if (props.isCurrentStep) await getWalletTransactions();
});
onMounted(async () => {
await getWalletTransactions();
});
</script> </script>
<template> <template>
@ -101,7 +33,10 @@ onMounted(async () => {
cadastrar o BRZ em sua carteira. cadastrar o BRZ em sua carteira.
</p> </p>
</div> </div>
<CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" /> <CustomButton
:text="'Cadastrar token na carteira'"
@buttonClicked="() => {}"
/>
</div> </div>
<button <button
type="button" type="button"
@ -111,19 +46,6 @@ onMounted(async () => {
Fazer nova transação Fazer nova transação
</button> </button>
</div> </div>
<div
class="flex justify-center mt-8 mb-6 text-white text-xl md:text-3xl font-bold"
>
Gerenciar transações
</div>
<div class="w-full max-w-xs md:max-w-lg">
<ListingComponent
:valid-deposits="depositList"
:wallet-transactions="lastWalletTransactions"
:active-lock-amount="activeLockAmount"
@deposit-withdrawn="callWithdraw"
></ListingComponent>
</div>
</div> </div>
</template> </template>
@ -148,7 +70,7 @@ p {
} }
.blur-container { .blur-container {
@apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10; @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
} }
.last-release-info { .last-release-info {

31
src/components/BuyConfirmedComponent/__tests__/BuyConfirmedComponent.spec.ts
View File

@ -1,31 +1,32 @@
import { mount } from "@vue/test-utils"; import { shallowMount } from "@vue/test-utils";
import BuyConfirmedComponent from "../BuyConfirmedComponent.vue"; import BuyConfirmedComponent from "../BuyConfirmedComponent.vue";
import { createPinia, setActivePinia } from "pinia"; import { createPinia, setActivePinia } from "pinia";
import { MockEvents } from "@/model/mock/EventMock";
describe("BuyConfirmedComponent.vue", async () => { describe("BuyConfirmedComponent.vue", () => {
beforeEach(() => { beforeEach(() => {
setActivePinia(createPinia()); setActivePinia(createPinia());
}); });
const wrapper = mount(BuyConfirmedComponent, { const wrapper = shallowMount(BuyConfirmedComponent, {
props: { props: {
lastWalletReleaseTransactions: MockEvents,
tokenAmount: 1, tokenAmount: 1,
isCurrentStep: false,
}, },
}); });
// test("Test component Header Text", () => { test("Test component Header Text", () => {
// expect(wrapper.html()).toContain("Os tokens já foram transferidos"); expect(wrapper.html()).toContain("Os tokens já foram transferidos");
// expect(wrapper.html()).toContain("para a sua carteira!"); expect(wrapper.html()).toContain("para a sua carteira!");
// }); });
// test("Test component Container Text", () => { test("Test component Container Text", () => {
// expect(wrapper.html()).toContain("Tokens recebidos"); expect(wrapper.html()).toContain("Tokens recebidos");
// expect(wrapper.html()).toContain("BRZ"); expect(wrapper.html()).toContain("BRZ");
// expect(wrapper.html()).toContain("Não encontrou os tokens?"); expect(wrapper.html()).toContain("Não encontrou os tokens?");
// expect(wrapper.html()).toContain("Clique no botão abaixo para"); expect(wrapper.html()).toContain("Clique no botão abaixo para");
// expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira."); expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira.");
// }); });
test("Test makeAnotherTransactionEmit", async () => { test("Test makeAnotherTransactionEmit", async () => {
wrapper.vm.$emit("makeAnotherTransaction"); wrapper.vm.$emit("makeAnotherTransaction");

57
src/components/CustomAlert/CustomAlert.vue
View File

@ -6,15 +6,15 @@ const props = defineProps<{
const alertText = ref<string>(""); const alertText = ref<string>("");
const alertPaddingLeft = ref<string>("18rem"); const alertPaddingLeft = ref<string>("18rem");
const alertPaddingTop = ref<string>("0rem");
if (props.type === "sell") { if (props.type === "sell") {
alertPaddingLeft.value = "30%"; alertPaddingLeft.value = "30%";
} else if (props.type === "buy") { } else if (props.type === "buy") {
alertPaddingLeft.value = "30%"; alertPaddingLeft.value = "30%";
} else if (props.type === "withdraw") {
alertPaddingLeft.value = "40%";
} else if (props.type === "redirect") { } else if (props.type === "redirect") {
alertPaddingLeft.value = "35%"; alertPaddingLeft.value = "35%";
alertPaddingTop.value = "8rem";
} }
switch (props.type) { switch (props.type) {
@ -29,16 +29,13 @@ switch (props.type) {
case "redirect": case "redirect":
alertText.value = "Existe uma compra em aberto. Continuar?"; alertText.value = "Existe uma compra em aberto. Continuar?";
break; break;
case "withdraw":
alertText.value = "Tudo certo! Saque realizado com sucesso!";
break;
} }
</script> </script>
<template> <template>
<div <div
class="modal-overlay sm:h-12 h-full inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none" class="modal-overlay inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
> >
<div class="modal px-12 pl-72 text-center sm:flex justify-between hidden"> <div class="modal px-12 pl-72 text-center flex justify-between">
<div class="flex items-center"> <div class="flex items-center">
<p class="text-black tracking-tighter leading-tight my-2"> <p class="text-black tracking-tighter leading-tight my-2">
{{ alertText }} {{ alertText }}
@ -54,44 +51,6 @@ switch (props.type) {
@click="$emit('close-alert')" @click="$emit('close-alert')"
/> />
</div> </div>
<div
class="modal-mobile px-7 py-3 text-center inline-block sm:hidden mt-24 h-48"
v-if="props.type !== 'redirect'"
>
<p class="text-black tracking-tighter leading-tight my-2 text-start mb-4">
{{ alertText }}
</p>
<button
@click="$emit('close-alert')"
class="border-2 border-solid border-amber-400 mt-2"
>
Ok
</button>
</div>
<div
class="modal-mobile px-5 text-center inline-block sm:hidden mt-24 h-40"
v-if="props.type === 'redirect'"
>
<p
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
>
Retomar a última compra?
</p>
<div class="flex justify-around items-center px-2">
<button
@click="$emit('close-alert')"
class="border-2 border-solid border-white-400 mt-2 font-semibold"
>
Não
</button>
<button
@click="$emit('go-to-lock')"
class="border-2 border-solid border-white-400 mt-2 font-semibold"
>
Sim
</button>
</div>
</div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@ -100,6 +59,7 @@ switch (props.type) {
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding-top: 7rem; padding-top: 7rem;
height: 3rem;
z-index: 10; z-index: 10;
} }
@ -112,13 +72,6 @@ switch (props.type) {
white-space: nowrap; white-space: nowrap;
padding-left: v-bind(alertPaddingLeft); padding-left: v-bind(alertPaddingLeft);
} }
.modal-mobile {
background-color: rgba(251, 191, 36, 1);
/* height: 200px; */
width: 300px;
border-radius: 10px;
}
.close { .close {
cursor: pointer; cursor: pointer;
} }

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

@ -5,11 +5,10 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction"; import type { WalletTransaction } from "@/model/WalletTransaction";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { ref, watch, onMounted } from "vue"; import { ref, watch } from "vue";
import SpinnerComponent from "../SpinnerComponent.vue"; import SpinnerComponent from "../SpinnerComponent.vue";
import { decimalCount } from "@/utils/decimalCount"; import { decimalCount } from "@/utils/decimalCount";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
const etherStore = useEtherStore(); const etherStore = useEtherStore();
@ -17,7 +16,6 @@ const etherStore = useEtherStore();
const props = defineProps<{ const props = defineProps<{
validDeposits: ValidDeposit[]; validDeposits: ValidDeposit[];
walletTransactions: WalletTransaction[]; walletTransactions: WalletTransaction[];
activeLockAmount: number;
}>(); }>();
const emit = defineEmits(["depositWithdrawn"]); const emit = defineEmits(["depositWithdrawn"]);
@ -32,12 +30,6 @@ const isCollapsibleOpen = ref<boolean>(false);
const validDecimals = ref<boolean>(true); const validDecimals = ref<boolean>(true);
const validWithdrawAmount = ref<boolean>(true); const validWithdrawAmount = ref<boolean>(true);
const enableConfirmButton = ref<boolean>(false); const enableConfirmButton = ref<boolean>(false);
const showInfoTooltip = ref<boolean>(false);
const floatingArrow = ref(null);
const reference = ref<HTMLElement | null>(null);
const floating = ref<HTMLElement | null>(null);
const infoText = ref<HTMLElement | null>(null);
// Debounce methods // Debounce methods
const handleInputEvent = (event: any): void => { const handleInputEvent = (event: any): void => {
@ -59,22 +51,19 @@ const handleInputEvent = (event: any): void => {
enableConfirmButton.value = true; enableConfirmButton.value = true;
}; };
const callWithdraw = () => { const callWithdraw = async () => {
emit("depositWithdrawn", withdrawAmount.value); if (withdrawAmount.value) {
const withdraw = await withdrawDeposit(withdrawAmount.value);
if (withdraw) {
console.log(withdraw);
alert("Saque realizado!");
emit("depositWithdrawn");
}
}
}; };
watch(enableConfirmButton, (): void => {
if (!enableConfirmButton.value) {
withdrawButtonOpacity.value = 0.7;
withdrawButtonCursor.value = "not-allowed";
} else {
withdrawButtonOpacity.value = 1;
withdrawButtonCursor.value = "pointer";
}
});
watch(withdrawAmount, (): void => { watch(withdrawAmount, (): void => {
if (!withdrawAmount.value || !enableConfirmButton.value) { if (!withdrawAmount.value) {
withdrawButtonOpacity.value = 0.7; withdrawButtonOpacity.value = 0.7;
withdrawButtonCursor.value = "not-allowed"; withdrawButtonCursor.value = "not-allowed";
} else { } else {
@ -107,7 +96,7 @@ const showInitialItems = (): void => {
const openEtherscanUrl = (transactionHash: string): void => { const openEtherscanUrl = (transactionHash: string): void => {
const networkUrl = const networkUrl =
etherStore.networkName == NetworkEnum.ethereum etherStore.networkName == NetworkEnum.ethereum
? "sepolia.etherscan.io" ? "goerli.etherscan.io"
: "mumbai.polygonscan.com"; : "mumbai.polygonscan.com";
const url = `https://${networkUrl}/tx/${transactionHash}`; const url = `https://${networkUrl}/tx/${transactionHash}`;
window.open(url, "_blank"); window.open(url, "_blank");
@ -133,18 +122,6 @@ const getEventName = (event: string | undefined): string => {
return possibleEventName[event]; return possibleEventName[event];
}; };
onMounted(() => {
useFloating(reference, floating, {
placement: "right",
middleware: [
offset(10),
flip(),
shift(),
arrow({ element: floatingArrow }),
],
});
});
// watch props changes // watch props changes
watch(props, async (): Promise<void> => { watch(props, async (): Promise<void> => {
const itemsToShowQty = itemsToShow.value.length; const itemsToShowQty = itemsToShow.value.length;
@ -162,11 +139,11 @@ showInitialItems();
<template> <template>
<div class="blur-container" v-if="loadingWalletTransactions"> <div class="blur-container" v-if="loadingWalletTransactions">
<SpinnerComponent width="8" height="8"></SpinnerComponent> <SpinnerComponent width="8" height="8" fillColor="white"></SpinnerComponent>
</div> </div>
<div class="blur-container" v-if="!loadingWalletTransactions"> <div class="blur-container" v-if="!loadingWalletTransactions">
<div <div
class="w-full bg-white p-4 sm:p-6 rounded-lg" class="w-full bg-white p-6 rounded-lg"
v-if="props.validDeposits.length > 0" v-if="props.validDeposits.length > 0"
> >
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -177,55 +154,25 @@ showInitialItems();
<p class="text-xl leading-7 font-semibold text-gray-900"> <p class="text-xl leading-7 font-semibold text-gray-900">
{{ getRemaining() }} BRZ {{ getRemaining() }} BRZ
</p> </p>
<div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0"> <p class="text-xs leading-4 font-medium text-gray-600"></p>
<span class="text-xs font-normal text-gray-400" ref="infoText">{{
`com ${activeLockAmount.toFixed(2)} BRZ em lock`
}}</span>
<div
class="absolute mt-[2px] md-view"
:style="{ left: `${(infoText?.clientWidth ?? 108) + 4}px` }"
>
<img
alt="info image"
src="@/assets/info.svg"
aria-describedby="tooltip"
ref="reference"
@mouseover="showInfoTooltip = true"
@mouseout="showInfoTooltip = false"
/>
<div
role="tooltip"
ref="floating"
class="w-56 z-50 tooltip md-view"
v-if="showInfoTooltip"
>
Valor “em lock” significa que a quantia está aguardando
confirmação de compra e só estará disponível para saque caso a
transação expire.
</div>
</div>
</div> </div>
</div> </div>
<div class="pt-5">
<div v-show="!isCollapsibleOpen" class="flex justify-end items-center"> <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
<div <div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md" class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="[(isCollapsibleOpen = true)]" @click="[(isCollapsibleOpen = true)]"
> >
<img <img alt="Withdraw image" src="@/assets/withdraw.svg" />
alt="Withdraw image"
src="@/assets/withdraw.svg"
class="w-3 h-3 sm:w-4 sm:h-4"
/>
<span class="last-release-info">Sacar</span> <span class="last-release-info">Sacar</span>
</div> </div>
</div> </div>
</div>
<div class="pt-5">
<div v-show="isCollapsibleOpen" class="py-2 w-100"> <div v-show="isCollapsibleOpen" class="py-2 w-100">
<p class="text-sm leading-5 font-medium">Valor do saque</p> <p class="text-sm leading-5 font-medium">Valor do saque</p>
<input <input
type="number" type="number"
name="" name=""
id=""
@input="debounce(handleInputEvent, 500)($event)" @input="debounce(handleInputEvent, 500)($event)"
placeholder="0" placeholder="0"
class="text-2xl text-gray-900 w-full outline-none" class="text-2xl text-gray-900 w-full outline-none"
@ -255,42 +202,38 @@ showInitialItems();
</h1> </h1>
<div <div
v-if="enableConfirmButton"
class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md" class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="callWithdraw" @click="callWithdraw"
> >
<img <img alt="Withdraw image" src="@/assets/withdraw.svg" />
alt="Withdraw image"
src="@/assets/withdraw.svg"
class="w-3 h-3 sm:w-4 sm:h-4"
/>
<span class="last-release-info">Sacar</span> <span class="last-release-info">Sacar</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="w-full bg-white p-4 sm:p-6 rounded-lg" class="w-full bg-white p-6 rounded-lg"
v-for="item in itemsToShow" v-for="item in itemsToShow"
:key="item.blockNumber" :key="item.blockNumber"
> >
<div class="item-container"> <div class="item-container">
<div class="flex flex-col self-start"> <div>
<span class="text-xs sm:text-sm leading-5 font-medium text-gray-600"> <p class="text-sm leading-5 font-medium text-gray-600">
{{ getEventName(item.event) }} {{ getEventName(item.event) }}
</span> </p>
<span <p class="text-xl leading-7 font-semibold text-gray-900">
class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
>
{{ item.amount }} {{ item.amount }}
BRZ BRZ
</span> </p>
<p class="text-xs leading-4 font-medium text-gray-600"></p>
</div> </div>
<div> <div>
<div <div
class="bg-amber-300 status-text" class="bg-amber-300 status-text"
v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1" v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
> >
Em Aberto Ativo
</div> </div>
<div <div
class="bg-[#94A3B8] status-text" class="bg-[#94A3B8] status-text"
@ -308,30 +251,11 @@ showInitialItems();
Finalizado Finalizado
</div> </div>
<div <div
class="flex gap-2 cursor-pointer items-center justify-self-center w-full" class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="openEtherscanUrl(item.transactionHash)" @click="openEtherscanUrl(item.transactionHash)"
v-if="getEventName(item.event) != 'Reserva' || item.lockStatus != 1"
> >
<span class="last-release-info">{{ getExplorer() }}</span> <span class="last-release-info">{{ getExplorer() }}</span>
<img <img alt="Redirect image" src="@/assets/redirect.svg" />
alt="Redirect image"
src="@/assets/redirect.svg"
class="w-3 h-3 sm:w-4 sm:h-4"
/>
</div>
<div
class="flex gap-2 justify-self-center w-full"
v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
>
<RouterLink
:to="{
name: 'home',
force: true,
state: { lockID: item.transactionID },
}"
class="router-button"
>Continuar</RouterLink
>
</div> </div>
</div> </div>
</div> </div>
@ -356,7 +280,7 @@ showInitialItems();
</span> </span>
</div> </div>
<span class="font-bold text-gray-300" v-if="itemsToShow.length == 0"> <span class="font-bold text-gray-900" v-if="itemsToShow.length == 0">
Não há nenhuma transação anterior Não há nenhuma transação anterior
</span> </span>
</div> </div>
@ -380,14 +304,17 @@ p {
} }
.status-text { .status-text {
@apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center mb-2 px-2 py-1 mt-4; @apply text-base font-medium text-gray-900 rounded-lg text-center mb-2 p-1;
} }
.text { .text {
@apply text-white text-center; @apply text-white text-center;
} }
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
}
.blur-container { .blur-container {
@apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto; @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
} }
.grid-container { .grid-container {
@ -395,15 +322,7 @@ p {
} }
.last-release-info { .last-release-info {
@apply font-medium text-xs sm:text-sm text-gray-900 justify-self-center; @apply font-medium text-base text-gray-900 justify-self-center;
}
.tooltip {
@apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
}
.router-button {
@apply rounded-lg border-amber-300 border-2 px-3 py-2 text-gray-900 font-semibold sm:text-base text-xs hover:bg-transparent w-full text-center;
} }
.withdraw-button { .withdraw-button {
@ -419,10 +338,4 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
@media screen and (max-width: 640px) {
.md-view {
display: none;
}
}
</style> </style>

16
src/components/ListingComponent/__tests__/ListingComponent.spec.ts
View File

@ -17,7 +17,6 @@ describe("ListingComponent.vue", () => {
props: { props: {
validDeposits: [], validDeposits: [],
walletTransactions: [], walletTransactions: [],
activeLockAmount: 0,
}, },
}); });
@ -29,7 +28,6 @@ describe("ListingComponent.vue", () => {
props: { props: {
validDeposits: [], validDeposits: [],
walletTransactions: MockWalletTransactions, walletTransactions: MockWalletTransactions,
activeLockAmount: 0,
}, },
}); });
@ -43,7 +41,6 @@ describe("ListingComponent.vue", () => {
props: { props: {
validDeposits: MockValidDeposits, validDeposits: MockValidDeposits,
walletTransactions: MockWalletTransactions, walletTransactions: MockWalletTransactions,
activeLockAmount: 0,
}, },
}); });
const btn = wrapper.find("button"); const btn = wrapper.find("button");
@ -63,7 +60,6 @@ describe("ListingComponent.vue", () => {
props: { props: {
validDeposits: MockValidDeposits, validDeposits: MockValidDeposits,
walletTransactions: MockWalletTransactions, walletTransactions: MockWalletTransactions,
activeLockAmount: 0,
}, },
}); });
wrapper.vm.$emit("depositWithdrawn"); wrapper.vm.$emit("depositWithdrawn");
@ -72,16 +68,4 @@ describe("ListingComponent.vue", () => {
expect(wrapper.emitted("depositWithdrawn")).toBeTruthy(); expect(wrapper.emitted("depositWithdrawn")).toBeTruthy();
}); });
test("Test should render lock info when active lock amount is greater than 0", () => {
const wrapper = mount(ListingComponent, {
props: {
validDeposits: MockValidDeposits,
walletTransactions: [],
activeLockAmount: 50,
},
});
expect(wrapper.html()).toContain("com 50.00 BRZ em lock");
});
}); });

26
src/components/SearchComponent.vue
View File

@ -17,7 +17,7 @@ const etherStore = useEtherStore();
const { const {
walletAddress, walletAddress,
networkName, networkName,
depositsValidListSepolia, depositsValidListGoerli,
depositsValidListMumbai, depositsValidListMumbai,
loadingNetworkLiquidity, loadingNetworkLiquidity,
} = storeToRefs(etherStore); } = storeToRefs(etherStore);
@ -28,9 +28,8 @@ const enableConfirmButton = ref<boolean>(false);
const enableWalletButton = ref<boolean>(false); const enableWalletButton = ref<boolean>(false);
const hasLiquidity = ref<boolean>(true); const hasLiquidity = ref<boolean>(true);
const validDecimals = ref<boolean>(true); const validDecimals = ref<boolean>(true);
const selectedSepoliaDeposit = ref<ValidDeposit>(); const selectedGoerliDeposit = ref<ValidDeposit>();
const selectedMumbaiDeposit = ref<ValidDeposit>(); const selectedMumbaiDeposit = ref<ValidDeposit>();
const selectedRootstockDeposit = ref<ValidDeposit>();
// Emits // Emits
const emit = defineEmits(["tokenBuy"]); const emit = defineEmits(["tokenBuy"]);
@ -45,7 +44,7 @@ const connectAccount = async (): Promise<void> => {
const emitConfirmButton = (): void => { const emitConfirmButton = (): void => {
const selectedDeposit = const selectedDeposit =
networkName.value == NetworkEnum.ethereum networkName.value == NetworkEnum.ethereum
? selectedSepoliaDeposit.value ? selectedGoerliDeposit.value
: selectedMumbaiDeposit.value; : selectedMumbaiDeposit.value;
emit("tokenBuy", selectedDeposit, tokenValue.value); emit("tokenBuy", selectedDeposit, tokenValue.value);
}; };
@ -69,19 +68,18 @@ const handleInputEvent = (event: any): void => {
// Verify if there is a valid deposit to buy // Verify if there is a valid deposit to buy
const verifyLiquidity = (): void => { const verifyLiquidity = (): void => {
enableConfirmButton.value = false; enableConfirmButton.value = false;
selectedSepoliaDeposit.value = undefined; selectedGoerliDeposit.value = undefined;
selectedMumbaiDeposit.value = undefined; selectedMumbaiDeposit.value = undefined;
selectedRootstockDeposit.value = undefined;
if (tokenValue.value <= 0) { if (tokenValue.value <= 0) {
enableWalletButton.value = false; enableWalletButton.value = false;
return; return;
} }
selectedSepoliaDeposit.value = verifyNetworkLiquidity( selectedGoerliDeposit.value = verifyNetworkLiquidity(
tokenValue.value, tokenValue.value,
walletAddress.value, walletAddress.value,
depositsValidListSepolia.value depositsValidListGoerli.value
); );
selectedMumbaiDeposit.value = verifyNetworkLiquidity( selectedMumbaiDeposit.value = verifyNetworkLiquidity(
tokenValue.value, tokenValue.value,
@ -90,7 +88,7 @@ const verifyLiquidity = (): void => {
); );
enableOrDisableConfirmButton(); enableOrDisableConfirmButton();
if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) { if (selectedGoerliDeposit.value || selectedMumbaiDeposit.value) {
hasLiquidity.value = true; hasLiquidity.value = true;
enableWalletButton.value = true; enableWalletButton.value = true;
} else { } else {
@ -100,7 +98,7 @@ const verifyLiquidity = (): void => {
}; };
const enableOrDisableConfirmButton = (): void => { const enableOrDisableConfirmButton = (): void => {
if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.ethereum) if (selectedGoerliDeposit.value && networkName.value == NetworkEnum.ethereum)
enableConfirmButton.value = true; enableConfirmButton.value = true;
else if ( else if (
selectedMumbaiDeposit.value && selectedMumbaiDeposit.value &&
@ -185,7 +183,7 @@ watch(walletAddress, (): void => {
src="@/assets/ethereum.svg" src="@/assets/ethereum.svg"
width="24" width="24"
height="24" height="24"
v-if="selectedSepoliaDeposit" v-if="selectedGoerliDeposit"
/> />
</div> </div>
</div> </div>
@ -196,7 +194,11 @@ watch(walletAddress, (): void => {
<span class="text-gray-900 font-normal text-sm mr-2" <span class="text-gray-900 font-normal text-sm mr-2"
>Carregando liquidez das redes.</span >Carregando liquidez das redes.</span
> >
<SpinnerComponent width="4" height="4"></SpinnerComponent> <SpinnerComponent
width="4"
height="4"
fillColor="white"
></SpinnerComponent>
</div> </div>
<div <div
class="flex justify-center" class="flex justify-center"

3
src/components/SpinnerComponent.vue
View File

@ -3,6 +3,7 @@
const props = defineProps({ const props = defineProps({
width: String, width: String,
height: String, height: String,
fillColor: String,
show: Boolean, show: Boolean,
}); });
@ -10,7 +11,7 @@ const getCustomClass = () => {
return [ return [
`w-${props.width}`, `w-${props.width}`,
`h-${props.height}`, `h-${props.height}`,
`fill-white`, `fill-${props.fillColor}`,
"text-gray-200", "text-gray-200",
"animate-spin", "animate-spin",
"dark:text-gray-600", "dark:text-gray-600",

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

@ -7,7 +7,6 @@ import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "@/blockchain/provider"; import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import ethereumImage from "@/assets/ethereum.svg"; import ethereumImage from "@/assets/ethereum.svg";
import polygonImage from "@/assets/polygon.svg"; import polygonImage from "@/assets/polygon.svg";
import rootstockImage from "@/assets/rootstock.svg";
// Store reference // Store reference
const etherStore = useEtherStore(); const etherStore = useEtherStore();
@ -59,7 +58,6 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
let validImages = { let validImages = {
Ethereum: ethereumImage, Ethereum: ethereumImage,
Polygon: polygonImage, Polygon: polygonImage,
Rootstock: rootstockImage,
Localhost: ethereumImage, Localhost: ethereumImage,
}; };
@ -235,8 +233,6 @@ onClickOutside(infoMenuRef, () => {
<img <img
alt="Choosed network image" alt="Choosed network image"
:src="getNetworkImage(etherStore.networkName)" :src="getNetworkImage(etherStore.networkName)"
height="24"
width="24"
/> />
<span <span
class="default-text group-hover:text-gray-900 lg-view" class="default-text group-hover:text-gray-900 lg-view"
@ -273,23 +269,6 @@ onClickOutside(infoMenuRef, () => {
> >
<div class="mt-2"> <div class="mt-2">
<div class="bg-white rounded-md z-10"> <div class="bg-white rounded-md z-10">
<div
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
@click="networkChange(NetworkEnum.rootstock)"
>
<img
alt="Rootstock image"
width="20"
height="20"
src="@/assets/rootstock.svg"
/>
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
Rootstock
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div <div
class="menu-button gap-2 px-4 rounded-md cursor-pointer" class="menu-button gap-2 px-4 rounded-md cursor-pointer"
@click="networkChange(NetworkEnum.ethereum)" @click="networkChange(NetworkEnum.ethereum)"
@ -489,23 +468,6 @@ onClickOutside(infoMenuRef, () => {
> >
<div class="pl-4 mt-2 h-full"> <div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full"> <div class="bg-white rounded-md z-10 h-full">
<div
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.rsktestnet)"
>
<img
alt="Rootstock image"
width="20"
height="20"
src="@/assets/rootstock.svg"
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm">
Rootstock
</span>
</div>
<div class="w-full flex justify-center pb-12">
<hr class="w-4/5" />
</div>
<div <div
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2" class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.ethereum)" @click="networkChange(NetworkEnum.ethereum)"

1
src/model/NetworkEnum.ts
View File

@ -1,5 +1,4 @@
export enum NetworkEnum { export enum NetworkEnum {
ethereum = "Ethereum", ethereum = "Ethereum",
polygon = "Polygon", polygon = "Polygon",
rootstock = "Rootstock",
} }

1
src/model/WalletTransaction.ts
View File

@ -7,5 +7,4 @@ export type WalletTransaction = {
event: string; event: string;
lockStatus: number; lockStatus: number;
transactionHash: string; transactionHash: string;
transactionID?: string;
}; };

6
src/router/index.ts
View File

@ -11,12 +11,6 @@ const router = createRouter({
path: "/", path: "/",
name: "home", name: "home",
component: HomeView, component: HomeView,
props: true,
},
{
path: "/:lockID",
name: "redirect buy",
component: HomeView,
}, },
{ {
path: "/seller", path: "/seller",

13
src/store/ether.ts
View File

@ -9,8 +9,8 @@ export const useEtherStore = defineStore("ether", {
networkName: NetworkEnum.ethereum, networkName: NetworkEnum.ethereum,
loadingLock: false, loadingLock: false,
sellerView: false, sellerView: false,
// Depósitos válidos para compra SEPOLIA // Depósitos válidos para compra GOERLI
depositsValidListSepolia: [] as ValidDeposit[], depositsValidListGoerli: [] as ValidDeposit[],
// Depósitos válidos para compra MUMBAI // Depósitos válidos para compra MUMBAI
depositsValidListMumbai: [] as ValidDeposit[], depositsValidListMumbai: [] as ValidDeposit[],
loadingWalletTransactions: false, loadingWalletTransactions: false,
@ -32,15 +32,12 @@ export const useEtherStore = defineStore("ether", {
setSellerView(sellerView: boolean) { setSellerView(sellerView: boolean) {
this.sellerView = sellerView; this.sellerView = sellerView;
}, },
setDepositsValidListSepolia(depositsValidList: ValidDeposit[]) { setDepositsValidListGoerli(depositsValidList: ValidDeposit[]) {
this.depositsValidListSepolia = depositsValidList; this.depositsValidListGoerli = depositsValidList;
}, },
setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) { setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) {
this.depositsValidListMumbai = depositsValidList; this.depositsValidListMumbai = depositsValidList;
}, },
setDepositsValidListRootstock(depositsValidList: ValidDeposit[]) {
this.depositsValidListRootstock = depositsValidList;
},
setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) { setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
this.loadingWalletTransactions = isLoadingWalletTransactions; this.loadingWalletTransactions = isLoadingWalletTransactions;
}, },
@ -52,7 +49,7 @@ export const useEtherStore = defineStore("ether", {
getters: { getters: {
getValidDepositByWalletAddress: (state) => { getValidDepositByWalletAddress: (state) => {
return (walletAddress: string) => return (walletAddress: string) =>
state.depositsValidListSepolia state.depositsValidListGoerli
.filter((deposit) => deposit.seller == walletAddress) .filter((deposit) => deposit.seller == walletAddress)
.sort((a, b) => { .sort((a, b) => {
return b.blockNumber - a.blockNumber; return b.blockNumber - a.blockNumber;

98
src/views/HomeView.vue
View File

@ -2,15 +2,26 @@
import SearchComponent from "@/components/SearchComponent.vue"; import SearchComponent from "@/components/SearchComponent.vue";
import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue"; import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue"; import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import QrCodeComponent from "@/components/QrCodeComponent.vue"; import QrCodeComponent from "@/components/QrCodeComponent.vue";
import CustomModal from "@/components/CustomModal/CustomModal.vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { addLock, releaseLock } from "@/blockchain/buyerMethods"; import {
import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet"; addLock,
releaseLock,
withdrawDeposit,
} from "@/blockchain/buyerMethods";
import {
updateWalletStatus,
listAllTransactionByWalletAddress,
checkUnreleasedLock,
listValidDepositTransactionsByWalletAddress,
} from "@/blockchain/wallet";
import { getNetworksLiquidity } from "@/blockchain/events"; import { getNetworksLiquidity } from "@/blockchain/events";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import { getUnreleasedLockById } from "@/blockchain/events"; import type { WalletTransaction } from "@/model/WalletTransaction";
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue"; import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
enum Step { enum Step {
@ -30,8 +41,9 @@ const tokenAmount = ref<number>();
const lockID = ref<string>(""); const lockID = ref<string>("");
const loadingRelease = ref<boolean>(false); const loadingRelease = ref<boolean>(false);
const showModal = ref<boolean>(false); const showModal = ref<boolean>(false);
const lastWalletTransactions = ref<WalletTransaction[]>([]);
const depositList = ref<ValidDeposit[]>([]);
const showBuyAlert = ref<boolean>(false); const showBuyAlert = ref<boolean>(false);
const paramLockID = window.history.state?.lockID;
const confirmBuyClick = async ( const confirmBuyClick = async (
selectedDeposit: ValidDeposit, selectedDeposit: ValidDeposit,
@ -71,13 +83,50 @@ const releaseTransaction = async (e2eId: string) => {
e2eId, e2eId,
lockID.value lockID.value
); );
await release.wait(); release.wait();
await getWalletTransactions();
await updateWalletStatus(); await updateWalletStatus();
loadingRelease.value = false; loadingRelease.value = false;
} }
}; };
const getWalletTransactions = async () => {
etherStore.setLoadingWalletTransactions(true);
if (walletAddress.value) {
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
walletAddress.value
);
const allUserTransactions = await listAllTransactionByWalletAddress(
walletAddress.value
);
if (walletDeposits) {
depositList.value = walletDeposits;
}
if (allUserTransactions) {
lastWalletTransactions.value = allUserTransactions;
}
}
etherStore.setLoadingWalletTransactions(false);
};
const callWithdraw = async (amount: string) => {
if (amount) {
etherStore.setLoadingWalletTransactions(true);
const withdraw = await withdrawDeposit(amount);
if (withdraw) {
console.log("Saque realizado!");
await getWalletTransactions();
} else {
console.log("Não foi possível realizar o saque!");
}
etherStore.setLoadingWalletTransactions(false);
}
};
const checkForUnreleasedLocks = async (): Promise<void> => { const checkForUnreleasedLocks = async (): Promise<void> => {
const walletLocks = await checkUnreleasedLock(walletAddress.value); const walletLocks = await checkUnreleasedLock(walletAddress.value);
if (walletLocks) { if (walletLocks) {
@ -91,30 +140,20 @@ const checkForUnreleasedLocks = async (): Promise<void> => {
} }
}; };
if (paramLockID) { if (walletAddress.value) {
const lockToRedirect = await getUnreleasedLockById(paramLockID as string);
if (lockToRedirect) {
lockID.value = lockToRedirect.lockID;
tokenAmount.value = lockToRedirect.pix.value;
pixTarget.value = Number(lockToRedirect.pix.pixKey);
flowStep.value = Step.Buy;
} else {
flowStep.value = Step.Search;
}
} else {
watch(walletAddress, async () => {
await checkForUnreleasedLocks(); await checkForUnreleasedLocks();
});
watch(networkName, async () => {
if (walletAddress.value) await checkForUnreleasedLocks();
});
} }
watch(walletAddress, async () => {
await checkForUnreleasedLocks();
});
watch(networkName, async () => {
if (walletAddress.value) await checkForUnreleasedLocks();
});
onMounted(async () => { onMounted(async () => {
await getNetworksLiquidity(); await getNetworksLiquidity();
if (walletAddress.value && !paramLockID) await checkForUnreleasedLocks();
window.history.state.lockID = "";
}); });
</script> </script>
@ -152,9 +191,18 @@ onMounted(async () => {
<div class="flex flex-col gap-10" v-if="!loadingRelease"> <div class="flex flex-col gap-10" v-if="!loadingRelease">
<BuyConfirmedComponent <BuyConfirmedComponent
:tokenAmount="tokenAmount" :tokenAmount="tokenAmount"
:is-current-step="flowStep == Step.List"
@make-another-transaction="flowStep = Step.Search" @make-another-transaction="flowStep = Step.Search"
/> />
<div
class="text-3xl text-white leading-9 font-bold justify-center flex mt-4"
>
Gerenciar transações
</div>
<ListingComponent
:valid-deposits="depositList"
:wallet-transactions="lastWalletTransactions"
@deposit-withdrawn="callWithdraw"
></ListingComponent>
</div> </div>
<LoadingComponent <LoadingComponent
v-if="loadingRelease" v-if="loadingRelease"

28
src/views/ManageBidsView.vue
View File

@ -3,28 +3,27 @@ import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue"; import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue"; import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
import { ref, watch, onMounted } from "vue"; import { ref, watch, onMounted } from "vue";
import { import {
listValidDepositTransactionsByWalletAddress, listValidDepositTransactionsByWalletAddress,
listAllTransactionByWalletAddress, listAllTransactionByWalletAddress,
getActiveLockAmount, checkUnreleasedLock,
} from "@/blockchain/wallet"; } from "@/blockchain/wallet";
import { withdrawDeposit } from "@/blockchain/buyerMethods"; import { withdrawDeposit } from "@/blockchain/buyerMethods";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction"; import type { WalletTransaction } from "@/model/WalletTransaction";
import router from "@/router/index"; import router from "@/router/index";
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const { walletAddress, networkName } = storeToRefs(etherStore); const { walletAddress, networkName } = storeToRefs(etherStore);
const loadingWithdraw = ref<boolean>(false); const loadingWithdraw = ref<boolean>(false);
const showAlert = ref<boolean>(false);
const depositList = ref<ValidDeposit[]>([]); const depositList = ref<ValidDeposit[]>([]);
const transactionsList = ref<WalletTransaction[]>([]); const transactionsList = ref<WalletTransaction[]>([]);
const activeLockAmount = ref<number>(0); const showAlert = ref<boolean>(false);
const callWithdraw = async (amount: string) => { const callWithdraw = async (amount: string) => {
if (amount) { if (amount) {
@ -39,7 +38,6 @@ const callWithdraw = async (amount: string) => {
if (withdraw) { if (withdraw) {
console.log("Saque realizado!"); console.log("Saque realizado!");
await getWalletTransactions(); await getWalletTransactions();
showAlert.value = true;
} else { } else {
console.log("Não foi possível realizar o saque!"); console.log("Não foi possível realizar o saque!");
} }
@ -58,8 +56,6 @@ const getWalletTransactions = async () => {
walletAddress.value walletAddress.value
); );
activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
if (walletDeposits) { if (walletDeposits) {
depositList.value = walletDeposits; depositList.value = walletDeposits;
} }
@ -70,11 +66,25 @@ const getWalletTransactions = async () => {
etherStore.setLoadingWalletTransactions(false); etherStore.setLoadingWalletTransactions(false);
}; };
const checkForUnreleasedLocks = async (): Promise<void> => {
const walletLocks = await checkUnreleasedLock(walletAddress.value);
if (walletLocks) {
showAlert.value = true;
} else {
showAlert.value = false;
}
};
const goToLock = () => {
router.push({ name: "home" });
};
onMounted(async () => { onMounted(async () => {
if (!walletAddress.value) { if (!walletAddress.value) {
router.push({ name: "home" }); router.push({ name: "home" });
} }
await getWalletTransactions(); await getWalletTransactions();
await checkForUnreleasedLocks();
}); });
watch(walletAddress, async () => { watch(walletAddress, async () => {
@ -89,8 +99,9 @@ watch(networkName, async () => {
<template> <template>
<CustomAlert <CustomAlert
v-if="showAlert" v-if="showAlert"
:type="'withdraw'" :type="'redirect'"
@close-alert="showAlert = false" @close-alert="showAlert = false"
@go-to-lock="goToLock()"
/> />
<div class="page"> <div class="page">
<div class="header" v-if="!loadingWithdraw && !walletAddress"> <div class="header" v-if="!loadingWithdraw && !walletAddress">
@ -104,7 +115,6 @@ watch(networkName, async () => {
v-if="!loadingWithdraw && walletAddress" v-if="!loadingWithdraw && walletAddress"
:valid-deposits="depositList" :valid-deposits="depositList"
:wallet-transactions="transactionsList" :wallet-transactions="transactionsList"
:active-lock-amount="activeLockAmount"
@deposit-withdrawn="callWithdraw" @deposit-withdrawn="callWithdraw"
></ListingComponent> ></ListingComponent>
<LoadingComponent <LoadingComponent

22
yarn.lock
View File

@ -1320,26 +1320,6 @@
"@ethersproject/properties" "^5.7.0" "@ethersproject/properties" "^5.7.0"
"@ethersproject/strings" "^5.7.0" "@ethersproject/strings" "^5.7.0"
"@floating-ui/core@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.1.tgz#074182a1d277f94569c50a6b456e62585d463c8e"
integrity sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==
"@floating-ui/dom@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.1.tgz#8f93906e1a3b9f606ce78afb058e874344dcbe07"
integrity sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==
dependencies:
"@floating-ui/core" "^1.2.1"
"@floating-ui/vue@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231"
integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==
dependencies:
"@floating-ui/dom" "^1.2.1"
vue-demi "^0.13.11"
"@headlessui/vue@^1.7.3": "@headlessui/vue@^1.7.3":
version "1.7.3" version "1.7.3"
resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz" resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz"
@ -5243,7 +5223,7 @@ vitest@^0.28.1:
vite-node "0.28.1" vite-node "0.28.1"
why-is-node-running "^2.2.2" why-is-node-running "^2.2.2"
vue-demi@*, vue-demi@^0.13.11: vue-demi@*:
version "0.13.11" version "0.13.11"
resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz" resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A== integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==