Fixed errors on deployment.

Fix token dropdowns

package.json

@@ -9,7 +9,7 @@
     "serve": "vue-cli-service serve",
     "coverage": "vitest run --coverage",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
+    "type-check": "vue-tsc --skipLibCheck --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
@@ -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",

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>
-  <TopBar />
-  <RouterView v-slot="{ Component }">
-    <template v-if="Component">
-      <Suspense>
-        <component :is="Component"></component>
-        <template #fallback>
-          <div class="flex w-full h-full justify-center items-center">
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+  <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>
+              <template #default>
+                <component :is="Component" />
+              </template>
+              <template #fallback>
+                <div class="flex w-full h-full justify-center items-center">
+                  <SpinnerComponent :width="'16'" :height="'16'" />
+                </div>
+              </template>
+            </Suspense>
           </div>
-        </template>
-      </Suspense>
-    </template>
-  </RouterView>
+        </Transition>
+      </template>
+    </RouterView>
+  </div>
 </template>

src/assets/chevron.svg

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

src/assets/chevronDown.svg

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

src/assets/chevronDownBlack.svg

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

src/assets/chevronUp.svg

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

src/assets/githubIcon.svg

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

src/assets/linkedinIcon.svg

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

src/assets/main.css

@@ -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;
+}

src/assets/sepolia.svg

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

src/assets/transitions.css

@@ -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);
+}

src/assets/twitterIcon.svg

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

src/blockchain/__tests__/addresses.spec.ts

@@ -26,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"
     );
@@ -34,7 +34,7 @@ describe("addresses.ts functions", () => {
 
   it("getTokenAddress Polygon", () => {
     const etherStore = useEtherStore();
-    etherStore.setNetworkName(NetworkEnum.polygon);
+    etherStore.setNetworkId(NetworkEnum.polygon);
     expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29"
     );
@@ -42,7 +42,7 @@ describe("addresses.ts functions", () => {
 
   it("getTokenAddress Rootstock", () => {
     const etherStore = useEtherStore();
-    etherStore.setNetworkName(NetworkEnum.rootstock);
+    etherStore.setNetworkId(NetworkEnum.rootstock);
     expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0xfE841c74250e57640390f46d914C88d22C51e82e"
     );
@@ -57,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"
     );
@@ -65,7 +65,7 @@ describe("addresses.ts functions", () => {
 
   it("getP2PixAddress Polygon", () => {
     const etherStore = useEtherStore();
-    etherStore.setNetworkName(NetworkEnum.polygon);
+    etherStore.setNetworkId(NetworkEnum.polygon);
     expect(getP2PixAddress()).toBe(
       "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
@@ -73,7 +73,7 @@ describe("addresses.ts functions", () => {
 
   it("getP2PixAddress Rootstock", () => {
     const etherStore = useEtherStore();
-    etherStore.setNetworkName(NetworkEnum.rootstock);
+    etherStore.setNetworkId(NetworkEnum.rootstock);
     expect(getP2PixAddress()).toBe(
       "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
     );
@@ -87,19 +87,19 @@ 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.setNetworkName(NetworkEnum.rootstock);
+    etherStore.setNetworkId(NetworkEnum.rootstock);
     expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
   });
 
@@ -109,7 +109,7 @@ describe("addresses.ts functions", () => {
 
   it("isPossibleNetwork Returns", () => {
     const etherStore = useEtherStore();
-    etherStore.setNetworkName(NetworkEnum.ethereum);
+    etherStore.setNetworkId(NetworkEnum.sepolia);
     expect(isPossibleNetwork(0x5)).toBe(true);
     expect(isPossibleNetwork(5)).toBe(true);
     expect(isPossibleNetwork(0x13881)).toBe(true);

src/blockchain/addresses.ts

@@ -1,23 +1,22 @@
 import { useEtherStore } from "@/store/ether";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
+import { JsonRpcProvider } from "ethers";
 
-const Tokens: { [key in NetworkEnum]: {[key in TokenEnum] :string} } = {
-  [NetworkEnum.ethereum]: {
+const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
+  [NetworkEnum.sepolia]: {
     BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
-    BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
-  },
-  [NetworkEnum.polygon]: {
-    BRZ: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
-    BRX: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
+    // BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
   },
   [NetworkEnum.rootstock]: {
     BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
-    BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
-  }
+    // BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+  },
 };
 
 export const getTokenByAddress = (address: string) => {
-  for ( const [, network] of Object.entries(NetworkEnum) ) {
+  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;
@@ -36,27 +35,30 @@ const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
 const getP2PixAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
   const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
-    [NetworkEnum.ethereum]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
-    [NetworkEnum.polygon]: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
+    [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 in NetworkEnum]: string } = {
-    [NetworkEnum.ethereum]: import.meta.env.VITE_SEPOLIA_API_URL,
-    [NetworkEnum.polygon]: import.meta.env.VITE_MUMBAI_API_URL,
+    [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 getProviderByNetwork = (network: NetworkEnum): JsonRpcProvider => {
+  console.log("network", network);
+  return new JsonRpcProvider(getProviderUrl(network), network);
 };
 
 const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
-  return (Number(networkChain) in NetworkEnum);
+  return Number(networkChain) in NetworkEnum;
 };
 
 export {
@@ -64,4 +66,5 @@ export {
   getProviderUrl,
   isPossibleNetwork,
   getP2PixAddress,
+  getProviderByNetwork,
 };

src/blockchain/buyerMethods.ts

@@ -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,9 +19,7 @@ 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,
@@ -38,31 +41,27 @@ const releaseLock = async (
   e2eId: string,
   lockId: string
 ): Promise<any> => {
-  const mockBacenSigner = new ethers.Wallet(
+  const mockBacenSigner = new Wallet(
     "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
   );
 
-  const messageToSign = ethers.utils.solidityKeccak256(
+  const messageToSign = solidityPackedKeccak256(
     ["bytes32", "uint256", "bytes32"],
-    [
-      pixKey,
-      parseEther(String(amount)),
-      ethers.utils.formatBytes32String(e2eId),
-    ]
+    [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.utils.formatBytes32String(e2eId),
+    BigInt(lockId),
+    encodeBytes32String(e2eId),
     flatSig
   );
   await release.wait();
@@ -70,8 +69,8 @@ const releaseLock = async (
   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();
@@ -79,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),

src/blockchain/events.ts

@@ -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[][] = [];
 
-  etherStore.setDepositsValidListSepolia(depositListSepolia);
-  // etherStore.setDepositsValidListMumbai(depositListMumbai);
-  etherStore.setDepositsValidListRootstock(depositListRootstock);
+  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)
+    );
+
+    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) => {
-      // Get liquidity only for the selected token
-      if (deposit.args?.token != token) return null;
+  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 (decoded?.args.token != token) continue;
+    const mappedBalance = await p2pContract.getBalance(
+      decoded.args.seller,
+      token
+    );
+    let validDeposit: ValidDeposit | null = null;
 
-      const mappedBalance = await p2pContract.getBalance(
-        deposit.args?.seller,
-        token
-      );
-
-      const mappedPixTarget = await p2pContract.getPixTarget(
-        deposit.args?.seller,
-        token
-      );
-
-      let validDeposit: ValidDeposit | null = null;
-
-      if (mappedBalance._hex) {
-        validDeposit = {
-          token: token,
-          blockNumber: deposit.blockNumber,
-          remaining: Number(formatEther(mappedBalance._hex)),
-          seller: deposit.args?.seller,
-          pixKey: mappedPixTarget,
-        };
-      }
-
-      if (validDeposit)
-        depositList[deposit.args?.seller + token] = validDeposit;
-    })
-  );
+    if (mappedBalance) {
+      validDeposit = {
+        token: token,
+        blockNumber: deposit.blockNumber,
+        remaining: Number(formatEther(mappedBalance)),
+        seller: decoded.args.seller,
+        network,
+        pixKey: "",
+      };
+    }
+    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: "",
   };
@@ -136,4 +129,9 @@ const getUnreleasedLockById = async (
   };
 };
 
-export { getValidDeposits, getNetworksLiquidity, getUnreleasedLockById };
+export {
+  getValidDeposits,
+  getNetworksLiquidity,
+  getUnreleasedLockById,
+  getPixKey,
+};

src/blockchain/provider.ts

@@ -1,101 +1,27 @@
-import { useEtherStore } from "@/store/ether";
-
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
-
 import { updateWalletStatus } from "./wallet";
-import {
-  getProviderUrl,
-  isPossibleNetwork,
-  getP2PixAddress,
-} from "./addresses";
+import { getProviderUrl, getP2PixAddress } from "./addresses";
+import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
 
-import type { NetworkEnum } from "@/model/NetworkEnum";
-import { Networks } from "@/model/Networks";
+let provider: BrowserProvider | JsonRpcProvider | null = null;
 
-import { ethers } from "ethers";
-
-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: NetworkEnum) => {
-    console.log("Changed network!");
-
-    if (isPossibleNetwork(networkChain)) {
-      etherStore.setNetworkName(networkChain);
-      updateWalletStatus();
-    } else {
-      window.alert("Invalid chain!");
-    }
-  });
-};
-
-const requestNetworkChange = async (network: NetworkEnum): Promise<boolean> => {
-  const etherStore = useEtherStore();
-  if (!etherStore.walletAddress) return true;
-  const window_ = window as any;
-
+const getContract = async (onlyAlchemyProvider: boolean = false) => {
+  const p = getProvider(onlyAlchemyProvider);
   try {
-    await window_.ethereum.request({
-      method: "wallet_switchEthereumChain",
-      params: [{ chainId: Networks[network].chainId }], // chainId must be in hexadecimal numbers
-    });
-  } catch (e:any){
-    if (e.code == 4902){ // Unrecognized chain ID
-        await window_.ethereum.request({
-         "method": "wallet_addEthereumChain",
-         "params": [ Networks[network] ],
-        });
-    }
+    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 };

src/blockchain/sellerMethods.ts

@@ -1,39 +1,46 @@
 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
   );
 
-  const apprv = await tokenContract.approve(
-    getP2PixAddress(),
-    parseEther(tokenQty)
+  // Check if the token is already approved
+  const approved = await tokenContract.allowance(
+    await signer?.getAddress(),
+    getP2PixAddress()
   );
-
-  await apprv.wait();
-  return apprv;
+  if (approved < parseEther(tokenQty)) {
+    // Approve tokens
+    const apprv = await tokenContract.approve(
+      getP2PixAddress(),
+      parseEther(tokenQty)
+    );
+    await apprv.wait();
+    return true;
+  }
+  return true;
 };
 
 const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
-  const p2pContract = getContract();
+  const p2pContract = await getContract();
   const etherStore = useEtherStore();
 
   const deposit = await p2pContract.deposit(
     pixKey,
-    ethers.utils.formatBytes32String(""),
+    encodeBytes32String(""),
     getTokenAddress(etherStore.selectedToken),
     parseEther(tokenQty),
     true

src/blockchain/wallet.ts

@@ -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, 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)) {
+  const { chainId } = await provider?.getNetwork();
+  if (!isPossibleNetwork(Number(chainId))) {
     window.alert("Invalid chain!:" + chainId);
     return;
   }
-  etherStore.setNetworkName(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 tx: WalletTransaction = {
-        token: transaction.args?.token ? transaction.args?.token : "",
-        blockNumber: transaction.blockNumber ? transaction.blockNumber : -1,
-        amount: transaction.args?.amount
-          ? Number(formatEther(transaction.args?.amount))
+  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: decoded.args.token ? decoded.args.token : "",
+      blockNumber: transaction.blockNumber,
+      amount: decoded.args.amount
+        ? Number(formatEther(decoded.args.amount))
+        : -1,
+      seller: decoded.args.seller ? decoded.args.seller : "",
+      buyer: decoded.args.buyer ? decoded.args.buyer : "",
+      event: decoded.name,
+      lockStatus:
+        decoded.name == "LockAdded"
+          ? await getLockStatus(decoded.args.lockID)
           : -1,
-        seller: transaction.args?.seller ? transaction.args?.seller : "",
-        buyer: transaction.args?.buyer ? transaction.args?.buyer : "",
-        event: transaction.event ? transaction.event : "",
-        lockStatus:
-          transaction.event == "LockAdded"
-            ? await getLockStatus(transaction.args?.lockID)
-            : -1,
-        transactionHash: transaction.transactionHash
-          ? transaction.transactionHash
-          : "",
-        transactionID: transaction.args?.lockID
-          ? String(transaction.args?.lockID)
-          : "",
-      };
-
-      return tx;
-    })
-  );
-
+      transactionHash: transaction.transactionHash
+        ? transaction.transactionHash
+        : "",
+      transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
+    };
+    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,51 +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 b.blockNumber - a.blockNumber;
-  });
+  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 b.blockNumber - a.blockNumber;
-  });
+  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.toLowerCase() == sellerAddress.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: "",
   };
@@ -208,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(
@@ -233,12 +298,3 @@ const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
 
   return activeLockAmount;
 };
-
-export {
-  updateWalletStatus,
-  listValidDepositTransactionsByWalletAddress,
-  listAllTransactionByWalletAddress,
-  listReleaseTransactionByWalletAddress,
-  checkUnreleasedLock,
-  getActiveLockAmount,
-};

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

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

src/components/CustomAlert/CustomAlert.vue

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

src/components/CustomModal/CustomModal.vue

@@ -17,50 +17,52 @@ if (props.isRedirectModal) {
 </script>
 
 <template>
-  <div
-    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
-    v-if="!isRedirectModal"
-  >
-    <div class="modal px-5 text-center">
-      <p
-        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á
-        possível transferir os tokens para sua carteira.
-      </p>
-      <button
-        @click="$emit('close-modal')"
-        class="border-2 border-solid border-amber-400 mt-2"
-      >
-        Entendi
-      </button>
-    </div>
-  </div>
-  <div
-    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
-    v-if="isRedirectModal"
-  >
-    <div class="modal px-5 text-center">
-      <p
-        class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
-      >
-        Retomar a última compra?
-      </p>
-      <div class="flex justify-around items-center px-2">
+  <div>
+    <div
+      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+      v-if="!isRedirectModal"
+    >
+      <div class="modal px-5 text-center">
+        <p
+          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 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
           @click="$emit('close-modal')"
-          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          class="border-2 border-solid border-amber-400 mt-2"
         >
-          Não
+          Entendi
         </button>
-        <button
-          @click="$emit('go-to-lock')"
-          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+      </div>
+    </div>
+    <div
+      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
+      v-if="isRedirectModal"
+    >
+      <div class="modal px-5 text-center">
+        <p
+          class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
         >
-          Sim
-        </button>
+          Retomar a última compra?
+        </p>
+        <div class="flex justify-around items-center px-2">
+          <button
+            @click="$emit('close-modal')"
+            class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          >
+            Não
+          </button>
+          <button
+            @click="$emit('go-to-lock')"
+            class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          >
+            Sim
+          </button>
+        </div>
       </div>
     </div>
   </div>

src/components/ListingComponent/ListingComponent.vue

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

src/components/LoadingComponent/LoadingComponent.vue

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

src/components/QrCodeComponent.vue

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

src/components/SearchComponent.vue

@@ -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,76 +149,87 @@ 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
-                class="text-gray-900"
-                alt="Chevron Down"
-                src="@/assets/chevronDownBlack.svg"
-              />
               <img
                 alt="Token image"
                 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>
-            <div
-              v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 lg-view absolute"
-            >
-              <div class="bg-white rounded-md z-10">
+            <transition name="dropdown">
+              <div
+                v-if="selectTokenToggle"
+                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
+              >
                 <div
-                  v-for="token in TokenEnum"
-                  class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
-                  @click="handleSelectedToken(token)"
+                  class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                 >
-                  <img
-                    :alt="token + ' logo'"
-                    width="20"
-                    height="20"
-                    :src="getTokenImage(token)"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  <div
+                    v-for="token in TokenEnum"
+                    :key="token"
+                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
+                    @click="handleSelectedToken(token)"
                   >
-                    {{ token }}
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
+                    <img
+                      :alt="token + ' logo'"
+                      width="20"
+                      height="20"
+                      :src="getTokenImage(token)"
+                    />
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ token }}
+                    </span>
+                  </div>
+                  <div class="w-full flex justify-center">
+                    <hr class="w-4/5" />
+                  </div>
                 </div>
               </div>
-            </div>
+            </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>
@@ -259,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
@@ -302,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;
 }

src/components/SellerSteps/SellerSearchComponent.vue

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

src/components/SellerSteps/SendNetwork.vue

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

src/components/SellerSteps/WantSellComponent.vue

@@ -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();
+  emit("approveTokens", { offer, postProcessedPixKey });
 };
 </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,37 +132,47 @@ 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>
-            <div
-              v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 lg-view absolute"
-            >
-              <div class="bg-white rounded-md z-10">
+            <transition name="dropdown">
+              <div
+                v-if="selectTokenToggle"
+                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
+              >
                 <div
-                  v-for="token in TokenEnum"
-                  class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
-                  @click="handleSelectedToken(token)"
+                  class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                 >
-                  <img
-                    :alt="token + ' logo'"
-                    width="20"
-                    height="20"
-                    :src="getTokenImage(token)"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  <div
+                    v-for="token in TokenEnum"
+                    :key="token"
+                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
+                    @click="handleSelectedToken(token)"
                   >
-                    {{ token }}
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
+                    <img
+                      :alt="token + ' logo'"
+                      width="20"
+                      height="20"
+                      :src="getTokenImage(token)"
+                    />
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ token }}
+                    </span>
+                  </div>
                 </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,

src/components/TopBar/TopBar.vue

@@ -1,32 +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);
@@ -37,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 => {
@@ -49,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, () => {
@@ -73,98 +96,25 @@ 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">
-        <div
-          v-show="infoMenuOpenToggle"
-          class="mt-10 absolute w-full text-gray-900 lg-view"
-        >
-          <div class="mt-2">
-            <div class="bg-white rounded-md z-10 -left-32 w-52">
-              <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  Documentação
-                </span>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <RouterLink
-                :to="'/faq'"
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-              >
-                <span
-                  class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
-                >
-                  Perguntas frequentes
-                </span>
-              </RouterLink>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <div
-                class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
-              >
-                <div class="redirect_button flex mr-4">
-                  <div class="mr-6">
-                    <a href="https://www.twitter.com/doiim">
-                      <img
-                        alt="Twitter"
-                        width="20"
-                        height="20"
-                        src="@/assets/twitterIcon.svg"
-                        class="cursor-pointer"
-                      />
-                    </a>
-                  </div>
-                  <div class="mr-6">
-                    <a href="https://www.linkedin.com/company/doiim/">
-                      <img
-                        alt="LinkedIn"
-                        width="20"
-                        height="20"
-                        src="@/assets/linkedinIcon.svg"
-                        class="cursor-pointer"
-                        href="https://www.linkedin.com/company/doiim/"
-                      />
-                    </a>
-                  </div>
-                  <div class="mr-6">
-                    <a href="https://www.github.com/doiim">
-                      <img
-                        alt="Github"
-                        width="20"
-                        height="20"
-                        src="@/assets/githubIcon.svg"
-                        class="cursor-pointer"
-                      />
-                    </a>
-                  </div>
-                </div>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
+        <button
           ref="infoMenuRef"
-          class="default-button lg-view cursor-pointer"
+          class="default-button hidden md:inline-block cursor-pointer"
           @click="
             [
               (infoMenuOpenToggle = !infoMenuOpenToggle),
@@ -174,41 +124,117 @@ onClickOutside(infoMenuRef, () => {
           "
         >
           <h1
-            class="text-gray-50 font-semibold sm:text-base"
+            class="topbar-text topbar-link"
             :style="{
               'border-bottom': infoMenuOpenToggle
                 ? '2px solid white'
-                : 'transparent',
+                : '2px solid transparent',
             }"
           >
             Menu
           </h1>
-        </div>
+        </button>
+        <transition name="dropdown">
+          <div
+            v-show="infoMenuOpenToggle"
+            class="mt-10 absolute w-full text-gray-900 hidden lg:inline-block"
+          >
+            <div class="mt-2">
+              <div class="bg-white rounded-md z-10 -left-36 w-52">
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Documentação
+                  </span>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <RouterLink
+                  :to="'/faq'"
+                  class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                >
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                  >
+                    Perguntas frequentes
+                  </span>
+                </RouterLink>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div
+                  class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md"
+                >
+                  <div class="redirect_button flex justify-around">
+                    <a href="https://www.twitter.com/doiim">
+                      <img
+                        alt="Twitter"
+                        width="20"
+                        height="20"
+                        src="@/assets/twitterIcon.svg?url"
+                        class="cursor-pointer"
+                      />
+                    </a>
+                    <a href="https://www.linkedin.com/company/doiim/">
+                      <img
+                        alt="LinkedIn"
+                        width="20"
+                        height="20"
+                        src="@/assets/linkedinIcon.svg?url"
+                        class="cursor-pointer"
+                        href="https://www.linkedin.com/company/doiim/"
+                      />
+                    </a>
+                    <a href="https://www.github.com/doiim">
+                      <img
+                        alt="Github"
+                        width="20"
+                        height="20"
+                        src="@/assets/githubIcon.svg?url"
+                        class="cursor-pointer"
+                      />
+                    </a>
+                  </div>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </transition>
       </div>
       <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"
       >
-        {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        <div class="topbar-text topbar-link text-center mx-auto inline-block">
+          {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        </div>
       </RouterLink>
       <RouterLink
         :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"
       >
-        {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        <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),
@@ -216,15 +242,6 @@ onClickOutside(infoMenuRef, () => {
               (infoMenuOpenToggle = false),
             ]
           "
-          @mouseover="currencyMenuHoverToggle = true"
-          @mouseout="currencyMenuHoverToggle = false"
-          :style="{
-            backgroundColor: currencyMenuOpenToggle
-              ? '#F9F9F9'
-              : currencyMenuHoverToggle
-              ? '#F9F9F9'
-              : 'transparent',
-          }"
         >
           <img
             alt="Choosed network image"
@@ -233,43 +250,34 @@ onClickOutside(infoMenuRef, () => {
             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 }"
           >
             {{ 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>
-        <div
-          v-show="currencyMenuOpenToggle"
-          class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
-        >
-          <div class="mt-2">
-            <div class="bg-white rounded-md z-10">
+        <transition name="dropdown">
+          <div
+            v-show="currencyMenuOpenToggle"
+            class="mt-10 absolute text-gray-900 min-w-max left-0 hidden md:inline-block"
+          >
+            <div
+              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"
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                :key="network"
+                class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
                 @click="networkChange(network)"
               >
                 <img
@@ -277,8 +285,9 @@ onClickOutside(infoMenuRef, () => {
                   width="20"
                   height="20"
                   :src="getNetworkImage(NetworkEnum[network])"
+                  class="mr-2 ml-1"
                 />
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                <span class="text-gray-900 font-semibold text-sm">
                   {{ chainData.chainName }}
                 </span>
               </div>
@@ -287,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),
@@ -317,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>
-          <div
-            v-show="menuOpenToggle"
-            class="mt-10 absolute w-full text-gray-900 lg-view"
-          >
-            <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">
+          <transition name="dropdown">
+            <div
+              v-show="menuOpenToggle"
+              class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
+            >
+              <div class="pl-4 mt-2">
+                <div
+                  class="bg-white rounded-md z-10 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">
+                  <div class="w-full flex justify-center">
+                    <hr class="w-4/5" />
+                  </div>
+                  <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">
@@ -415,49 +412,42 @@ 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';"
-                />
-              </a>
-              <a href="https://www.linkedin.com/company/doiim/">
-                <img
-                  alt="LinkedIn"
-                  width="20"
-                  height="20"
-                  src="@/assets/linkedinIcon.svg"
-                  class="mr-6"
-                />
-              </a>
-              <a href="https://github.com/doiim/">
-                <img
-                  alt="Github"
-                  width="20"
-                  height="20"
-                  src="@/assets/githubIcon.svg"
-                />
-              </a>
-            </div>
+          <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/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <LinkedinIcon alt="LinkedIn" width="20" height="20" />
+            </a>
+            <a
+              href="https://github.com/doiim/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <GithubIcon alt="Github" width="20" height="20" />
+            </a>
           </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="(chainData, network) in Networks"
-            class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
+            :key="network"
+            class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
             @click="networkChange(network)"
           >
             <img
@@ -485,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;
 }
@@ -494,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>

src/main.ts

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

src/model/NetworkEnum.ts

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

src/model/Networks.ts

@@ -1,41 +1,22 @@
 import { NetworkEnum } from "@/model/NetworkEnum";
 
 export const Networks = {
-    [NetworkEnum.ethereum]:
-    {
-        chainId: "0xAA36A7",
-        chainName: "Sepolia"
+  [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,
     },
-    [NetworkEnum.polygon]:
-    {
-        chainId: "0x13881",
-        chainName: "Polygon Mumbai",
-        nativeCurrency: {
-            name: "MATIC",
-            symbol: "MATIC",
-            decimals: 18
-        },
-        blockExplorerUrls: [
-            "https://mumbai.polygonscan.com/"
-        ]
-    },
-    [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/"
-        ]
-    }
-}
+    blockExplorerUrls: ["https://explorer.testnet.rootstock.io/"],
+  },
+};

src/model/ValidDeposit.ts

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

src/store/ether.ts

@@ -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,7 +24,7 @@ export const useEtherStore = defineStore("ether", {
     setSelectedToken(token: TokenEnum) {
       this.selectedToken = token;
     },
-    setNetworkName(networkName: NetworkEnum) {
+    setNetworkId(networkName: NetworkEnum) {
       this.networkName = Number(networkName);
     },
     setLoadingLock(isLoadingLock: boolean) {
@@ -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;

src/utils/imagesPath.ts

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

src/utils/networkLiquidity.ts

@@ -4,20 +4,36 @@ const verifyNetworkLiquidity = (
   tokenValue: number,
   walletAddress: string,
   validDepositList: ValidDeposit[]
-): ValidDeposit | undefined => {
-  const element = validDepositList.find((element) => {
-    const remaining = element.remaining;
-    if (
-      tokenValue!! <= remaining &&
-      tokenValue!! != 0 &&
-      element.seller !== walletAddress
-    ) {
-      return true;
-    }
-    return false;
-  });
+): ValidDeposit[] => {
+  const filteredDepositList = validDepositList
+    .filter((element) => {
+      const remaining = element.remaining;
+      if (
+        tokenValue!! <= remaining &&
+        tokenValue!! != 0 &&
+        element.seller !== walletAddress
+      ) {
+        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 };

src/views/FaqView.vue

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

src/views/HomeView.vue

@@ -79,6 +79,7 @@ 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;
@@ -119,46 +120,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <SearchComponent
-    v-if="flowStep == Step.Search"
-    @token-buy="confirmBuyClick"
-  />
-  <CustomAlert
-    v-if="flowStep == Step.Search && showModal"
-    :type="'redirect'"
-    @close-alert="showModal = false"
-    @go-to-lock="flowStep = Step.Buy"
-  />
-  <CustomAlert
-    v-if="
-      flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
-    "
-    :type="'buy'"
-    @close-alert="showBuyAlert = false"
-  />
-  <div v-if="flowStep == Step.Buy">
-    <QrCodeComponent
-      :pixTarget="String(pixTarget)"
-      :tokenValue="tokenAmount"
-      @pix-validated="releaseTransaction"
-      v-if="!loadingLock"
+  <div>
+    <SearchComponent
+      v-if="flowStep == Step.Search"
+      @token-buy="confirmBuyClick"
     />
-    <LoadingComponent
-      v-if="loadingLock"
-      :message="'A transação está sendo enviada para a rede'"
+    <CustomAlert
+      v-if="flowStep == Step.Search && showModal"
+      :type="'redirect'"
+      @close-alert="showModal = false"
+      @go-to-lock="flowStep = Step.Buy"
     />
-  </div>
-  <div v-if="flowStep == Step.List">
-    <div class="flex flex-col gap-10" v-if="!loadingRelease">
-      <BuyConfirmedComponent
-        :tokenAmount="tokenAmount"
-        :is-current-step="flowStep == Step.List"
-        @make-another-transaction="flowStep = Step.Search"
+    <CustomAlert
+      v-if="
+        flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
+      "
+      :type="'buy'"
+      @close-alert="showBuyAlert = false"
+    />
+    <div v-if="flowStep == Step.Buy">
+      <QrCodeComponent
+        :pixTarget="String(pixTarget)"
+        :tokenValue="tokenAmount"
+        @pix-validated="releaseTransaction"
+        v-if="!loadingLock"
+      />
+      <LoadingComponent
+        v-if="loadingLock"
+        :message="'A transação está sendo enviada para a rede'"
+      />
+    </div>
+    <div v-if="flowStep == Step.List">
+      <div class="flex flex-col gap-10" v-if="!loadingRelease">
+        <BuyConfirmedComponent
+          :tokenAmount="tokenAmount"
+          :is-current-step="flowStep == Step.List"
+          @make-another-transaction="flowStep = Step.Search"
+        />
+      </div>
+      <LoadingComponent
+        v-if="loadingRelease"
+        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
       />
     </div>
-    <LoadingComponent
-      v-if="loadingRelease"
-      :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
-    />
   </div>
 </template>

src/views/ManageBidsView.vue

@@ -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,30 +90,32 @@ watch(networkName, async () => {
 </script>
 
 <template>
-  <CustomAlert
-    v-if="showAlert"
-    :type="'withdraw'"
-    @close-alert="showAlert = false"
-  />
-  <div class="page">
-    <div class="header" v-if="!loadingWithdraw && !walletAddress">
-      Por Favor Conecte Sua Carteira
-    </div>
-    <div class="header" v-if="!loadingWithdraw && walletAddress">
-      Gerenciar Ofertas
-    </div>
-    <div class="w-full max-w-4xl">
-      <ListingComponent
-        v-if="!loadingWithdraw && walletAddress"
-        :valid-deposits="depositList"
-        :wallet-transactions="transactionsList"
-        :active-lock-amount="activeLockAmount"
-        @deposit-withdrawn="callWithdraw"
-      ></ListingComponent>
-      <LoadingComponent
-        v-if="loadingWithdraw"
-        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
-      />
+  <div>
+    <CustomAlert
+      v-if="showAlert"
+      :type="'withdraw'"
+      @close-alert="showAlert = false"
+    />
+    <div class="page">
+      <div class="header" v-if="!loadingWithdraw && !walletAddress">
+        Por Favor Conecte Sua Carteira
+      </div>
+      <div class="header" v-if="!loadingWithdraw && walletAddress">
+        Gerenciar Ofertas
+      </div>
+      <div class="w-full max-w-4xl flex justify-center">
+        <ListingComponent
+          v-if="!loadingWithdraw && walletAddress"
+          :valid-deposits="depositList"
+          :wallet-transactions="transactionsList"
+          :active-lock-amount="activeLockAmount"
+          @deposit-withdrawn="callWithdraw"
+        ></ListingComponent>
+        <LoadingComponent
+          v-if="loadingWithdraw"
+          :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
+        />
+      </div>
     </div>
   </div>
 </template>

src/views/SellerView.vue

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

tsconfig.config.json

@@ -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"
+    ]
   }
 }

tsconfig.json

@@ -1,18 +1,37 @@
 {
   "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"],
-    "resolveJsonModule": true
+    "types": [
+      "jest",
+      "node"
+    ],
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "esnext",
+    "module": "esnext",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
   },
-
   "references": [
     {
       "path": "./tsconfig.config.json"
     }
+  ],
+  "exclude": [
+    "node_modules",
+    "./node_modules"
   ]
 }

vite.config.ts

@@ -3,9 +3,13 @@ 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({
+  build: {
+    target: "esnext",
+  },
   test: {
     globals: true,
     environment: "jsdom",
@@ -17,7 +21,7 @@ export default defineConfig({
       reporter: ["text", "lcov", "html"],
     },
   },
-  plugins: [vue(), vueJsx()],
+  plugins: [vue(), vueJsx(), svgLoader()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),