P2Pix-Front-End/src/components/SearchComponent.vue

<script setup lang="ts">
import { ref } from "vue";
import CustomButton from "../components/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia";
import blockchain from "../utils/blockchain";

// Store reference
const etherStore = useEtherStore();

const { walletAddress, depositsAddedList } = storeToRefs(etherStore);

// Reactive state
const tokenValue = ref(0);
const enableSelectButton = ref(false);
const hasLiquidity = ref(true);
const validDecimals = ref(true);
const selectedDeposit = ref();

// Emits
const emit = defineEmits(["tokenBuy"]);

// Blockchain methods
const connectAccount = async () => {
  await blockchain.connectProvider();
  verifyLiquidity();
};

// Debounce methods
const handleInputEvent = (event: any) => {
  const { value } = event.target;

  tokenValue.value = Number(value);

  if (decimalCount(tokenValue.value) > 2) {
    validDecimals.value = false;
    enableSelectButton.value = false;
    return;
  }
  validDecimals.value = true;

  verifyLiquidity();
};

// Enable button methods
// Check if has more than 2 decimal places
const decimalCount = (num: Number) => {
  const numStr = String(num);
  if (numStr.includes(".")) {
    return numStr.split(".")[1].length;
  }
  return 0;
};

// Verify if there is a valid deposit to buy
const verifyLiquidity = () => {
  enableSelectButton.value = false;
  selectedDeposit.value = null;
  if (!walletAddress.value || tokenValue.value <= 0) return;

  depositsAddedList.value.find((element) => {
    const p2pixTokenValue = Number(
      blockchain.formatBigNumber(element.args.amount)
    );
    if (
      tokenValue.value!! <= p2pixTokenValue &&
      tokenValue.value!! != 0 &&
      element.args.seller !== walletAddress.value
    ) {
      enableSelectButton.value = true;
      hasLiquidity.value = true;
      selectedDeposit.value = element;
      return true;
    }
    return false;
  });

  if (!enableSelectButton.value) {
    hasLiquidity.value = false;
  }
};
</script>

<template>
  <div class="page">
    <div class="text-container">
      <span class="text font-extrabold text-5xl max-w-[29rem]"
        >Adquira cripto com apenas um Pix</span
      >
      <span class="text font-medium text-base max-w-[28rem]"
        >Digite um valor, confira a oferta, conecte sua carteira e receba os
        tokens após realizar o Pix</span
      >
    </div>
    <div class="blur-container">
      <div
        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
      >
        <div class="flex justify-between w-full items-center">
          <input
            type="number"
            class="border-none outline-none text-lg text-gray-900 w-fit"
            v-bind:class="{
              'font-semibold': tokenValue != undefined,
              'text-xl': tokenValue != undefined,
            }"
            @input="debounce(handleInputEvent, 500)($event)"
            placeholder="0  "
            step=".01"
          />
          <div
            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
          >
            <img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
          </div>
        </div>

        <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-auto">
            ~ R$ {{ tokenValue.toFixed(2) }}
          </p>
          <div class="flex gap-2">
            <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="!validDecimals">
          <span class="text-red-500 font-normal text-sm"
            >Por favor utilize no máximo 2 casas decimais</span
          >
        </div>
        <div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
          <span class="text-red-500 font-normal text-sm"
            >Atualmente não há liquidez nas redes para sua demanda</span
          >
        </div>
      </div>
      <CustomButton
        v-if="!walletAddress"
        :text="'Conectar carteira'"
        @buttonClicked="connectAccount()"
      />
      <CustomButton
        v-if="walletAddress"
        :text="'Confirmar compra'"
        :is-disabled="!enableSelectButton"
        @buttonClicked="emit('tokenBuy', { selectedDeposit, tokenValue })"
      />
    </div>
  </div>
</template>

<style scoped>
.custom-divide {
  width: 100%;
  border-bottom: 1px solid #d1d5db;
}
.bottom-position {
  top: -20px;
  right: 50%;
  transform: translateX(50%);
}

.page {
  @apply flex flex-col items-center justify-center w-full mt-16;
}

.text-container {
  @apply flex flex-col items-center justify-center gap-4;
}

.text {
  @apply text-gray-800 text-center;
}

.blur-container {
  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>