Skip to content

Commit 35039f2

Browse files
GusevPMGusevPM
committed
Add links to navigation and cmd plus proposers links
1 parent 9f44b33 commit 35039f2

File tree

8 files changed

+82
-57
lines changed

8 files changed

+82
-57
lines changed

‎components/TheFooter.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -145,15 +145,18 @@ const handleChangeTheme = (theme) => {
145145
<NuxtLink to="/blocks" :class="$style.link">
146146
<Text size="12" weight="500" color="tertiary"> Blocks </Text>
147147
</NuxtLink>
148+
<NuxtLink to="/validators" :class="$style.link">
149+
<Text size="12" weight="500" color="tertiary"> Validators </Text>
150+
</NuxtLink>
148151
<NuxtLink to="/txs" :class="$style.link">
149152
<Text size="12" weight="500" color="tertiary"> Transactions </Text>
150153
</NuxtLink>
151-
<NuxtLink to="/namespaces" :class="$style.link">
152-
<Text size="12" weight="500" color="tertiary"> Namespaces </Text>
153-
</NuxtLink>
154154
<NuxtLink to="/rollups" :class="$style.link">
155155
<Text size="12" weight="500" color="tertiary"> Rollups </Text>
156156
</NuxtLink>
157+
<NuxtLink to="/namespaces" :class="$style.link">
158+
<Text size="12" weight="500" color="tertiary"> Namespaces </Text>
159+
</NuxtLink>
157160
<NuxtLink to="/addresses" :class="$style.link">
158161
<Text size="12" weight="500" color="tertiary"> Addresses </Text>
159162
</NuxtLink>

‎components/TheHeader.vue‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ const isActive = (link) => {
7575
case "rollups":
7676
return splittedPath.includes("rollup") || splittedPath.includes("rollups")
7777
78+
case "rollups":
79+
return splittedPath.includes("validator") || splittedPath.includes("validators")
80+
7881
default:
7982
break
8083
}
@@ -117,6 +120,10 @@ const handleConnect = async () => {
117120
<Text size="13" weight="600" color="tertiary">Explore</Text>
118121
</NuxtLink>
119122

123+
<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
124+
<Text size="13" weight="600" color="tertiary">Rollups</Text>
125+
</NuxtLink>
126+
120127
<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
121128
<Text size="13" weight="600" color="tertiary">Transactions</Text>
122129
</NuxtLink>
@@ -125,12 +132,12 @@ const handleConnect = async () => {
125132
<Text size="13" weight="600" color="tertiary">Blocks</Text>
126133
</NuxtLink>
127134

128-
<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
129-
<Text size="13" weight="600" color="tertiary">Namespaces</Text>
135+
<NuxtLink to="/validators" :class="[$style.link, isActive('validators') && $style.active]">
136+
<Text size="13" weight="600" color="tertiary">Validators</Text>
130137
</NuxtLink>
131138

132-
<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
133-
<Text size="13" weight="600" color="tertiary">Rollups</Text>
139+
<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
140+
<Text size="13" weight="600" color="tertiary">Namespaces</Text>
134141
</NuxtLink>
135142
</Flex>
136143

@@ -188,6 +195,10 @@ const handleConnect = async () => {
188195
<Text size="13" weight="600" color="tertiary">Explore</Text>
189196
</NuxtLink>
190197

198+
<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
199+
<Text size="13" weight="600" color="tertiary">Rollups</Text>
200+
</NuxtLink>
201+
191202
<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
192203
<Text size="13" weight="600" color="tertiary">Transactions</Text>
193204
</NuxtLink>
@@ -196,13 +207,14 @@ const handleConnect = async () => {
196207
<Text size="13" weight="600" color="tertiary">Blocks</Text>
197208
</NuxtLink>
198209

210+
<NuxtLink to="/validators" :class="[$style.link, isActive('validators') && $style.active]">
211+
<Text size="13" weight="600" color="tertiary">Validators</Text>
212+
</NuxtLink>
213+
199214
<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
200215
<Text size="13" weight="600" color="tertiary">Namespaces</Text>
201216
</NuxtLink>
202217

203-
<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
204-
<Text size="13" weight="600" color="tertiary">Rollups</Text>
205-
</NuxtLink>
206218
</Flex>
207219
</Flex>
208220
</template>

‎components/cmd/CommandMenu.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,15 @@ const rawNavigationActions = [
251251
router.push("/blocks")
252252
},
253253
},
254+
{
255+
type: "callback",
256+
icon: "arrow-narrow-right",
257+
title: "Go to Validators",
258+
runText: "Open Validators",
259+
callback: () => {
260+
router.push("/validators")
261+
},
262+
},
254263
{
255264
type: "callback",
256265
icon: "arrow-narrow-right",
@@ -1239,7 +1248,7 @@ const runBounce = () => {
12391248
<input
12401249
v-model="searchTerm"
12411250
ref="inputEl"
1242-
:placeholder="placeholder || 'Find blocks, namespaces, rollups, transactions or quick actions...'"
1251+
:placeholder="placeholder || 'Find blocks, validators, namespaces, rollups, transactions or quick actions...'"
12431252
tabindex="1"
12441253
autocomplete="off"
12451254
autocorrect="off"

‎components/data/BlocksTimeline/BlocksTimelineTable.vue‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Button from "@/components/ui/Button.vue"
77
import Tooltip from "@/components/ui/Tooltip.vue"
88
99
/** Services */
10-
import { tia, comma, space, formatBytes, getNamespaceID } from "@/services/utils"
10+
import { comma, formatBytes, getNamespaceID, shortHex, space, tia } from "@/services/utils"
1111
1212
/** API */
1313
import { fetchBlockNamespaces } from "@/services/api/block"
@@ -342,28 +342,17 @@ watch(
342342
<Text size="12" weight="600" color="tertiary">Proposer</Text>
343343
344344
<Flex direction="column" gap="8">
345-
<Text size="13" weight="600" color="primary">
346-
{{ preview.block.proposer.moniker }}
347-
</Text>
345+
<NuxtLink :to="`/validator/${preview.block.proposer.id}`">
346+
<Text size="13" weight="600" color="primary">
347+
{{ preview.block.proposer.moniker }}
348+
</Text>
349+
</NuxtLink>
348350
349351
<Flex align="center" gap="6">
350-
<Text size="12" weight="600" color="tertiary" mono>{{
351-
preview.block.proposer.cons_address.slice(0, 4)
352+
<Text size="12" weight="600" color="tertiary">{{
353+
shortHex(preview.block.proposer.cons_address)
352354
}}</Text>
353355
354-
<Flex align="center" gap="3">
355-
<div v-for="dot in 3" class="dot" />
356-
</Flex>
357-
358-
<Text size="12" weight="600" color="tertiary" mono>
359-
{{
360-
preview.block.proposer.cons_address.slice(
361-
preview.block.proposer.cons_address.length - 4,
362-
preview.block.proposer.cons_address.length,
363-
)
364-
}}
365-
</Text>
366-
367356
<CopyButton :text="preview.block.proposer.cons_address" size="10" />
368357
</Flex>
369358
</Flex>

‎components/modules/block/BlockOverview.vue‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Badge from "@/components/ui/Badge.vue"
1212
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
1313
1414
/** Services */
15-
import { tia, comma, space, formatBytes, reverseMapping } from "@/services/utils"
15+
import { comma, formatBytes, reverseMapping, space, shortHex, tia } from "@/services/utils"
1616
1717
/** API */
1818
import { fetchTransactionsByBlock } from "@/services/api/tx"
@@ -301,25 +301,14 @@ const handleViewRawTransactions = () => {
301301
<Text size="12" weight="600" color="tertiary">Proposer</Text>
302302
303303
<Flex direction="column" gap="8">
304-
<Text size="13" weight="600" color="primary">
305-
{{ block.proposer.moniker }}
306-
</Text>
304+
<NuxtLink :to="`/validator/${block.proposer.id}`">
305+
<Text size="13" weight="600" color="primary">
306+
{{ block.proposer.moniker }}
307+
</Text>
308+
</NuxtLink>
307309
308310
<Flex align="center" gap="6">
309-
<Text size="12" weight="600" color="tertiary" mono>{{ block.proposer.cons_address.slice(0, 4) }}</Text>
310-
311-
<Flex align="center" gap="3">
312-
<div v-for="dot in 3" class="dot" />
313-
</Flex>
314-
315-
<Text size="12" weight="600" color="tertiary" mono>
316-
{{
317-
block.proposer.cons_address.slice(
318-
block.proposer.cons_address.length - 4,
319-
block.proposer.cons_address.length,
320-
)
321-
}}
322-
</Text>
311+
<Text size="12" weight="600" color="tertiary">{{ shortHex(block.proposer.cons_address) }}</Text>
323312
324313
<CopyButton :text="block.proposer.cons_address" size="10" />
325314
</Flex>

‎components/modules/validator/ValidatorOverview.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@ import Tooltip from "@/components/ui/Tooltip.vue"
77
import BlocksTable from "./tables/BlocksTable.vue"
88
99
/** Services */
10-
import { comma, numToPercent, splitAddress } from "@/services/utils"
10+
import { comma, numToPercent, shortHex, splitAddress } from "@/services/utils"
1111
1212
/** API */
1313
import { fetchValidatorBlocks, fetchValidatorUptime } from "@/services/api/validator";
1414
1515
/** Store */
1616
import { useCacheStore } from "@/store/cache"
17-
import { useAppStore } from "@/store/app"
18-
const appStore = useAppStore()
1917
const cacheStore = useCacheStore()
2018
2119
const props = defineProps({
@@ -36,7 +34,6 @@ const activeTab = ref(tabs.value[0].name)
3634
const isRefetching = ref(false)
3735
const blocks = ref([])
3836
const uptime = ref([])
39-
const lastBlock = computed(() => appStore.latestBlocks[0])
4037
4138
const page = ref(1)
4239
// const pages = computed(() => activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1)
@@ -185,7 +182,7 @@ watch(
185182
186183
<Flex v-if="!parsedContacts.length && validator.contacts" align="center" justify="between">
187184
<Text size="12" weight="600" color="tertiary">Contact</Text>
188-
<Text size="12" weight="600" color="secondary"> {{ validator.contacts }} </Text>
185+
<Text size="12" weight="600" color="tertiary" selectable> {{ validator.contacts }} </Text>
189186
</Flex>
190187
191188
<Flex align="center" justify="between">
@@ -199,7 +196,7 @@ watch(
199196
<Flex align="center" justify="between">
200197
<Text size="12" weight="600" color="tertiary">Consensus Address</Text>
201198
<Flex gap="6">
202-
<Text size="12" weight="600" color="tertiary"> {{ splitAddress(validator.cons_address) }} </Text>
199+
<Text size="12" weight="600" color="tertiary"> {{ shortHex(validator.cons_address) }} </Text>
203200
<CopyButton :text="validator.cons_address" />
204201
</Flex>
205202
</Flex>

‎components/widgets/TemporaryWidget.vue‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,15 @@ const totalValidators = computed(() => appStore.lastHead?.total_validators)
2626
</Flex>
2727
2828
<Flex direction="column" gap="24" :class="$style.bottom">
29-
<Flex align="center" gap="6">
30-
<Icon name="address" size="12" color="secondary" />
31-
<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
29+
<Flex align="center" justify="between">
30+
<Flex align="center" gap="6">
31+
<Icon name="validator" size="12" color="secondary" />
32+
<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
33+
</Flex>
34+
35+
<NuxtLink :to="'/validators'" :class="$style.link">
36+
<Text size="11" weight="600" height="110" color="tertiary">View All</Text>
37+
</NuxtLink>
3238
</Flex>
3339
3440
<Tooltip v-if="totalValidators" position="start">
@@ -118,6 +124,18 @@ const totalValidators = computed(() => appStore.lastHead?.total_validators)
118124
}
119125
}
120126
127+
.link {
128+
height: 24px;
129+
130+
& span {
131+
transition: all 0.2s ease;
132+
133+
&:hover {
134+
color: var(--txt-primary);
135+
}
136+
}
137+
}
138+
121139
@media (max-width: 1100px) {
122140
.wrapper {
123141
flex-direction: row;

‎services/utils/general.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ export const strToHex = (str) => {
3535
return hex
3636
}
3737

38+
export const shortHex = (hex) => {
39+
if (hex.length > 16) {
40+
return `${hex.slice(0, 8)} ••• ${hex.slice(-8)}`
41+
} else {
42+
return hex
43+
}
44+
}
45+
3846
export const splitAddress = (address, format = "string") => {
3947
if (address.startsWith("celestiavaloper")) {
4048
return format === "array" ? [`celestiavaloper`, address.slice(-4)] : `celestiavaloper ••• ${address.slice(-4)}`

0 commit comments

Comments
 (0)