From dade4c49b869908fc0751ba9ce9e82a13822e50e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 17:47:34 +0800
Subject: [PATCH 01/13] feat: sidebar icon

---
 src/layouts/components/DefaultLayout.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index fc465e83..27e4ee18 100644
--- 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"

From f50e1c12bfb4cee20c9250c456314e0f84e17d80 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 18:09:17 +0800
Subject: [PATCH 02/13] feat: ibc

---
 src/modules/[chain]/ibc/[connection_id].vue | 58 +++++++++++----------
 src/modules/[chain]/ibc/index.vue           | 28 +++++-----
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index 4e7806a9..de57f5a2 100644
--- 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,36 +44,39 @@ 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>
@@ -106,7 +110,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>
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
index 5d1e5a03..bef075ff 100644
--- 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

From f5ac321b8ba3d6fffb88d21a7f58972f416aeb66 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 18:28:55 +0800
Subject: [PATCH 03/13] feat: wallet dropdown

---
 src/layouts/components/NavBarWallet.vue | 52 ++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index b9042576..f8f4f882 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -1,10 +1,29 @@
 <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)
+    /* Resolved - 文本被成功复制到剪贴板 */
+  } 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!'}
+})
 </script>
 
 <template>
@@ -12,7 +31,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 +45,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 +68,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"

From ff335d4f0bd513bfdbc46218f81803ddc6e20d4e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 18:50:11 +0800
Subject: [PATCH 04/13] feat: ibc style

---
 src/modules/[chain]/ibc/[connection_id].vue | 65 +++++++++++++++------
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index de57f5a2..f592eb63 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@@ -83,24 +83,53 @@ function color(v: string) {
     </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>
 

From c476da8eef073ad705c5d2e57a9db6c45bef7085 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 19:10:29 +0800
Subject: [PATCH 05/13] feat: ibc code style

---
 src/modules/[chain]/statesync/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/[chain]/statesync/index.vue b/src/modules/[chain]/statesync/index.vue
index 72e80a7d..178b9a52 100644
--- 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>

From a22da6878d0c05ff4cb65b75d14aae522cdbbbe4 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 20:52:24 +0800
Subject: [PATCH 06/13] feat: proposal process

---
 src/components/ProposalProcess.vue | 32 ------------------------------
 1 file changed, 32 deletions(-)

diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index babcadfa..87e71cd9 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -30,38 +30,6 @@ 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>

From a478949bddd0bbb1bbdcf30571f7acb3f64b596b Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 22:53:38 +0800
Subject: [PATCH 07/13] feat: proposal item

---
 src/components/ProposalListItem.vue    | 134 ++++++++++++++-----------
 src/components/ProposalProcess.vue     |  35 +++++--
 src/layouts/components/Breadcrumbs.vue |  31 ------
 3 files changed, 104 insertions(+), 96 deletions(-)
 delete mode 100644 src/layouts/components/Breadcrumbs.vue

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 9681016d..a4a45946 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -26,64 +26,82 @@ 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 w-full">
+      <tbody>
+        <tr v-for="(item, index) in proposals?.proposals" :key="index">
+          <td class="px-4 w-10">
+            <RouterLink
+              class="text-main text-base hover:text-indigo-400"
+              :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            >
+              #{{ item?.proposal_id }}
+            </RouterLink>
+          </td>
+          <td class="w-[40%]">
+            <div>
+              <RouterLink
+                :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+                class="text-main text-base mb-1 block hover:text-indigo-400"
+              >
+                {{ 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"
+              >
+                {{ showType(item.content['@type']) }}
+              </div>
+            </div>
+          </td>
+          <td class="w-[30%]">
+            <ProposalProcess
+              :pool="staking.pool"
+              :tally="item.final_tally_result"
+            ></ProposalProcess>
+          </td>
+          <td>
+            <div>
+              <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>
-
-        <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"
-          >
-            {{ showType(item.content['@type']) }}
-          </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="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 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>
-      </div>
-      <ProposalProcess
-        :pool="staking.pool"
-        :tally="item.final_tally_result"
-      ></ProposalProcess>
-    </RouterLink>
+          <td>
+            <div>
+              <button class="btn btn-xs btn-primary rounded-sm mr-3">
+                Detail
+              </button>
+              <button class="btn btn-xs btn-primary rounded-sm">Vote</button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index 87e71cd9..201038bd 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -30,14 +30,35 @@ const veto = computed(() =>
 </script>
 
 <template>
-  <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-7 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-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
+      :style="`width: ${yes}`"
+      :title="yes"
+    >
+      {{ yes }}
+    </div>
+    <div
+      class="h-7 bg-no flex items-center overflow-hidden"
+      :style="`width: ${no}`"
+      :title="no"
+    >
+      {{ no }}
+    </div>
+    <div
+      class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
+      :style="`width: ${veto};`"
+      :title="veto"
+    >
+      {{ veto }}
+    </div>
+    <div
+      class="h-7 bg-secondary flex items-center overflow-hidden"
+      :style="`width: ${abstain}`"
+      :title="abstain"
+    >
+      {{ abstain }}
+    </div>
   </div>
 </template>
 <style scoped>
diff --git a/src/layouts/components/Breadcrumbs.vue b/src/layouts/components/Breadcrumbs.vue
deleted file mode 100644
index 0142cffc..00000000
--- a/src/layouts/components/Breadcrumbs.vue
+++ /dev/null
@@ -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>

From 8be8ee57468e789c6e69a429700e3e7bc1fa64a3 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 23:42:45 +0800
Subject: [PATCH 08/13] feat: proposal item

---
 src/components/ProposalListItem.vue | 84 ++++++++++++++++++++++++++---
 src/components/ProposalProcess.vue  |  6 +--
 2 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index a4a45946..41ddb8c2 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -26,10 +26,10 @@ const statusMap: Record<string, string> = {
 </script>
 <template>
   <div class="bg-white dark:bg-[#28334e] rounded text-sm">
-    <table class="table w-full">
+    <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-10">
+          <td class="px-4 w-20">
             <RouterLink
               class="text-main text-base hover:text-indigo-400"
               :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
@@ -37,29 +37,29 @@ const statusMap: Record<string, string> = {
               #{{ item?.proposal_id }}
             </RouterLink>
           </td>
-          <td class="w-[40%]">
+          <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"
+                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"
+                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-[30%]">
+          <td class="w-[25%]">
             <ProposalProcess
               :pool="staking.pool"
               :tally="item.final_tally_result"
             ></ProposalProcess>
           </td>
           <td>
-            <div>
+            <div class="pl-4">
               <div
                 class="flex items-center"
                 :class="
@@ -103,5 +103,75 @@ const statusMap: Record<string, string> = {
         </tr>
       </tbody>
     </table>
+
+    <div class="lg:hidden">
+      <div
+        v-for="(item, index) in proposals?.proposals"
+        :key="index"
+        class="px-4 py-4"
+      >
+        <RouterLink
+          :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400 truncate"
+        >
+          <div>{{ item?.content?.title }}</div>
+
+          <div>#{{ item?.proposal_id }}</div>
+        </RouterLink>
+
+        <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="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 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>
+          <ProposalProcess
+            :pool="staking.pool"
+            :tally="item.final_tally_result"
+          ></ProposalProcess>
+        </div>
+
+        <div class="mt-4">
+          <button class="btn btn-xs btn-primary rounded-sm mr-3 px-4">
+            Detail
+          </button>
+          <button class="btn btn-xs btn-primary rounded-sm px-4">Vote</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index 201038bd..0feef030 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -39,21 +39,21 @@ const veto = computed(() =>
       {{ yes }}
     </div>
     <div
-      class="h-7 bg-no flex items-center overflow-hidden"
+      class="h-7 bg-no flex items-center text-white overflow-hidden"
       :style="`width: ${no}`"
       :title="no"
     >
       {{ no }}
     </div>
     <div
-      class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
+      class="h-7 bg-[#B71C1C] flex items-center text-white overflow-hidden"
       :style="`width: ${veto};`"
       :title="veto"
     >
       {{ veto }}
     </div>
     <div
-      class="h-7 bg-secondary flex items-center overflow-hidden"
+      class="h-7 bg-secondary flex items-center text-white overflow-hidden"
       :style="`width: ${abstain}`"
       :title="abstain"
     >

From 4c5ba814943d0a4640eb229303456c133c635dd1 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 23:44:24 +0800
Subject: [PATCH 09/13] feat: proposal item

---
 src/components/ProposalListItem.vue |  4 ++--
 src/components/ProposalProcess.vue  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 41ddb8c2..e96ff0e8 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -112,9 +112,9 @@ const statusMap: Record<string, string> = {
       >
         <RouterLink
           :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400 truncate"
+          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
         >
-          <div>{{ item?.content?.title }}</div>
+          <div class="flex-1 w-0 truncate mr-4">{{ item?.content?.title }}</div>
 
           <div>#{{ item?.proposal_id }}</div>
         </RouterLink>
diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index 0feef030..b970feca 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -30,30 +30,30 @@ const veto = computed(() =>
 </script>
 
 <template>
-  <div class="progress rounded-[3px] h-7 text-xs flex items-center">
+  <div class="progress rounded-[3px] h-6 text-xs flex items-center">
     <div
-      class="h-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
+      class="h-6 bg-yes flex items-center pl-2 text-white overflow-hidden"
       :style="`width: ${yes}`"
       :title="yes"
     >
       {{ yes }}
     </div>
     <div
-      class="h-7 bg-no flex items-center text-white overflow-hidden"
+      class="h-6 bg-no flex items-center text-white overflow-hidden"
       :style="`width: ${no}`"
       :title="no"
     >
       {{ no }}
     </div>
     <div
-      class="h-7 bg-[#B71C1C] flex items-center text-white overflow-hidden"
+      class="h-6 bg-[#B71C1C] flex items-center text-white overflow-hidden"
       :style="`width: ${veto};`"
       :title="veto"
     >
       {{ veto }}
     </div>
     <div
-      class="h-7 bg-secondary flex items-center text-white overflow-hidden"
+      class="h-6 bg-secondary flex items-center text-white overflow-hidden"
       :style="`width: ${abstain}`"
       :title="abstain"
     >

From d148bbe3b1a5b011dbf488235faf3e5cf0470502 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 16 May 2023 00:19:50 +0800
Subject: [PATCH 10/13] feat: Dashboard Delegations List

---
 package.json                            |  2 +-
 src/layouts/components/NavBarWallet.vue | 35 +++++++-------
 src/modules/[chain]/index.vue           | 61 ++++++++++++++++++++++---
 yarn.lock                               |  8 ++--
 4 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 98bcf29e..c1abf18a 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "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.8",
     "pinia": "^2.0.28",
     "postcss": "^8.4.23",
     "prismjs": "^1.29.0",
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index f8f4f882..ead33231 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -1,29 +1,30 @@
 <script setup lang="ts">
 import { useWalletStore } from '@/stores';
-import {ref, computed} from 'vue'
+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){
+let showCopyToast = ref(0);
+async function copyAdress(address: string) {
   try {
     await navigator.clipboard.writeText(address);
-    showCopyToast.value = 1
-    setTimeout(()=>{
-      showCopyToast.value = 0
-    },1000)
-    /* Resolved - 文本被成功复制到剪贴板 */
+    showCopyToast.value = 1;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
   } catch (err) {
-    showCopyToast.value = 2
-    setTimeout(()=>{
-      showCopyToast.value = 0
-    },1000)
+    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 tipMsg = computed(() => {
+  return showCopyToast.value === 2
+    ? { class: 'error', msg: 'Copy Error!' }
+    : { class: 'success', msg: 'Copy Success!' };
+});
 </script>
 
 <template>
@@ -68,14 +69,14 @@ const tipMsg = computed(()=> {
         >
       </div>
     </div>
-    <div class="toast" v-show="showCopyToast===1">
+    <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="toast" v-show="showCopyToast === 2">
       <div class="alert alert-error">
         <div class="text-sm">
           <span>{{ tipMsg.msg }}</span>
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index f4b2efbe..817b8630 100644
--- 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,58 @@ 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>
+        <button class="btn btn-info text-white">Receive</button>
+        <button class="btn btn-primary text-white">Convert</button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 5df86641..02bbe551 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6736,10 +6736,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.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.8.tgz#378ef1f3ac59645921a98920ebe83cc74c42e6db"
+  integrity sha512-NAFB6n+jJhjk4Xp8LCtRFzPOZdkKhecAKFg0Rimi0yilXL6EBRWJB+09zH89sjHcnUyhW6B2vSg42DpT8n3Rpw==
   dependencies:
     "@cosmjs/amino" "^0.30.1"
     "@cosmjs/ledger-amino" "^0.30.1"

From e8f2e0392549ae60865ebe4b18394692dacfd90a Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 16 May 2023 00:29:53 +0800
Subject: [PATCH 11/13] feat: wallet connect state

---
 package.json                            |  2 +-
 src/layouts/components/NavBarWallet.vue |  6 +++++
 src/layouts/components/NavFooter.vue    | 10 +++++++-
 src/stores/useWalletStore.ts            | 24 +++++++++++++----
 src/types/distribution.ts               | 34 +++++++++++++++----------
 yarn.lock                               |  8 +++---
 6 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index c1abf18a..2a51fa60 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "md-editor-v3": "^2.8.1",
     "numeral": "^2.0.6",
     "osmojs": "^14.0.0-rc.0",
-    "ping-widget": "^0.0.8",
+    "ping-widget": "^0.0.9",
     "pinia": "^2.0.28",
     "postcss": "^8.4.23",
     "prismjs": "^1.29.0",
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index ead33231..558ab460 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -25,6 +25,12 @@ const tipMsg = computed(() => {
     ? { class: 'error', msg: 'Copy Error!' }
     : { class: 'success', msg: 'Copy Success!' };
 });
+
+const addressChange = computed(() => {
+  return walletStore?.currentAddress || walletStore?.walletIsConnected
+    ? true
+    : false;
+});
 </script>
 
 <template>
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index 6e0dc420..c88fecc6 100644
--- 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>
 
diff --git a/src/stores/useWalletStore.ts b/src/stores/useWalletStore.ts
index bf37268a..9643e564 100644
--- 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
     }
   },
-});
+});
\ No newline at end of file
diff --git a/src/types/distribution.ts b/src/types/distribution.ts
index 6e53fa83..cab13794 100644
--- 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[]
-}
\ No newline at end of file
+  slashes: any[];
+}
+
+export interface WalletConnected {
+  wallet: string;
+  cosmosAddress: string;
+  hdPath: string;
+}
diff --git a/yarn.lock b/yarn.lock
index 02bbe551..639d5f58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6736,10 +6736,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.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.8.tgz#378ef1f3ac59645921a98920ebe83cc74c42e6db"
-  integrity sha512-NAFB6n+jJhjk4Xp8LCtRFzPOZdkKhecAKFg0Rimi0yilXL6EBRWJB+09zH89sjHcnUyhW6B2vSg42DpT8n3Rpw==
+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"

From 2dbdca5161cb4b8b574d6aea42cfe4c7562691be Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 16 May 2023 00:53:29 +0800
Subject: [PATCH 12/13] feat: page receive

---
 package.json                   |   2 +
 src/modules/[chain]/index.vue  |   4 +-
 src/modules/wallet/receive.vue |  22 ++++++
 yarn.lock                      | 138 ++++++++++++++++++++++++++++++++-
 4 files changed, 163 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/wallet/receive.vue

diff --git a/package.json b/package.json
index 2a51fa60..476a1414 100644
--- 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",
@@ -44,6 +45,7 @@
     "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",
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 817b8630..c727032c 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -344,7 +344,9 @@ const color = computed(() => {
 
       <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
         <button class="btn btn-success text-white">Send</button>
-        <button class="btn btn-info text-white">Receive</button>
+        <RouterLink to="/wallet/receive" class="btn btn-info text-white"
+          >Receive</RouterLink
+        >
         <button class="btn btn-primary text-white">Convert</button>
       </div>
     </div>
diff --git a/src/modules/wallet/receive.vue b/src/modules/wallet/receive.vue
new file mode 100644
index 00000000..d98415b7
--- /dev/null
+++ 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>
diff --git a/yarn.lock b/yarn.lock
index 639d5f58..2a4ffcae 100644
--- 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==
@@ -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"

From 1f27a4cc30c1dbf4d3369d443f49d2340b2ae5aa Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 16 May 2023 01:26:31 +0800
Subject: [PATCH 13/13] feat: process add simple Description

---
 src/components/ProposalListItem.vue | 84 +++++++++++++++++++++++------
 1 file changed, 67 insertions(+), 17 deletions(-)

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index e96ff0e8..6d823610 100644
--- 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';
@@ -30,12 +31,36 @@ const statusMap: Record<string, string> = {
       <tbody>
         <tr v-for="(item, index) in proposals?.proposals" :key="index">
           <td class="px-4 w-20">
-            <RouterLink
-              class="text-main text-base hover:text-indigo-400"
-              :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            <label
+              for="proposal-detail-modal"
+              class="text-main text-base hover:text-indigo-400 cursor-pointer"
             >
-              #{{ item?.proposal_id }}
-            </RouterLink>
+              #{{ 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>
@@ -94,9 +119,6 @@ const statusMap: Record<string, string> = {
 
           <td>
             <div>
-              <button class="btn btn-xs btn-primary rounded-sm mr-3">
-                Detail
-              </button>
               <button class="btn btn-xs btn-primary rounded-sm">Vote</button>
             </div>
           </td>
@@ -110,14 +132,45 @@ const statusMap: Record<string, string> = {
         :key="index"
         class="px-4 py-4"
       >
-        <RouterLink
-          :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+        <div
           class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
         >
-          <div class="flex-1 w-0 truncate mr-4">{{ item?.content?.title }}</div>
-
-          <div>#{{ item?.proposal_id }}</div>
-        </RouterLink>
+          <RouterLink
+            :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            class="flex-1 w-0 truncate mr-4"
+            >{{ item?.content?.title }}</RouterLink
+          >
+          <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="grid grid-cols-4 mt-2 mb-2">
           <div class="col-span-2">
@@ -166,9 +219,6 @@ const statusMap: Record<string, string> = {
         </div>
 
         <div class="mt-4">
-          <button class="btn btn-xs btn-primary rounded-sm mr-3 px-4">
-            Detail
-          </button>
           <button class="btn btn-xs btn-primary rounded-sm px-4">Vote</button>
         </div>
       </div>