Add typing on components layer

Co-authored-by: geovanne97 <geovannessaraiva97@gmail.com>

src/blockchain/buyerMethods.ts

@@ -35,7 +35,7 @@ const addLock = async (depositId: BigNumber, amount: number): Promise<any> => {
 // Release lock
 const releaseLock = async (
   pixKey: string,
-  amount: Number,
+  amount: number,
   e2eId: string,
   lockId: string
 ): Promise<any> => {

src/blockchain/events.ts

@@ -65,13 +65,13 @@ const getValidDeposits = async (
         const mappedDeposit = await p2pContract.mapDeposits(
           deposit.args?.depositID
         );
-        let validDeposit = {};
+        let validDeposit: ValidDeposit | undefined = undefined;
 
         if (mappedDeposit.valid) {
           validDeposit = {
             blockNumber: deposit.blockNumber,
             depositID: deposit.args?.depositID,
-            remaining: formatEther(mappedDeposit.remaining),
+            remaining: Number(formatEther(mappedDeposit.remaining)),
             seller: mappedDeposit.seller,
             pixKey: mappedDeposit.pixTarget,
           };

src/blockchain/sellerMethods.ts

@@ -1,5 +1,4 @@
 import { getProvider } from "./provider";
-import { updateWalletStatus } from "./wallet";
 import { getTokenAddress, getP2PixAddress } from "./addresses";
 import { parseEther } from "ethers/lib/utils";
 
@@ -8,9 +7,6 @@ import { ethers } from "ethers";
 import p2pix from "../utils/smart_contract_files/P2PIX.json";
 import mockToken from "../utils/smart_contract_files/MockToken.json";
 
-// Seller Flow methods //
-
-// Approve Tokens
 const approveTokens = async (tokenQty: string): Promise<any> => {
   const provider = getProvider();
   const signer = provider.getSigner();
@@ -31,7 +27,6 @@ const approveTokens = async (tokenQty: string): Promise<any> => {
   return apprv;
 };
 
-// Add deposit
 const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
   const provider = getProvider();
 

src/components/BuyConfirmedComponent.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
 import ListingComponent from "@/components/ListingComponent.vue";
+import type { Event } from "ethers";
 
 // props
 const props = defineProps<{
-  lastWalletReleaseTransactions: any[];
-  tokenAmount: Number | undefined;
+  lastWalletReleaseTransactions: Event[];
+  tokenAmount: number | undefined;
 }>();
 
 // Emits

src/components/ListingComponent.vue

@@ -1,34 +1,33 @@
 <script setup lang="ts">
+import type { ValidDeposit } from "@/model/ValidDeposit";
 import { formatEther } from "@ethersproject/units";
+import type { Event } from "ethers";
 import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
-  walletTransactions: any[];
+  walletTransactions: (Event | ValidDeposit)[];
   isManageMode: boolean;
 }>();
 
-const itemsToShow = ref<any[]>([]);
+const itemsToShow = ref<(Event | ValidDeposit)[]>([]);
 
 // Methods
-const showInitialItems = () => {
+const isValidDeposit = (
+  deposit: Event | ValidDeposit
+): deposit is ValidDeposit => {
+  return (deposit as ValidDeposit).depositID !== undefined;
+};
+
+const showInitialItems = (): void => {
   itemsToShow.value = props.walletTransactions.slice(0, 3);
 };
 
-const formatEventsAmount = (amount: any) => {
-  try {
-    const formated = formatEther(amount);
-    return formated;
-  } catch {
-    return "";
-  }
-};
-
-const openEtherscanUrl = (url: string) => {
+const openEtherscanUrl = (url: string): void => {
   window.open(url, "_blank");
 };
 
-const loadMore = () => {
+const loadMore = (): void => {
   const itemsShowing = itemsToShow.value.length;
   itemsToShow.value?.push(
     ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
@@ -36,7 +35,7 @@ const loadMore = () => {
 };
 
 // watch props changes
-watch(props, async () => {
+watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
   if (itemsToShowQty == 0) showInitialItems();
   else
@@ -75,11 +74,11 @@ showInitialItems();
     <div
       class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
       v-for="(item, index) in itemsToShow"
-      :key="item.depositID"
+      :key="item.blockNumber"
     >
       <span class="last-release-info">
         {{
-          item?.args ? formatEventsAmount(item?.args.amount) : item?.remaining
+          isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount)
         }}
         BRZ
       </span>
@@ -90,7 +89,7 @@ showInitialItems();
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', item.depositID, index)"
+        @click="emit('cancelDeposit', (item as ValidDeposit).depositID, index)"
       >
         <span class="last-release-info">Cancelar</span>
         <img alt="Cancel image" src="@/assets/cancel.svg" />
@@ -98,21 +97,21 @@ showInitialItems();
 
       <span
         class="last-release-info"
-        v-if="item.event == 'DepositAdded' && !props.isManageMode"
+        v-if="(item as Event).event == 'DepositAdded' && !props.isManageMode"
       >
         {{ "Oferta" }}
       </span>
 
       <span
         class="last-release-info"
-        v-if="item.event == 'LockAdded' && !props.isManageMode"
+        v-if="(item as Event).event == 'LockAdded' && !props.isManageMode"
       >
         {{ "Reserva" }}
       </span>
 
       <span
         class="last-release-info"
-        v-if="item.event == 'LockReleased' && !props.isManageMode"
+        v-if="(item as Event).event == 'LockReleased' && !props.isManageMode"
       >
         {{ "Compra" }}
       </span>
@@ -120,7 +119,9 @@ showInitialItems();
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('withdrawDeposit', item.depositID, index)"
+        @click="
+          emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
+        "
       >
         <span class="last-release-info">Retirar</span>
         <img alt="Cancel image" src="@/assets/withdraw.svg" />
@@ -130,7 +131,9 @@ showInitialItems();
         v-if="!props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
         @click="
-          openEtherscanUrl(`https://etherscan.io/tx/${item?.transactionHash}`)
+          openEtherscanUrl(
+            `https://etherscan.io/tx/${(item as Event)?.transactionHash}`
+          )
         "
       >
         <span class="last-release-info">Etherscan</span>

src/components/QrCodeComponent.vue

@@ -24,19 +24,20 @@ const pixQrCode = pix({
   pixKey: props.pixTarget ?? "",
   value: props.tokenValue,
 });
+
 pixQrCode.base64QrCode().then((code: string) => {
   qrCode.value = code;
 });
 
 qrCodePayload.value = pixQrCode.payload();
 
-const handleInputEvent = (event: any) => {
+const handleInputEvent = async (event: any): Promise<void> => {
   const { value } = event.target;
   e2eId.value = value;
-  validatePix();
+  await validatePix();
 };
 
-const validatePix = async () => {
+const validatePix = async (): Promise<void> => {
   if (e2eId.value == "") {
     isPixValid.value = false;
     isCodeInputEmpty.value = true;

src/components/SearchComponent.vue

@@ -7,6 +7,7 @@ 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";
 
 // Store reference
 const etherStore = useEtherStore();
@@ -19,25 +20,25 @@ const {
 } = storeToRefs(etherStore);
 
 // Reactive state
-const tokenValue = ref(0);
-const enableConfirmButton = ref(false);
-const enableWalletButton = ref(false);
-const hasLiquidity = ref(true);
-const validDecimals = ref(true);
-const selectedGoerliDeposit = ref();
-const selectedMumbaiDeposit = ref();
+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 selectedGoerliDeposit = ref<ValidDeposit>();
+const selectedMumbaiDeposit = ref<ValidDeposit>();
 
 // Emits
 const emit = defineEmits(["tokenBuy"]);
 
 // Blockchain methods
-const connectAccount = async () => {
+const connectAccount = async (): Promise<void> => {
   await connectProvider();
 
   enableOrDisableConfirmButton();
 };
 
-const emitConfirmButton = () => {
+const emitConfirmButton = (): void => {
   const selectedDeposit =
     networkName.value == NetworkEnum.ethereum
       ? selectedGoerliDeposit.value
@@ -46,7 +47,7 @@ const emitConfirmButton = () => {
 };
 
 // Debounce methods
-const handleInputEvent = (event: any) => {
+const handleInputEvent = (event: any): void => {
   const { value } = event.target;
 
   tokenValue.value = Number(value);
@@ -63,7 +64,7 @@ const handleInputEvent = (event: any) => {
 
 // Enable button methods
 // Check if has more than 2 decimal places
-const decimalCount = (num: Number) => {
+const decimalCount = (num: number): number => {
   const numStr = String(num);
   if (numStr.includes(".")) {
     return numStr.split(".")[1].length;
@@ -72,10 +73,10 @@ const decimalCount = (num: Number) => {
 };
 
 // Verify if there is a valid deposit to buy
-const verifyLiquidity = () => {
+const verifyLiquidity = (): void => {
   enableConfirmButton.value = false;
-  selectedGoerliDeposit.value = null;
-  selectedMumbaiDeposit.value = null;
+  selectedGoerliDeposit.value = undefined;
+  selectedMumbaiDeposit.value = undefined;
 
   if (tokenValue.value <= 0) {
     enableWalletButton.value = false;
@@ -111,7 +112,7 @@ const enableOrDisableConfirmButton = (): void => {
   else enableConfirmButton.value = false;
 };
 
-watch(networkName, async () => {
+watch(networkName, (): void => {
   enableOrDisableConfirmButton();
 });
 </script>

src/components/SellerSteps/SellerSearchComponent.vue

@@ -4,16 +4,16 @@ import CustomButton from "../../components/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 
 // Reactive state
-const tokenValue = ref(0);
-const enableSelectButton = ref(false);
-const hasLiquidity = ref(true);
-const validDecimals = ref(true);
+const tokenValue = ref<number>(0);
+const enableSelectButton = ref<boolean>(false);
+const hasLiquidity = ref<boolean>(true);
+const validDecimals = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["tokenBuy"]);
 
 // Debounce methods
-const handleInputEvent = (event: any) => {
+const handleInputEvent = (event: any): void => {
   const { value } = event.target;
 
   tokenValue.value = Number(value);
@@ -28,7 +28,7 @@ const handleInputEvent = (event: any) => {
 
 // Enable button methods
 // Check if has more than 2 decimal places
-const decimalCount = (num: Number) => {
+const decimalCount = (num: number): number => {
   const numStr = String(num);
   if (numStr.includes(".")) {
     return numStr.split(".")[1].length;

src/components/SellerSteps/WantSellComponent.vue

@@ -7,15 +7,15 @@ import { debounce } from "@/utils/debounce";
 const offer = ref<string | number>("");
 const pixKey = ref<string>("");
 
-const enableSelectButton = ref(false);
-const hasLiquidity = ref(true);
-const validDecimals = ref(true);
+const enableSelectButton = ref<boolean>(false);
+const hasLiquidity = ref<boolean>(true);
+const validDecimals = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["approveTokens"]);
 
 // Debounce methods
-const handleInputEvent = (event: any) => {
+const handleInputEvent = (event: any): void => {
   const { value } = event.target;
 
   offer.value = Number(value);
@@ -30,7 +30,7 @@ const handleInputEvent = (event: any) => {
 
 // Enable button methods
 // Check if has more than 2 decimal places
-const decimalCount = (num: Number) => {
+const decimalCount = (num: Number): number => {
   const numStr = String(num);
   if (numStr.includes(".")) {
     return numStr.split(".")[1].length;

src/components/TopBar.vue

@@ -19,8 +19,8 @@ const currencyMenuOpenToggle = ref<boolean>(false);
 const currencyMenuHoverToggle = ref<boolean>(false);
 
 //Methods
-const connectMetaMask = () => {
-  connectProvider();
+const connectMetaMask = async (): Promise<void> => {
+  await connectProvider();
 };
 
 const formatWalletAddress = (): string => {
@@ -33,28 +33,28 @@ const formatWalletAddress = (): string => {
   return `${initialText}...${finalText}`;
 };
 
-const formatWalletBalance = (): String => {
+const formatWalletBalance = (): string => {
   const fixed = Number(balance.value);
   return fixed.toFixed(2);
 };
 
-const disconnectUser = () => {
+const disconnectUser = (): void => {
   etherStore.setWalletAddress("");
   closeMenu();
   window.location.reload();
 };
 
-const closeMenu = () => {
+const closeMenu = (): void => {
   menuOpenToggle.value = false;
 };
 
-const networkChange = async (network: NetworkEnum) => {
+const networkChange = async (network: NetworkEnum): Promise<void> => {
   currencyMenuOpenToggle.value = false;
   const change = await requestNetworkChange(network);
   if (change) etherStore.setNetworkName(network);
 };
 
-const getNetworkImage = (networkName: NetworkEnum) => {
+const getNetworkImage = (networkName: NetworkEnum): string => {
   let validImages = {
     Ethereum: ethereumImage,
     Polygon: polygonImage,

src/model/ValidDeposit.ts

@@ -3,7 +3,7 @@ import type { BigNumber } from "ethers";
 export type ValidDeposit = {
   depositID: BigNumber;
   blockNumber: number;
-  remaining: string;
+  remaining: number;
   seller: string;
   pixKey: string;
   pixTarget?: string;

src/utils/networkLiquidity.ts

@@ -1,8 +1,10 @@
+import type { ValidDeposit } from "@/model/ValidDeposit";
+
 const verifyNetworkLiquidity = (
   tokenValue: number,
   walletAddress: string,
-  validDepositList: any[]
-) => {
+  validDepositList: ValidDeposit[]
+): ValidDeposit | undefined => {
   const element = validDepositList.find((element) => {
     const remaining = element.remaining;
     if (

src/views/ManageBidsView.vue

@@ -2,7 +2,7 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent.vue";
-import type { BigNumber, Event } from "ethers";
+import type { BigNumber } from "ethers";
 import { ref, watch } from "vue";
 import { cancelDeposit, withdrawDeposit } from "@/blockchain/buyerMethods";
 import { listValidDepositTransactionsByWalletAddress } from "@/blockchain/wallet";