Add tooltip to inform what a locked value is

package.json

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

src/components/ListingComponent/ListingComponent.vue

@@ -5,10 +5,11 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
 import { debounce } from "@/utils/debounce";
+import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
 const etherStore = useEtherStore();
 
@@ -31,6 +32,12 @@ const isCollapsibleOpen = ref<boolean>(false);
 const validDecimals = ref<boolean>(true);
 const validWithdrawAmount = ref<boolean>(true);
 const enableConfirmButton = ref<boolean>(false);
+const showInfoTooltip = ref<boolean>(false);
+const floatingArrow = ref(null);
+
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
+const infoText = ref<HTMLElement | null>(null);
 
 // Debounce methods
 const handleInputEvent = (event: any): void => {
@@ -123,6 +130,18 @@ const getEventName = (event: string | undefined): string => {
   return possibleEventName[event];
 };
 
+onMounted(() => {
+  useFloating(reference, floating, {
+    placement: "right",
+    middleware: [
+      offset(10),
+      flip(),
+      shift(),
+      arrow({ element: floatingArrow }),
+    ],
+  });
+});
+
 // watch props changes
 watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -144,7 +163,7 @@ showInitialItems();
   </div>
   <div class="blur-container" v-if="!loadingWalletTransactions">
     <div
-      class="w-full bg-white p-6 rounded-lg"
+      class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-if="props.validDeposits.length > 0"
     >
       <div class="flex justify-between items-center">
@@ -155,30 +174,55 @@ showInitialItems();
           <p class="text-xl leading-7 font-semibold text-gray-900">
             {{ getRemaining() }} BRZ
           </p>
-          <div class="flex gap-2" v-if="activeLockAmount != 0">
+          <div class="flex gap-2 w-32 sm:w-44" v-if="activeLockAmount != 0">
-            <span class="text-xs leading-4 font-normal text-gray-400">{{
+            <span class="text-xs font-normal text-gray-400" ref="infoText">{{
-              `com ${activeLockAmount} BRZ em lock`
+              `com ${activeLockAmount.toFixed(2)} BRZ em lock`
             }}</span>
-            <img alt="info image" src="@/assets/info.svg" />
+            <div
+              class="absolute mt-[2px] md-view"
+              :style="{ left: `${(infoText?.clientWidth ?? 108) + 4}px` }"
+            >
+              <img
+                alt="info image"
+                src="@/assets/info.svg"
+                aria-describedby="tooltip"
+                ref="reference"
+                @mouseover="showInfoTooltip = true"
+                @mouseout="showInfoTooltip = false"
+              />
+              <div
+                role="tooltip"
+                ref="floating"
+                class="w-56 z-50 tooltip md-view"
+                v-if="showInfoTooltip"
+              >
+                Valor “em lock” significa que a quantia está aguardando
+                confirmação de compra e só estará disponível para saque caso a
+                transação expire.
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="pt-5">
         <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="[(isCollapsibleOpen = true)]"
           >
-            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <img
+              alt="Withdraw image"
+              src="@/assets/withdraw.svg"
+              class="w-3 h-3 sm:w-4 sm:h-4"
+            />
             <span class="last-release-info">Sacar</span>
           </div>
         </div>
+      </div>
+      <div class="pt-5">
         <div v-show="isCollapsibleOpen" class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
             name=""
-            id=""
             @input="debounce(handleInputEvent, 500)($event)"
             placeholder="0"
             class="text-2xl text-gray-900 w-full outline-none"
@@ -212,14 +256,18 @@ showInitialItems();
             class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"
           >
-            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <img
+              alt="Withdraw image"
+              src="@/assets/withdraw.svg"
+              class="w-3 h-3 sm:w-4 sm:h-4"
+            />
             <span class="last-release-info">Sacar</span>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="w-full bg-white p-6 rounded-lg"
+      class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-for="item in itemsToShow"
       :key="item.blockNumber"
     >
@@ -315,12 +363,9 @@ 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 flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
+  @apply flex flex-col justify-center items-center px-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 {
@@ -328,7 +373,11 @@ p {
 }
 
 .last-release-info {
-  @apply font-medium text-base text-gray-900 justify-self-center;
+  @apply font-medium text-sm sm:text-base text-gray-900 justify-self-center;
+}
+
+.tooltip {
+  @apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
 }
 
 .withdraw-button {
@@ -344,4 +393,10 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
+
+@media screen and (max-width: 640px) {
+  .md-view {
+    display: none;
+  }
+}
 </style>

src/components/ListingComponent/__tests__/ListingComponent.spec.ts

@@ -82,6 +82,6 @@ describe("ListingComponent.vue", () => {
       },
     });
 
-    expect(wrapper.html()).toContain("com 50 BRZ em lock");
+    expect(wrapper.html()).toContain("com 50.00 BRZ em lock");
   });
 });

yarn.lock

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