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>