From 2f93b4c10cdbae9948dc4de24541cb5cbe7c5920 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 28 May 2023 09:19:39 +0800
Subject: [PATCH] feat: chart theme switch

---
 src/components/ThemeSwitcher.vue              |  50 -----
 src/components/charts/DonutChart.vue          |  19 +-
 src/components/charts/PriceMarketChart.vue    |  62 +++---
 src/layouts/components/NavBarI18n.vue         |  73 ++++---
 .../components/NavbarThemeSwitcher.vue        |  69 ++++---
 src/stores/useBaseStore.ts                    | 194 +++++++++---------
 6 files changed, 230 insertions(+), 237 deletions(-)
 delete mode 100644 src/components/ThemeSwitcher.vue

diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
deleted file mode 100644
index 5a407d90..00000000
--- a/src/components/ThemeSwitcher.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { onMounted, ref } from 'vue';
-
-const props = defineProps<{
-  themes: {
-    name: string;
-    icon: string;
-  }[];
-}>();
-
-const themeMap = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
-
-const theme = ref(window.localStorage.getItem('theme') || 'dark');
-
-const changeMode = () => {
-  let value = 'dark';
-  if (theme.value === 'dark') {
-    value = 'light';
-  }
-  if (
-    theme.value === 'system' &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    value = 'dark';
-  }
-  if (value === 'light') {
-    document.documentElement.classList.add('light');
-    document.documentElement.classList.remove('dark');
-  } else {
-    document.documentElement.classList.add('dark');
-    document.documentElement.classList.remove('light');
-  }
-  document.documentElement.setAttribute('data-theme', value);
-  window.localStorage.setItem('theme', value);
-};
-
-
-onMounted(() => {
-
-});
-</script>
-
-<template>
-  <div class="tooltip tooltip-bottom delay-1000">
-    <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode">
-      <Icon :icon="props.themes[theme].icon" class="text-2xl" />
-    </button>
-  </div>
-</template>
diff --git a/src/components/charts/DonutChart.vue b/src/components/charts/DonutChart.vue
index 57c73fd1..3907848b 100644
--- a/src/components/charts/DonutChart.vue
+++ b/src/components/charts/DonutChart.vue
@@ -1,21 +1,30 @@
 <script lang="ts" setup>
 import ApexCharts from 'vue3-apexcharts';
 import { computed } from 'vue';
+import { useBaseStore } from '@/stores';
 import { getDonutChartConfig } from './apexChartConfig';
 
 const props = defineProps(['series', 'labels']);
 
-const expenseRationChartConfig = computed(() =>
-  getDonutChartConfig(window.localStorage.getItem('theme') || 'dark', props.labels)
-);
+const baseStore = useBaseStore();
+
+const expenseRationChartConfig = computed(() => {
+    const theme = baseStore.theme;
+    getDonutChartConfig(theme, props.labels);
+});
 </script>
 
 <template>
-  <ApexCharts type="donut" height="410" :options="expenseRationChartConfig" :series="series" />
+    <ApexCharts
+        type="donut"
+        height="410"
+        :options="expenseRationChartConfig"
+        :series="series"
+    />
 </template>
 
 <script lang="ts">
 export default {
-  name: 'DonetChart',
+    name: 'DonetChart',
 };
 </script>
diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 56cfb8eb..b86876e0 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -3,40 +3,56 @@ import ApexCharts from 'vue3-apexcharts';
 import { getMarketPriceChartConfig } from './apexChartConfig';
 import { useIndexModule } from '@/modules/[chain]/indexStore';
 import { computed, ref } from '@vue/reactivity';
+import { useBaseStore } from '@/stores';
 
 const store = useIndexModule();
+const baseStore = useBaseStore();
 const chartConfig = computed(() => {
-  const labels = store.marketData.prices.map((item: any) => item[0]);
-  return getMarketPriceChartConfig(window.localStorage.getItem('theme') || 'dark', labels);
+    const theme = baseStore.theme;
+    const labels = store.marketData.prices.map((item: any) => item[0]);
+    return getMarketPriceChartConfig(theme, labels);
 });
 const kind = ref('price');
 const series = computed(() => {
-  return [
-    {
-      name: 'Price',
-      data:
-        kind.value === 'price'
-          ? store.marketData.prices.map((item: any) => item[1])
-          : store.marketData.total_volumes.map((item: any) => item[1]),
-    },
-  ];
+    return [
+        {
+            name: 'Price',
+            data:
+                kind.value === 'price'
+                    ? store.marketData.prices.map((item: any) => item[1])
+                    : store.marketData.total_volumes.map(
+                          (item: any) => item[1]
+                      ),
+        },
+    ];
 });
 
 function changeChart(type: string) {
-  kind.value = type;
+    kind.value = type;
 }
 </script>
 
 <template>
-  <div class="tabs tabs-boxed bg-transparent justify-end">
-    <a class="tab text-xs mr-2 text-gray-400 uppercase" :class="{ 'tab-active': kind === 'price' }"
-      @click="changeChart('price')">
-      Price
-    </a>
-    <a class="tab text-xs text-gray-400 uppercase" :class="{ 'tab-active': kind === 'volume' }"
-      @click="changeChart('volume')">
-      Volume
-    </a>
-  </div>
-  <ApexCharts type="area" height="230" :options="chartConfig" :series="series" />
+    <div class="tabs tabs-boxed bg-transparent justify-end">
+        <a
+            class="tab text-xs mr-2 text-gray-400 uppercase"
+            :class="{ 'tab-active': kind === 'price' }"
+            @click="changeChart('price')"
+        >
+            Price
+        </a>
+        <a
+            class="tab text-xs text-gray-400 uppercase"
+            :class="{ 'tab-active': kind === 'volume' }"
+            @click="changeChart('volume')"
+        >
+            Volume
+        </a>
+    </div>
+    <ApexCharts
+        type="area"
+        height="230"
+        :options="chartConfig"
+        :series="series"
+    />
 </template>
diff --git a/src/layouts/components/NavBarI18n.vue b/src/layouts/components/NavBarI18n.vue
index b71a47f1..f52d50ac 100644
--- a/src/layouts/components/NavBarI18n.vue
+++ b/src/layouts/components/NavBarI18n.vue
@@ -2,56 +2,61 @@
 import { ref, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 const i18nLangs: Array<{ label: string; i18nLang: string }> = [
-  {
-    label: 'English',
-    i18nLang: 'en',
-  },
-  {
-    label: '中文',
-    i18nLang: 'cn',
-  },
+    {
+        label: 'English',
+        i18nLang: 'en',
+    },
+    {
+        label: '中文',
+        i18nLang: 'cn',
+    },
 ];
 
 let locale = ref(useI18n({ useScope: 'global' }).locale);
 watch(locale, (val: string) => {
-  document.documentElement.setAttribute('lang', val as string);
+    document.documentElement.setAttribute('lang', val as string);
 });
 
 let currentLang = ref(localStorage.getItem('lang') || 'en');
 
 watch(currentLang, (val: string) => {
-  document.documentElement.setAttribute('lang', val as string);
+    document.documentElement.setAttribute('lang', val as string);
 });
 
 const handleLangChange = (lang: string) => {
-  locale.value = lang;
-  currentLang.value = lang;
-  localStorage.setItem('lang', lang);
+    locale.value = lang;
+    currentLang.value = lang;
+    localStorage.setItem('lang', lang);
 };
 </script>
 
 <template>
-  <div
-    class="dropdown"
-    :class="
-      currentLang === 'ar' ? 'dropdown-right' : 'dropdown-bottom dropdown-end'
-    "
-  >
-    <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-      <Icon icon="mdi-translate" class="text-2xl" />
-    </label>
-    <ul
-      tabindex="0"
-      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
+    <div
+        class="dropdown"
+        :class="
+            currentLang === 'ar'
+                ? 'dropdown-right'
+                : 'dropdown-bottom dropdown-end'
+        "
     >
-      <li v-for="lang in i18nLangs" :key="lang.i18nLang">
-        <a
-          class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
-          :class="{ 'text-primary': currentLang === lang.i18nLang }"
-          @click="handleLangChange(lang.i18nLang)"
-          >{{ lang.label }}</a
+        <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
+            <Icon
+                icon="mdi-translate"
+                class="text-2xl text-gray-500 dark:text-gray-400"
+            />
+        </label>
+        <ul
+            tabindex="0"
+            class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
         >
-      </li>
-    </ul>
-  </div>
+            <li v-for="lang in i18nLangs" :key="lang.i18nLang">
+                <a
+                    class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
+                    :class="{ 'text-primary': currentLang === lang.i18nLang }"
+                    @click="handleLangChange(lang.i18nLang)"
+                    >{{ lang.label }}</a
+                >
+            </li>
+        </ul>
+    </div>
 </template>
diff --git a/src/layouts/components/NavbarThemeSwitcher.vue b/src/layouts/components/NavbarThemeSwitcher.vue
index bb1f2bed..dca49ed1 100644
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@@ -1,45 +1,48 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { onMounted, ref } from 'vue';
+import { onMounted, computed } from 'vue';
+import { useBaseStore } from '@/stores';
 
-const themeMap: Record<string, string> = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
+const themeMap: Record<string, string> = {
+    system: 'mdi-laptop',
+    light: 'mdi-weather-sunny',
+    dark: 'mdi-weather-night',
+};
+const baseStore = useBaseStore();
+const theme = computed(() => {
+    return baseStore.theme;
+});
 
-const theme = ref(window.localStorage.getItem('theme') || 'dark');
-
-const changeMode = (val?: string) => {
-  let value = 'dark';
-  const currentValue = val || theme.value;
-  if (currentValue === 'dark') {
-    value = 'light';
-  }
-  if (
-    currentValue === 'system' &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    value = 'dark';
-  }
-  if (value === 'light') {
-    document.documentElement.classList.add('light');
-    document.documentElement.classList.remove('dark');
-  } else {
-    document.documentElement.classList.add('dark');
-    document.documentElement.classList.remove('light');
-  }
-  document.documentElement.setAttribute('data-theme', value);
-  window.localStorage.setItem('theme', value);
-  theme.value = value;
+const changeMode = (val?: 'dark' | 'light') => {
+    let value: 'dark' | 'light' = 'dark';
+    const currentValue: 'dark' | 'light' = val || theme.value;
+    if (currentValue === 'dark') {
+        value = 'light';
+    }
+    if (value === 'light') {
+        document.documentElement.classList.add('light');
+        document.documentElement.classList.remove('dark');
+    } else {
+        document.documentElement.classList.add('dark');
+        document.documentElement.classList.remove('light');
+    }
+    document.documentElement.setAttribute('data-theme', value);
+    window.localStorage.setItem('theme', value);
+    baseStore.theme = value;
 };
 
-
 onMounted(() => {
-  changeMode(theme.value === 'light' ? 'dark' : 'light');
+    changeMode(theme.value === 'light' ? 'dark' : 'light');
 });
 </script>
 
 <template>
-  <div class="tooltip tooltip-bottom delay-1000">
-    <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode()">
-      <Icon :icon="themeMap?.[theme]" class="text-2xl" />
-    </button>
-  </div>
+    <div class="tooltip tooltip-bottom delay-1000">
+        <button
+            class="btn btn-ghost btn-circle btn-sm mx-1"
+            @click="changeMode()"
+        >
+            <Icon :icon="themeMap?.[theme]" class="text-2xl text-gray-500 dark:text-gray-400" />
+        </button>
+    </div>
 </template>
diff --git a/src/stores/useBaseStore.ts b/src/stores/useBaseStore.ts
index ca5edd22..09c8f24b 100644
--- a/src/stores/useBaseStore.ts
+++ b/src/stores/useBaseStore.ts
@@ -7,101 +7,111 @@ import { hashTx } from '@/libs';
 import { fromBase64 } from '@cosmjs/encoding';
 
 export const useBaseStore = defineStore('baseStore', {
-  state: () => {
-    return {
-      earlest: {} as Block,
-      latest: {} as Block,
-      recents: [] as Block[],
-    };
-  },
-  getters: {
-    blocktime(): number {
-      if (this.earlest && this.latest) {
-        if (
-          this.latest.block?.header?.height !==
-          this.earlest.block?.header?.height
-        ) {
-          const diff = dayjs(this.latest.block?.header?.time).diff(
-            this.earlest.block?.header?.time
-          );
-          return diff;
-        }
-      }
-      return 6000;
+    state: () => {
+        return {
+            earlest: {} as Block,
+            latest: {} as Block,
+            recents: [] as Block[],
+            theme: (window.localStorage.getItem('theme') || 'dark') as
+                | 'light'
+                | 'dark',
+        };
     },
-    blockchain() {
-      return useBlockchain();
-    },
-    currentChainId(): string {
-      return this.latest.block?.header.chain_id || ""
-    },
-    txsInRecents() {
-      const txs = [] as { height: string; hash: string; tx: DecodedTxRaw }[];
-      this.recents.forEach((b) =>
-        b.block?.data?.txs.forEach((tx: string) => {
-          if (tx) {
-            const raw = fromBase64(tx);
-            try {
-              txs.push({
-                height: b.block.header.height,
-                hash: hashTx(raw),
-                tx: decodeTxRaw(raw),
-              });
-            } catch (e) {
-              console.error(e);
+    getters: {
+        blocktime(): number {
+            if (this.earlest && this.latest) {
+                if (
+                    this.latest.block?.header?.height !==
+                    this.earlest.block?.header?.height
+                ) {
+                    const diff = dayjs(this.latest.block?.header?.time).diff(
+                        this.earlest.block?.header?.time
+                    );
+                    return diff;
+                }
             }
-          }
-        })
-      );
-      return txs;
-    },
-  },
-  actions: {
-    async initial() {
-      this.fetchLatest();
-    },
-    async clearRecentBlocks() {
-      this.recents = [];
-    },
-    async fetchLatest() {
-      this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
-      if (
-        !this.earlest ||
-        this.earlest?.block?.header?.chain_id !=
-          this.latest?.block?.header?.chain_id
-      ) {
-        //reset earlest and recents
-        this.earlest = this.latest;
-        this.recents = [];
-      }
-      //check if the block exists in recents
-      if (
-        this.recents.findIndex(
-          (x) => x?.block_id?.hash === this.latest?.block_id?.hash
-        ) === -1
-      ) {
-        if (this.recents.length >= 50) {
-          this.recents.shift();
-        }
-        this.recents.push(this.latest);
-      }
-      return this.latest;
+            return 6000;
+        },
+        blockchain() {
+            return useBlockchain();
+        },
+        currentChainId(): string {
+            return this.latest.block?.header.chain_id || '';
+        },
+        txsInRecents() {
+            const txs = [] as {
+                height: string;
+                hash: string;
+                tx: DecodedTxRaw;
+            }[];
+            this.recents.forEach((b) =>
+                b.block?.data?.txs.forEach((tx: string) => {
+                    if (tx) {
+                        const raw = fromBase64(tx);
+                        try {
+                            txs.push({
+                                height: b.block.header.height,
+                                hash: hashTx(raw),
+                                tx: decodeTxRaw(raw),
+                            });
+                        } catch (e) {
+                            console.error(e);
+                        }
+                    }
+                })
+            );
+            return txs;
+        },
     },
+    actions: {
+        async initial() {
+            this.fetchLatest();
+        },
+        async clearRecentBlocks() {
+            this.recents = [];
+        },
+        async fetchLatest() {
+            this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
+            if (
+                !this.earlest ||
+                this.earlest?.block?.header?.chain_id !=
+                    this.latest?.block?.header?.chain_id
+            ) {
+                //reset earlest and recents
+                this.earlest = this.latest;
+                this.recents = [];
+            }
+            //check if the block exists in recents
+            if (
+                this.recents.findIndex(
+                    (x) => x?.block_id?.hash === this.latest?.block_id?.hash
+                ) === -1
+            ) {
+                if (this.recents.length >= 50) {
+                    this.recents.shift();
+                }
+                this.recents.push(this.latest);
+            }
+            return this.latest;
+        },
 
-    async fetchValidatorByHeight(height?: number, offset = 0) {
-      return this.blockchain.rpc.getBaseValidatorsetAt(String(height), offset);
+        async fetchValidatorByHeight(height?: number, offset = 0) {
+            return this.blockchain.rpc.getBaseValidatorsetAt(
+                String(height),
+                offset
+            );
+        },
+        async fetchLatestValidators(offset = 0) {
+            return this.blockchain.rpc.getBaseValidatorsetLatest(offset);
+        },
+        async fetchBlock(height?: number | string) {
+            return this.blockchain.rpc.getBaseBlockAt(String(height));
+        },
+        async fetchAbciInfo() {
+            return this.blockchain.rpc.getBaseNodeInfo();
+        },
+        // async fetchNodeInfo() {
+        //     return this.blockchain.rpc.no()
+        // }
     },
-    async fetchLatestValidators(offset = 0) {
-      return this.blockchain.rpc.getBaseValidatorsetLatest(offset);
-    },
-    async fetchBlock(height?: number | string) {
-      return this.blockchain.rpc.getBaseBlockAt(String(height));
-    },
-    async fetchAbciInfo() {
-      return this.blockchain.rpc.getBaseNodeInfo();
-    },
-    // async fetchNodeInfo() {
-    //     return this.blockchain.rpc.no()
-    // }
-  },
 });