rename list component to buy confirmed component and add Listing component inside it
This commit is contained in:
RcleydsonR
parent
060c4f370f
commit
6fdd14f147
@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import CustomButton from "@/components/CustomButton.vue";
|
||||
import ListingComponent from "@/components/ListingComponent.vue";
|
||||
|
||||
// props
|
||||
const props = defineProps<{
|
||||
lastWalletReleaseTransactions: any[];
|
||||
tokenAmount: Number | undefined;
|
||||
}>();
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["makeAnotherTransaction"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -16,7 +26,7 @@ import CustomButton from "@/components/CustomButton.vue";
|
||||
>
|
||||
<div>
|
||||
<p>Tokens recebidos</p>
|
||||
<p class="text-2xl text-gray-900">100 BRZ</p>
|
||||
<p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<p>
|
||||
@ -29,41 +39,24 @@ import CustomButton from "@/components/CustomButton.vue";
|
||||
@buttonClicked="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blur-container-row">
|
||||
<button
|
||||
type="button"
|
||||
class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 w-full"
|
||||
@click="() => {}"
|
||||
class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
|
||||
@click="emit('makeAnotherTransaction')"
|
||||
>
|
||||
Fazer nova transação
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="border-amber-500 border-2 rounded default-button text-white p-2"
|
||||
@click="() => {}"
|
||||
>
|
||||
Desconectar
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-container mt-10">
|
||||
<div class="text-container mt-16">
|
||||
<span class="text font-extrabold text-3xl max-w-[50rem]"
|
||||
>Últimas transações
|
||||
>Histórico de compras
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
|
||||
<p>100 BRZ</p>
|
||||
<p>20 out 2022</p>
|
||||
<p>Etherscan</p>
|
||||
</div>
|
||||
<div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
|
||||
<p>100 BRZ</p>
|
||||
<p>20 out 2022</p>
|
||||
<p>Etherscan</p>
|
||||
</div>
|
||||
<p class="text-white mt-2 cursor-pointer">Carregar mais</p>
|
||||
</div>
|
||||
<ListingComponent
|
||||
:walletTransactions="lastWalletReleaseTransactions"
|
||||
:isManageMode="false"
|
||||
>
|
||||
</ListingComponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -72,6 +65,10 @@ import CustomButton from "@/components/CustomButton.vue";
|
||||
@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;
|
||||
}
|
||||
@ -84,7 +81,11 @@ import CustomButton from "@/components/CustomButton.vue";
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
|
||||
}
|
||||
|
||||
.last-release-info {
|
||||
@apply font-medium text-base text-gray-900;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
@ -1,151 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import CustomButton from "@/components/CustomButton.vue";
|
||||
import blockchain from "../utils/blockchain";
|
||||
|
||||
// props
|
||||
const props = defineProps<{
|
||||
lastWalletReleaseTransactions: any[] | undefined;
|
||||
tokenAmount: Number | undefined;
|
||||
}>();
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["makeAnotherTransaction"]);
|
||||
|
||||
const formatEventsAmount = (amount: any) => {
|
||||
try {
|
||||
const formated = blockchain.formatBigNumber(amount);
|
||||
return formated;
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const openEtherscanUrl = (url: string) => {
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="text-container">
|
||||
<span class="text font-extrabold text-5xl max-w-[50rem]"
|
||||
>Os tokens já foram transferidos <br />
|
||||
para a sua carteira!
|
||||
</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 recebidos</p>
|
||||
<p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<p>
|
||||
<b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
|
||||
cadastrar o BRZ em sua carteira.
|
||||
</p>
|
||||
</div>
|
||||
<CustomButton
|
||||
:text="'Cadastrar token na carteira'"
|
||||
@buttonClicked="() => {}"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
|
||||
@click="emit('makeAnotherTransaction')"
|
||||
>
|
||||
Fazer nova transação
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-container mt-16">
|
||||
<span class="text font-extrabold text-3xl max-w-[50rem]"
|
||||
>Últimas transações
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container min-w-[80%] gap-8">
|
||||
<div class="flex flex-row justify-between w-full px-8">
|
||||
<span class="text-xs text-gray-50 font-medium">Valor</span>
|
||||
<span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
|
||||
<span class="text-xs text-gray-50 font-medium">Checar transação</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
|
||||
v-for="release in lastWalletReleaseTransactions"
|
||||
:key="release?.blockNumber"
|
||||
>
|
||||
<span class="last-release-info">
|
||||
{{ formatEventsAmount(release?.args.amount) }} BRZ
|
||||
</span>
|
||||
<span class="last-release-info">
|
||||
{{ "Compra" }}
|
||||
</span>
|
||||
<div
|
||||
class="flex gap-2 cursor-pointer items-center"
|
||||
@click="
|
||||
openEtherscanUrl(
|
||||
`https://etherscan.io/tx/${release?.transactionHash}`
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="last-release-info">Etherscan</span>
|
||||
<img alt="Redirect image" src="@/assets/redirect.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center w-full right-6 mt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-white"
|
||||
@click="() => {}"
|
||||
v-if="lastWalletReleaseTransactions?.length != 0"
|
||||
>
|
||||
Carregar mais
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
|
||||
Não há nenhuma transação anterior
|
||||
</p>
|
||||
</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-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
|
||||
}
|
||||
|
||||
.last-release-info {
|
||||
@apply font-medium text-base text-gray-900;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,6 @@ import { ref, watch } from "vue";
|
||||
const props = defineProps<{
|
||||
walletTransactions: any[];
|
||||
isManageMode: boolean;
|
||||
walletAddress?: string;
|
||||
}>();
|
||||
|
||||
const itemsToShow = ref<any[]>([]);
|
||||
@ -153,8 +152,8 @@ showInitialItems();
|
||||
Carregar mais
|
||||
</button>
|
||||
<span class="text-gray-300">
|
||||
({{ itemsToShow.length }} de
|
||||
{{ props.walletTransactions.length }} {{isManageMode ? 'ofertas' : 'transações'}})
|
||||
({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
|
||||
{{ isManageMode ? "ofertas" : "transações" }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,10 +9,12 @@ const etherStore = useEtherStore();
|
||||
const { walletAddress } = storeToRefs(etherStore);
|
||||
const allUserTransactions = ref<any[]>([]);
|
||||
|
||||
if (walletAddress.value) {
|
||||
await blockchain.listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
|
||||
if (res) allUserTransactions.value = res;
|
||||
});
|
||||
if (walletAddress.value) {
|
||||
await blockchain
|
||||
.listAllTransactionByWalletAddress(walletAddress.value)
|
||||
.then((res) => {
|
||||
if (res) allUserTransactions.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
watch(walletAddress, async (newValue) => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import SearchComponent from "../components/SearchComponent.vue";
|
||||
import ValidationComponent from "../components/LoadingComponent.vue";
|
||||
import ListComponent from "@/components/ListComponent.vue";
|
||||
import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
|
||||
import blockchain from "../utils/blockchain";
|
||||
import { ref } from "vue";
|
||||
|
||||
@ -24,7 +24,7 @@ const tokenAmount = ref<number>();
|
||||
const lockTransactionHash = ref<string>("");
|
||||
const lockId = ref<string>("");
|
||||
const loadingRelease = ref<Boolean>(false);
|
||||
const lastWalletReleaseTransactions = ref<any[] | undefined>([]);
|
||||
const lastWalletReleaseTransactions = ref<any[]>([]);
|
||||
|
||||
const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
|
||||
// finish buy screen
|
||||
@ -72,10 +72,12 @@ const releaseTransaction = async ({ e2eId }: any) => {
|
||||
);
|
||||
release.wait();
|
||||
|
||||
lastWalletReleaseTransactions.value =
|
||||
await blockchain.listReleaseTransactionByWalletAddress(
|
||||
walletAddress.value.toLowerCase()
|
||||
);
|
||||
await blockchain
|
||||
.listReleaseTransactionByWalletAddress(walletAddress.value.toLowerCase())
|
||||
.then((releaseTransactions) => {
|
||||
if (releaseTransactions)
|
||||
lastWalletReleaseTransactions.value = releaseTransactions;
|
||||
});
|
||||
|
||||
await blockchain.updateWalletStatus();
|
||||
loadingRelease.value = false;
|
||||
@ -101,7 +103,7 @@ const releaseTransaction = async ({ e2eId }: any) => {
|
||||
/>
|
||||
</div>
|
||||
<div v-if="flowStep == Step.List">
|
||||
<ListComponent
|
||||
<BuyConfirmedComponent
|
||||
v-if="!loadingRelease"
|
||||
:last-wallet-release-transactions="lastWalletReleaseTransactions"
|
||||
:tokenAmount="tokenAmount"
|
||||
|
||||
@ -8,7 +8,6 @@ import { ref, watch } from "vue";
|
||||
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
|
||||
const { walletAddress } = storeToRefs(etherStore);
|
||||
const depositList = ref<any[]>([]);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user