Add Alert to seller flow

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -52,7 +52,7 @@ const showAlert = ref<boolean>(true);
     </div>
     <CustomAlert
       v-if="showAlert"
-      :type="'sell'"
+      :type="'buy'"
       @close-alert="showAlert = false"
     />
   </div>

src/components/CustomAlert/CustomAlert.vue

@@ -5,6 +5,13 @@ const props = defineProps<{
 }>();
 
 const alertText = ref<string>("");
+const alertPaddingLeft = ref<string>("18rem");
+
+if (props.type === "sell") {
+  alertPaddingLeft.value = "20rem";
+} else {
+  alertPaddingLeft.value = "18rem";
+}
 
 switch (props.type) {
   case "buy":
@@ -43,11 +50,12 @@ switch (props.type) {
 
 .modal {
   background-color: rgba(251, 191, 36, 1);
-  height: 8%;
+  height: 6%;
   width: 100%;
   border-radius: 10px;
   align-items: center;
   white-space: nowrap;
+  padding-left: v-bind(alertPaddingLeft);
 }
 .close {
   cursor: pointer;

src/components/SellerSteps/WantSellComponent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CustomButton from "../CustomButton/CustomButton.vue";
+import CustomAlert from "../CustomAlert/CustomAlert.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
@@ -8,6 +9,10 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
 
+const props = defineProps<{
+  showAlert: boolean;
+}>();
+
 // Reactive state
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
@@ -19,6 +24,7 @@ const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
 const validPixFormat = ref<boolean>(true);
+const showAlert = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["approveTokens"]);
@@ -141,6 +147,11 @@ const handleButtonClick = async (
         @buttonClicked="handleButtonClick(offer, pixKey)"
       />
     </div>
+    <CustomAlert
+      v-if="props.showAlert"
+      :type="'sell'"
+      @close-alert="showAlert = false"
+    />
   </div>
 </template>
 

src/views/SellerView.vue

@@ -21,6 +21,7 @@ const loading = ref<boolean>(false);
 
 const offerValue = ref<string>("");
 const pixKeyBuyer = ref<string>("");
+const showAlert = ref<boolean>(false);
 
 // Verificar tipagem
 const approveOffer = async (args: {
@@ -48,6 +49,7 @@ const sendNetwork = async () => {
       await addDeposit(String(offerValue.value), pixKeyBuyer.value);
       flowStep.value = Step.Sell;
       loading.value = false;
+      showAlert.value = true;
     }
   } catch (err) {
     console.log(err);
@@ -59,7 +61,11 @@ const sendNetwork = async () => {
 
 <template>
   <div v-if="flowStep == Step.Sell">
-    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
+    <WantSellComponent
+      v-if="!loading"
+      @approve-tokens="approveOffer"
+      :showAlert="showAlert"
+    />
     <LoadingComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"