Fix unexpected behavior from listing transactions and approve tokens

Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>

src/blockchain/events.ts

@@ -65,7 +65,7 @@ const getValidDeposits = async (
         const mappedDeposit = await p2pContract.mapDeposits(
           deposit.args?.depositID
         );
-        let validDeposit: ValidDeposit | undefined = undefined;
+        let validDeposit: ValidDeposit | null = null;
 
         if (mappedDeposit.valid) {
           validDeposit = {
@@ -79,10 +79,9 @@ const getValidDeposits = async (
 
         return validDeposit;
       })
-      .filter((deposit) => deposit)
   );  
 
-  return depositList as ValidDeposit[];
+  return depositList.filter((deposit) => deposit) as ValidDeposit[];
 };
 
 export { getValidDeposits, getNetworksLiquidity };

src/components/SearchComponent.vue

@@ -53,7 +53,7 @@ const handleInputEvent = (event: any): void => {
 
   tokenValue.value = Number(value);
 
-  if (decimalCount(tokenValue.value) > 2) {
+  if (decimalCount(String(tokenValue.value)) > 2) {
     validDecimals.value = false;
     enableConfirmButton.value = false;
     return;

src/components/SellerSteps/WantSellComponent.vue

@@ -11,7 +11,7 @@ import { connectProvider } from "@/blockchain/provider";
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 
-const offer = ref<string | number>("");
+const offer = ref<string>("");
 const pixKey = ref<string>("");
 
 const enableSelectButton = ref<boolean>(false);
@@ -25,7 +25,7 @@ const emit = defineEmits(["approveTokens"]);
 const handleInputEvent = (event: any): void => {
   const { value } = event.target;
 
-  offer.value = Number(value);
+  offer.value = value;
 
   if (decimalCount(offer.value) > 2) {
     validDecimals.value = false;
@@ -35,7 +35,7 @@ const handleInputEvent = (event: any): void => {
   validDecimals.value = true;
 };
 
-const handleButtonClick = async (): Promise<void> => {
+const handleButtonClick = async (offer: string, pixKey: string): Promise<void> => {
   if (walletAddress.value) emit("approveTokens", { offer, pixKey });
   else await connectProvider();
 };
@@ -102,7 +102,7 @@ const handleButtonClick = async (): Promise<void> => {
       </div>
       <CustomButton
         :text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'"
-        @buttonClicked="handleButtonClick()"
+        @buttonClicked="handleButtonClick(offer, pixKey)"
       />
     </div>
   </div>

src/store/ether.ts

@@ -9,6 +9,8 @@ export const useEtherStore = defineStore("ether", {
     balance: "",
     networkName: NetworkEnum.ethereum,
     loadingLock: false,
+    loadingWalletTransactionHistory: false,
+    loadingWalletBids: false,
     sellerView: false,
     // Depósitos válidos para compra GOERLI
     depositsValidListGoerli: [] as ValidDeposit[],
@@ -41,6 +43,12 @@ export const useEtherStore = defineStore("ether", {
     setSellerView(sellerView: boolean) {
       this.sellerView = sellerView;
     },
+    setLoadingWalletTransactionHistory(loadingWalletTransactionHistory: boolean) {
+      this.loadingWalletTransactionHistory = loadingWalletTransactionHistory;
+    },
+    setLoadingWalletBids(loadingWalletBids: boolean) {
+      this.loadingWalletBids = loadingWalletBids;
+    },
     setDepositsValidListGoerli(depositsValidList: ValidDeposit[]) {
       this.depositsValidListGoerli = depositsValidList;
     },

src/utils/decimalCount.ts

@@ -1,5 +1,4 @@
-export const decimalCount = (num: number): number => {
+export const decimalCount = (numStr: string): number => {
-  const numStr = String(num);
   if (numStr.includes(".")) {
     return numStr.split(".")[1].length;
   }

src/views/ManageBidsView.vue

@@ -3,24 +3,25 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent.vue";
 import type { BigNumber } from "ethers";
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { cancelDeposit, withdrawDeposit } from "@/blockchain/buyerMethods";
 import { listValidDepositTransactionsByWalletAddress } from "@/blockchain/wallet";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 
 const etherStore = useEtherStore();
 
-const { walletAddress, networkName } = storeToRefs(etherStore);
+const { walletAddress, networkName, loadingWalletBids } = storeToRefs(etherStore);
 const depositList = ref<ValidDeposit[]>([]);
 
-if (walletAddress.value) {
+onMounted(async () => {
+  if (walletAddress.value) {
   const walletDeposits = await listValidDepositTransactionsByWalletAddress(
     walletAddress.value
   );
   if (walletDeposits) {
     depositList.value = walletDeposits;
   }
-}
+}})
 
 const handleCancelDeposit = async (depositID: BigNumber, index: number) => {
   const response = await cancelDeposit(depositID);

src/views/SellerView.vue

@@ -19,16 +19,16 @@ etherStore.setSellerView(true);
 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);
 
-const offerValue = ref<number>();
+const offerValue = ref<string>("");
 const pixKeyBuyer = ref<string>("");
 
 // Verificar tipagem
-const approveOffer = async (args: { offer: number; pixKey: string }) => {
+const approveOffer = async (args: { offer: string; pixKey: string }) => {
   loading.value = true;
   try {
     offerValue.value = args.offer;
     pixKeyBuyer.value = args.pixKey;
-    await approveTokens(String(offerValue.value));
+    await approveTokens(args.offer);
     flowStep.value = Step.Network;
     loading.value = false;
   } catch (err) {