refactor: organize components

src/components/ListingComponent/BalanceCard.vue

@@ -4,6 +4,8 @@ import { ref, watch, onMounted, computed } from "vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
+import IconButton from "../ui/IconButton.vue";
+import withdrawIcon from "@/assets/withdraw.svg?url";
 
 const props = defineProps<{
   validDeposits: ValidDeposit[];
@@ -16,8 +18,6 @@ const emit = defineEmits<{
 }>();
 
 const withdrawAmount = ref<string>("");
-const withdrawButtonOpacity = ref<number>(0.6);
-const withdrawButtonCursor = ref<string>("not-allowed");
 const isCollapsibleOpen = ref<boolean>(false);
 const validDecimals = ref<boolean>(true);
 const validWithdrawAmount = ref<boolean>(true);
@@ -77,26 +77,6 @@ const cancelWithdraw = () => {
   enableConfirmButton.value = false;
 };
 
-watch(enableConfirmButton, (): void => {
-  if (!enableConfirmButton.value) {
-    withdrawButtonOpacity.value = 0.7;
-    withdrawButtonCursor.value = "not-allowed";
-  } else {
-    withdrawButtonOpacity.value = 1;
-    withdrawButtonCursor.value = "pointer";
-  }
-});
-
-watch(withdrawAmount, (): void => {
-  if (!withdrawAmount.value || !enableConfirmButton.value) {
-    withdrawButtonOpacity.value = 0.7;
-    withdrawButtonCursor.value = "not-allowed";
-  } else {
-    withdrawButtonOpacity.value = 1;
-    withdrawButtonCursor.value = "pointer";
-  }
-});
-
 onMounted(() => {
   useFloating(reference, floating, {
     placement: "right",
@@ -150,17 +130,14 @@ onMounted(() => {
         </div>
       </div>
       <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"
+        <IconButton
+          text="Sacar"
+          :icon="withdrawIcon"
+          variant="outline"
+          size="md"
+          :full-width="false"
           @click="openWithdrawForm"
-        >
-          <img
-            alt="Withdraw image"
-            src="@/assets/withdraw.svg?url"
-            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">
@@ -191,22 +168,20 @@ onMounted(() => {
       >
         <h1
           @click="cancelWithdraw"
-          class="text-black font-medium cursor-pointer"
+          class="text-black font-medium cursor-pointer hover:text-gray-600 transition-colors"
         >
           Cancelar
         </h1>
 
-        <div
-          class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+        <IconButton
+          text="Sacar"
+          :icon="withdrawIcon"
+          variant="outline"
+          size="md"
+          :full-width="false"
+          :disabled="!enableConfirmButton"
           @click="callWithdraw"
-        >
-          <img
-            alt="Withdraw image"
-            src="@/assets/withdraw.svg?url"
-            class="w-3 h-3 sm:w-4 sm:h-4"
-          />
-          <span class="last-release-info">Sacar</span>
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -217,19 +192,10 @@ p {
   @apply text-gray-900;
 }
 
-.last-release-info {
-  @apply font-medium text-xs sm:text-sm 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 {
-  opacity: v-bind(withdrawButtonOpacity);
-  cursor: v-bind(withdrawButtonCursor);
-}
-
 input[type="number"] {
   appearance: textfield;
   -moz-appearance: textfield;

src/components/ListingComponent/ListingComponent.vue

@@ -97,14 +97,14 @@ showInitialItems();
     >
       <button
         type="button"
-        class="text-white font-semibold border-2 border-amber-300 rounded-lg px-4 py-2 hover:bg-amber-300/10 transition-colors"
+        class="text-white font-semibold border-2 border-amber-300 rounded-lg px-4 py-2 hover:bg-amber-300/10 transition-colors cursor-pointer"
         @click="loadMore()"
       >
         Carregar mais
       </button>
-      <span class="text-gray-300">
-        ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
-        transações )
+      <span class="text-gray-300 text-sm">
+        {{ itemsToShow.length }} de {{ props.walletTransactions.length }}
+        transações
       </span>
     </div>
 

src/components/ListingComponent/TransactionCard.vue

@@ -2,6 +2,7 @@
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 import { computed } from "vue";
+import StatusBadge, { type StatusType } from "../ui/StatusBadge.vue";
 
 const props = defineProps<{
   transaction: WalletTransaction;
@@ -30,20 +31,20 @@ const explorerName = computed(() => {
   return props.networkName === NetworkEnum.sepolia ? "Etherscan" : "Polygonscan";
 });
 
-const statusInfo = computed(() => {
+const statusType = computed((): StatusType => {
   if (eventName.value === "Reserva") {
     switch (props.transaction.lockStatus) {
       case 1:
-        return { text: "Em Aberto", color: "bg-amber-300" };
+        return "open";
       case 2:
-        return { text: "Expirado", color: "bg-[#94A3B8]" };
+        return "expired";
       case 3:
-        return { text: "Finalizado", color: "bg-emerald-300" };
+        return "completed";
       default:
-        return { text: "Finalizado", color: "bg-emerald-300" };
+        return "completed";
     }
   }
-  return { text: "Finalizado", color: "bg-emerald-300" };
+  return "completed";
 });
 
 const showExplorerLink = computed(() => {
@@ -71,8 +72,8 @@ const handleExplorerClick = () => {
         </span>
       </div>
       <div class="flex flex-col items-center justify-center">
-        <div :class="[statusInfo.color, 'status-text']">
-          {{ statusInfo.text }}
+        <div class="mb-2 mt-4">
+          <StatusBadge :status="statusType" />
         </div>
         <div
           v-if="showExplorerLink"
@@ -111,10 +112,6 @@ const handleExplorerClick = () => {
   @apply flex justify-between items-center;
 }
 
-.status-text {
-  @apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center mb-2 px-2 py-1 mt-4;
-}
-
 .last-release-info {
   @apply font-medium text-xs sm:text-sm text-gray-900 justify-self-center;
 }