Merge pull request #381 from alisaweb3/v3-single

wallet state, process,ibc,dashboard
2023-05-16 06:59:18 +08:00 · 2023-05-16 06:59:18 +08:00 · c35b07ee49
commit c35b07ee49
parent aef6e5f0e3 1f27a4cc30
15 changed files with 631 additions and 211 deletions
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
    "@tomieric/vue-flip-countdown": "^0.0.5",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vueuse/core": "^9.12.0",
+    "@vueuse/integrations": "^10.1.2",
    "@vueuse/math": "^9.12.0",
    "apexcharts": "^3.37.1",
    "autoprefixer": "^10.4.14",
@ -40,10 +41,11 @@
    "md-editor-v3": "^2.8.1",
    "numeral": "^2.0.6",
    "osmojs": "^14.0.0-rc.0",
-    "ping-widget": "^0.0.7",
+    "ping-widget": "^0.0.9",
    "pinia": "^2.0.28",
    "postcss": "^8.4.23",
    "prismjs": "^1.29.0",
+    "qrcode": "^1.5.3",
    "tailwindcss": "^3.3.1",
    "theme-change": "^2.5.0",
    "vite-plugin-vue-layouts": "^0.7.0",
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
+import { select } from '@/components/dynamic/index';
 import type { PaginatedProposals } from '@/types';
 import ProposalProcess from './ProposalProcess.vue';
 import type { PropType } from 'vue';
@ -26,64 +27,201 @@ const statusMap: Record<string, string> = {
 </script>
 <template>
  <div class="bg-white dark:bg-[#28334e] rounded text-sm">
-    <RouterLink
-      :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-      v-for="(item, index) in proposals?.proposals"
-      :key="index"
-      class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
-    >
-      <div class="grid grid-cols-6 md:grid-cols-11 flex-1">
-        <div class="text-main dark:text-white mb-3">
-          #{{ item?.proposal_id }}
-        </div>
+    <table class="table-compact w-full table-fixed hidden lg:table">
+      <tbody>
+        <tr v-for="(item, index) in proposals?.proposals" :key="index">
+          <td class="px-4 w-20">
+            <label
+              for="proposal-detail-modal"
+              class="text-main text-base hover:text-indigo-400 cursor-pointer"
+            >
+              #{{ item?.proposal_id }}</label
+            >
+            <input
+              type="checkbox"
+              id="proposal-detail-modal"
+              class="modal-toggle"
+            />
+            <div class="modal modal-bottom sm:modal-middle">
+              <div class="modal-box">
+                <h3 class="font-bold text-lg">Description</h3>
+                <p class="py-4">
+                  <Component
+                    v-if="item.content?.description"
+                    :is="select(item.content?.description, 'horizontal')"
+                    :value="item.content?.description"
+                  ></Component>
+                </p>
+                <div class="modal-action">
+                  <label
+                    for="proposal-detail-modal"
+                    class="btn btn-sm btn-primary"
+                    >Close</label
+                  >
+                </div>
+              </div>
+            </div>
+          </td>
+          <td class="w-[35%]">
+            <div>
+              <RouterLink
+                :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+                class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
+              >
+                {{ item?.content?.title }}
+              </RouterLink>
+              <div
+                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+              >
+                {{ showType(item.content['@type']) }}
+              </div>
+            </div>
+          </td>
+          <td class="w-[25%]">
+            <ProposalProcess
+              :pool="staking.pool"
+              :tally="item.final_tally_result"
+            ></ProposalProcess>
+          </td>
+          <td>
+            <div class="pl-4">
+              <div
+                class="flex items-center"
+                :class="
+                  statusMap?.[item?.status] === 'PASSED'
+                    ? 'text-yes'
+                    : statusMap?.[item?.status] === 'REJECTED'
+                    ? 'text-no'
+                    : 'text-info'
+                "
+              >
+                <div
+                  class="w-1 h-1 rounded-full mr-2"
+                  :class="
+                    statusMap?.[item?.status] === 'PASSED'
+                      ? 'bg-yes'
+                      : statusMap?.[item?.status] === 'REJECTED'
+                      ? 'bg-no'
+                      : 'bg-info'
+                  "
+                ></div>
+                <div class="text-xs">
+                  {{ statusMap?.[item?.status] || item?.status }}
+                </div>
+              </div>
+              <div
+                class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
+              >
+                {{ format.toDay(item.voting_end_time, 'from') }}
+              </div>
+            </div>
+          </td>

-        <div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
-          {{ item?.content?.title }}
-        </div>
+          <td>
+            <div>
+              <button class="btn btn-xs btn-primary rounded-sm">Vote</button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>

-        <div class="col-span-3 mb-3 truncate">
-          <div
-            class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
+    <div class="lg:hidden">
+      <div
+        v-for="(item, index) in proposals?.proposals"
+        :key="index"
+        class="px-4 py-4"
+      >
+        <div
+          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
+        >
+          <RouterLink
+            :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            class="flex-1 w-0 truncate mr-4"
+            >{{ item?.content?.title }}</RouterLink
          >
-            {{ showType(item.content['@type']) }}
+          <label
+            for="proposal-detail-modals"
+            class="text-main text-base hover:text-indigo-400 cursor-pointer"
+          >
+            #{{ item?.proposal_id }}</label
+          >
+          <input
+            type="checkbox"
+            id="proposal-detail-modals"
+            class="modal-toggle"
+          />
+          <div class="modal modal-bottom sm:modal-middle">
+            <div class="modal-box">
+              <h3 class="font-bold text-lg">Description</h3>
+              <p class="py-4">
+                <Component
+                  v-if="item.content?.description"
+                  :is="select(item.content?.description, 'horizontal')"
+                  :value="item.content?.description"
+                ></Component>
+              </p>
+              <div class="modal-action">
+                <label
+                  for="proposal-detail-modals"
+                  class="btn btn-sm btn-primary"
+                  >Close</label
+                >
+              </div>
+            </div>
          </div>
        </div>

-        <div
-          class="flex items-center mb-3"
-          :class="
-            statusMap?.[item?.status] === 'PASSED'
-              ? 'text-yes'
-              : statusMap?.[item?.status] === 'REJECTED'
-              ? 'text-no'
-              : 'text-info'
-          "
-        >
+        <div class="grid grid-cols-4 mt-2 mb-2">
+          <div class="col-span-2">
+            <div
+              class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+            >
+              {{ showType(item.content['@type']) }}
+            </div>
+          </div>
          <div
-            class="w-1 h-1 rounded-full mr-2"
+            class="flex items-center"
            :class="
              statusMap?.[item?.status] === 'PASSED'
-                ? 'bg-yes'
+                ? 'text-yes'
                : statusMap?.[item?.status] === 'REJECTED'
-                ? 'bg-no'
-                : 'bg-info'
+                ? 'text-no'
+                : 'text-info'
            "
-          ></div>
-          <div class="text-xs">
-            {{ statusMap?.[item?.status] || item?.status }}
+          >
+            <div
+              class="w-1 h-1 rounded-full mr-2"
+              :class="
+                statusMap?.[item?.status] === 'PASSED'
+                  ? 'bg-yes'
+                  : statusMap?.[item?.status] === 'REJECTED'
+                  ? 'bg-no'
+                  : 'bg-info'
+              "
+            ></div>
+            <div class="text-xs flex items-center">
+              {{ statusMap?.[item?.status] || item?.status }}
+            </div>
+          </div>
+          <div
+            class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
+          >
+            {{ format.toDay(item.voting_end_time, 'from') }}
          </div>
        </div>

-        <div
-          class="truncate mb-3 col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
-        >
-          {{ format.toDay(item.voting_end_time, 'from') }}
+        <div>
+          <ProposalProcess
+            :pool="staking.pool"
+            :tally="item.final_tally_result"
+          ></ProposalProcess>
+        </div>
+
+        <div class="mt-4">
+          <button class="btn btn-xs btn-primary rounded-sm px-4">Vote</button>
        </div>
      </div>
-      <ProposalProcess
-        :pool="staking.pool"
-        :tally="item.final_tally_result"
-      ></ProposalProcess>
-    </RouterLink>
+    </div>
  </div>
 </template>
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@ -30,46 +30,35 @@ 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>
+  <div class="progress rounded-[3px] h-6 text-xs flex items-center">
    <div
-      class="h-1"
-      :style="`width: ${veto}; background-color: #B71C1C;`"
-    ></div>
-    <div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
+      class="h-6 bg-yes flex items-center pl-2 text-white overflow-hidden"
+      :style="`width: ${yes}`"
+      :title="yes"
+    >
+      {{ yes }}
+    </div>
+    <div
+      class="h-6 bg-no flex items-center text-white overflow-hidden"
+      :style="`width: ${no}`"
+      :title="no"
+    >
+      {{ no }}
+    </div>
+    <div
+      class="h-6 bg-[#B71C1C] flex items-center text-white overflow-hidden"
+      :style="`width: ${veto};`"
+      :title="veto"
+    >
+      {{ veto }}
+    </div>
+    <div
+      class="h-6 bg-secondary flex items-center text-white overflow-hidden"
+      :style="`width: ${abstain}`"
+      :title="abstain"
+    >
+      {{ abstain }}
+    </div>
  </div>
 </template>
 <style scoped>
--- a/src/layouts/components/Breadcrumbs.vue
+++ b/src/layouts/components/Breadcrumbs.vue
@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useBlockchain } from '@/stores/useBlockchain';
-import { Icon } from '@iconify/vue';
-import { computed } from '@vue/reactivity';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-const chain = useBlockchain();
-const route = useRoute();
-const i18n = useI18n();
-/// To display human readable module name, we have to set the prefix("module.") + route name to the key in i18n.
-/// such as `module.chain` = 'Dashboard'
-const moduleName = computed(() =>
-  i18n.t(`module.${route.name?.toString() || ''}`)
-);
-const items = computed(() => [
-  { title: String(chain.name).toUpperCase(), href: `/${chain.name}` },
-  moduleName.value,
-]);
-</script>
-<template>
-  <div class="d-flex flex-rows align-center">
-    <span class="text-h5 mr-3">{{ moduleName }}</span>
-    <Icon icon="mdi-dots-vertical" />
-    <VBreadcrumbs :items="items">
-      <template v-slot:divider>
-        <Icon icon="mdi-chevron-right" />
-      </template>
-    </VBreadcrumbs>
-  </div>
-</template>
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@ -110,6 +110,7 @@ const changeOpen = (index: Number) => {
                    $route.path === el?.to?.path && item?.title !== 'Favorite',
                }"
              >
+                <Icon icon="mdi:chevron-right" class="mr-2 ml-3"/>
                <img
                  v-if="el?.icon?.image"
                  :src="el?.icon?.image"
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@ -1,10 +1,36 @@
 <script setup lang="ts">
 import { useWalletStore } from '@/stores';
-
+import { ref, computed } from 'vue';
 const walletStore = useWalletStore();
 walletStore.$subscribe((m, s) => {
  console.log(m, s);
 });
+let showCopyToast = ref(0);
+async function copyAdress(address: string) {
+  try {
+    await navigator.clipboard.writeText(address);
+    showCopyToast.value = 1;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
+  } catch (err) {
+    showCopyToast.value = 2;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
+  }
+}
+const tipMsg = computed(() => {
+  return showCopyToast.value === 2
+    ? { class: 'error', msg: 'Copy Error!' }
+    : { class: 'success', msg: 'Copy Success!' };
+});
+
+const addressChange = computed(() => {
+  return walletStore?.currentAddress || walletStore?.walletIsConnected
+    ? true
+    : false;
+});
 </script>

 <template>
@ -12,7 +38,9 @@ walletStore.$subscribe((m, s) => {
    v-show="walletStore.currentAddress"
    class="dropdown dropdown-hover dropdown-end"
  >
-    <label tabindex="0" class="btn btn-sm m-1 lowercase">{{ walletStore.shortAddress }}</label>
+    <label tabindex="0" class="btn btn-sm m-1 lowercase">{{
+      walletStore.shortAddress
+    }}</label>
    <div
      tabindex="0"
      class="dropdown-content menu shadow p-2 bg-base-100 rounded w-64 overflow-auto"
@ -24,9 +52,22 @@ walletStore.$subscribe((m, s) => {
        <a
          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
          style="overflow-wrap: anywhere"
+          @click="copyAdress(walletStore.currentAddress)"
        >
          {{ walletStore.currentAddress }}
        </a>
+        <div class="divider mt-1 mb-1"></div>
+        <RouterLink
+          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          to="/wallet/accounts"
+          >Accounts</RouterLink
+        >
+        <RouterLink
+          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          to="/wallet/portfolio"
+          >Portfolio</RouterLink
+        >
+        <div class="divider mt-1 mb-1"></div>
        <a
          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
          @click="walletStore.disconnect()"
@ -34,6 +75,20 @@ walletStore.$subscribe((m, s) => {
        >
      </div>
    </div>
+    <div class="toast" v-show="showCopyToast === 1">
+      <div class="alert alert-success">
+        <div class="text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="toast" v-show="showCopyToast === 2">
+      <div class="alert alert-error">
+        <div class="text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
  </div>
  <label
    v-if="!walletStore?.currentAddress"
--- a/src/layouts/components/NavFooter.vue
+++ b/src/layouts/components/NavFooter.vue
@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { useWalletStore } from '@/stores';
+const walletStore = useWalletStore();
+function walletStateChange(res:any){
+  console.log(res.detail?.value, 8888888)
+  walletStore.setConnectedWallet(res.detail?.value)
+}
+</script>
 <template>
  <footer class="footer items-center p-4 text-sm mb-4">
    <div class="items-center grid-flow-col">
@ -32,7 +40,7 @@
    </div>
  </footer>
  <div class="footer-modal">
-    <ping-connect-wallet :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" />
+    <ping-connect-wallet :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" @change="walletStateChange"/>
  </div>
 </template>

--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@ -3,6 +3,7 @@ import { useBaseStore, useBlockchain } from '@/stores';
 import type { Connection, ClientState, Channel } from '@/types';
 import { onMounted } from 'vue';
 import { ref } from 'vue';
+import { Icon } from '@iconify/vue';

 const props = defineProps(['chain', 'connection_id']);
 const chainStore = useBlockchain();
@ -43,60 +44,92 @@ function color(v: string) {
  <div>
    <div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
-        <dl
-          class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3"
-        >
-          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-            <dt class="text-base leading-7 text-gray-600">
-              {{ conn.client_id }} {{ props.connection_id }}
-            </dt>
-            <dd
-              class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
-            >
-              {{ baseStore.latest?.block?.header?.chain_id }}
-            </dd>
+        <dl class="grid grid-cols-1 gap-x-8 text-center lg:grid-cols-3">
+          <div class="mx-auto flex items-center">
+            <div>
+              <div
+                class="order-first text-3xl font-semibold tracking-tight text-main mb-1"
+              >
+                {{ baseStore.latest?.block?.header?.chain_id }}
+              </div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">
+                {{ conn.client_id }} {{ props.connection_id }}
+              </div>
+            </div>
          </div>
-          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-            <dt class="text-base leading-7 text-gray-600">{{ conn.state }}</dt>
-            <dd
-              class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
-            >
-              &lt;&gt;<VProgressLinear class="w-100" color="success" />
-            </dd>
+          <div class="mx-auto flex items-center">
+            <div>
+              <Icon icon="mdi:arrow-left-right" class="text-4xl mx-auto" />
+              <div
+                class="bg-success w-24 h-1 rounded-sm mt-1 mb-3 opacity-60"
+              ></div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">
+                {{ conn.state }}
+              </div>
+            </div>
          </div>
-          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-            <dt class="text-base leading-7 text-gray-600">
-              {{ conn.counterparty?.connection_id }} {{ clientState.client_id }}
-            </dt>
-            <dd
-              class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
+          <div class="mx-auto">
+            <div
+              class="order-first text-3xl font-semibold tracking-tight text-main mb-2"
            >
              {{ clientState.client_state?.chain_id }}
-            </dd>
+            </div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+              {{ conn.counterparty?.connection_id }} {{ clientState.client_id }}
+            </div>
          </div>
        </dl>
      </div>
    </div>

    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title">IBC Client State</h2>
-      <div class="text-sm">
-        <br />update after expiry:
-        {{ clientState.client_state?.allow_update_after_expiry }}
-        <br />allow_update_after_misbehaviour:
-        {{ clientState.client_state?.allow_update_after_misbehaviour }}
-        <br />trust_level:
-        {{ clientState.client_state?.trust_level?.numerator }}/{{
-          clientState.client_state?.trust_level?.denominator
-        }}
-        <br />trusting_period: {{ clientState.client_state?.trusting_period }}
-        <br />unbonding_period:
-        {{ clientState.client_state?.unbonding_period }} <br />frozen_height:
-        {{ clientState.client_state?.frozen_height }} <br />latest_height:
-        {{ clientState.client_state?.latest_height }} <br />type:
-        {{ clientState.client_state?.['@type'] }} <br />upgrade_path:
-        {{ clientState.client_state?.upgrade_path }} <br />
-        {{ clientState.client_state?.max_clock_drift }}
+      <h2 class="card-title mb-4">IBC Client State</h2>
+      <div class="overflow-x-auto">
+        <table class="table text-sm w-full">
+          <tbody>
+            <tr>
+              <td class="w-52">update after expiry:</td>
+              <td>{{ clientState.client_state?.allow_update_after_expiry }}</td>
+            </tr>
+            <tr>
+              <td class="w-52">allow_update_after_misbehaviour:</td>
+              <td>{{ clientState.client_state?.allow_update_after_misbehaviour }}</td>
+            </tr>
+            <tr>
+              <td class="w-52">trust_level:</td>
+              <td> {{ clientState.client_state?.trust_level?.numerator }}/{{
+                  clientState.client_state?.trust_level?.denominator}}</td>
+            </tr>
+            <tr>
+              <td class="w-52">trusting_period:</td>
+              <td>{{ clientState.client_state?.trusting_period }}</td>
+            </tr>
+            <tr>
+              <td class="w-52">unbonding_period:</td>
+              <td> {{ clientState.client_state?.unbonding_period }}</td>
+            </tr>
+            <tr>
+              <td class="w-52">frozen_height:</td>
+              <td>{{ clientState.client_state?.frozen_height }} </td>
+            </tr>
+            <tr>
+              <td class="w-52">latest_height:</td>
+              <td>{{ clientState.client_state?.latest_height }}</td>
+            </tr>
+            <tr>
+              <td class="w-52">type:</td>
+              <td>{{ clientState.client_state?.['@type'] }}</td>
+            </tr>
+            <tr>
+              <td class="w-52">upgrade_path:</td>
+              <td>{{ clientState.client_state?.upgrade_path }} </td>
+            </tr>
+            <tr>
+              <td class="w-52">max_clock_drift:</td>
+              <td>{{ clientState.client_state?.max_clock_drift }} </td>
+            </tr>
+          </tbody>
+        </table>
      </div>
    </div>

@ -106,7 +139,7 @@ function color(v: string) {
      <table class="table w-full mt-4">
        <thead>
          <tr>
-            <th style="position: relative; z-index: 2;">Channel Id</th>
+            <th style="position: relative; z-index: 2">Channel Id</th>
            <th>Port Id</th>
            <th>Counterparty</th>
            <th>Hops</th>
--- a/src/modules/[chain]/ibc/index.vue
+++ b/src/modules/[chain]/ibc/index.vue
@ -25,31 +25,31 @@ function color(v: string) {
    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
      <h2 class="card-title">IBC Connections</h2>
      <div class="overflow-x-auto mt-4">
-        <table class="table w-full">
+        <table class="table w-full table-zebra">
          <thead>
            <tr>
-              <th style="position: relative; z-index: 2;">Connection Id</th>
-              <th>Connection</th>
-              <th>Delay Period</th>
-              <th>State</th>
+              <th class="py-3">Connection Id</th>
+              <th class="py-3">Connection</th>
+              <th class="py-3">Delay Period</th>
+              <th class="py-3">State</th>
            </tr>
          </thead>
          <tbody>
-            <tr v-for="v in list">
-              <td>
-                <RouterLink :to="`/${chain}/ibc/${v.id}`">{{
-                  v.id
-                }}</RouterLink>
+            <tr v-for="(v, index) in list" :key="index">
+              <td class="py-2">
+                <RouterLink :to="`/${chain}/ibc/${v.id}`" class="text-primary">
+                  {{ v.id }}
+                </RouterLink>
              </td>
-              <td>
+              <td class="py-2">
                {{ v.client_id }} {{ v.id }} <br />
                {{ v.counterparty.client_id }}
                {{ v.counterparty.connection_id }}
              </td>
-              <td>{{ v.delay_period }}</td>
-              <td>
+              <td class="py-2">{{ v.delay_period }}</td>
+              <td class="py-2">
                <div
-                  class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
+                  class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
                  :class="`text-${color(v.state)}`"
                >
                  <span
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@ -8,6 +8,7 @@ import {
  useFormatter,
  useTxDialog,
  useWalletStore,
+  useStakingStore,
 } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
@ -21,6 +22,7 @@ const store = useIndexModule();
 const walletStore = useWalletStore();
 const format = useFormatter();
 const dialog = useTxDialog();
+const stakingStore = useStakingStore();

 const coinInfo = computed(() => {
  return store.coinInfo;
@ -230,7 +232,7 @@ const color = computed(() => {
    </div>

    <div class="bg-base-100 rounded mt-4 shadow">
-      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
        Active Proposals
      </div>
      <div class="px-4 pb-4">
@ -242,7 +244,7 @@ const color = computed(() => {
    </div>

    <div class="bg-base-100 rounded mt-4 shadow">
-      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
        {{ walletStore.currentAddress || 'Not Connected' }}
        <span
          v-if="walletStore.currentAddress"
@ -293,13 +295,60 @@ const color = computed(() => {
        </div>
      </div>

-      <div>
-        <div v-for="v in walletStore.delegations">
-          {{ v }}
-        </div>
+      <div class="px-4 pb-4">
+        <table class="table table-compact w-full table-zebra">
+          <thead>
+            <tr>
+              <th>Validator</th>
+              <th>Delegations</th>
+              <th>Rewards</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in walletStore.delegations" :key="index">
+              <td>
+                {{
+                  format.validatorFromBech32(
+                    item?.delegation?.validator_address
+                  )
+                }}
+              </td>
+              <td>{{ format.formatToken(item?.balance) }}</td>
+              <td>
+                {{
+                  format.formatToken({
+                    denom: item?.balance?.denom,
+                    amount: item?.delegation?.shares,
+                  })
+                }}
+              </td>
+              <td>
+                <div>
+                  <button
+                    class="btn btn-xs btn-primary btn-ghost text-primary rounded-sm mr-2"
+                  >
+                    Delegate
+                  </button>
+                  <button
+                    class="btn btn-xs btn-primary btn-ghost text-primary rounded-sm"
+                  >
+                    Withdraw Rewards
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
      </div>

-      <div></div>
+      <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
+        <button class="btn btn-success text-white">Send</button>
+        <RouterLink to="/wallet/receive" class="btn btn-info text-white"
+          >Receive</RouterLink
+        >
+        <button class="btn btn-primary text-white">Convert</button>
+      </div>
    </div>
  </div>
 </template>
--- a/src/modules/[chain]/statesync/index.vue
+++ b/src/modules/[chain]/statesync/index.vue
@ -73,11 +73,11 @@ onMounted(() => {
        <br /><br />
        <VTextarea auto-grow :model-value="state"></VTextarea>
        <br />
-        3. Start the daemon: <code>{{ appName }} start</code>
+        3. Start the daemon: <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} start</code>
        <br />
        If you are resetting node, run
-        <code>{{ appName }} unsafe-reset-all</code> or
-        <code>{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code>
+        <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} unsafe-reset-all</code> or
+        <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code>
        before you start the daemon.
      </div>
    </div>
--- a/src/modules/wallet/receive.vue
+++ b/src/modules/wallet/receive.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useWalletStore } from '@/stores';
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+
+const walletStore = useWalletStore();
+const qrcode = useQRCode(walletStore.currentAddress);
+</script>
+
+<template>
+  <div class="bg-base-100 p-4 rounded text-center">
+    <div class="text-xl font-semibold text-center">Pay Me</div>
+    <div v-if="walletStore.currentAddress" class="flex items-center justify-center mt-8 mb-4">
+      <img :src="qrcode" alt="QR Code" class="rounded-sm overflow-hidden" />
+    </div>
+    <div class="text-main">
+      {{ walletStore.currentAddress }}
+    </div>
+    <div class="mt-4 mb-4">
+      <button class="btn btn-success text-white px-10">Go To Pay</button>
+    </div>
+  </div>
+</template>
--- a/src/stores/useWalletStore.ts
+++ b/src/stores/useWalletStore.ts
@ -6,6 +6,7 @@ import type {
  Coin,
  UnbondingResponses,
  DelegatorRewards,
+  WalletConnected,
 } from '@/types';
 import { useStakingStore } from './useStakingStore';

@ -16,6 +17,7 @@ export const useWalletStore = defineStore('walletStore', {
      delegations: [] as Delegation[],
      unbonding: [] as UnbondingResponses[],
      rewards: {} as DelegatorRewards,
+      walletIsConnected: {} as WalletConnected | null
    };
  },
  getters: {
@ -25,9 +27,11 @@ export const useWalletStore = defineStore('walletStore', {
    connectedWallet() {
      const chainStore = useBlockchain();
      const key = chainStore.defaultHDPath;
-
-      const connected = JSON.parse(localStorage.getItem(key) || '{}');
-      return connected;
+      let connected = this.walletIsConnected
+      if (!this.walletIsConnected?.cosmosAddress){
+        connected = JSON.parse(localStorage.getItem(key) || '{}');
+      }
+      return connected
    },
    balanceOfStakingToken(): Coin {
      const stakingStore = useStakingStore();
@ -80,6 +84,7 @@ export const useWalletStore = defineStore('walletStore', {
    }
  },
  actions: {
+
    async loadMyAsset() {
      if (!this.currentAddress) return;
      this.blockchain.rpc.getBankBalances(this.currentAddress).then((x) => {
@ -115,9 +120,18 @@ export const useWalletStore = defineStore('walletStore', {
    disconnect() {
      const chainStore = useBlockchain();
      const key = chainStore.defaultHDPath;
-
+      console.log(key, 'key')
+      console.log(localStorage.getItem(key))
      localStorage.removeItem(key);
+      this.walletIsConnected = null
      this.$reset()
+    },
+    setConnectedWallet(value: any) {
+      const chainStore = useBlockchain();
+      const key = chainStore.defaultHDPath;
+      this.walletIsConnected = value || {}
+      // JSON.parse(localStorage.getItem(key) || '{}');
+      return this.walletIsConnected
    }
  },
-});
+});
--- a/src/types/distribution.ts
+++ b/src/types/distribution.ts
@ -1,22 +1,28 @@
-import type { Coin, PaginatedResponse } from "./common"
+import type { Coin, PaginatedResponse } from './common';

 export interface DistributionParams {
-    params: {
-        "community_tax": string,
-        "base_proposer_reward": string,
-        "bonus_proposer_reward": string,
-        "withdraw_addr_enabled": boolean
-    }
+  params: {
+    community_tax: string;
+    base_proposer_reward: string;
+    bonus_proposer_reward: string;
+    withdraw_addr_enabled: boolean;
+  };
 }

 export interface DelegatorRewards {
-    rewards: {
-        validator_address: string,
-        reward: Coin[],
-    }[],
-    total: Coin[],
+  rewards: {
+    validator_address: string;
+    reward: Coin[];
+  }[];
+  total: Coin[];
 }

 export interface PaginatedSlashes extends PaginatedResponse {
-    slashes: any[]
-}
+  slashes: any[];
+}
+
+export interface WalletConnected {
+  wallet: string;
+  cosmosAddress: string;
+  hdPath: string;
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -2701,6 +2701,11 @@
  resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz"
  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==

+"@types/web-bluetooth@^0.0.17":
+  version "0.0.17"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz#5c9f3c617f64a9735d7b72a7cc671e166d900c40"
+  integrity sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==
+
 "@types/yargs-parser@*":
  version "21.0.0"
  resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz"
@ -3038,6 +3043,16 @@
    find-cache-dir "^3.3.2"
    upath "^2.0.1"

+"@vueuse/core@10.1.2":
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.1.2.tgz#2499eadec36c5d7109338e3a2b73725040ae8011"
+  integrity sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.17"
+    "@vueuse/metadata" "10.1.2"
+    "@vueuse/shared" "10.1.2"
+    vue-demi ">=0.14.0"
+
 "@vueuse/core@^9.12.0":
  version "9.12.0"
  resolved "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz"
@ -3048,6 +3063,15 @@
    "@vueuse/shared" "9.12.0"
    vue-demi "*"

+"@vueuse/integrations@^10.1.2":
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.1.2.tgz#e318ed2cec87711b2a110dceca2150d7fe1452d0"
+  integrity sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==
+  dependencies:
+    "@vueuse/core" "10.1.2"
+    "@vueuse/shared" "10.1.2"
+    vue-demi ">=0.14.0"
+
 "@vueuse/math@^9.12.0":
  version "9.12.0"
  resolved "https://registry.npmjs.org/@vueuse/math/-/math-9.12.0.tgz"
@ -3056,11 +3080,23 @@
    "@vueuse/shared" "9.12.0"
    vue-demi "*"

+"@vueuse/metadata@10.1.2":
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.1.2.tgz#d8ffe557b1042efd03a0aa88540a00c25d193ee3"
+  integrity sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==
+
 "@vueuse/metadata@9.12.0":
  version "9.12.0"
  resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz"
  integrity sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==

+"@vueuse/shared@10.1.2":
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.1.2.tgz#31d8733a217a6396eb67706319133bf62cdd8baa"
+  integrity sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==
+  dependencies:
+    vue-demi ">=0.14.0"
+
 "@vueuse/shared@9.12.0":
  version "9.12.0"
  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz"
@ -3519,7 +3555,7 @@ camelcase-css@^2.0.1:
  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==

-camelcase@^5.3.1:
+camelcase@^5.0.0, camelcase@^5.3.1:
  version "5.3.1"
  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@ -3650,6 +3686,15 @@ cli-width@^2.0.0:
  resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz"
  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==

+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 cliui@^8.0.1:
  version "8.0.1"
  resolved "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz"
@ -3982,6 +4027,11 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, d
  dependencies:
    ms "2.1.2"

+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
 dedent@^0.7.0:
  version "0.7.0"
  resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
@ -4058,6 +4108,11 @@ diff-sequences@^29.4.3:
  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz"
  integrity sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==

+dijkstrajs@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz#4c8dbdea1f0f6478bff94d9c49c784d623e4fc23"
+  integrity sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==
+
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@ -4145,6 +4200,11 @@ emoji-regex@^8.0.0:
  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==

+encode-utf8@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
+  integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
+
 enhanced-resolve@^4.1.1:
  version "4.5.0"
  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz"
@ -4789,7 +4849,7 @@ gensync@^1.0.0-beta.2:
  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==

-get-caller-file@^2.0.5:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
  version "2.0.5"
  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@ -6736,10 +6796,10 @@ pify@^3.0.0:
  resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
  integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==

-ping-widget@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.7.tgz#441fdc03d1447a24bffb8233a2f55e734948820b"
-  integrity sha512-LbMBnXZUxh0goJXSyGHkM1kzdShmlHq5836QNGbIZFS6oSoCbKyYtbhVhR0l7BuqHpiYYpXbnUM+SN60yqOHVQ==
+ping-widget@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.9.tgz#56de5ee68320a37aadda614008d8c42c4cac39a0"
+  integrity sha512-HXfH58FBCbuDMD56X1Wsxi4jKRWxWK7TsKYfGcDJPGOFQOreT2WDc6wEZr1pfG5Mjr4SOVJz84xR4S5SptXJqA==
  dependencies:
    "@cosmjs/amino" "^0.30.1"
    "@cosmjs/ledger-amino" "^0.30.1"
@ -6787,6 +6847,11 @@ pkg-types@^1.0.1:
    mlly "^1.0.0"
    pathe "^1.0.0"

+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 postcss-calc@^8.2.3:
  version "8.2.4"
  resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz"
@ -7183,6 +7248,16 @@ pure-rand@^6.0.0:
  resolved "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.1.tgz"
  integrity sha512-t+x1zEHDjBwkDGY5v5ApnZ/utcd4XYDiJsaQQoptTXgUXX95sDg1elCdJghzicm7n2mbCBJ3uYWr6M22SO19rg==

+qrcode@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170"
+  integrity sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==
+  dependencies:
+    dijkstrajs "^1.0.1"
+    encode-utf8 "^1.0.3"
+    pngjs "^5.0.0"
+    yargs "^15.3.1"
+
 queue-microtask@^1.2.2:
  version "1.2.3"
  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@ -7326,6 +7401,11 @@ require-directory@^2.1.1:
  resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==

+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 resolve-cwd@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@ -7499,6 +7579,11 @@ semver@^7.3.5, semver@^7.3.6, semver@^7.3.7, semver@^7.3.8:
  dependencies:
    lru-cache "^6.0.0"

+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
+
 sha3@^2.1.1, sha3@^2.1.4:
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/sha3/-/sha3-2.1.4.tgz#000fac0fe7c2feac1f48a25e7a31b52a6492cc8f"
@ -8353,6 +8438,11 @@ vue-demi@*:
  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==

+vue-demi@>=0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.1.tgz#1ed9af03a27642762bfed83d8750805302d0398d"
+  integrity sha512-rt+yuCtXvscYot9SQQj3WKZJVSriPNqVkpVBNEHPzSgBv7QIYzsS410VqVgvx8f9AAPgjg+XPKvmV3vOqqkJQQ==
+
 vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1:
  version "9.1.0"
  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz"
@ -8526,6 +8616,11 @@ which-collection@^1.0.1:
    is-weakmap "^2.0.1"
    is-weakset "^2.0.1"

+which-module@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
+  integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+
 which-typed-array@^1.1.9:
  version "1.1.9"
  resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz"
@ -8557,6 +8652,15 @@ word-wrap@^1.2.3:
  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==

+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
@ -8597,6 +8701,11 @@ xstream@^11.14.0:
    globalthis "^1.0.1"
    symbol-observable "^2.0.3"

+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
 y18n@^5.0.5:
  version "5.0.8"
  resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
@ -8636,11 +8745,36 @@ yaml@^2.1.3:
  resolved "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz"
  integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==

+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^21.1.1:
  version "21.1.1"
  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==

+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
 yargs@^17.3.1:
  version "17.7.1"
  resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz"