prepare ListingComponent to receive manager mode
This commit is contained in:
RcleydsonR
parent
7b9c3e0394
commit
3cf60f267d
6
src/assets/cancel.svg
Normal file
6
src/assets/cancel.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" fill="#1F2937" stroke="#1F2937" stroke-width="2"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6115 4.81333C11.7288 4.696 11.7288 4.50577 11.6115 4.38844C11.4942 4.27111 11.304 4.27111 11.1866 4.38844L8 7.57509L4.81337 4.38844C4.69604 4.27111 4.50581 4.27111 4.38849 4.38844C4.27116 4.50577 4.27116 4.696 4.38849 4.81333L7.57511 7.99998L4.38844 11.1867C4.27111 11.304 4.27111 11.4942 4.38844 11.6116C4.50577 11.7289 4.69599 11.7289 4.81332 11.6116L8 8.42487L11.1867 11.6116C11.304 11.7289 11.4942 11.7289 11.6116 11.6116C11.7289 11.4942 11.7289 11.304 11.6116 11.1867L8.42489 7.99998L11.6115 4.81333Z" fill="#F9FAFB"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17604 4.17599C4.4107 3.94134 4.79116 3.94133 5.02582 4.17599L8 7.1502L10.9742 4.176C11.2088 3.94133 11.5893 3.94133 11.824 4.176C12.0586 4.41066 12.0586 4.79111 11.824 5.02577L8.84977 7.99998L11.824 10.9742C12.0587 11.2089 12.0587 11.5893 11.824 11.824C11.5893 12.0587 11.2089 12.0587 10.9742 11.824L8 8.84975L5.02577 11.824C4.79111 12.0587 4.41065 12.0587 4.17599 11.824C3.94134 11.5893 3.94134 11.2089 4.17599 10.9742L7.15023 7.99998L4.17604 5.02577C3.94138 4.79111 3.94138 4.41065 4.17604 4.17599Z" fill="#F9FAFB"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99926 3.99922C4.33155 3.66693 4.8703 3.66693 5.20259 3.99922L8 6.79664L10.7974 3.99922C11.1297 3.66693 11.6684 3.66693 12.0007 3.99922C12.333 4.33151 12.333 4.87026 12.0007 5.20255L9.20333 7.99998L12.0008 10.7974C12.3331 11.1297 12.3331 11.6685 12.0008 12.0008C11.6685 12.3331 11.1297 12.3331 10.7975 12.0008L8 9.20331L5.20254 12.0008C4.87025 12.3331 4.33151 12.3331 3.99922 12.0008C3.66693 11.6685 3.66693 11.1297 3.99922 10.7974L6.79667 7.99998L3.99926 5.20255C3.66698 4.87026 3.66698 4.33151 3.99926 3.99922ZM4.6366 4.56522C4.6169 4.54552 4.58496 4.54552 4.56526 4.56522C4.54556 4.58491 4.54556 4.61685 4.56526 4.63655L7.92866 7.99998L4.56521 11.3634C4.54552 11.3831 4.54552 11.4151 4.56521 11.4348C4.58491 11.4545 4.61685 11.4545 4.63655 11.4348L8 8.07131L11.3635 11.4348C11.3832 11.4545 11.4151 11.4545 11.4348 11.4348C11.4545 11.4151 11.4545 11.3831 11.4348 11.3634L8.07133 7.99998L11.4347 4.63655C11.4544 4.61685 11.4544 4.58491 11.4347 4.56522C11.415 4.54552 11.3831 4.54552 11.3634 4.56522L8 7.92864L4.6366 4.56522Z" fill="#F9FAFB"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
8
src/assets/withdraw.svg
Normal file
8
src/assets/withdraw.svg
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="path-1-inside-1_968_914" fill="white">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z"/>
|
||||||
|
</mask>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z" fill="#1F2937"/>
|
||||||
|
<path d="M1.5 2H3.5V0H1.5V2ZM16.5 2V0H14.5V2H16.5ZM2 1C2 1.55228 1.55228 2 1 2V-2C-0.656854 -2 -2 -0.656854 -2 1H2ZM1 0C1.55228 0 2 0.447715 2 1H-2C-2 2.65685 -0.656854 4 1 4V0ZM1.5 0H1V4H1.5V0ZM3.5 14V2H-0.5V14H3.5ZM3.5 14H-0.5C-0.5 16.2091 1.29086 18 3.5 18V14ZM14.5 14H3.5V18H14.5V14ZM14.5 14V18C16.7091 18 18.5 16.2091 18.5 14H14.5ZM14.5 2V14H18.5V2H14.5ZM17 0H16.5V4H17V0ZM16 1C16 0.447715 16.4477 0 17 0V4C18.6569 4 20 2.65685 20 1H16ZM17 2C16.4477 2 16 1.55229 16 1H20C20 -0.656855 18.6569 -2 17 -2V2ZM14.5 2H17V-2H14.5V2ZM3.5 2H14.5V-2H3.5V2ZM1 2H3.5V-2H1V2Z" fill="#1F2937" mask="url(#path-1-inside-1_968_914)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99961 3.09998C9.49667 3.09998 9.89961 3.50292 9.89961 3.99998V9.91699L11.8828 8.05048C12.2447 7.70981 12.8143 7.72707 13.155 8.08903C13.4957 8.45099 13.4784 9.02057 13.1164 9.36124L9.61644 12.6554C9.2699 12.9815 8.72933 12.9815 8.38278 12.6554L4.88278 9.36124C4.52083 9.02057 4.50357 8.45099 4.84423 8.08903C5.1849 7.72707 5.75448 7.70981 6.11644 8.05048L8.09961 9.91699V3.99998C8.09961 3.50292 8.50256 3.09998 8.99961 3.09998Z" fill="#F9FAFB"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -65,50 +65,50 @@ const openEtherscanUrl = (url: string) => {
|
|||||||
>Últimas transações
|
>Últimas transações
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container min-w-[80%] gap-8">
|
<div class="blur-container min-w-[80%] gap-8">
|
||||||
<div class="flex flex-row justify-between w-full px-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">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">Tipo de transação</span>
|
||||||
<span class="text-xs text-gray-50 font-medium">Checar 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>
|
||||||
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,13 +1,21 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import blockchain from '@/utils/blockchain';
|
import blockchain from "@/utils/blockchain";
|
||||||
import { ref } from 'vue';
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
// props
|
||||||
|
const props = defineProps<{
|
||||||
|
walletTransactions: any[];
|
||||||
|
isManageMode: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
const itemsToShow = ref<any[]>([]);
|
const itemsToShow = ref<any[]>([]);
|
||||||
|
|
||||||
const props = defineProps<{
|
itemsToShow.value =
|
||||||
lastWalletReleaseTransactions: any[];
|
props.walletTransactions?.length > 3
|
||||||
}>();
|
? props.walletTransactions.slice(0, 3)
|
||||||
|
: props.walletTransactions;
|
||||||
|
|
||||||
|
// Methods
|
||||||
const formatEventsAmount = (amount: any) => {
|
const formatEventsAmount = (amount: any) => {
|
||||||
try {
|
try {
|
||||||
const formated = blockchain.formatBigNumber(amount);
|
const formated = blockchain.formatBigNumber(amount);
|
||||||
@ -22,68 +30,87 @@ const openEtherscanUrl = (url: string) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const loadMore = () => {
|
const loadMore = () => {
|
||||||
const itemsShowing = itemsToShow.value.length
|
const itemsShowing = itemsToShow.value.length;
|
||||||
if(props.lastWalletReleaseTransactions?.length > ( itemsShowing + 3))
|
if (props.walletTransactions?.length > itemsShowing + 3)
|
||||||
itemsToShow.value?.push(...props.lastWalletReleaseTransactions.slice(itemsShowing, itemsShowing + 3))
|
itemsToShow.value?.push(
|
||||||
else
|
...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
|
||||||
itemsToShow.value = props.lastWalletReleaseTransactions
|
);
|
||||||
|
else itemsToShow.value = props.walletTransactions;
|
||||||
};
|
};
|
||||||
|
|
||||||
itemsToShow.value = (props.lastWalletReleaseTransactions?.length > 3) ? props.lastWalletReleaseTransactions.slice(0, 3) : props.lastWalletReleaseTransactions;
|
//emits
|
||||||
|
const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="blur-container">
|
<div class="blur-container">
|
||||||
<div class="grid grid-cols-4 grid-flow-row w-full px-6">
|
<div class="grid grid-cols-4 grid-flow-row w-full px-6">
|
||||||
<span class="text-xs text-gray-50 font-medium justify-self-center">Valor</span>
|
<span class="text-xs text-gray-50 font-medium justify-self-center"
|
||||||
<span class="text-xs text-gray-50 font-medium justify-self-center">Data</span>
|
>Valor</span
|
||||||
<span class="text-xs text-gray-50 font-medium justify-self-center">Tipo de transação</span>
|
>
|
||||||
<span class="text-xs text-gray-50 font-medium justify-self-center">Checar transação</span>
|
<span class="text-xs text-gray-50 font-medium justify-self-center"
|
||||||
</div>
|
>Data</span
|
||||||
<div
|
>
|
||||||
class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
|
<span class="text-xs text-gray-50 font-medium justify-self-center">{{
|
||||||
v-for="item in itemsToShow"
|
props.isManageMode ? "Cancelar oferta" : "Tipo de transação"
|
||||||
:key="item?.blockNumber"
|
}}</span>
|
||||||
>
|
<span class="text-xs text-gray-50 font-medium justify-self-center">{{
|
||||||
<span class="last-release-info">
|
props.isManageMode ? "Retirar tokens" : "Checar transação"
|
||||||
{{ formatEventsAmount(item?.args.amount) }} BRZ
|
}}</span>
|
||||||
</span>
|
</div>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
|
||||||
|
v-for="item in itemsToShow"
|
||||||
|
:key="item?.blockNumber"
|
||||||
|
>
|
||||||
|
<span class="last-release-info">
|
||||||
|
{{ formatEventsAmount(item?.args.amount) }} BRZ
|
||||||
|
</span>
|
||||||
|
|
||||||
<span class="last-release-info">
|
<span class="last-release-info"> 20 out 2022 </span>
|
||||||
20 out 2022
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="last-release-info">
|
<div
|
||||||
{{ "Compra" }}
|
v-if="props.isManageMode"
|
||||||
</span>
|
class="flex gap-2 cursor-pointer items-center justify-self-center"
|
||||||
|
@click="emit('cancelDeposit')"
|
||||||
<div
|
>
|
||||||
class="flex gap-2 cursor-pointer items-center justify-self-center"
|
<span class="last-release-info">Cancelar</span>
|
||||||
@click="
|
<img alt="Cancel image" src="@/assets/cancel.svg" />
|
||||||
openEtherscanUrl(
|
|
||||||
`https://etherscan.io/tx/${item?.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 mt-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="text-white"
|
|
||||||
@click="loadMore()"
|
|
||||||
>
|
|
||||||
Carregar mais
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p class="font-bold" v-if="props.lastWalletReleaseTransactions?.length == 0">
|
|
||||||
Não há nenhuma transação anterior
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<span class="last-release-info" v-if="!props.isManageMode">
|
||||||
|
{{ "Compra" }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="props.isManageMode"
|
||||||
|
class="flex gap-2 cursor-pointer items-center justify-self-center"
|
||||||
|
@click="emit('withdrawDeposit')"
|
||||||
|
>
|
||||||
|
<span class="last-release-info">Retirar</span>
|
||||||
|
<img alt="Cancel image" src="@/assets/withdraw.svg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!props.isManageMode"
|
||||||
|
class="flex gap-2 cursor-pointer items-center justify-self-center"
|
||||||
|
@click="
|
||||||
|
openEtherscanUrl(`https://etherscan.io/tx/${item?.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 mt-2">
|
||||||
|
<button type="button" class="text-white" @click="loadMore()">
|
||||||
|
Carregar mais
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="font-bold" v-if="props.walletTransactions?.length == 0">
|
||||||
|
Não há nenhuma transação anterior
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -107,7 +134,7 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.blur-container {
|
.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;
|
@apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-container {
|
.grid-container {
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page">Histórico de ofertas</div>
|
<div class="page">Histórico de ofertas</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user