ref(widgets): validators widget -> gas tracker

Author: xdeq

assets/icons.json

@@ -17,6 +17,7 @@
 	"check-circle": "M 23 12 C 23 18.075 18.075 23 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 C 18.075 1 23 5.925 23 12 Z M 17.207 9.707 C 17.586 9.315 17.581 8.691 17.195 8.305 C 16.809 7.919 16.185 7.914 15.793 8.293 L 10.5 13.586 L 8.207 11.293 C 7.815 10.914 7.191 10.919 6.805 11.305 C 6.419 11.691 6.414 12.315 6.793 12.707 L 9.793 15.707 C 10.183 16.097 10.817 16.097 11.207 15.707 Z",
 	"close-circle": "M 23 12 C 23 18.075 18.075 23 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 C 18.075 1 23 5.925 23 12 Z M 14.293 8.293 L 12 10.586 L 9.707 8.293 C 9.315 7.914 8.691 7.919 8.305 8.305 C 7.919 8.691 7.914 9.315 8.293 9.707 L 10.586 12 L 8.293 14.293 C 7.914 14.685 7.919 15.309 8.305 15.695 C 8.691 16.081 9.315 16.086 9.707 15.707 L 12 13.414 L 14.293 15.707 C 14.685 16.086 15.309 16.081 15.695 15.695 C 16.081 15.309 16.086 14.685 15.707 14.293 L 13.414 12 L 15.707 9.707 C 16.097 9.317 16.097 8.683 15.707 8.293 C 15.317 7.903 14.683 7.903 14.293 8.293 Z",
 	"chevron": "M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z",
+	"gas": "m19.77 7.23l.01-.01l-3.19-3.19a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l1.58 1.58c-1.05.4-1.76 1.47-1.58 2.71c.16 1.1 1.1 1.99 2.2 2.11c.47.05.88-.03 1.27-.2v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v15c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-6.5h1.5v4.86c0 1.31.94 2.5 2.24 2.63a2.5 2.5 0 0 0 2.76-2.49V9c0-.69-.28-1.32-.73-1.77zM12 10H6V6c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v4zm6 0c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1z",
 	"message": "M22.2796 4.70732L22.2796 4.70729C21.9053 4.17284 21.396 3.73154 20.816 3.43598C20.3306 3.18868 19.8139 3.09012 19.2518 3.04419C18.7106 2.99998 18.0463 2.99999 17.2414 3H17.2413H6.75868H6.75858C5.95366 2.99999 5.28934 2.99998 4.74817 3.04419C4.18607 3.09012 3.66936 3.18868 3.18403 3.43598C2.60399 3.73152 2.09471 4.17279 1.72043 4.7072L1.72041 4.70723C1.61124 4.8631 1.55666 4.94104 1.53985 5.05959C1.52675 5.15199 1.5492 5.28082 1.59279 5.36333C1.64872 5.46921 1.74328 5.53596 1.9324 5.66945L10.7314 11.8805C11.4641 12.3977 11.6195 12.4875 11.7567 12.5219C11.9165 12.562 12.0837 12.562 12.2435 12.5219C12.3807 12.4875 12.5361 12.3977 13.2688 11.8805L22.0676 5.66953C22.2568 5.53604 22.3513 5.46929 22.4072 5.36341C22.4508 5.2809 22.4733 5.15207 22.4602 5.05968C22.4434 4.94113 22.3888 4.86319 22.2796 4.70732ZM2.0655 8.21146L2.06552 8.21147L6.74072 11.5116C7.01967 11.7085 7.15914 11.807 7.21513 11.9327C7.26421 12.043 7.27177 12.1673 7.23639 12.2826C7.19605 12.4142 7.06952 12.5289 6.81647 12.7581L1.62227 17.4634C1.40639 17.659 1.06792 17.5422 1.04419 17.2518C0.999978 16.7106 0.999988 16.0463 1 15.2413V8.75867C0.999996 8.46554 0.999994 8.31898 1.04248 8.22261C1.13609 8.01026 1.37159 7.88823 1.59906 7.93421C1.70229 7.95507 1.82336 8.04053 2.0655 8.21146ZM2.34556 19.6022C2.38587 19.4704 2.48768 19.3781 2.69131 19.1937L8.81101 13.6499C8.92801 13.5439 8.98652 13.4909 9.04986 13.4599C9.1697 13.4012 9.30804 13.3928 9.4341 13.4366C9.50073 13.4598 9.56521 13.5053 9.69416 13.5964L9.69477 13.5969C10.2418 13.9842 10.7222 14.3243 11.2701 14.4617C11.7495 14.582 12.2511 14.582 12.7305 14.4617C13.2784 14.3243 13.759 13.984 14.3062 13.5966L14.3064 13.5964L14.3068 13.5961L14.3069 13.5961C14.4353 13.5053 14.4997 13.4598 14.5663 13.4367C14.6924 13.3928 14.8308 13.4012 14.9507 13.46C15.0136 13.4909 15.0717 13.5435 15.1875 13.6483L15.1894 13.6499L21.3091 19.1937C21.5127 19.3781 21.6145 19.4704 21.6548 19.6022C21.6861 19.7044 21.6767 19.855 21.633 19.9526C21.5767 20.0784 21.4839 20.1436 21.2981 20.274C21.1451 20.3813 20.9842 20.4783 20.8162 20.5639C20.3308 20.8112 19.8141 20.9098 19.252 20.9557C18.7108 20.9999 18.0465 20.9999 17.2415 20.9999H6.75884C5.95388 20.9999 5.28953 20.9999 4.74834 20.9557C4.18624 20.9098 3.66953 20.8112 3.1842 20.5639C3.01621 20.4783 2.85523 20.3814 2.70223 20.274C2.5165 20.1436 2.42364 20.0784 2.36733 19.9526C2.32367 19.855 2.31432 19.7044 2.34556 19.6022ZM22.3777 17.4634C22.5936 17.659 22.9321 17.5421 22.9558 17.2518C23 16.7106 23 16.0463 23 15.2413V8.75867C23 8.46565 23 8.31915 22.9576 8.22281C22.864 8.01039 22.6284 7.88832 22.4009 7.93435C22.2977 7.95522 22.1766 8.04064 21.9346 8.21152L17.2594 11.5117L17.2589 11.512C16.9802 11.7087 16.8408 11.8071 16.785 11.9328C16.7359 12.043 16.7283 12.1673 16.7637 12.2827C16.8039 12.4141 16.9302 12.5286 17.1825 12.7572L17.1836 12.7582L22.3777 17.4634Z",
 	"menu": "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H3Z",
 	"globe": "M 12 1 C 18.075 1 23 5.925 23 12 C 23 18.075 18.075 23 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 Z M 7.05 11 C 7.273 8.245 8.194 5.592 9.725 3.29 C 6.121 4.234 3.47 7.298 3.055 11 Z M 3.055 13 C 3.47 16.702 6.121 19.766 9.725 20.71 C 8.194 18.408 7.273 15.755 7.05 13 Z M 14.275 20.71 C 17.879 19.766 20.53 16.702 20.945 13 L 16.95 13 C 16.726 15.755 15.805 18.408 14.274 20.71 Z M 14.274 3.29 C 15.805 5.592 16.726 8.245 16.95 11 L 20.945 11 C 20.53 7.298 17.878 4.233 14.274 3.29 Z M 9.058 11 L 14.942 11 C 14.691 8.287 13.67 5.702 12 3.55 C 10.33 5.702 9.309 8.287 9.058 11 Z M 14.942 13 L 9.058 13 C 9.309 15.713 10.33 18.298 12 20.45 C 13.67 18.298 14.691 15.713 14.942 13 Z",

components/widgets/ValidatorsWidget.vue renamed to components/widgets/GasWidget.vue

@@ -11,19 +11,17 @@ onMounted(async () => {
 </script>
 
 <template>
-	<Flex direction="column" :class="$style.wrapper">
+	<Flex direction="column" gap="20" :class="$style.wrapper">
 		<Flex align="center" justify="between">
 			<Flex align="center" gap="6">
-				<Icon name="addresses" size="12" color="secondary" />
-				<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
+				<Icon name="gas" size="12" color="secondary" />
+				<Text size="13" weight="600" height="110" color="secondary">Gas Tracker</Text>
 			</Flex>
 
-			<Text size="12" weight="600" color="secondary"> {{ totalValidators }} </Text>
+			<Text size="12" weight="600" color="support">Not Available</Text>
 		</Flex>
 
-		<div :class="$style.bar">
-			<div :style="{ width: totalValidators ? '100%' : '0%' }" :class="$style.fill" />
-		</div>
+		<Text size="12" weight="500" color="tertiary" align="center"> Data will be available soon</Text>
 	</Flex>
 </template>
 
@@ -35,7 +33,7 @@ onMounted(async () => {
 	border-radius: 12px;
 	overflow: hidden;
 
-	padding: 16px;
+	padding: 12px;
 }
 
 .bar {

components/widgets/Widgets.vue

@@ -4,7 +4,7 @@ import BlockWidget from "./BlockWidget.vue"
 import BlobsWidget from "./BlobsWidget.vue"
 import NetworkWidget from "./NetworkWidget.vue"
 import TransactionsWidget from "./TransactionsWidget.vue"
-import ValidatorsWidget from "./ValidatorsWidget.vue"
+import GasWidget from "./GasWidget.vue"
 
 const tablet = ref(false)
 
@@ -26,7 +26,7 @@ onBeforeMount(() => {
 
 		<Flex direction="column" gap="20" wide :class="$style.column">
 			<TransactionsWidget />
-			<ValidatorsWidget />
+			<GasWidget />
 		</Flex>
 	</Flex>
 </template>