Merge branch 'develop' into create_menu

2022-12-20 14:02:30 -03:00
parent bdfdc8b433 fbf14ee86f
commit 927aaf79ad
20 changed files with 1229 additions and 201 deletions
--- a/src/components/ListComponent.vue
+++ b/src/components/ListComponent.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import CustomButton from "@/components/CustomButton.vue";
+import blockchain from "../utils/blockchain";
+
+// props
+const props = defineProps<{
+  lastWalletReleaseTransactions: any[] | undefined;
+  tokenAmount: Number | undefined;
+}>();
+
+// Emits
+const emit = defineEmits(["makeAnotherTransaction"]);
+
+const formatEventsAmount = (amount: any) => {
+  try {
+    const formated = blockchain.formatBigNumber(amount);
+    return formated;
+  } catch {
+    return "";
+  }
+};
+
+const openEtherscanUrl = (url: string) => {
+  window.open(url, "_blank");
+};
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-extrabold text-5xl max-w-[50rem]"
+        >Os tokens já foram transferidos <br />
+        para a sua carteira!
+      </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>
+          <p>Tokens recebidos</p>
+          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
+        </div>
+        <div class="my-5">
+          <p>
+            <b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
+            cadastrar o BRZ em sua carteira.
+          </p>
+        </div>
+        <CustomButton
+          :text="'Cadastrar token na carteira'"
+          @buttonClicked="() => {}"
+        />
+      </div>
+      <button
+        type="button"
+        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
+        @click="emit('makeAnotherTransaction')"
+      >
+        Fazer nova transação
+      </button>
+    </div>
+    <div class="text-container mt-16">
+      <span class="text font-extrabold text-3xl max-w-[50rem]"
+        >Últimas transações
+      </span>
+    </div>
+    <div class="blur-container min-w-[80%] gap-8">
+      <div class="flex flex-row justify-between w-full px-8">
+        <span class="text-xs text-gray-50 font-medium">Valor</span>
+        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
+        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
+      </div>
+      <div
+        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
+        v-for="release in lastWalletReleaseTransactions"
+        :key="release?.blockNumber"
+      >
+        <span class="last-release-info">
+          {{ formatEventsAmount(release?.args.amount) }} BRZ
+        </span>
+        <span class="last-release-info">
+          {{ "Compra" }}
+        </span>
+        <div
+          class="flex gap-2 cursor-pointer items-center"
+          @click="
+            openEtherscanUrl(
+              `https://etherscan.io/tx/${release?.transactionHash}`
+            )
+          "
+        >
+          <span class="last-release-info">Etherscan</span>
+          <img alt="Redirect image" src="@/assets/redirect.svg" />
+        </div>
+      </div>
+      <div class="flex justify-center w-full right-6 mt-2">
+        <button
+          type="button"
+          class="text-white"
+          @click="() => {}"
+          v-if="lastWalletReleaseTransactions?.length != 0"
+        >
+          Carregar mais
+        </button>
+      </div>
+
+      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
+        Não há nenhuma transação anterior
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+p {
+  @apply text-gray-900;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-gray-800 text-center;
+}
+.blur-container-row {
+  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+}
+
+.blur-container {
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+}
+
+.last-release-info {
+  @apply font-medium text-base text-gray-900;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+</style>
--- a/src/components/ValidationComponent.vue
+++ b/src/components/ValidationComponent.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>
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -5,6 +5,7 @@ import { debounce } from "@/utils/debounce";
 import CustomButton from "./CustomButton.vue";
 import api from "../services/index";

+// props and store references
 const props = defineProps({
  pixTarget: String,
  tokenValue: Number,
@@ -12,13 +13,17 @@ const props = defineProps({

 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
+const isPixValid = ref<boolean>(false);
+const isCodeInputEmpty = ref<boolean>(true);
+const e2eId = ref<string>("");
+
+// Emits
+const emit = defineEmits(["pixValidated"]);
+
 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;
 });
@@ -27,12 +32,12 @@ qrCodePayload.value = pixQrCode.payload();

 const handleInputEvent = (event: any) => {
  const { value } = event.target;
-
-  validatePix(value);
+  e2eId.value = value;
+  validatePix();
 };

-const validatePix = async (e2eid: any) => {
-  if (e2eid == "") {
+const validatePix = async () => {
+  if (e2eId.value == "") {
    isPixValid.value = false;
    isCodeInputEmpty.value = true;
    return;
@@ -42,7 +47,7 @@ const validatePix = async (e2eid: any) => {

  if (sellerPixKey && transactionValue) {
    var body_req = {
-      e2e_id: e2eid,
+      e2e_id: e2eId.value,
      pix_key: sellerPixKey,
      pix_value: transactionValue,
    };
@@ -141,6 +146,7 @@ const validatePix = async (e2eid: any) => {
      <CustomButton
        :is-disabled="isPixValid == false"
        :text="'Enviar para a rede'"
+        @button-clicked="emit('pixValidated', { e2eId })"
      />
    </div>
  </div>
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -9,7 +9,7 @@ import blockchain from "../utils/blockchain";
 // Store reference
 const etherStore = useEtherStore();

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

 // Reactive state
 const tokenValue = ref(0);
@@ -52,18 +52,20 @@ const decimalCount = (num: Number) => {
  }
  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 = blockchain.formatBigNumber(element.args.amount);
+  depositsValidList.value.find((element) => {
+    const remaining = element.remaining;
    if (
-      tokenValue.value!! <= Number(p2pixTokenValue) &&
+      element.valid == true &&
+      tokenValue.value!! <= remaining &&
      tokenValue.value!! != 0 &&
-      element.args.seller !== walletAddress.value
+      element.seller !== walletAddress.value
    ) {
      enableSelectButton.value = true;
      hasLiquidity.value = true;
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -0,0 +1,188 @@
+<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";
+
+// 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 () => {};
+
+// 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 = blockchain.formatBigNumber(element.args.amount);
+//     if (
+//       tokenValue.value!! <= Number(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
+        :text="'Conectar carteira'"
+        @buttonClicked="emit('tokenBuy')"
+      />
+    </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>
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import CustomButton from "@/components/CustomButton.vue";
+
+// Emits
+const emit = defineEmits(["sendNetwork"]);
+
+const sendNetworkHandle = () => {
+  emit("sendNetwork");
+};
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-extrabold text-5xl max-w-[50rem]"
+        >Envie sua oferta para a rede
+      </span>
+      <span class="text text-xl font-medium text-base max-w-[30rem]"
+        >Após a confirmação sua oferta estará disponível para outros usuários.
+        Caso deseje retirar a oferta, será necessário aguardar 24h para receber
+        os tokens de volta.</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>
+          <p>Tokens ofertados</p>
+          <p class="text-2xl text-gray-900">100 BRZ</p>
+        </div>
+        <div class="my-3">
+          <p>Chave Pix</p>
+          <p class="text-xl text-gray-900 break-words">
+            c02942far7047f6shri5ifh371908973
+          </p>
+        </div>
+        <div class="mb-5">
+          <p>
+            <b>Atenção! </b> Os tokens ofertados ficam registrados no smart
+            contract e serão transferidos automaticamente para o comprador assim
+            que o Pix for detectado e confirmado.
+          </p>
+        </div>
+        <CustomButton
+          :text="'Enviar para a rede'"
+          @buttonClicked="sendNetworkHandle()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+p {
+  @apply text-gray-900;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-gray-800 text-center;
+}
+.blur-container-row {
+  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+}
+
+.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-8 w-1/3;
+}
+
+.last-deposit-info {
+  @apply font-medium text-base;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+</style>
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import CustomButton from "../CustomButton.vue";
+import { debounce } from "@/utils/debounce";
+
+// Reactive state
+const offer = ref<string | number>("");
+const pixKey = ref<string>("");
+
+const enableSelectButton = ref(false);
+const hasLiquidity = ref(true);
+const validDecimals = ref(true);
+
+// Emits
+const emit = defineEmits(["approveTokens"]);
+
+// Blockchain methods
+const approveTokensHandle = async () => {
+  console.log(offer.value, pixKey.value);
+  emit("approveTokens");
+};
+
+// Debounce methods
+const handleInputEvent = (event: any) => {
+  const { value } = event.target;
+
+  offer.value = Number(value);
+
+  if (decimalCount(offer.value) > 2) {
+    validDecimals.value = false;
+    enableSelectButton.value = false;
+    return;
+  }
+  validDecimals.value = true;
+};
+
+// 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;
+};
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-extrabold text-5xl max-w-[29rem]"
+        >Venda cripto e receba em Pix</span
+      >
+      <span class="text font-medium text-base max-w-[28rem]"
+        >Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
+        envio da transação e confirme sua oferta.</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"
+            v-model="offer"
+            class="border-none outline-none text-lg text-gray-900 w-fit"
+            v-bind:class="{
+              'font-semibold': offer != undefined,
+              'text-xl': offer != undefined,
+            }"
+            @input="debounce(handleInputEvent, 500)($event)"
+            placeholder="Digite sua oferta"
+            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="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>
+      <div
+        class="flex flex-col w-full bg-white px-10 py-8 rounded-lg border-y-10"
+      >
+        <div class="flex justify-between w-full items-center">
+          <input
+            type="text"
+            v-model="pixKey"
+            class="border-none outline-none text-lg text-gray-900 w-fit"
+            placeholder="Digite a chave Pix"
+          />
+        </div>
+      </div>
+      <CustomButton
+        :text="'Aprovar tokens'"
+        @buttonClicked="approveTokensHandle()"
+      />
+    </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>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import router from "@/router";
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
 import { ref } from "vue";
@@ -27,11 +28,9 @@ const formatWalletAddress = (): string => {
  return `${initialText}...${finalText}`;
 };

-const formatWalletBalance = (): string => {
-  const formattedBalance = blockchain.formatEther(balance.value);
-  const fixed = formattedBalance.substring(0, 8);
-
-  return fixed;
+const formatWalletBalance = (): String => {
+  const fixed = Number(balance.value);
+  return fixed.toFixed(2);
 };

 const disconnectUser = () => {
@@ -55,7 +54,13 @@ const disconnectUser = () => {
      height="75"
    />
    <div class="flex gap-4 items-center">
-      <button type="button" class="default-button">Quero vender</button>
+      <button
+        type="button"
+        class="default-button"
+        v-on:click="router.push('/seller')"
+      >
+        Quero vender
+      </button>
      <button
        type="button"
        v-if="!walletAddress"