improve tx dialog

chains/mainnet/neutron.json

@@ -0,0 +1,22 @@
+{
+    "chain_name": "neutron",
+    "api": ["https://neutron-api.lavenderfive.com/"],
+    "rpc": ["https://rpc-palvus.pion-1.ntrn.tech"],
+    "provider_chain": {
+        "api": ["https://api-cosmoshub-ia.cosmosia.notional.ventures"]
+    },
+    "features": ["dashboard", "blocks", "ibc", "cosmwasm", "uptime", "parameters", "state-sync"],
+    "sdk_version": "0.45.1",
+    "coin_type": "118",
+    "min_tx_fee": "8000",
+    "assets": [{
+        "base": "untrn",
+        "symbol": "NTRN",
+        "exponent": "6",
+        "coingecko_id": "neutron",
+        "logo": "/logos/nym.jpeg"
+    }],
+    "addr_prefix": "neutron",
+    "theme_color": "",
+    "logo": "/logos/nym.jpeg"
+}

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

@@ -27,7 +27,7 @@ const format = useFormatter();
     </div>
 
     <div v-show="tab === 'blocks'" class="bg-base-100 rounded overflow-x-auto">
-      <table class="table w-full">
+      <table class="table w-full table-compact">
         <thead>
           <tr>
             <th style="position: relative; z-index: 2;">Height</th>
@@ -60,7 +60,7 @@ const format = useFormatter();
       v-show="tab === 'transactions'"
       class="bg-base-100 rounded overflow-x-auto"
     >
-      <table class="table w-full">
+      <table class="table w-full table-compact">
         <thead>
           <tr>
             <th style="position: relative; z-index: 2;">Height</th>

src/modules/[chain]/index.vue

@@ -17,6 +17,8 @@ import { computed } from '@vue/reactivity';
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 
+const props = defineProps(['chain']);
+
 const blockchain = useBlockchain();
 const store = useIndexModule();
 const walletStore = useWalletStore();
@@ -229,7 +231,7 @@ const color = computed(() => {
       </div>
     </div>
 
-    <div class="bg-base-100 rounded mt-4 shadow">
+    <div v-if="blockchain.supportModule('governance')" class="bg-base-100 rounded mt-4 shadow">
       <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         Active Proposals
       </div>
@@ -246,8 +248,8 @@ const color = computed(() => {
         {{ walletStore.currentAddress || 'Not Connected' }}
         <RouterLink
           v-if="walletStore.currentAddress"
-          class="float-right font-light text-sm cursor-pointert link link-primary no-underline font-medium"
+          class="float-right text-sm cursor-pointert link link-primary no-underline font-medium"
-          to="/wallet/portfolio"
+          :to="`/${chain}/account/${walletStore.currentAddress}`"
           >More</RouterLink
         >
       </div>
@@ -294,7 +296,7 @@ const color = computed(() => {
         </div>
       </div>
 
-      <div class="px-4 pb-4">
+      <div v-if="walletStore.delegations.length > 0" class="px-4 pb-4">
         <table class="table table-compact w-full table-zebra">
           <thead>
             <tr>
@@ -316,27 +318,28 @@ const color = computed(() => {
               <td>{{ format.formatToken(item?.balance) }}</td>
               <td>
                 {{
-                  format.formatToken(
+                  format.formatTokens(
                     walletStore?.rewards?.rewards?.find(
                       (el) =>
                         el?.validator_address ===
                         item?.delegation?.validator_address
-                    )?.reward?.[0]
+                    )?.reward)
-                  )
                 }}
               </td>
               <td>
                 <div>
-                  <button
+                  <label for="delegate"
                     class="btn btn-xs btn-primary btn-ghost text-primary rounded-sm mr-2"
+                    @click="dialog.open('delegate', { validator_address: item.delegation.validator_address})"
                   >
                     Delegate
-                  </button>
+                  </label>
-                  <button
+                  <label for="withdraw"
                     class="btn btn-xs btn-primary btn-ghost text-primary rounded-sm"
+                    @click="dialog.open('withdraw', { validator_address: item.delegation.validator_address})"
                   >
                     Withdraw Rewards
-                  </button>
+                  </label>
                 </div>
               </td>
             </tr>
@@ -345,13 +348,9 @@ const color = computed(() => {
       </div>
 
       <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
-        <label for="send" class="btn btn-success text-white">Send</label>
+        <label for="PingTokenConvert" class="btn btn-primary text-white">Convert</label>
-        <RouterLink to="/wallet/receive" class="btn btn-info text-white"
+        <label for="send" class="btn btn-success text-white" @click="dialog.open('send', {})">Send</label>
-          >Receive</RouterLink
+        <RouterLink to="/wallet/receive" class="btn btn-info text-white">Receive</RouterLink>
-        >
-        <label for="PingTokenConvert" class="btn btn-primary text-white"
-          >Convert</label
-        >
       </div>
       <Teleport to="body">
         <ping-token-convert

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

@@ -99,13 +99,11 @@ const loadAvatars = () => {
   // fetch avatar from keybase
   let promise = Promise.resolve();
   staking.validators.forEach((item) => {
-    console.log(item.description)
     promise = promise.then(
       () =>
         new Promise((resolve) => {
           const identity = item.description?.identity;
           if (identity && !avatars.value[identity]) {
-            console.log("loading:", identity)
             staking.keybase(identity).then((d) => {
               if (Array.isArray(d.them) && d.them.length > 0) {
                 const uri = String(d.them[0]?.pictures?.primary?.url).replace(

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

@@ -11,7 +11,7 @@ const base = useBaseStore();
 const nodeInfo = ref({} as NodeInfo);
 
 const height = ref(Number(base.latest.block?.header?.height|| 2001))
-const hash = ref(toHex(fromBase64(base.latest.block_id.hash)))
+const hash = ref("")
 
 if(height.value > 2000) {
   height.value = Math.round((height.value - 2000) / 1000) * 1000

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

@@ -148,7 +148,7 @@ function changeTab(v: string) {
             </tr>
           </thead>
           <tr v-for="({v, signing}, i) in list">
-            <td>{{ i+1 }}. {{ v.description.moniker }}</td>
+            <td><div class="truncate max-w-sm">{{ i+1 }}. {{ v.description.moniker }}</div></td>
             <td>{{ signing?.start_height }}</td>
             <td>
               {{ signing?.index_offset }}

src/stores/template.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-export const useStoreName = defineStore('bankstore', {
+export const useStoreName = defineStore('template', {
   state: () => {
     return {};
   },

src/stores/useBlockchain.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { useTheme } from 'vuetify';
 import {
   useDashboard,
   type ChainConfig,
@@ -50,6 +51,10 @@ export const useBlockchain = defineStore('blockchain', {
     dashboard() {
       return useDashboard();
     },
+    isConsumerChain() {
+      // @ts-ignore
+      return this.current && this.current.providerChain 
+    },
     computedChainMenu() {
       let currNavItem: VerticalNavItems = [];
 
@@ -61,8 +66,11 @@ export const useBlockchain = defineStore('blockchain', {
             title: this.current?.prettyName || this.chainName || '',
             icon: { image: this.current.logo, size: '22' },
             i18n: false,
+            badgeContent: this.isConsumerChain? 'Consumer': undefined,
+            badgeClass: 'bg-secondary',
             children: routes
-              .filter((x) => x.meta.i18n)
+              .filter((x) => x.meta.i18n) // defined menu name
+              .filter((x) => !this.current?.features || this.current.features.includes(String(x.meta.i18n))) // filter none-custom module
               .map((x) => ({
                 title: `module.${x.meta.i18n}`,
                 to: { path: x.path.replace(':chain', this.chainName) },
@@ -112,6 +120,10 @@ export const useBlockchain = defineStore('blockchain', {
   },
   actions: {
     async initial() {
+      // this.current?.themeColor {
+      //     const { global } = useTheme();
+      //     global.current
+      // }
       await this.randomSetupEndpoint();
       await useStakingStore().init();
       useBankStore().initial();
@@ -146,5 +158,8 @@ export const useBlockchain = defineStore('blockchain', {
         this.chainName = name;
       }
     },
+    supportModule(mod: string) {
+      return !this.current?.features || this.current.features.includes(mod)
+    }
   },
 });

src/stores/useDashboard.ts

@@ -61,6 +61,7 @@ export interface ChainConfig {
   coinType: string;
   assets: Asset[];
   themeColor?: string;
+  features?: string[]
   endpoints: {
     rest?: Endpoint[];
     rpc?: Endpoint[];
@@ -74,12 +75,18 @@ export interface ChainConfig {
   };
   exponent: string;
   excludes?: string;
+  providerChain: {
+    api: Endpoint[]
+  };
 }
 
 export interface LocalConfig {
   addr_prefix: string;
   alias: string;
   api: string[] | Endpoint[];
+  provider_chain: {
+    api: string[] | Endpoint[]
+  }
   assets: {
     base: string;
     coingecko_id: string;
@@ -90,10 +97,12 @@ export interface LocalConfig {
   chain_name: string;
   coin_type: string;
   logo: string;
+  theme_color?: string;
   min_tx_fee: string;
   rpc: string[] | Endpoint[];
   sdk_version: string;
   registry_name?: string;
+  features?: string[];
 }
 
 function apiConverter(api: any[]) {
@@ -135,6 +144,12 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
     rest: apiConverter(lc.api),
     rpc: apiConverter(lc.rpc),
   };
+  if(lc.provider_chain) {
+    conf.providerChain = {
+      api: apiConverter(lc.provider_chain.api)
+    }
+  }
+  conf.features = lc.features
   conf.logo = lc.logo;
   return conf;
 }

src/stores/useParamsStore.ts

@@ -156,7 +156,6 @@ export const useParamStore = defineStore('paramstore', {
       //     this.chain.items[chainIndex].value = `${percent(res)}%`
       // })
       const res = await this.getMintParam();
-      console.log(res, 'mint');
     },
     async handleSlashingParams() {
       const res = await this.getSlashingParams();
@@ -200,7 +199,6 @@ export const useParamStore = defineStore('paramstore', {
       this.nodeVersion.items = Object.entries(res.default_node_info).map(
         ([key, value]) => ({ subtitle: key, value: value })
       );
-      console.log('handleAbciInfo', this.nodeVersion.items);
     },
     async getBaseTendermintBlockLatest() {
       return await this.blockchain.rpc?.getBaseBlockLatest();

src/stores/useStakingStore.ts

@@ -3,6 +3,9 @@ import { useBlockchain } from './useBlockchain';
 
 import { get } from '@/libs/http';
 import type { StakingParam, StakingPool, Validator } from '@/types';
+import { CosmosRestClient } from '@/libs/client';
+import { consensusPubkeyToHexAddress, valconsToBase64 } from '@/libs';
+import { toHex, fromBase64 } from '@cosmjs/encoding';
 
 export const useStakingStore = defineStore('stakingStore', {
   state: () => {
@@ -77,6 +80,20 @@ export const useStakingStore = defineStore('stakingStore', {
       );
     },
     async fetchValidators(status: string) {
+      if(this.blockchain.isConsumerChain) {
+        if(this.blockchain.current?.providerChain.api && this.blockchain.current.providerChain.api.length > 0) {
+          const client = CosmosRestClient.newDefault(this.blockchain.current.providerChain.api[0].address)
+          // const vals = await client.getBaseValidatorsetLatest(0) 
+          const res = await client.getStakingValidators(status)
+          const proVals = res.validators.sort(
+            (a, b) => Number(b.delegator_shares) - Number(a.delegator_shares)
+          )
+          if (status === 'BOND_STATUS_BONDED') {
+            this.validators = proVals;
+          }
+          return proVals
+        }
+      }
       return this.blockchain.rpc?.getStakingValidators(status).then((res) => {
         const vals = res.validators.sort(
           (a, b) => Number(b.delegator_shares) - Number(a.delegator_shares)
@@ -89,3 +106,5 @@ export const useStakingStore = defineStore('stakingStore', {
     },
   },
 });
+
+