Merge pull request #374 from alisaweb3/v3-single

UI refactor: DynamicComponent,ObjectHorizontalElement,Cosmwasm,Dashboard

src/components/charts/PriceMarketChart.vue

@@ -26,15 +26,32 @@ const series = computed(() => {
     },
   ];
 });
+
+function changeChart(type: string) {
+  kind.value = type;
+}
 </script>
 
 <template>
-  <VTabs v-model="kind" align-tabs="end"
-    ><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs
-  >
+  <div class="tabs tabs-boxed bg-transparent justify-end">
+    <a
+      class="tab text-xs mr-2 text-gray-400 uppercase"
+      :class="{ 'tab-active': kind === 'price' }"
+      @click="changeChart('price')"
+    >
+      Price
+    </a>
+    <a
+      class="tab text-xs text-gray-400 uppercase"
+      :class="{ 'tab-active': kind === 'volume' }"
+      @click="changeChart('volume')"
+    >
+      Volume
+    </a>
+  </div>
   <VueApexCharts
     type="area"
-    height="261"
+    height="230"
     :options="chartConfig"
     :series="series"
   />

src/components/dynamic/ArrayBytesElement.vue

@@ -7,8 +7,8 @@ const props = defineProps({
 </script>
 <template>
   <div>
-    <div v-for="v in props.value">
-      {{ toBase64(v) }}
+    <div v-for="(item,index) of props.value" :key="index">
+      {{ toBase64(item) }}
     </div>
   </div>
 </template>

src/components/dynamic/ArrayObjectElement.vue

@@ -18,32 +18,34 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <VTable
-    v-if="header.length > 0"
-    density="compact"
-    height="300px"
-    fixed-header
-    hover
-  >
-    <thead v-if="thead">
-      <tr>
-        <th
-          v-for="(item, index) in header"
-          :key="index"
-          class="text-left text-capitalize"
-        >
-          {{ item }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(item, index) in value" :key="index">
-        <td v-for="(el, key) in header" :key="key">
-          <DynamicComponent :value="item[el]" />
-        </td>
-      </tr>
-    </tbody>
-  </VTable>
+  <div class="overflow-x-auto">
+    <VTable
+      v-if="header.length > 0"
+      density="compact"
+      height="300px"
+      fixed-header
+      hover
+    >
+      <thead v-if="thead">
+        <tr>
+          <th
+            v-for="(item, index) in header"
+            :key="index"
+            class="text-left text-capitalize"
+          >
+            {{ item }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in value" :key="index">
+          <td v-for="(el, key) in header" :key="key">
+            <DynamicComponent :value="item[el]" />
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
 
-  <div v-else class="h-[300px]"></div>
+    <div v-else class="h-[300px]"></div>
+  </div>
 </template>

src/components/dynamic/ObjectHorizontalElement.vue

@@ -1,19 +1,27 @@
 <script lang="ts" setup>
 import DynamicComponent from './DynamicComponent.vue';
 import { select } from './index';
-
+import { ref} from 'vue'
 const props = defineProps(['value']);
-const tab = ref('');
+const tab = ref(Object.keys(props.value)[0] || '');
+
+const changeTab = (val: string) => {
+  tab.value = val;
+};
 </script>
 <template>
   <div>
-    <VTabs v-model="tab">
-      <VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
-    </VTabs>
-    <VWindow v-model="tab" style="min-height: 25px">
-      <VWindowItem v-for="(v, k) of value" :value="k"
-        ><DynamicComponent :value="v"
-      /></VWindowItem>
-    </VWindow>
+    <div class="tabs">
+      <a class="tab  tab-bordered text-gray-400 uppercase" 
+        v-for="(item, index) of value" :value="index"
+        :class="{ 'tab-active':tab === String(index) }"
+        @click="changeTab(String(index))"
+      >{{ index }}</a>
+    </div>
+    <div class="min-h-[25px] mt-4">
+        <div v-for="(v, k) of value" :value="k">
+          <DynamicComponent :value="v" v-show="tab === String(k)"/>
+        </div>
+    </div>
   </div>
 </template>

src/components/dynamic/TxsElement.vue

@@ -21,31 +21,33 @@ const format = useFormatter();
 const chain = useBlockchain();
 </script>
 <template>
-  <VTable density="compact" v-if="txs.length > 0">
-    <thead>
-      <tr>
-        <th>Hash</th>
-        <th>Msgs</th>
-        <th>Memo</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in txs">
-        <td>
-          <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
-            item.hash
-          }}</RouterLink>
-        </td>
-        <td>
-          {{
-            format.messages(
-              item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
-            )
-          }}
-        </td>
-        <td>{{ item.tx.body.memo }}</td>
-      </tr>
-    </tbody>
-  </VTable>
-  <div v-else>[]</div>
+  <div class="overflow-x-auto mt-4">
+    <table class="table w-full" density="compact" v-if="txs.length > 0">
+      <thead>
+        <tr>
+          <th style="position: relative">Hash</th>
+          <th>Msgs</th>
+          <th>Memo</th>
+        </tr>
+      </thead>
+      <tbody class="text-sm">
+        <tr v-for="item in txs">
+          <td>
+            <RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{
+              item.hash
+            }}</RouterLink>
+          </td>
+          <td>
+            {{
+              format.messages(
+                item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
+              )
+            }}
+          </td>
+          <td>{{ item.tx.body.memo }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else>[]</div>
+  </div>
 </template>

src/modules/[chain]/cosmwasm/[code_id]/contracts.vue

@@ -93,29 +93,39 @@ const result = ref('');
 </script>
 <template>
   <div>
-    <VCard>
-      <VCardTitle>Contract List of Code: {{ props.code_id }}</VCardTitle>
-      <VTable>
-        <thead>
-          <tr>
-            <th>Contract List</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="v in response.contracts">
-            <td>{{ v }}</td>
-            <td>
-              <VBtn size="small" @click="showInfo(v)">contract</VBtn>
-              <VBtn size="small" @click="showState(v)" class="ml-2"
-                >States</VBtn
-              >
-              <VBtn size="small" @click="showQuery(v)" class="ml-2">Query</VBtn>
-            </td>
-          </tr>
-        </tbody>
-      </VTable>
-    </VCard>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <h2 class="card-title truncate w-full">Contract List of Code: {{ props.code_id }}</h2>
+      <div class="overflow-x-auto">
+        <table class="table  w-full mt-4">
+          <thead>
+            <tr>
+              <th style="position: relative;">Contract List</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="v in response.contracts">
+              <td>{{ v }}</td>
+              <td>
+                <button
+                  class="btn btn-primary btn-sm text-xs mr-2"
+                  @click="showInfo(v)"
+                  >contract</button>
+                <button
+                  class="btn btn-primary btn-sm text-xs mr-2"
+                  @click="showState(v)"
+                >States</button>
+                <button
+                  class="btn btn-primary btn-sm text-xs"
+                  @click="showQuery(v)"
+                >Query</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+   
     <v-dialog v-model="infoDialog" width="auto">
       <v-card>
         <VCardTitle>Contract Detail</VCardTitle>

src/modules/[chain]/cosmwasm/index.vue

@@ -14,13 +14,13 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
 });
 </script>
 <template>
-  <div>
-    <VCard>
-      <VCardTitle>Cosmos Wasm Smart Contracts</VCardTitle>
-      <VTable>
+  <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">
         <thead>
           <tr>
-            <th>Code Id</th>
+            <th style="position: relative;">Code Id</th>
             <th>Code Hash</th>
             <th>Creator</th>
             <th>Permissions</th>
@@ -47,8 +47,8 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
             </td>
           </tr>
         </tbody>
-      </VTable>
-    </VCard>
+      </table>
+    </div>
   </div>
 </template>
 

src/modules/[chain]/gov/[proposal_id].vue

@@ -291,7 +291,7 @@ const processList = computed(()=>{
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
         <h2 class="card-title">Votes</h2>
         <div class="overflow-x-auto">
-            <table class="table  w-full ">
+            <table class="table  w-full">
                 <tbody>
                     <tr v-for="(item,index) of votes" :key="index">
                         <td>{{ item.voter }}</td>

src/modules/[chain]/index.vue

@@ -2,6 +2,7 @@
 import MdEditor from 'md-editor-v3';
 import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
+import { Icon } from '@iconify/vue';
 import { useBlockchain, useFormatter } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
@@ -38,150 +39,155 @@ function shortName(name: string, id: string) {
     ? id
     : name;
 }
+
+const comLinks = [
+  {
+    name: 'Website',
+    icon: 'mdi-web',
+    href: store.homepage,
+  },
+  {
+    name: 'Twitter',
+    icon: 'mdi-twitter',
+    href: store.twitter,
+  },
+  {
+    name: 'Telegram',
+    icon: 'mdi-telegram',
+    href: store.telegram,
+  },
+  {
+    name: 'Github',
+    icon: 'mdi-github',
+    href: store.github,
+  },
+];
 </script>
 
 <template>
   <div>
-    <VCard v-if="coinInfo && coinInfo.name" class="mb-5">
-      <VRow>
-        <VCol md="5">
-          <VCardItem>
-            <VCardTitle>
-              {{ coinInfo.name }} (
-              <span class="text-uppercase">{{ coinInfo.symbol }}</span>
-              )
-            </VCardTitle>
-            <VCardSubtitle>
-              Rank:
-              <VChip color="error" size="x-small"
-                >#{{ coinInfo.market_cap_rank }}</VChip
-              >
-            </VCardSubtitle>
-          </VCardItem>
-          <VDivider />
-          <VCardItem>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.homepage"
-              prependIcon="mdi-web"
-            >
-              Website
-            </VBtn>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.twitter"
-              prependIcon="mdi-twitter"
-            >
-              Twitter
-            </VBtn>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.telegram"
-              prependIcon="mdi-telegram"
-            >
-              Telegram
-            </VBtn>
-            <VBtn
-              variant="text"
-              size="small"
-              :href="store.github"
-              prependIcon="mdi-github"
-            >
-              Github
-            </VBtn>
-          </VCardItem>
-          <VCardItem>
-            <!-- SECTION upgrade plan banner -->
+    <div
+      v-if="coinInfo && coinInfo.name"
+      class="bg-base-100 rounded shadow mb-4"
+    >
+      <div class="flex p-4">
+        <div class="flex-1 mr-10">
+          <div class="text-xl font-semibold text-main">
+            {{ coinInfo.name }} (<span class="uppercase">{{
+              coinInfo.symbol
+            }}</span
+            >)
+          </div>
+          <div class="text-xs mt-2">
+            Rank:
             <div
-              class="plan-upgrade-banner d-flex bg-light-secondary rounded align-center pa-3"
+              class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
             >
-              <h3 class="plan-details me-3" :class="store.priceColor">
-                {{ store.priceChange }}
-                <small>%</small>
-              </h3>
+              #{{ coinInfo.market_cap_rank }}
+            </div>
+          </div>
 
-              <VMenu open-on-hover>
-                <template #activator="{ props }">
-                  <div class="d-flex flex-column align-start" v-bind="props">
-                    <h3 class="text-base font-weight-semibold">
+          <div class="mt-4 flex items-center">
+            <a
+              v-for="(item, index) of comLinks"
+              :key="index"
+              :href="item.href"
+              class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center"
+            >
+              <Icon :icon="item?.icon" />
+              <span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
+            </a>
+          </div>
+
+          <div>
+            <div class="dropdown dropdown-hover w-full mt-[16px] md:mt-[32px]">
+              <label>
+                <div
+                  class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
+                >
+                  <div>
+                    <div
+                      class="font-semibold text-xl text-[#666] dark:text-white"
+                    >
                       {{ ticker?.market?.name || '' }}
-                    </h3>
-                    <span class="text-primary text-xs">
+                    </div>
+                    <div class="text-info text-sm">
                       {{ shortName(ticker?.base, ticker.coin_id) }}/{{
                         shortName(ticker?.target, ticker.target_coin_id)
                       }}
-                    </span>
+                    </div>
                   </div>
-                </template>
-                <VList style="max-height: 300px">
-                  <VListItem
-                    v-for="(item, i) in store.coinInfo.tickers"
-                    :key="i"
-                    rounded
-                    @click="store.selectTicker(i)"
-                  >
-                    <template #prepend></template>
-                    <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-                    <VListItemTitle v-text="item.market.name" />
-                    <VListItemSubtitle>
-                      {{ shortName(item?.base, item.coin_id) }}/{{
-                        shortName(item?.target, item.target_coin_id)
-                      }}
-                    </VListItemSubtitle>
-                    <template #append>
-                      <span
-                        class="ml-3"
-                        :class="`text-${store.tickerColor(item.trust_score)}`"
+
+                  <div class="text-right">
+                    <div
+                      class="text-xl font-semibold text-[#666] dark:text-white"
+                    >
+                      ${{ ticker.converted_last.usd }}
+                    </div>
+                    <div class="text-sm" :class="store.priceColor">
+                      {{ store.priceChange }}%
+                    </div>
+                  </div>
+                </div>
+              </label>
+              <div class="dropdown-content pt-1">
+                <div class="h-64 overflow-auto w-full shadow rounded">
+                  <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
+                    <li
+                      v-for="(item, index) in store.coinInfo.tickers"
+                      :key="index"
+                      @click="store.selectTicker(index)"
+                    >
+                      <div
+                        class="flex items-center justify-between hover:bg-base-100"
                       >
-                        {{ item.converted_last.usd }}
-                      </span>
-                    </template>
-                  </VListItem>
-                </VList>
-              </VMenu>
+                        <div class="text-main text-sm">
+                          {{ shortName(item?.base, item.coin_id) }}/{{
+                            shortName(item?.target, item.target_coin_id)
+                          }}
+                        </div>
 
-              <VSpacer />
-
-              <div class="d-flex align-center">
-                <sub>
-                  <h6 class="text-xs font-weight-regular">$</h6>
-                </sub>
-                <span class="text-h5">{{ ticker.converted_last.usd }}</span>
+                        <div class="text-base text-main">
+                          ${{ item.converted_last.usd }}
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
-            <VSpacer />
-            <VBtn
-              block
+
+            <a
               :color="store.trustColor"
-              class="mt-3"
+              class="mt-5 text-white btn btn-success w-full flex items-center"
               :href="ticker.trade_url"
+              target="_blank"
             >
               Buy {{ coinInfo.symbol || '' }}
-            </VBtn>
-          </VCardItem>
-        </VCol>
-        <VCol md="7">
-          <VCardItem>
-            <PriceMarketChart />
-          </VCardItem>
-        </VCol>
-      </VRow>
-      <VDivider />
-      <VCardText style="max-height: 250px; overflow: auto">
+            </a>
+          </div>
+        </div>
+
+        <div class="flex-1 hidden md:block">
+          <PriceMarketChart />
+        </div>
+      </div>
+      <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
+      <div class="max-h-[250px] overflow-auto p-4 text-sm">
         <MdEditor
           :model-value="coinInfo.description?.en"
           previewOnly
         ></MdEditor>
-      </VCardText>
-      <VCardItem>
-        <VChip v-for="tag in coinInfo.categories" size="x-small" class="mr-2">{{
-          tag
-        }}</VChip>
-      </VCardItem>
-    </VCard>
+      </div>
+      <div class="mx-4 flex flex-wrap items-center">
+        <div
+          v-for="tag in coinInfo.categories"
+          class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
+        >
+          {{ tag }}
+        </div>
+      </div>
+    </div>
 
     <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
       <div v-for="item in store.stats">
@@ -189,30 +195,26 @@ function shortName(name: string, id: string) {
       </div>
     </div>
 
-    <VCard class="my-5">
-      <VCardItem class="pb-0">
-        <VCardTitle>Active Proposals</VCardTitle>
-      </VCardItem>
-      <VCardItem>
+    <div class="bg-base-100 rounded mt-4 shadow">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+        Active Proposals
+      </div>
+      <div class="px-4 pb-4">
         <ProposalListItem :proposals="store?.proposals" />
-      </VCardItem>
-      <VCardText v-if="store.proposals.length === 0"
-        >No active proposals</VCardText
-      >
-    </VCard>
+      </div>
+      <div class="pl-4 pb-8 py-4" v-if="store.proposals?.length === 0">
+        No active proposals
+      </div>
+    </div>
 
-    <VBtn block color="secondary" variant="outlined" class="mt-5"
-      >Connect Wallet</VBtn
+    <div
+      class="btn btn-primary w-full mt-5 flex items-center bg-transparent text-primary hover:bg-gray-100 hover:bg-transparent"
     >
+      Connect Wallet
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.card-box {
-  border: 1px solid rgb(var(--v-theme-primary));
-}
-</style>
-
 <route>
   {
     meta: {