Merge pull request #380 from alisaweb3/v3-single

Timeline, Wallet Drapdown,Validator Detail,Governance Progress

src/components/ProposalProcess.vue

@@ -30,6 +30,38 @@ const veto = computed(() =>
 </script>
 
 <template>
+  <div class="grid grid-cols-4 gap-4 mb-3 text-sm">
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-yes absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>YES</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ yes }}</div>
+    </div>
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-no absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>NO</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ no }}</div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-warning absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-50"
+      ></div>
+      <div>No With Veto</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ veto }}</div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-gray-500 absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>Abstain</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ abstain }}</div>
+    </div>
+  </div>
   <div class="progress rounded-full h-1 text-xs flex items-center">
     <div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
     <div class="h-1 bg-no" :style="`width: ${no}`"></div>

src/components/ValidatorCommissionRate.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import VueApexCharts from 'vue3-apexcharts';
+import ApexCharts from 'vue3-apexcharts';
 import { useTheme } from 'vuetify';
 import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
 import { computed, type PropType } from 'vue';
@@ -141,7 +141,7 @@ const chartConfig = computed(() => {
     <div class="text-sm text-gray-500 dark:text-gray-400">
       {{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
     </div>
-    <VueApexCharts type="donut" :options="chartConfig" :series="series" />
+    <ApexCharts type="donut" :options="chartConfig" :series="series" />
     <div>
       <div class="flex items-center justify-center flex-wrap gap-x-3">
         <div class="flex items-center gap-x-2">

src/components/charts/DonutChart.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import VueApexCharts from 'vue3-apexcharts';
+import ApexCharts from 'vue3-apexcharts';
 import { useTheme } from 'vuetify';
 import { getDonutChartConfig } from './apexChartConfig';
 
@@ -13,7 +13,7 @@ const expenseRationChartConfig = computed(() =>
 </script>
 
 <template>
-  <VueApexCharts
+  <ApexCharts
     type="donut"
     height="410"
     :options="expenseRationChartConfig"

src/components/charts/PriceMarketChart.vue

@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-import VueApexCharts from 'vue3-apexcharts';
+import ApexCharts from 'vue3-apexcharts';
 import { useTheme } from 'vuetify';
-import {
-  getAreaChartSplineConfig,
-  getMarketPriceChartConfig,
-} from './apexChartConfig';
+import { getMarketPriceChartConfig } from './apexChartConfig';
 import { useIndexModule } from '@/modules/[chain]/indexStore';
 import { computed, ref } from '@vue/reactivity';
 
 const store = useIndexModule();
 const vuetifyTheme = useTheme();
 const chartConfig = computed(() => {
-  const labels = store.marketData.prices.map((x) => x[0]);
+  const labels = store.marketData.prices.map((item: any) => item[0]);
   return getMarketPriceChartConfig(vuetifyTheme.current.value, labels);
 });
 const kind = ref('price');
@@ -21,8 +18,8 @@ const series = computed(() => {
       name: 'Price',
       data:
         kind.value === 'price'
-          ? store.marketData.prices.map((x) => x[1])
-          : store.marketData.total_volumes.map((x) => x[1]),
+          ? store.marketData.prices.map((item: any) => item[1])
+          : store.marketData.total_volumes.map((item: any) => item[1]),
     },
   ];
 });
@@ -49,7 +46,7 @@ function changeChart(type: string) {
       Volume
     </a>
   </div>
-  <VueApexCharts
+  <ApexCharts
     type="area"
     height="230"
     :options="chartConfig"

src/components/dynamic/TxsElement.vue

@@ -25,7 +25,7 @@ const chain = useBlockchain();
     <table class="table w-full" density="compact" v-if="txs.length > 0">
       <thead>
         <tr>
-          <th style="position: relative">Hash</th>
+          <th style="position: relative; z-index: 2;">Hash</th>
           <th>Msgs</th>
           <th>Memo</th>
         </tr>