Skip to content

Commit

Permalink
v1.2.0
Browse files Browse the repository at this point in the history 
v1.2.0
  • Loading branch information
@GusevPM
GusevPM authored Dec 27, 2024
2 parents 8644189 + 6534c2b commit 5de9e50
Show file tree
Hide file tree
Showing 47 changed files with 5,892 additions and 3,162 deletions.
7 changes: 6 additions & 1 deletion app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,18 @@ import { fetchHead } from "@/services/api/main"
/** Store */
import { useAppStore } from "@/store/app"
import { useEnumStore } from "@/store/enums"
const appStore = useAppStore()
const enumStore = useEnumStore()
onMounted(async () => {
const head = await fetchHead()
if (head) appStore.lastHead = head
enumStore.init()
Socket.init()
window.onbeforeunload = function () {
Socket.close()
}
Expand All @@ -33,6 +37,7 @@ onMounted(async () => {
<div id="tooltip" />
<div id="modal" />
<div id="dropdown" />
<div id="popover" />

<ClientOnly>
<ModalsManager />
Expand Down
9 changes: 8 additions & 1 deletion assets/icons.json
View file

Large diffs are not rendered by default.

192 changes: 192 additions & 0 deletions components/Feed.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<script setup>
/** Vendor */
import { DateTime } from "luxon"
/** Services */
import { comma, formatBytes, abbreviate } from "@/services/utils"
/** UI */
import Tooltip from "@/components/ui/Tooltip.vue"
/** API */
// import { fetchPriceSeries } from "@/services/api/stats"
/** Store */
import { useAppStore } from "@/store/app"
const appStore = useAppStore()
const head = computed(() => appStore.lastHead)
</script>

<template>
<Flex tag="section" justify="center" wide :class="$style.wrapper">
<Flex align="center" justify="center" gap="24" wide :class="$style.container">
<Flex align="center" gap="20" :class="$style.stats">
<Tooltip>
<Flex align="center" gap="6" :class="$style.stat">
<Icon name="tx" size="12" color="secondary" :class="$style.icon" />
<Flex align="center" gap="4">
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Txs:</Text>

<Text v-if="head.total_tx" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(head.total_tx) }}</Text>
<Skeleton v-else w="20" h="12" />
</Flex>
</Flex>

<template #content>
{{ comma(head.total_tx) }}
</template>
</Tooltip>

<div :class="$style.dot" />

<Tooltip disabled>
<Flex align="center" gap="6" :class="$style.stat">
<Icon name="account" size="12" color="secondary" :class="$style.icon" />
<Flex align="center" gap="4">
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Accounts:</Text>

<Text v-if="head.total_accounts" size="12" weight="600" noWrap :class="$style.value">
{{ abbreviate(head.total_accounts) }}
</Text>
<Skeleton v-else w="20" h="12" />
</Flex>
</Flex>

<template #content> {{ comma(head.total_accounts) }} </template>
</Tooltip>

<div :class="$style.dot" />

<Tooltip disabled>
<Flex align="center" gap="6" :class="$style.stat">
<Icon name="rollup" size="12" color="secondary" :class="$style.icon" />
<Flex align="center" gap="4">
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Rollups:</Text>

<Text v-if="head.total_rollups" size="12" weight="600" noWrap :class="$style.value">
{{ abbreviate(head.total_rollups) }}
</Text>
<Skeleton v-else w="20" h="12" />
</Flex>
</Flex>

<template #content> {{ comma(head.total_rollups) }} </template>
</Tooltip>

<div :class="$style.dot" />

<Tooltip disabled>
<Flex align="center" gap="6" :class="$style.stat">
<Icon name="bridge" size="12" color="secondary" :class="$style.icon" />
<Flex align="center" gap="4">
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Bridges:</Text>

<Text v-if="head.total_bridges" size="12" weight="600" noWrap :class="$style.value">
{{ abbreviate(head.total_bridges) }}
</Text>
<Skeleton v-else w="20" h="12" />
</Flex>
</Flex>

<template #content> {{ comma(head.total_bridges) }} </template>
</Tooltip>

<div :class="$style.dot" />

<Tooltip>
<Flex align="center" gap="6" :class="$style.stat">
<Icon name="folder" size="12" color="secondary" :class="$style.icon" />
<Flex align="center" gap="4">
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Bytes Pushed:</Text>

<Text v-if="head.total_bytes" size="12" weight="600" noWrap :class="$style.value">
{{ formatBytes(head.total_bytes) }}
</Text>
<Skeleton v-else w="20" h="12" />
</Flex>
</Flex>

<template #content> {{ `${comma(head.total_bytes)} Bytes` }} </template>
</Tooltip>
</Flex>
</Flex>
</Flex>
</template>

<style module>
.wrapper {
height: 32px;
border-bottom: 1px solid var(--op-5);
background: var(--feed-background);
}
.container {
max-width: var(--base-width);
height: 100%;
margin: 0 24px;
&::-webkit-scrollbar {
display: none;
}
}
.dot {
width: 4px;
height: 4px;
background-color: var(--op-10);
border-radius: 50%;
}
.key,
.value,
.icon {
transition: all 0.2s ease;
}
.value {
color: var(--op-40);
}
.stat:hover {
.icon {
fill: var(--txt-primary);
}
.key {
color: var(--txt-secondary);
}
.value {
color: var(--txt-secondary);
}
}
@media (max-width: 900px) {
.wrapper {
height: initial;
padding: 12px 0;
}
.container {
flex-direction: column;
}
.stats {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 500px) {
.container {
margin: 0 12px;
}
}
</style>
Loading

0 comments on commit 5de9e50

Please sign in to comment.