Create alerts after user complete users flow

src/assets/closeAlertIcon.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0105 1.69682C13.2058 1.50155 13.2058 1.18497 13.0105 0.989708C12.8153 0.794446 12.4987 0.794446 12.3034 0.989708L7.00016 6.29297L1.6969 0.989708C1.50163 0.794446 1.18505 0.794446 0.989788 0.989708C0.794526 1.18497 0.794526 1.50155 0.989788 1.69682L6.29305 7.00008L0.989708 12.3034C0.794446 12.4987 0.794446 12.8153 0.989708 13.0105C1.18497 13.2058 1.50155 13.2058 1.69681 13.0105L7.00016 7.70718L12.3035 13.0105C12.4988 13.2058 12.8153 13.2058 13.0106 13.0105C13.2059 12.8153 13.2059 12.4987 13.0106 12.3034L7.70726 7.00008L13.0105 1.69682Z" fill="#1F2937"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.636235 0.636155C1.02676 0.245631 1.65992 0.245631 2.05045 0.636155L7.00016 5.58586L11.9499 0.636155C12.3404 0.245631 12.9736 0.245631 13.3641 0.636155C13.7546 1.02668 13.7546 1.65984 13.3641 2.05037L8.41437 7.00008L13.3642 11.9499C13.7547 12.3404 13.7547 12.9736 13.3642 13.3641C12.9736 13.7546 12.3405 13.7546 11.9499 13.3641L7.00016 8.41429L2.05037 13.3641C1.65984 13.7546 1.02668 13.7546 0.636155 13.3641C0.245632 12.9736 0.24563 12.3404 0.636154 11.9499L5.58594 7.00008L0.636235 2.05037C0.245711 1.65984 0.245711 1.02668 0.636235 0.636155Z" fill="#1F2937"/>
+</svg>

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomAlert from "../CustomAlert/CustomAlert.vue";
+import { ref } from "vue";
 
 // props
 const props = defineProps<{
@@ -8,6 +10,8 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits(["makeAnotherTransaction"]);
+
+const showAlert = ref<boolean>(true);
 </script>
 
 <template>
@@ -46,6 +50,11 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         Fazer nova transação
       </button>
     </div>
+    <CustomAlert
+      v-if="showAlert"
+      :type="'sell'"
+      @close-alert="showAlert = false"
+    />
   </div>
 </template>
 

src/components/CustomAlert/CustomAlert.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const props = defineProps<{
+  type: string;
+}>();
+
+const alertText = ref<string>("");
+
+switch (props.type) {
+  case "buy":
+    alertText.value =
+      "Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.";
+    break;
+  case "sell":
+    alertText.value =
+      "Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
+    break;
+}
+</script>
+<template>
+  <div
+    class="modal-overlay inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
+  >
+    <div class="modal px-12 pl-72 text-center flex justify-between">
+      <p class="text-black tracking-tighter leading-tight my-2">
+        {{ alertText }}
+      </p>
+      <img
+        src="../../assets/closeAlertIcon.svg"
+        alt="close alert"
+        class="w-3 cursor-pointer"
+        @click="$emit('close-alert')"
+      />
+    </div>
+  </div>
+</template>
+<style scoped>
+.modal-overlay {
+  display: flex !important;
+  height: 100%;
+  width: 100%;
+}
+
+.modal {
+  background-color: rgba(251, 191, 36, 1);
+  height: 8%;
+  width: 100%;
+  border-radius: 10px;
+  align-items: center;
+  white-space: nowrap;
+}
+.close {
+  cursor: pointer;
+}
+
+.close-img {
+  width: 25px;
+}
+
+.check {
+  width: 150px;
+}
+
+h6 {
+  font-weight: 500;
+  font-size: 28px;
+  margin: 20px 0;
+}
+
+p {
+  font-size: 20px;
+}
+
+button {
+  width: 100px;
+  height: 40px;
+  color: black;
+  font-size: 14px;
+  border-radius: 10px;
+}
+</style>

src/views/HomeView.vue

@@ -155,10 +155,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <SearchComponent
+  <!-- <SearchComponent
     v-if="flowStep == Step.Search"
     @token-buy="confirmBuyClick"
-  />
+  /> -->
   <CustomModal
     v-if="flowStep == Step.Search && showModal"
     :isRedirectModal="true"
@@ -177,7 +177,7 @@ onMounted(async () => {
       :message="'A transação está sendo enviada para a rede'"
     />
   </div>
-  <div v-if="flowStep == Step.List">
+  <div v-if="flowStep == Step.Search">
     <div class="flex flex-col gap-10" v-if="!loadingRelease">
       <BuyConfirmedComponent
         :tokenAmount="tokenAmount"