refactor: standardize quote styles to single quotes across all files

2026-05-04 20:39:10 -03:00
parent af897e7dd4
commit 9c948d7da4
69 changed files with 1839 additions and 1828 deletions
--- a/src/components/BuyerSteps/BuyConfirmedComponent.vue
+++ b/src/components/BuyerSteps/BuyConfirmedComponent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { withdrawDeposit } from "@/blockchain/buyerMethods";
+import { withdrawDeposit } from '@/blockchain/buyerMethods';
 import {
  getActiveLockAmount,
  listAllTransactionByWalletAddress,
  listValidDepositTransactionsByWalletAddress,
-} from "@/blockchain/wallet";
-import CustomButton from "@/components/ui/CustomButton.vue";
-import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useUser } from "@/composables/useUser";
-import { onMounted, ref, watch } from "vue";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
+} from '@/blockchain/wallet';
+import CustomButton from '@/components/ui/CustomButton.vue';
+import type { ValidDeposit } from '@/model/ValidDeposit';
+import type { WalletTransaction } from '@/model/WalletTransaction';
+import { useUser } from '@/composables/useUser';
+import { onMounted, ref, watch } from 'vue';
+import ListingComponent from '@/components/ListingComponent/ListingComponent.vue';

 // props
 const props = defineProps<{
@@ -58,17 +58,17 @@ const callWithdraw = async (amount: string) => {
      user.network.value.tokens[user.selectedToken.value].address,
    );
    if (withdraw) {
-      console.log("Saque realizado!");
+      console.log('Saque realizado!');
      await getWalletTransactions();
    } else {
-      console.log("Não foi possível realizar o saque!");
+      console.log('Não foi possível realizar o saque!');
    }
    user.setLoadingWalletTransactions(false);
  }
 };

 // Emits
-const emit = defineEmits(["makeAnotherTransaction"]);
+const emit = defineEmits(['makeAnotherTransaction']);

 // observer
 watch(props, async (): Promise<void> => {
@@ -153,8 +153,8 @@ p {
  @apply font-medium text-base text-gray-900;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }
 </style>
--- a/src/components/BuyerSteps/BuyerSearchComponent.vue
+++ b/src/components/BuyerSteps/BuyerSearchComponent.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { useUser } from "@/composables/useUser";
-import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
-import CustomButton from "@/components/ui/CustomButton.vue";
-import { debounce } from "@/utils/debounce";
-import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
-import type { ValidDeposit } from "@/model/ValidDeposit";
-import { decimalCount } from "@/utils/decimalCount";
-import { getTokenImage, getNetworkImage } from "@/utils/imagesPath";
-import { onClickOutside } from "@vueuse/core";
-import { Networks } from "@/config/networks";
-import { TokenEnum } from "@/model/NetworkEnum";
-import { getContract } from "@/blockchain/provider";
-import { reputationAbi } from "@/blockchain/abi";
-import { type Address } from "viem";
+import { ref, watch, computed } from 'vue';
+import { useUser } from '@/composables/useUser';
+import SpinnerComponent from '@/components/ui/SpinnerComponent.vue';
+import CustomButton from '@/components/ui/CustomButton.vue';
+import { debounce } from '@/utils/debounce';
+import { verifyNetworkLiquidity } from '@/utils/networkLiquidity';
+import type { ValidDeposit } from '@/model/ValidDeposit';
+import { decimalCount } from '@/utils/decimalCount';
+import { getTokenImage, getNetworkImage } from '@/utils/imagesPath';
+import { onClickOutside } from '@vueuse/core';
+import { Networks } from '@/config/networks';
+import { TokenEnum } from '@/model/NetworkEnum';
+import { getContract } from '@/blockchain/provider';
+import { reputationAbi } from '@/blockchain/abi';
+import { type Address } from 'viem';

 // Store reference
 const user = useUser();
@@ -35,17 +35,17 @@ const tokenValue = ref<number>(0);
 const enableConfirmButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
-const identification = ref<string>("");
+const identification = ref<string>('');
 const selectedDeposits = ref<ValidDeposit[]>();
 const reputationLimit = ref<number | null>(null);
 const exceedsReputationLimit = ref<boolean>(false);

-import ChevronDown from "@/assets/chevronDown.svg";
-import { useOnboard } from "@web3-onboard/vue";
-import { getParticipantID } from "@/blockchain/events";
+import ChevronDown from '@/assets/chevronDown.svg';
+import { useOnboard } from '@web3-onboard/vue';
+import { getParticipantID } from '@/blockchain/events';

 // Emits
-const emit = defineEmits(["tokenBuy"]);
+const emit = defineEmits(['tokenBuy']);

 const castAddrToKey = (address: Address): bigint => {
  return BigInt(address) << BigInt(12);
@@ -59,13 +59,13 @@ const getUserCredit = async (userAddress: Address): Promise<bigint> => {
    const userCredit = await client.readContract({
      address,
      abi,
-      functionName: "userRecord",
+      functionName: 'userRecord',
      args: [userKey],
    });

    return userCredit as bigint;
  } catch (error) {
-    console.error("Error fetching user credit:", error);
+    console.error('Error fetching user credit:', error);
    return BigInt(0);
  }
 };
@@ -77,12 +77,12 @@ const getReputationAddress = async (): Promise<Address | null> => {
    const reputationAddr = await client.readContract({
      address,
      abi,
-      functionName: "reputation",
+      functionName: 'reputation',
    });

    return reputationAddr as Address;
  } catch (error) {
-    console.error("Error fetching reputation address:", error);
+    console.error('Error fetching reputation address:', error);
    return null;
  }
 };
@@ -97,13 +97,13 @@ const getSpendLimit = async (userCredit: bigint): Promise<bigint> => {
    const spendLimit = await client.readContract({
      address: reputationAddr,
      abi: reputationAbi,
-      functionName: "limiter",
+      functionName: 'limiter',
      args: [userCredit],
    });

    return spendLimit as bigint;
  } catch (error) {
-    console.error("Error fetching spend limit:", error);
+    console.error('Error fetching spend limit:', error);
    return BigInt(0);
  }
 };
@@ -130,7 +130,7 @@ const checkReputationLimit = async (inputValue: number): Promise<void> => {
    exceedsReputationLimit.value = spendLimitNumber < inputValue;
    enableConfirmButton.value = !exceedsReputationLimit.value;
  } catch (error) {
-    console.error("Error checking reputation limit:", error);
+    console.error('Error checking reputation limit:', error);
    reputationLimit.value = null;
    exceedsReputationLimit.value = false;
  }
@@ -148,7 +148,7 @@ const emitConfirmButton = async (): Promise<void> => {
  );
  if (!deposit) return;
  deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
-  emit("tokenBuy", deposit, tokenValue.value);
+  emit('tokenBuy', deposit, tokenValue.value);
 };

 // Debounce methods
@@ -440,12 +440,12 @@ const handleSubmit = async (e: Event): Promise<void> => {
  @apply text-white text-center;
 }

-input[type="number"] {
+input[type='number'] {
  -moz-appearance: textfield;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }

--- a/src/components/BuyerSteps/QrCodeComponent.vue
+++ b/src/components/BuyerSteps/QrCodeComponent.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
-import CustomButton from "@/components/ui/CustomButton.vue";
-import CustomModal from "@/components/ui/CustomModal.vue";
-import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
-import { createSolicitation, getSolicitation, type Offer } from "@/utils/bbPay";
-import { getParticipantID } from "@/blockchain/events";
-import { getUnreleasedLockById } from "@/blockchain/events";
-import QRCode from "qrcode";
+import { ref, onMounted, onUnmounted } from 'vue';
+import CustomButton from '@/components/ui/CustomButton.vue';
+import CustomModal from '@/components/ui/CustomModal.vue';
+import SpinnerComponent from '@/components/ui/SpinnerComponent.vue';
+import { createSolicitation, getSolicitation, type Offer } from '@/utils/bbPay';
+import { getParticipantID } from '@/blockchain/events';
+import { getUnreleasedLockById } from '@/blockchain/events';
+import QRCode from 'qrcode';

 // Props
 interface Props {
@@ -15,11 +15,11 @@ interface Props {

 const props = defineProps<Props>();

-const qrCode = ref<string>("");
-const qrCodeSvg = ref<string>("");
+const qrCode = ref<string>('');
+const qrCodeSvg = ref<string>('');
 const showWarnModal = ref<boolean>(true);
-const pixTimestamp = ref<string>("");
-const releaseSignature = ref<string>("");
+const pixTimestamp = ref<string>('');
+const releaseSignature = ref<string>('');
 const solicitationData = ref<any>(null);
 const pollingInterval = ref<NodeJS.Timeout | null>(null);
 const copyFeedback = ref<boolean>(false);
@@ -29,22 +29,22 @@ const copyFeedbackTimeout = ref<NodeJS.Timeout | null>(null);
 const generateQrCodeSvg = async (text: string) => {
  try {
    const svgString = await QRCode.toString(text, {
-      type: "svg",
+      type: 'svg',
      width: 192, // 48 * 4 for better quality
      margin: 2,
      color: {
-        dark: "#000000",
-        light: "#FFFFFF",
+        dark: '#000000',
+        light: '#FFFFFF',
      },
    });
    qrCodeSvg.value = svgString;
  } catch (error) {
-    console.error("Error generating QR code SVG:", error);
+    console.error('Error generating QR code SVG:', error);
  }
 };

 // Emits
-const emit = defineEmits(["pixValidated"]);
+const emit = defineEmits(['pixValidated']);

 // Function to check solicitation status
 const checkSolicitationStatus = async () => {
@@ -67,7 +67,7 @@ const checkSolicitationStatus = async () => {
      }
    }
  } catch (error) {
-    console.error("Error checking solicitation status:", error);
+    console.error('Error checking solicitation status:', error);
  }
 };

@@ -100,7 +100,7 @@ const copyToClipboard = async () => {
      copyFeedback.value = false;
    }, 2000);
  } catch (error) {
-    console.error("Error copying to clipboard:", error);
+    console.error('Error copying to clipboard:', error);
  }
 };

@@ -130,7 +130,7 @@ onMounted(async () => {
    // Start polling for solicitation status
    startPolling();
  } catch (error) {
-    console.error("Error creating solicitation:", error);
+    console.error('Error creating solicitation:', error);
  }
 });

@@ -268,13 +268,13 @@ h2 {
  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6 max-w-screen-sm;
 }

-input[type="number"] {
+input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }

--- a/src/components/Explorer/AnalyticsCard.vue
+++ b/src/components/Explorer/AnalyticsCard.vue
@@ -3,13 +3,13 @@ interface Props {
  title: string;
  value: string;
  change?: string;
-  changeType?: "positive" | "negative" | "neutral";
+  changeType?: 'positive' | 'negative' | 'neutral';
  icon?: string;
  loading?: boolean;
 }

 const props = withDefaults(defineProps<Props>(), {
-  changeType: "neutral",
+  changeType: 'neutral',
  loading: false,
 });
 </script>
--- a/src/components/Explorer/TransactionTable.vue
+++ b/src/components/Explorer/TransactionTable.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue';

 interface Transaction {
  id: string;
-  type: "deposit" | "lock" | "release" | "return";
+  type: 'deposit' | 'lock' | 'release' | 'return';
  timestamp: string;
  seller?: string;
  buyer?: string | null;
@@ -25,27 +25,27 @@ const copyFeedbackTimeout = ref<{ [key: string]: NodeJS.Timeout | null }>({});

 const getTransactionTypeInfo = (type: string) => {
  const typeMap = {
-    deposit: { label: "Depósito", status: "completed" as const },
-    lock: { label: "Bloqueio", status: "open" as const },
-    release: { label: "Liberação", status: "completed" as const },
-    return: { label: "Retorno", status: "expired" as const },
+    deposit: { label: 'Depósito', status: 'completed' as const },
+    lock: { label: 'Bloqueio', status: 'open' as const },
+    release: { label: 'Liberação', status: 'completed' as const },
+    return: { label: 'Retorno', status: 'expired' as const },
  };
  return (
    typeMap[type as keyof typeof typeMap] || {
      label: type,
-      status: "pending" as const,
+      status: 'pending' as const,
    }
  );
 };

 const getTransactionTypeColor = (type: string) => {
  const colorMap = {
-    deposit: "text-emerald-600",
-    lock: "text-amber-600",
-    release: "text-emerald-600",
-    return: "text-gray-600",
+    deposit: 'text-emerald-600',
+    lock: 'text-amber-600',
+    release: 'text-emerald-600',
+    return: 'text-gray-600',
  };
-  return colorMap[type as keyof typeof colorMap] || "text-gray-600";
+  return colorMap[type as keyof typeof colorMap] || 'text-gray-600';
 };

 const formatAddress = (address: string) => {
@@ -79,7 +79,7 @@ const copyToClipboard = async (address: string, key: string) => {
      copyFeedback.value[key] = false;
    }, 2000);
  } catch (error) {
-    console.error("Error copying to clipboard:", error);
+    console.error('Error copying to clipboard:', error);
  }
 };
 </script>
--- a/src/components/ListingComponent/BalanceCard.vue
+++ b/src/components/ListingComponent/BalanceCard.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ValidDeposit } from "@/model/ValidDeposit";
-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";
+import type { ValidDeposit } from '@/model/ValidDeposit';
+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[];
@@ -17,7 +17,7 @@ const emit = defineEmits<{
  withdraw: [amount: string];
 }>();

-const withdrawAmount = ref<string>("");
+const withdrawAmount = ref<string>('');
 const isCollapsibleOpen = ref<boolean>(false);
 const validDecimals = ref<boolean>(true);
 const validWithdrawAmount = ref<boolean>(true);
@@ -58,9 +58,9 @@ const handleInputEvent = (event: any): void => {

 const callWithdraw = () => {
  if (enableConfirmButton.value && withdrawAmount.value) {
-    emit("withdraw", withdrawAmount.value);
+    emit('withdraw', withdrawAmount.value);
    // Reset form after withdraw
-    withdrawAmount.value = "";
+    withdrawAmount.value = '';
    isCollapsibleOpen.value = false;
  }
 };
@@ -71,7 +71,7 @@ const openWithdrawForm = () => {

 const cancelWithdraw = () => {
  isCollapsibleOpen.value = false;
-  withdrawAmount.value = "";
+  withdrawAmount.value = '';
  validDecimals.value = true;
  validWithdrawAmount.value = true;
  enableConfirmButton.value = false;
@@ -79,7 +79,7 @@ const cancelWithdraw = () => {

 onMounted(() => {
  useFloating(reference, floating, {
-    placement: "right",
+    placement: 'right',
    middleware: [
      offset(10),
      flip(),
@@ -194,13 +194,13 @@ p {
  @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];
 }

-input[type="number"] {
+input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }

--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useUser } from "@/composables/useUser";
-import { ref, watch } from "vue";
-import SpinnerComponent from "../ui/SpinnerComponent.vue";
-import BalanceCard from "./BalanceCard.vue";
-import TransactionCard from "./TransactionCard.vue";
+import type { ValidDeposit } from '@/model/ValidDeposit';
+import type { WalletTransaction } from '@/model/WalletTransaction';
+import { useUser } from '@/composables/useUser';
+import { ref, watch } from 'vue';
+import SpinnerComponent from '../ui/SpinnerComponent.vue';
+import BalanceCard from './BalanceCard.vue';
+import TransactionCard from './TransactionCard.vue';

 const user = useUser();

@@ -16,14 +16,14 @@ const props = defineProps<{
  activeLockAmount: number;
 }>();

-const emit = defineEmits(["depositWithdrawn"]);
+const emit = defineEmits(['depositWithdrawn']);

 const { loadingWalletTransactions } = user;

 const itemsToShow = ref<WalletTransaction[]>([]);

 const callWithdraw = (amount: string) => {
-  emit("depositWithdrawn", amount);
+  emit('depositWithdrawn', amount);
 };

 const showInitialItems = (): void => {
@@ -33,7 +33,7 @@ const showInitialItems = (): void => {
 const openEtherscanUrl = (transactionHash: string): void => {
  const networkUrl = user.network.value.blockExplorers?.default.url;
  const url = `https://${networkUrl}/tx/${transactionHash}`;
-  window.open(url, "_blank");
+  window.open(url, '_blank');
 };

 const loadMore = (): void => {
--- a/src/components/ListingComponent/TransactionCard.vue
+++ b/src/components/ListingComponent/TransactionCard.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { WalletTransaction } from "@/model/WalletTransaction";
-import { TokenEnum } from "@/model/NetworkEnum";
-import { computed } from "vue";
-import StatusBadge, { type StatusType } from "../ui/StatusBadge.vue";
-import { Networks } from "@/config/networks";
+import type { WalletTransaction } from '@/model/WalletTransaction';
+import { TokenEnum } from '@/model/NetworkEnum';
+import { computed } from 'vue';
+import StatusBadge, { type StatusType } from '../ui/StatusBadge.vue';
+import { Networks } from '@/config/networks';

 const props = defineProps<{
  transaction: WalletTransaction;
@@ -16,16 +16,16 @@ const emit = defineEmits<{
 }>();

 const eventName = computed(() => {
-  if (!props.transaction.event) return "Desconhecido";
+  if (!props.transaction.event) return 'Desconhecido';

  const possibleEventName: { [key: string]: string } = {
-    DepositAdded: "Oferta",
-    LockAdded: "Reserva",
-    LockReleased: "Compra",
-    DepositWithdrawn: "Retirada",
+    DepositAdded: 'Oferta',
+    LockAdded: 'Reserva',
+    LockReleased: 'Compra',
+    DepositWithdrawn: 'Retirada',
  };

-  return possibleEventName[props.transaction.event] || "Desconhecido";
+  return possibleEventName[props.transaction.event] || 'Desconhecido';
 });

 const explorerName = computed(() => {
@@ -34,46 +34,46 @@ const explorerName = computed(() => {
 });

 const statusType = computed((): StatusType => {
-  if (eventName.value === "Reserva") {
+  if (eventName.value === 'Reserva') {
    switch (props.transaction.lockStatus) {
      case 1:
-        return "open";
+        return 'open';
      case 2:
-        return "expired";
+        return 'expired';
      case 3:
-        return "completed";
+        return 'completed';
      default:
-        return "completed";
+        return 'completed';
    }
  }
-  return "completed";
+  return 'completed';
 });

 const showExplorerLink = computed(() => {
-  return eventName.value !== "Reserva" || props.transaction.lockStatus !== 1;
+  return eventName.value !== 'Reserva' || props.transaction.lockStatus !== 1;
 });

 const showContinueButton = computed(() => {
-  return eventName.value === "Reserva" && props.transaction.lockStatus === 1;
+  return eventName.value === 'Reserva' && props.transaction.lockStatus === 1;
 });

 const formattedDate = computed(() => {
-  if (!props.transaction.blockTimestamp) return "";
+  if (!props.transaction.blockTimestamp) return '';

  const timestamp = props.transaction.blockTimestamp;
  const date = new Date(timestamp * 1000);

-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${day}/${month}/${year} ${hours}:${minutes}`;
 });

 const handleExplorerClick = () => {
-  emit("openExplorer", props.transaction.transactionHash);
+  emit('openExplorer', props.transaction.transactionHash);
 };
 </script>

--- a/src/components/SellerSteps/SellerComponent.vue
+++ b/src/components/SellerSteps/SellerComponent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useUser } from "@/composables/useUser";
-import CustomButton from "@/components/ui/CustomButton.vue";
-import { postProcessKey } from "@/utils/pixKeyFormat";
-import { TokenEnum } from "@/model/NetworkEnum";
-import { getTokenImage } from "@/utils/imagesPath";
-import { useOnboard } from "@web3-onboard/vue";
-import ChevronDown from "@/assets/chevron.svg";
+import { ref, computed } from 'vue';
+import { useUser } from '@/composables/useUser';
+import CustomButton from '@/components/ui/CustomButton.vue';
+import { postProcessKey } from '@/utils/pixKeyFormat';
+import { TokenEnum } from '@/model/NetworkEnum';
+import { getTokenImage } from '@/utils/imagesPath';
+import { useOnboard } from '@web3-onboard/vue';
+import ChevronDown from '@/assets/chevron.svg';

 // Import the bank list
-import bankList from "@/utils/files/isbpList.json";
-import type { Participant } from "@/utils/bbPay";
+import bankList from '@/utils/files/isbpList.json';
+import type { Participant } from '@/utils/bbPay';

 // Define Bank interface
 interface Bank {
@@ -26,17 +26,17 @@ const formRef = ref<HTMLFormElement | null>(null);
 const user = useUser();
 const { walletAddress, selectedToken } = user;

-const offer = ref<string>("");
-const identification = ref<string>("");
-const account = ref<string>("");
-const branch = ref<string>("");
-const accountType = ref<string>("");
+const offer = ref<string>('');
+const identification = ref<string>('');
+const account = ref<string>('');
+const branch = ref<string>('');
+const accountType = ref<string>('');
 const selectTokenToggle = ref<boolean>(false);
-const savingsVariation = ref<string>("");
+const savingsVariation = ref<string>('');
 const errors = ref<{ [key: string]: string }>({});

 // Bank selection
-const bankSearchQuery = ref<string>("");
+const bankSearchQuery = ref<string>('');
 const showBankList = ref<boolean>(false);
 const selectedBank = ref<Bank | null>(null);

@@ -56,7 +56,7 @@ const handleBankSelect = (bank: Bank) => {
 };

 // Emits
-const emit = defineEmits(["approveTokens"]);
+const emit = defineEmits(['approveTokens']);

 // Methods
 const connectAccount = async (): Promise<void> => {
@@ -77,10 +77,10 @@ const handleSubmit = (e: Event): void => {
    accountType: accountType.value,
    account: account.value,
    branch: branch.value,
-    savingsVariation: savingsVariation.value || "",
+    savingsVariation: savingsVariation.value || '',
  };

-  emit("approveTokens", data);
+  emit('approveTokens', data);
 };

 // Token selection
@@ -328,13 +328,13 @@ const handleSelectedToken = (token: TokenEnum): void => {
  @apply text-white text-center;
 }

-input[type="number"] {
+input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }

--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useUser } from "@/composables/useUser";
-import CustomButton from "@/components/ui/CustomButton.vue";
-import { debounce } from "@/utils/debounce";
-import { decimalCount } from "@/utils/decimalCount";
-import { getTokenImage } from "@/utils/imagesPath";
-import { useOnboard } from "@web3-onboard/vue";
+import { ref } from 'vue';
+import { useUser } from '@/composables/useUser';
+import CustomButton from '@/components/ui/CustomButton.vue';
+import { debounce } from '@/utils/debounce';
+import { decimalCount } from '@/utils/decimalCount';
+import { getTokenImage } from '@/utils/imagesPath';
+import { useOnboard } from '@web3-onboard/vue';

 // Store
 const user = useUser();
@@ -18,7 +18,7 @@ const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);

 // Emits
-const emit = defineEmits(["tokenBuy"]);
+const emit = defineEmits(['tokenBuy']);

 // Blockchain methods
 const connectAccount = async (): Promise<void> => {
@@ -152,8 +152,8 @@ const handleInputEvent = (event: any): void => {
  @apply text-white text-center;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }
 </style>
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import CustomButton from "@/components/ui/CustomButton.vue";
+import CustomButton from '@/components/ui/CustomButton.vue';

 // Emits
-const emit = defineEmits(["sendNetwork"]);
+const emit = defineEmits(['sendNetwork']);

 // props and store references
 const props = defineProps({
@@ -80,8 +80,8 @@ p {
  @apply font-medium text-base;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }
 </style>
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { useUser } from "@/composables/useUser";
-import { onClickOutside } from "@vueuse/core";
-import { getNetworkImage } from "@/utils/imagesPath";
-import { Networks } from "@/config/networks";
-import { useOnboard } from "@web3-onboard/vue";
+import { ref, watch } from 'vue';
+import { useUser } from '@/composables/useUser';
+import { onClickOutside } from '@vueuse/core';
+import { getNetworkImage } from '@/utils/imagesPath';
+import { Networks } from '@/config/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";
-import { DEFAULT_NETWORK } from "@/config/networks";
-import type { NetworkConfig } from "@/model/NetworkEnum";
+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';
+import { DEFAULT_NETWORK } from '@/config/networks';
+import type { NetworkConfig } from '@/model/NetworkEnum';

 interface MenuOption {
  label: string;
@@ -47,7 +47,7 @@ const connnectWallet = async (): Promise<void> => {

 watch(connectedWallet, async (newVal: any) => {
  connectProvider(newVal.provider);
-  const addresses = await newVal.provider.request({ method: "eth_accounts" });
+  const addresses = await newVal.provider.request({ method: 'eth_accounts' });
  user.setWalletAddress(addresses.shift());
 });

@@ -58,7 +58,7 @@ watch(connectedChain, (newVal: any) => {
    !Object.values(Networks).some((network) => network.id === Number(newVal.id))
  ) {
    console.log(
-      "Invalid or unsupported network detected, defaulting to Sepolia",
+      'Invalid or unsupported network detected, defaulting to Sepolia',
    );
    user.setNetwork(DEFAULT_NETWORK);
    return;
@@ -67,7 +67,7 @@ watch(connectedChain, (newVal: any) => {
 });

 const formatWalletAddress = (): string => {
-  if (!walletAddress.value) throw new Error("Wallet not connected");
+  if (!walletAddress.value) throw new Error('Wallet not connected');
  const walletAddressLength = walletAddress.value.length;
  const initialText = walletAddress.value.substring(0, 5);
  const finalText = walletAddress.value.substring(
@@ -79,7 +79,7 @@ const formatWalletAddress = (): string => {

 const disconnectUser = async (): Promise<void> => {
  user.setWalletAddress(null);
-  await disconnectWallet({ label: connectedWallet.value?.label || "" });
+  await disconnectWallet({ label: connectedWallet.value?.label || '' });
  closeMenu();
 };

@@ -100,7 +100,7 @@ const networkChange = async (network: NetworkConfig): Promise<void> => {
      });
      user.setNetwork(network);
    } catch (error) {
-      console.log("Error changing network", error);
+      console.log('Error changing network', error);
    }
  } else {
    // If no wallet connected, just update the network state
@@ -122,20 +122,20 @@ onClickOutside(infoMenuRef, () => {

 const infoMenuOptions: MenuOption[] = [
  {
-    label: "Explorar Transações",
-    route: "/explore",
+    label: 'Explorar Transações',
+    route: '/explore',
    showInDesktop: true,
    showInMobile: false,
  },
  {
-    label: "Perguntas frequentes",
-    route: "/faq",
+    label: 'Perguntas frequentes',
+    route: '/faq',
    showInDesktop: true,
    showInMobile: false,
  },
  {
-    label: "Versões",
-    route: "/versions",
+    label: 'Versões',
+    route: '/versions',
    showInDesktop: true,
    showInMobile: false,
  },
@@ -143,40 +143,40 @@ const infoMenuOptions: MenuOption[] = [

 const walletMenuOptions: MenuOption[] = [
  {
-    label: "Quero vender",
+    label: 'Quero vender',
    isDynamic: true,
-    dynamicLabel: () => (sellerView.value ? "Quero comprar" : "Quero vender"),
-    dynamicRoute: () => (sellerView.value ? "/" : "/seller"),
+    dynamicLabel: () => (sellerView.value ? 'Quero comprar' : 'Quero vender'),
+    dynamicRoute: () => (sellerView.value ? '/' : '/seller'),
    showInDesktop: false,
    showInMobile: true,
  },
  {
-    label: "Explorar Transações",
-    route: "/explore",
+    label: 'Explorar Transações',
+    route: '/explore',
    showInDesktop: false,
    showInMobile: true,
  },
  {
-    label: "Gerenciar Ofertas",
-    route: "/manage_bids",
+    label: 'Gerenciar Ofertas',
+    route: '/manage_bids',
    showInDesktop: true,
    showInMobile: true,
  },
  {
-    label: "Perguntas frequentes",
-    route: "/faq",
+    label: 'Perguntas frequentes',
+    route: '/faq',
    showInDesktop: false,
    showInMobile: true,
  },
  {
-    label: "Versões",
-    route: "/versions",
+    label: 'Versões',
+    route: '/versions',
    showInDesktop: false,
    showInMobile: true,
  },
  {
-    label: "Desconectar",
-    route: "/",
+    label: 'Desconectar',
+    route: '/',
    action: disconnectUser,
    showInDesktop: true,
    showInMobile: true,
@@ -330,7 +330,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
        class="default-button whitespace-nowrap w-40 sm:w-44 md:w-36 hidden md:inline-block"
      >
        <div class="topbar-text topbar-link text-center mx-auto inline-block">
-          {{ sellerView ? "Quero comprar" : "Quero vender" }}
+          {{ sellerView ? 'Quero comprar' : 'Quero vender' }}
        </div>
      </RouterLink>
      <div class="flex flex-col relative">
@@ -354,7 +354,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
            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 }"
          >
-            {{ user.network.value.name || "Invalid Chain" }}
+            {{ user.network.value.name || 'Invalid Chain' }}
          </span>
          <div
            class="transition-all duration-500 ease-in-out mt-1"
--- a/src/components/ui/AmountInput.vue
+++ b/src/components/ui/AmountInput.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { TokenEnum } from "@/model/NetworkEnum";
-import { decimalCount } from "@/utils/decimalCount";
-import { debounce } from "@/utils/debounce";
-import TokenSelector from "./TokenSelector.vue";
-import ErrorMessage from "./ErrorMessage.vue";
+import { ref, watch, computed } from 'vue';
+import { TokenEnum } from '@/model/NetworkEnum';
+import { decimalCount } from '@/utils/decimalCount';
+import { debounce } from '@/utils/debounce';
+import TokenSelector from './TokenSelector.vue';
+import ErrorMessage from './ErrorMessage.vue';

 const props = withDefaults(
  defineProps<{
@@ -20,7 +20,7 @@ const props = withDefaults(
    required?: boolean;
  }>(),
  {
-    placeholder: "0",
+    placeholder: '0',
    showTokenSelector: true,
    showConversion: true,
    conversionRate: 1,
@@ -31,13 +31,13 @@ const props = withDefaults(
 );

 const emit = defineEmits<{
-  "update:modelValue": [value: number];
-  "update:selectedToken": [token: TokenEnum];
+  'update:modelValue': [value: number];
+  'update:selectedToken': [token: TokenEnum];
  error: [message: string | null];
  valid: [isValid: boolean];
 }>();

-const inputValue = ref<string>(String(props.modelValue || ""));
+const inputValue = ref<string>(String(props.modelValue || ''));
 const validDecimals = ref(true);
 const validRange = ref(true);

@@ -47,7 +47,7 @@ const convertedValue = computed(() => {

 const errorMessage = computed(() => {
  if (!validDecimals.value) {
-    return "Por favor utilize no máximo 2 casas decimais";
+    return 'Por favor utilize no máximo 2 casas decimais';
  }
  if (!validRange.value) {
    if (props.minValue && props.modelValue < props.minValue) {
@@ -74,8 +74,8 @@ const handleInput = (event: Event) => {
  // Validar decimais
  if (decimalCount(value) > 2) {
    validDecimals.value = false;
-    emit("error", "Por favor utilize no máximo 2 casas decimais");
-    emit("valid", false);
+    emit('error', 'Por favor utilize no máximo 2 casas decimais');
+    emit('valid', false);
    return;
  }
  validDecimals.value = true;
@@ -83,34 +83,34 @@ const handleInput = (event: Event) => {
  // Validar range
  if (props.minValue !== undefined && numValue < props.minValue) {
    validRange.value = false;
-    emit("error", `Valor mínimo: ${props.minValue}`);
-    emit("valid", false);
+    emit('error', `Valor mínimo: ${props.minValue}`);
+    emit('valid', false);
    return;
  }
  if (props.maxValue !== undefined && numValue > props.maxValue) {
    validRange.value = false;
-    emit("error", `Valor máximo: ${props.maxValue}`);
-    emit("valid", false);
+    emit('error', `Valor máximo: ${props.maxValue}`);
+    emit('valid', false);
    return;
  }
  validRange.value = true;

-  emit("update:modelValue", numValue);
-  emit("error", null);
-  emit("valid", true);
+  emit('update:modelValue', numValue);
+  emit('error', null);
+  emit('valid', true);
 };

 const debouncedHandleInput = debounce(handleInput, 500);

 const handleTokenChange = (token: TokenEnum) => {
-  emit("update:selectedToken", token);
+  emit('update:selectedToken', token);
 };

 watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== Number(inputValue.value)) {
-      inputValue.value = String(newVal || "");
+      inputValue.value = String(newVal || '');
    }
  },
 );
--- a/src/components/ui/BankSelector.vue
+++ b/src/components/ui/BankSelector.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import bankList from "@/utils/files/isbpList.json";
+import { computed } from 'vue';
+import bankList from '@/utils/files/isbpList.json';

 export interface Bank {
  ISPB: string;
@@ -15,12 +15,12 @@ const props = withDefaults(
  }>(),
  {
    disabled: false,
-    placeholder: "Busque e selecione seu banco",
+    placeholder: 'Busque e selecione seu banco',
  },
 );

 const emit = defineEmits<{
-  "update:modelValue": [value: string];
+  'update:modelValue': [value: string];
  change: [bank: Bank];
 }>();

@@ -38,7 +38,7 @@ const selectedItem = computed(() => {
 });

 const searchQuery = computed({
-  get: () => selectedItem.value?.label || "",
+  get: () => selectedItem.value?.label || '',
  set: (value: string) => {
    // Handled by input
  },
@@ -58,8 +58,8 @@ const showBankList = computed(() => {
 });

 const selectBank = (bank: Bank) => {
-  emit("update:modelValue", bank.ISPB);
-  emit("change", bank);
+  emit('update:modelValue', bank.ISPB);
+  emit('change', bank);
 };
 </script>

--- a/src/components/ui/CustomAlert.vue
+++ b/src/components/ui/CustomAlert.vue
@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue';
 const props = defineProps<{
  type: string;
 }>();

-const alertText = ref<string>("");
-const alertPaddingLeft = ref<string>("18rem");
+const alertText = ref<string>('');
+const alertPaddingLeft = ref<string>('18rem');

-if (props.type === "sell") {
-  alertPaddingLeft.value = "30%";
-} else if (props.type === "buy") {
-  alertPaddingLeft.value = "30%";
-} else if (props.type === "withdraw") {
-  alertPaddingLeft.value = "40%";
-} else if (props.type === "redirect") {
-  alertPaddingLeft.value = "35%";
+if (props.type === 'sell') {
+  alertPaddingLeft.value = '30%';
+} else if (props.type === 'buy') {
+  alertPaddingLeft.value = '30%';
+} else if (props.type === 'withdraw') {
+  alertPaddingLeft.value = '40%';
+} else if (props.type === 'redirect') {
+  alertPaddingLeft.value = '35%';
 }

 switch (props.type) {
-  case "buy":
+  case 'buy':
    alertText.value =
-      "Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.";
+      'Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.';
    break;
-  case "sell":
+  case 'sell':
    alertText.value =
-      "Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
+      'Tudo certo! Os tokens já foram reservados e sua oferta está disponível.';
    break;
-  case "redirect":
-    alertText.value = "Existe uma compra em aberto. Continuar?";
+  case 'redirect':
+    alertText.value = 'Existe uma compra em aberto. Continuar?';
    break;
-  case "withdraw":
-    alertText.value = "Tudo certo! Saque realizado com sucesso!";
+  case 'withdraw':
+    alertText.value = 'Tudo certo! Saque realizado com sucesso!';
    break;
 }
 </script>
--- a/src/components/ui/CustomButton.vue
+++ b/src/components/ui/CustomButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
-export type ButtonSize = "sm" | "md" | "lg" | "xl";
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';

 const props = withDefaults(
  defineProps<{
@@ -9,25 +9,25 @@ const props = withDefaults(
    variant?: ButtonVariant;
    size?: ButtonSize;
    icon?: string;
-    iconPosition?: "left" | "right";
+    iconPosition?: 'left' | 'right';
    fullWidth?: boolean;
    loading?: boolean;
  }>(),
  {
    isDisabled: false,
-    variant: "primary",
-    size: "xl",
-    iconPosition: "left",
+    variant: 'primary',
+    size: 'xl',
+    iconPosition: 'left',
    fullWidth: true,
    loading: false,
  },
 );

-const emit = defineEmits(["buttonClicked"]);
+const emit = defineEmits(['buttonClicked']);

 const handleClick = () => {
  if (!props.isDisabled && !props.loading) {
-    emit("buttonClicked");
+    emit('buttonClicked');
  }
 };
 </script>
--- a/src/components/ui/CustomModal.vue
+++ b/src/components/ui/CustomModal.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue';

 const props = defineProps({
  isRedirectModal: Boolean,
 });

-const modalColor = ref<string>("white");
-const modalHeight = ref<string>("250px");
-const pFontSize = ref<string>("16px");
+const modalColor = ref<string>('white');
+const modalHeight = ref<string>('250px');
+const pFontSize = ref<string>('16px');

 if (props.isRedirectModal) {
-  modalColor.value = "rgba(251, 191, 36, 1)";
-  modalHeight.value = "150px";
-  pFontSize.value = "20px";
+  modalColor.value = 'rgba(251, 191, 36, 1)';
+  modalHeight.value = '150px';
+  pFontSize.value = '20px';
 }
 </script>

--- a/src/components/ui/Dropdown.vue
+++ b/src/components/ui/Dropdown.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T">
-import { ref, computed } from "vue";
-import { onClickOutside } from "@vueuse/core";
-import ChevronDown from "@/assets/chevronDown.svg";
+import { ref, computed } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import ChevronDown from '@/assets/chevronDown.svg';

-defineOptions({ name: "UiDropdown" });
+defineOptions({ name: 'UiDropdown' });

 export interface DropdownItem<T = any> {
  value: T;
@@ -19,25 +19,25 @@ const props = withDefaults(
    placeholder?: string;
    searchable?: boolean;
    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
    showIcon?: boolean;
  }>(),
  {
-    placeholder: "Selecione...",
+    placeholder: 'Selecione...',
    searchable: false,
    disabled: false,
-    size: "md",
+    size: 'md',
    showIcon: true,
  },
 );

 const emit = defineEmits<{
-  "update:modelValue": [value: T];
+  'update:modelValue': [value: T];
  change: [value: T];
 }>();

 const isOpen = ref(false);
-const searchQuery = ref("");
+const searchQuery = ref('');
 const dropdownRef = ref<HTMLElement | null>(null);

 const selectedItem = computed(() => {
@@ -57,23 +57,23 @@ const toggleDropdown = () => {
  if (!props.disabled) {
    isOpen.value = !isOpen.value;
    if (!isOpen.value) {
-      searchQuery.value = "";
+      searchQuery.value = '';
    }
  }
 };

 const selectItem = (item: DropdownItem<T>) => {
  if (!item.disabled) {
-    emit("update:modelValue", item.value);
-    emit("change", item.value);
+    emit('update:modelValue', item.value);
+    emit('change', item.value);
    isOpen.value = false;
-    searchQuery.value = "";
+    searchQuery.value = '';
  }
 };

 onClickOutside(dropdownRef, () => {
  isOpen.value = false;
-  searchQuery.value = "";
+  searchQuery.value = '';
 });
 </script>

--- a/src/components/ui/ErrorMessage.vue
+++ b/src/components/ui/ErrorMessage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-export type ErrorType = "error" | "warning" | "info";
+export type ErrorType = 'error' | 'warning' | 'info';

 const props = withDefaults(
  defineProps<{
@@ -9,16 +9,16 @@ const props = withDefaults(
    icon?: boolean;
  }>(),
  {
-    type: "error",
+    type: 'error',
    centered: true,
    icon: false,
  },
 );

 const colorClasses = {
-  error: "text-red-500",
-  warning: "text-amber-500",
-  info: "text-blue-500",
+  error: 'text-red-500',
+  warning: 'text-amber-500',
+  info: 'text-blue-500',
 };
 </script>

--- a/src/components/ui/FormCard.vue
+++ b/src/components/ui/FormCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-export type FormCardPadding = "sm" | "md" | "lg";
+export type FormCardPadding = 'sm' | 'md' | 'lg';

 const props = withDefaults(
  defineProps<{
@@ -8,7 +8,7 @@ const props = withDefaults(
    noBorder?: boolean;
  }>(),
  {
-    padding: "md",
+    padding: 'md',
    fullWidth: true,
    noBorder: false,
  },
--- a/src/components/ui/IconButton.vue
+++ b/src/components/ui/IconButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-export type IconButtonVariant = "primary" | "secondary" | "outline" | "ghost";
-export type IconButtonSize = "sm" | "md" | "lg";
-export type IconPosition = "left" | "right";
+export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+export type IconPosition = 'left' | 'right';

 const props = withDefaults(
  defineProps<{
@@ -14,9 +14,9 @@ const props = withDefaults(
    fullWidth?: boolean;
  }>(),
  {
-    variant: "outline",
-    size: "md",
-    iconPosition: "left",
+    variant: 'outline',
+    size: 'md',
+    iconPosition: 'left',
    disabled: false,
    fullWidth: false,
  },
@@ -28,7 +28,7 @@ const emit = defineEmits<{

 const handleClick = () => {
  if (!props.disabled) {
-    emit("click");
+    emit('click');
  }
 };
 </script>
--- a/src/components/ui/InfoTooltip.vue
+++ b/src/components/ui/InfoTooltip.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
+import { ref, onMounted } from 'vue';
+import { useFloating, arrow, offset, flip, shift } from '@floating-ui/vue';

 const props = withDefaults(
  defineProps<{
    text: string;
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: 'top' | 'bottom' | 'left' | 'right';
    iconSrc?: string;
    showOnHover?: boolean;
  }>(),
  {
-    placement: "right",
-    iconSrc: "",
+    placement: 'right',
+    iconSrc: '',
    showOnHover: true,
  },
 );
--- a/src/components/ui/LoadingComponent.vue
+++ b/src/components/ui/LoadingComponent.vue
@@ -12,7 +12,7 @@ const props = defineProps({
      <span
        class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] max-w-[20rem]"
      >
-        {{ props.title ? props.title : "Confirme em sua carteira" }}
+        {{ props.title ? props.title : 'Confirme em sua carteira' }}
      </span>
    </div>
    <div class="main-container max-w-md">
@@ -61,12 +61,12 @@ const props = defineProps({
  @apply text-white text-center;
 }

-input[type="number"] {
+input[type='number'] {
  -moz-appearance: textfield;
 }

-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
 }
 </style>
--- a/src/components/ui/LoadingState.vue
+++ b/src/components/ui/LoadingState.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import SpinnerComponent from "./SpinnerComponent.vue";
+import SpinnerComponent from './SpinnerComponent.vue';

 const props = withDefaults(
  defineProps<{
    message?: string;
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
    centered?: boolean;
    inline?: boolean;
  }>(),
  {
-    message: "Carregando...",
-    size: "md",
+    message: 'Carregando...',
+    size: 'md',
    centered: true,
    inline: false,
  },
 );

 const sizeMap = {
-  sm: { spinner: "4", text: "text-sm" },
-  md: { spinner: "6", text: "text-base" },
-  lg: { spinner: "8", text: "text-lg" },
+  sm: { spinner: '4', text: 'text-sm' },
+  md: { spinner: '6', text: 'text-base' },
+  lg: { spinner: '8', text: 'text-lg' },
 };
 </script>

--- a/src/components/ui/NetworkBadges.vue
+++ b/src/components/ui/NetworkBadges.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { getNetworkImage } from "@/utils/imagesPath";
-import type { NetworkConfig } from "@/model/NetworkEnum";
+import { computed } from 'vue';
+import { getNetworkImage } from '@/utils/imagesPath';
+import type { NetworkConfig } from '@/model/NetworkEnum';

 const props = withDefaults(
  defineProps<{
    networks: NetworkConfig[];
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
    showLabel?: boolean;
  }>(),
  {
-    size: "md",
+    size: 'md',
    showLabel: false,
  },
 );
--- a/src/components/ui/NetworkSelector.vue
+++ b/src/components/ui/NetworkSelector.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { Networks } from "@/config/networks";
-import type { NetworkConfig } from "@/model/NetworkEnum";
-import { getNetworkImage } from "@/utils/imagesPath";
-import Dropdown, { type DropdownItem } from "./Dropdown.vue";
+import { computed } from 'vue';
+import { Networks } from '@/config/networks';
+import type { NetworkConfig } from '@/model/NetworkEnum';
+import { getNetworkImage } from '@/utils/imagesPath';
+import Dropdown, { type DropdownItem } from './Dropdown.vue';

 const props = withDefaults(
  defineProps<{
    modelValue: NetworkConfig;
    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
    availableNetworks?: NetworkConfig[];
  }>(),
  {
    disabled: false,
-    size: "md",
+    size: 'md',
  },
 );

 const emit = defineEmits<{
-  "update:modelValue": [value: NetworkConfig];
+  'update:modelValue': [value: NetworkConfig];
  change: [value: NetworkConfig];
 }>();

@@ -32,8 +32,8 @@ const networkItems = computed((): DropdownItem<NetworkConfig>[] => {
 });

 const handleChange = (value: NetworkConfig) => {
-  emit("update:modelValue", value);
-  emit("change", value);
+  emit('update:modelValue', value);
+  emit('change', value);
 };
 </script>

--- a/src/components/ui/PageHeader.vue
+++ b/src/components/ui/PageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-export type HeaderSize = "sm" | "md" | "lg";
+export type HeaderSize = 'sm' | 'md' | 'lg';

 const props = withDefaults(
  defineProps<{
@@ -9,7 +9,7 @@ const props = withDefaults(
    centered?: boolean;
  }>(),
  {
-    size: "lg",
+    size: 'lg',
    centered: true,
  },
 );
--- a/src/components/ui/SpinnerComponent.vue
+++ b/src/components/ui/SpinnerComponent.vue
@@ -10,10 +10,10 @@ const getCustomClass = () => {
  return [
    `w-${props.width}`,
    `h-${props.height}`,
-    `fill-white`,
-    "text-gray-200",
-    "animate-spin",
-    "dark:text-gray-600",
+    'fill-white',
+    'text-gray-200',
+    'animate-spin',
+    'dark:text-gray-600',
  ];
 };
 </script>
--- a/src/components/ui/StatusBadge.vue
+++ b/src/components/ui/StatusBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue';

-export type StatusType = "open" | "expired" | "completed" | "pending";
+export type StatusType = 'open' | 'expired' | 'completed' | 'pending';

 const props = defineProps<{
  status: StatusType;
@@ -11,20 +11,20 @@ const props = defineProps<{
 const statusConfig = computed(() => {
  const configs: Record<StatusType, { text: string; color: string }> = {
    open: {
-      text: "Em Aberto",
-      color: "bg-amber-300",
+      text: 'Em Aberto',
+      color: 'bg-amber-300',
    },
    expired: {
-      text: "Expirado",
-      color: "bg-[#94A3B8]",
+      text: 'Expirado',
+      color: 'bg-[#94A3B8]',
    },
    completed: {
-      text: "Finalizado",
-      color: "bg-emerald-300",
+      text: 'Finalizado',
+      color: 'bg-emerald-300',
    },
    pending: {
-      text: "Pendente",
-      color: "bg-gray-300",
+      text: 'Pendente',
+      color: 'bg-gray-300',
    },
  };

--- a/src/components/ui/ToasterComponent.vue
+++ b/src/components/ui/ToasterComponent.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from "vue";
-import { useOnboard } from "@web3-onboard/vue";
-import { Networks } from "@/config/networks";
-import { useUser } from "@/composables/useUser";
+import { ref, computed, watch, onMounted } from 'vue';
+import { useOnboard } from '@web3-onboard/vue';
+import { Networks } from '@/config/networks';
+import { useUser } from '@/composables/useUser';

 const { connectedWallet } = useOnboard();
 const user = useUser();
@@ -25,7 +25,7 @@ const switchNetwork = async () => {
    if (connectedWallet.value && connectedWallet.value.provider) {
      const chainId = network.value.id.toString(16);
      await connectedWallet.value.provider.request({
-        method: "wallet_switchEthereumChain",
+        method: 'wallet_switchEthereumChain',
        params: [
          {
            chainId: `0x${chainId}`,
@@ -34,7 +34,7 @@ const switchNetwork = async () => {
      });
    }
  } catch (error) {
-    console.error("Failed to switch network:", error);
+    console.error('Failed to switch network:', error);
  }
 };

--- a/src/components/ui/TokenSelector.vue
+++ b/src/components/ui/TokenSelector.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { TokenEnum } from "@/model/NetworkEnum";
-import { getTokenImage } from "@/utils/imagesPath";
-import Dropdown, { type DropdownItem } from "./Dropdown.vue";
+import { computed } from 'vue';
+import { TokenEnum } from '@/model/NetworkEnum';
+import { getTokenImage } from '@/utils/imagesPath';
+import Dropdown, { type DropdownItem } from './Dropdown.vue';

 const props = withDefaults(
  defineProps<{
    modelValue: TokenEnum;
    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
  }>(),
  {
    disabled: false,
-    size: "md",
+    size: 'md',
  },
 );

 const emit = defineEmits<{
-  "update:modelValue": [value: TokenEnum];
+  'update:modelValue': [value: TokenEnum];
  change: [value: TokenEnum];
 }>();

@@ -30,8 +30,8 @@ const tokenItems = computed((): DropdownItem<TokenEnum>[] => {
 });

 const handleChange = (value: TokenEnum) => {
-  emit("update:modelValue", value);
-  emit("change", value);
+  emit('update:modelValue', value);
+  emit('change', value);
 };
 </script>

--- a/src/components/ui/VersionFooter.vue
+++ b/src/components/ui/VersionFooter.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const version = typeof __APP_VERSION__ !== "undefined" ? __APP_VERSION__ : "dev";
+const version =
+  typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev';
 </script>

 <template>
--- a/src/components/ui/WalletConnectButton.vue
+++ b/src/components/ui/WalletConnectButton.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { onClickOutside } from "@vueuse/core";
-import CustomButton from "./CustomButton.vue";
+import { ref, computed } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import CustomButton from './CustomButton.vue';

 const props = withDefaults(
  defineProps<{
    walletAddress: string | null;
-    variant?: "primary" | "secondary" | "outline";
+    variant?: 'primary' | 'secondary' | 'outline';
    showMenu?: boolean;
  }>(),
  {
-    variant: "primary",
+    variant: 'primary',
    showMenu: true,
  },
 );
@@ -29,7 +29,7 @@ const isConnected = computed(() => {
 });

 const formattedAddress = computed(() => {
-  if (!props.walletAddress) return "";
+  if (!props.walletAddress) return '';

  const address = props.walletAddress;
  const length = address.length;
@@ -40,17 +40,17 @@ const formattedAddress = computed(() => {
 });

 const handleConnect = () => {
-  emit("connect");
+  emit('connect');
 };

 const handleDisconnect = () => {
  menuOpen.value = false;
-  emit("disconnect");
+  emit('disconnect');
 };

 const handleViewTransactions = () => {
  menuOpen.value = false;
-  emit("viewTransactions");
+  emit('viewTransactions');
 };

 const toggleMenu = () => {