Skip to content

CLS 202 Enhanced account page #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xdeq merged 4 commits into from
Feb 22, 2024
Merged

CLS 202 Enhanced account page #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f19540
Fix button padding when result is empty
GusevPM Jan 30, 2024
c028348
Add messages tab on account page
GusevPM Jan 30, 2024
70d48b0
Merge branch 'dev' into CLS-202-enhanced-account-page
GusevPM Feb 15, 2024
2d23294
Feractoring addresses table
GusevPM Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 57 additions & 6 deletions components/modules/address/AddressOverview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import Input from "@/components/ui/Input.vue"

/** Components */
import TransactionsTable from "./TransactionsTable.vue"
import MessagesTable from "@/components/modules/namespace/tables/MessagesTable.vue"
import BlobsTable from "@/components/modules/namespace/tables/BlobsTable.vue"

/** Services */
import { comma } from "@/services/utils"
import { MsgTypes } from "@/services/constants/messages"

/** API */
import { fetchTxsByAddressHash, fetchBlobsByAddressHash } from "@/services/api/address"
import { fetchTxsByAddressHash, fetchMessagesByAddressHash, fetchBlobsByAddressHash } from "@/services/api/address"

/** Store */
import { useModalsStore } from "@/store/modals"
Expand Down Expand Up @@ -48,6 +49,7 @@ const activeTab = ref("transactions")

const isRefetching = ref(false)
const transactions = ref([])
const messages = ref([])
const blobs = ref([])

const page = ref(1)
Expand Down Expand Up @@ -247,6 +249,22 @@ const getTransactions = async () => {
isRefetching.value = false
}

const getMessages = async () => {
isRefetching.value = true

const { data } = await fetchMessagesByAddressHash({
hash: props.address.hash,
limit: 10,
offset: (page.value - 1) * 10,
sort: "desc",
})

messages.value = data.value
cacheStore.current.messages = messages.value

isRefetching.value = false
}

const getBlobs = async () => {
isRefetching.value = true

Expand Down Expand Up @@ -280,6 +298,10 @@ watch(
case "blobs":
getBlobs()
break

case "messages":
getMessages()
break
}
},
)
Expand All @@ -295,6 +317,10 @@ watch(
case "blobs":
getBlobs()
break

case "messages":
getMessages()
break
}
},
)
Expand Down Expand Up @@ -457,7 +483,18 @@ const handleOpenQRModal = () => {
>
<Icon name="tx" size="12" color="secondary" />

<Text size="13" weight="600">Transactions</Text>
<Text size="13" weight="600">Signed Transactions</Text>
</Flex>

<Flex
@click="activeTab = 'messages'"
align="center"
gap="6"
:class="[$style.tab, activeTab === 'messages' && $style.active]"
>
<Icon name="message" size="12" color="secondary" />

<Text size="13" weight="600">Messages</Text>
</Flex>

<Flex
Expand All @@ -476,7 +513,7 @@ const handleOpenQRModal = () => {
<Flex direction="column" justify="center" :class="[$style.tables, isRefetching && $style.disabled]">
<Flex v-if="activeTab === 'transactions'" wrap="wrap" align="center" gap="8" :class="$style.filters">
<Popover :open="isStatusPopoverOpen" @on-close="onStatusPopoverClose" width="200">
<Button @click="handleOpenStatusPopover" type="secondary" size="mini">
<Button @click="handleOpenStatusPopover" type="secondary" size="mini" :disabled="!transactions.length">
<Icon name="plus-circle" size="12" color="tertiary" />
<Text color="secondary">Status</Text>

Expand Down Expand Up @@ -514,7 +551,7 @@ const handleOpenQRModal = () => {
</Popover>

<Popover :open="isMessageTypePopoverOpen" @on-close="onMessageTypePopoverClose" width="250">
<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini">
<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini" :disabled="!transactions.length">
<Icon name="plus-circle" size="12" color="tertiary" />
<Text color="secondary">Message Type</Text>

Expand Down Expand Up @@ -608,16 +645,29 @@ const handleOpenQRModal = () => {
<Flex v-else direction="column" align="center" justify="center" gap="8" :class="$style.empty">
<Text size="13" weight="600" color="secondary" align="center"> No transactions </Text>
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
This address does not contain transactions of the selected type
This address did not signed any transactions
</Text>
</Flex>
</template>

<!-- Messages Table -->
<template v-if="activeTab === 'messages'">
<MessagesTable v-if="messages.length" :messages="messages" />

<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
<Text size="13" weight="600" color="secondary" align="center"> No Messages </Text>
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
No activity with this address
</Text>
</Flex>
</template>

<!-- Blobs Table -->
<template v-if="activeTab === 'blobs'">
<BlobsTable v-if="blobs.length" :blobs="blobs" />

<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
<Text size="13" weight="600" color="secondary" align="center"> No Blobs</Text>
<Text size="13" weight="600" color="secondary" align="center"> No Blobs </Text>
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
This address did not push any blobs
</Text>
Expand Down Expand Up @@ -763,6 +813,7 @@ const handleOpenQRModal = () => {
flex: 1;

padding-top: 16px;
padding-bottom: 16px;
}

.pagination {
Expand Down
44 changes: 29 additions & 15 deletions pages/addresses.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,28 +169,42 @@ const handleLast = async () => {
</thead>

<tbody>
<tr v-for="address in addresses" @click="router.push(`/address/${address.hash}`)">
<tr v-for="address in addresses">
<td style="width: 1px">
<Tooltip position="start" delay="500">
<Flex align="center" gap="8">
<AddressBadge :hash="address.hash" />

<CopyButton :text="address.hash" />
</Flex>

<template #content>
{{ address.hash }}
</template>
</Tooltip>
<NuxtLink :to="`/address/${address.hash}`">
<Tooltip position="start" delay="500">
<Flex align="center" gap="8">
<AddressBadge :hash="address.hash" />

<CopyButton :text="address.hash" />
</Flex>

<template #content>
{{ address.hash }}
</template>
</Tooltip>
</NuxtLink>
</td>
<td>
<Text size="13" weight="600" color="primary"> {{ comma(tia(address.balance.value)) }} TIA </Text>
<NuxtLink :to="`/address/${address.hash}`">
<Text size="13" weight="600" color="primary">
{{ comma(tia(address.balance.value)) }} TIA
</Text>
</NuxtLink>
</td>
<td>
<Text size="13" weight="600" color="primary"> {{ comma(address.first_height) }} </Text>
<NuxtLink :to="`/address/${address.hash}`">
<Text size="13" weight="600" color="primary">
{{ comma(address.first_height) }}
</Text>
</NuxtLink>
</td>
<td>
<Text size="13" weight="600" color="primary"> {{ comma(address.last_height) }} </Text>
<NuxtLink :to="`/address/${address.hash}`">
<Text size="13" weight="600" color="primary">
{{ comma(address.last_height) }}
</Text>
</NuxtLink>
</td>
</tr>
</tbody>
Expand Down
16 changes: 16 additions & 0 deletions services/api/address.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,22 @@ export const fetchTxsByAddressHash = async ({ limit, offset, sort, hash, status,
}
}

export const fetchMessagesByAddressHash = async ({ limit, offset, sort, hash, msg_type }) => {
try {
const url = new URL(`${useServerURL()}/address/${hash}/messages`)

if (limit) url.searchParams.append("limit", limit)
if (offset) url.searchParams.append("offset", offset)
if (sort) url.searchParams.append("sort", sort)
if (msg_type) url.searchParams.append("msg_type", msg_type)

const data = await useFetch(url.href)
return data
} catch (error) {
console.error(error)
}
}

export const fetchBlobsByAddressHash = async ({ limit, offset, sort, hash }) => {
try {
const url = new URL(`${useServerURL()}/address/${hash}/blobs`)
Expand Down