From fc508734a225db81f88aee0e7cfd177a39dcc723 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 25 Nov 2022 20:27:57 -0300
Subject: [PATCH] remove implementation ofsearch by money and only allow to
 search by token ammount

---
 src/components/CustomButton.vue    |  10 +--
 src/components/SearchComponent.vue | 123 ++++++++++++++++-------------
 src/utils/blockchain.ts            |  55 ++++++++-----
 src/utils/debounce.ts              |  16 ++--
 src/views/HomeView.vue             |   9 ++-
 src/views/MockView.vue             |  70 ++++++----------
 6 files changed, 147 insertions(+), 136 deletions(-)

diff --git a/src/components/CustomButton.vue b/src/components/CustomButton.vue
index 212fbf3..d459688 100644
--- a/src/components/CustomButton.vue
+++ b/src/components/CustomButton.vue
@@ -4,18 +4,18 @@ const props = defineProps({
   isDisabled: Boolean,
 });
 
-const emit = defineEmits(["clicked"]);
+const emit = defineEmits(["buttonClicked"]);
 </script>
 
 <template>
   <button
     type="button"
     class="button"
-    @click="emit('clicked')"
-    v-bind:class="{ 'opacity-70': isDisabled }"
-    :disabled="isDisabled"
+    @click="emit('buttonClicked')"
+    v-bind:class="{ 'opacity-70': props.isDisabled }"
+    :disabled="props.isDisabled ? props.isDisabled : false"
   >
-    {{ text }}
+    {{ props.text }}
   </button>
 </template>
 
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 5d8b01a..075099d 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -2,90 +2,85 @@
 import { ref } from "vue";
 import CustomButton from "../components/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
-import { ethers } from "ethers";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import blockchain from "../utils/blockchain";
 
-const TAX_CONVERSION = 1.005
 const etherStore = useEtherStore();
 
-const { depositList } = storeToRefs(etherStore);
+const { walletAddress, depositList } = storeToRefs(etherStore);
 
-const searchClick = () => {
-  console.log("pass the deposit and token value ammount to next screen")
-};
-
-const valueToToken = ref<Number>(0);
+const tokenValue = ref(0);
 const enableSelectButton = ref(false);
 const hasLiquidity = ref(true);
 const selectedDeposit = ref();
 
-const valueConversion = (event: any) => {
-  const { value } = event.target
+const handleInputEvent = (event: any) => {
+  const { value } = event.target;
 
-  valueToToken.value =  Number(value) / TAX_CONVERSION
+  tokenValue.value = Number(value);
+  verifyLiquidity();
+};
 
+const verifyLiquidity = () => {
   enableSelectButton.value = false;
   selectedDeposit.value = null;
 
-  depositList.value.forEach((deposit) => {
-    const p2pixTokenValue = blockchain.verifyDepositAmmount(deposit.args.amount);
+  if (!walletAddress.value) return;
 
-    if(valueToToken.value!! <= Number(p2pixTokenValue) && valueToToken.value!! != 0){
+  depositList.value.forEach((deposit) => {
+    const p2pixTokenValue = blockchain.verifyDepositAmmount(
+      deposit.args.amount
+    );
+
+    if (
+      tokenValue.value!! <= Number(p2pixTokenValue) &&
+      tokenValue.value!! != 0
+    ) {
       enableSelectButton.value = true;
       hasLiquidity.value = true;
       selectedDeposit.value = deposit;
       return;
     }
-  })
+  });
 
-  if(!enableSelectButton.value){
-    hasLiquidity.value = false
+  if (!enableSelectButton.value) {
+    hasLiquidity.value = false;
   }
-}
+};
+
+const emit = defineEmits(["tokenBuy"]);
 </script>
 
 <template>
   <div class="page">
     <div class="text-container">
       <span class="text font-extrabold text-5xl max-w-[29rem]"
-        >Adquira crypto com apenas um Pix</span
+        >Adquira cripto com apenas um Pix</span
       >
       <span class="text font-medium text-base max-w-[28rem]"
-        >Digite um valor, selecione uma oferta, conecta sua carteira e receba a
-        crypto após realizar o Pix</span
+        >Digite um valor, confira a oferta, conecte sua carteira e receba os
+        tokens após realizar o Pix</span
       >
     </div>
     <div
       class="flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-1/3 mt-10"
     >
-      <div
-        class="flex justify-between w-full bg-white px-8 py-5 rounded-lg border-y-10 relative gap-2"
-      >
-        <p class="text-xl font-normal text-gray-900" v-if="valueToToken != undefined && valueToToken != 0">R$</p>
-        <input
-          type="number"
-          class="border-none outline-none text-lg text-gray-900 w-full"
-          v-bind:class="{ 'font-semibold': valueToToken != undefined, 'text-xl': valueToToken != undefined}"
-          placeholder="Digite o valor que deseja pagar"
-          @input="debounce(valueConversion, 500)($event)"
-          step=".01"
-        />
-        <p class="text-xl font-normal text-gray-900" v-if="valueToToken == undefined || valueToToken == 0">R$</p>
-      </div>
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
-        <div
-          class="bg-emerald-400 px-3 py-2.5 rounded-lg absolute bottom-position w-8 h-8"
-        >
-          <img alt="Ethereum image" src="@/assets/arrow.svg"/>
-        </div>
-
         <div class="flex justify-between w-full items-center">
-          <p class="text-3xl text-gray-900">{{valueToToken.toFixed(3)}}</p>
-          <div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full">
+          <input
+            type="number"
+            class="border-none outline-none text-lg text-gray-900 w-auto"
+            v-bind:class="{
+              'font-semibold': tokenValue != undefined,
+              'text-xl': tokenValue != undefined,
+            }"
+            @input="debounce(handleInputEvent, 500)($event)"
+            step=".01"
+          />
+          <div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full w-fit">
             <img alt="Ethereum image" class="mr-3" src="@/assets/brz.svg" />
             <p class="text-gray-900 text-lg">BRZ</p>
           </div>
@@ -93,20 +88,40 @@ const valueConversion = (event: any) => {
 
         <div class="custom-divide py-2"></div>
         <div class="flex justify-between pt-2" v-if="hasLiquidity">
-          <p class="text-gray-500 font-normal text-sm  w-fit">~ ETH 0,00 (+0,121%)</p>
+          <p class="text-gray-500 font-normal text-sm w-auto">
+            ~ R$ {{ tokenValue.toFixed(2) }}
+          </p>
           <div class="flex gap-2">
-            <img alt="Polygon image" src="@/assets/polygon.svg" width="24px" height="24px"/>
-            <img alt="Ethereum image" src="@/assets/ethereum.svg" width="24px" height="24px"/>
+            <img
+              alt="Polygon image"
+              src="@/assets/polygon.svg"
+              width="24"
+              height="24"
+            />
+            <img
+              alt="Ethereum image"
+              src="@/assets/ethereum.svg"
+              width="24"
+              height="24"
+            />
           </div>
         </div>
         <div class="flex pt-2 justify-center" v-if="!hasLiquidity">
-          <span class="text-red-500 font-normal text-sm">Atualmente não há liquidez nas redes para sua demanda</span>
+          <span class="text-red-500 font-normal text-sm"
+            >Atualmente não há liquidez nas redes para sua demanda</span
+          >
         </div>
       </div>
       <CustomButton
-        :text="'Selecionar Oferta'"
+        v-if="!walletAddress"
+        :text="'Conectar carteira'"
+        @buttonClicked="blockchain.connectProvider()"
+      />
+      <CustomButton
+        v-if="walletAddress"
+        :text="'Confirmar compra'"
         :is-disabled="!enableSelectButton"
-        @clicked="searchClick()"
+        @buttonClicked="emit('tokenBuy')"
       />
     </div>
   </div>
@@ -135,12 +150,12 @@ const valueConversion = (event: any) => {
   @apply text-gray-800 text-center;
 }
 
-input[type='number'] {
-    -moz-appearance:textfield;
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
 }
 </style>
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 6fd4214..e8ecb20 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -6,7 +6,7 @@ import mockToken from "./smart_contract_files/MockToken.json";
 import p2pix from "./smart_contract_files/P2PIX.json";
 import addresses from "./smart_contract_files/localhost.json";
 
-import { wallets } from "./smart_contract_files/wallets.json"
+import { wallets } from "./smart_contract_files/wallets.json";
 
 const updateWalletStatus = async (walletAddress: string) => {
   const etherStore = useEtherStore();
@@ -44,7 +44,7 @@ const connectProvider = async () => {
   const filter = p2pContract.filters.DepositAdded(null);
   const events = await p2pContract.queryFilter(filter);
 
-  console.log(events)
+  console.log(events);
   etherStore.setDepositList(events);
 
   connection.on("accountsChanged", (accounts: string[]) => {
@@ -60,12 +60,14 @@ const splitTokens = async () => {
   const signer = provider.getSigner();
   const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
 
-  for (var i = 0; i < wallets.length; i++){
-    const tx = await contract.transfer(wallets[i], ethers.utils.parseEther("4000000.0"));
-    await tx.wait()
+  for (let i = 0; i < wallets.length; i++) {
+    const tx = await contract.transfer(
+      wallets[i],
+      ethers.utils.parseEther("4000000.0")
+    );
+    await tx.wait();
     updateWalletStatus(etherStore.walletAddress);
   }
-  
 };
 
 const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
@@ -75,16 +77,26 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
 
   const signer = provider.getSigner();
 
-  const tokenContract = new ethers.Contract(addresses.token, mockToken.abi, signer);
+  const tokenContract = new ethers.Contract(
+    addresses.token,
+    mockToken.abi,
+    signer
+  );
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
   // first get the approval
-  const apprv = await tokenContract.approve(addresses.p2pix, ethers.utils.parseEther(tokenQty));
+  const apprv = await tokenContract.approve(
+    addresses.p2pix,
+    ethers.utils.parseEther(tokenQty)
+  );
   await apprv.wait();
 
-
   // deposit
-  const deposit = await p2pContract.deposit(addresses.token, ethers.utils.parseEther(tokenQty), pixKey);
+  const deposit = await p2pContract.deposit(
+    addresses.token,
+    ethers.utils.parseEther(tokenQty),
+    pixKey
+  );
   await deposit.wait();
 
   updateWalletStatus(etherStore.walletAddress);
@@ -92,13 +104,11 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
   const filter = p2pContract.filters.DepositAdded(null);
   const events = await p2pContract.queryFilter(filter);
 
-  console.log(events)
+  console.log(events);
 
   etherStore.setDepositList(events);
-
 };
 
-
 const countDeposit = async () => {
   const provider = getProvider();
   if (!provider) return;
@@ -108,7 +118,7 @@ const countDeposit = async () => {
 
   const count = await contract.depositCount();
 
-  console.log(Number(count))
+  console.log(Number(count));
 };
 
 const mapDeposits = async (depositId: BigNumber) => {
@@ -120,7 +130,7 @@ const mapDeposits = async (depositId: BigNumber) => {
 
   const deposit = await contract.mapDeposits(depositId);
 
-  console.log(deposit)
+  console.log(deposit);
 };
 
 const formatEther = (balance: string) => {
@@ -129,9 +139,8 @@ const formatEther = (balance: string) => {
 };
 
 const verifyDepositAmmount = (ammountBigNumber: BigNumber): string => {
-  return ethers.utils.formatEther(ammountBigNumber)
-}
-
+  return ethers.utils.formatEther(ammountBigNumber);
+};
 
 const getProvider = (): ethers.providers.Web3Provider | null => {
   const window_ = window as any;
@@ -142,4 +151,12 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
   return new ethers.providers.Web3Provider(connection);
 };
 
-export default { connectProvider, formatEther, splitTokens, mockDeposit, countDeposit, mapDeposits, verifyDepositAmmount };
+export default {
+  connectProvider,
+  formatEther,
+  splitTokens,
+  mockDeposit,
+  countDeposit,
+  mapDeposits,
+  verifyDepositAmmount,
+};
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 2079277..8da2c6e 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,9 +1,9 @@
 export const debounce = (func: any, delay: number) => {
-    let timer: any = null
-    return function (this: unknown, ...args: any) {
-      clearTimeout(timer)
-      timer = setTimeout(() => {
-        func.apply(this, args)
-      }, delay) 
-    }
-  }
\ No newline at end of file
+  let timer: any = null;
+  return function (this: unknown, ...args: any) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+};
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ad8cc93..546bb34 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import SearchComponent from "../components/SearchComponent.vue";
 
+const confirmBuyClick = () => {
+  // finish buy screen
+  console.log("compra confirmada");
+};
 </script>
 
 <template>
-  <SearchComponent />
+  <SearchComponent @token-buy="confirmBuyClick()" />
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/MockView.vue b/src/views/MockView.vue
index c2ba80f..31962f9 100644
--- a/src/views/MockView.vue
+++ b/src/views/MockView.vue
@@ -7,7 +7,7 @@ import blockchain from "../utils/blockchain";
 
 const etherStore = useEtherStore();
 
-const { walletAddress, balance, depositList } = storeToRefs(etherStore);
+const { depositList } = storeToRefs(etherStore);
 
 const depositValue = ref<Number>();
 const depositPixKey = ref<string>("");
@@ -17,7 +17,7 @@ const splitTokens = () => {
 };
 
 const mockDeposit = () => {
-  if(!depositValue.value || !depositPixKey.value) return;
+  if (!depositValue.value || !depositPixKey.value) return;
   blockchain.mockDeposit(depositValue.value.toString(), depositPixKey.value);
 };
 
@@ -25,38 +25,15 @@ const countDeposit = () => {
   blockchain.countDeposit();
 };
 
-const formatWalletAddress = (): string => {
-  const walletAddressLength = walletAddress.value.length;
-  const initialText = walletAddress.value.substring(0, 5);
-  const finalText = walletAddress.value.substring(
-    walletAddressLength - 5,
-    walletAddressLength - 1
-  );
-  return `${initialText} ... ${finalText}`;
-};
-
 const mapDeposit = (depositId: BigNumber) => {
-  blockchain.mapDeposits(depositId)
-}
-
-const formatWalletBalance = (): string => {
-  const formattedBalance = blockchain.formatEther(balance.value);
-  const fixed = formattedBalance.substring(0, 8);
-
-  return fixed;
+  blockchain.mapDeposits(depositId);
 };
 </script>
 
 <template>
-  
   <div class="page">
-
     <div class="flex flex-col gap-4 justify-start items-start w-2/3">
-      <button 
-        type="button" 
-        class="default-button"
-        @click="countDeposit()"
-      >
+      <button type="button" class="default-button" @click="countDeposit()">
         Contar depósitos
       </button>
 
@@ -74,27 +51,27 @@ const formatWalletBalance = (): string => {
           placeholder="Chave pix"
           v-model="depositPixKey"
         />
-        
-        <button 
-          type="button" 
-          class="default-button"
-          @click="mockDeposit()"
-        >
+
+        <button type="button" class="default-button" @click="mockDeposit()">
           Mockar depósitos
         </button>
       </div>
 
-      <button 
-        type="button" 
-        class="default-button"
-        @click="splitTokens()"
-      >
+      <button type="button" class="default-button" @click="splitTokens()">
         Dividir tokens
       </button>
     </div>
 
     <ul class="flex flex-col justify-center items-center gap-4">
-      <li class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"  v-for="deposit in depositList" :key="deposit['blockNumber']" @click="mapDeposit(deposit['args']['depositID'])">{{deposit['args']['0']}} : MRBZ {{blockchain.formatEther(deposit['args']['amount'])}} </li>
+      <li
+        class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"
+        v-for="deposit in depositList"
+        :key="deposit['blockNumber']"
+        @click="mapDeposit(deposit['args']['depositID'])"
+      >
+        {{ deposit["args"]["0"] }} : MRBZ
+        {{ blockchain.formatEther(deposit["args"]["amount"]) }}
+      </li>
     </ul>
   </div>
 </template>
@@ -104,22 +81,21 @@ header {
   @apply flex flex-row justify-between w-full items-center;
 }
 
-.default-button{
-  @apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full
+.default-button {
+  @apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full;
 }
 
-.default-input{
-  @apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg
+.default-input {
+  @apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg;
 }
 
-.page{
-  @apply flex gap-8 mt-24
+.page {
+  @apply flex gap-8 mt-24;
 }
 
 @media (max-width: 1024px) {
   .page {
-    @apply flex-wrap
+    @apply flex-wrap;
   }
 }
-
 </style>