From abfb0d8c443d76624a4c21571a245913e9395b26 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 16 May 2023 23:15:23 +0800
Subject: [PATCH] feat: Contract

---
 src/layouts/components/DefaultLayout.vue      | 10 +--
 .../[chain]/cosmwasm/[code_id]/contracts.vue  | 64 +++++++++++++------
 src/modules/[chain]/cosmwasm/index.vue        | 11 ++--
 src/modules/[chain]/ibc/[connection_id].vue   | 21 +++---
 src/modules/[chain]/ibc/index.vue             |  4 +-
 5 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 27e4ee18..5476038c 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -110,11 +110,15 @@ const changeOpen = (index: Number) => {
                     $route.path === el?.to?.path && item?.title !== 'Favorite',
                 }"
               >
-                <Icon icon="mdi:chevron-right" class="mr-2 ml-3"/>
+                <Icon
+                  v-if="!el?.icon?.image"
+                  icon="mdi:chevron-right"
+                  class="mr-2 ml-3"
+                />
                 <img
                   v-if="el?.icon?.image"
                   :src="el?.icon?.image"
-                  class="w-6 h-6 rounded-full mr-3"
+                  class="w-6 h-6 rounded-full mr-3 ml-4"
                 />
                 <div
                   class="text-base text-gray-500 dark:text-gray-300"
@@ -194,8 +198,6 @@ const changeOpen = (index: Number) => {
         <NavBarWallet
           class="block truncate md:inline-block text-xs md:text-sm"
         />
-
-        
       </div>
 
       <!-- 👉 Pages -->
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index b6df186b..6e30eced 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -160,20 +160,22 @@ const result = ref('');
             <div class="text-lg">Contract States</div>
             <label
               @click="infoDialog = false"
-              for="modal-contract-detail"
+              for="modal-contract-states"
               class="btn btn-sm btn-circle"
               >✕</label
             >
           </div>
-          <div>
-            <div v-for="(v, index) in state.models" :key="index" class="mb-2">
-              <div class="text-base mb-1">
-                {{ format.hexToString(v.key) }}
-              </div>
-              <div class="text-sm" :title="format.base64ToString(v.value)">
-                {{ format.base64ToString(v.value) }}
-              </div>
-            </div>
+          <div class="overflow-auto">
+            <table class="table table-compact w-full text-sm">
+              <tr v-for="(v, index) in state.models" :key="index">
+                <td class="">
+                  {{ format.hexToString(v.key) }}
+                </td>
+                <td class="" :title="format.base64ToString(v.value)">
+                  {{ format.base64ToString(v.value) }}
+                </td>
+              </tr>
+            </table>
           </div>
         </div>
       </label>
@@ -183,8 +185,8 @@ const result = ref('');
     <label for="modal-contract-states" class="modal cursor-pointer">
       <label class="modal-box relative p-2" for="">
         <div>
-          <div class="flex items-center justify-between px-3 pt-2">
-            <div class="text-lg">Query Contract</div>
+          <div class="flex items-center justify-between px-3 pt-2 mb-4">
+            <div class="text-lg font-semibold">Query Contract</div>
             <label
               @click="infoDialog = false"
               for="modal-contract-query"
@@ -192,20 +194,42 @@ const result = ref('');
               >✕</label
             >
           </div>
-          <div>
+          <div class="px-3">
             <div>
-              <CustomRadios
-                v-model:selected-radio="selectedRadio"
-                :radio-content="radioContent"
-                :grid-column="{ sm: '6', cols: '12' }"
-              />
+              <div class="grid grid-cols-2 gap-4 mb-4">
+                <div
+                  class="form-control border rounded px-4"
+                  v-for="(item, index) of radioContent"
+                  :key="index"
+                  :class="{ 'pt-2': index === 0 }"
+                >
+                  <label
+                    class="label cursor-pointer justify-start"
+                    @click="selectedRadio = item?.value"
+                  >
+                    <input
+                      type="radio"
+                      name="radio-10"
+                      class="radio radio-sm radio-primary mr-4"
+                      :checked="item?.value === selectedRadio"
+                      style="border: 1px solid #d2d6dc"
+                    />
+                    <div>
+                      <div class="text-base font-semibold">
+                        {{ item?.title }}
+                      </div>
+                      <div class="text-xs">{{ item?.desc }}</div>
+                    </div>
+                  </label>
+                </div>
+              </div>
 
               <VTextarea v-model="query" label="Query String" class="my-2" />
               <VTextarea v-model="result" label="Result" />
             </div>
-            <div>
+            <div class="mt-4 mb-4">
               <button
-                class="btn btn-success btn-sm px-4"
+                class="btn btn-success px-4 text-white"
                 @click="queryContract()"
               >
                 Query Contract
diff --git a/src/modules/[chain]/cosmwasm/index.vue b/src/modules/[chain]/cosmwasm/index.vue
index 3d43f10d..9f8bb287 100644
--- a/src/modules/[chain]/cosmwasm/index.vue
+++ b/src/modules/[chain]/cosmwasm/index.vue
@@ -17,10 +17,10 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
   <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
     <h2 class="card-title truncate w-full">Cosmos Wasm Smart Contracts</h2>
     <div class="overflow-x-auto">
-      <table class="table w-full mt-4 text-sm">
+      <table class="table table-compact w-full mt-4 text-sm">
         <thead>
           <tr>
-            <th style="position: relative; z-index: 2;">Code Id</th>
+            <th>Code Id</th>
             <th>Code Hash</th>
             <th>Creator</th>
             <th>Permissions</th>
@@ -32,10 +32,11 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
             <td>
               <RouterLink
                 :to="`/${props.chain}/cosmwasm/${v.code_id}/contracts`"
-                ><div class="text-truncate" style="max-width: 200px">
-                  {{ v.data_hash }}
-                </div></RouterLink
+                class="text-truncate max-w-[200px] block text-primary"
+                :title="v.data_hash"
               >
+                {{ v.data_hash }}
+              </RouterLink>
             </td>
             <td>{{ v.creator }}</td>
             <td>
diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index f592eb63..752c3f34 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@@ -85,7 +85,7 @@ function color(v: string) {
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
       <h2 class="card-title mb-4">IBC Client State</h2>
       <div class="overflow-x-auto">
-        <table class="table text-sm w-full">
+        <table class="table table-compact text-sm w-full">
           <tbody>
             <tr>
               <td class="w-52">update after expiry:</td>
@@ -93,12 +93,17 @@ function color(v: string) {
             </tr>
             <tr>
               <td class="w-52">allow_update_after_misbehaviour:</td>
-              <td>{{ clientState.client_state?.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>
+              <td>
+                {{ clientState.client_state?.trust_level?.numerator }}/{{
+                  clientState.client_state?.trust_level?.denominator
+                }}
+              </td>
             </tr>
             <tr>
               <td class="w-52">trusting_period:</td>
@@ -106,11 +111,11 @@ function color(v: string) {
             </tr>
             <tr>
               <td class="w-52">unbonding_period:</td>
-              <td> {{ clientState.client_state?.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>
+              <td>{{ clientState.client_state?.frozen_height }}</td>
             </tr>
             <tr>
               <td class="w-52">latest_height:</td>
@@ -122,11 +127,11 @@ function color(v: string) {
             </tr>
             <tr>
               <td class="w-52">upgrade_path:</td>
-              <td>{{ clientState.client_state?.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>
+              <td>{{ clientState.client_state?.max_clock_drift }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
index bef075ff..1456a2ea 100644
--- a/src/modules/[chain]/ibc/index.vue
+++ b/src/modules/[chain]/ibc/index.vue
@@ -25,7 +25,7 @@ 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-zebra">
+        <table class="table table-compact w-full table-zebra">
           <thead>
             <tr>
               <th class="py-3">Connection Id</th>
@@ -49,7 +49,7 @@ function color(v: string) {
               <td class="py-2">{{ v.delay_period }}</td>
               <td class="py-2">
                 <div
-                  class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
+                  class="text-xs truncate relative py-[2px] px-3 rounded-full w-fit"
                   :class="`text-${color(v.state)}`"
                 >
                   <span