refactor Validation to be LoadingComponent and receive props to be reusable

src/components/LoadingComponent.vue

@@ -1,10 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// prop
+const props = defineProps({
+  title: String,
+  message: String,
+});
+</script>
+
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-bold text-3xl max-w-[29rem]"
-        >Confirme em sua carteira</span
-      >
+      <span class="text font-bold text-3xl max-w-[29rem]">{{
+        props.title ? props.title : "Confirme em sua carteira"
+      }}</span>
     </div>
     <div class="blur-container w-[26rem]">
       <div
@@ -20,7 +27,7 @@
             height="48"
           />
           <span class="text-black font-medium text-sm px-12 mt-4">
-            A transação está sendo enviada para a rede
+            {{ $props.message }}
           </span>
         </div>
       </div>

src/components/SearchComponent.vue

@@ -52,6 +52,7 @@ const decimalCount = (num: Number) => {
   }
   return 0;
 };
+
 // Verify if there is a valid deposit to buy
 const verifyLiquidity = () => {
   enableSelectButton.value = false;

src/store/ether.ts

@@ -16,7 +16,7 @@ export const useEtherStore = defineStore("ether", {
     // Locks 'released' na blockchain
     locksReleasedList: [] as any[],
     // Locks expirados na blockchain
-    locksExpiredList: [] as any[]
+    locksExpiredList: [] as any[],
   }),
   actions: {
     setWalletAddress(walletAddress: string) {

src/utils/blockchain.ts

@@ -32,7 +32,11 @@ const splitTokens = async () => {
   if (!provider) return;
 
   const signer = provider.getSigner();
-  const tokenContract = new ethers.Contract(addresses.token, mockToken.abi, signer);
+  const tokenContract = new ethers.Contract(
+    addresses.token,
+    mockToken.abi,
+    signer
+  );
 
   for (let i = 0; i < wallets.length; i++) {
     const tx = await tokenContract.transfer(
@@ -45,7 +49,9 @@ const splitTokens = async () => {
 };
 
 // get wallet transactions
-const listTransactionByWalletAddress = async (walletAddress: string): Promise<any[] | undefined> => {
+const listTransactionByWalletAddress = async (
+  walletAddress: string
+): Promise<any[] | undefined> => {
   const provider = getProvider();
   if (!provider) return;
 
@@ -59,12 +65,16 @@ const listTransactionByWalletAddress = async (walletAddress: string): Promise<an
   const eventsAddedLocks = await p2pContract.queryFilter(filterAddedLocks);
 
   const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
-  const eventsReleasedLocks = await p2pContract.queryFilter(filterReleasedLocks);
+  const eventsReleasedLocks = await p2pContract.queryFilter(
+    filterReleasedLocks
+  );
 
-  return [...eventsDeposits, ...eventsAddedLocks, ...eventsReleasedLocks].sort((a, b) => {
-    return b.blockNumber - a.blockNumber
-  })
-}
+  return [...eventsDeposits, ...eventsAddedLocks, ...eventsReleasedLocks].sort(
+    (a, b) => {
+      return b.blockNumber - a.blockNumber;
+    }
+  );
+};
 
 // Update events at store methods
 const updateDepositAddedEvents = async () => {
@@ -82,7 +92,7 @@ const updateDepositAddedEvents = async () => {
   const filterDeposits = p2pContract.filters.DepositAdded(null);
   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
   etherStore.setDepositsAddedList(eventsDeposits);
-}
+};
 
 const updateLockAddedEvents = async () => {
   const etherStore = useEtherStore();
@@ -99,7 +109,7 @@ const updateLockAddedEvents = async () => {
   const filterLocks = p2pContract.filters.LockAdded(null);
   const eventsLocks = await p2pContract.queryFilter(filterLocks);
   etherStore.setLocksAddedList(eventsLocks);
-}
+};
 
 const updateLockReleasedEvents = async () => {
   const etherStore = useEtherStore();
@@ -116,7 +126,7 @@ const updateLockReleasedEvents = async () => {
   const filterLocks = p2pContract.filters.LockReleased(null);
   const eventsLocks = await p2pContract.queryFilter(filterLocks);
   etherStore.setLocksReleasedList(eventsLocks);
-}
+};
 
 // Provider methods
 const connectProvider = async () => {
@@ -155,11 +165,7 @@ const addDeposit = async (tokenQty: string, pixKey: string) => {
     mockToken.abi,
     signer
   );
-  const p2pContract = new ethers.Contract(
-    addresses.p2pix, 
-    p2pix.abi, 
-    signer
-  );
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
   // First get the approval
   const apprv = await tokenContract.approve(
@@ -230,29 +236,28 @@ const mapLocks = async (lockId: string) => {
 
   console.log(lock);
 
-  console.log("Expiration block = ", Number(lock.expirationBlock))
+  console.log("Expiration block = ", Number(lock.expirationBlock));
   return lock;
 };
 
 // Releases lock by specific ID and other additional data
-const releaseLock = async (pixKey: string, amount: string, e2eId: Number, lockId: string) => {
+const releaseLock = async (
+  pixKey: string,
+  amount: string,
+  e2eId: Number,
+  lockId: string
+) => {
   const provider = getProvider();
   if (!provider) return;
 
-  const mockBacenSigner = new ethers.Wallet("0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80")
+  const mockBacenSigner = new ethers.Wallet(
+    "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
+  );
 
   const messageToSign = ethers.utils.solidityKeccak256(
-    [
-      "string", 
-      "uint256", 
-      "uint256"
-    ],
-    [
-      pixKey,
-      formatEther(amount),
-      e2eId
-    ]
-  )
+    ["string", "uint256", "uint256"],
+    [pixKey, formatEther(amount), e2eId]
+  );
 
   const messageHashBytes = ethers.utils.arrayify(messageToSign);
   const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
@@ -261,19 +266,12 @@ const releaseLock = async (pixKey: string, amount: string, e2eId: Number, lockId
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  const release = await p2pContract.release(
-    lockId,
-    e2eId,
-    sig.r,
-    sig.s,
-    sig.v
-  )
-  release.wait()
+  const release = await p2pContract.release(lockId, e2eId, sig.r, sig.s, sig.v);
+  release.wait();
 
   updateLockReleasedEvents();
 };
 
-
 // Formatting methods
 const formatEther = (num: string) => {
   const formattedNum = ethers.utils.parseEther(num);
@@ -295,5 +293,5 @@ export default {
   formatBigNumber,
   addLock,
   mapLocks,
-  releaseLock
+  releaseLock,
 };

src/views/HomeView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SearchComponent from "../components/SearchComponent.vue";
-import ValidationComponent from "../components/ValidationComponent.vue";
+import ValidationComponent from "../components/LoadingComponent.vue";
+import ListComponent from "@/components/ListComponent.vue";
 import blockchain from "../utils/blockchain";
 import { ref } from "vue";
 
@@ -15,15 +16,17 @@ import { storeToRefs } from "pinia";
 enum Step {
   Search,
   Buy,
-  List
+  List,
 }
 
 // States
 const etherStore = useEtherStore();
-const { loadingLock } = storeToRefs(etherStore);
+const { loadingLock, walletAddress } = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<string>("");
-const tokens = ref<number>();
+const tokenAmmount = ref<number>();
+const loadingRelease = ref<Boolean>(false);
+const lastWalletTransactions = ref<any[] | undefined>([]);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
@@ -33,7 +36,7 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   await blockchain
     .mapDeposits(depositId)
     .then((deposit) => (depositDetail = deposit));
-  tokens.value = tokenValue;
+  tokenAmmount.value = tokenValue;
   pixTarget.value = depositDetail?.pixTarget;
 
   // Makes lock with deposit ID and the Amount
@@ -63,6 +66,19 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     // Valor = tokenValue
   }
 };
+
+const releaseTransaction = async ({ pixE2Eid }: any) => {
+  console.log("release: ", pixE2Eid);
+  flowStep.value = Step.List;
+  loadingRelease.value = true;
+
+  lastWalletTransactions.value =
+    await blockchain.listTransactionByWalletAddress(
+      walletAddress.value.toLowerCase()
+    );
+
+  setTimeout(() => (loadingRelease.value = false), 2000);
+};
 </script>
 
 <template>
@@ -73,17 +89,22 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   <div v-if="flowStep == Step.Buy">
     <QrCodeComponent
       :pixTarget="pixTarget"
-      :tokenValue="tokens"
+      :tokenValue="tokenAmmount"
+      @pix-validated="releaseTransaction"
       v-if="!loadingLock"
     />
-    <ValidationComponent v-if="loadingLock" />
+    <ValidationComponent
+      v-if="loadingLock"
+      :message="'A transação está sendo enviada para a rede'"
+    />
+  </div>
+  <div v-if="flowStep == Step.List">
+    <ListComponent v-if="!loadingRelease" :tokenAmmount="tokenAmmount" />
+    <ValidationComponent
+      v-if="loadingRelease"
+      :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
+    />
   </div>
-  <Suspense>
-    <ListComponent v-if="(flowStep == Step.List)" :tokenAmmount="tokens" />
-    <template #fallback>
-      Carregando...
-    </template>
-  </Suspense>
 </template>
 
 <style scoped></style>