feat: add seller flow

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>

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>

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>

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 blockchain from "../utils/blockchain";
@@ -40,7 +41,13 @@ const formatWalletBalance = (): string => {
       @load="connectMetaMask()"
     />
     <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"

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import MockView from "../views/MockView.vue";
 import ListView from "../components/ListComponent.vue";
+import SellerView from "@/views/SellerView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -11,6 +12,11 @@ const router = createRouter({
       name: "home",
       component: HomeView,
     },
+    {
+      path: "/seller",
+      name: "seller",
+      component: SellerView,
+    },
     {
       path: "/mock",
       name: "mock",

src/views/SellerView.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import WantSellComponent from "../components/SellerSteps/WantSellComponent.vue";
+import SendNetwork from "../components/SellerSteps/SendNetwork.vue";
+import ValidationComponent from "../components/LoadingComponent.vue";
+
+import { ref } from "vue";
+import router from "@/router";
+
+enum Step {
+  Search,
+  Sell,
+  Network,
+}
+
+const flowStep = ref<Step>(Step.Sell);
+const loading = ref<boolean>(false);
+
+const walletConnect = async () => {
+  flowStep.value = Step.Sell;
+};
+
+const approveTokens = async () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    flowStep.value = Step.Network;
+  }, 2000);
+};
+
+const sendNetwork = async () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    router.push("/");
+  }, 2000);
+};
+</script>
+
+<template>
+  <!-- <SellerSearchComponent
+    v-if="flowStep == Step.Search"
+    @token-buy="walletConnect"
+  /> -->
+  <div v-if="flowStep == Step.Sell">
+    <WantSellComponent v-if="!loading" @approve-tokens="approveTokens" />
+    <ValidationComponent
+      v-if="loading"
+      :message="'A transação está sendo enviada para a rede.'"
+    />
+  </div>
+  <div v-if="flowStep == Step.Network">
+    <SendNetwork v-if="!loading" @send-network="sendNetwork" />
+    <ValidationComponent
+      v-if="loading"
+      :message="'A transação está sendo enviada para a rede.'"
+    />
+  </div>
+</template>
+
+<style scoped></style>