33import { DateTime } from " luxon"
44
55/** Services */
6- import { comma , formatBytes , abbreviate } from " @/services/utils"
6+ import { abbreviate , comma , formatBytes , isMainnet , roundTo } from " @/services/utils"
7+ import { getRankCategory } from " @/services/constants/rollups"
78
89/** UI */
910import Tooltip from " @/components/ui/Tooltip.vue"
@@ -13,7 +14,9 @@ import { fetchPriceSeries } from "@/services/api/stats"
1314
1415/** Store */
1516import { useAppStore } from " @/store/app"
17+ import { useRollupsRankingStore } from " @/store/rollupsrank"
1618const appStore = useAppStore ()
19+ const rollupRankingStore = useRollupsRankingStore ()
1720
1821const head = computed (() => appStore .lastHead )
1922const currentPrice = computed (() => appStore .currentPrice )
@@ -22,6 +25,18 @@ const totalSupply = computed(() => head.value.total_supply / 1_000_000)
2225const totalSupplyUSD = computed (() => totalSupply .value * currentPrice .value ? .close )
2326const totalFees = computed (() => head .value .total_fee / 1_000_000 )
2427const totalFeesUSD = computed (() => totalFees .value * currentPrice .value ? .close )
28+ const topRollup = computed (() => {
29+ let rankCategory = getRankCategory (roundTo (rollupRankingStore? .rollups_ranking ? .top_rollup ? .rank / 10 , 0 ))
30+ return {
31+ slug: rollupRankingStore? .rollups_ranking ? .top_rollup ? .slug ,
32+ name: rollupRankingStore? .rollups_ranking ? .top_rollup ? .name ,
33+ rank: {
34+ name: rankCategory? .name ,
35+ score: rollupRankingStore? .rollups_ranking ? .top_rollup ? .rank ,
36+ color: rankCategory? .color ,
37+ }
38+ }
39+ })
2540
2641const series = ref ([])
2742const price = reactive ({
@@ -49,14 +64,46 @@ onMounted(async () => {
4964< template>
5065 < Flex tag= " section" = " center" : class = " $style.wrapper" >
5166 < Flex align= " center" = " between" = " 24" : class = " $style.container" >
52- < Flex align= " center" = " 20" : class = " $style.stats" >
67+ < Flex align= " center" = " 8" : class = " $style.stats" >
68+ < template v- if = " isMainnet()" >
69+ < NuxtLink : to= " `/rollup/rank/${topRollup?.slug}`" >
70+ < Tooltip>
71+ < Flex align= " center" = " 6" : class = " $style.stat" >
72+ < Icon v- if = " topRollup?.name" = " laurel" = " 14" : color= " topRollup?.rank?.color" : style= " {marginTop: '1px'}" / >
73+ < Icon v- else name= " laurel" = " 14" = " tertiary" : class = " $style.icon" : style= " {marginTop: '1px'}" / >
74+ < Flex align= " center" = " 4" >
75+ < Text size= " 12" = " 500" = " tertiary" : class = " $style.key" > Top Rollup: < / Text >
76+
77+ < Text v- if = " topRollup?.name" = " 12" = " 600" = " secondary" : class = " $style.value" > {{ topRollup? .name }} < / Text >
78+ < Skeleton v- else w= " 40" = " 12" / >
79+ < / Flex>
80+ < / Flex>
81+
82+ < template #content>
83+ < Flex direction= " column" = " 8" >
84+ < Flex align= " center" = " between" = " 8" >
85+ < Text size= " 12" = " 500" = " tertiary" > Rank: < / Text >
86+ < Text size= " 12" = " 600" : color= " topRollup?.rank?.color" > {{ topRollup? .rank ? .name }} < / Text >
87+ < / Flex>
88+ < Flex align= " center" = " between" = " 8" >
89+ < Text size= " 12" = " 500" = " tertiary" > Score: < / Text >
90+ < Text size= " 12" = " 600" = " secondary" > {{ topRollup? .rank ? .score }}% < / Text >
91+ < / Flex>
92+ < / Flex>
93+ < / template>
94+ < / Tooltip>
95+ < / NuxtLink>
96+
97+ < div : class = " $style.dot" / >
98+ < / template>
99+
53100 < Tooltip>
54101 < Flex align= " center" = " 6" : class = " $style.stat" >
55102 < Icon name= " tx" = " 12" = " secondary" : class = " $style.icon" / >
56103 < Flex align= " center" = " 4" >
57104 < Text size= " 12" = " 500" = " tertiary" : class = " $style.key" > Total Txs: < / Text >
58105
59- < Text v- if = " head" = " 12" = " 600" : class = " $style.value" > {{ abbreviate (head .total_tx ) }}< / Text >
106+ < Text v- if = " head.total_tx " = " 12" = " 600" : class = " $style.value" > {{ abbreviate (head .total_tx ) }}< / Text >
60107 < Skeleton v- else w= " 40" = " 12" / >
61108 < / Flex>
62109 < / Flex>
@@ -74,10 +121,10 @@ onMounted(async () => {
74121 < Flex align= " center" = " 4" >
75122 < Text size= " 12" = " 500" = " tertiary" : class = " $style.key" > Total Supply: < / Text >
76123
77- < Text v- if = " head" = " 12" = " 600" : class = " $style.value" >
124+ < Text v- if = " head.total_supply " = " 12" = " 600" : class = " $style.value" >
78125 {{ abbreviate (totalSupply, 2 ) }} TIA
79126 < / Text >
80- < Skeleton v- else w= " 55 " = " 12" / >
127+ < Skeleton v- else w= " 40 " = " 12" / >
81128 < / Flex>
82129 < / Flex>
83130
@@ -92,10 +139,10 @@ onMounted(async () => {
92139 < Flex align= " center" = " 4" >
93140 < Text size= " 12" = " 500" = " tertiary" : class = " $style.key" > Total Blobs Size: < / Text >
94141
95- < Text v- if = " head" = " 12" = " 600" : class = " $style.value" > {{
142+ < Text v- if = " head.total_blobs_size " = " 12" = " 600" : class = " $style.value" > {{
96143 formatBytes (head .total_blobs_size )
97144 }}< / Text >
98- < Skeleton v- else w= " 60 " = " 12" / >
145+ < Skeleton v- else w= " 40 " = " 12" / >
99146 < / Flex>
100147 < / Flex>
101148
@@ -110,10 +157,10 @@ onMounted(async () => {
110157 < Flex align= " center" = " 4" >
111158 < Text size= " 12" = " 500" = " tertiary" : class = " $style.key" > Total Fees: < / Text >
112159
113- < Text v- if = " head" = " 12" = " 600" : class = " $style.value" >
160+ < Text v- if = " head.total_fee " = " 12" = " 600" : class = " $style.value" >
114161 {{ abbreviate (parseInt (totalFees)) }} TIA
115162 < / Text >
116- < Skeleton v- else w= " 55 " = " 12" / >
163+ < Skeleton v- else w= " 40 " = " 12" / >
117164 < / Flex>
118165 < / Flex>
119166
@@ -132,7 +179,7 @@ onMounted(async () => {
132179 < Skeleton v- else w= " 36" = " 12" / >
133180 < / Flex>
134181
135- < Flex v- if = " !isNaN( price.diff) " = " center" = " 4" >
182+ < Flex v- if = " price.diff" = " center" = " 4" >
136183 < Icon v- if = " price.side === 'rise'" = " arrow-circle-right-up" = " 12" = " neutral-green" / >
137184 < Icon v- else - if = " price.side === 'fall'" = " arrow-circle-right-down" = " 12" = " red" / >
138185
@@ -167,18 +214,20 @@ onMounted(async () => {
167214< style module >
168215.wrapper {
169216 height: 32px ;
217+ max- width: var (-- base- width);
170218
171219 border- top: 1px solid var (-- op- 5 );
172220 border- bottom: 1px solid var (-- op- 5 );
173-
174221 background: var (-- feed- background);
175222}
176223
177224.container {
178225 max- width: var (-- base- width);
179226 height: 100 % ;
227+ overflow: hidden;
228+ overflow- x: scroll;
180229
181- margin: 0 24px ;
230+ margin: 0 12px ;
182231
183232 & :: - webkit- scrollbar {
184233 display: none;
@@ -199,7 +248,7 @@ onMounted(async () => {
199248}
200249
201250.value {
202- color: var (-- op - 40 );
251+ color: var (-- txt - secondary );
203252}
204253
205254.stat : hover {
@@ -212,7 +261,7 @@ onMounted(async () => {
212261 }
213262
214263 .value {
215- color: var (-- txt- secondary );
264+ color: var (-- txt- primary );
216265 }
217266}
218267
0 commit comments