Ms 2 part 3

app.vue

@@ -23,13 +23,15 @@ import { useSettingsStore } from "@/store/settings"
 import { useEnumStore } from "@/store/enums"
 import { useLegalStore } from "@/store/legal"
 import { useNotificationsStore } from "@/store/notifications"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
 const settingsStore = useSettingsStore()
 const enumStore = useEnumStore()
 const legalStore = useLegalStore()
 const notificationsStore = useNotificationsStore()
+const rollupsRankingStore = useRollupsRankingStore()
 
 bookmarksStore.$subscribe((mutation, state) => {
 	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
@@ -40,6 +42,9 @@ settingsStore.$subscribe((mutation, state) => {
 legalStore.$subscribe((mutation, state) => {
 	localStorage.setItem("legal", JSON.stringify(state.legal))
 })
+rollupsRankingStore.$subscribe((mutation, state) => {
+	localStorage.setItem("rollups_ranking", JSON.stringify(state.rollups_ranking))
+})
 
 onMounted(async () => {
 	if (localStorage.bookmarks) {
@@ -51,6 +56,7 @@ onMounted(async () => {
 	}
 
 	settingsStore.init()
+	rollupsRankingStore.init()
 
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)

assets/icons.json

@@ -141,6 +141,7 @@
 	"time": "M 16.764 13.35 C 18.836 15.422 20 18.233 20 21.163 C 20 22.178 19.178 23 18.163 23 L 5.837 23 C 4.823 23 4 22.177 4 21.163 C 4 18.233 5.164 15.422 7.236 13.35 L 8.586 12 L 7.236 10.65 C 5.164 8.578 4 5.767 4 2.837 C 4 1.822 4.822 1 5.837 1 L 18.163 1 C 19.178 1 20 1.822 20 2.837 C 20 5.767 18.836 8.578 16.764 10.65 L 15.414 12 Z M 13 10.999 C 13.176 10.999 13.264 10.999 13.353 10.983 C 13.488 10.958 13.627 10.9 13.74 10.823 C 13.815 10.771 13.877 10.709 14 10.586 L 15.35 9.236 C 16.612 7.974 17.472 6.367 17.823 4.617 C 17.915 4.159 17.961 3.93 17.873 3.673 C 17.787 3.452 17.633 3.265 17.433 3.138 C 17.2 3 16.923 3 16.37 3 L 7.63 3 C 7.078 3 6.801 3 6.567 3.138 C 6.367 3.265 6.213 3.452 6.127 3.673 C 6.039 3.93 6.085 4.159 6.177 4.617 C 6.528 6.367 7.388 7.975 8.65 9.237 L 10 10.585 C 10.122 10.707 10.183 10.768 10.257 10.819 C 10.371 10.898 10.511 10.956 10.647 10.981 C 10.736 10.997 10.823 10.997 10.997 10.997 L 13 10.998 Z",
 	"lumina": "M2 12C2 9.29789 3.07174 6.84606 4.81332 5.04646C5.00725 4.84607 5.33334 4.98908 5.33334 5.26794V14.8925C5.33334 15.1359 5.53072 15.3333 5.7742 15.3333H8.16668C8.33331 15.3472 8.66669 15.4667 8.66669 15.8333V18.2258C8.66669 18.4693 8.86403 18.6667 9.10753 18.6667H14.8925C15.136 18.6667 15.3333 18.4693 15.3333 18.2258V15.8333C15.3333 15.4667 15.6667 15.3472 15.8333 15.3333H18.2258C18.4693 15.3333 18.6667 15.1359 18.6667 14.8925V12.4408C18.6667 12.1974 18.4693 12 18.2258 12H15.7742C15.5307 12 15.3333 12.1974 15.3333 12.4408V14.8336C15.3332 15.2001 14.9999 15.3194 14.8334 15.3333H9.16669C9.00006 15.3194 8.6668 15.2001 8.66669 14.8336V2.97849C8.66669 2.72917 8.79042 2.52083 9.13543 2.41667C9.13984 2.41534 9.18748 2.40094 9.18748 2.40094C10.0796 2.13997 11.0235 2 12 2C17.5229 2 22 6.47716 22 12C22 17.5228 17.5229 22 12 22C6.47715 22 2 17.5228 2 12Z",
 	"clock-forward": "M 10 2 C 6.274 2 3.042 4.573 2.205 8.203 C 1.368 11.834 3.149 15.562 6.499 17.193 C 9.849 18.824 13.881 17.926 16.223 15.028 C 16.575 14.615 17.192 14.558 17.613 14.899 C 18.035 15.241 18.108 15.856 17.777 16.286 C 15.88 18.637 13.021 20.002 10 20 C 4.477 20 0 15.523 0 10 C 0 4.477 4.477 0 10 0 C 15.134 0 19.365 3.87 19.935 8.851 L 19.993 8.793 C 20.385 8.414 21.009 8.419 21.395 8.805 C 21.781 9.191 21.786 9.815 21.407 10.207 L 19.407 12.207 C 19.017 12.597 18.384 12.597 17.994 12.207 L 15.993 10.207 C 15.614 9.815 15.619 9.191 16.005 8.805 C 16.391 8.419 17.015 8.414 17.407 8.793 L 17.975 9.361 C 17.975 9.361 14.171 2 10 2 Z M 11 9.465 L 13.555 11.168 C 14.015 11.475 14.139 12.095 13.832 12.555 C 13.525 13.015 12.905 13.139 12.445 12.832 L 9.445 10.832 C 9.167 10.646 9 10.334 9 10 L 9 5 C 9 4.448 9.448 4 10 4 C 10.552 4 11 4.448 11 5 Z",
+	"clock-forward-2": "M21,10.12H14.22L16.96,7.3C14.23,4.6 9.81,4.5 7.08,7.2C4.35,9.91 4.35,14.28 7.08,17C9.81,19.7 14.23,19.7 16.96,17C18.32,15.65 19,14.08 19,12.1H21C21,14.08 20.12,16.65 18.36,18.39C14.85,21.87 9.15,21.87 5.64,18.39C2.14,14.92 2.11,9.28 5.62,5.81C9.13,2.34 14.76,2.34 18.27,5.81L21,3V10.12M12.5,8V12.25L16,14.33L15.28,15.54L11,13V8H12.5Z",
 	"calendar-date": "M 15 2.001 C 15.476 2.003 15.891 2.013 16.252 2.043 C 16.814 2.089 17.331 2.188 17.816 2.435 C 18.569 2.818 19.181 3.43 19.564 4.183 C 19.811 4.668 19.91 5.185 19.956 5.748 C 20 6.288 20 6.953 20 7.758 L 20 16.242 C 20 17.046 20 17.711 19.956 18.252 C 19.91 18.814 19.811 19.331 19.564 19.816 C 19.181 20.569 18.569 21.181 17.816 21.564 C 17.331 21.811 16.814 21.91 16.251 21.956 C 15.711 22 15.046 22 14.241 22 L 5.758 22 C 4.954 22 4.29 22 3.748 21.956 C 3.186 21.91 2.669 21.811 2.184 21.564 C 1.431 21.181 0.819 20.569 0.436 19.816 C 0.189 19.331 0.09 18.814 0.044 18.251 C 0 17.711 0 17.046 0 16.241 L 0 7.758 C 0 6.954 0 6.29 0.044 5.748 C 0.09 5.186 0.189 4.669 0.436 4.184 C 0.819 3.431 1.431 2.819 2.184 2.436 C 2.669 2.189 3.186 2.09 3.748 2.044 C 4.109 2.015 4.525 2.005 5 2.002 L 5 1 C 5 0.448 5.448 0 6 0 C 6.552 0 7 0.448 7 1 L 7 2 L 13 2 L 13 1 C 13 0.448 13.448 0 14 0 C 14.552 0 15 0.448 15 1 Z M 5 5 L 5 4.002 C 4.554 4.005 4.205 4.014 3.911 4.038 C 3.473 4.073 3.248 4.138 3.092 4.218 C 2.716 4.41 2.41 4.716 2.218 5.092 C 2.138 5.248 2.073 5.472 2.038 5.911 C 2 6.361 2 6.943 2 7.8 L 2 8 L 18 8 L 18 7.8 C 18 6.943 18 6.361 17.962 5.911 C 17.927 5.473 17.862 5.248 17.782 5.092 C 17.59 4.716 17.284 4.41 16.908 4.218 C 16.752 4.138 16.528 4.073 16.089 4.038 C 15.727 4.013 15.363 4.001 15 4.002 L 15 5 C 15 5.552 14.552 6 14 6 C 13.448 6 13 5.552 13 5 L 13 4 L 7 4 L 7 5 C 7 5.552 6.552 6 6 6 C 5.448 6 5 5.552 5 5 Z M 9.445 11.168 L 7.945 12.168 C 7.495 12.467 7.364 13.07 7.649 13.529 C 7.934 13.988 8.533 14.137 9 13.866 L 9 16 L 8.75 16 C 8.198 16 7.75 16.448 7.75 17 C 7.75 17.552 8.198 18 8.75 18 L 11.25 18 C 11.802 18 12.25 17.552 12.25 17 C 12.25 16.448 11.802 16 11.25 16 L 11 16 L 11 12 C 11 11.631 10.797 11.292 10.472 11.118 C 10.147 10.944 9.752 10.963 9.445 11.168 Z",
 	"merge": "M7.04652 9.86171C8.74809 9.4017 10 7.84705 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 7.86384 3.27477 9.42994 5 9.87398V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V15.0001C7.28228 15.3764 7.59237 15.7345 7.92893 16.0711C9.59483 17.737 11.788 18.7544 14.1162 18.9609C14.5465 20.7059 16.1221 22 18 22C20.2091 22 22 20.2091 22 18C22 15.7909 20.2091 14 18 14C16.153 14 14.5983 15.2519 14.1383 16.9535C12.3334 16.758 10.6389 15.9526 9.34315 14.6569C8.04737 13.3611 7.24201 11.6666 7.04652 9.86171Z",
 	"eye": "M 5.077 6.707 C 6.805 5.265 9.138 4 12 4 C 14.862 4 17.195 5.265 18.923 6.707 C 20.649 8.148 21.833 9.814 22.426 10.753 L 22.45 10.791 C 22.568 10.976 22.72 11.217 22.797 11.553 C 22.859 11.848 22.859 12.152 22.797 12.447 C 22.72 12.783 22.567 13.024 22.45 13.209 L 22.426 13.247 C 21.833 14.186 20.649 15.852 18.923 17.293 C 17.195 18.735 14.862 20 12 20 C 9.138 20 6.805 18.735 5.077 17.293 C 3.35 15.852 2.167 14.186 1.574 13.247 L 1.55 13.209 C 1.389 12.978 1.272 12.72 1.203 12.447 C 1.141 12.152 1.141 11.848 1.203 11.553 C 1.28 11.216 1.433 10.976 1.55 10.791 L 1.574 10.753 C 2.167 9.814 3.35 8.148 5.077 6.707 Z M 12 16 C 14.209 16 16 14.209 16 12 C 16 9.791 14.209 8 12 8 C 9.791 8 8 9.791 8 12 C 8 14.209 9.791 16 12 16 Z M 14 12 C 14 13.105 13.105 14 12 14 C 10.895 14 10 13.105 10 12 C 10 10.895 10.895 10 12 10 C 13.105 10 14 10.895 14 12 Z",
@@ -205,5 +206,7 @@
 	"earth": "M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
 	"city": "M15,23H13V21H15V23M19,21H17V23H19V21M15,17H13V19H15V17M7,21H5V23H7V21M7,17H5V19H7V17M19,17H17V19H19V17M15,13H13V15H15V13M19,13H17V15H19V13M21,9A2,2 0 0,1 23,11V23H21V11H11V23H9V15H3V23H1V15A2,2 0 0,1 3,13H9V11A2,2 0 0,1 11,9V7A2,2 0 0,1 13,5H15V1H17V5H19A2,2 0 0,1 21,7V9M19,9V7H13V9H19Z",
 	"drop": "M12 18C12 18.7 12.12 19.36 12.34 20C12.23 20 12.12 20 12 20C8.69 20 6 17.31 6 14C6 10 12 3.25 12 3.25S16.31 8.1 17.62 12C16.93 12.06 16.28 12.22 15.67 12.47C15 10.68 13.5 8.33 12 6.39C10 8.96 8 12.23 8 14C8 16.21 9.79 18 12 18M19 17V14H17V17H14V19H17V22H19V19H22V17H19Z",
-	"faucet": "M21 21H3C3 19.9 3.9 19 5 19H19C20.11 19 21 19.89 21 21M19 7C19 5.39 17.93 3 15 3S11 5.39 11 7V18H13V7C13 6.54 13.17 5 15 5S17 6.54 17 7H16.5V9H19.5V7H19M7 12C6.45 12 6 12.45 6 13V14H3V15H6V18H8V13C8 12.45 7.55 12 7 12M21 14H18V13C18 12.45 17.55 12 17 12S16 12.45 16 13V18H18V15H21V14Z"
+	"faucet": "M21 21H3C3 19.9 3.9 19 5 19H19C20.11 19 21 19.89 21 21M19 7C19 5.39 17.93 3 15 3S11 5.39 11 7V18H13V7C13 6.54 13.17 5 15 5S17 6.54 17 7H16.5V9H19.5V7H19M7 12C6.45 12 6 12.45 6 13V14H3V15H6V18H8V13C8 12.45 7.55 12 7 12M21 14H18V13C18 12.45 17.55 12 17 12S16 12.45 16 13V18H18V15H21V14Z",
+	"commit": "M17,12C17,14.42 15.28,16.44 13,16.9V21H11V16.9C8.72,16.44 7,14.42 7,12C7,9.58 8.72,7.56 11,7.1V3H13V7.1C15.28,7.56 17,9.58 17,12M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z",
+	"laurel": "M16.956 2.057c.355.124.829.375 1.303.796a3.77 3.77 0 0 1 1.246 2.204c.173.989-.047 1.894-.519 2.683l-.123.194q-.097.147-.196.272q.066.234.117.471q.26-.178.545-.307c.851-.389 1.727-.442 2.527-.306q.226.04.346.076a1 1 0 0 1 .689.712l.029.13q.015.08.03.18a4.45 4.45 0 0 1-.324 2.496a3.94 3.94 0 0 1-1.71 1.85l-.242.12a4.23 4.23 0 0 1-2.234.349A9 9 0 0 1 17.997 15c.37.016.748.093 1.128.24c.732.28 1.299.758 1.711 1.367a3.95 3.95 0 0 1 .654 1.613a1 1 0 0 1-.356.917a3.8 3.8 0 0 1-.716.443c-.933.455-1.978.588-3.043.179l-.032-.015l-.205-.086a3.6 3.6 0 0 1-1.33-1.069l-.143-.197a4 4 0 0 1-.26-.433a6 6 0 0 1-.927.511q.18.262.337.56a7.4 7.4 0 0 1 .66 1.747a1 1 0 0 1-1.95.444l-.028-.11a6 6 0 0 0-.449-1.143C12.706 19.323 12.338 19 12 19s-.706.323-1.048.969a5.6 5.6 0 0 0-.367.874l-.082.269l-.028.11a1 1 0 0 1-1.95-.444a7.3 7.3 0 0 1 .66-1.747q.158-.298.337-.561a6.4 6.4 0 0 1-.93-.508a4 4 0 0 1-.256.43c-.366.541-.855.98-1.473 1.267l-.238.1c-.994.382-1.97.292-2.855-.091l-.188-.087a3.8 3.8 0 0 1-.716-.443a1 1 0 0 1-.356-.917a3.95 3.95 0 0 1 .654-1.613a3.6 3.6 0 0 1 1.71-1.368c.38-.146.758-.223 1.13-.24a9 9 0 0 1-.445-1.023a4.23 4.23 0 0 1-2.233-.348a4 4 0 0 1-.916-.587l-.207-.191a4 4 0 0 1-.724-.977l-.105-.216a4.45 4.45 0 0 1-.265-2.806a1 1 0 0 1 .69-.712q.119-.036.345-.076c.801-.135 1.678-.082 2.53.308q.283.129.545.304q.048-.235.112-.47a5 5 0 0 1-.194-.272c-.556-.832-.83-1.806-.642-2.877l.05-.242a3.75 3.75 0 0 1 1.027-1.803l.169-.159a4 4 0 0 1 1.303-.796a1 1 0 0 1 .975.178c.2.168.462.446.719.83c.556.833.83 1.807.642 2.878a3.77 3.77 0 0 1-1.246 2.204c-.303.27-.607.47-.879.61A7.5 7.5 0 0 0 7 10.728C7 14.23 9.285 17 12 17s5-2.77 5-6.276a7.6 7.6 0 0 0-.253-1.967a4.3 4.3 0 0 1-.881-.61a3.77 3.77 0 0 1-1.246-2.204c-.188-1.07.086-2.045.642-2.877c.257-.385.52-.663.72-.831a1 1 0 0 1 .974-.178"
 }

assets/styles/base.scss

@@ -45,6 +45,9 @@ $grayscale: (
 	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
+	--legendary: #ff5a17;
+	--epic: #7448E7;
+	--rare: #007AFF;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -116,6 +119,9 @@ $grayscale: (
 	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
+	--legendary: #ff5a17;
+	--epic: #7448E7;
+	--rare: #007AFF;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -178,6 +184,9 @@ $grayscale: (
 	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #c4f9eb;
+	--legendary: #ff5a17;
+	--epic: #7448E7;
+	--rare: #007AFF;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {

assets/styles/text.scss

@@ -66,6 +66,9 @@ $textColors: (
 	"red": "--red",
 	"yellow": "--yellow",
 	"purple": "--purple",
+	"legendary": "--legendary",
+	"epic": "--epic",
+	"rare": "--rare",
 );
 
 @each $key, $value in $textColors {

components/Connection.vue

@@ -30,13 +30,20 @@ switch (hostname) {
 	case "mocha-4.celenium.io":
 		appStore.network = mocha
 		break
+
+	case "mammoth.celenium.io":
+		appStore.network = mammoth
+		break
 
 	case "mammoth.celenium.io":
  		appStore.network = mammoth
  		break
 
 	// case "arabica.celenium.io":
-	// case "localhost":
+	case "localhost":
+		appStore.network = arabica
+		break
+
 	default:
 		appStore.network = arabica
 		break

components/Feed.vue

@@ -3,7 +3,8 @@
 import { DateTime } from "luxon"
 
 /** Services */
-import { comma, formatBytes, abbreviate } from "@/services/utils"
+import { abbreviate, comma, formatBytes, isMainnet, roundTo } from "@/services/utils"
+import { getRankCategory } from "@/services/constants/rollups"
 
 /** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
@@ -13,7 +14,9 @@ import { fetchPriceSeries } from "@/services/api/stats"
 
 /** Store */
 import { useAppStore } from "@/store/app"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
 const appStore = useAppStore()
+const rollupRankingStore = useRollupsRankingStore()
 
 const head = computed(() => appStore.lastHead)
 const currentPrice = computed(() => appStore.currentPrice)
@@ -22,6 +25,18 @@ const totalSupply = computed(() => head.value.total_supply / 1_000_000)
 const totalSupplyUSD = computed(() => totalSupply.value * currentPrice.value?.close)
 const totalFees = computed(() => head.value.total_fee / 1_000_000)
 const totalFeesUSD = computed(() => totalFees.value * currentPrice.value?.close)
+const topRollup = computed(() => {
+	let rankCategory = getRankCategory(roundTo(rollupRankingStore?.rollups_ranking?.top_rollup?.rank / 10, 0))
+	return {
+		slug: rollupRankingStore?.rollups_ranking?.top_rollup?.slug,
+		name: rollupRankingStore?.rollups_ranking?.top_rollup?.name,
+		rank: {
+			name: rankCategory?.name,
+			score: rollupRankingStore?.rollups_ranking?.top_rollup?.rank,
+			color: rankCategory?.color,
+		}
+	}
+})
 
 const series = ref([])
 const price = reactive({
@@ -49,14 +64,46 @@ onMounted(async () => {
 <template>
 	<Flex tag="section" justify="center" wide :class="$style.wrapper">
 		<Flex align="center" justify="between" gap="24" wide :class="$style.container">
-			<Flex align="center" gap="20" :class="$style.stats">
+			<Flex align="center" gap="8" :class="$style.stats">
+				<template v-if="isMainnet()">
+					<NuxtLink :to="`/rollup/rank/${topRollup?.slug}`">
+						<Tooltip>
+							<Flex align="center" gap="6" :class="$style.stat">
+								<Icon v-if="topRollup?.name" name="laurel" size="14" :color="topRollup?.rank?.color" :style="{marginTop: '1px'}" />
+								<Icon v-else name="laurel" size="14" color="tertiary" :class="$style.icon" :style="{marginTop: '1px'}" />
+								<Flex align="center" gap="4">
+									<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Top Rollup:</Text>
+
+									<Text v-if="topRollup?.name" size="12" weight="600" color="secondary" noWrap :class="$style.value"> {{ topRollup?.name }} </Text>
+									<Skeleton v-else w="40" h="12" />
+								</Flex>
+							</Flex>
+
+							<template #content>
+								<Flex direction="column" gap="8">
+									<Flex align="center" justify="between" gap="8">
+										<Text size="12" weight="500" color="tertiary">Rank:</Text>
+										<Text size="12" weight="600" :color="topRollup?.rank?.color"> {{ topRollup?.rank?.name }} </Text>
+									</Flex>
+									<Flex align="center" justify="between" gap="8">
+										<Text size="12" weight="500" color="tertiary">Score:</Text>
+										<Text size="12" weight="600" color="secondary"> {{ topRollup?.rank?.score }}% </Text>
+									</Flex>
+								</Flex>
+							</template>
+						</Tooltip>
+					</NuxtLink>
+
+					<div :class="$style.dot" />
+				</template>
+
 				<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" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(head.total_tx) }}</Text>
+							<Text v-if="head.total_tx" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(head.total_tx) }}</Text>
 							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
@@ -74,10 +121,10 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Supply:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">
+							<Text v-if="head.total_supply" size="12" weight="600" noWrap :class="$style.value">
 								{{ abbreviate(totalSupply, 2) }} TIA
 							</Text>
-							<Skeleton v-else w="55" h="12" />
+							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
@@ -92,10 +139,10 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Blobs Size:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">{{
+							<Text v-if="head.total_blobs_size" size="12" weight="600" noWrap :class="$style.value">{{
 								formatBytes(head.total_blobs_size)
 							}}</Text>
-							<Skeleton v-else w="60" h="12" />
+							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
@@ -110,10 +157,10 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Fees:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">
+							<Text v-if="head.total_fee" size="12" weight="600" noWrap :class="$style.value">
 								{{ abbreviate(parseInt(totalFees)) }} TIA
 							</Text>
-							<Skeleton v-else w="55" h="12" />
+							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
@@ -132,7 +179,7 @@ onMounted(async () => {
 						<Skeleton v-else w="36" h="12" />
 					</Flex>
 
-					<Flex v-if="!isNaN(price.diff)" align="center" gap="4">
+					<Flex v-if="price.diff" align="center" gap="4">
 						<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
 						<Icon v-else-if="price.side === 'fall'" name="arrow-circle-right-down" size="12" color="red" />
 
@@ -167,18 +214,20 @@ onMounted(async () => {
 <style module>
 .wrapper {
 	height: 32px;
+	max-width: var(--base-width);
 
 	border-top: 1px solid var(--op-5);
 	border-bottom: 1px solid var(--op-5);
-
 	background: var(--feed-background);
 }
 
 .container {
 	max-width: var(--base-width);
 	height: 100%;
+	overflow: hidden;
+	overflow-x: scroll;
 
-	margin: 0 24px;
+	margin: 0 12px;
 
 	&::-webkit-scrollbar {
 		display: none;
@@ -199,7 +248,7 @@ onMounted(async () => {
 }
 
 .value {
-	color: var(--op-40);
+	color: var(--txt-secondary);
 }
 
 .stat:hover {
@@ -212,7 +261,7 @@ onMounted(async () => {
 	}
 
 	.value {
-		color: var(--txt-secondary);
+		color: var(--txt-primary);
 	}
 }