Merge pull request #371 from alisaweb3/v3-single

Dashboard UI Refactor

package.json

@@ -33,6 +33,7 @@
     "axios": "^1.3.2",
     "buffer": "^6.0.3",
     "cross-fetch": "^3.1.5",
+    "daisyui": "^2.51.6",
     "dayjs": "^1.11.7",
     "long": "^5.2.1",
     "md-editor-v3": "^2.8.1",
@@ -42,6 +43,7 @@
     "postcss": "^8.4.23",
     "prismjs": "^1.29.0",
     "tailwindcss": "^3.3.1",
+    "theme-change": "^2.5.0",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.45",

src/App.vue

@@ -2,7 +2,8 @@
 import { useTheme } from 'vuetify'
 import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig'
 import { hexToRgb } from '@/plugins/vuetify/@layouts/utils'
-
+import { themeChange } from 'theme-change'
+import { onMounted } from 'vue'
 const { syncInitialLoaderTheme, syncVuetifyThemeWithTheme: syncConfigThemeWithVuetifyTheme, isAppRtl } = useThemeConfig()
 
 const { global } = useTheme()
@@ -10,6 +11,10 @@ const { global } = useTheme()
 // ℹ️ Sync current theme with initial loader theme
 syncInitialLoaderTheme()
 syncConfigThemeWithVuetifyTheme()
+
+onMounted(()=> {
+  themeChange(false)
+})
 </script>
 
 <template>

src/assets/images/heart.svg

@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50" fill="red"><path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"/></svg>

src/components/ChainSummary.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { getLogo, useDashboard,  } from '@/stores/useDashboard';
+import { getLogo, useDashboard, } from '@/stores/useDashboard';
 import { computed } from 'vue';
+import { Icon } from '@iconify/vue'
 
 const props = defineProps({
   name: {
@@ -10,45 +11,27 @@ const props = defineProps({
 });
 
 const dashboardStore = useDashboard()
-const conf = computed(()=> dashboardStore.chains[props.name] || {})
+const conf = computed(() => dashboardStore.chains[props.name] || {})
+
+const addFavor = (e: Event) => {
+  e.stopPropagation();
+  e.preventDefault();
+  dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
+  window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
+}
 
 </script>
 <template>
-    <VCard outlined class="p-1">
+  <RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
-        <VList class="card-list">
+    <div class="w-8 h-8 rounded-full overflow-hidden">
-            <VListItem :to="`/${name}`">
+      <img :src="conf.logo" />
-            <template #prepend>
+    </div>
-                <VAvatar rounded size="45" variant="tonal" class="me-3">
+    <div class="font-semibold ml-4 text-base flex-1">
-                <VImg :src="conf.logo" height="22"/>
+      {{ conf?.prettyName || props.name }}
-                </VAvatar>
+    </div>
-            </template>
+    <div @click="addFavor" class="pl-4 text-xl"
-
+      :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
-            <VListItemTitle class="font-weight-semibold text-sm mb-1">
+      <Icon icon="mdi-star" />
-                {{ conf?.prettyName || props.name }}
+    </div>
-            </VListItemTitle>
+  </RouterLink>
-
-            <VListItemSubtitle class="text-xs">
-                {{conf?.chainId || ''}}
-            </VListItemSubtitle>
-
-            <template #append>
-                <VListItemAction @click="(e:Event)=>{e.stopPropagation()}">
-                    <VCheckbox
-                        v-model="dashboardStore.favorite"
-                        true-icon="mdi-star"
-                        false-icon="mdi-star"
-                        color="warning"
-                        :value="props.name"
-                    />
-                    <VTooltip
-                        activator="parent"
-                        location="top"
-                    >
-                        {{ $t('index.add_to_favorite') }}
-                    </VTooltip>
-                </VListItemAction>
-            </template>
-            </VListItem>
-        </VList>
-    </VCard>
 </template>

src/components/ThemeSwitcher.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useThemeConfig } from '@core/composable/useThemeConfig';
+import type { ThemeSwitcherTheme } from '@layouts/types';
+import { onMounted, watch } from 'vue';
+
+const props = defineProps<{
+  themes: ThemeSwitcherTheme[];
+}>();
+
+const { theme } = useThemeConfig();
+const {
+  state: currentThemeName,
+  next: getNextThemeName,
+  index: currentThemeIndex,
+} = useCycleList(
+  props.themes.map(t => t.name),
+  { initialValue: theme.value }
+);
+
+const changeTheme = () => {
+  theme.value = getNextThemeName();  
+};
+
+const changeMode = (val: 'dark' | 'light' | 'system') => {
+  let value = val;
+  if (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    value = 'dark';
+  }
+  if (value === 'dark') {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+    
+  } else {
+    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
+  }
+  document.documentElement.setAttribute("data-theme", value);
+};
+// Update icon if theme is changed from other sources
+watch(theme, (val: 'dark' | 'light' | 'system') => {
+  currentThemeName.value = val;
+  changeMode(val);
+});
+
+onMounted(() => {
+  if (currentThemeName.value) {
+    changeMode(currentThemeName.value);
+  }
+});
+</script>
+
+<template>
+  <IconBtn @click="changeTheme">
+    <VIcon :icon="props.themes[currentThemeIndex].icon" />
+    <VTooltip activator="parent" open-delay="1000">
+      <span class="text-capitalize">{{ currentThemeName }}</span>
+    </VTooltip>
+  </IconBtn>
+</template>

src/layouts/components/DefaultLayout.vue

@@ -2,7 +2,8 @@
 import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig';
 
 // Components
-import Footer from '@/layouts/components/Footer.vue';
+// import Footer from '@/layouts/components/Footer.vue';
+import newFooter from '@/layouts/components/newFooter.vue';
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
 import UserProfile from '@/layouts/components/ChainProfile.vue';
 
@@ -79,7 +80,8 @@ blockchain.$subscribe((m, s) => {
 
     <!-- 👉 Footer -->
     <template #footer>
-      <Footer />
+      <!-- <Footer /> -->
+      <newFooter />
     </template>
 
     <!-- 👉 Customizer -->

src/layouts/components/NavbarThemeSwitcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ThemeSwitcherTheme } from '@layouts/types'
-
+import NewThemeSwitcher from '@/components/ThemeSwitcher.vue'
 const themes: ThemeSwitcherTheme[] = [
   {
     name: 'system',
@@ -18,5 +18,8 @@ const themes: ThemeSwitcherTheme[] = [
 </script>
 
 <template>
-  <ThemeSwitcher :themes="themes" />
+  <div>
+    <NewThemeSwitcher :themes="themes"/>
+    <!-- <ThemeSwitcher :themes="themes" /> -->
+  </div>
 </template>

src/layouts/components/newFooter.vue

@@ -0,0 +1,26 @@
+<template>
+    <footer class="footer items-center p-4 text-base">
+        <div class="items-center grid-flow-col">
+            &copy;
+            {{ new Date().getFullYear() }}
+            Made With
+            <img src="../../assets/images/heart.svg"/>
+            By
+            <a class="link link-info no-underline" 
+            href="https://ping.pub"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Ping.pub</a>
+        </div> 
+        <div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end hidden md:grid">
+            <a  class="link link-info no-underline" 
+                href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
+                target="noopener noreferrer"
+            >License</a>
+            <a class="link link-info no-underline" 
+                href="https://github.com/ping-pub/explorer"
+                target="noopener noreferrer"
+            >Github</a>
+        </div>
+    </footer>
+</template>

src/pages/index.vue

@@ -10,10 +10,10 @@ dashboard.$subscribe((mutation, state) => {
   localStorage.setItem('favorite', JSON.stringify(state.favorite))
 })
 const keywords = ref('')
-const chains = computed(()=> {
+const chains = computed(() => {
-  if(keywords.value) {
+  if (keywords.value) {
-    return Object.values(dashboard.chains).filter( (x: ChainConfig)=>x.chainName.indexOf(keywords.value) > -1)
+    return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
-  }else{
+  } else {
     return Object.values(dashboard.chains)
   }
 })
@@ -21,33 +21,37 @@ const chain = useBlockchain()
 
 </script>
 <template>
-  <div class="d-flex flex-column justify-center">
+  <div class="">
-    <div class="d-flex justify-center align-center align-self-center p-1 b1">
+    <div class="flex items-center justify-center mb-6 mt-10">
-      <VImg src="/logo.svg" width="85" height="85"/>
+      <div class="w-8 md:w-16 rounded-full mr-3">
-      <h1 class="text-primary text-h3 font-weight-bold d-none d-md-block ml-1">
+        <img src="/logo.svg" />
-        Ping Dashboard<VChip>Beta</VChip>
+      </div>
+      <h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
+        Ping dashboard
       </h1>
+      <div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">Beta</div>
     </div>
-    <div class="d-flex flex-column align-center">
+    <div class="text-center text-base">
       <p class="mb-1">
         {{ $t('index.slogan') }}
       </p>
-      <h2 class="mb-9">
+      <h2 class="mb-6">
         Cosmos Ecosystem Blockchains 🚀
       </h2>
     </div>
-    <VProgressLinear v-if="dashboard.status !== LoadingStatus.Loaded " indeterminate color="primary darken-2"/>
+    <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
-    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')" style="max-width: 300px;" app>
+        class="progress progress-info w-80 h-1"></progress></div>
+
+    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
+      style="max-width: 300px;" app>
       <template #append-inner>
         {{ chains.length }}/{{ dashboard.length }}
       </template>
     </VTextField>
-    <VRow class="my-auto">
+
-      <VCol v-for="k in chains" md="3">
+    <div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
-        <VLazy min-height="40" min-width="200" transition="fade-transition">
+      <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
-          <ChainSummary :name="k.chainName" />
+    </div>
-        </VLazy>
+
-      </VCol>    
-    </VRow>
   </div>
 </template>

src/plugins/vuetify/@core/components/I18n.vue

@@ -1,56 +1,48 @@
 <script setup lang="ts">
-import type { Anchor } from 'vuetify/lib/components'
+import { Icon } from '@iconify/vue';
-import type { I18nLanguage } from '@layouts/types'
+import type { Anchor } from 'vuetify/lib/components';
+import type { I18nLanguage } from '@layouts/types';
 
 const props = withDefaults(defineProps<Props>(), {
   location: 'bottom end',
-})
+});
 
 defineEmits<{
-  (e: 'change', id: string): void
+  (e: 'change', id: string): void;
-}>()
+}>();
 
 interface Props {
-  languages: I18nLanguage[]
+  languages: I18nLanguage[];
-  location?: Anchor
+  location?: Anchor;
 }
 
-const { locale } = useI18n({ useScope: 'global' })
+const { locale } = useI18n({ useScope: 'global' });
 
-watch(locale, val => {
+watch(locale, (val) => {
-  document.documentElement.setAttribute('lang', val as string)
+  document.documentElement.setAttribute('lang', val as string);
-})
+});
 
-const currentLang = ref([localStorage.getItem('lang')|| 'en'])
+const currentLang = ref([localStorage.getItem('lang') || 'en']);
 </script>
 
 <template>
-  <IconBtn>
+  <div class="dropdown dropdown-end">
-    <VIcon icon="mdi-translate" />
+    <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-
+      <Icon icon="mdi-translate" style="font-size: 24px" />
-    <!-- Menu -->
+    </label>
-    <VMenu
+    <ul
-      activator="parent"
+      tabindex="0"
-      :location="props.location"
+      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
-      offset="14px"
     >
-      <!-- List -->
+      <li v-for="lang in props.languages" :key="lang.i18nLang">
-      <VList
+        <a
-        v-model:selected="currentLang"
+          @click="
-        active-color="primary"
+            locale = lang.i18nLang;
-        min-width="175px"
+            $emit('change', lang.i18nLang);
-      >
+          "
-        <!-- List item -->
+          >{{ lang.label }}</a
-        <VListItem
-          v-for="lang in props.languages"
-          :key="lang.i18nLang"
-          :value="lang.i18nLang"
-          @click="locale = lang.i18nLang; $emit('change', lang.i18nLang)"
         >
-          <!-- Language label -->
+      </li>
-          <VListItemTitle>{{ lang.label }}</VListItemTitle>
+    </ul>
-        </VListItem>
+  </div>
-      </VList>
-    </VMenu>
-  </IconBtn>
 </template>

src/plugins/vuetify/@layouts/components/VerticalNavLayout.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { PropType } from 'vue'
+import type { PropType} from 'vue'
+import {h} from 'vue'
 import { useLayouts } from '@layouts'
 import { VerticalNav } from '@layouts/components'
 import type { VerticalNavItems } from '@layouts/types'
@@ -101,17 +102,20 @@ export default defineComponent({
       )
 
       // 👉 Footer
-      const footer = h(
+      // const footer = h(
-        'footer',
+      //   'footer',
-        { class: 'layout-footer' },
+      //   { class: 'layout-footer' },
-        [
+      //   [
-          h(
+      //     h(
-            'div',
+      //       'div',
-            { class: 'footer-content-container' },
+      //       { class: 'footer-content-container' },
-            slots.footer?.(),
+      //       slots.footer?.(),
-          ),
+      //     ),
-        ],
+      //   ],
-      )
+      // )
+
+      const footer = h('footer',{},slots.footer?.())
+      
 
       // 👉 Overlay
       const layoutOverlay = h(

src/stores/useBlockchain.ts

@@ -1,121 +1,133 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
-import { useDashboard, type ChainConfig, type Endpoint, EndpointType } from "./useDashboard";
+import {
-import type { VerticalNavItems } from '@/@layouts/types'
+  useDashboard,
-import { useRouter } from "vue-router";
+  type ChainConfig,
-import { CosmosRestClient } from "@/libs/client";
+  type Endpoint,
-import { useBankStore, useBaseStore, useGovStore, useMintStore, useStakingStore } from ".";
+  EndpointType,
-import { useBlockModule } from "@/modules/[chain]/block/block";
+} from './useDashboard';
-import { DEFAULT } from "@/libs";
+import type { VerticalNavItems } from '@/@layouts/types';
+import { useRouter } from 'vue-router';
+import { CosmosRestClient } from '@/libs/client';
+import {
+  useBankStore,
+  useBaseStore,
+  useGovStore,
+  useMintStore,
+  useStakingStore,
+} from '.';
+import { useBlockModule } from '@/modules/[chain]/block/block';
+import { DEFAULT } from '@/libs';
 
-export const useBlockchain = defineStore("blockchain", {
+export const useBlockchain = defineStore('blockchain', {
   state: () => {
     return {
       status: {} as Record<string, string>,
       rest: '',
-      chainName: "",
+      chainName: '',
       endpoint: {} as {
-        type?: EndpointType,
+        type?: EndpointType;
-        address: string
+        address: string;
-        provider: string       
+        provider: string;
       },
-      connErr: ""
+      connErr: '',
-    }
+    };
   },
   getters: {
-    current() : ChainConfig | undefined {
+    current(): ChainConfig | undefined {
-      return this.dashboard.chains[this.chainName]
+      return this.dashboard.chains[this.chainName];
     },
     logo(): string {
-      return this.current?.logo || ''
+      return this.current?.logo || '';
     },
     dashboard() {
-      return useDashboard()
+      return useDashboard();
     },
     computedChainMenu() {
+      let currNavItem: VerticalNavItems = [];
 
-      let currNavItem: VerticalNavItems = []
+      const router = useRouter();
-
+      const routes = router?.getRoutes() || [];
-      const router = useRouter()
+      if (this.current && routes) {
-      const routes = router?.getRoutes()||[]
+        currNavItem = [
-      if(this.current && routes) {
+          {
-        currNavItem = [{
+            title: this.current?.prettyName || this.chainName || '',
-          title: this.current?.prettyName || this.chainName || '',
+            icon: { image: this.current.logo, size: '22' },
-          icon: {image: this.current.logo, size: '22'},
+            i18n: false,
-          i18n: false,
+            children: routes
-          children: routes
+              .filter((x) => x.meta.i18n)
-                    .filter(x=> x.meta.i18n)
+              .map((x) => ({
-                    .map(x => ({
+                title: `module.${x.meta.i18n}`,
-                      title: `module.${x.meta.i18n}`, 
+                to: { path: x.path.replace(':chain', this.chainName) },
-                      to: {path: x.path.replace(':chain',this.chainName)}, 
+                icon: { icon: 'mdi-chevron-right', size: '22' },
-                      icon: { icon: 'mdi-chevron-right', size: '22'},
+                i18n: true,
-                      i18n: true
+              }))
-                    }))
+              .sort((a, b) => a.to.path.length - b.to.path.length),
-                    .sort((a,b)=>a.to.path.length - b.to.path.length)
+          },
-        }]
+        ];
       }
       // compute favorite menu
-      const favNavItems: VerticalNavItems = []
+      const favNavItems: VerticalNavItems = [];
-      this.dashboard.favorite.forEach(name => {
+      Object.keys(this.dashboard.favoriteMap).forEach((name) => {
-        const ch = this.dashboard.chains[name]
+        const ch = this.dashboard.chains[name];
-        if(ch) {
+        if (ch && this.dashboard.favoriteMap?.[name]) {
           favNavItems.push({
-            title: ch.prettyName || ch.chainName || name, 
+            title: ch.prettyName || ch.chainName || name,
-            to: { path: `/${ch.chainName || name}`}, 
+            to: { path: `/${ch.chainName || name}` },
-            icon: {image: ch.logo, size: '22'}
+            icon: { image: ch.logo, size: '22' },
-          } )
+          });
-        } 
+        }
-      })    
+      });
 
       // combine all together
-      return [...currNavItem,
+      return [
-          { heading: 'Ecosystem' },
+        ...currNavItem,
-          {
+        { heading: 'Ecosystem' },
-            title: 'Favorite', 
+        {
-            children: favNavItems, 
+          title: 'Favorite',
-            badgeContent: favNavItems.length,
+          children: favNavItems,
-            badgeClass: 'bg-primary',
+          badgeContent: favNavItems.length,
-            i18n: true,
+          badgeClass: 'bg-primary',
-            icon: { icon: 'mdi-star', size: '22'}
+          i18n: true,
-          },
+          icon: { icon: 'mdi-star', size: '22' },
-          {
+        },
-            title: 'All Blockchains',
+        {
-            to: { path : '/'},
+          title: 'All Blockchains',
-            badgeContent: this.dashboard.length,
+          to: { path: '/' },
-            badgeClass: 'bg-primary',
+          badgeContent: this.dashboard.length,
-            i18n: true,
+          badgeClass: 'bg-primary',
-            icon: { icon: 'mdi-grid', size: '22'}
+          i18n: true,
-          }
+          icon: { icon: 'mdi-grid', size: '22' },
-        ]
+        },
+      ];
     },
   },
   actions: {
     async initial() {
-      await this.randomSetupEndpoint()
+      await this.randomSetupEndpoint();
-      await useStakingStore().init()
+      await useStakingStore().init();
-      useBankStore().initial()
+      useBankStore().initial();
-      useBaseStore().initial()
+      useBaseStore().initial();
-      useGovStore().initial()
+      useGovStore().initial();
-      useMintStore().initial()
+      useMintStore().initial();
-      useBlockModule().initial()      
+      useBlockModule().initial();
     },
 
     async randomSetupEndpoint() {
-      const all = this.current?.endpoints?.rest
+      const all = this.current?.endpoints?.rest;
-      if(all) {    
+      if (all) {
-          const rn = Math.random()
+        const rn = Math.random();
-          const endpoint = all[Math.floor(rn * all.length)]
+        const endpoint = all[Math.floor(rn * all.length)];
-          await this.setRestEndpoint(endpoint)
+        await this.setRestEndpoint(endpoint);
-      } 
+      }
-    },
-    
-    async setRestEndpoint(endpoint: Endpoint) {
-      this.connErr = ''
-      this.endpoint = endpoint
-      this.rpc = new CosmosRestClient(endpoint.address, DEFAULT)
-    },
-    setCurrent(name: string) {
-      this.chainName = name
     },
 
-  }
+    async setRestEndpoint(endpoint: Endpoint) {
-})
+      this.connErr = '';
+      this.endpoint = endpoint;
+      this.rpc = new CosmosRestClient(endpoint.address, DEFAULT);
+    },
+    setCurrent(name: string) {
+      this.chainName = name;
+    },
+  },
+});

src/stores/useDashboard.ts

@@ -1,8 +1,7 @@
-
+import { defineStore } from 'pinia';
-import { defineStore } from "pinia";
+import { get } from '../libs/http';
-import { get } from '../libs/http'
+import type { Chain, Asset } from '@ping-pub/chain-registry-client/dist/types';
-import type { Chain, Asset } from '@ping-pub/chain-registry-client/dist/types'
+import { useBlockchain } from './useBlockchain';
-import { useBlockchain } from "./useBlockchain";
 
 export enum EndpointType {
   rpc,
@@ -12,253 +11,278 @@ export enum EndpointType {
 }
 
 export interface Endpoint {
-  type?: EndpointType,
+  type?: EndpointType;
-  address: string,
+  address: string;
-  provider: string
+  provider: string;
 }
 
 // Chain config structure of cosmos.directory
 export interface DirectoryChain {
-  assets: Asset[],
+  assets: Asset[];
-  bech32_prefix: string,
+  bech32_prefix: string;
   best_apis: {
-    rest: Endpoint[]
+    rest: Endpoint[];
-    rpc: Endpoint[]
+    rpc: Endpoint[];
-  },
+  };
-  chain_id: string,
+  chain_id: string;
-  chain_name: string,
+  chain_name: string;
-  pretty_name: string,
+  pretty_name: string;
-  coingecko_id: string,
+  coingecko_id: string;
-  cosmwasm_enabled: boolean,
+  cosmwasm_enabled: boolean;
-  decimals: number,
+  decimals: number;
-  denom: string,
+  denom: string;
-  display: string,
+  display: string;
-  explorers: {
+  explorers:
-    name?: string | undefined;
+    | {
-    kind?: string | undefined;
+        name?: string | undefined;
-    url?: string | undefined;
+        kind?: string | undefined;
-    tx_page?: string | undefined;
+        url?: string | undefined;
-    account_page?: string | undefined;
+        tx_page?: string | undefined;
-  }[] | undefined,
+        account_page?: string | undefined;
-  height: number,
+      }[]
-  image: string,
+    | undefined;
-  name: string,
+  height: number;
-  network_type: string,
+  image: string;
-  symbol: string,
+  name: string;
+  network_type: string;
+  symbol: string;
   versions?: {
-    application_version: string,
+    application_version: string;
-    cosmos_sdk_version: string,
+    cosmos_sdk_version: string;
-    tendermint_version: string,
+    tendermint_version: string;
-  }
+  };
 }
 
 export interface ChainConfig {
-  chainName: string,
+  chainName: string;
-  prettyName: string,
+  prettyName: string;
-  bech32Prefix: string,
+  bech32Prefix: string;
-  chainId: string,
+  chainId: string;
-  assets: Asset[],
+  assets: Asset[];
-  themeColor?: string,
+  themeColor?: string;
   endpoints: {
-    rest?: Endpoint[]
+    rest?: Endpoint[];
-    rpc?: Endpoint[]
+    rpc?: Endpoint[];
-    grpc?: Endpoint[] 
+    grpc?: Endpoint[];
-  },
+  };
-  logo: string,
+  logo: string;
   versions: {
-    application?: string,
+    application?: string;
-    cosmosSdk?: string,
+    cosmosSdk?: string;
-    tendermint?: string,
+    tendermint?: string;
-  },
+  };
-  exponent: string,
+  exponent: string;
-  excludes?: string,
+  excludes?: string;
 }
 
 export interface LocalConfig {
-  addr_prefix: string,
+  addr_prefix: string;
-  alias: string,
+  alias: string;
-  api: string[] | Endpoint[],
+  api: string[] | Endpoint[];
-  assets: {base: string, coingecko_id: string, exponent: string, logo: string, symbol: string}[]
+  assets: {
-  chain_name: string,
+    base: string;
-  coin_type: string
+    coingecko_id: string;
-  logo: string,
+    exponent: string;
-  min_tx_fee: string,
+    logo: string;
-  rpc: string[] | Endpoint[],
+    symbol: string;
-  sdk_version: string,
+  }[];
+  chain_name: string;
+  coin_type: string;
+  logo: string;
+  min_tx_fee: string;
+  rpc: string[] | Endpoint[];
+  sdk_version: string;
 }
 
-function apiConverter(api: any[]){
+function apiConverter(api: any[]) {
-  if(!api) return []
+  if (!api) return [];
-  const array = typeof api === 'string'? [api] : api
+  const array = typeof api === 'string' ? [api] : api;
-  return array.map(x => {
+  return array.map((x) => {
-    if(typeof x === 'string') {
+    if (typeof x === 'string') {
-      const parts = String(x).split('.')
+      const parts = String(x).split('.');
       return {
         address: x,
-        provider: parts.length >=2 ? parts[parts.length-2] : x
+        provider: parts.length >= 2 ? parts[parts.length - 2] : x,
-      }
+      };
-    }else{
+    } else {
-      return x as Endpoint
+      return x as Endpoint;
     }
-  })
+  });
 }
 
-export function fromLocal(lc: LocalConfig ): ChainConfig {
+export function fromLocal(lc: LocalConfig): ChainConfig {
-  const conf = {} as ChainConfig
+  const conf = {} as ChainConfig;
-  conf.assets = lc.assets.map(x => ({
+  conf.assets = lc.assets.map((x) => ({
-    name: x.base, 
+    name: x.base,
-    base: x.base, 
+    base: x.base,
-    display: x.symbol, 
+    display: x.symbol,
-    symbol: x.symbol, 
+    symbol: x.symbol,
-    logo_URIs: { svg: x.logo }, 
+    logo_URIs: { svg: x.logo },
     coingecko_id: x.coingecko_id,
-    exponent: x.exponent, 
+    exponent: x.exponent,
-    denom_units: [{denom: x.base, exponent: 0}, {denom: x.symbol.toLowerCase(), exponent: Number(x.exponent)}]
+    denom_units: [
-  }))
+      { denom: x.base, exponent: 0 },
-  conf.bech32Prefix = lc.addr_prefix
+      { denom: x.symbol.toLowerCase(), exponent: Number(x.exponent) },
-  conf.chainName = lc.chain_name
+    ],
-  conf.prettyName = lc.chain_name
+  }));
+  conf.bech32Prefix = lc.addr_prefix;
+  conf.chainName = lc.chain_name;
+  conf.prettyName = lc.chain_name;
   conf.endpoints = {
     rest: apiConverter(lc.api),
     rpc: apiConverter(lc.rpc),
-  }
+  };
-  conf.logo = lc.logo
+  conf.logo = lc.logo;
-  return conf
+  return conf;
 }
 
-
 export function fromDirectory(source: DirectoryChain): ChainConfig {
-  const conf = {} as ChainConfig
+  const conf = {} as ChainConfig;
-  conf.assets = source.assets,
+  (conf.assets = source.assets),
-  conf.bech32Prefix = source.bech32_prefix,
+    (conf.bech32Prefix = source.bech32_prefix),
-  conf.chainId = source.chain_id,
+    (conf.chainId = source.chain_id),
-  conf.chainName = source.chain_name,
+    (conf.chainName = source.chain_name),
-  conf.prettyName = source.pretty_name,
+    (conf.prettyName = source.pretty_name),
-  conf.versions = {
+    (conf.versions = {
-    application: source.versions?.application_version || '',
+      application: source.versions?.application_version || '',
-    cosmosSdk: source.versions?.cosmos_sdk_version || '',
+      cosmosSdk: source.versions?.cosmos_sdk_version || '',
-    tendermint: source.versions?.tendermint_version || '',
+      tendermint: source.versions?.tendermint_version || '',
-  },
+    }),
-  conf.logo = pathConvert(source.image)
+    (conf.logo = pathConvert(source.image));
-  conf.endpoints = source.best_apis
+  conf.endpoints = source.best_apis;
-  return conf
+  return conf;
 }
 
 function pathConvert(path: string | undefined) {
-  if(path) {
+  if (path) {
-    path = path.replace('https://raw.githubusercontent.com/cosmos/chain-registry/master', 'https://registry.ping.pub')
+    path = path.replace(
+      'https://raw.githubusercontent.com/cosmos/chain-registry/master',
+      'https://registry.ping.pub'
+    );
   }
-  return path || ''
+  return path || '';
 }
 
-export function getLogo(conf: {
+export function getLogo(
-  svg?: string,
+  conf:
-  png?: string,
+    | {
-  jpeg?: string,
+        svg?: string;
-} | undefined) {
+        png?: string;
-  if(conf) {
+        jpeg?: string;
-    return pathConvert(conf.svg || conf.png || conf.jpeg)
+      }
+    | undefined
+) {
+  if (conf) {
+    return pathConvert(conf.svg || conf.png || conf.jpeg);
   }
-  return undefined
+  return undefined;
 }
 
-function createChainFromDirectory(source: DirectoryChain) : Chain {
+function createChainFromDirectory(source: DirectoryChain): Chain {
-  const conf: Chain = {} as Chain; 
+  const conf: Chain = {} as Chain;
-  conf.apis = source.best_apis
+  conf.apis = source.best_apis;
-  conf.bech32_prefix = source.bech32_prefix
+  conf.bech32_prefix = source.bech32_prefix;
-  conf.chain_id = source.chain_id
+  conf.chain_id = source.chain_id;
-  conf.chain_name = source.chain_name
+  conf.chain_name = source.chain_name;
-  conf.explorers = source.explorers
+  conf.explorers = source.explorers;
-  conf.pretty_name = source.pretty_name
+  conf.pretty_name = source.pretty_name;
-  if(source.versions) {
+  if (source.versions) {
     conf.codebase = {
       recommended_version: source.versions.application_version,
       cosmos_sdk_version: source.versions.cosmos_sdk_version,
       tendermint_version: source.versions.tendermint_version,
-    }
+    };
   }
-  if(source.image) {
+  if (source.image) {
     conf.logo_URIs = {
-      svg: source.image
+      svg: source.image,
-    }
+    };
   }
-  return conf
+  return conf;
 }
 
 export enum LoadingStatus {
-    Empty,
+  Empty,
-    Loading,
+  Loading,
-    Loaded,
+  Loaded,
 }
 export enum NetworkType {
   Mainnet,
   Testnet,
 }
 export enum ConfigSource {
-  MainnetCosmosDirectory = "https://chains.cosmos.directory",
+  MainnetCosmosDirectory = 'https://chains.cosmos.directory',
-  TestnetCosmosDirectory = "https://chains.testcosmos.directory",
+  TestnetCosmosDirectory = 'https://chains.testcosmos.directory',
   Local = 'local',
 }
 
 export const useDashboard = defineStore('dashboard', {
   state: () => {
-    const fav = JSON.parse(localStorage.getItem('favorite') || '["cosmoshub", "osmosis"]')
+    const fav = JSON.parse(
-      return {
+      localStorage.getItem('favorite') || '["cosmoshub", "osmosis"]'
-        status: LoadingStatus.Empty,
+    );
-        source: ConfigSource.MainnetCosmosDirectory,
+    const favMap = JSON.parse(
-        networkType: NetworkType.Mainnet, 
+      localStorage.getItem('favoriteMap') ||
-        favorite: fav as string[],
+        '{"cosmoshub":true, "osmosis":true}'
-        chains: {} as Record<string, ChainConfig>,
+    );
-      }
+    return {
+      status: LoadingStatus.Empty,
+      source: ConfigSource.MainnetCosmosDirectory,
+      networkType: NetworkType.Mainnet,
+      favorite: fav as string[],
+      favoriteMap: favMap as Record<string, boolean>,
+      chains: {} as Record<string, ChainConfig>,
+    };
   },
   getters: {
-    length() : number {
+    length(): number {
-      return Object.keys(this.chains).length
+      return Object.keys(this.chains).length;
-    }
+    },
   },
   actions: {
     initial() {
-      this.loadingFromLocal()
+      this.loadingFromLocal();
       // this.loadingFromRegistry()
     },
     async loadingFromRegistry() {
-      if(this.status === LoadingStatus.Empty) {
+      if (this.status === LoadingStatus.Empty) {
-          this.status = LoadingStatus.Loading
+        this.status = LoadingStatus.Loading;
-          get(this.source).then((res)=> {
+        get(this.source).then((res) => {
-              res.chains.forEach(( x: DirectoryChain ) => {
+          res.chains.forEach((x: DirectoryChain) => {
-                  this.chains[x.chain_name] = fromDirectory(x)
+            this.chains[x.chain_name] = fromDirectory(x);
-              });
+          });
-              this.status = LoadingStatus.Loaded
+          this.status = LoadingStatus.Loaded;
-          })
+        });
       }
     },
     async loadingFromLocal() {
-      const source: Record<string, LocalConfig> = this.networkType === NetworkType.Mainnet 
+      const source: Record<string, LocalConfig> =
-          ? import.meta.glob('../../chains/mainnet/*.json', {eager: true})
+        this.networkType === NetworkType.Mainnet
-          : import.meta.glob('../../chains/testnet/*.json', {eager: true})
+          ? import.meta.glob('../../chains/mainnet/*.json', { eager: true })
-      Object.values<LocalConfig>(source).forEach((x: LocalConfig) => {        
+          : import.meta.glob('../../chains/testnet/*.json', { eager: true });
-        this.chains[x.chain_name] = fromLocal(x)
+      Object.values<LocalConfig>(source).forEach((x: LocalConfig) => {
-      })
+        this.chains[x.chain_name] = fromLocal(x);
-      this.setupDefault()
+      });
-      this.status = LoadingStatus.Loaded
+      this.setupDefault();
+      this.status = LoadingStatus.Loaded;
     },
     setupDefault() {
-      if(this.length > 0) {
+      if (this.length > 0) {
-        const blockchain = useBlockchain()
+        const blockchain = useBlockchain();
-        for(let i=0; i < this.favorite.length; i++) {
+        for (let i = 0; i < this.favorite.length; i++) {
-          if(!blockchain.chainName && this.chains[this.favorite[i]]) {
+          if (!blockchain.chainName && this.chains[this.favorite[i]]) {
-            blockchain.setCurrent(this.favorite[i])
+            blockchain.setCurrent(this.favorite[i]);
           }
         }
-        if(!blockchain.chainName) {
+        if (!blockchain.chainName) {
-          const [first] = Object.keys(this.chains)
+          const [first] = Object.keys(this.chains);
-          blockchain.setCurrent(first)
+          blockchain.setCurrent(first);
         }
       }
     },
     setConfigSource(newSource: ConfigSource) {
-      this.source = newSource
+      this.source = newSource;
-      this.initial()
+      this.initial();
-    }
+    },
-  }
+  },
-})
+});

tailwind.config.js

@@ -17,5 +17,28 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require("daisyui")
+  ],
+  daisyui: {
+    themes: [
+      {
+        myTheme: {
+          info: "#666CFF",
+        }
+      },
+      {
+        light: {
+          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
+          info: "#666CFF",
+        }
+      },
+      {
+        dark: {
+          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
+          info: "#666CFF",
+        }
+      },
+    ],
+  }
 };