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

Merge pull request #1 from doiim/fix-token-dropdowns

Browse Source 
Fix token dropdowns
This commit is contained in:
filipesoccol 2024-11-08 14:42:28 -03:00 committed by GitHub
commit 1d98afbdfb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
49 changed files with 12606 additions and 1503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10222
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -18,12 +18,17 @@
"@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",
"@web3-onboard/injected-wallets": "^2.11.2",
"@web3-onboard/vue": "^2.9.0",
"alchemy-sdk": "^2.3.0", "alchemy-sdk": "^2.3.0",
"axios": "^1.2.1", "axios": "^1.2.1",
"crc": "^3.8.0", "crc": "^3.8.0",
"ethers": "^6.13.4",
"marked": "^4.2.12", "marked": "^4.2.12",
"pinia": "^2.0.23", "pinia": "^2.0.23",
"qrcode": "^1.5.1", "qrcode": "^1.5.1",
"viem": "2.x",
"vite-svg-loader": "^5.1.0",
"vue": "^3.2.41", "vue": "^3.2.41",
"vue-markdown": "^2.2.4", "vue-markdown": "^2.2.4",
"vue-router": "^4.1.5" "vue-router": "^4.1.5"
@ -49,7 +54,6 @@
"autoprefixer": "^10.4.12", "autoprefixer": "^10.4.12",
"eslint": "^8.22.0", "eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0", "eslint-plugin-vue": "^9.3.0",
"ethers": "^5.7.2",
"jsdom": "^21.1.0", "jsdom": "^21.1.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.18", "postcss": "^8.4.18",

66
src/App.vue
View File

@ -1,20 +1,62 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRoute } from "vue-router";
import TopBar from "@/components/TopBar/TopBar.vue"; import TopBar from "@/components/TopBar/TopBar.vue";
import SpinnerComponent from "@/components/SpinnerComponent.vue"; import SpinnerComponent from "@/components/SpinnerComponent.vue";
import { init, useOnboard } from "@web3-onboard/vue";
import injectedModule from "@web3-onboard/injected-wallets";
import { Networks } from "./model/Networks";
import { NetworkEnum } from "./model/NetworkEnum";
const route = useRoute();
const injected = injectedModule();
const web3Onboard = init({
wallets: [injected],
chains: [
{
id: Networks[NetworkEnum.sepolia].chainId,
token: "ETH",
label: "Sepolia",
rpcUrl: import.meta.env.VITE_SEPOLIA_API_URL,
},
{
id: Networks[NetworkEnum.rootstock].chainId,
token: "tRBTC",
label: "Rootstock Testnet",
rpcUrl: import.meta.env.VITE_ROOTSTOCK_API_URL,
},
],
connect: {
autoConnectLastWallet: true,
},
});
const { connectedWallet } = useOnboard();
if (!connectedWallet) {
web3Onboard.connectWallet();
}
</script> </script>
<template> <template>
<TopBar /> <div class="p-3 sm:p-4 md:p-8">
<RouterView v-slot="{ Component }"> <TopBar />
<template v-if="Component"> <RouterView v-slot="{ Component }">
<Suspense> <template v-if="Component">
<component :is="Component"></component> <Transition name="page" mode="out-in" appear>
<template #fallback> <div :key="route.fullPath">
<div class="flex w-full h-full justify-center items-center"> <Suspense>
<SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent> <template #default>
<component :is="Component" />
</template>
<template #fallback>
<div class="flex w-full h-full justify-center items-center">
<SpinnerComponent :width="'16'" :height="'16'" />
</div>
</template>
</Suspense>
</div> </div>
</template> </Transition>
</Suspense> </template>
</template> </RouterView>
</RouterView> </div>
</template> </template>

BIN
src/assets/Trial and expirations.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

3
src/assets/chevron.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="chevronDown" fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 508 B

2
src/assets/chevronDown.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="currentColor"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 484 B

After

Width:  |  Height:  |  Size: 491 B

3
src/assets/chevronDownBlack.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 484 B

2
src/assets/chevronUp.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3536 7.35355C13.1583 7.54882 12.8417 7.54882 12.6464 7.35355L7 1.70711L1.35355 7.35355C1.15829 7.54881 0.841709 7.54881 0.646446 7.35355C0.451184 7.15829 0.451184 6.84171 0.646446 6.64645L6.64645 0.646446C6.84171 0.451184 7.15829 0.451184 7.35355 0.646446L13.3536 6.64645C13.5488 6.84171 13.5488 7.15829 13.3536 7.35355Z" fill="#111827"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3536 7.35355C13.1583 7.54882 12.8417 7.54882 12.6464 7.35355L7 1.70711L1.35355 7.35355C1.15829 7.54881 0.841709 7.54881 0.646446 7.35355C0.451184 7.15829 0.451184 6.84171 0.646446 6.64645L6.64645 0.646446C6.84171 0.451184 7.15829 0.451184 7.35355 0.646446L13.3536 6.64645C13.5488 6.84171 13.5488 7.15829 13.3536 7.35355Z" fill="currentColor"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 493 B

After

Width:  |  Height:  |  Size: 498 B

8
src/assets/githubIcon.svg
View File

@ -1,3 +1,7 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00016 0.333496C3.31816 0.333496 0.333496 3.32283 0.333496 7.0115C0.333496 9.9615 2.2435 12.4648 4.89283 13.3475C5.22616 13.4088 5.3475 13.2028 5.3475 13.0255C5.3475 12.8675 5.34216 12.4468 5.33883 11.8902C3.48416 12.2935 3.09283 10.9948 3.09283 10.9948C2.79016 10.2228 2.35283 10.0175 2.35283 10.0175C1.7475 9.60416 2.39883 9.61216 2.39883 9.61216C3.0675 9.65883 3.4195 10.3002 3.4195 10.3002C4.01416 11.3202 4.98016 11.0255 5.3595 10.8548C5.42083 10.4235 5.59283 10.1295 5.7835 9.96283C4.3035 9.79416 2.74683 9.22083 2.74683 6.66216C2.74683 5.9335 3.00683 5.33683 3.43283 4.87016C3.36416 4.7015 3.1355 4.02216 3.49816 3.1035C3.49816 3.1035 4.05816 2.9235 5.3315 3.7875C5.87534 3.63917 6.43645 3.56362 7.00016 3.56283C7.56683 3.5655 8.13683 3.6395 8.6695 3.7875C9.94216 2.9235 10.5008 3.10283 10.5008 3.10283C10.8648 4.02216 10.6355 4.7015 10.5675 4.87016C10.9942 5.33683 11.2528 5.9335 11.2528 6.66216C11.2528 9.2275 9.6935 9.79216 8.20883 9.9575C8.44816 10.1635 8.66083 10.5708 8.66083 11.1942C8.66083 12.0862 8.65283 12.8068 8.65283 13.0255C8.65283 13.2042 8.77283 13.4122 9.1115 13.3468C10.439 12.9016 11.5931 12.0504 12.4105 10.9135C13.2279 9.77669 13.6674 8.41171 13.6668 7.0115C13.6668 3.32283 10.6815 0.333496 7.00016 0.333496Z" fill="#1F2937"/> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.41819,0,0,1.41819,0.0724699,0.290651)">
<path d="M7,0.333C3.318,0.333 0.333,3.323 0.333,7.012C0.333,9.961 2.244,12.465 4.893,13.348C5.226,13.409 5.348,13.203 5.348,13.025C5.348,12.868 5.342,12.447 5.339,11.89C3.484,12.294 3.093,10.995 3.093,10.995C2.79,10.223 2.353,10.018 2.353,10.018C1.748,9.604 2.399,9.612 2.399,9.612C3.068,9.659 3.42,10.3 3.42,10.3C4.014,11.32 4.98,11.025 5.36,10.855C5.421,10.424 5.593,10.13 5.784,9.963C4.304,9.794 2.747,9.221 2.747,6.662C2.747,5.934 3.007,5.337 3.433,4.87C3.364,4.702 3.136,4.022 3.498,3.104C3.498,3.104 4.058,2.924 5.332,3.788C5.875,3.639 6.436,3.564 7,3.563C7.567,3.566 8.137,3.64 8.67,3.788C9.942,2.924 10.501,3.103 10.501,3.103C10.865,4.022 10.636,4.702 10.568,4.87C10.994,5.337 11.253,5.934 11.253,6.662C11.253,9.227 9.694,9.792 8.209,9.958C8.448,10.164 8.661,10.571 8.661,11.194C8.661,12.086 8.653,12.807 8.653,13.025C8.653,13.204 8.773,13.412 9.112,13.347C10.439,12.902 11.593,12.05 12.411,10.914C13.228,9.777 13.667,8.412 13.667,7.012C13.667,3.323 10.682,0.333 7,0.333Z" style="fill:rgb(31,41,55);"/>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

8
src/assets/linkedinIcon.svg
View File

@ -1 +1,7 @@
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"> <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/></svg> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.426716,0,0,0.426716,-0.646464,-0.646464)">
<path d="M41,4L9,4C6.24,4 4,6.24 4,9L4,41C4,43.76 6.24,46 9,46L41,46C43.76,46 46,43.76 46,41L46,9C46,6.24 43.76,4 41,4ZM17,20L17,39L11,39L11,20L17,20ZM11,14.47C11,13.07 12.2,12 14,12C15.8,12 16.93,13.07 17,14.47C17,15.87 15.88,17 14,17C12.2,17 11,15.87 11,14.47ZM39,39L33,39L33,29C33,27 32,25 29.5,24.96L29.42,24.96C27,24.96 26,27.02 26,29L26,39L20,39L20,20L26,20L26,22.56C26,22.56 27.93,20 31.81,20C35.78,20 39,22.73 39,28.26L39,39Z" style="fill-rule:nonzero;"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 501 B

After

Width:  |  Height:  |  Size: 1001 B

5
src/assets/main.css
View File

@ -6,7 +6,6 @@
#app { #app {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem;
height: fit-content; height: fit-content;
min-height: 100vh; min-height: 100vh;
background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%); background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
@ -25,3 +24,7 @@ a,
background-color: hsla(160, 100%, 37%, 0.2); background-color: hsla(160, 100%, 37%, 0.2);
} }
} }
.main-container {
@apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
}

4
src/assets/sepolia.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8.16801 2.56435C8.09081 2.43177 7.89923 2.4319 7.82221 2.56458L4.82431 7.72899C4.76983 7.82284 4.80013 7.94301 4.89259 7.99981L7.89038 9.84139C7.95451 9.88079 8.03533 9.88085 8.09952 9.84154L11.1069 7.99986C11.1996 7.94308 11.23 7.82262 11.1752 7.72866L8.16801 2.56435ZM8.08754 10.7831C8.02182 10.8253 7.93759 10.8253 7.87181 10.7833L5.51555 9.27665C5.33379 9.16043 5.1222 9.37463 5.24065 9.55495L7.8123 13.4701C7.89136 13.5905 8.06789 13.5903 8.14678 13.4699L10.7098 9.55566C10.828 9.37517 10.6161 9.16127 10.4345 9.27775L8.08754 10.7831Z" fill="#3B82F6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.82232 2.56456C7.89934 2.43187 8.09092 2.43174 8.16812 2.56432L11.1754 7.72864C11.2301 7.8226 11.1997 7.94305 11.107 7.99984L8.09963 9.84152C8.03544 9.88082 7.95463 9.88077 7.89049 9.84137L4.8927 7.99979C4.80024 7.94299 4.76994 7.82282 4.82442 7.72897L7.82232 2.56456ZM7.87193 10.7833C7.9377 10.8253 8.02193 10.8253 8.08765 10.7831L10.4346 9.27773C10.6162 9.16125 10.8281 9.37515 10.7099 9.55563L8.1469 13.4698C8.06801 13.5903 7.89147 13.5904 7.81241 13.4701L5.24076 9.55492C5.12232 9.3746 5.3339 9.1604 5.51566 9.27662L7.87193 10.7833Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

21
src/assets/transitions.css Normal file
View File

@ -0,0 +1,21 @@
.dropdown-enter-active,
.dropdown-leave-active {
transition: all 0.3s ease;
}
.dropdown-enter-from,
.dropdown-leave-to {
opacity: 0;
transform: translateY(-10px);
}
.page-enter-active,
.page-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
transform: translateY(15px);
}

8
src/assets/twitterIcon.svg
View File

@ -1,3 +1,7 @@
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path d="M4.52683 11.5021C9.55816 11.5021 12.3102 7.33344 12.3102 3.71877C12.3102 3.6001 12.3102 3.4821 12.3022 3.36544C12.8376 2.97779 13.2997 2.49784 13.6668 1.9481C13.1675 2.16944 12.6379 2.31461 12.0955 2.37877C12.6666 2.03681 13.094 1.499 13.2982 0.865436C12.7613 1.18403 12.174 1.40859 11.5615 1.52944C11.1491 1.09061 10.6035 0.799992 10.0092 0.702573C9.41498 0.605153 8.80517 0.706369 8.27424 0.990549C7.74331 1.27473 7.32088 1.72602 7.07236 2.27454C6.82383 2.82307 6.76307 3.43823 6.8995 4.02477C5.81189 3.97026 4.7479 3.68765 3.77659 3.19528C2.80529 2.70291 1.94838 2.01179 1.2615 1.16677C0.911708 1.7689 0.804555 2.48172 0.961853 3.16008C1.11915 3.83844 1.52907 4.43135 2.10816 4.8181C1.673 4.80551 1.24725 4.68844 0.866829 4.47677V4.51144C0.867089 5.14297 1.08576 5.75497 1.48576 6.24367C1.88576 6.73238 2.44247 7.06769 3.0615 7.19277C2.6587 7.30258 2.23609 7.31854 1.82616 7.23944C2.00094 7.78309 2.34128 8.2585 2.79958 8.59918C3.25788 8.93986 3.81121 9.12875 4.38216 9.13944C3.81491 9.58515 3.16535 9.91466 2.47065 10.1091C1.77594 10.3036 1.04971 10.3592 0.333496 10.2728C1.58457 11.0757 3.04029 11.5015 4.52683 11.4994" fill="#1F2937"/> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.44084,0,0,1.44084,-0.0860978,1.23349)">
<path d="M4.527,11.502C9.558,11.502 12.31,7.333 12.31,3.719C12.31,3.6 12.31,3.482 12.302,3.365C12.838,2.978 13.3,2.498 13.667,1.948C13.168,2.169 12.638,2.315 12.096,2.379C12.667,2.037 13.094,1.499 13.298,0.865C12.761,1.184 12.174,1.409 11.562,1.529C11.149,1.091 10.604,0.8 10.009,0.703C9.415,0.605 8.805,0.706 8.274,0.991C7.743,1.275 7.321,1.726 7.072,2.275C6.824,2.823 6.763,3.438 6.9,4.025C5.812,3.97 4.748,3.688 3.777,3.195C2.805,2.703 1.948,2.012 1.262,1.167C0.912,1.769 0.805,2.482 0.962,3.16C1.119,3.838 1.529,4.431 2.108,4.818C1.673,4.806 1.247,4.688 0.867,4.477L0.867,4.511C0.867,5.143 1.086,5.755 1.486,6.244C1.886,6.732 2.442,7.068 3.062,7.193C2.659,7.303 2.236,7.319 1.826,7.239C2.001,7.783 2.341,8.259 2.8,8.599C3.258,8.94 3.811,9.129 4.382,9.139C3.815,9.585 3.165,9.915 2.471,10.109C1.776,10.304 1.05,10.359 0.333,10.273C1.585,11.076 3.04,11.502 4.527,11.499" style="fill:rgb(31,41,55);fill-rule:nonzero;"/>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

55
src/blockchain/__tests__/addresses.spec.ts
View File

@ -4,8 +4,6 @@ import {
getP2PixAddress, getP2PixAddress,
getProviderUrl, getProviderUrl,
isPossibleNetwork, isPossibleNetwork,
possibleChains,
network2Chain,
} from "../addresses"; } from "../addresses";
import { setActivePinia, createPinia } from "pinia"; import { setActivePinia, createPinia } from "pinia";
@ -18,9 +16,6 @@ describe("addresses.ts types", () => {
expectTypeOf(getP2PixAddress).toBeFunction(); expectTypeOf(getP2PixAddress).toBeFunction();
expectTypeOf(getProviderUrl).toBeFunction(); expectTypeOf(getProviderUrl).toBeFunction();
expectTypeOf(isPossibleNetwork).toBeFunction(); expectTypeOf(isPossibleNetwork).toBeFunction();
expectTypeOf(possibleChains).toBeObject();
expectTypeOf(network2Chain).toBeObject();
}); });
}); });
@ -31,7 +26,7 @@ describe("addresses.ts functions", () => {
it("getTokenAddress Ethereum", () => { it("getTokenAddress Ethereum", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.ethereum); etherStore.setNetworkId(NetworkEnum.sepolia);
expect(getTokenAddress(TokenEnum.BRZ)).toBe( expect(getTokenAddress(TokenEnum.BRZ)).toBe(
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00" "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
); );
@ -39,12 +34,21 @@ describe("addresses.ts functions", () => {
it("getTokenAddress Polygon", () => { it("getTokenAddress Polygon", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.polygon); etherStore.setNetworkId(NetworkEnum.polygon);
expect(getTokenAddress(TokenEnum.BRZ)).toBe( expect(getTokenAddress(TokenEnum.BRZ)).toBe(
"0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29" "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29"
); );
}); });
it("getTokenAddress Rootstock", () => {
const etherStore = useEtherStore();
etherStore.setNetworkId(NetworkEnum.rootstock);
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
"0xfE841c74250e57640390f46d914C88d22C51e82e"
);
});
it("getTokenAddress Default", () => { it("getTokenAddress Default", () => {
expect(getTokenAddress(TokenEnum.BRZ)).toBe( expect(getTokenAddress(TokenEnum.BRZ)).toBe(
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00" "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
@ -53,7 +57,7 @@ describe("addresses.ts functions", () => {
it("getP2PixAddress Ethereum", () => { it("getP2PixAddress Ethereum", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.ethereum); etherStore.setNetworkId(NetworkEnum.sepolia);
expect(getP2PixAddress()).toBe( expect(getP2PixAddress()).toBe(
"0x2414817FF64A114d91eCFA16a834d3fCf69103d4" "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
); );
@ -61,12 +65,20 @@ describe("addresses.ts functions", () => {
it("getP2PixAddress Polygon", () => { it("getP2PixAddress Polygon", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.polygon); etherStore.setNetworkId(NetworkEnum.polygon);
expect(getP2PixAddress()).toBe( expect(getP2PixAddress()).toBe(
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00" "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
); );
}); });
it("getP2PixAddress Rootstock", () => {
const etherStore = useEtherStore();
etherStore.setNetworkId(NetworkEnum.rootstock);
expect(getP2PixAddress()).toBe(
"0x98ba35eb14b38D6Aa709338283af3e922476dE34"
);
});
it("getP2PixAddress Default", () => { it("getP2PixAddress Default", () => {
expect(getP2PixAddress()).toBe( expect(getP2PixAddress()).toBe(
"0x2414817FF64A114d91eCFA16a834d3fCf69103d4" "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
@ -75,30 +87,35 @@ describe("addresses.ts functions", () => {
it("getProviderUrl Ethereum", () => { it("getProviderUrl Ethereum", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.ethereum); etherStore.setNetworkId(NetworkEnum.sepolia);
expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL); expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
}); });
it("getProviderUrl Polygon", () => { it("getProviderUrl Polygon", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.polygon); etherStore.setNetworkId(NetworkEnum.polygon);
expect(getProviderUrl()).toBe(import.meta.env.VITE_MUMBAI_API_URL); expect(getProviderUrl()).toBe(import.meta.env.VITE_MUMBAI_API_URL);
}); });
it("getProviderUrl Rootstock", () => {
const etherStore = useEtherStore();
etherStore.setNetworkId(NetworkEnum.rootstock);
expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
});
it("getProviderUrl Default", () => { it("getProviderUrl Default", () => {
expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL); expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
}); });
it("isPossibleNetwork Returns", () => { it("isPossibleNetwork Returns", () => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
etherStore.setNetworkName(NetworkEnum.ethereum); etherStore.setNetworkId(NetworkEnum.sepolia);
expect(isPossibleNetwork("0x5")).toBe(true); expect(isPossibleNetwork(0x5)).toBe(true);
expect(isPossibleNetwork("5")).toBe(true); expect(isPossibleNetwork(5)).toBe(true);
expect(isPossibleNetwork("0x13881")).toBe(true); expect(isPossibleNetwork(0x13881)).toBe(true);
expect(isPossibleNetwork("80001")).toBe(true); expect(isPossibleNetwork(80001)).toBe(true);
expect(isPossibleNetwork("")).toBe(false); expect(isPossibleNetwork(NaN)).toBe(false);
expect(isPossibleNetwork(" ")).toBe(false); expect(isPossibleNetwork(0x55)).toBe(false);
expect(isPossibleNetwork("0x55")).toBe(false);
}); });
}); });

101
src/blockchain/addresses.ts
View File

@ -1,103 +1,70 @@
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum"; import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
import { JsonRpcProvider } from "ethers";
const ethereumTokens: { [key in TokenEnum]: string } = { const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289", [NetworkEnum.sepolia]: {
BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289", BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
} // BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
},
const polygonTokens: { [key in TokenEnum]: string } = { [NetworkEnum.rootstock]: {
BRZ: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29", BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
BRX: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29", // BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
} },
};
const rootstockTokens: { [key in TokenEnum]: string } = {
BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
}
export const getTokenByAddress = (address: string) => { export const getTokenByAddress = (address: string) => {
for (const token of Object.keys(ethereumTokens)) { for (const network of Object.values(NetworkEnum).filter(
if (address === ethereumTokens[token as TokenEnum]) { (v) => !isNaN(Number(v))
return token as TokenEnum; )) {
} for (const token of Object.keys(Tokens[network as NetworkEnum])) {
} if (address === Tokens[network as NetworkEnum][token as TokenEnum]) {
return token as TokenEnum;
for (const token of Object.keys(polygonTokens)) { }
if (address === ethereumTokens[token as TokenEnum]) {
return token as TokenEnum;
}
}
for (const token of Object.keys(rootstockTokens)) {
if (address === ethereumTokens[token as TokenEnum]) {
return token as TokenEnum;
} }
} }
return null; return null;
} };
const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => { const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
return Tokens[network ? network : etherStore.networkName][token];
const possibleTokenAddresses: { [key: string]: { [key in TokenEnum]: string } } = {
Ethereum: ethereumTokens,
Polygon: polygonTokens,
Rootstock: rootstockTokens,
};
return possibleTokenAddresses[network ? network : etherStore.networkName][token];
}; };
const getP2PixAddress = (network?: NetworkEnum): string => { const getP2PixAddress = (network?: NetworkEnum): string => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
const possibleP2PixAddresses: { [key: string]: string } = { [NetworkEnum.sepolia]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
Ethereum: "0xb7cD135F5eFD9760981e02E2a898790b688939fe", [NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
Rootstock: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
}; };
return possibleP2PixAddresses[network ? network : etherStore.networkName]; return possibleP2PixAddresses[network ? network : etherStore.networkName];
}; };
const getProviderUrl = (): string => { const getProviderUrl = (network?: NetworkEnum): string => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const possibleProvidersUrls: { [key: string]: string } = { const possibleProvidersUrls: { [key in NetworkEnum]: string } = {
Ethereum: import.meta.env.VITE_SEPOLIA_API_URL, [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_API_URL,
Polygon: import.meta.env.VITE_MUMBAI_API_URL, [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_API_URL,
Rootstock: import.meta.env.VITE_RSK_API_URL,
}; };
return possibleProvidersUrls[etherStore.networkName]; return possibleProvidersUrls[network || etherStore.networkName];
}; };
const possibleChains: { [key: string]: NetworkEnum } = { const getProviderByNetwork = (network: NetworkEnum): JsonRpcProvider => {
"11155111": NetworkEnum.ethereum, console.log("network", network);
"80001": NetworkEnum.polygon, return new JsonRpcProvider(getProviderUrl(network), network);
"31": NetworkEnum.rootstock,
}; };
const network2Chain: { [key: string]: string } = { const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
Ethereum: "0xAA36A7", return Number(networkChain) in NetworkEnum;
Polygon: "0x13881",
Localhost: "0x7a69",
Rootstock: "0x1f",
};
const isPossibleNetwork = (networkChain: string): boolean => {
if (Object.keys(possibleChains).includes(networkChain.toString())) {
return true;
}
return false;
}; };
export { export {
getTokenAddress, getTokenAddress,
getProviderUrl, getProviderUrl,
possibleChains,
network2Chain,
isPossibleNetwork, isPossibleNetwork,
getP2PixAddress, getP2PixAddress,
getProviderByNetwork,
}; };

64
src/blockchain/buyerMethods.ts
View File

@ -1,12 +1,17 @@
import { useEtherStore } from "@/store/ether";
import { getContract, getProvider } from "./provider"; import { getContract, getProvider } from "./provider";
import { getP2PixAddress, getTokenAddress } from "./addresses"; import { getP2PixAddress, getTokenAddress } from "./addresses";
import p2pix from "@/utils/smart_contract_files/P2PIX.json"; import p2pix from "@/utils/smart_contract_files/P2PIX.json";
import { BigNumber, ethers } from "ethers"; import {
import { parseEther } from "ethers/lib/utils"; solidityPackedKeccak256,
encodeBytes32String,
Signature,
Contract,
getBytes,
Wallet,
parseEther,
} from "ethers";
import type { TokenEnum } from "@/model/NetworkEnum"; import type { TokenEnum } from "@/model/NetworkEnum";
const addLock = async ( const addLock = async (
@ -14,16 +19,11 @@ const addLock = async (
token: string, token: string,
amount: number amount: number
): Promise<string> => { ): Promise<string> => {
const etherStore = useEtherStore(); const p2pContract = await getContract();
const p2pContract = getContract();
const lock = await p2pContract.lock( const lock = await p2pContract.lock(
seller, seller,
token, token,
etherStore.walletAddress, // String "0x70997970C51812dc3A010C7d01b50e0d17dc79C8" (Example)
ethers.constants.AddressZero, // String "0x0000000000000000000000000000000000000000"
0,
parseEther(String(amount)), // BigNumber parseEther(String(amount)), // BigNumber
[], [],
[] []
@ -36,48 +36,41 @@ const addLock = async (
}; };
const releaseLock = async ( const releaseLock = async (
pixKey: number, pixKey: string,
amount: number, amount: number,
e2eId: string, e2eId: string,
lockId: string lockId: string
): Promise<any> => { ): Promise<any> => {
const mockBacenSigner = new ethers.Wallet( const mockBacenSigner = new Wallet(
"0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80" "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
); );
const messageToSign = ethers.utils.solidityKeccak256( const messageToSign = solidityPackedKeccak256(
["uint160", "uint256", "bytes32"], ["bytes32", "uint256", "bytes32"],
[ [pixKey, parseEther(String(amount)), encodeBytes32String(e2eId)]
pixKey,
parseEther(String(amount)),
ethers.utils.formatBytes32String(e2eId),
]
); );
const messageHashBytes = ethers.utils.arrayify(messageToSign); const messageHashBytes = getBytes(messageToSign);
const flatSig = await mockBacenSigner.signMessage(messageHashBytes); const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
const provider = getProvider(); const provider = getProvider();
const sig = ethers.utils.splitSignature(flatSig); const sig = Signature.from(flatSig);
console.log(sig);
const signer = provider.getSigner(); const signer = await provider.getSigner();
const p2pContract = new ethers.Contract(getP2PixAddress(), p2pix.abi, signer); const p2pContract = new Contract(getP2PixAddress(), p2pix.abi, signer);
const release = await p2pContract.release( const release = await p2pContract.release(
BigNumber.from(lockId), BigInt(lockId),
ethers.constants.AddressZero, encodeBytes32String(e2eId),
ethers.utils.formatBytes32String(e2eId), flatSig
sig.r,
sig.s,
sig.v
); );
await release.wait(); await release.wait();
return release; return release;
}; };
const cancelDeposit = async (depositId: BigNumber): Promise<any> => { const cancelDeposit = async (depositId: bigint): Promise<any> => {
const contract = getContract(); const contract = await getContract();
const cancel = await contract.cancelDeposit(depositId); const cancel = await contract.cancelDeposit(depositId);
await cancel.wait(); await cancel.wait();
@ -85,8 +78,11 @@ const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
return cancel; return cancel;
}; };
const withdrawDeposit = async (amount: string, token: TokenEnum): Promise<any> => { const withdrawDeposit = async (
const contract = getContract(); amount: string,
token: TokenEnum
): Promise<any> => {
const contract = await getContract();
const withdraw = await contract.withdraw( const withdraw = await contract.withdraw(
getTokenAddress(token), getTokenAddress(token),

166
src/blockchain/events.ts
View File

@ -1,69 +1,64 @@
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { Contract, ethers } from "ethers"; import { Contract, formatEther, Interface } from "ethers";
import p2pix from "@/utils/smart_contract_files/P2PIX.json"; import p2pix from "@/utils/smart_contract_files/P2PIX.json";
import { formatEther } from "ethers/lib/utils";
import { getContract } from "./provider"; import { getContract } from "./provider";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import { getP2PixAddress, getTokenAddress } from "./addresses"; import {
getP2PixAddress,
getProviderByNetwork,
getTokenAddress,
} from "./addresses";
import { NetworkEnum } from "@/model/NetworkEnum"; import { NetworkEnum } from "@/model/NetworkEnum";
import type { UnreleasedLock } from "@/model/UnreleasedLock"; import type { UnreleasedLock } from "@/model/UnreleasedLock";
import type { Pix } from "@/model/Pix"; 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(
import.meta.env.VITE_SEPOLIA_API_URL,
11155111
); // sepolia provider
const mumbaiProvider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_MUMBAI_API_URL,
80001
); // mumbai provider
const rootstockProvider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_RSK_API_URL,
31
); // rootstock provider
const p2pContractSepolia = new ethers.Contract(
getP2PixAddress(NetworkEnum.ethereum),
p2pix.abi,
sepoliaProvider
);
const p2pContractMumbai = new ethers.Contract(
getP2PixAddress(NetworkEnum.polygon),
p2pix.abi,
mumbaiProvider
);
const p2pContractRootstock = new ethers.Contract(
getP2PixAddress(NetworkEnum.rootstock),
p2pix.abi,
rootstockProvider
);
etherStore.setLoadingNetworkLiquidity(true); etherStore.setLoadingNetworkLiquidity(true);
const depositListSepolia = await getValidDeposits( const depositLists: ValidDeposit[][] = [];
getTokenAddress(etherStore.selectedToken, NetworkEnum.ethereum),
p2pContractSepolia
);
// const depositListMumbai = await getValidDeposits(
// getTokenAddress(etherStore.selectedToken, NetworkEnum.polygon),
// p2pContractMumbai
// );
const depositListRootstock = await getValidDeposits(
getTokenAddress(etherStore.selectedToken, NetworkEnum.rootstock),
p2pContractRootstock
);
etherStore.setDepositsValidListSepolia(depositListSepolia); for (const network of Object.values(NetworkEnum).filter(
// etherStore.setDepositsValidListMumbai(depositListMumbai); (v) => !isNaN(Number(v))
etherStore.setDepositsValidListRootstock(depositListRootstock); )) {
console.log("getNetworksLiquidity", network);
const p2pContract = new Contract(
getP2PixAddress(network as NetworkEnum),
p2pix.abi,
getProviderByNetwork(network as NetworkEnum)
);
depositLists.push(
await getValidDeposits(
getTokenAddress(etherStore.selectedToken, network as NetworkEnum),
network as NetworkEnum,
p2pContract
)
);
}
etherStore.setDepositsValidList(depositLists.flat());
etherStore.setLoadingNetworkLiquidity(false); etherStore.setLoadingNetworkLiquidity(false);
}; };
const getPixKey = async (seller: string, token: string): Promise<string> => {
const p2pContract = await getContract();
const pixKeyHex = await p2pContract.getPixTarget(seller, token);
// Remove '0x' prefix and convert hex to UTF-8 string
const bytes = new Uint8Array(
pixKeyHex
.slice(2)
.match(/.{1,2}/g)
.map((byte: string) => parseInt(byte, 16))
);
// Remove null bytes from the end of the string
return new TextDecoder().decode(bytes).replace(/\0/g, "");
};
const getValidDeposits = async ( const getValidDeposits = async (
token: string, token: string,
network: NetworkEnum,
contract?: Contract contract?: Contract
): Promise<ValidDeposit[]> => { ): Promise<ValidDeposit[]> => {
let p2pContract: Contract; let p2pContract: Contract;
@ -71,46 +66,44 @@ const getValidDeposits = async (
if (contract) { if (contract) {
p2pContract = contract; p2pContract = contract;
} else { } else {
p2pContract = getContract(true); p2pContract = await getContract(true);
} }
const filterDeposits = p2pContract.filters.DepositAdded(null); const filterDeposits = p2pContract.filters.DepositAdded(null);
const eventsDeposits = await p2pContract.queryFilter(filterDeposits); const eventsDeposits = await p2pContract.queryFilter(
filterDeposits
if (!contract) p2pContract = getContract(); // get metamask provider contract // 0,
// "latest"
);
if (!contract) p2pContract = await getContract(); // get metamask provider contract
const depositList: { [key: string]: ValidDeposit } = {}; const depositList: { [key: string]: ValidDeposit } = {};
await Promise.all( for (const deposit of eventsDeposits) {
eventsDeposits.map(async (deposit) => { const IPix2Pix = new Interface(p2pix.abi);
// Get liquidity only for the selected token const decoded = IPix2Pix.parseLog({
if (deposit.args?.token != token) return null; topics: deposit.topics,
data: deposit.data,
});
// Get liquidity only for the selected token
if (decoded?.args.token != token) continue;
const mappedBalance = await p2pContract.getBalance(
decoded.args.seller,
token
);
let validDeposit: ValidDeposit | null = null;
const mappedBalance = await p2pContract.getBalance( if (mappedBalance) {
deposit.args?.seller, validDeposit = {
token token: token,
); blockNumber: deposit.blockNumber,
remaining: Number(formatEther(mappedBalance)),
const mappedPixTarget = await p2pContract.getPixTarget( seller: decoded.args.seller,
deposit.args?.seller, network,
token pixKey: "",
); };
}
let validDeposit: ValidDeposit | null = null; if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
}
if (mappedBalance._hex) {
validDeposit = {
token: token,
blockNumber: deposit.blockNumber,
remaining: Number(formatEther(mappedBalance._hex)),
seller: deposit.args?.seller,
pixKey: Number(mappedPixTarget._hex),
};
}
if (validDeposit)
depositList[deposit.args?.seller + token] = validDeposit;
})
);
return Object.values(depositList); return Object.values(depositList);
}; };
@ -118,7 +111,7 @@ const getValidDeposits = async (
const getUnreleasedLockById = async ( const getUnreleasedLockById = async (
lockID: string lockID: string
): Promise<UnreleasedLock> => { ): Promise<UnreleasedLock> => {
const p2pContract = getContract(); const p2pContract = await getContract();
const pixData: Pix = { const pixData: Pix = {
pixKey: "", pixKey: "",
}; };
@ -127,7 +120,7 @@ const getUnreleasedLockById = async (
const pixTarget = lock.pixTarget; const pixTarget = lock.pixTarget;
const amount = formatEther(lock?.amount); const amount = formatEther(lock?.amount);
pixData.pixKey = String(Number(pixTarget)); pixData.pixKey = pixTarget;
pixData.value = Number(amount); pixData.value = Number(amount);
return { return {
@ -136,4 +129,9 @@ const getUnreleasedLockById = async (
}; };
}; };
export { getValidDeposits, getNetworksLiquidity, getUnreleasedLockById }; export {
getValidDeposits,
getNetworksLiquidity,
getUnreleasedLockById,
getPixKey,
};

100
src/blockchain/provider.ts
View File

@ -1,95 +1,27 @@
import { useEtherStore } from "@/store/ether";
import p2pix from "@/utils/smart_contract_files/P2PIX.json"; import p2pix from "@/utils/smart_contract_files/P2PIX.json";
import { updateWalletStatus } from "./wallet"; import { updateWalletStatus } from "./wallet";
import { import { getProviderUrl, getP2PixAddress } from "./addresses";
getProviderUrl, import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
isPossibleNetwork,
possibleChains,
network2Chain,
getP2PixAddress,
} from "./addresses";
import { ethers } from "ethers"; let provider: BrowserProvider | JsonRpcProvider | null = null;
const getProvider = ( const getProvider = (onlyAlchemyProvider: boolean = false) => {
onlyAlchemyProvider: boolean = false if (onlyAlchemyProvider) return new JsonRpcProvider(getProviderUrl()); // alchemy provider
): ethers.providers.Web3Provider | ethers.providers.JsonRpcProvider => { return provider;
const window_ = window as any;
const connection = window_.ethereum;
if (!connection || onlyAlchemyProvider)
return new ethers.providers.JsonRpcProvider(getProviderUrl()); // alchemy provider
return new ethers.providers.Web3Provider(connection); // metamask provider
}; };
const getContract = (onlyAlchemyProvider: boolean = false) => { const getContract = async (onlyAlchemyProvider: boolean = false) => {
const provider = getProvider(onlyAlchemyProvider); const p = getProvider(onlyAlchemyProvider);
const signer = provider.getSigner();
return new ethers.Contract(getP2PixAddress(), p2pix.abi, signer);
};
const connectProvider = async (): Promise<void> => {
const window_ = window as any;
const connection = window_.ethereum;
const provider = getProvider();
if (!(provider instanceof ethers.providers.Web3Provider)) {
window.alert("Please, connect to metamask extension");
return;
}
await updateWalletStatus();
listenToNetworkChange(connection);
listenToWalletChange(connection);
};
const listenToWalletChange = (connection: any): void => {
connection.on("accountsChanged", async () => {
console.log("Changed account!");
updateWalletStatus();
});
};
const listenToNetworkChange = (connection: any) => {
const etherStore = useEtherStore();
connection.on("chainChanged", (networkChain: string) => {
console.log("Changed network!");
if (isPossibleNetwork(networkChain)) {
etherStore.setNetworkName(possibleChains[networkChain]);
updateWalletStatus();
} else {
window.alert("Invalid chain!");
}
});
};
const requestNetworkChange = async (network: string): Promise<boolean> => {
const etherStore = useEtherStore();
if (!etherStore.walletAddress) return true;
try { try {
const window_ = window as any; const signer = await p?.getSigner();
await window_.ethereum.request({ return new Contract(getP2PixAddress(), p2pix.abi, signer);
method: "wallet_switchEthereumChain", } catch (err) {
params: [{ chainId: network2Chain[network] }], // chainId must be in hexadecimal numbers return new Contract(getP2PixAddress(), p2pix.abi, p);
});
} catch {
return false;
} }
return true;
}; };
export { const connectProvider = async (p: any): Promise<void> => {
getProvider, provider = new BrowserProvider(p, "any");
getContract, await updateWalletStatus();
connectProvider,
listenToNetworkChange,
requestNetworkChange,
}; };
export { getProvider, getContract, connectProvider };

35
src/blockchain/sellerMethods.ts
View File

@ -1,42 +1,49 @@
import { getContract, getProvider } from "./provider"; import { getContract, getProvider } from "./provider";
import { getTokenAddress, getP2PixAddress } from "./addresses"; import { getTokenAddress, getP2PixAddress } from "./addresses";
import { parseEther } from "ethers/lib/utils";
import { ethers } from "ethers"; import { encodeBytes32String, Contract, parseEther } from "ethers";
import mockToken from "../utils/smart_contract_files/MockToken.json"; import mockToken from "../utils/smart_contract_files/MockToken.json";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
const approveTokens = async (tokenQty: string): Promise<any> => { const approveTokens = async (tokenQty: string): Promise<any> => {
const provider = getProvider(); const provider = getProvider();
const signer = provider.getSigner(); const signer = await provider?.getSigner();
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const tokenContract = new ethers.Contract( const tokenContract = new Contract(
getTokenAddress(etherStore.selectedToken), getTokenAddress(etherStore.selectedToken),
mockToken.abi, mockToken.abi,
signer signer
); );
const apprv = await tokenContract.approve( // Check if the token is already approved
getP2PixAddress(), const approved = await tokenContract.allowance(
parseEther(tokenQty) await signer?.getAddress(),
getP2PixAddress()
); );
if (approved < parseEther(tokenQty)) {
await apprv.wait(); // Approve tokens
return apprv; const apprv = await tokenContract.approve(
getP2PixAddress(),
parseEther(tokenQty)
);
await apprv.wait();
return true;
}
return true;
}; };
const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => { const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
const p2pContract = getContract(); const p2pContract = await getContract();
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const deposit = await p2pContract.deposit( const deposit = await p2pContract.deposit(
pixKey,
encodeBytes32String(""),
getTokenAddress(etherStore.selectedToken), getTokenAddress(etherStore.selectedToken),
parseEther(tokenQty), parseEther(tokenQty),
pixKey, true
true,
ethers.utils.formatBytes32String("")
); );
await deposit.wait(); await deposit.wait();

225
src/blockchain/wallet.ts
View File

@ -1,12 +1,19 @@
import {
Contract,
formatEther,
getAddress,
Interface,
Log,
LogDescription,
} from "ethers";
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, isPossibleNetwork } from "./addresses";
import mockToken from "@/utils/smart_contract_files/MockToken.json"; import mockToken from "@/utils/smart_contract_files/MockToken.json";
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
import { ethers, type Event, type BigNumber } from "ethers";
import { formatEther } from "ethers/lib/utils";
import { getValidDeposits } from "./events"; import { getValidDeposits } from "./events";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
@ -14,38 +21,40 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
import type { UnreleasedLock } from "@/model/UnreleasedLock"; import type { UnreleasedLock } from "@/model/UnreleasedLock";
import type { Pix } from "@/model/Pix"; import type { Pix } from "@/model/Pix";
const updateWalletStatus = async (): Promise<void> => { export const updateWalletStatus = async (): Promise<void> => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const provider = getProvider(); const provider = await getProvider();
const signer = provider.getSigner(); const signer = await provider?.getSigner();
const { chainId } = await provider.getNetwork(); const { chainId } = await provider?.getNetwork();
if (!isPossibleNetwork(chainId.toString())) { if (!isPossibleNetwork(Number(chainId))) {
window.alert("Invalid chain!:" + chainId); window.alert("Invalid chain!:" + chainId);
return; return;
} }
etherStore.setNetworkName(possibleChains[chainId]); etherStore.setNetworkId(Number(chainId));
const mockTokenContract = new ethers.Contract( const mockTokenContract = new Contract(
getTokenAddress(etherStore.selectedToken), getTokenAddress(etherStore.selectedToken),
mockToken.abi, mockToken.abi,
signer signer
); );
const walletAddress = await provider.send("eth_requestAccounts", []); const walletAddress = await provider?.send("eth_requestAccounts", []);
const balance = await mockTokenContract.balanceOf(walletAddress[0]); const balance = await mockTokenContract.balanceOf(walletAddress[0]);
etherStore.setBalance(formatEther(balance)); etherStore.setBalance(formatEther(balance));
etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0])); etherStore.setWalletAddress(getAddress(walletAddress[0]));
}; };
const listValidDepositTransactionsByWalletAddress = async ( export const listValidDepositTransactionsByWalletAddress = async (
walletAddress: string walletAddress: string
): Promise<ValidDeposit[]> => { ): Promise<ValidDeposit[]> => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const walletDeposits = await getValidDeposits(getTokenAddress(etherStore.selectedToken)); const walletDeposits = await getValidDeposits(
getTokenAddress(etherStore.selectedToken),
etherStore.networkName
);
if (walletDeposits) { if (walletDeposits) {
return walletDeposits return walletDeposits
.filter((deposit) => deposit.seller == walletAddress) .filter((deposit) => deposit.seller == walletAddress)
@ -57,68 +66,87 @@ const listValidDepositTransactionsByWalletAddress = async (
return []; return [];
}; };
const getLockStatus = async (id: [BigNumber]): Promise<number> => { const getLockStatus = async (id: [BigInt]): Promise<number> => {
const p2pContract = getContract(); const p2pContract = await getContract();
const res = await p2pContract.getLocksStatus([id]); const res = await p2pContract.getLocksStatus([id]);
return res[1][0]; return res[1][0];
}; };
const filterLockStatus = async ( const filterLockStatus = async (
transactions: Event[] transactions: Log[]
): Promise<WalletTransaction[]> => { ): Promise<WalletTransaction[]> => {
const txs = await Promise.all( const txs: WalletTransaction[] = [];
transactions.map(async (transaction) => {
const tx: WalletTransaction = { for (const transaction of transactions) {
token: transaction.args?.token ? transaction.args?.token : "", const IPix2Pix = new Interface(p2pix.abi);
blockNumber: transaction.blockNumber ? transaction.blockNumber : -1, const decoded = IPix2Pix.parseLog({
amount: transaction.args?.amount topics: transaction.topics,
? Number(formatEther(transaction.args?.amount)) data: transaction.data,
});
if (!decoded) continue;
const tx: WalletTransaction = {
token: decoded.args.token ? decoded.args.token : "",
blockNumber: transaction.blockNumber,
amount: decoded.args.amount
? Number(formatEther(decoded.args.amount))
: -1,
seller: decoded.args.seller ? decoded.args.seller : "",
buyer: decoded.args.buyer ? decoded.args.buyer : "",
event: decoded.name,
lockStatus:
decoded.name == "LockAdded"
? await getLockStatus(decoded.args.lockID)
: -1, : -1,
seller: transaction.args?.seller ? transaction.args?.seller : "", transactionHash: transaction.transactionHash
buyer: transaction.args?.buyer ? transaction.args?.buyer : "", ? transaction.transactionHash
event: transaction.event ? transaction.event : "", : "",
lockStatus: transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
transaction.event == "LockAdded" };
? await getLockStatus(transaction.args?.lockID) txs.push(tx);
: -1, }
transactionHash: transaction.transactionHash
? transaction.transactionHash
: "",
transactionID: transaction.args?.lockID
? String(transaction.args?.lockID)
: "",
};
return tx;
})
);
return txs; return txs;
}; };
const listAllTransactionByWalletAddress = async ( export const listAllTransactionByWalletAddress = async (
walletAddress: string walletAddress: string
): Promise<WalletTransaction[]> => { ): Promise<WalletTransaction[]> => {
const p2pContract = getContract(true); const p2pContract = await getContract(true);
// Get deposits
const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]); const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
const eventsDeposits = await p2pContract.queryFilter(filterDeposits); const eventsDeposits = await p2pContract.queryFilter(
filterDeposits,
0,
"latest"
);
console.log("Fetched all wallet deposits");
// Get locks
const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]); const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
const eventsAddedLocks = await p2pContract.queryFilter(filterAddedLocks); const eventsAddedLocks = await p2pContract.queryFilter(
filterAddedLocks,
0,
"latest"
);
console.log("Fetched all wallet locks");
// Get released locks
const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]); const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
const eventsReleasedLocks = await p2pContract.queryFilter( const eventsReleasedLocks = await p2pContract.queryFilter(
filterReleasedLocks filterReleasedLocks,
0,
"latest"
); );
console.log("Fetched all wallet released locks");
// Get withdrawn deposits
const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([ const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
walletAddress, walletAddress,
]); ]);
const eventsWithdrawnDeposits = await p2pContract.queryFilter( const eventsWithdrawnDeposits = await p2pContract.queryFilter(
filterWithdrawnDeposits filterWithdrawnDeposits
); );
console.log("Fetched all wallet withdrawn deposits");
const lockStatusFiltered = await filterLockStatus( const lockStatusFiltered = await filterLockStatus(
[ [
@ -135,54 +163,86 @@ const listAllTransactionByWalletAddress = async (
}; };
// get wallet's release transactions // get wallet's release transactions
const listReleaseTransactionByWalletAddress = async ( export const listReleaseTransactionByWalletAddress = async (
walletAddress: string walletAddress: string
): Promise<Event[]> => { ): Promise<LogDescription[]> => {
const p2pContract = getContract(true); const p2pContract = await getContract(true);
const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]); const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
const eventsReleasedLocks = await p2pContract.queryFilter( const eventsReleasedLocks = await p2pContract.queryFilter(
filterReleasedLocks filterReleasedLocks,
0,
"latest"
); );
return eventsReleasedLocks.sort((a, b) => { return eventsReleasedLocks
return b.blockNumber - a.blockNumber; .sort((a, b) => {
}); return b.blockNumber - a.blockNumber;
})
.map((lock) => {
const IPix2Pix = new Interface(p2pix.abi);
const decoded = IPix2Pix.parseLog({
topics: lock.topics,
data: lock.data,
});
return decoded;
})
.filter((lock) => lock !== null);
}; };
const listLockTransactionByWalletAddress = async ( const listLockTransactionByWalletAddress = async (
walletAddress: string walletAddress: string
): Promise<Event[]> => { ): Promise<LogDescription[]> => {
const p2pContract = getContract(true); const p2pContract = await getContract(true);
const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]); const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks); const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
return eventsReleasedLocks.sort((a, b) => { return eventsReleasedLocks
return b.blockNumber - a.blockNumber; .sort((a, b) => {
}); return b.blockNumber - a.blockNumber;
})
.map((lock) => {
const IPix2Pix = new Interface(p2pix.abi);
const decoded = IPix2Pix.parseLog({
topics: lock.topics,
data: lock.data,
});
return decoded;
})
.filter((lock) => lock !== null);
}; };
const listLockTransactionBySellerAddress = async ( const listLockTransactionBySellerAddress = async (
sellerAddress: string sellerAddress: string
): Promise<Event[]> => { ): Promise<LogDescription[]> => {
const p2pContract = getContract(true); const p2pContract = await getContract(true);
console.log("Will get locks as seller", sellerAddress);
const filterAddedLocks = p2pContract.filters.LockAdded(); const filterAddedLocks = p2pContract.filters.LockAdded();
const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks); const eventsReleasedLocks = await p2pContract.queryFilter(
filterAddedLocks
return eventsReleasedLocks.filter((lock) => // 0,
lock.args?.seller // "latest"
.toHexString()
.substring(3)
.includes(sellerAddress.substring(2).toLowerCase())
); );
return eventsReleasedLocks
.map((lock) => {
const IPix2Pix = new Interface(p2pix.abi);
const decoded = IPix2Pix.parseLog({
topics: lock.topics,
data: lock.data,
});
return decoded;
})
.filter((lock) => lock !== null)
.filter(
(lock) => lock.args.seller.toLowerCase() == sellerAddress.toLowerCase()
);
}; };
const checkUnreleasedLock = async ( export const checkUnreleasedLock = async (
walletAddress: string walletAddress: string
): Promise<UnreleasedLock | undefined> => { ): Promise<UnreleasedLock | undefined> => {
const p2pContract = getContract(); const p2pContract = await getContract();
const pixData: Pix = { const pixData: Pix = {
pixKey: "", pixKey: "",
}; };
@ -201,7 +261,7 @@ const checkUnreleasedLock = async (
const pixTarget = lock.pixTarget; const pixTarget = lock.pixTarget;
const amount = formatEther(lock?.amount); const amount = formatEther(lock?.amount);
pixData.pixKey = String(Number(pixTarget)); pixData.pixKey = pixTarget;
pixData.value = Number(amount); pixData.value = Number(amount);
return { return {
@ -211,8 +271,10 @@ const checkUnreleasedLock = async (
} }
}; };
const getActiveLockAmount = async (walletAddress: string): Promise<number> => { export const getActiveLockAmount = async (
const p2pContract = getContract(); walletAddress: string
): Promise<number> => {
const p2pContract = await getContract(true);
const lockSeller = await listLockTransactionBySellerAddress(walletAddress); const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
const lockStatus = await p2pContract.getLocksStatus( const lockStatus = await p2pContract.getLocksStatus(
@ -236,12 +298,3 @@ const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
return activeLockAmount; return activeLockAmount;
}; };
export {
updateWalletStatus,
listValidDepositTransactionsByWalletAddress,
listAllTransactionByWalletAddress,
listReleaseTransactionByWalletAddress,
checkUnreleasedLock,
getActiveLockAmount,
};

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

@ -86,7 +86,7 @@ onMounted(async () => {
para a sua carteira! para a sua carteira!
</span> </span>
</div> </div>
<div class="blur-container"> <div class="main-container">
<div <div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
> >
@ -145,13 +145,6 @@ p {
.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 {
@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;
}
.last-release-info { .last-release-info {
@apply font-medium text-base text-gray-900; @apply font-medium text-base text-gray-900;
@ -165,22 +158,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;
} }
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style> </style>

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

@ -38,9 +38,9 @@ switch (props.type) {
<div <div
class="modal-overlay sm:h-12 h-full inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none" class="modal-overlay sm:h-12 h-full 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 text-center sm:flex justify-between hidden">
<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 py-2">
{{ alertText }} {{ alertText }}
</p> </p>
<button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')"> <button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
@ -110,7 +110,6 @@ switch (props.type) {
border-radius: 10px; border-radius: 10px;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
padding-left: v-bind(alertPaddingLeft);
} }
.modal-mobile { .modal-mobile {

80
src/components/CustomModal/CustomModal.vue
View File

@ -17,50 +17,52 @@ if (props.isRedirectModal) {
</script> </script>
<template> <template>
<div <div>
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none" <div
v-if="!isRedirectModal" class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
> v-if="!isRedirectModal"
<div class="modal px-5 text-center"> >
<p <div class="modal px-5 text-center">
class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify" <p
> class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
<strong>ATENÇÃO!</strong> >
A transação só será processada após inserir o código de autenticação. <strong>ATENÇÃO!</strong>
Caso contrário não conseguiremos comprovar o seu depósito e não será A transação só será processada após efetuado o pagamento do Pix. Caso
possível transferir os tokens para sua carteira. contrário não conseguiremos comprovar o seu depósito e não será
</p> possível transferir os tokens para sua carteira.
<button </p>
@click="$emit('close-modal')"
class="border-2 border-solid border-amber-400 mt-2"
>
Entendi
</button>
</div>
</div>
<div
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
v-if="isRedirectModal"
>
<div class="modal px-5 text-center">
<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 <button
@click="$emit('close-modal')" @click="$emit('close-modal')"
class="border-2 border-solid border-white-400 mt-2 font-semibold" class="border-2 border-solid border-amber-400 mt-2"
> >
Não Entendi
</button> </button>
<button </div>
@click="$emit('go-to-lock')" </div>
class="border-2 border-solid border-white-400 mt-2 font-semibold" <div
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
v-if="isRedirectModal"
>
<div class="modal px-5 text-center">
<p
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
> >
Sim Retomar a última compra?
</button> </p>
<div class="flex justify-around items-center px-2">
<button
@click="$emit('close-modal')"
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> </div>
</div> </div>

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

@ -96,7 +96,7 @@ const getRemaining = (): number => {
}; };
const getExplorer = (): string => { const getExplorer = (): string => {
return etherStore.networkName == NetworkEnum.ethereum return etherStore.networkName == NetworkEnum.sepolia
? "Etherscan" ? "Etherscan"
: "Polygonscan"; : "Polygonscan";
}; };
@ -107,7 +107,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.sepolia
? "sepolia.etherscan.io" ? "sepolia.etherscan.io"
: "mumbai.polygonscan.com"; : "mumbai.polygonscan.com";
const url = `https://${networkUrl}/tx/${transactionHash}`; const url = `https://${networkUrl}/tx/${transactionHash}`;
@ -162,10 +162,10 @@ showInitialItems();
</script> </script>
<template> <template>
<div class="blur-container" v-if="loadingWalletTransactions"> <div class="main-container max-w-md" v-if="loadingWalletTransactions">
<SpinnerComponent width="8" height="8"></SpinnerComponent> <SpinnerComponent width="8" height="8"></SpinnerComponent>
</div> </div>
<div class="blur-container" v-if="!loadingWalletTransactions"> <div class="main-container max-w-md" v-if="!loadingWalletTransactions">
<div <div
class="w-full bg-white p-4 sm:p-6 rounded-lg" class="w-full bg-white p-4 sm:p-6 rounded-lg"
v-if="props.validDeposits.length > 0" v-if="props.validDeposits.length > 0"
@ -190,7 +190,7 @@ showInitialItems();
> >
<img <img
alt="info image" alt="info image"
src="@/assets/info.svg" src="@/assets/info.svg?url"
aria-describedby="tooltip" aria-describedby="tooltip"
ref="reference" ref="reference"
@mouseover="showInfoTooltip = true" @mouseover="showInfoTooltip = true"
@ -216,7 +216,7 @@ showInitialItems();
> >
<img <img
alt="Withdraw image" alt="Withdraw image"
src="@/assets/withdraw.svg" src="@/assets/withdraw.svg?url"
class="w-3 h-3 sm:w-4 sm:h-4" 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>
@ -263,7 +263,7 @@ showInitialItems();
> >
<img <img
alt="Withdraw image" alt="Withdraw image"
src="@/assets/withdraw.svg" src="@/assets/withdraw.svg?url"
class="w-3 h-3 sm:w-4 sm:h-4" 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>
@ -318,7 +318,7 @@ showInitialItems();
<span class="last-release-info">{{ getExplorer() }}</span> <span class="last-release-info">{{ getExplorer() }}</span>
<img <img
alt="Redirect image" alt="Redirect image"
src="@/assets/redirect.svg" src="@/assets/redirect.svg?url"
class="w-3 h-3 sm:w-4 sm:h-4" class="w-3 h-3 sm:w-4 sm:h-4"
/> />
</div> </div>
@ -389,10 +389,6 @@ p {
@apply text-white text-center; @apply text-white text-center;
} }
.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;
}
.grid-container { .grid-container {
@apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto; @apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
} }

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

@ -15,7 +15,7 @@ const props = defineProps({
{{ props.title ? props.title : "Confirme em sua carteira" }} {{ props.title ? props.title : "Confirme em sua carteira" }}
</span> </span>
</div> </div>
<div class="blur-container sm:w-[26rem] w-[20rem]"> <div class="main-container max-w-md">
<div <div
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
> >
@ -24,7 +24,7 @@ const props = defineProps({
> >
<img <img
alt="Polygon image" alt="Polygon image"
src="@/assets/validating.svg" src="@/assets/validating.svg?url"
width="96" width="96"
height="48" height="48"
/> />
@ -60,10 +60,6 @@ const props = defineProps({
@apply text-white text-center; @apply text-white text-center;
} }
.blur-container {
@apply flex flex-col justify-center items-center sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }

70
src/components/QrCodeComponent.vue
View File

@ -93,11 +93,11 @@ onUnmounted(() => {
Utilize o QR Code ou copie o código para realizar o Pix Utilize o QR Code ou copie o código para realizar o Pix
</span> </span>
<span class="text font-medium lg:text-md text-sm max-w-[28rem]"> <span class="text font-medium lg:text-md text-sm max-w-[28rem]">
Após realizar o Pix no banco de sua preferência, insira o código de Após realizar o Pix no banco de sua preferência, clique no botão abaixo
autenticação para enviar a transação para a rede. para gerar a assinatura para liberação dos tokens.
</span> </span>
</div> </div>
<div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black"> <div class="main-container max-w-md text-black">
<div <div
class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal" class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
> >
@ -110,58 +110,18 @@ onUnmounted(() => {
</div> </div>
<img <img
alt="Copy PIX code" alt="Copy PIX code"
src="@/assets/copyPix.svg" src="@/assets/copyPix.svg?url"
width="16" width="16"
height="16" height="16"
class="pt-2 lg:mb-5 cursor-pointer" class="pt-2 lg:mb-5 cursor-pointer"
/> />
<span class="text-xs text-start lg-view"> <span class="text-xs text-start hidden sm:inline-block">
<strong>ATENÇÃO!</strong> A transação só será processada após inserir <strong>ATENÇÃO!</strong> A transação só será processada após inserir
o código de autenticação. Caso contrário não conseguiremos comprovar o o código de autenticação. Caso contrário não conseguiremos comprovar o
seu depósito e não será possível transferir os tokens para sua seu depósito e não será possível transferir os tokens para sua
carteira. Confira aqui como encontrar o código no comprovante. carteira. Confira aqui como encontrar o código no comprovante.
</span> </span>
</div> </div>
<div
class="flex-col items-center justify-center flex w-full bg-white p-5 rounded-lg px-5"
>
<input
type="text"
placeholder="Digite o código do comprovante PIX"
@input="debounce(handleInputEvent, 500)($event)"
class="sm:text-md text-sm w-full box-border p-2 sm:h-6 h-2 mb-2 outline-none"
/>
<div class="custom-divide" v-if="!isCodeInputEmpty"></div>
<div
class="flex flex-col w-full"
v-if="!isPixValid && !isCodeInputEmpty"
>
<div class="flex items-center h-8">
<img
alt="Invalid Icon"
src="@/assets/invalidIcon.svg"
width="14"
class="cursor-pointer align-middle inline-block"
/>
<span class="px-1 text-red-500 font-normal text-xs"
>Código inválido. Por favor, confira e tente novamente.</span
>
</div>
</div>
<div class="flex flex-col w-full" v-else-if="isPixValid == true">
<div class="flex items-center h-8">
<img
alt="Valid Icon"
src="@/assets/validIcon.svg"
width="14"
class="cursor-pointer align-middle inline-block"
/>
<span class="px-1 text-green-500 font-normal text-sm">
Código válido.
</span>
</div>
</div>
</div>
<CustomButton <CustomButton
:is-disabled="isPixValid == false" :is-disabled="isPixValid == false"
:text="'Enviar para a rede'" :text="'Enviar para a rede'"
@ -222,7 +182,7 @@ h2 {
} }
.blur-container { .blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6; @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6 max-w-screen-sm;
} }
input[type="number"] { input[type="number"] {
@ -233,22 +193,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;
} }
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style> </style>

179
src/components/SearchComponent.vue
View File

@ -4,13 +4,13 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { connectProvider } from "@/blockchain/provider";
import { verifyNetworkLiquidity } from "@/utils/networkLiquidity"; import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
import { NetworkEnum } from "@/model/NetworkEnum"; import { NetworkEnum } from "@/model/NetworkEnum";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import { decimalCount } from "@/utils/decimalCount"; import { decimalCount } from "@/utils/decimalCount";
import SpinnerComponent from "./SpinnerComponent.vue"; import SpinnerComponent from "./SpinnerComponent.vue";
import { getTokenImage } from "@/utils/imagesPath"; import { getTokenImage } from "@/utils/imagesPath";
import { onClickOutside } from "@vueuse/core";
import { TokenEnum } from "@/model/NetworkEnum"; import { TokenEnum } from "@/model/NetworkEnum";
@ -22,37 +22,40 @@ const {
walletAddress, walletAddress,
networkName, networkName,
selectedToken, selectedToken,
depositsValidListSepolia, depositsValidList,
depositsValidListMumbai,
loadingNetworkLiquidity, loadingNetworkLiquidity,
} = storeToRefs(etherStore); } = storeToRefs(etherStore);
// html references
const tokenDropdownRef = ref<any>(null);
// Reactive state // Reactive state
const tokenValue = ref<number>(0); const tokenValue = ref<number>(0);
const enableConfirmButton = ref<boolean>(false); const enableConfirmButton = 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 selectedDeposits = ref<ValidDeposit[]>();
const selectedMumbaiDeposit = ref<ValidDeposit>();
const selectedRootstockDeposit = ref<ValidDeposit>(); import ChevronDown from "@/assets/chevronDown.svg";
import { useOnboard } from "@web3-onboard/vue";
import { getPixKey } from "@/blockchain/events";
// Emits // Emits
const emit = defineEmits(["tokenBuy"]); const emit = defineEmits(["tokenBuy"]);
// Blockchain methods // Blockchain methods
const connectAccount = async (): Promise<void> => { const connectAccount = async (): Promise<void> => {
await connectProvider(); const { connectWallet } = useOnboard();
await connectWallet();
enableOrDisableConfirmButton();
}; };
const emitConfirmButton = (): void => { const emitConfirmButton = async (): Promise<void> => {
const selectedDeposit = const deposit = selectedDeposits.value?.find(
networkName.value == NetworkEnum.ethereum (d) => d.network === networkName.value
? selectedSepoliaDeposit.value );
: selectedMumbaiDeposit.value; if (!deposit) return;
emit("tokenBuy", selectedDeposit, tokenValue.value); deposit.pixKey = await getPixKey(deposit.seller, deposit.token);
emit("tokenBuy", deposit, tokenValue.value);
}; };
// Debounce methods // Debounce methods
@ -75,6 +78,10 @@ const openTokenSelection = (): void => {
selectTokenToggle.value = true; selectTokenToggle.value = true;
}; };
onClickOutside(tokenDropdownRef, () => {
selectTokenToggle.value = false;
});
const handleSelectedToken = (token: TokenEnum): void => { const handleSelectedToken = (token: TokenEnum): void => {
etherStore.setSelectedToken(token); etherStore.setSelectedToken(token);
selectTokenToggle.value = false; selectTokenToggle.value = false;
@ -83,45 +90,23 @@ const handleSelectedToken = (token: TokenEnum): 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; const selDeposits = verifyNetworkLiquidity(
selectedMumbaiDeposit.value = undefined;
selectedRootstockDeposit.value = undefined;
if (tokenValue.value <= 0) {
enableWalletButton.value = false;
return;
}
selectedSepoliaDeposit.value = verifyNetworkLiquidity(
tokenValue.value, tokenValue.value,
walletAddress.value, walletAddress.value,
depositsValidListSepolia.value depositsValidList.value
);
selectedMumbaiDeposit.value = verifyNetworkLiquidity(
tokenValue.value,
walletAddress.value,
depositsValidListMumbai.value
); );
selectedDeposits.value = selDeposits;
hasLiquidity.value = !!selDeposits.find(
(d) => d.network === networkName.value
);
enableOrDisableConfirmButton(); enableOrDisableConfirmButton();
if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) {
hasLiquidity.value = true;
enableWalletButton.value = true;
} else {
hasLiquidity.value = false;
enableWalletButton.value = true;
}
}; };
const enableOrDisableConfirmButton = (): void => { const enableOrDisableConfirmButton = (): void => {
if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.ethereum) enableConfirmButton.value =
enableConfirmButton.value = true; !!selectedDeposits.value &&
else if ( !!selectedDeposits.value.find((d) => d.network === networkName.value);
selectedMumbaiDeposit.value &&
networkName.value == NetworkEnum.polygon
)
enableConfirmButton.value = true;
else enableConfirmButton.value = false;
}; };
watch(networkName, (): void => { watch(networkName, (): void => {
@ -147,7 +132,7 @@ watch(walletAddress, (): void => {
tokens após realizar o Pix</span tokens após realizar o Pix</span
> >
</div> </div>
<div class="blur-container"> <div class="main-container">
<div class="backdrop-blur -z-10 w-full h-full"></div> <div class="backdrop-blur -z-10 w-full h-full"></div>
<div <div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@ -155,7 +140,7 @@ watch(walletAddress, (): void => {
<div class="flex justify-between sm:w-full items-center"> <div class="flex justify-between sm:w-full items-center">
<input <input
type="number" type="number"
class="border-none outline-none text-lg text-gray-900 w-3/4" class="border-none outline-none text-lg text-gray-900"
v-bind:class="{ v-bind:class="{
'font-semibold': tokenValue != undefined, 'font-semibold': tokenValue != undefined,
'text-xl': tokenValue != undefined, 'text-xl': tokenValue != undefined,
@ -164,9 +149,10 @@ watch(walletAddress, (): void => {
placeholder="0 " placeholder="0 "
step=".01" step=".01"
/> />
<div class="relative"> <div class="relative overflow-visible">
<button <button
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1" 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"
@click="openTokenSelection()" @click="openTokenSelection()"
> >
<img <img
@ -174,61 +160,76 @@ watch(walletAddress, (): void => {
class="sm:w-fit w-4" class="sm:w-fit w-4"
:src="getTokenImage(selectedToken)" :src="getTokenImage(selectedToken)"
/> />
<span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{ <span
selectedToken class="text-gray-900 sm:text-lg text-md font-medium"
}}</span> id="token"
>{{ selectedToken }}</span
>
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
:class="{ 'scale-y-[-1]': selectTokenToggle }"
alt="Chevron Down"
/>
</button> </button>
<div <transition name="dropdown">
v-if="selectTokenToggle" <div
class="mt-2 w-[100px] text-gray-900 lg-view absolute" v-if="selectTokenToggle"
> class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
<div class="bg-white rounded-md z-10"> >
<div <div
v-for="token in TokenEnum" class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
@click="handleSelectedToken(token)"
> >
<img <div
:alt="token + ' logo'" v-for="token in TokenEnum"
width="20" :key="token"
height="20" class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
:src="getTokenImage(token)" @click="handleSelectedToken(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
> >
{{ token }} <img
</span> :alt="token + ' logo'"
</div> width="20"
<div class="w-full flex justify-center"> height="20"
<hr class="w-4/5" /> :src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
{{ token }}
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div> </div>
</div> </div>
</div> </transition>
</div> </div>
</div> </div>
<div class="custom-divide py-2 mb-2"></div> <div class="custom-divide py-2 mb-2"></div>
<div <div class="flex justify-between" v-if="!loadingNetworkLiquidity">
class="flex justify-between"
v-if="hasLiquidity && !loadingNetworkLiquidity"
>
<p class="text-gray-500 font-normal text-sm w-auto"> <p class="text-gray-500 font-normal text-sm w-auto">
~ R$ {{ tokenValue.toFixed(2) }} ~ R$ {{ tokenValue.toFixed(2) }}
</p> </p>
<div class="flex gap-2"> <div class="flex gap-2">
<img <img
alt="Polygon image" alt="Rootstock image"
src="@/assets/polygon.svg" src="@/assets/rootstock.svg?url"
width="24" width="24"
height="24" height="24"
v-if="selectedMumbaiDeposit" v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == NetworkEnum.rootstock)
"
/> />
<img <img
alt="Ethereum image" alt="Ethereum image"
src="@/assets/ethereum.svg" src="@/assets/ethereum.svg?url"
width="24" width="24"
height="24" height="24"
v-if="selectedSepoliaDeposit" v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == NetworkEnum.sepolia)
"
/> />
</div> </div>
</div> </div>
@ -254,14 +255,14 @@ watch(walletAddress, (): void => {
v-else-if="!hasLiquidity && !loadingNetworkLiquidity" v-else-if="!hasLiquidity && !loadingNetworkLiquidity"
> >
<span class="text-red-500 font-normal text-sm" <span class="text-red-500 font-normal text-sm"
>Atualmente não há liquidez nas redes para sua demanda</span >Atualmente não há liquidez nas rede selecionada para sua
demanda</span
> >
</div> </div>
</div> </div>
<CustomButton <CustomButton
v-if="!walletAddress" v-if="!walletAddress"
:text="'Conectar carteira'" :text="'Conectar carteira'"
:is-disabled="!enableWalletButton"
@buttonClicked="connectAccount()" @buttonClicked="connectAccount()"
/> />
<CustomButton <CustomButton
@ -297,10 +298,6 @@ watch(walletAddress, (): void => {
@apply text-white text-center; @apply text-white text-center;
} }
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10;
}
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }

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

@ -4,12 +4,14 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import { decimalCount } from "@/utils/decimalCount"; import { decimalCount } from "@/utils/decimalCount";
import { TokenEnum } from "@/model/NetworkEnum";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { getTokenImage } from "@/utils/imagesPath"; import { getTokenImage } from "@/utils/imagesPath";
import { storeToRefs } from "pinia";
import { useOnboard } from "@web3-onboard/vue";
// Store // Store
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore);
// Reactive state // Reactive state
const tokenValue = ref<number>(0); const tokenValue = ref<number>(0);
@ -20,6 +22,12 @@ const validDecimals = ref<boolean>(true);
// Emits // Emits
const emit = defineEmits(["tokenBuy"]); const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
const { connectWallet } = useOnboard();
await connectWallet();
};
// Debounce methods // Debounce methods
const handleInputEvent = (event: any): void => { const handleInputEvent = (event: any): void => {
const { value } = event.target; const { value } = event.target;
@ -46,7 +54,7 @@ const handleInputEvent = (event: any): void => {
tokens após realizar o Pix</span tokens após realizar o Pix</span
> >
</div> </div>
<div class="blur-container"> <div class="main-container">
<div <div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
> >
@ -84,13 +92,13 @@ const handleInputEvent = (event: any): void => {
<div class="flex gap-2"> <div class="flex gap-2">
<img <img
alt="Polygon image" alt="Polygon image"
src="@/assets/polygon.svg" src="@/assets/polygon.svg?url"
width="24" width="24"
height="24" height="24"
/> />
<img <img
alt="Ethereum image" alt="Ethereum image"
src="@/assets/ethereum.svg" src="@/assets/ethereum.svg?url"
width="24" width="24"
height="24" height="24"
/> />
@ -109,9 +117,15 @@ const handleInputEvent = (event: any): void => {
</div> </div>
<CustomButton <CustomButton
v-if="walletAddress"
:text="'Conectar carteira'" :text="'Conectar carteira'"
@buttonClicked="emit('tokenBuy')" @buttonClicked="emit('tokenBuy')"
/> />
<CustomButton
v-if="!walletAddress"
:text="'Conectar carteira'"
@buttonClicked="connectAccount()"
/>
</div> </div>
</div> </div>
</template> </template>
@ -139,10 +153,6 @@ const handleInputEvent = (event: any): void => {
@apply text-white text-center; @apply text-white text-center;
} }
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }

8
src/components/SellerSteps/SendNetwork.vue
View File

@ -20,13 +20,13 @@ const props = defineProps({
>Envie sua oferta para a rede >Envie sua oferta para a rede
</span> </span>
<span <span
class="text text-xl font-normal sm:text-base text-xs sm:max-w-[30rem] max-w-[22rem]" class="text font-normal sm:text-base text-xs sm:max-w-[30rem] max-w-[22rem]"
>Após a confirmação sua oferta estará disponível para outros usuários. >Após a confirmação sua oferta estará disponível para outros usuários.
Caso deseje retirar a oferta, será necessário aguardar 24h para receber Caso deseje retirar a oferta, será necessário aguardar 24h para receber
os tokens de volta.</span os tokens de volta.</span
> >
</div> </div>
<div class="blur-container"> <div class="main-container sm:w-1/3">
<div <div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
> >
@ -75,10 +75,6 @@ p {
@apply text-white text-center; @apply text-white text-center;
} }
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 sm:w-1/3;
}
.last-deposit-info { .last-deposit-info {
@apply font-medium text-base; @apply font-medium text-base;
} }

115
src/components/SellerSteps/WantSellComponent.vue
View File

@ -9,6 +9,13 @@ import { storeToRefs } from "pinia";
import { connectProvider } from "@/blockchain/provider"; import { connectProvider } from "@/blockchain/provider";
import { TokenEnum } from "@/model/NetworkEnum"; import { TokenEnum } from "@/model/NetworkEnum";
import { getTokenImage } from "@/utils/imagesPath"; import { getTokenImage } from "@/utils/imagesPath";
import { onClickOutside } from "@vueuse/core";
import { useOnboard } from "@web3-onboard/vue";
import ChevronDown from "@/assets/chevron.svg";
// html references
const tokenDropdownRef = ref<any>(null);
// Reactive state // Reactive state
const etherStore = useEtherStore(); const etherStore = useEtherStore();
@ -26,6 +33,12 @@ const validPixFormat = ref<boolean>(true);
// Emits // Emits
const emit = defineEmits(["approveTokens"]); const emit = defineEmits(["approveTokens"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
const { connectWallet } = useOnboard();
await connectWallet();
};
// Debounce methods // Debounce methods
const handleInputEvent = (event: any): void => { const handleInputEvent = (event: any): void => {
const { value } = event.target; const { value } = event.target;
@ -59,19 +72,21 @@ const openTokenSelection = (): void => {
selectTokenToggle.value = true; selectTokenToggle.value = true;
}; };
onClickOutside(tokenDropdownRef, () => {
selectTokenToggle.value = false;
});
const handleSelectedToken = (token: TokenEnum): void => { const handleSelectedToken = (token: TokenEnum): void => {
etherStore.setSelectedToken(token); etherStore.setSelectedToken(token);
selectTokenToggle.value = false; selectTokenToggle.value = false;
}; };
const handleButtonClick = async ( const handleSellClick = async (
offer: string, offer: string,
pixKey: string pixKey: string
): Promise<void> => { ): Promise<void> => {
const postProcessedPixKey = postProcessKey(pixKey); const postProcessedPixKey = postProcessKey(pixKey);
if (walletAddress.value) emit("approveTokens", { offer, postProcessedPixKey });
emit("approveTokens", { offer, postProcessedPixKey });
else await connectProvider();
}; };
</script> </script>
@ -88,7 +103,7 @@ const handleButtonClick = async (
envio da transação e confirme sua oferta.</span envio da transação e confirme sua oferta.</span
> >
</div> </div>
<div class="blur-container"> <div class="main-container">
<div class="backdrop-blur -z-10 w-full h-full"></div> <div class="backdrop-blur -z-10 w-full h-full"></div>
<div <div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10" class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@ -98,17 +113,18 @@ const handleButtonClick = async (
type="number" type="number"
v-model="offer" v-model="offer"
class="border-none outline-none text-gray-900 sm:w-fit w-3/4" class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
v-bind:class="{ :class="{
'font-semibold': offer != undefined, '!font-medium': offer !== undefined && offer !== '',
'text-xl': offer != undefined, 'text-xl': offer !== undefined && offer !== '',
}" }"
@input="debounce(handleInputEvent, 500)($event)" @input="debounce(handleInputEvent, 500)($event)"
placeholder="Digite sua oferta" placeholder="Digite sua oferta"
step=".01" step=".01"
/> />
<div class="relative"> <div class="relative overflow-visible">
<button <button
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1" 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"
@click="openTokenSelection()" @click="openTokenSelection()"
> >
<img <img
@ -116,37 +132,47 @@ const handleButtonClick = async (
class="sm:w-fit w-4" class="sm:w-fit w-4"
:src="getTokenImage(selectedToken)" :src="getTokenImage(selectedToken)"
/> />
<span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{ <span
selectedToken class="text-gray-900 sm:text-lg text-md font-medium"
}}</span> id="token"
>
{{ selectedToken }}
</span>
<ChevronDown
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
:class="{ 'scale-y-[-1]': selectTokenToggle }"
alt="Chevron Down"
/>
</button> </button>
<div <transition name="dropdown">
v-if="selectTokenToggle" <div
class="mt-2 w-[100px] text-gray-900 lg-view absolute" v-if="selectTokenToggle"
> class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
<div class="bg-white rounded-md z-10"> >
<div <div
v-for="token in TokenEnum" class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
@click="handleSelectedToken(token)"
> >
<img <div
:alt="token + ' logo'" v-for="token in TokenEnum"
width="20" :key="token"
height="20" class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
:src="getTokenImage(token)" @click="handleSelectedToken(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
> >
{{ token }} <img
</span> :alt="token + ' logo'"
</div> width="20"
<div class="w-full flex justify-center"> height="20"
<hr class="w-4/5" /> :src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
{{ token }}
</span>
</div>
</div> </div>
</div> </div>
</div> </transition>
</div> </div>
</div> </div>
@ -170,6 +196,10 @@ const handleButtonClick = async (
type="text" type="text"
v-model="pixKey" v-model="pixKey"
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit" class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
:class="{
'!font-medium': pixKey !== undefined && pixKey !== '',
'text-xl': pixKey !== undefined && pixKey !== '',
}"
placeholder="Digite a chave Pix" placeholder="Digite a chave Pix"
/> />
</div> </div>
@ -180,9 +210,15 @@ const handleButtonClick = async (
</div> </div>
</div> </div>
<CustomButton <CustomButton
:text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'" v-if="walletAddress"
:text="'Aprovar tokens'"
:isDisabled="!validDecimals || !validPixFormat" :isDisabled="!validDecimals || !validPixFormat"
@buttonClicked="handleButtonClick(offer, pixKey)" @buttonClicked="handleSellClick(offer, pixKey)"
/>
<CustomButton
v-if="!walletAddress"
:text="'Conectar carteira'"
@buttonClicked="connectAccount()"
/> />
</div> </div>
</div> </div>
@ -211,12 +247,9 @@ const handleButtonClick = async (
@apply text-white text-center; @apply text-white text-center;
} }
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 w-auto;
}
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield;
} }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,

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

@ -1,31 +1,50 @@
<script setup lang="ts"> <script setup lang="ts">
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { ref } from "vue"; import { ref, watch } from "vue";
import { onClickOutside } from "@vueuse/core"; import { onClickOutside } from "@vueuse/core";
import { NetworkEnum } from "@/model/NetworkEnum"; import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import { getNetworkImage } from "@/utils/imagesPath"; import { getNetworkImage } from "@/utils/imagesPath";
import { Networks } from "@/model/Networks";
import { useOnboard } from "@web3-onboard/vue";
import ChevronDown from "@/assets/chevronDown.svg";
import TwitterIcon from "@/assets/twitterIcon.svg";
import LinkedinIcon from "@/assets/linkedinIcon.svg";
import GithubIcon from "@/assets/githubIcon.svg";
import { connectProvider } from "@/blockchain/provider";
// Store reference // Store reference
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const { walletAddress, sellerView } = storeToRefs(etherStore); const { walletAddress, sellerView } = storeToRefs(etherStore);
const menuOpenToggle = ref<boolean>(false); const menuOpenToggle = ref<boolean>(false);
const menuHoverToggle = ref<boolean>(false);
const infoMenuOpenToggle = ref<boolean>(false); const infoMenuOpenToggle = ref<boolean>(false);
const currencyMenuOpenToggle = ref<boolean>(false); const currencyMenuOpenToggle = ref<boolean>(false);
const currencyMenuHoverToggle = ref<boolean>(false);
const infoMenuRef = ref<any>(null); const infoMenuRef = ref<any>(null);
const walletAddressRef = ref<any>(null); const walletAddressRef = ref<any>(null);
const currencyRef = ref<any>(null); const currencyRef = ref<any>(null);
//Methods const { connectedWallet, connectedChain, setChain, disconnectWallet } =
const connectMetaMask = async (): Promise<void> => { useOnboard();
await connectProvider();
const connnectWallet = async (): Promise<void> => {
const { connectWallet } = useOnboard();
await connectWallet();
}; };
watch(connectedWallet, async (newVal: any) => {
connectProvider(newVal.provider);
const addresses = await newVal.provider.request({ method: "eth_accounts" });
etherStore.setWalletAddress(addresses.shift());
});
watch(connectedChain, (newVal: any) => {
etherStore.setNetworkId(newVal?.id);
});
const formatWalletAddress = (): string => { const formatWalletAddress = (): string => {
const walletAddressLength = walletAddress.value.length; const walletAddressLength = walletAddress.value.length;
const initialText = walletAddress.value.substring(0, 5); const initialText = walletAddress.value.substring(0, 5);
@ -36,10 +55,10 @@ const formatWalletAddress = (): string => {
return `${initialText}...${finalText}`; return `${initialText}...${finalText}`;
}; };
const disconnectUser = (): void => { const disconnectUser = async (): Promise<void> => {
etherStore.setWalletAddress(""); etherStore.setWalletAddress("");
await disconnectWallet({ label: connectedWallet.value?.label || "" });
closeMenu(); closeMenu();
window.location.reload();
}; };
const closeMenu = (): void => { const closeMenu = (): void => {
@ -48,18 +67,23 @@ const closeMenu = (): void => {
const networkChange = async (network: NetworkEnum): Promise<void> => { const networkChange = async (network: NetworkEnum): Promise<void> => {
currencyMenuOpenToggle.value = false; currencyMenuOpenToggle.value = false;
const change = await requestNetworkChange(network); try {
if (change) etherStore.setNetworkName(network); await setChain({
chainId: Networks[network].chainId,
wallet: connectedWallet.value?.label || "",
});
etherStore.setNetworkId(network);
} catch (error) {
console.log("Error changing network", error);
}
}; };
onClickOutside(walletAddressRef, () => { onClickOutside(walletAddressRef, () => {
menuHoverToggle.value = false;
menuOpenToggle.value = false; menuOpenToggle.value = false;
}); });
onClickOutside(currencyRef, () => { onClickOutside(currencyRef, () => {
currencyMenuOpenToggle.value = false; currencyMenuOpenToggle.value = false;
currencyMenuHoverToggle.value = false;
}); });
onClickOutside(infoMenuRef, () => { onClickOutside(infoMenuRef, () => {
@ -72,98 +96,25 @@ onClickOutside(infoMenuRef, () => {
<RouterLink :to="'/'" class="default-button"> <RouterLink :to="'/'" class="default-button">
<img <img
alt="P2Pix logo" alt="P2Pix logo"
class="logo lg-view" class="logo hidden md:inline-block"
src="@/assets/logo.svg" width="200"
width="75"
height="75" height="75"
src="@/assets/logo.svg?url"
/> />
<img <img
alt="P2Pix logo" alt="P2Pix logo"
class="logo sm-view w-10/12" class="logo inline-block md:hidden w-10/12"
src="@/assets/logo2.svg"
width="40" width="40"
height="40" height="40"
src="@/assets/logo2.svg?url"
/> />
</RouterLink> </RouterLink>
<div class="flex sm:gap-4 gap-2 items-center"> <div class="flex sm:gap-4 gap-2 items-center">
<div class="flex flex-col"> <div class="flex flex-col">
<div <button
v-show="infoMenuOpenToggle"
class="mt-10 absolute w-full text-gray-900 lg-view"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10 -left-32 w-52">
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
Documentação
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<RouterLink
:to="'/faq'"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
>
Perguntas frequentes
</span>
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
>
<div class="redirect_button flex mr-4">
<div class="mr-6">
<a href="https://www.twitter.com/doiim">
<img
alt="Twitter"
width="20"
height="20"
src="@/assets/twitterIcon.svg"
class="cursor-pointer"
/>
</a>
</div>
<div class="mr-6">
<a href="https://www.linkedin.com/company/doiim/">
<img
alt="LinkedIn"
width="20"
height="20"
src="@/assets/linkedinIcon.svg"
class="cursor-pointer"
href="https://www.linkedin.com/company/doiim/"
/>
</a>
</div>
<div class="mr-6">
<a href="https://www.github.com/doiim">
<img
alt="Github"
width="20"
height="20"
src="@/assets/githubIcon.svg"
class="cursor-pointer"
/>
</a>
</div>
</div>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
<div
ref="infoMenuRef" ref="infoMenuRef"
class="default-button lg-view cursor-pointer" class="default-button hidden md:inline-block cursor-pointer"
@click=" @click="
[ [
(infoMenuOpenToggle = !infoMenuOpenToggle), (infoMenuOpenToggle = !infoMenuOpenToggle),
@ -173,41 +124,117 @@ onClickOutside(infoMenuRef, () => {
" "
> >
<h1 <h1
class="text-gray-50 font-semibold sm:text-base" class="topbar-text topbar-link"
:style="{ :style="{
'border-bottom': infoMenuOpenToggle 'border-bottom': infoMenuOpenToggle
? '2px solid white' ? '2px solid white'
: 'transparent', : '2px solid transparent',
}" }"
> >
Menu Menu
</h1> </h1>
</div> </button>
<transition name="dropdown">
<div
v-show="infoMenuOpenToggle"
class="mt-10 absolute w-full text-gray-900 hidden lg:inline-block"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10 -left-36 w-52">
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
Documentação
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<RouterLink
:to="'/faq'"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
>
Perguntas frequentes
</span>
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md"
>
<div class="redirect_button flex justify-around">
<a href="https://www.twitter.com/doiim">
<img
alt="Twitter"
width="20"
height="20"
src="@/assets/twitterIcon.svg?url"
class="cursor-pointer"
/>
</a>
<a href="https://www.linkedin.com/company/doiim/">
<img
alt="LinkedIn"
width="20"
height="20"
src="@/assets/linkedinIcon.svg?url"
class="cursor-pointer"
href="https://www.linkedin.com/company/doiim/"
/>
</a>
<a href="https://www.github.com/doiim">
<img
alt="Github"
width="20"
height="20"
src="@/assets/githubIcon.svg?url"
class="cursor-pointer"
/>
</a>
</div>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
</transition>
</div> </div>
<RouterLink <RouterLink
:to="'/faq'" :to="'/faq'"
v-if="!walletAddress" v-if="!walletAddress"
class="default-button sm-view" class="default-button inline-block md:hidden"
> >
FAQ FAQ
</RouterLink> </RouterLink>
<RouterLink <RouterLink
:to="sellerView ? '/' : '/seller'" :to="sellerView ? '/' : '/seller'"
class="default-button sm:whitespace-normal whitespace-nowrap lg-view" class="default-button whitespace-nowrap w-40 sm:w-44 md:w-36 hidden md:inline-block"
> >
{{ sellerView ? "Quero comprar" : "Quero vender" }} <div class="topbar-text topbar-link text-center mx-auto inline-block">
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</div>
</RouterLink> </RouterLink>
<RouterLink <RouterLink
:to="sellerView ? '/' : '/seller'" :to="sellerView ? '/' : '/seller'"
v-if="!walletAddress" v-if="!walletAddress"
class="default-button sm:whitespace-normal whitespace-nowrap sm-view" class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden w-40 sm:w-44 md:w-36"
> >
{{ sellerView ? "Quero comprar" : "Quero vender" }} <div class="topbar-text topbar-link text-center mx-auto inline-block">
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</div>
</RouterLink> </RouterLink>
<div class="flex flex-col" v-if="walletAddress"> <div class="flex flex-col relative" v-if="walletAddress">
<div <div
ref="currencyRef" ref="currencyRef"
class="group top-bar-info cursor-pointer hover:bg-white h-10" class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
:class="{ 'bg-gray-50': currencyMenuOpenToggle }"
@click=" @click="
[ [
(currencyMenuOpenToggle = !currencyMenuOpenToggle), (currencyMenuOpenToggle = !currencyMenuOpenToggle),
@ -215,70 +242,53 @@ onClickOutside(infoMenuRef, () => {
(infoMenuOpenToggle = false), (infoMenuOpenToggle = false),
] ]
" "
@mouseover="currencyMenuHoverToggle = true"
@mouseout="currencyMenuHoverToggle = false"
:style="{
backgroundColor: currencyMenuOpenToggle
? '#F9F9F9'
: currencyMenuHoverToggle
? '#F9F9F9'
: 'transparent',
}"
> >
<img <img
alt="Choosed network image" alt="Choosed network image"
:src="getNetworkImage(etherStore.networkName)" :src="getNetworkImage(NetworkEnum[etherStore.networkName])"
height="24" height="24"
width="24" width="24"
/> />
<span <span
class="default-text group-hover:text-gray-900 lg-view" class="default-text hidden sm:inline-block text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out whitespace-nowrap text-ellipsis overflow-hidden"
:style="{ :class="{ '!text-gray-900': currencyMenuOpenToggle }"
color: currencyMenuOpenToggle
? '#000000'
: currencyMenuHoverToggle
? '#000000'
: 'rgb(249 250 251)',
}"
> >
{{ etherStore.networkName }} {{ Networks[etherStore.networkName].chainName }}
</span> </span>
<img <div
class="text-gray-900" class="transition-all duration-500 ease-in-out mt-1"
v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle" :class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
alt="Chevron Down" >
src="@/assets/chevronDown.svg" <ChevronDown
/> viewBox="0 0 16 16"
<img class="h-4 w-4 text-white group-hover:text-gray-900"
v-if="currencyMenuOpenToggle" :class="{ '!text-gray-900': currencyMenuOpenToggle }"
alt="Chevron Up" />
src="@/assets/chevronUp.svg" </div>
/>
<img
v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
alt="Chevron Down Black"
src="@/assets/chevronDownBlack.svg"
/>
</div> </div>
<div <transition name="dropdown">
v-show="currencyMenuOpenToggle" <div
class="mt-10 pl-3 absolute w-full text-gray-900 lg-view" v-show="currencyMenuOpenToggle"
> class="mt-10 absolute text-gray-900 min-w-max left-0 hidden md:inline-block"
<div class="mt-2"> >
<div class="bg-white rounded-md z-10"> <div
class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<div <div
v-for="network in NetworkEnum" v-for="(chainData, network) in Networks"
class="menu-button gap-2 px-4 rounded-md cursor-pointer" :key="network"
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)" @click="networkChange(network)"
> >
<img <img
:alt="network + ' image'" :alt="chainData.chainName + ' image'"
width="20" width="20"
height="20" height="20"
:src="getNetworkImage(network)" :src="getNetworkImage(NetworkEnum[network])"
class="mr-2 ml-1"
/> />
<span class="text-gray-900 py-4 text-end font-semibold text-sm"> <span class="text-gray-900 font-semibold text-sm">
{{ network }} {{ chainData.chainName }}
</span> </span>
</div> </div>
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
@ -286,29 +296,30 @@ onClickOutside(infoMenuRef, () => {
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
</div> </div>
<button <button
type="button" type="button"
v-if="!walletAddress" v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button lg-view" class="border-amber-500 border-2 rounded default-button hidden md:inline-block"
@click="connectMetaMask()" @click="connnectWallet()"
> >
Conectar carteira Conectar carteira
</button> </button>
<button <button
type="button" type="button"
v-if="!walletAddress" v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button sm-view" class="border-amber-500 border-2 rounded default-button inline-block md:hidden"
@click="connectMetaMask()" @click="connnectWallet()"
> >
Conectar Conectar
</button> </button>
<div v-if="walletAddress" class="account-info"> <div v-if="walletAddress" class="account-info">
<div class="flex flex-col"> <div class="flex flex-col relative">
<div <div
ref="walletAddressRef" ref="walletAddressRef"
class="top-bar-info cursor-pointer h-10" class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
:class="{ 'bg-gray-50': menuOpenToggle }"
@click=" @click="
[ [
(menuOpenToggle = !menuOpenToggle), (menuOpenToggle = !menuOpenToggle),
@ -316,74 +327,61 @@ onClickOutside(infoMenuRef, () => {
(infoMenuOpenToggle = false), (infoMenuOpenToggle = false),
] ]
" "
@mouseover="menuHoverToggle = true"
@mouseout="menuHoverToggle = false"
:style="{
backgroundColor: menuOpenToggle
? '#F9F9F9'
: menuHoverToggle
? '#F9F9F9'
: 'transparent',
}"
> >
<img alt="Account image" src="@/assets/account.svg" /> <img alt="Account image" src="@/assets/account.svg?url" />
<span <span
class="default-text" class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out truncate text-ellipsis"
:style="{ :class="{ '!text-gray-900': menuOpenToggle }"
color: menuOpenToggle
? '#000000'
: menuHoverToggle
? '#000000'
: 'rgb(249 250 251)',
}"
> >
{{ formatWalletAddress() }} {{ formatWalletAddress() }}
</span> </span>
<img <div
class="text-gray-900" class="transition-all duration-500 ease-in-out mt-1"
v-if="!menuHoverToggle && !menuOpenToggle" :class="{ 'scale-y-[-1]': menuOpenToggle }"
alt="Chevron Down" >
src="@/assets/chevronDown.svg" <ChevronDown
/> viewBox="0 0 16 16"
<img class="h-4 w-4 text-white group-hover:text-gray-900"
v-if="menuOpenToggle" :class="{ '!text-gray-900': menuOpenToggle }"
alt="Chevron Up" />
src="@/assets/chevronUp.svg" </div>
/>
<img
v-if="menuHoverToggle && !menuOpenToggle"
alt="Chevron Down Black"
src="@/assets/chevronDownBlack.svg"
/>
</div> </div>
<div <transition name="dropdown">
v-show="menuOpenToggle" <div
class="mt-10 absolute w-full text-gray-900 lg-view" v-show="menuOpenToggle"
> class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
<div class="pl-4 mt-2"> >
<div class="bg-white rounded-md z-10"> <div class="pl-4 mt-2">
<div class="menu-button" @click="closeMenu()"> <div
<RouterLink to="/manage_bids" class="redirect_button"> 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()"
>
Gerenciar Ofertas Gerenciar Ofertas
</RouterLink> </RouterLink>
</div> <div class="w-full flex justify-center">
<div class="w-full flex justify-center"> <hr class="w-4/5" />
<hr class="w-4/5" /> </div>
</div> <RouterLink
<div class="menu-button" @click="disconnectUser"> to="/"
<RouterLink to="/" class="redirect_button"> class="redirect_button menu-button"
@click="disconnectUser"
>
Desconectar Desconectar
</RouterLink> </RouterLink>
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
</div> </div>
</div> </div>
</div> </div>
<div <div
v-show="menuOpenToggle" v-show="menuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view" 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 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full"> <div class="bg-white rounded-md z-10 h-full">
@ -414,59 +412,52 @@ onClickOutside(infoMenuRef, () => {
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
<hr class="w-4/5" /> <hr class="w-4/5" />
</div> </div>
<div class="menu-button pb-10"> <div class="redirect_button mx-10">
<div class="redirect_button flex"> <a
<a href="https://www.twitter.com/doiim/"> href="https://www.twitter.com/doiim/"
<img target="_blank"
alt="Twitter" rel="noreferrer"
width="20" >
height="20" <TwitterIcon alt="Twitter" width="20" height="20" />
src="@/assets/twitterIcon.svg" </a>
class="mr-6" <a
onclick="location.href = 'https://www.twitter.com/doiim';" href="https://www.linkedin.com/company/doiim/"
/> target="_blank"
</a> rel="noreferrer"
<a href="https://www.linkedin.com/company/doiim/"> >
<img <LinkedinIcon alt="LinkedIn" width="20" height="20" />
alt="LinkedIn" </a>
width="20" <a
height="20" href="https://github.com/doiim/"
src="@/assets/linkedinIcon.svg" target="_blank"
class="mr-6" rel="noreferrer"
/> >
</a> <GithubIcon alt="Github" width="20" height="20" />
<a href="https://github.com/doiim/"> </a>
<img
alt="Github"
width="20"
height="20"
src="@/assets/githubIcon.svg"
/>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div
v-show="currencyMenuOpenToggle" v-show="currencyMenuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view" 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 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 <div
v-for="network in NetworkEnum" v-for="(chainData, network) in Networks"
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2" :key="network"
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
@click="networkChange(network)" @click="networkChange(network)"
> >
<img <img
:alt="network + 'image'" :alt="chainData.chainName + 'image'"
width="20" width="20"
height="20" height="20"
:src="getNetworkImage(network)" :src="getNetworkImage(NetworkEnum[network])"
/> />
<span class="text-gray-900 py-4 text-end font-bold text-sm"> <span class="text-gray-900 py-4 text-end font-bold text-sm">
{{ network }} {{ chainData.chainName }}
</span> </span>
</div> </div>
</div> </div>
@ -484,6 +475,13 @@ header {
@apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent; @apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
} }
.topbar-text {
@apply text-gray-50 font-semibold sm:text-base mt-0.5 transition-all duration-500;
}
.topbar-link {
@apply mt-0.5 hover:border-b-2 border-b-2 border-transparent hover:!border-white;
}
.account-info { .account-info {
@apply flex items-center gap-6; @apply flex items-center gap-6;
} }
@ -493,42 +491,24 @@ header {
} }
.top-bar-info { .top-bar-info {
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center; @apply flex justify-between items-center gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
} }
.redirect_button { .redirect_button {
@apply py-5 text-gray-900 sm:font-semibold font-bold sm:text-xs text-sm w-full; @apply py-5 px-4 text-gray-900 flex sm:font-semibold font-bold sm:text-xs text-sm justify-between;
} }
.menu-button { .menu-button {
@apply flex sm:text-center sm:justify-center hover:bg-gray-200 ml-8 sm:ml-0; @apply flex sm:text-center sm:justify-center hover:bg-gray-200 hover:rounded-lg w-full;
} }
a:hover { a:hover {
@apply bg-gray-200 rounded; @apply bg-gray-200 rounded;
} }
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
.mobile-menu { .mobile-menu {
margin-top: 1400px; margin-top: 1400px;
bottom: 0px; bottom: 0px;
height: auto; height: auto;
} }
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style> </style>

1
src/main.ts
View File

@ -4,6 +4,7 @@ import router from "./router";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import "./assets/main.css"; import "./assets/main.css";
import "./assets/transitions.css";
const app = createApp(App); const app = createApp(App);

11
src/model/NetworkEnum.ts
View File

@ -1,10 +1,9 @@
export enum NetworkEnum { export enum NetworkEnum {
ethereum = "Ethereum", sepolia = 11155111,
polygon = "Polygon", rootstock = 31,
rootstock = "Rootstock",
} }
export enum TokenEnum { export enum TokenEnum {
BRZ = 'BRZ', BRZ = "BRZ",
BRX = 'BRX' // BRX = 'BRX'
} }

22
src/model/Networks.ts Normal file
View File

@ -0,0 +1,22 @@
import { NetworkEnum } from "@/model/NetworkEnum";
export const Networks = {
[NetworkEnum.sepolia]: {
chainId: "0xAA36A7",
chainName: "Sepolia Testnet",
},
[NetworkEnum.rootstock]: {
chainId: "0x1F",
chainName: "Rootstock Testnet",
rpcUrls: ["https://public-node.testnet.rsk.co/"],
iconUrls: [
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPOSURBVHgBxVhNUhpBFH6vGdxp4S4LoSYnEE8gnEA4AbpMJUQ4gXgCRJK1egLxBOIJJCdwJElVllMu49Cd1z04zD/dY1H5qihmut/M93VPv59uhHdAXFaPAaEDgA2/BaeA4hq/zG+gIBAKQoyr9yshid4Jdn+2oQAYFIC4rA2zxUhgS3yrDqEAjGdIDD/YYG09aRl7L7vYd10wgPkMlcoNfdvtFhjCXJBAeyO2S5gLQuFo25bEIxjCCt8oN2Z46I+Mu4A4SbjwojQBi1+BDl5LP+JNYlhtQRmPsjjQN1ILldwY7JTXOuD9bWL/jxO8dFy7oL9TyMcIu/PeSghxlLduQUA9jwPXiAk98HLw5jFiaFfAEjRLImPR0qi7z+2VmArZ7zzqcDAS01ljCKqf7QSjxb7jKkIhTohu6rOCq64RjsNiFEo7x7ocSNMvlddhPWb0CQ6gAAw4HKZpKGFDcWhzSEG6kbQCm4dLbi9m+XlpBTHea2D31zTSNtxrAGMNdcP5FPuxfhlKdCHgASUJxcd7zUcobkAPXvkzWGyf7uVCt2M2DtkMljaHSxu92WWLAz8OjWsD+juD/4tzcpqBSh3yQrmwoNFFMZNuDB7bJRsp/hzMMQqeT+NQ96KtNEBK+SG+23XgHgUyy8FPjpPozy3M4sZwh1/nLRMOK26Mn50Z5IHjA6XkBugJSn1XHkeBbK8dJsxsl0jMEOUpm0o9+gkX+7+TI0E+0x6Hsk0ijyNYQ/4OAqWn2aF+5cLxEoRq6idqtyEPtFhp/XyMNI2p9ADFUc/iYL5h7YzEXEEyptj04mvVHxkGP4F8MS4sWDsqRr4DbyGZRiIcqCKtpRMYeTMcpVVAFewqMVPSjUkMVQTBp6BPVKeiTqN65E0qP1AvIArWC98qcQsms39oDeBEtoXFKFgLbQ76ZKiXiRH2E01UF9Go+kGDh32/LWHZAD2OQ7mGdLO4ndrqWaHZyNyD6XJUWEq6yIQqReOweCe49ivD2DNUIutjJgXpHwyUtyPbY/IMWehfBA0IZxQSQoW9rKXL+ltq0oKqYC+RB6yLKys4xEw/Idde5R02cTGOcgh1LSNnid+nihIqcN0tr48MhL89L2uoG+Dqv5Px/IwqAhkqnEi296M1OyLPqVCgdKhcuKNjlUnQL4X78cRk1E1JlMkBME1sFE0gRrRJZGs3iT44bRZP5z0wQJHzIZMMbpztN1t+FDhsMBe0YNfatimHDetgLGiZGkYapqPwYt6YIAWPDYI9fSrETfjkwwSFT2EVrV/USY+r+/GGNp2I7zoW/gdR9aOdZ/lPGgAAAABJRU5ErkJggg==",
],
nativeCurrency: {
name: "tRBTC",
symbol: "tRBTC",
decimals: 18,
},
blockExplorerUrls: ["https://explorer.testnet.rootstock.io/"],
},
};

5
src/model/ValidDeposit.ts
View File

@ -1,8 +1,11 @@
import { NetworkEnum } from "./NetworkEnum";
export type ValidDeposit = { export type ValidDeposit = {
token: string; token: string;
blockNumber: number; blockNumber: number;
remaining: number; remaining: number;
seller: string; seller: string;
pixKey: number; pixKey: string;
network: NetworkEnum;
open?: boolean; open?: boolean;
}; };

10
src/model/mock/ValidDepositMock.ts
View File

@ -6,34 +6,34 @@ export const MockValidDeposits: ValidDeposit[] = [
token: "1", token: "1",
remaining: 70, remaining: 70,
seller: "mockedSellerAddress", seller: "mockedSellerAddress",
pixKey: 123456789, pixKey: "123456789",
}, },
{ {
blockNumber: 2, blockNumber: 2,
token: "2", token: "2",
remaining: 200, remaining: 200,
seller: "mockedSellerAddress", seller: "mockedSellerAddress",
pixKey: 123456789, pixKey: "123456789",
}, },
{ {
blockNumber: 3, blockNumber: 3,
token: "3", token: "3",
remaining: 1250, remaining: 1250,
seller: "mockedSellerAddress", seller: "mockedSellerAddress",
pixKey: 123456789, pixKey: "123456789",
}, },
{ {
blockNumber: 4, blockNumber: 4,
token: "4", token: "4",
remaining: 4000, remaining: 4000,
seller: "mockedSellerAddress", seller: "mockedSellerAddress",
pixKey: 123456789, pixKey: "123456789",
}, },
{ {
blockNumber: 5, blockNumber: 5,
token: "5", token: "5",
remaining: 2000, remaining: 2000,
seller: "mockedSellerAddress", seller: "mockedSellerAddress",
pixKey: 123456789, pixKey: "123456789",
}, },
]; ];

29
src/store/ether.ts
View File

@ -1,24 +1,16 @@
import { NetworkEnum, TokenEnum } from "../model/NetworkEnum"; import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export const useEtherStore = defineStore("ether", { export const useEtherStore = defineStore("ether", {
state: () => ({ state: () => ({
walletAddress: "", walletAddress: "",
balance: "", balance: "",
networkName: NetworkEnum.ethereum, networkName: NetworkEnum.sepolia,
selectedToken: TokenEnum.BRZ, selectedToken: TokenEnum.BRZ,
loadingLock: false, loadingLock: false,
sellerView: false, sellerView: false,
// Depósitos válidos para compra SEPOLIA depositsValidList: [] as ValidDeposit[],
depositsValidListSepolia: [] as ValidDeposit[],
// Depósitos válidos para compra MUMBAI
depositsValidListMumbai: [] as ValidDeposit[],
// Depósitos válidos para compra ROOTSTOCK
depositsValidListRootstock: [] as ValidDeposit[],
loadingWalletTransactions: false, loadingWalletTransactions: false,
loadingNetworkLiquidity: false, loadingNetworkLiquidity: false,
}), }),
@ -32,8 +24,8 @@ export const useEtherStore = defineStore("ether", {
setSelectedToken(token: TokenEnum) { setSelectedToken(token: TokenEnum) {
this.selectedToken = token; this.selectedToken = token;
}, },
setNetworkName(networkName: NetworkEnum) { setNetworkId(networkName: NetworkEnum) {
this.networkName = networkName; this.networkName = Number(networkName);
}, },
setLoadingLock(isLoadingLock: boolean) { setLoadingLock(isLoadingLock: boolean) {
this.loadingLock = isLoadingLock; this.loadingLock = isLoadingLock;
@ -41,14 +33,8 @@ export const useEtherStore = defineStore("ether", {
setSellerView(sellerView: boolean) { setSellerView(sellerView: boolean) {
this.sellerView = sellerView; this.sellerView = sellerView;
}, },
setDepositsValidListSepolia(depositsValidList: ValidDeposit[]) { setDepositsValidList(depositsValidList: ValidDeposit[]) {
this.depositsValidListSepolia = depositsValidList; this.depositsValidList = depositsValidList;
},
setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) {
this.depositsValidListMumbai = depositsValidList;
},
setDepositsValidListRootstock(depositsValidList: ValidDeposit[]) {
this.depositsValidListRootstock = depositsValidList;
}, },
setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) { setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
this.loadingWalletTransactions = isLoadingWalletTransactions; this.loadingWalletTransactions = isLoadingWalletTransactions;
@ -57,11 +43,10 @@ export const useEtherStore = defineStore("ether", {
this.loadingNetworkLiquidity = isLoadingNetworkLiquidity; this.loadingNetworkLiquidity = isLoadingNetworkLiquidity;
}, },
}, },
// Alterar para integrar com mumbai
getters: { getters: {
getValidDepositByWalletAddress: (state) => { getValidDepositByWalletAddress: (state) => {
return (walletAddress: string) => return (walletAddress: string) =>
state.depositsValidListSepolia state.depositsValidList
.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;

28
src/utils/imagesPath.ts
View File

@ -1,17 +1,21 @@
import type { NetworkEnum, TokenEnum } from "@/model/NetworkEnum"; import type { TokenEnum } from "@/model/NetworkEnum";
export const imagesPath = import.meta.glob<string>('@/assets/*.{png,svg}', { eager: true, query: '?url', import: 'default' }); export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
eager: true,
query: "?url",
import: "default",
});
export const getNetworkImage = (networkName: NetworkEnum): string => { export const getNetworkImage = (networkName: string): string => {
const path = Object.keys(imagesPath).find((key) => const path = Object.keys(imagesPath).find((key) =>
key.endsWith(`${networkName.toLowerCase()}.svg`) key.endsWith(`${networkName.toLowerCase()}.svg`)
); );
return path ? imagesPath[path] : ""; return path ? imagesPath[path] : "";
}; };
export const getTokenImage = (tokenName: TokenEnum): string => { export const getTokenImage = (tokenName: TokenEnum): string => {
const path = Object.keys(imagesPath).find((key) => const path = Object.keys(imagesPath).find((key) =>
key.endsWith(`${tokenName.toLowerCase()}.svg`) key.endsWith(`${tokenName.toLowerCase()}.svg`)
); );
return path ? imagesPath[path] : ""; return path ? imagesPath[path] : "";
}; };

42
src/utils/networkLiquidity.ts
View File

@ -4,20 +4,36 @@ const verifyNetworkLiquidity = (
tokenValue: number, tokenValue: number,
walletAddress: string, walletAddress: string,
validDepositList: ValidDeposit[] validDepositList: ValidDeposit[]
): ValidDeposit | undefined => { ): ValidDeposit[] => {
const element = validDepositList.find((element) => { const filteredDepositList = validDepositList
const remaining = element.remaining; .filter((element) => {
if ( const remaining = element.remaining;
tokenValue!! <= remaining && if (
tokenValue!! != 0 && tokenValue!! <= remaining &&
element.seller !== walletAddress tokenValue!! != 0 &&
) { element.seller !== walletAddress
return true; ) {
} return true;
return false; }
}); return false;
})
.sort((a, b) => {
return b.remaining - a.remaining;
});
return element; const uniqueNetworkDeposits = filteredDepositList.reduce(
(acc: ValidDeposit[], current) => {
const existingNetwork = acc.find(
(deposit) => deposit.network === current.network
);
if (!existingNetwork) {
acc.push(current);
}
return acc;
},
[]
);
return uniqueNetworkDeposits;
}; };
export { verifyNetworkLiquidity }; export { verifyNetworkLiquidity };

334
src/utils/smart_contract_files/P2PIX.json
View File

File diff suppressed because one or more lines are too long

13
src/views/FaqView.vue
View File

@ -34,7 +34,7 @@ const openItem = (index: number) => {
<span class="text font-extrabold text-5xl max-w-[50rem]" <span class="text font-extrabold text-5xl max-w-[50rem]"
>Perguntas Frequentes >Perguntas Frequentes
</span> </span>
<span class="text text-xl font-medium text-base max-w-[40rem]" <span class="text font-medium text-base max-w-[40rem]"
>Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do >Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do
Discord para falar diretamente conosco.</span Discord para falar diretamente conosco.</span
> >
@ -61,13 +61,13 @@ const openItem = (index: number) => {
<div class="flex cursor-pointer" @click="openItem(index)"> <div class="flex cursor-pointer" @click="openItem(index)">
<img <img
alt="plus" alt="plus"
src="@/assets/plus.svg" src="@/assets/plus.svg?url"
class="mr-3" class="mr-3"
v-if="!item.isOpen" v-if="!item.isOpen"
/> />
<img <img
alt="plus" alt="plus"
src="@/assets/minus.svg" src="@/assets/minus.svg?url"
class="mr-3" class="mr-3"
v-if="item.isOpen" v-if="item.isOpen"
/> />
@ -134,11 +134,4 @@ h4 {
.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 {
@apply flex flex-col 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;
}
</style> </style>

83
src/views/HomeView.vue
View File

@ -25,7 +25,7 @@ etherStore.setSellerView(false);
// States // States
const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore); const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
const flowStep = ref<Step>(Step.Search); const flowStep = ref<Step>(Step.Search);
const pixTarget = ref<number>(); const pixTarget = ref<string>();
const tokenAmount = ref<number>(); const tokenAmount = ref<number>();
const lockID = ref<string>(""); const lockID = ref<string>("");
const loadingRelease = ref<boolean>(false); const loadingRelease = ref<boolean>(false);
@ -79,11 +79,12 @@ const releaseTransaction = async (e2eId: string) => {
}; };
const checkForUnreleasedLocks = async (): Promise<void> => { const checkForUnreleasedLocks = async (): Promise<void> => {
console.log("Checking for unreleased locks");
const walletLocks = await checkUnreleasedLock(walletAddress.value); const walletLocks = await checkUnreleasedLock(walletAddress.value);
if (walletLocks) { if (walletLocks) {
lockID.value = walletLocks.lockID; lockID.value = walletLocks.lockID;
tokenAmount.value = walletLocks.pix.value; tokenAmount.value = walletLocks.pix.value;
pixTarget.value = Number(walletLocks.pix.pixKey); pixTarget.value = walletLocks.pix.pixKey;
showModal.value = true; showModal.value = true;
} else { } else {
flowStep.value = Step.Search; flowStep.value = Step.Search;
@ -96,7 +97,7 @@ if (paramLockID) {
if (lockToRedirect) { if (lockToRedirect) {
lockID.value = lockToRedirect.lockID; lockID.value = lockToRedirect.lockID;
tokenAmount.value = lockToRedirect.pix.value; tokenAmount.value = lockToRedirect.pix.value;
pixTarget.value = Number(lockToRedirect.pix.pixKey); pixTarget.value = lockToRedirect.pix.pixKey;
flowStep.value = Step.Buy; flowStep.value = Step.Buy;
} else { } else {
flowStep.value = Step.Search; flowStep.value = Step.Search;
@ -119,46 +120,48 @@ onMounted(async () => {
</script> </script>
<template> <template>
<SearchComponent <div>
v-if="flowStep == Step.Search" <SearchComponent
@token-buy="confirmBuyClick" v-if="flowStep == Step.Search"
/> @token-buy="confirmBuyClick"
<CustomAlert
v-if="flowStep == Step.Search && showModal"
:type="'redirect'"
@close-alert="showModal = false"
@go-to-lock="flowStep = Step.Buy"
/>
<CustomAlert
v-if="
flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
"
:type="'buy'"
@close-alert="showBuyAlert = false"
/>
<div v-if="flowStep == Step.Buy">
<QrCodeComponent
:pixTarget="String(pixTarget)"
:tokenValue="tokenAmount"
@pix-validated="releaseTransaction"
v-if="!loadingLock"
/> />
<LoadingComponent <CustomAlert
v-if="loadingLock" v-if="flowStep == Step.Search && showModal"
:message="'A transação está sendo enviada para a rede'" :type="'redirect'"
@close-alert="showModal = false"
@go-to-lock="flowStep = Step.Buy"
/> />
</div> <CustomAlert
<div v-if="flowStep == Step.List"> v-if="
<div class="flex flex-col gap-10" v-if="!loadingRelease"> flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
<BuyConfirmedComponent "
:tokenAmount="tokenAmount" :type="'buy'"
:is-current-step="flowStep == Step.List" @close-alert="showBuyAlert = false"
@make-another-transaction="flowStep = Step.Search" />
<div v-if="flowStep == Step.Buy">
<QrCodeComponent
:pixTarget="String(pixTarget)"
:tokenValue="tokenAmount"
@pix-validated="releaseTransaction"
v-if="!loadingLock"
/>
<LoadingComponent
v-if="loadingLock"
:message="'A transação está sendo enviada para a rede'"
/>
</div>
<div v-if="flowStep == Step.List">
<div class="flex flex-col gap-10" v-if="!loadingRelease">
<BuyConfirmedComponent
:tokenAmount="tokenAmount"
:is-current-step="flowStep == Step.List"
@make-another-transaction="flowStep = Step.Search"
/>
</div>
<LoadingComponent
v-if="loadingRelease"
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
/> />
</div> </div>
<LoadingComponent
v-if="loadingRelease"
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
/>
</div> </div>
</template> </template>

54
src/views/ManageBidsView.vue
View File

@ -49,15 +49,19 @@ const callWithdraw = async (amount: string) => {
const getWalletTransactions = async () => { const getWalletTransactions = async () => {
etherStore.setLoadingWalletTransactions(true); etherStore.setLoadingWalletTransactions(true);
if (walletAddress.value) { if (walletAddress.value) {
console.log("Will fetch all required data...");
const walletDeposits = await listValidDepositTransactionsByWalletAddress( const walletDeposits = await listValidDepositTransactionsByWalletAddress(
walletAddress.value walletAddress.value
); );
console.log("Fetched deposits");
const allUserTransactions = await listAllTransactionByWalletAddress( const allUserTransactions = await listAllTransactionByWalletAddress(
walletAddress.value walletAddress.value
); );
console.log("Fetched all transactions");
activeLockAmount.value = await getActiveLockAmount(walletAddress.value); activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
console.log("Fetched active lock amount");
if (walletDeposits) { if (walletDeposits) {
depositList.value = walletDeposits; depositList.value = walletDeposits;
@ -86,30 +90,32 @@ watch(networkName, async () => {
</script> </script>
<template> <template>
<CustomAlert <div>
v-if="showAlert" <CustomAlert
:type="'withdraw'" v-if="showAlert"
@close-alert="showAlert = false" :type="'withdraw'"
/> @close-alert="showAlert = false"
<div class="page"> />
<div class="header" v-if="!loadingWithdraw && !walletAddress"> <div class="page">
Por Favor Conecte Sua Carteira <div class="header" v-if="!loadingWithdraw && !walletAddress">
</div> Por Favor Conecte Sua Carteira
<div class="header" v-if="!loadingWithdraw && walletAddress"> </div>
Gerenciar Ofertas <div class="header" v-if="!loadingWithdraw && walletAddress">
</div> Gerenciar Ofertas
<div class="w-full max-w-4xl"> </div>
<ListingComponent <div class="w-full max-w-4xl flex justify-center">
v-if="!loadingWithdraw && walletAddress" <ListingComponent
:valid-deposits="depositList" v-if="!loadingWithdraw && walletAddress"
:wallet-transactions="transactionsList" :valid-deposits="depositList"
:active-lock-amount="activeLockAmount" :wallet-transactions="transactionsList"
@deposit-withdrawn="callWithdraw" :active-lock-amount="activeLockAmount"
></ListingComponent> @deposit-withdrawn="callWithdraw"
<LoadingComponent ></ListingComponent>
v-if="loadingWithdraw" <LoadingComponent
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'" v-if="loadingWithdraw"
/> :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
/>
</div>
</div> </div>
</div> </div>
</template> </template>

48
src/views/SellerView.vue
View File

@ -61,29 +61,31 @@ const sendNetwork = async () => {
</script> </script>
<template> <template>
<div v-if="flowStep == Step.Sell"> <div>
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" /> <div v-if="flowStep == Step.Sell">
<LoadingComponent <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
v-if="loading" <LoadingComponent
:message="'A transação está sendo enviada para a rede.'" v-if="loading"
/> :message="'A transação está sendo enviada para a rede.'"
</div> />
<CustomAlert </div>
v-if="flowStep == Step.Sell && showAlert" <CustomAlert
:type="'sell'" v-if="flowStep == Step.Sell && showAlert"
@close-alert="showAlert = false" :type="'sell'"
/> @close-alert="showAlert = false"
<div v-if="flowStep == Step.Network">
<SendNetwork
:pixKey="pixKeyBuyer"
:offer="Number(offerValue)"
:selected-token="etherStore.selectedToken"
v-if="!loading"
@send-network="sendNetwork"
/>
<LoadingComponent
v-if="loading"
:message="'A transação está sendo enviada para a rede.'"
/> />
<div v-if="flowStep == Step.Network">
<SendNetwork
:pixKey="pixKeyBuyer"
:offer="Number(offerValue)"
:selected-token="etherStore.selectedToken"
v-if="!loading"
@send-network="sendNetwork"
/>
<LoadingComponent
v-if="loading"
:message="'A transação está sendo enviada para a rede.'"
/>
</div>
</div> </div>
</template> </template>

11
tsconfig.config.json
View File

@ -1,8 +1,15 @@
{ {
"extends": "@vue/tsconfig/tsconfig.node.json", "extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"], "include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"playwright.config.*"
],
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"types": ["node"] "types": [
"node"
]
} }
} }

16
tsconfig.json
View File

@ -1,15 +1,23 @@
{ {
"extends": "@vue/tsconfig/tsconfig.web.json", "extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "include": [
"env.d.ts",
"src/**/*",
"src/**/*.vue"
],
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": [
"./src/*"
]
}, },
"types": ["jest", "node"], "types": [
"jest",
"node"
],
"resolveJsonModule": true "resolveJsonModule": true
}, },
"references": [ "references": [
{ {
"path": "./tsconfig.config.json" "path": "./tsconfig.config.json"

14
vite.config.ts
View File

@ -3,9 +3,21 @@ import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vitest/config"; import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx"; import vueJsx from "@vitejs/plugin-vue-jsx";
import svgLoader from "vite-svg-loader";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
optimizeDeps: {
esbuildOptions: {
target: "esnext",
define: {
global: "globalThis",
},
supported: {
bigint: true,
},
},
},
test: { test: {
globals: true, globals: true,
environment: "jsdom", environment: "jsdom",
@ -17,7 +29,7 @@ export default defineConfig({
reporter: ["text", "lcov", "html"], reporter: ["text", "lcov", "html"],
}, },
}, },
plugins: [vue(), vueJsx()], plugins: [vue(), vueJsx(), svgLoader()],
resolve: { resolve: {
alias: { alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)), "@": fileURLToPath(new URL("./src", import.meta.url)),

1236
yarn.lock
View File

File diff suppressed because it is too large Load Diff