remove implementation ofsearch by money and only allow to search by token ammount

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')"
+    @click="emit('buttonClicked')"
-    v-bind:class="{ 'opacity-70': isDisabled }"
+    v-bind:class="{ 'opacity-70': props.isDisabled }"
-    :disabled="isDisabled"
+    :disabled="props.isDisabled ? props.isDisabled : false"
   >
-    {{ text }}
+    {{ props.text }}
   </button>
 </template>
 

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 = () => {
+const tokenValue = ref(0);
-  console.log("pass the deposit and token value ammount to next screen")
-};
-
-const valueToToken = ref<Number>(0);
 const enableSelectButton = ref(false);
 const hasLiquidity = ref(true);
 const selectedDeposit = ref();
 
-const valueConversion = (event: any) => {
+const handleInputEvent = (event: any) => {
-  const { value } = event.target
+  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) => {
+  if (!walletAddress.value) return;
-    const p2pixTokenValue = blockchain.verifyDepositAmmount(deposit.args.amount);
 
-    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
+    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
+        >Digite um valor, confira a oferta, conecte sua carteira e receba os
-        crypto após realizar o Pix</span
+        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>
+          <input
-          <div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full">
+            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
-            <img alt="Ethereum image" src="@/assets/ethereum.svg" width="24px" height="24px"/>
+              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'] {
+input[type="number"] {
   -moz-appearance: textfield;
 }
 
-input[type=number]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
+input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
 </style>

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++){
+  for (let i = 0; i < wallets.length; i++) {
-    const tx = await contract.transfer(wallets[i], ethers.utils.parseEther("4000000.0"));
+    const tx = await contract.transfer(
-    await tx.wait()
+      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,
+};

src/utils/debounce.ts

@@ -1,9 +1,9 @@
 export const debounce = (func: any, delay: number) => {
-    let timer: any = null
+  let timer: any = null;
   return function (this: unknown, ...args: any) {
-      clearTimeout(timer)
+    clearTimeout(timer);
     timer = setTimeout(() => {
-        func.apply(this, args)
+      func.apply(this, args);
-      }, delay) 
+    }, delay);
-    }
+  };
-  }
+};

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 scoped></style>
-</style>

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>("");
@@ -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)
+  blockchain.mapDeposits(depositId);
-}
-
-const formatWalletBalance = (): string => {
-  const formattedBalance = blockchain.formatEther(balance.value);
-  const fixed = formattedBalance.substring(0, 8);
-
-  return fixed;
 };
 </script>
 
 <template>
-  
   <div class="page">
-
     <div class="flex flex-col gap-4 justify-start items-start w-2/3">
-      <button 
+      <button type="button" class="default-button" @click="countDeposit()">
-        type="button" 
-        class="default-button"
-        @click="countDeposit()"
-      >
         Contar depósitos
       </button>
 
@@ -75,26 +52,26 @@ const formatWalletBalance = (): string => {
           v-model="depositPixKey"
         />
 
-        <button 
+        <button type="button" class="default-button" @click="mockDeposit()">
-          type="button" 
-          class="default-button"
-          @click="mockDeposit()"
-        >
           Mockar depósitos
         </button>
       </div>
 
-      <button 
+      <button type="button" class="default-button" @click="splitTokens()">
-        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>
@@ -105,21 +82,20 @@ header {
 }
 
 .default-button {
-  @apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full
+  @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
+  @apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg;
 }
 
 .page {
-  @apply flex gap-8 mt-24
+  @apply flex gap-8 mt-24;
 }
 
 @media (max-width: 1024px) {
   .page {
-    @apply flex-wrap
+    @apply flex-wrap;
   }
 }
-
 </style>