Merge pull request #1 from doiim/fix-token-dropdowns
Fix token dropdowns
This commit is contained in:
filipesoccol
GitHub
commit
1d98afbdfb
10222
package-lock.json
generated
Normal file
10222
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -18,12 +18,17 @@
|
||||
"@headlessui/vue": "^1.7.3",
|
||||
"@heroicons/vue": "^2.0.12",
|
||||
"@vueuse/core": "^9.12.0",
|
||||
"@web3-onboard/injected-wallets": "^2.11.2",
|
||||
"@web3-onboard/vue": "^2.9.0",
|
||||
"alchemy-sdk": "^2.3.0",
|
||||
"axios": "^1.2.1",
|
||||
"crc": "^3.8.0",
|
||||
"ethers": "^6.13.4",
|
||||
"marked": "^4.2.12",
|
||||
"pinia": "^2.0.23",
|
||||
"qrcode": "^1.5.1",
|
||||
"viem": "2.x",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "^3.2.41",
|
||||
"vue-markdown": "^2.2.4",
|
||||
"vue-router": "^4.1.5"
|
||||
@ -49,7 +54,6 @@
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"ethers": "^5.7.2",
|
||||
"jsdom": "^21.1.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.18",
|
||||
|
||||
46
src/App.vue
46
src/App.vue
@ -1,20 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import TopBar from "@/components/TopBar/TopBar.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>
|
||||
|
||||
<template>
|
||||
<div class="p-3 sm:p-4 md:p-8">
|
||||
<TopBar />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<template v-if="Component">
|
||||
<Transition name="page" mode="out-in" appear>
|
||||
<div :key="route.fullPath">
|
||||
<Suspense>
|
||||
<component :is="Component"></component>
|
||||
<template #default>
|
||||
<component :is="Component" />
|
||||
</template>
|
||||
<template #fallback>
|
||||
<div class="flex w-full h-full justify-center items-center">
|
||||
<SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
|
||||
<SpinnerComponent :width="'16'" :height="'16'" />
|
||||
</div>
|
||||
</template>
|
||||
</Suspense>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
</RouterView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
BIN
src/assets/Trial and expirations.jpg
Normal file
BIN
src/assets/Trial and expirations.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
3
src/assets/chevron.svg
Normal file
3
src/assets/chevron.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 508 B |
@ -1,3 +1,3 @@
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 484 B After Width: | Height: | Size: 491 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 484 B |
@ -1,3 +1,3 @@
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 493 B After Width: | Height: | Size: 498 B |
@ -1,3 +1,7 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
<?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(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>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 1001 B |
@ -6,7 +6,6 @@
|
||||
#app {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
height: fit-content;
|
||||
min-height: 100vh;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.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
4
src/assets/sepolia.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
21
src/assets/transitions.css
Normal file
21
src/assets/transitions.css
Normal 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);
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
<?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(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>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.4 KiB |
@ -4,8 +4,6 @@ import {
|
||||
getP2PixAddress,
|
||||
getProviderUrl,
|
||||
isPossibleNetwork,
|
||||
possibleChains,
|
||||
network2Chain,
|
||||
} from "../addresses";
|
||||
|
||||
import { setActivePinia, createPinia } from "pinia";
|
||||
@ -18,9 +16,6 @@ describe("addresses.ts types", () => {
|
||||
expectTypeOf(getP2PixAddress).toBeFunction();
|
||||
expectTypeOf(getProviderUrl).toBeFunction();
|
||||
expectTypeOf(isPossibleNetwork).toBeFunction();
|
||||
|
||||
expectTypeOf(possibleChains).toBeObject();
|
||||
expectTypeOf(network2Chain).toBeObject();
|
||||
});
|
||||
});
|
||||
|
||||
@ -31,7 +26,7 @@ describe("addresses.ts functions", () => {
|
||||
|
||||
it("getTokenAddress Ethereum", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.ethereum);
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
|
||||
);
|
||||
@ -39,12 +34,21 @@ describe("addresses.ts functions", () => {
|
||||
|
||||
it("getTokenAddress Polygon", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.polygon);
|
||||
etherStore.setNetworkId(NetworkEnum.polygon);
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29"
|
||||
);
|
||||
});
|
||||
|
||||
it("getTokenAddress Rootstock", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.rootstock);
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0xfE841c74250e57640390f46d914C88d22C51e82e"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
it("getTokenAddress Default", () => {
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
|
||||
@ -53,7 +57,7 @@ describe("addresses.ts functions", () => {
|
||||
|
||||
it("getP2PixAddress Ethereum", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.ethereum);
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
|
||||
);
|
||||
@ -61,12 +65,20 @@ describe("addresses.ts functions", () => {
|
||||
|
||||
it("getP2PixAddress Polygon", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.polygon);
|
||||
etherStore.setNetworkId(NetworkEnum.polygon);
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
|
||||
);
|
||||
});
|
||||
|
||||
it("getP2PixAddress Rootstock", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.rootstock);
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x98ba35eb14b38D6Aa709338283af3e922476dE34"
|
||||
);
|
||||
});
|
||||
|
||||
it("getP2PixAddress Default", () => {
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
|
||||
@ -75,30 +87,35 @@ describe("addresses.ts functions", () => {
|
||||
|
||||
it("getProviderUrl Ethereum", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.ethereum);
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
|
||||
});
|
||||
|
||||
it("getProviderUrl Polygon", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.polygon);
|
||||
etherStore.setNetworkId(NetworkEnum.polygon);
|
||||
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", () => {
|
||||
expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
|
||||
});
|
||||
|
||||
it("isPossibleNetwork Returns", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkName(NetworkEnum.ethereum);
|
||||
expect(isPossibleNetwork("0x5")).toBe(true);
|
||||
expect(isPossibleNetwork("5")).toBe(true);
|
||||
expect(isPossibleNetwork("0x13881")).toBe(true);
|
||||
expect(isPossibleNetwork("80001")).toBe(true);
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(isPossibleNetwork(0x5)).toBe(true);
|
||||
expect(isPossibleNetwork(5)).toBe(true);
|
||||
expect(isPossibleNetwork(0x13881)).toBe(true);
|
||||
expect(isPossibleNetwork(80001)).toBe(true);
|
||||
|
||||
expect(isPossibleNetwork("")).toBe(false);
|
||||
expect(isPossibleNetwork(" ")).toBe(false);
|
||||
expect(isPossibleNetwork("0x55")).toBe(false);
|
||||
expect(isPossibleNetwork(NaN)).toBe(false);
|
||||
expect(isPossibleNetwork(0x55)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,103 +1,70 @@
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
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 } } = {
|
||||
[NetworkEnum.sepolia]: {
|
||||
BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
|
||||
BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
|
||||
}
|
||||
|
||||
const polygonTokens: { [key in TokenEnum]: string } = {
|
||||
BRZ: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
|
||||
BRX: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
|
||||
}
|
||||
|
||||
const rootstockTokens: { [key in TokenEnum]: string } = {
|
||||
// BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
|
||||
},
|
||||
[NetworkEnum.rootstock]: {
|
||||
BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
|
||||
BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
|
||||
}
|
||||
// BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
|
||||
},
|
||||
};
|
||||
|
||||
export const getTokenByAddress = (address: string) => {
|
||||
for (const token of Object.keys(ethereumTokens)) {
|
||||
if (address === ethereumTokens[token as TokenEnum]) {
|
||||
for (const network of Object.values(NetworkEnum).filter(
|
||||
(v) => !isNaN(Number(v))
|
||||
)) {
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const possibleTokenAddresses: { [key: string]: { [key in TokenEnum]: string } } = {
|
||||
Ethereum: ethereumTokens,
|
||||
Polygon: polygonTokens,
|
||||
Rootstock: rootstockTokens,
|
||||
};
|
||||
|
||||
return possibleTokenAddresses[network ? network : etherStore.networkName][token];
|
||||
return Tokens[network ? network : etherStore.networkName][token];
|
||||
};
|
||||
|
||||
const getP2PixAddress = (network?: NetworkEnum): string => {
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const possibleP2PixAddresses: { [key: string]: string } = {
|
||||
Ethereum: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
|
||||
Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
|
||||
Rootstock: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
|
||||
const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
|
||||
[NetworkEnum.sepolia]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
|
||||
[NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
|
||||
};
|
||||
|
||||
return possibleP2PixAddresses[network ? network : etherStore.networkName];
|
||||
};
|
||||
|
||||
const getProviderUrl = (): string => {
|
||||
const getProviderUrl = (network?: NetworkEnum): string => {
|
||||
const etherStore = useEtherStore();
|
||||
const possibleProvidersUrls: { [key: string]: string } = {
|
||||
Ethereum: import.meta.env.VITE_SEPOLIA_API_URL,
|
||||
Polygon: import.meta.env.VITE_MUMBAI_API_URL,
|
||||
Rootstock: import.meta.env.VITE_RSK_API_URL,
|
||||
const possibleProvidersUrls: { [key in NetworkEnum]: string } = {
|
||||
[NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_API_URL,
|
||||
[NetworkEnum.rootstock]: import.meta.env.VITE_RSK_API_URL,
|
||||
};
|
||||
|
||||
return possibleProvidersUrls[etherStore.networkName];
|
||||
return possibleProvidersUrls[network || etherStore.networkName];
|
||||
};
|
||||
|
||||
const possibleChains: { [key: string]: NetworkEnum } = {
|
||||
"11155111": NetworkEnum.ethereum,
|
||||
"80001": NetworkEnum.polygon,
|
||||
"31": NetworkEnum.rootstock,
|
||||
const getProviderByNetwork = (network: NetworkEnum): JsonRpcProvider => {
|
||||
console.log("network", network);
|
||||
return new JsonRpcProvider(getProviderUrl(network), network);
|
||||
};
|
||||
|
||||
const network2Chain: { [key: string]: string } = {
|
||||
Ethereum: "0xAA36A7",
|
||||
Polygon: "0x13881",
|
||||
Localhost: "0x7a69",
|
||||
Rootstock: "0x1f",
|
||||
};
|
||||
|
||||
const isPossibleNetwork = (networkChain: string): boolean => {
|
||||
if (Object.keys(possibleChains).includes(networkChain.toString())) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
|
||||
return Number(networkChain) in NetworkEnum;
|
||||
};
|
||||
|
||||
export {
|
||||
getTokenAddress,
|
||||
getProviderUrl,
|
||||
possibleChains,
|
||||
network2Chain,
|
||||
isPossibleNetwork,
|
||||
getP2PixAddress,
|
||||
getProviderByNetwork,
|
||||
};
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
import { getContract, getProvider } from "./provider";
|
||||
import { getP2PixAddress, getTokenAddress } from "./addresses";
|
||||
|
||||
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
|
||||
|
||||
import { BigNumber, ethers } from "ethers";
|
||||
import { parseEther } from "ethers/lib/utils";
|
||||
import {
|
||||
solidityPackedKeccak256,
|
||||
encodeBytes32String,
|
||||
Signature,
|
||||
Contract,
|
||||
getBytes,
|
||||
Wallet,
|
||||
parseEther,
|
||||
} from "ethers";
|
||||
import type { TokenEnum } from "@/model/NetworkEnum";
|
||||
|
||||
const addLock = async (
|
||||
@ -14,16 +19,11 @@ const addLock = async (
|
||||
token: string,
|
||||
amount: number
|
||||
): Promise<string> => {
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const p2pContract = getContract();
|
||||
const p2pContract = await getContract();
|
||||
|
||||
const lock = await p2pContract.lock(
|
||||
seller,
|
||||
token,
|
||||
etherStore.walletAddress, // String "0x70997970C51812dc3A010C7d01b50e0d17dc79C8" (Example)
|
||||
ethers.constants.AddressZero, // String "0x0000000000000000000000000000000000000000"
|
||||
0,
|
||||
parseEther(String(amount)), // BigNumber
|
||||
[],
|
||||
[]
|
||||
@ -36,48 +36,41 @@ const addLock = async (
|
||||
};
|
||||
|
||||
const releaseLock = async (
|
||||
pixKey: number,
|
||||
pixKey: string,
|
||||
amount: number,
|
||||
e2eId: string,
|
||||
lockId: string
|
||||
): Promise<any> => {
|
||||
const mockBacenSigner = new ethers.Wallet(
|
||||
const mockBacenSigner = new Wallet(
|
||||
"0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
|
||||
);
|
||||
|
||||
const messageToSign = ethers.utils.solidityKeccak256(
|
||||
["uint160", "uint256", "bytes32"],
|
||||
[
|
||||
pixKey,
|
||||
parseEther(String(amount)),
|
||||
ethers.utils.formatBytes32String(e2eId),
|
||||
]
|
||||
const messageToSign = solidityPackedKeccak256(
|
||||
["bytes32", "uint256", "bytes32"],
|
||||
[pixKey, parseEther(String(amount)), encodeBytes32String(e2eId)]
|
||||
);
|
||||
|
||||
const messageHashBytes = ethers.utils.arrayify(messageToSign);
|
||||
const messageHashBytes = getBytes(messageToSign);
|
||||
const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
|
||||
const provider = getProvider();
|
||||
|
||||
const sig = ethers.utils.splitSignature(flatSig);
|
||||
|
||||
const signer = provider.getSigner();
|
||||
const p2pContract = new ethers.Contract(getP2PixAddress(), p2pix.abi, signer);
|
||||
const sig = Signature.from(flatSig);
|
||||
console.log(sig);
|
||||
const signer = await provider.getSigner();
|
||||
const p2pContract = new Contract(getP2PixAddress(), p2pix.abi, signer);
|
||||
|
||||
const release = await p2pContract.release(
|
||||
BigNumber.from(lockId),
|
||||
ethers.constants.AddressZero,
|
||||
ethers.utils.formatBytes32String(e2eId),
|
||||
sig.r,
|
||||
sig.s,
|
||||
sig.v
|
||||
BigInt(lockId),
|
||||
encodeBytes32String(e2eId),
|
||||
flatSig
|
||||
);
|
||||
await release.wait();
|
||||
|
||||
return release;
|
||||
};
|
||||
|
||||
const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
|
||||
const contract = getContract();
|
||||
const cancelDeposit = async (depositId: bigint): Promise<any> => {
|
||||
const contract = await getContract();
|
||||
|
||||
const cancel = await contract.cancelDeposit(depositId);
|
||||
await cancel.wait();
|
||||
@ -85,8 +78,11 @@ const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
|
||||
return cancel;
|
||||
};
|
||||
|
||||
const withdrawDeposit = async (amount: string, token: TokenEnum): Promise<any> => {
|
||||
const contract = getContract();
|
||||
const withdrawDeposit = async (
|
||||
amount: string,
|
||||
token: TokenEnum
|
||||
): Promise<any> => {
|
||||
const contract = await getContract();
|
||||
|
||||
const withdraw = await contract.withdraw(
|
||||
getTokenAddress(token),
|
||||
|
||||
@ -1,69 +1,64 @@
|
||||
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 { formatEther } from "ethers/lib/utils";
|
||||
import { getContract } from "./provider";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { getP2PixAddress, getTokenAddress } from "./addresses";
|
||||
import {
|
||||
getP2PixAddress,
|
||||
getProviderByNetwork,
|
||||
getTokenAddress,
|
||||
} from "./addresses";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import type { UnreleasedLock } from "@/model/UnreleasedLock";
|
||||
import type { Pix } from "@/model/Pix";
|
||||
|
||||
const getNetworksLiquidity = async (): Promise<void> => {
|
||||
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);
|
||||
|
||||
const depositListSepolia = await getValidDeposits(
|
||||
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
|
||||
const depositLists: ValidDeposit[][] = [];
|
||||
|
||||
for (const network of Object.values(NetworkEnum).filter(
|
||||
(v) => !isNaN(Number(v))
|
||||
)) {
|
||||
console.log("getNetworksLiquidity", network);
|
||||
const p2pContract = new Contract(
|
||||
getP2PixAddress(network as NetworkEnum),
|
||||
p2pix.abi,
|
||||
getProviderByNetwork(network as NetworkEnum)
|
||||
);
|
||||
|
||||
etherStore.setDepositsValidListSepolia(depositListSepolia);
|
||||
// etherStore.setDepositsValidListMumbai(depositListMumbai);
|
||||
etherStore.setDepositsValidListRootstock(depositListRootstock);
|
||||
depositLists.push(
|
||||
await getValidDeposits(
|
||||
getTokenAddress(etherStore.selectedToken, network as NetworkEnum),
|
||||
network as NetworkEnum,
|
||||
p2pContract
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
etherStore.setDepositsValidList(depositLists.flat());
|
||||
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 (
|
||||
token: string,
|
||||
network: NetworkEnum,
|
||||
contract?: Contract
|
||||
): Promise<ValidDeposit[]> => {
|
||||
let p2pContract: Contract;
|
||||
@ -71,46 +66,44 @@ const getValidDeposits = async (
|
||||
if (contract) {
|
||||
p2pContract = contract;
|
||||
} else {
|
||||
p2pContract = getContract(true);
|
||||
p2pContract = await getContract(true);
|
||||
}
|
||||
|
||||
const filterDeposits = p2pContract.filters.DepositAdded(null);
|
||||
const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
|
||||
|
||||
if (!contract) p2pContract = getContract(); // get metamask provider contract
|
||||
const eventsDeposits = await p2pContract.queryFilter(
|
||||
filterDeposits
|
||||
// 0,
|
||||
// "latest"
|
||||
);
|
||||
if (!contract) p2pContract = await getContract(); // get metamask provider contract
|
||||
const depositList: { [key: string]: ValidDeposit } = {};
|
||||
|
||||
await Promise.all(
|
||||
eventsDeposits.map(async (deposit) => {
|
||||
for (const deposit of eventsDeposits) {
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: deposit.topics,
|
||||
data: deposit.data,
|
||||
});
|
||||
// Get liquidity only for the selected token
|
||||
if (deposit.args?.token != token) return null;
|
||||
|
||||
if (decoded?.args.token != token) continue;
|
||||
const mappedBalance = await p2pContract.getBalance(
|
||||
deposit.args?.seller,
|
||||
decoded.args.seller,
|
||||
token
|
||||
);
|
||||
|
||||
const mappedPixTarget = await p2pContract.getPixTarget(
|
||||
deposit.args?.seller,
|
||||
token
|
||||
);
|
||||
|
||||
let validDeposit: ValidDeposit | null = null;
|
||||
|
||||
if (mappedBalance._hex) {
|
||||
if (mappedBalance) {
|
||||
validDeposit = {
|
||||
token: token,
|
||||
blockNumber: deposit.blockNumber,
|
||||
remaining: Number(formatEther(mappedBalance._hex)),
|
||||
seller: deposit.args?.seller,
|
||||
pixKey: Number(mappedPixTarget._hex),
|
||||
remaining: Number(formatEther(mappedBalance)),
|
||||
seller: decoded.args.seller,
|
||||
network,
|
||||
pixKey: "",
|
||||
};
|
||||
}
|
||||
|
||||
if (validDeposit)
|
||||
depositList[deposit.args?.seller + token] = validDeposit;
|
||||
})
|
||||
);
|
||||
if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
|
||||
}
|
||||
|
||||
return Object.values(depositList);
|
||||
};
|
||||
@ -118,7 +111,7 @@ const getValidDeposits = async (
|
||||
const getUnreleasedLockById = async (
|
||||
lockID: string
|
||||
): Promise<UnreleasedLock> => {
|
||||
const p2pContract = getContract();
|
||||
const p2pContract = await getContract();
|
||||
const pixData: Pix = {
|
||||
pixKey: "",
|
||||
};
|
||||
@ -127,7 +120,7 @@ const getUnreleasedLockById = async (
|
||||
|
||||
const pixTarget = lock.pixTarget;
|
||||
const amount = formatEther(lock?.amount);
|
||||
pixData.pixKey = String(Number(pixTarget));
|
||||
pixData.pixKey = pixTarget;
|
||||
pixData.value = Number(amount);
|
||||
|
||||
return {
|
||||
@ -136,4 +129,9 @@ const getUnreleasedLockById = async (
|
||||
};
|
||||
};
|
||||
|
||||
export { getValidDeposits, getNetworksLiquidity, getUnreleasedLockById };
|
||||
export {
|
||||
getValidDeposits,
|
||||
getNetworksLiquidity,
|
||||
getUnreleasedLockById,
|
||||
getPixKey,
|
||||
};
|
||||
|
||||
@ -1,95 +1,27 @@
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
|
||||
|
||||
import { updateWalletStatus } from "./wallet";
|
||||
import {
|
||||
getProviderUrl,
|
||||
isPossibleNetwork,
|
||||
possibleChains,
|
||||
network2Chain,
|
||||
getP2PixAddress,
|
||||
} from "./addresses";
|
||||
import { getProviderUrl, getP2PixAddress } from "./addresses";
|
||||
import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
|
||||
|
||||
import { ethers } from "ethers";
|
||||
let provider: BrowserProvider | JsonRpcProvider | null = null;
|
||||
|
||||
const getProvider = (
|
||||
onlyAlchemyProvider: boolean = false
|
||||
): ethers.providers.Web3Provider | ethers.providers.JsonRpcProvider => {
|
||||
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 getProvider = (onlyAlchemyProvider: boolean = false) => {
|
||||
if (onlyAlchemyProvider) return new JsonRpcProvider(getProviderUrl()); // alchemy provider
|
||||
return provider;
|
||||
};
|
||||
|
||||
const getContract = (onlyAlchemyProvider: boolean = false) => {
|
||||
const provider = 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;
|
||||
|
||||
const getContract = async (onlyAlchemyProvider: boolean = false) => {
|
||||
const p = getProvider(onlyAlchemyProvider);
|
||||
try {
|
||||
const window_ = window as any;
|
||||
await window_.ethereum.request({
|
||||
method: "wallet_switchEthereumChain",
|
||||
params: [{ chainId: network2Chain[network] }], // chainId must be in hexadecimal numbers
|
||||
});
|
||||
} catch {
|
||||
return false;
|
||||
const signer = await p?.getSigner();
|
||||
return new Contract(getP2PixAddress(), p2pix.abi, signer);
|
||||
} catch (err) {
|
||||
return new Contract(getP2PixAddress(), p2pix.abi, p);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
export {
|
||||
getProvider,
|
||||
getContract,
|
||||
connectProvider,
|
||||
listenToNetworkChange,
|
||||
requestNetworkChange,
|
||||
const connectProvider = async (p: any): Promise<void> => {
|
||||
provider = new BrowserProvider(p, "any");
|
||||
await updateWalletStatus();
|
||||
};
|
||||
export { getProvider, getContract, connectProvider };
|
||||
|
||||
@ -1,42 +1,49 @@
|
||||
import { getContract, getProvider } from "./provider";
|
||||
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 { useEtherStore } from "@/store/ether";
|
||||
|
||||
const approveTokens = async (tokenQty: string): Promise<any> => {
|
||||
const provider = getProvider();
|
||||
const signer = provider.getSigner();
|
||||
const signer = await provider?.getSigner();
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const tokenContract = new ethers.Contract(
|
||||
const tokenContract = new Contract(
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
|
||||
// Check if the token is already approved
|
||||
const approved = await tokenContract.allowance(
|
||||
await signer?.getAddress(),
|
||||
getP2PixAddress()
|
||||
);
|
||||
if (approved < parseEther(tokenQty)) {
|
||||
// Approve tokens
|
||||
const apprv = await tokenContract.approve(
|
||||
getP2PixAddress(),
|
||||
parseEther(tokenQty)
|
||||
);
|
||||
|
||||
await apprv.wait();
|
||||
return apprv;
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
|
||||
const p2pContract = getContract();
|
||||
const p2pContract = await getContract();
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const deposit = await p2pContract.deposit(
|
||||
pixKey,
|
||||
encodeBytes32String(""),
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
parseEther(tokenQty),
|
||||
pixKey,
|
||||
true,
|
||||
ethers.utils.formatBytes32String("")
|
||||
true
|
||||
);
|
||||
|
||||
await deposit.wait();
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
import {
|
||||
Contract,
|
||||
formatEther,
|
||||
getAddress,
|
||||
Interface,
|
||||
Log,
|
||||
LogDescription,
|
||||
} from "ethers";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
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 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 type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
@ -14,38 +21,40 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
import type { UnreleasedLock } from "@/model/UnreleasedLock";
|
||||
import type { Pix } from "@/model/Pix";
|
||||
|
||||
const updateWalletStatus = async (): Promise<void> => {
|
||||
export const updateWalletStatus = async (): Promise<void> => {
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const provider = getProvider();
|
||||
const signer = provider.getSigner();
|
||||
const provider = await getProvider();
|
||||
const signer = await provider?.getSigner();
|
||||
|
||||
const { chainId } = await provider.getNetwork();
|
||||
if (!isPossibleNetwork(chainId.toString())) {
|
||||
const { chainId } = await provider?.getNetwork();
|
||||
if (!isPossibleNetwork(Number(chainId))) {
|
||||
window.alert("Invalid chain!:" + chainId);
|
||||
return;
|
||||
}
|
||||
etherStore.setNetworkName(possibleChains[chainId]);
|
||||
etherStore.setNetworkId(Number(chainId));
|
||||
|
||||
const mockTokenContract = new ethers.Contract(
|
||||
const mockTokenContract = new Contract(
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
|
||||
const walletAddress = await provider.send("eth_requestAccounts", []);
|
||||
const walletAddress = await provider?.send("eth_requestAccounts", []);
|
||||
const balance = await mockTokenContract.balanceOf(walletAddress[0]);
|
||||
|
||||
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
|
||||
): Promise<ValidDeposit[]> => {
|
||||
const etherStore = useEtherStore();
|
||||
const walletDeposits = await getValidDeposits(getTokenAddress(etherStore.selectedToken));
|
||||
|
||||
const walletDeposits = await getValidDeposits(
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
etherStore.networkName
|
||||
);
|
||||
if (walletDeposits) {
|
||||
return walletDeposits
|
||||
.filter((deposit) => deposit.seller == walletAddress)
|
||||
@ -57,68 +66,87 @@ const listValidDepositTransactionsByWalletAddress = async (
|
||||
return [];
|
||||
};
|
||||
|
||||
const getLockStatus = async (id: [BigNumber]): Promise<number> => {
|
||||
const p2pContract = getContract();
|
||||
const getLockStatus = async (id: [BigInt]): Promise<number> => {
|
||||
const p2pContract = await getContract();
|
||||
const res = await p2pContract.getLocksStatus([id]);
|
||||
|
||||
return res[1][0];
|
||||
};
|
||||
|
||||
const filterLockStatus = async (
|
||||
transactions: Event[]
|
||||
transactions: Log[]
|
||||
): Promise<WalletTransaction[]> => {
|
||||
const txs = await Promise.all(
|
||||
transactions.map(async (transaction) => {
|
||||
const txs: WalletTransaction[] = [];
|
||||
|
||||
for (const transaction of transactions) {
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: transaction.topics,
|
||||
data: transaction.data,
|
||||
});
|
||||
if (!decoded) continue;
|
||||
const tx: WalletTransaction = {
|
||||
token: transaction.args?.token ? transaction.args?.token : "",
|
||||
blockNumber: transaction.blockNumber ? transaction.blockNumber : -1,
|
||||
amount: transaction.args?.amount
|
||||
? Number(formatEther(transaction.args?.amount))
|
||||
token: decoded.args.token ? decoded.args.token : "",
|
||||
blockNumber: transaction.blockNumber,
|
||||
amount: decoded.args.amount
|
||||
? Number(formatEther(decoded.args.amount))
|
||||
: -1,
|
||||
seller: transaction.args?.seller ? transaction.args?.seller : "",
|
||||
buyer: transaction.args?.buyer ? transaction.args?.buyer : "",
|
||||
event: transaction.event ? transaction.event : "",
|
||||
seller: decoded.args.seller ? decoded.args.seller : "",
|
||||
buyer: decoded.args.buyer ? decoded.args.buyer : "",
|
||||
event: decoded.name,
|
||||
lockStatus:
|
||||
transaction.event == "LockAdded"
|
||||
? await getLockStatus(transaction.args?.lockID)
|
||||
decoded.name == "LockAdded"
|
||||
? await getLockStatus(decoded.args.lockID)
|
||||
: -1,
|
||||
transactionHash: transaction.transactionHash
|
||||
? transaction.transactionHash
|
||||
: "",
|
||||
transactionID: transaction.args?.lockID
|
||||
? String(transaction.args?.lockID)
|
||||
: "",
|
||||
transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
|
||||
};
|
||||
|
||||
return tx;
|
||||
})
|
||||
);
|
||||
|
||||
txs.push(tx);
|
||||
}
|
||||
return txs;
|
||||
};
|
||||
|
||||
const listAllTransactionByWalletAddress = async (
|
||||
export const listAllTransactionByWalletAddress = async (
|
||||
walletAddress: string
|
||||
): Promise<WalletTransaction[]> => {
|
||||
const p2pContract = getContract(true);
|
||||
const p2pContract = await getContract(true);
|
||||
|
||||
// Get deposits
|
||||
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 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 eventsReleasedLocks = await p2pContract.queryFilter(
|
||||
filterReleasedLocks
|
||||
filterReleasedLocks,
|
||||
0,
|
||||
"latest"
|
||||
);
|
||||
console.log("Fetched all wallet released locks");
|
||||
|
||||
// Get withdrawn deposits
|
||||
const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
|
||||
walletAddress,
|
||||
]);
|
||||
const eventsWithdrawnDeposits = await p2pContract.queryFilter(
|
||||
filterWithdrawnDeposits
|
||||
);
|
||||
console.log("Fetched all wallet withdrawn deposits");
|
||||
|
||||
const lockStatusFiltered = await filterLockStatus(
|
||||
[
|
||||
@ -135,54 +163,86 @@ const listAllTransactionByWalletAddress = async (
|
||||
};
|
||||
|
||||
// get wallet's release transactions
|
||||
const listReleaseTransactionByWalletAddress = async (
|
||||
export const listReleaseTransactionByWalletAddress = async (
|
||||
walletAddress: string
|
||||
): Promise<Event[]> => {
|
||||
const p2pContract = getContract(true);
|
||||
): Promise<LogDescription[]> => {
|
||||
const p2pContract = await getContract(true);
|
||||
|
||||
const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(
|
||||
filterReleasedLocks
|
||||
filterReleasedLocks,
|
||||
0,
|
||||
"latest"
|
||||
);
|
||||
|
||||
return eventsReleasedLocks.sort((a, b) => {
|
||||
return eventsReleasedLocks
|
||||
.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 (
|
||||
walletAddress: string
|
||||
): Promise<Event[]> => {
|
||||
const p2pContract = getContract(true);
|
||||
): Promise<LogDescription[]> => {
|
||||
const p2pContract = await getContract(true);
|
||||
|
||||
const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
|
||||
|
||||
return eventsReleasedLocks.sort((a, b) => {
|
||||
return eventsReleasedLocks
|
||||
.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 (
|
||||
sellerAddress: string
|
||||
): Promise<Event[]> => {
|
||||
const p2pContract = getContract(true);
|
||||
|
||||
): Promise<LogDescription[]> => {
|
||||
const p2pContract = await getContract(true);
|
||||
console.log("Will get locks as seller", sellerAddress);
|
||||
const filterAddedLocks = p2pContract.filters.LockAdded();
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
|
||||
|
||||
return eventsReleasedLocks.filter((lock) =>
|
||||
lock.args?.seller
|
||||
.toHexString()
|
||||
.substring(3)
|
||||
.includes(sellerAddress.substring(2).toLowerCase())
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(
|
||||
filterAddedLocks
|
||||
// 0,
|
||||
// "latest"
|
||||
);
|
||||
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
|
||||
): Promise<UnreleasedLock | undefined> => {
|
||||
const p2pContract = getContract();
|
||||
const p2pContract = await getContract();
|
||||
const pixData: Pix = {
|
||||
pixKey: "",
|
||||
};
|
||||
@ -201,7 +261,7 @@ const checkUnreleasedLock = async (
|
||||
|
||||
const pixTarget = lock.pixTarget;
|
||||
const amount = formatEther(lock?.amount);
|
||||
pixData.pixKey = String(Number(pixTarget));
|
||||
pixData.pixKey = pixTarget;
|
||||
pixData.value = Number(amount);
|
||||
|
||||
return {
|
||||
@ -211,8 +271,10 @@ const checkUnreleasedLock = async (
|
||||
}
|
||||
};
|
||||
|
||||
const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
|
||||
const p2pContract = getContract();
|
||||
export const getActiveLockAmount = async (
|
||||
walletAddress: string
|
||||
): Promise<number> => {
|
||||
const p2pContract = await getContract(true);
|
||||
const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
|
||||
|
||||
const lockStatus = await p2pContract.getLocksStatus(
|
||||
@ -236,12 +298,3 @@ const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
|
||||
|
||||
return activeLockAmount;
|
||||
};
|
||||
|
||||
export {
|
||||
updateWalletStatus,
|
||||
listValidDepositTransactionsByWalletAddress,
|
||||
listAllTransactionByWalletAddress,
|
||||
listReleaseTransactionByWalletAddress,
|
||||
checkUnreleasedLock,
|
||||
getActiveLockAmount,
|
||||
};
|
||||
|
||||
@ -86,7 +86,7 @@ onMounted(async () => {
|
||||
para a sua carteira!
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="main-container">
|
||||
<div
|
||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||
>
|
||||
@ -145,13 +145,6 @@ p {
|
||||
.text {
|
||||
@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 {
|
||||
@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 {
|
||||
-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>
|
||||
|
||||
@ -38,9 +38,9 @@ switch (props.type) {
|
||||
<div
|
||||
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">
|
||||
<p class="text-black tracking-tighter leading-tight my-2">
|
||||
<p class="text-black tracking-tighter leading-tight py-2">
|
||||
{{ alertText }}
|
||||
</p>
|
||||
<button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
|
||||
@ -110,7 +110,6 @@ switch (props.type) {
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding-left: v-bind(alertPaddingLeft);
|
||||
}
|
||||
|
||||
.modal-mobile {
|
||||
|
||||
@ -17,6 +17,7 @@ if (props.isRedirectModal) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
|
||||
v-if="!isRedirectModal"
|
||||
@ -26,8 +27,8 @@ if (props.isRedirectModal) {
|
||||
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.
|
||||
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
|
||||
contrário não conseguiremos comprovar o seu depósito e não será
|
||||
possível transferir os tokens para sua carteira.
|
||||
</p>
|
||||
<button
|
||||
@ -64,6 +65,7 @@ if (props.isRedirectModal) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -96,7 +96,7 @@ const getRemaining = (): number => {
|
||||
};
|
||||
|
||||
const getExplorer = (): string => {
|
||||
return etherStore.networkName == NetworkEnum.ethereum
|
||||
return etherStore.networkName == NetworkEnum.sepolia
|
||||
? "Etherscan"
|
||||
: "Polygonscan";
|
||||
};
|
||||
@ -107,7 +107,7 @@ const showInitialItems = (): void => {
|
||||
|
||||
const openEtherscanUrl = (transactionHash: string): void => {
|
||||
const networkUrl =
|
||||
etherStore.networkName == NetworkEnum.ethereum
|
||||
etherStore.networkName == NetworkEnum.sepolia
|
||||
? "sepolia.etherscan.io"
|
||||
: "mumbai.polygonscan.com";
|
||||
const url = `https://${networkUrl}/tx/${transactionHash}`;
|
||||
@ -162,10 +162,10 @@ showInitialItems();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="blur-container" v-if="loadingWalletTransactions">
|
||||
<div class="main-container max-w-md" v-if="loadingWalletTransactions">
|
||||
<SpinnerComponent width="8" height="8"></SpinnerComponent>
|
||||
</div>
|
||||
<div class="blur-container" v-if="!loadingWalletTransactions">
|
||||
<div class="main-container max-w-md" v-if="!loadingWalletTransactions">
|
||||
<div
|
||||
class="w-full bg-white p-4 sm:p-6 rounded-lg"
|
||||
v-if="props.validDeposits.length > 0"
|
||||
@ -190,7 +190,7 @@ showInitialItems();
|
||||
>
|
||||
<img
|
||||
alt="info image"
|
||||
src="@/assets/info.svg"
|
||||
src="@/assets/info.svg?url"
|
||||
aria-describedby="tooltip"
|
||||
ref="reference"
|
||||
@mouseover="showInfoTooltip = true"
|
||||
@ -216,7 +216,7 @@ showInitialItems();
|
||||
>
|
||||
<img
|
||||
alt="Withdraw image"
|
||||
src="@/assets/withdraw.svg"
|
||||
src="@/assets/withdraw.svg?url"
|
||||
class="w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
<span class="last-release-info">Sacar</span>
|
||||
@ -263,7 +263,7 @@ showInitialItems();
|
||||
>
|
||||
<img
|
||||
alt="Withdraw image"
|
||||
src="@/assets/withdraw.svg"
|
||||
src="@/assets/withdraw.svg?url"
|
||||
class="w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
<span class="last-release-info">Sacar</span>
|
||||
@ -318,7 +318,7 @@ showInitialItems();
|
||||
<span class="last-release-info">{{ getExplorer() }}</span>
|
||||
<img
|
||||
alt="Redirect image"
|
||||
src="@/assets/redirect.svg"
|
||||
src="@/assets/redirect.svg?url"
|
||||
class="w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
</div>
|
||||
@ -389,10 +389,6 @@ p {
|
||||
@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 {
|
||||
@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;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ const props = defineProps({
|
||||
{{ props.title ? props.title : "Confirme em sua carteira" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container sm:w-[26rem] w-[20rem]">
|
||||
<div class="main-container max-w-md">
|
||||
<div
|
||||
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
|
||||
alt="Polygon image"
|
||||
src="@/assets/validating.svg"
|
||||
src="@/assets/validating.svg?url"
|
||||
width="96"
|
||||
height="48"
|
||||
/>
|
||||
@ -60,10 +60,6 @@ const props = defineProps({
|
||||
@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"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -93,11 +93,11 @@ onUnmounted(() => {
|
||||
Utilize o QR Code ou copie o código para realizar o Pix
|
||||
</span>
|
||||
<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
|
||||
autenticação para enviar a transação para a rede.
|
||||
Após realizar o Pix no banco de sua preferência, clique no botão abaixo
|
||||
para gerar a assinatura para liberação dos tokens.
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
|
||||
<div class="main-container max-w-md text-black">
|
||||
<div
|
||||
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>
|
||||
<img
|
||||
alt="Copy PIX code"
|
||||
src="@/assets/copyPix.svg"
|
||||
src="@/assets/copyPix.svg?url"
|
||||
width="16"
|
||||
height="16"
|
||||
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
|
||||
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
|
||||
carteira. Confira aqui como encontrar o código no comprovante.
|
||||
</span>
|
||||
</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
|
||||
:is-disabled="isPixValid == false"
|
||||
:text="'Enviar para a rede'"
|
||||
@ -222,7 +182,7 @@ h2 {
|
||||
}
|
||||
|
||||
.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"] {
|
||||
@ -233,22 +193,4 @@ input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-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>
|
||||
|
||||
@ -4,13 +4,13 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { connectProvider } from "@/blockchain/provider";
|
||||
import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
import SpinnerComponent from "./SpinnerComponent.vue";
|
||||
import { getTokenImage } from "@/utils/imagesPath";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
|
||||
import { TokenEnum } from "@/model/NetworkEnum";
|
||||
|
||||
@ -22,37 +22,40 @@ const {
|
||||
walletAddress,
|
||||
networkName,
|
||||
selectedToken,
|
||||
depositsValidListSepolia,
|
||||
depositsValidListMumbai,
|
||||
depositsValidList,
|
||||
loadingNetworkLiquidity,
|
||||
} = storeToRefs(etherStore);
|
||||
|
||||
// html references
|
||||
const tokenDropdownRef = ref<any>(null);
|
||||
|
||||
// Reactive state
|
||||
const tokenValue = ref<number>(0);
|
||||
const enableConfirmButton = ref<boolean>(false);
|
||||
const enableWalletButton = ref<boolean>(false);
|
||||
const hasLiquidity = ref<boolean>(true);
|
||||
const validDecimals = ref<boolean>(true);
|
||||
const selectedSepoliaDeposit = ref<ValidDeposit>();
|
||||
const selectedMumbaiDeposit = ref<ValidDeposit>();
|
||||
const selectedRootstockDeposit = ref<ValidDeposit>();
|
||||
const selectedDeposits = ref<ValidDeposit[]>();
|
||||
|
||||
import ChevronDown from "@/assets/chevronDown.svg";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
import { getPixKey } from "@/blockchain/events";
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["tokenBuy"]);
|
||||
|
||||
// Blockchain methods
|
||||
const connectAccount = async (): Promise<void> => {
|
||||
await connectProvider();
|
||||
|
||||
enableOrDisableConfirmButton();
|
||||
const { connectWallet } = useOnboard();
|
||||
await connectWallet();
|
||||
};
|
||||
|
||||
const emitConfirmButton = (): void => {
|
||||
const selectedDeposit =
|
||||
networkName.value == NetworkEnum.ethereum
|
||||
? selectedSepoliaDeposit.value
|
||||
: selectedMumbaiDeposit.value;
|
||||
emit("tokenBuy", selectedDeposit, tokenValue.value);
|
||||
const emitConfirmButton = async (): Promise<void> => {
|
||||
const deposit = selectedDeposits.value?.find(
|
||||
(d) => d.network === networkName.value
|
||||
);
|
||||
if (!deposit) return;
|
||||
deposit.pixKey = await getPixKey(deposit.seller, deposit.token);
|
||||
emit("tokenBuy", deposit, tokenValue.value);
|
||||
};
|
||||
|
||||
// Debounce methods
|
||||
@ -75,6 +78,10 @@ const openTokenSelection = (): void => {
|
||||
selectTokenToggle.value = true;
|
||||
};
|
||||
|
||||
onClickOutside(tokenDropdownRef, () => {
|
||||
selectTokenToggle.value = false;
|
||||
});
|
||||
|
||||
const handleSelectedToken = (token: TokenEnum): void => {
|
||||
etherStore.setSelectedToken(token);
|
||||
selectTokenToggle.value = false;
|
||||
@ -83,45 +90,23 @@ const handleSelectedToken = (token: TokenEnum): void => {
|
||||
// Verify if there is a valid deposit to buy
|
||||
const verifyLiquidity = (): void => {
|
||||
enableConfirmButton.value = false;
|
||||
selectedSepoliaDeposit.value = undefined;
|
||||
selectedMumbaiDeposit.value = undefined;
|
||||
selectedRootstockDeposit.value = undefined;
|
||||
|
||||
if (tokenValue.value <= 0) {
|
||||
enableWalletButton.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
selectedSepoliaDeposit.value = verifyNetworkLiquidity(
|
||||
const selDeposits = verifyNetworkLiquidity(
|
||||
tokenValue.value,
|
||||
walletAddress.value,
|
||||
depositsValidListSepolia.value
|
||||
);
|
||||
selectedMumbaiDeposit.value = verifyNetworkLiquidity(
|
||||
tokenValue.value,
|
||||
walletAddress.value,
|
||||
depositsValidListMumbai.value
|
||||
depositsValidList.value
|
||||
);
|
||||
|
||||
selectedDeposits.value = selDeposits;
|
||||
hasLiquidity.value = !!selDeposits.find(
|
||||
(d) => d.network === networkName.value
|
||||
);
|
||||
enableOrDisableConfirmButton();
|
||||
if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) {
|
||||
hasLiquidity.value = true;
|
||||
enableWalletButton.value = true;
|
||||
} else {
|
||||
hasLiquidity.value = false;
|
||||
enableWalletButton.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const enableOrDisableConfirmButton = (): void => {
|
||||
if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.ethereum)
|
||||
enableConfirmButton.value = true;
|
||||
else if (
|
||||
selectedMumbaiDeposit.value &&
|
||||
networkName.value == NetworkEnum.polygon
|
||||
)
|
||||
enableConfirmButton.value = true;
|
||||
else enableConfirmButton.value = false;
|
||||
enableConfirmButton.value =
|
||||
!!selectedDeposits.value &&
|
||||
!!selectedDeposits.value.find((d) => d.network === networkName.value);
|
||||
};
|
||||
|
||||
watch(networkName, (): void => {
|
||||
@ -147,7 +132,7 @@ watch(walletAddress, (): void => {
|
||||
tokens após realizar o Pix</span
|
||||
>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="main-container">
|
||||
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
||||
<div
|
||||
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">
|
||||
<input
|
||||
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="{
|
||||
'font-semibold': tokenValue != undefined,
|
||||
'text-xl': tokenValue != undefined,
|
||||
@ -164,9 +149,10 @@ watch(walletAddress, (): void => {
|
||||
placeholder="0 "
|
||||
step=".01"
|
||||
/>
|
||||
<div class="relative">
|
||||
<div class="relative overflow-visible">
|
||||
<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()"
|
||||
>
|
||||
<img
|
||||
@ -174,18 +160,29 @@ watch(walletAddress, (): void => {
|
||||
class="sm:w-fit w-4"
|
||||
:src="getTokenImage(selectedToken)"
|
||||
/>
|
||||
<span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
|
||||
selectedToken
|
||||
}}</span>
|
||||
<span
|
||||
class="text-gray-900 sm:text-lg text-md font-medium"
|
||||
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>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="selectTokenToggle"
|
||||
class="mt-2 w-[100px] text-gray-900 lg-view absolute"
|
||||
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||
>
|
||||
<div class="bg-white rounded-md z-10">
|
||||
<div
|
||||
v-for="token in TokenEnum"
|
||||
class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
|
||||
:key="token"
|
||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||
@click="handleSelectedToken(token)"
|
||||
>
|
||||
<img
|
||||
@ -205,30 +202,34 @@ watch(walletAddress, (): void => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-divide py-2 mb-2"></div>
|
||||
<div
|
||||
class="flex justify-between"
|
||||
v-if="hasLiquidity && !loadingNetworkLiquidity"
|
||||
>
|
||||
<div class="flex justify-between" v-if="!loadingNetworkLiquidity">
|
||||
<p class="text-gray-500 font-normal text-sm w-auto">
|
||||
~ R$ {{ tokenValue.toFixed(2) }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<img
|
||||
alt="Polygon image"
|
||||
src="@/assets/polygon.svg"
|
||||
alt="Rootstock image"
|
||||
src="@/assets/rootstock.svg?url"
|
||||
width="24"
|
||||
height="24"
|
||||
v-if="selectedMumbaiDeposit"
|
||||
v-if="
|
||||
selectedDeposits &&
|
||||
selectedDeposits.find((d) => d.network == NetworkEnum.rootstock)
|
||||
"
|
||||
/>
|
||||
<img
|
||||
alt="Ethereum image"
|
||||
src="@/assets/ethereum.svg"
|
||||
src="@/assets/ethereum.svg?url"
|
||||
width="24"
|
||||
height="24"
|
||||
v-if="selectedSepoliaDeposit"
|
||||
v-if="
|
||||
selectedDeposits &&
|
||||
selectedDeposits.find((d) => d.network == NetworkEnum.sepolia)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -254,14 +255,14 @@ watch(walletAddress, (): void => {
|
||||
v-else-if="!hasLiquidity && !loadingNetworkLiquidity"
|
||||
>
|
||||
<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>
|
||||
<CustomButton
|
||||
v-if="!walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
:is-disabled="!enableWalletButton"
|
||||
@buttonClicked="connectAccount()"
|
||||
/>
|
||||
<CustomButton
|
||||
@ -297,10 +298,6 @@ watch(walletAddress, (): void => {
|
||||
@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"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -4,12 +4,14 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
|
||||
import { TokenEnum } from "@/model/NetworkEnum";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { getTokenImage } from "@/utils/imagesPath";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
|
||||
// Store
|
||||
const etherStore = useEtherStore();
|
||||
const { walletAddress } = storeToRefs(etherStore);
|
||||
|
||||
// Reactive state
|
||||
const tokenValue = ref<number>(0);
|
||||
@ -20,6 +22,12 @@ const validDecimals = ref<boolean>(true);
|
||||
// Emits
|
||||
const emit = defineEmits(["tokenBuy"]);
|
||||
|
||||
// Blockchain methods
|
||||
const connectAccount = async (): Promise<void> => {
|
||||
const { connectWallet } = useOnboard();
|
||||
await connectWallet();
|
||||
};
|
||||
|
||||
// Debounce methods
|
||||
const handleInputEvent = (event: any): void => {
|
||||
const { value } = event.target;
|
||||
@ -46,7 +54,7 @@ const handleInputEvent = (event: any): void => {
|
||||
tokens após realizar o Pix</span
|
||||
>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="main-container">
|
||||
<div
|
||||
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">
|
||||
<img
|
||||
alt="Polygon image"
|
||||
src="@/assets/polygon.svg"
|
||||
src="@/assets/polygon.svg?url"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
<img
|
||||
alt="Ethereum image"
|
||||
src="@/assets/ethereum.svg"
|
||||
src="@/assets/ethereum.svg?url"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
@ -109,9 +117,15 @@ const handleInputEvent = (event: any): void => {
|
||||
</div>
|
||||
|
||||
<CustomButton
|
||||
v-if="walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
@buttonClicked="emit('tokenBuy')"
|
||||
/>
|
||||
<CustomButton
|
||||
v-if="!walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
@buttonClicked="connectAccount()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -139,10 +153,6 @@ const handleInputEvent = (event: any): void => {
|
||||
@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"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -20,13 +20,13 @@ const props = defineProps({
|
||||
>Envie sua oferta para a rede
|
||||
</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.
|
||||
Caso deseje retirar a oferta, será necessário aguardar 24h para receber
|
||||
os tokens de volta.</span
|
||||
>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="main-container sm:w-1/3">
|
||||
<div
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@apply font-medium text-base;
|
||||
}
|
||||
|
||||
@ -9,6 +9,13 @@ import { storeToRefs } from "pinia";
|
||||
import { connectProvider } from "@/blockchain/provider";
|
||||
import { TokenEnum } from "@/model/NetworkEnum";
|
||||
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
|
||||
const etherStore = useEtherStore();
|
||||
@ -26,6 +33,12 @@ const validPixFormat = ref<boolean>(true);
|
||||
// Emits
|
||||
const emit = defineEmits(["approveTokens"]);
|
||||
|
||||
// Blockchain methods
|
||||
const connectAccount = async (): Promise<void> => {
|
||||
const { connectWallet } = useOnboard();
|
||||
await connectWallet();
|
||||
};
|
||||
|
||||
// Debounce methods
|
||||
const handleInputEvent = (event: any): void => {
|
||||
const { value } = event.target;
|
||||
@ -59,19 +72,21 @@ const openTokenSelection = (): void => {
|
||||
selectTokenToggle.value = true;
|
||||
};
|
||||
|
||||
onClickOutside(tokenDropdownRef, () => {
|
||||
selectTokenToggle.value = false;
|
||||
});
|
||||
|
||||
const handleSelectedToken = (token: TokenEnum): void => {
|
||||
etherStore.setSelectedToken(token);
|
||||
selectTokenToggle.value = false;
|
||||
};
|
||||
|
||||
const handleButtonClick = async (
|
||||
const handleSellClick = async (
|
||||
offer: string,
|
||||
pixKey: string
|
||||
): Promise<void> => {
|
||||
const postProcessedPixKey = postProcessKey(pixKey);
|
||||
if (walletAddress.value)
|
||||
emit("approveTokens", { offer, postProcessedPixKey });
|
||||
else await connectProvider();
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -88,7 +103,7 @@ const handleButtonClick = async (
|
||||
envio da transação e confirme sua oferta.</span
|
||||
>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="main-container">
|
||||
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
||||
<div
|
||||
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"
|
||||
v-model="offer"
|
||||
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
|
||||
v-bind:class="{
|
||||
'font-semibold': offer != undefined,
|
||||
'text-xl': offer != undefined,
|
||||
:class="{
|
||||
'!font-medium': offer !== undefined && offer !== '',
|
||||
'text-xl': offer !== undefined && offer !== '',
|
||||
}"
|
||||
@input="debounce(handleInputEvent, 500)($event)"
|
||||
placeholder="Digite sua oferta"
|
||||
step=".01"
|
||||
/>
|
||||
<div class="relative">
|
||||
<div class="relative overflow-visible">
|
||||
<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()"
|
||||
>
|
||||
<img
|
||||
@ -116,18 +132,30 @@ const handleButtonClick = async (
|
||||
class="sm:w-fit w-4"
|
||||
:src="getTokenImage(selectedToken)"
|
||||
/>
|
||||
<span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
|
||||
selectedToken
|
||||
}}</span>
|
||||
<span
|
||||
class="text-gray-900 sm:text-lg text-md font-medium"
|
||||
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>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="selectTokenToggle"
|
||||
class="mt-2 w-[100px] text-gray-900 lg-view absolute"
|
||||
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||
>
|
||||
<div class="bg-white rounded-md z-10">
|
||||
<div
|
||||
v-for="token in TokenEnum"
|
||||
class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
|
||||
:key="token"
|
||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||
@click="handleSelectedToken(token)"
|
||||
>
|
||||
<img
|
||||
@ -142,11 +170,9 @@ const handleButtonClick = async (
|
||||
{{ token }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -170,6 +196,10 @@ const handleButtonClick = async (
|
||||
type="text"
|
||||
v-model="pixKey"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
@ -180,9 +210,15 @@ const handleButtonClick = async (
|
||||
</div>
|
||||
</div>
|
||||
<CustomButton
|
||||
:text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'"
|
||||
v-if="walletAddress"
|
||||
:text="'Aprovar tokens'"
|
||||
:isDisabled="!validDecimals || !validPixFormat"
|
||||
@buttonClicked="handleButtonClick(offer, pixKey)"
|
||||
@buttonClicked="handleSellClick(offer, pixKey)"
|
||||
/>
|
||||
<CustomButton
|
||||
v-if="!walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
@buttonClicked="connectAccount()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -211,12 +247,9 @@ const handleButtonClick = async (
|
||||
@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"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
|
||||
@ -1,31 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
|
||||
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
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const { walletAddress, sellerView } = storeToRefs(etherStore);
|
||||
|
||||
const menuOpenToggle = ref<boolean>(false);
|
||||
const menuHoverToggle = ref<boolean>(false);
|
||||
|
||||
const infoMenuOpenToggle = ref<boolean>(false);
|
||||
const currencyMenuOpenToggle = ref<boolean>(false);
|
||||
const currencyMenuHoverToggle = ref<boolean>(false);
|
||||
const infoMenuRef = ref<any>(null);
|
||||
const walletAddressRef = ref<any>(null);
|
||||
const currencyRef = ref<any>(null);
|
||||
|
||||
//Methods
|
||||
const connectMetaMask = async (): Promise<void> => {
|
||||
await connectProvider();
|
||||
const { connectedWallet, connectedChain, setChain, disconnectWallet } =
|
||||
useOnboard();
|
||||
|
||||
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 walletAddressLength = walletAddress.value.length;
|
||||
const initialText = walletAddress.value.substring(0, 5);
|
||||
@ -36,10 +55,10 @@ const formatWalletAddress = (): string => {
|
||||
return `${initialText}...${finalText}`;
|
||||
};
|
||||
|
||||
const disconnectUser = (): void => {
|
||||
const disconnectUser = async (): Promise<void> => {
|
||||
etherStore.setWalletAddress("");
|
||||
await disconnectWallet({ label: connectedWallet.value?.label || "" });
|
||||
closeMenu();
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const closeMenu = (): void => {
|
||||
@ -48,18 +67,23 @@ const closeMenu = (): void => {
|
||||
|
||||
const networkChange = async (network: NetworkEnum): Promise<void> => {
|
||||
currencyMenuOpenToggle.value = false;
|
||||
const change = await requestNetworkChange(network);
|
||||
if (change) etherStore.setNetworkName(network);
|
||||
try {
|
||||
await setChain({
|
||||
chainId: Networks[network].chainId,
|
||||
wallet: connectedWallet.value?.label || "",
|
||||
});
|
||||
etherStore.setNetworkId(network);
|
||||
} catch (error) {
|
||||
console.log("Error changing network", error);
|
||||
}
|
||||
};
|
||||
|
||||
onClickOutside(walletAddressRef, () => {
|
||||
menuHoverToggle.value = false;
|
||||
menuOpenToggle.value = false;
|
||||
});
|
||||
|
||||
onClickOutside(currencyRef, () => {
|
||||
currencyMenuOpenToggle.value = false;
|
||||
currencyMenuHoverToggle.value = false;
|
||||
});
|
||||
|
||||
onClickOutside(infoMenuRef, () => {
|
||||
@ -72,30 +96,55 @@ onClickOutside(infoMenuRef, () => {
|
||||
<RouterLink :to="'/'" class="default-button">
|
||||
<img
|
||||
alt="P2Pix logo"
|
||||
class="logo lg-view"
|
||||
src="@/assets/logo.svg"
|
||||
width="75"
|
||||
class="logo hidden md:inline-block"
|
||||
width="200"
|
||||
height="75"
|
||||
src="@/assets/logo.svg?url"
|
||||
/>
|
||||
<img
|
||||
alt="P2Pix logo"
|
||||
class="logo sm-view w-10/12"
|
||||
src="@/assets/logo2.svg"
|
||||
class="logo inline-block md:hidden w-10/12"
|
||||
width="40"
|
||||
height="40"
|
||||
src="@/assets/logo2.svg?url"
|
||||
/>
|
||||
</RouterLink>
|
||||
|
||||
<div class="flex sm:gap-4 gap-2 items-center">
|
||||
<div class="flex flex-col">
|
||||
<button
|
||||
ref="infoMenuRef"
|
||||
class="default-button hidden md:inline-block cursor-pointer"
|
||||
@click="
|
||||
[
|
||||
(infoMenuOpenToggle = !infoMenuOpenToggle),
|
||||
(menuOpenToggle = false),
|
||||
(currencyMenuOpenToggle = false),
|
||||
]
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="topbar-text topbar-link"
|
||||
:style="{
|
||||
'border-bottom': infoMenuOpenToggle
|
||||
? '2px solid white'
|
||||
: '2px solid transparent',
|
||||
}"
|
||||
>
|
||||
Menu
|
||||
</h1>
|
||||
</button>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-show="infoMenuOpenToggle"
|
||||
class="mt-10 absolute w-full text-gray-900 lg-view"
|
||||
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-32 w-52">
|
||||
<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">
|
||||
<span
|
||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||
>
|
||||
Documentação
|
||||
</span>
|
||||
</div>
|
||||
@ -116,98 +165,76 @@ onClickOutside(infoMenuRef, () => {
|
||||
<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"
|
||||
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md"
|
||||
>
|
||||
<div class="redirect_button flex mr-4">
|
||||
<div class="mr-6">
|
||||
<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"
|
||||
src="@/assets/twitterIcon.svg?url"
|
||||
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"
|
||||
src="@/assets/linkedinIcon.svg?url"
|
||||
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"
|
||||
src="@/assets/githubIcon.svg?url"
|
||||
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"
|
||||
class="default-button lg-view cursor-pointer"
|
||||
@click="
|
||||
[
|
||||
(infoMenuOpenToggle = !infoMenuOpenToggle),
|
||||
(menuOpenToggle = false),
|
||||
(currencyMenuOpenToggle = false),
|
||||
]
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="text-gray-50 font-semibold sm:text-base"
|
||||
:style="{
|
||||
'border-bottom': infoMenuOpenToggle
|
||||
? '2px solid white'
|
||||
: 'transparent',
|
||||
}"
|
||||
>
|
||||
Menu
|
||||
</h1>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="'/faq'"
|
||||
v-if="!walletAddress"
|
||||
class="default-button sm-view"
|
||||
class="default-button inline-block md:hidden"
|
||||
>
|
||||
FAQ
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
: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"
|
||||
>
|
||||
<div class="topbar-text topbar-link text-center mx-auto inline-block">
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="sellerView ? '/' : '/seller'"
|
||||
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"
|
||||
>
|
||||
<div class="topbar-text topbar-link text-center mx-auto inline-block">
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<div class="flex flex-col" v-if="walletAddress">
|
||||
<div class="flex flex-col relative" v-if="walletAddress">
|
||||
<div
|
||||
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="
|
||||
[
|
||||
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
|
||||
@ -215,70 +242,53 @@ onClickOutside(infoMenuRef, () => {
|
||||
(infoMenuOpenToggle = false),
|
||||
]
|
||||
"
|
||||
@mouseover="currencyMenuHoverToggle = true"
|
||||
@mouseout="currencyMenuHoverToggle = false"
|
||||
:style="{
|
||||
backgroundColor: currencyMenuOpenToggle
|
||||
? '#F9F9F9'
|
||||
: currencyMenuHoverToggle
|
||||
? '#F9F9F9'
|
||||
: 'transparent',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
alt="Choosed network image"
|
||||
:src="getNetworkImage(etherStore.networkName)"
|
||||
:src="getNetworkImage(NetworkEnum[etherStore.networkName])"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span
|
||||
class="default-text group-hover:text-gray-900 lg-view"
|
||||
:style="{
|
||||
color: currencyMenuOpenToggle
|
||||
? '#000000'
|
||||
: currencyMenuHoverToggle
|
||||
? '#000000'
|
||||
: 'rgb(249 250 251)',
|
||||
}"
|
||||
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"
|
||||
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||
>
|
||||
{{ etherStore.networkName }}
|
||||
{{ Networks[etherStore.networkName].chainName }}
|
||||
</span>
|
||||
<img
|
||||
class="text-gray-900"
|
||||
v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
|
||||
alt="Chevron Down"
|
||||
src="@/assets/chevronDown.svg"
|
||||
/>
|
||||
<img
|
||||
v-if="currencyMenuOpenToggle"
|
||||
alt="Chevron Up"
|
||||
src="@/assets/chevronUp.svg"
|
||||
/>
|
||||
<img
|
||||
v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
|
||||
alt="Chevron Down Black"
|
||||
src="@/assets/chevronDownBlack.svg"
|
||||
<div
|
||||
class="transition-all duration-500 ease-in-out mt-1"
|
||||
:class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
|
||||
>
|
||||
<ChevronDown
|
||||
viewBox="0 0 16 16"
|
||||
class="h-4 w-4 text-white group-hover:text-gray-900"
|
||||
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-show="currencyMenuOpenToggle"
|
||||
class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
|
||||
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
|
||||
v-for="network in NetworkEnum"
|
||||
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
||||
class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||
>
|
||||
<div
|
||||
v-for="(chainData, network) in Networks"
|
||||
:key="network"
|
||||
class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
|
||||
@click="networkChange(network)"
|
||||
>
|
||||
<img
|
||||
:alt="network + ' image'"
|
||||
:alt="chainData.chainName + ' image'"
|
||||
width="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">
|
||||
{{ network }}
|
||||
<span class="text-gray-900 font-semibold text-sm">
|
||||
{{ chainData.chainName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
@ -286,29 +296,30 @@ onClickOutside(infoMenuRef, () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
v-if="!walletAddress"
|
||||
class="border-amber-500 border-2 rounded default-button lg-view"
|
||||
@click="connectMetaMask()"
|
||||
class="border-amber-500 border-2 rounded default-button hidden md:inline-block"
|
||||
@click="connnectWallet()"
|
||||
>
|
||||
Conectar carteira
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
v-if="!walletAddress"
|
||||
class="border-amber-500 border-2 rounded default-button sm-view"
|
||||
@click="connectMetaMask()"
|
||||
class="border-amber-500 border-2 rounded default-button inline-block md:hidden"
|
||||
@click="connnectWallet()"
|
||||
>
|
||||
Conectar
|
||||
</button>
|
||||
<div v-if="walletAddress" class="account-info">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col relative">
|
||||
<div
|
||||
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="
|
||||
[
|
||||
(menuOpenToggle = !menuOpenToggle),
|
||||
@ -316,74 +327,61 @@ onClickOutside(infoMenuRef, () => {
|
||||
(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
|
||||
class="default-text"
|
||||
:style="{
|
||||
color: menuOpenToggle
|
||||
? '#000000'
|
||||
: menuHoverToggle
|
||||
? '#000000'
|
||||
: 'rgb(249 250 251)',
|
||||
}"
|
||||
class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out truncate text-ellipsis"
|
||||
:class="{ '!text-gray-900': menuOpenToggle }"
|
||||
>
|
||||
{{ formatWalletAddress() }}
|
||||
</span>
|
||||
<img
|
||||
class="text-gray-900"
|
||||
v-if="!menuHoverToggle && !menuOpenToggle"
|
||||
alt="Chevron Down"
|
||||
src="@/assets/chevronDown.svg"
|
||||
/>
|
||||
<img
|
||||
v-if="menuOpenToggle"
|
||||
alt="Chevron Up"
|
||||
src="@/assets/chevronUp.svg"
|
||||
/>
|
||||
<img
|
||||
v-if="menuHoverToggle && !menuOpenToggle"
|
||||
alt="Chevron Down Black"
|
||||
src="@/assets/chevronDownBlack.svg"
|
||||
<div
|
||||
class="transition-all duration-500 ease-in-out mt-1"
|
||||
:class="{ 'scale-y-[-1]': menuOpenToggle }"
|
||||
>
|
||||
<ChevronDown
|
||||
viewBox="0 0 16 16"
|
||||
class="h-4 w-4 text-white group-hover:text-gray-900"
|
||||
:class="{ '!text-gray-900': menuOpenToggle }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-show="menuOpenToggle"
|
||||
class="mt-10 absolute w-full text-gray-900 lg-view"
|
||||
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="menu-button" @click="closeMenu()">
|
||||
<RouterLink to="/manage_bids" class="redirect_button">
|
||||
<div
|
||||
class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||
>
|
||||
<RouterLink
|
||||
to="/manage_bids"
|
||||
class="redirect_button menu-button"
|
||||
@click="closeMenu()"
|
||||
>
|
||||
Gerenciar Ofertas
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<div class="menu-button" @click="disconnectUser">
|
||||
<RouterLink to="/" class="redirect_button">
|
||||
<RouterLink
|
||||
to="/"
|
||||
class="redirect_button menu-button"
|
||||
@click="disconnectUser"
|
||||
>
|
||||
Desconectar
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
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="bg-white rounded-md z-10 h-full">
|
||||
@ -414,59 +412,52 @@ onClickOutside(infoMenuRef, () => {
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<div class="menu-button pb-10">
|
||||
<div class="redirect_button flex">
|
||||
<a href="https://www.twitter.com/doiim/">
|
||||
<img
|
||||
alt="Twitter"
|
||||
width="20"
|
||||
height="20"
|
||||
src="@/assets/twitterIcon.svg"
|
||||
class="mr-6"
|
||||
onclick="location.href = 'https://www.twitter.com/doiim';"
|
||||
/>
|
||||
<div class="redirect_button mx-10">
|
||||
<a
|
||||
href="https://www.twitter.com/doiim/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<TwitterIcon alt="Twitter" width="20" height="20" />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/doiim/">
|
||||
<img
|
||||
alt="LinkedIn"
|
||||
width="20"
|
||||
height="20"
|
||||
src="@/assets/linkedinIcon.svg"
|
||||
class="mr-6"
|
||||
/>
|
||||
<a
|
||||
href="https://www.linkedin.com/company/doiim/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<LinkedinIcon alt="LinkedIn" width="20" height="20" />
|
||||
</a>
|
||||
<a href="https://github.com/doiim/">
|
||||
<img
|
||||
alt="Github"
|
||||
width="20"
|
||||
height="20"
|
||||
src="@/assets/githubIcon.svg"
|
||||
/>
|
||||
<a
|
||||
href="https://github.com/doiim/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<GithubIcon alt="Github" width="20" height="20" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
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="bg-white rounded-md z-10 h-full">
|
||||
<div
|
||||
v-for="network in NetworkEnum"
|
||||
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
|
||||
v-for="(chainData, network) in Networks"
|
||||
:key="network"
|
||||
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
|
||||
@click="networkChange(network)"
|
||||
>
|
||||
<img
|
||||
:alt="network + 'image'"
|
||||
:alt="chainData.chainName + 'image'"
|
||||
width="20"
|
||||
height="20"
|
||||
:src="getNetworkImage(network)"
|
||||
:src="getNetworkImage(NetworkEnum[network])"
|
||||
/>
|
||||
<span class="text-gray-900 py-4 text-end font-bold text-sm">
|
||||
{{ network }}
|
||||
{{ chainData.chainName }}
|
||||
</span>
|
||||
</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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@apply flex items-center gap-6;
|
||||
}
|
||||
@ -493,42 +491,24 @@ header {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@apply bg-gray-200 rounded;
|
||||
}
|
||||
|
||||
.lg-view {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sm-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
margin-top: 1400px;
|
||||
bottom: 0px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.lg-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm-view {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,6 +4,7 @@ import router from "./router";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
import "./assets/main.css";
|
||||
import "./assets/transitions.css";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
export enum NetworkEnum {
|
||||
ethereum = "Ethereum",
|
||||
polygon = "Polygon",
|
||||
rootstock = "Rootstock",
|
||||
sepolia = 11155111,
|
||||
rootstock = 31,
|
||||
}
|
||||
|
||||
export enum TokenEnum {
|
||||
BRZ = 'BRZ',
|
||||
BRX = 'BRX'
|
||||
BRZ = "BRZ",
|
||||
// BRX = 'BRX'
|
||||
}
|
||||
22
src/model/Networks.ts
Normal file
22
src/model/Networks.ts
Normal 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/"],
|
||||
},
|
||||
};
|
||||
@ -1,8 +1,11 @@
|
||||
import { NetworkEnum } from "./NetworkEnum";
|
||||
|
||||
export type ValidDeposit = {
|
||||
token: string;
|
||||
blockNumber: number;
|
||||
remaining: number;
|
||||
seller: string;
|
||||
pixKey: number;
|
||||
pixKey: string;
|
||||
network: NetworkEnum;
|
||||
open?: boolean;
|
||||
};
|
||||
|
||||
@ -6,34 +6,34 @@ export const MockValidDeposits: ValidDeposit[] = [
|
||||
token: "1",
|
||||
remaining: 70,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: 123456789,
|
||||
pixKey: "123456789",
|
||||
},
|
||||
{
|
||||
blockNumber: 2,
|
||||
token: "2",
|
||||
remaining: 200,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: 123456789,
|
||||
pixKey: "123456789",
|
||||
},
|
||||
{
|
||||
blockNumber: 3,
|
||||
token: "3",
|
||||
remaining: 1250,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: 123456789,
|
||||
pixKey: "123456789",
|
||||
},
|
||||
{
|
||||
blockNumber: 4,
|
||||
token: "4",
|
||||
remaining: 4000,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: 123456789,
|
||||
pixKey: "123456789",
|
||||
},
|
||||
{
|
||||
blockNumber: 5,
|
||||
token: "5",
|
||||
remaining: 2000,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: 123456789,
|
||||
pixKey: "123456789",
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,24 +1,16 @@
|
||||
|
||||
import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
|
||||
|
||||
export const useEtherStore = defineStore("ether", {
|
||||
state: () => ({
|
||||
walletAddress: "",
|
||||
balance: "",
|
||||
networkName: NetworkEnum.ethereum,
|
||||
networkName: NetworkEnum.sepolia,
|
||||
selectedToken: TokenEnum.BRZ,
|
||||
loadingLock: false,
|
||||
sellerView: false,
|
||||
// Depósitos válidos para compra SEPOLIA
|
||||
depositsValidListSepolia: [] as ValidDeposit[],
|
||||
// Depósitos válidos para compra MUMBAI
|
||||
depositsValidListMumbai: [] as ValidDeposit[],
|
||||
// Depósitos válidos para compra ROOTSTOCK
|
||||
depositsValidListRootstock: [] as ValidDeposit[],
|
||||
depositsValidList: [] as ValidDeposit[],
|
||||
loadingWalletTransactions: false,
|
||||
loadingNetworkLiquidity: false,
|
||||
}),
|
||||
@ -32,8 +24,8 @@ export const useEtherStore = defineStore("ether", {
|
||||
setSelectedToken(token: TokenEnum) {
|
||||
this.selectedToken = token;
|
||||
},
|
||||
setNetworkName(networkName: NetworkEnum) {
|
||||
this.networkName = networkName;
|
||||
setNetworkId(networkName: NetworkEnum) {
|
||||
this.networkName = Number(networkName);
|
||||
},
|
||||
setLoadingLock(isLoadingLock: boolean) {
|
||||
this.loadingLock = isLoadingLock;
|
||||
@ -41,14 +33,8 @@ export const useEtherStore = defineStore("ether", {
|
||||
setSellerView(sellerView: boolean) {
|
||||
this.sellerView = sellerView;
|
||||
},
|
||||
setDepositsValidListSepolia(depositsValidList: ValidDeposit[]) {
|
||||
this.depositsValidListSepolia = depositsValidList;
|
||||
},
|
||||
setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) {
|
||||
this.depositsValidListMumbai = depositsValidList;
|
||||
},
|
||||
setDepositsValidListRootstock(depositsValidList: ValidDeposit[]) {
|
||||
this.depositsValidListRootstock = depositsValidList;
|
||||
setDepositsValidList(depositsValidList: ValidDeposit[]) {
|
||||
this.depositsValidList = depositsValidList;
|
||||
},
|
||||
setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
|
||||
this.loadingWalletTransactions = isLoadingWalletTransactions;
|
||||
@ -57,11 +43,10 @@ export const useEtherStore = defineStore("ether", {
|
||||
this.loadingNetworkLiquidity = isLoadingNetworkLiquidity;
|
||||
},
|
||||
},
|
||||
// Alterar para integrar com mumbai
|
||||
getters: {
|
||||
getValidDepositByWalletAddress: (state) => {
|
||||
return (walletAddress: string) =>
|
||||
state.depositsValidListSepolia
|
||||
state.depositsValidList
|
||||
.filter((deposit) => deposit.seller == walletAddress)
|
||||
.sort((a, b) => {
|
||||
return b.blockNumber - a.blockNumber;
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
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) =>
|
||||
key.endsWith(`${networkName.toLowerCase()}.svg`)
|
||||
);
|
||||
|
||||
@ -4,8 +4,9 @@ const verifyNetworkLiquidity = (
|
||||
tokenValue: number,
|
||||
walletAddress: string,
|
||||
validDepositList: ValidDeposit[]
|
||||
): ValidDeposit | undefined => {
|
||||
const element = validDepositList.find((element) => {
|
||||
): ValidDeposit[] => {
|
||||
const filteredDepositList = validDepositList
|
||||
.filter((element) => {
|
||||
const remaining = element.remaining;
|
||||
if (
|
||||
tokenValue!! <= remaining &&
|
||||
@ -15,9 +16,24 @@ const verifyNetworkLiquidity = (
|
||||
return true;
|
||||
}
|
||||
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 };
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -34,7 +34,7 @@ const openItem = (index: number) => {
|
||||
<span class="text font-extrabold text-5xl max-w-[50rem]"
|
||||
>Perguntas Frequentes
|
||||
</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
|
||||
Discord para falar diretamente conosco.</span
|
||||
>
|
||||
@ -61,13 +61,13 @@ const openItem = (index: number) => {
|
||||
<div class="flex cursor-pointer" @click="openItem(index)">
|
||||
<img
|
||||
alt="plus"
|
||||
src="@/assets/plus.svg"
|
||||
src="@/assets/plus.svg?url"
|
||||
class="mr-3"
|
||||
v-if="!item.isOpen"
|
||||
/>
|
||||
<img
|
||||
alt="plus"
|
||||
src="@/assets/minus.svg"
|
||||
src="@/assets/minus.svg?url"
|
||||
class="mr-3"
|
||||
v-if="item.isOpen"
|
||||
/>
|
||||
@ -134,11 +134,4 @@ h4 {
|
||||
.text {
|
||||
@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>
|
||||
|
||||
@ -25,7 +25,7 @@ etherStore.setSellerView(false);
|
||||
// States
|
||||
const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
|
||||
const flowStep = ref<Step>(Step.Search);
|
||||
const pixTarget = ref<number>();
|
||||
const pixTarget = ref<string>();
|
||||
const tokenAmount = ref<number>();
|
||||
const lockID = ref<string>("");
|
||||
const loadingRelease = ref<boolean>(false);
|
||||
@ -79,11 +79,12 @@ const releaseTransaction = async (e2eId: string) => {
|
||||
};
|
||||
|
||||
const checkForUnreleasedLocks = async (): Promise<void> => {
|
||||
console.log("Checking for unreleased locks");
|
||||
const walletLocks = await checkUnreleasedLock(walletAddress.value);
|
||||
if (walletLocks) {
|
||||
lockID.value = walletLocks.lockID;
|
||||
tokenAmount.value = walletLocks.pix.value;
|
||||
pixTarget.value = Number(walletLocks.pix.pixKey);
|
||||
pixTarget.value = walletLocks.pix.pixKey;
|
||||
showModal.value = true;
|
||||
} else {
|
||||
flowStep.value = Step.Search;
|
||||
@ -96,7 +97,7 @@ if (paramLockID) {
|
||||
if (lockToRedirect) {
|
||||
lockID.value = lockToRedirect.lockID;
|
||||
tokenAmount.value = lockToRedirect.pix.value;
|
||||
pixTarget.value = Number(lockToRedirect.pix.pixKey);
|
||||
pixTarget.value = lockToRedirect.pix.pixKey;
|
||||
flowStep.value = Step.Buy;
|
||||
} else {
|
||||
flowStep.value = Step.Search;
|
||||
@ -119,6 +120,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<SearchComponent
|
||||
v-if="flowStep == Step.Search"
|
||||
@token-buy="confirmBuyClick"
|
||||
@ -161,4 +163,5 @@ onMounted(async () => {
|
||||
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -49,15 +49,19 @@ const callWithdraw = async (amount: string) => {
|
||||
const getWalletTransactions = async () => {
|
||||
etherStore.setLoadingWalletTransactions(true);
|
||||
if (walletAddress.value) {
|
||||
console.log("Will fetch all required data...");
|
||||
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
|
||||
walletAddress.value
|
||||
);
|
||||
console.log("Fetched deposits");
|
||||
|
||||
const allUserTransactions = await listAllTransactionByWalletAddress(
|
||||
walletAddress.value
|
||||
);
|
||||
console.log("Fetched all transactions");
|
||||
|
||||
activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
|
||||
console.log("Fetched active lock amount");
|
||||
|
||||
if (walletDeposits) {
|
||||
depositList.value = walletDeposits;
|
||||
@ -86,6 +90,7 @@ watch(networkName, async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CustomAlert
|
||||
v-if="showAlert"
|
||||
:type="'withdraw'"
|
||||
@ -98,7 +103,7 @@ watch(networkName, async () => {
|
||||
<div class="header" v-if="!loadingWithdraw && walletAddress">
|
||||
Gerenciar Ofertas
|
||||
</div>
|
||||
<div class="w-full max-w-4xl">
|
||||
<div class="w-full max-w-4xl flex justify-center">
|
||||
<ListingComponent
|
||||
v-if="!loadingWithdraw && walletAddress"
|
||||
:valid-deposits="depositList"
|
||||
@ -112,6 +117,7 @@ watch(networkName, async () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -61,6 +61,7 @@ const sendNetwork = async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="flowStep == Step.Sell">
|
||||
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
|
||||
<LoadingComponent
|
||||
@ -86,4 +87,5 @@ const sendNetwork = async () => {
|
||||
:message="'A transação está sendo enviada para a rede.'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
{
|
||||
"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": {
|
||||
"composite": true,
|
||||
"types": ["node"]
|
||||
"types": [
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,23 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
"types": ["jest", "node"],
|
||||
"types": [
|
||||
"jest",
|
||||
"node"
|
||||
],
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.config.json"
|
||||
|
||||
@ -3,9 +3,21 @@ import { fileURLToPath, URL } from "node:url";
|
||||
import { defineConfig } from "vitest/config";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||
import svgLoader from "vite-svg-loader";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: "esnext",
|
||||
define: {
|
||||
global: "globalThis",
|
||||
},
|
||||
supported: {
|
||||
bigint: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: "jsdom",
|
||||
@ -17,7 +29,7 @@ export default defineConfig({
|
||||
reporter: ["text", "lcov", "html"],
|
||||
},
|
||||
},
|
||||
plugins: [vue(), vueJsx()],
|
||||
plugins: [vue(), vueJsx(), svgLoader()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user