Merge branch 'develop' into list-tokens

src/components/QrCodeComponent.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { pix } from "../utils/QrCodePix";
+import { ref } from "vue";
+import { debounce } from "@/utils/debounce";
+import CustomButton from "./CustomButton.vue";
+import api from "../services/index";
+
+const props = defineProps({
+  pixTarget: String,
+  tokenValue: Number,
+});
+
+const qrCode = ref<string>("");
+const qrCodePayload = ref<string>("");
+const pixQrCode = pix({
+  pixKey: props.pixTarget ?? "",
+  value: props.tokenValue,
+});
+const isPixValid = ref<boolean>(false);
+const isCodeInputEmpty = ref<boolean>(true);
+
+pixQrCode.base64QrCode().then((code: string) => {
+  qrCode.value = code;
+});
+
+qrCodePayload.value = pixQrCode.payload();
+
+const handleInputEvent = (event: any) => {
+  const { value } = event.target;
+
+  validatePix(value);
+};
+
+const validatePix = async (e2eid: any) => {
+  if (e2eid == "") {
+    isPixValid.value = false;
+    isCodeInputEmpty.value = true;
+    return;
+  }
+  var sellerPixKey = props.pixTarget;
+  var transactionValue = props.tokenValue;
+
+  if (sellerPixKey && transactionValue) {
+    var body_req = {
+      e2e_id: e2eid,
+      pix_key: sellerPixKey,
+      pix_value: transactionValue,
+    };
+
+    isCodeInputEmpty.value = false;
+
+    try {
+      await api.post("validate_pix", body_req);
+      isPixValid.value = true;
+    } catch (error) {
+      isPixValid.value = false;
+    }
+  } else {
+    isCodeInputEmpty.value = false;
+    isPixValid.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-extrabold text-2xl max-w-[30rem]">
+        Utilize o QR Code ou copie o código para realizar o Pix
+      </span>
+      <span class="text font-medium text-md max-w-[28rem]">
+        Após realizar o Pix no banco de sua preferência, insira o código de
+        autenticação para enviar a transação para a rede.
+      </span>
+    </div>
+    <div class="blur-container max-w-[28rem] text-black">
+      <div
+        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg break-normal"
+      >
+        <img :src="qrCode" class="w-48 h-48" />
+        <span class="text-center font-bold">Código pix</span>
+        <div class="break-words w-4/5">
+          <span class="text-center text-xs">
+            {{ qrCodePayload }}
+          </span>
+        </div>
+        <img
+          alt="Copy PIX code"
+          src="@/assets/copyPix.svg"
+          width="16"
+          height="16"
+          class="pt-2 mb-5 cursor-pointer"
+        />
+        <span class="text-xs text-start">
+          <strong>ATENÇÃO!</strong> A transação só será processada após inserir
+          o código de autenticação. Caso contrário não conseguiremos comprovar o
+          seu depósito e não será possível transferir os tokens para sua
+          carteira. Confira aqui como encontrar o código no comprovante.
+        </span>
+      </div>
+      <div
+        class="flex-col items-center justify-center flex w-full bg-white p-5 rounded-lg px-5"
+      >
+        <input
+          type="text"
+          placeholder="Digite o código do comprovante PIX"
+          @input="debounce(handleInputEvent, 500)($event)"
+          class="text-md w-full box-border p-2 h-6 mb-2 outline-none"
+        />
+        <div class="custom-divide" v-if="!isCodeInputEmpty"></div>
+        <div
+          class="flex flex-col w-full"
+          v-if="!isPixValid && !isCodeInputEmpty"
+        >
+          <div class="flex items-center h-8">
+            <img
+              alt="Invalid Icon"
+              src="@/assets/invalidIcon.svg"
+              width="14"
+              class="cursor-pointer align-middle inline-block"
+            />
+            <span class="px-1 text-red-500 font-normal text-xs"
+              >Código inválido. Por favor, confira e tente novamente.</span
+            >
+          </div>
+        </div>
+        <div class="flex flex-col w-full" v-else-if="isPixValid == true">
+          <div class="flex items-center h-8">
+            <img
+              alt="Valid Icon"
+              src="@/assets/validIcon.svg"
+              width="14"
+              class="cursor-pointer align-middle inline-block"
+            />
+            <span class="px-1 text-green-500 font-normal text-sm">
+              Código válido.
+            </span>
+          </div>
+        </div>
+      </div>
+      <CustomButton
+        :is-disabled="isPixValid == false"
+        :text="'Enviar para a rede'"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+::placeholder {
+  /* Most modern browsers support this now. */
+  color: #9ca3af;
+}
+
+h4 {
+  color: #080808;
+  font-size: 14px;
+}
+
+h2 {
+  color: #080808;
+}
+
+.form-input {
+  @apply rounded-lg border border-gray-200 p-2 text-black;
+}
+
+.form-label {
+  @apply font-semibold tracking-wide text-emerald-50;
+}
+
+.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-6;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+</style>

src/components/SearchComponent.vue

@@ -56,7 +56,6 @@ const decimalCount = (num: Number) => {
 const verifyLiquidity = () => {
   enableSelectButton.value = false;
   selectedDeposit.value = null;
-
   if (!walletAddress.value || tokenValue.value <= 0) return;
 
   depositsAddedList.value.find((element) => {
@@ -69,10 +68,6 @@ const verifyLiquidity = () => {
       enableSelectButton.value = true;
       hasLiquidity.value = true;
       selectedDeposit.value = element;
-      console.log(
-        "Selected is :",
-        blockchain.formatBigNumber(element.args.amount)
-      );
       return true;
     }
     return false;

src/components/ValidationComponent.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-bold text-3xl max-w-[29rem]"
+        >Confirme em sua carteira</span
+      >
+    </div>
+    <div class="blur-container w-[26rem]">
+      <div
+        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
+      >
+        <div
+          class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl min-w-fit gap-1"
+        >
+          <img
+            alt="Polygon image"
+            src="@/assets/validating.svg"
+            width="96"
+            height="48"
+          />
+          <span class="text-black font-medium text-sm px-12 mt-4">
+            A transação está sendo enviada para a rede
+          </span>
+        </div>
+      </div>
+    </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>