Fix alerts and modals
This commit is contained in:
parent
ba8f2218f6
commit
2ed7cad96c
@ -1,7 +1,5 @@
|
||||
<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<{
|
||||
@ -10,8 +8,6 @@ const props = defineProps<{
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["makeAnotherTransaction"]);
|
||||
|
||||
const showAlert = ref<boolean>(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -50,11 +46,6 @@ const showAlert = ref<boolean>(true);
|
||||
Fazer nova transação
|
||||
</button>
|
||||
</div>
|
||||
<CustomAlert
|
||||
v-if="showAlert"
|
||||
:type="'buy'"
|
||||
@close-alert="showAlert = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -6,11 +6,15 @@ const props = defineProps<{
|
||||
|
||||
const alertText = ref<string>("");
|
||||
const alertPaddingLeft = ref<string>("18rem");
|
||||
const alertPaddingTop = ref<string>("0rem");
|
||||
|
||||
if (props.type === "sell") {
|
||||
alertPaddingLeft.value = "20rem";
|
||||
} else {
|
||||
alertPaddingLeft.value = "18rem";
|
||||
alertPaddingLeft.value = "30%";
|
||||
} else if (props.type === "buy") {
|
||||
alertPaddingLeft.value = "30%";
|
||||
} else if (props.type === "redirect") {
|
||||
alertPaddingLeft.value = "35%";
|
||||
alertPaddingTop.value = "8rem";
|
||||
}
|
||||
|
||||
switch (props.type) {
|
||||
@ -22,6 +26,9 @@ switch (props.type) {
|
||||
alertText.value =
|
||||
"Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
|
||||
break;
|
||||
case "redirect":
|
||||
alertText.value = "Existe uma compra em aberto. Continuar?";
|
||||
break;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
@ -29,9 +36,14 @@ switch (props.type) {
|
||||
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>
|
||||
<div class="flex items-center">
|
||||
<p class="text-black tracking-tighter leading-tight my-2">
|
||||
{{ alertText }}
|
||||
</p>
|
||||
<button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
|
||||
Sim
|
||||
</button>
|
||||
</div>
|
||||
<img
|
||||
src="../../assets/closeAlertIcon.svg"
|
||||
alt="close alert"
|
||||
@ -44,14 +56,17 @@ switch (props.type) {
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
display: flex !important;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-top: 7rem;
|
||||
height: 3rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: rgba(251, 191, 36, 1);
|
||||
height: 6%;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
width: 96%;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
@ -77,13 +92,16 @@ h6 {
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid white;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,7 +1,6 @@
|
||||
<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";
|
||||
@ -9,10 +8,6 @@ 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);
|
||||
@ -24,7 +19,6 @@ 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"]);
|
||||
@ -147,11 +141,6 @@ const handleButtonClick = async (
|
||||
@buttonClicked="handleButtonClick(offer, pixKey)"
|
||||
/>
|
||||
</div>
|
||||
<CustomAlert
|
||||
v-if="props.showAlert"
|
||||
:type="'sell'"
|
||||
@close-alert="showAlert = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -22,6 +22,7 @@ import {
|
||||
import { getNetworksLiquidity } from "@/blockchain/events";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
@ -42,6 +43,7 @@ const loadingRelease = ref<boolean>(false);
|
||||
const showModal = ref<boolean>(false);
|
||||
const lastWalletTransactions = ref<WalletTransaction[]>([]);
|
||||
const depositList = ref<ValidDeposit[]>([]);
|
||||
const showBuyAlert = ref<boolean>(false);
|
||||
|
||||
const confirmBuyClick = async (
|
||||
selectedDeposit: ValidDeposit,
|
||||
@ -71,6 +73,7 @@ const confirmBuyClick = async (
|
||||
|
||||
const releaseTransaction = async (e2eId: string) => {
|
||||
flowStep.value = Step.List;
|
||||
showBuyAlert.value = true;
|
||||
loadingRelease.value = true;
|
||||
|
||||
if (lockID.value && tokenAmount.value && pixTarget.value) {
|
||||
@ -159,12 +162,19 @@ onMounted(async () => {
|
||||
v-if="flowStep == Step.Search"
|
||||
@token-buy="confirmBuyClick"
|
||||
/>
|
||||
<CustomModal
|
||||
<CustomAlert
|
||||
v-if="flowStep == Step.Search && showModal"
|
||||
:isRedirectModal="true"
|
||||
@close-modal="showModal = false"
|
||||
:type="'redirect'"
|
||||
@close-alert="showModal = false"
|
||||
@go-to-lock="flowStep = Step.Buy"
|
||||
/>
|
||||
<CustomAlert
|
||||
v-if="
|
||||
flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
|
||||
"
|
||||
:type="'buy'"
|
||||
@close-alert="showBuyAlert = false"
|
||||
/>
|
||||
<div v-if="flowStep == Step.Buy">
|
||||
<QrCodeComponent
|
||||
:pixTarget="String(pixTarget)"
|
||||
|
@ -7,12 +7,14 @@ import { ref, watch, onMounted } from "vue";
|
||||
import {
|
||||
listValidDepositTransactionsByWalletAddress,
|
||||
listAllTransactionByWalletAddress,
|
||||
checkUnreleasedLock,
|
||||
} from "@/blockchain/wallet";
|
||||
import { withdrawDeposit } from "@/blockchain/buyerMethods";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
|
||||
import router from "@/router/index";
|
||||
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
|
||||
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
@ -21,6 +23,7 @@ const loadingWithdraw = ref<boolean>(false);
|
||||
|
||||
const depositList = ref<ValidDeposit[]>([]);
|
||||
const transactionsList = ref<WalletTransaction[]>([]);
|
||||
const showAlert = ref<boolean>(false);
|
||||
|
||||
const callWithdraw = async (amount: string) => {
|
||||
if (amount) {
|
||||
@ -63,11 +66,25 @@ const getWalletTransactions = async () => {
|
||||
etherStore.setLoadingWalletTransactions(false);
|
||||
};
|
||||
|
||||
const checkForUnreleasedLocks = async (): Promise<void> => {
|
||||
const walletLocks = await checkUnreleasedLock(walletAddress.value);
|
||||
if (walletLocks) {
|
||||
showAlert.value = true;
|
||||
} else {
|
||||
showAlert.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goToLock = () => {
|
||||
router.push({ name: "home" });
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!walletAddress.value) {
|
||||
router.push({ name: "home" });
|
||||
}
|
||||
await getWalletTransactions();
|
||||
await checkForUnreleasedLocks();
|
||||
});
|
||||
|
||||
watch(walletAddress, async () => {
|
||||
@ -80,6 +97,12 @@ watch(networkName, async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomAlert
|
||||
v-if="showAlert"
|
||||
:type="'redirect'"
|
||||
@close-alert="showAlert = false"
|
||||
@go-to-lock="goToLock()"
|
||||
/>
|
||||
<div class="page">
|
||||
<div class="header" v-if="!loadingWithdraw && !walletAddress">
|
||||
Por Favor Conecte Sua Carteira
|
||||
|
@ -6,6 +6,7 @@ import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
|
||||
|
||||
import { ref } from "vue";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
@ -61,16 +62,17 @@ const sendNetwork = async () => {
|
||||
|
||||
<template>
|
||||
<div v-if="flowStep == Step.Sell">
|
||||
<WantSellComponent
|
||||
v-if="!loading"
|
||||
@approve-tokens="approveOffer"
|
||||
:showAlert="showAlert"
|
||||
/>
|
||||
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
|
||||
<LoadingComponent
|
||||
v-if="loading"
|
||||
:message="'A transação está sendo enviada para a rede.'"
|
||||
/>
|
||||
</div>
|
||||
<CustomAlert
|
||||
v-if="flowStep == Step.Sell && showAlert"
|
||||
:type="'sell'"
|
||||
@close-alert="showAlert = false"
|
||||
/>
|
||||
<div v-if="flowStep == Step.Network">
|
||||
<SendNetwork
|
||||
:pixKey="pixKeyBuyer"
|
||||
|
Loading…
x
Reference in New Issue
Block a user