fix(styling): changed colors, default values, made search bar interac…

src/components/charts/apexChartConfig.ts

@@ -12,7 +12,7 @@ const themeColors = (theme: string) => {
         surface: '#FFFFFF',
         'surface-variant': '#424242',
         'on-surface-variant': '#EEEEEE',
-        primary: chainStore.current?.themeColor || '#9cd3b8',
+        primary: '#9cd3b8',
         'primary-darken-1': '#9cd3b8',
         secondary: '#6D788D',
         'secondary-darken-1': '#018786',
@@ -222,10 +222,11 @@ export const getMarketPriceChartConfig = (
       },
     },
 
-    colors: [themeColors(theme).colors.primary],
+    colors: [ '#fa7327'],
     fill: {
-      opacity: 0.5,
+      opacity: 0.8,
       type: 'gradient',
+      gradientToColors: ['#ff5722', '#fa7327'],
     },
     grid: {
       show: true,

src/modules/[chain]/ibc/connection.vue

@@ -54,7 +54,7 @@ function pageload(p: number) {
             &#x21cc; {{ s.to }}</span>
         </div>
         <div v-show="tab === 'favorite'" class="flex flex-wrap gap-1 p-4 ">
-          <div class="join border border-primary">
+          <div class="join border border-[#eeeeee38]">
             <button class="join-item px-2">{{ $t('ibc.connection_id') }}:</button>
             <input v-model="ibcStore.connectionId" type=number class="input input-bordered w-40 join-item" min="0"
               :max="pageResponse.total || 0" :placeholder="`0~${pageResponse.total}`" />

src/modules/[chain]/index.vue

@@ -110,7 +110,7 @@ const amount = computed({
           <div class="text-xl font-semibold text-main">
             {{ coinInfo.name }} (<span class="uppercase">{{
               coinInfo.symbol
-              }}</span>)
+            }}</span>)
           </div>
           <div>
             <div class="dropdown dropdown-hover w-full">
@@ -138,9 +138,9 @@ const amount = computed({
                   </div>
                 </div>
               </label>
-              <div class="dropdown-content pt-1">
+              <div class="dropdown-content pt-1 z-30">
                 <div class="h-64 overflow-auto w-full shadow rounded">
-                  <ul class="menu w-full bg-gray-100 rounded dark:bg-[#212121]">
+                  <ul class="menu w-full rounded !bg-[#212121]">
                     <li v-for="(item, index) in store.coinInfo.tickers" :key="index" @click="store.selectTicker(index)">
                       <div class="flex items-center justify-between hover:bg-vector-bg">
                         <div class="flex-1">

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

@@ -3,6 +3,8 @@ import { computed, ref } from '@vue/reactivity';
 import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
 import type { PaginatedTxs } from '@/types';
 import { useRouter } from 'vue-router';
+import { Icon } from '@iconify/vue';
+
 import { onMounted } from 'vue';
 const props = defineProps(['chain']);
 const vueRouters = useRouter();
@@ -77,8 +79,15 @@ function search() {
         <div v-show="tab === 'search'" class="bg-vector-bg rounded overflow-x-auto">
             <div class="p-4">
                 <div class="form-control">
-                    <input v-model="hash" type="text" class="input input-bordered" placeholder="Search by Tx Hash"
-                        @blur="search" />
+                    <div class="flex w-full">
+                        <input v-model="hash" type="text" class="input w-full input-bordered !border-r-0"
+                            placeholder="Search by Tx Hash" @blur="search" />
+                        <div class="">
+                            <button class=" btn !rounded-l-none btn-primary" @click="search">
+                                <Icon icon="mdi:magnify" class="text-2xl text-gray-500 dark:text-gray-200" />
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -197,11 +197,6 @@ function color(v: string) {
         <h3 class="text-lg font-bold">{{ $t('uptime.add_validators') }}</h3>
         <div class="form-control my-5 border-2">
           <div class="input-group input-group-md">
-            <select v-model="selectChain" class="select select-bordered capitalize" @change="changeChain">
-              <option v-for="v in dashboard.chains" :value="v.chainName">
-                {{ v.chainName }}
-              </option>
-            </select>
             <input v-model="keyword" type="text" class="input w-full" placeholder="keywords to filter validator">
           </div>
         </div>

src/modules/wallet/apr.vue

@@ -7,15 +7,16 @@ import {
   useStakingStore,
   useFormatter
 } from '@/stores';
+import { Icon } from '@iconify/vue';
 
 const selectedTab = ref(localStorage.getItem('selectedTab') || 'Delegators');
-const amountTokens = ref(50);
-const tokenPrice = ref(1);
+const amountTokens = ref(1000000);
+const tokenPrice = ref(0.1);
 const staking = useStakingStore();
 const format = useFormatter();
 
 const validatorSettings = reactive({
-  validatorStake: 10,
+  validatorStake: 1000000,
   validatorCommission: 5,
 });
 
@@ -41,16 +42,16 @@ const calculateValidatorROI = computed(() => {
   const stake = Number(validatorSettings.validatorStake || 0);
   const commissionRate = Number(validatorSettings.validatorCommission || 0) / 100;
   const aprValue = parseFloat(apr.value as string) / 100;
-  if(!aprValue) return 0;
+  if (!aprValue) return 0;
 
   return Number((stake * aprValue * commissionRate).toFixed(2));
 });
 
 const calculateDelegatorAPR = computed(() => {
   const tokens = Number(amountTokens.value || 0);
   const price = Number(tokenPrice.value || 0);
-  const aprValue = parseFloat(apr.value as string ) / 100;
-  if(!aprValue) return 0;
+  const aprValue = parseFloat(apr.value as string) / 100;
+  if (!aprValue) return 0;
 
   return Number((tokens * price * aprValue).toFixed(2));
 });
@@ -66,54 +67,63 @@ watch(selectedTab, (newTab) => {
   <div class="apr-calculator bg-gray-800 p-4 rounded text-center w-[400px] mx-auto flex flex-col gap-3 items-center">
     <!-- Tabs -->
     <div class="tabs-boxed bg-transparent flex justify-center  space-x-2 mb-4">
-      <button class="tab px-4 rounded"
-        :class="selectedTab === 'Delegators' ? 'bg-vector-bg text-white' : 'bg-gray-700'"
+      <button class="tab px-4 rounded" :class="selectedTab === 'Delegators' ? 'bg-vector-bg text-white' : 'bg-gray-700'"
         @click="selectedTab = 'Delegators'">
         Delegators
       </button>
-      <button class="tab px-4 rounded"
-        :class="selectedTab === 'Validators' ? 'bg-vector-bg text-white' : 'bg-gray-700'"
+      <button class="tab px-4 rounded" :class="selectedTab === 'Validators' ? 'bg-vector-bg text-white' : 'bg-gray-700'"
         @click="selectedTab = 'Validators'">
         Validators
       </button>
     </div>
-    <span class='badge py-4 px-4     bg-vector-bg text-white'>APR: {{apr}}</span>
+    <span class='badge py-4 px-4 bg-vector-bg text-white'>APR: {{ apr }}</span>
 
     <!-- Delegators View -->
     <div v-if="selectedTab === 'Delegators'" class="delegators-view">
-      <div class="flex flex-col items-center space-y-4 card card-body bg-[#161616] w-[380px]">
+      <div class="flex flex-col items-center space-y-4 card card-body bg-[#161616] w-[450px]">
         <label class="text-white">Token Amount</label>
         <div class="flex items-center gap-2">
-            <input type="number" v-model="amountTokens" min="1" :max="totalSupply" step="1" class="input-field max-w-[100px] " /> <span> VCTR </span>
+          <input type="number" v-model="amountTokens" min="1" :max="totalSupply" step="1"
+            class="input-field max-w-[150px] " /> <span> VCTR </span>
         </div>
-        <label class="text-white">Token Price: ${{ tokenPrice }}</label>
+        <label class="text-white pt-4">Token Price: ${{ tokenPrice }}</label>
         <input type="range" v-model="tokenPrice" min="0.01" max="100" step="0.01" class="slider" />
 
         <div class="text-main mt-4 w-full card card-body bg-vector-bg">
-          <h4>Estimated ROI </h4>
-          <span class='text-gray-500 whitespace-nowrap mb-5'>(assuming 5% validator comission)</span>
-          <p class="text-white">Daily: <strong class='text-vector-primary'>${{ (calculateDelegatorAPR / 365).toFixed(2) }}</strong></p>
-          <p class="text-white">Monthly: <strong class='text-vector-primary'> ${{ (calculateDelegatorAPR / 12).toFixed(2) }}</strong></p>
+          <div class="flex justify-center gap-1">
+            <h4>Estimated Staking Revenue</h4>
+            <span class='tooltip text-gray-500 whitespace-nowrap' :data-tip="`assuming 5% validator comission`">
+              <Icon icon="mdi:info" />
+            </span>
+          </div>
+          <p class="text-white">Daily: <strong class='text-vector-primary'>${{ (calculateDelegatorAPR / 365).toFixed(2)
+              }}</strong></p>
+          <p class="text-white">Monthly: <strong class='text-vector-primary'> ${{ (calculateDelegatorAPR /
+            12).toFixed(2) }}</strong></p>
           <p class="text-white">Yearly: <strong class='text-vector-primary'>${{ calculateDelegatorAPR }}</strong></p>
         </div>
       </div>
     </div>
 
     <!-- Validators View -->
     <div v-if="selectedTab === 'Validators'" class="validators-view">
-      <div class="flex flex-col items-center space-y-4 card card-body bg-[#161616]  w-[380px]">
+      <div class="flex flex-col items-center space-y-4 card card-body bg-[#161616]  w-[450px]">
         <label class="text-white">Amount staked to you</label>
         <div class="flex items-center gap-2">
-            <input type="number" v-model="validatorSettings.validatorStake" min="0" :max="totalSupply" class="input-field max-w-[100px]" /> <span> VCTR </span>
+          <input type="number" v-model="validatorSettings.validatorStake" min="0" :max="totalSupply"
+            class="input-field max-w-[150px]" /> <span> VCTR </span>
         </div>
-        <label class="text-white">Validator Commission: {{ validatorSettings.validatorCommission }}%</label>
+        <label class="text-white pt-4">Validator Commission: {{ validatorSettings.validatorCommission }}%</label>
         <input type="range" v-model="validatorSettings.validatorCommission" min="1" max="100" step="1" class="slider" />
 
         <div class="text-main mt-4 w-full card card-body bg-vector-bg">
-          <h4 class="text-white">Estimated ROI</h4>
-          <p class="text-white">Daily: <strong class='text-vector-primary'>${{ (Number(calculateValidatorROI) / 365).toFixed(2) }}</strong></p>
-          <p class="text-white">Monthly: <strong class='text-vector-primary'>${{ (Number(calculateValidatorROI) / 12).toFixed(2) }}</strong></p>
-          <p class="text-white">Yearly: <strong class='text-vector-primary'>${{ calculateValidatorROI.toFixed(2)}}</strong></p>
+          <h4>Estimated Staking Revenue</h4>
+          <p class="text-white">Daily: <strong class='text-vector-primary'>${{ (Number(calculateValidatorROI) /
+            365).toFixed(2) }}</strong></p>
+          <p class="text-white">Monthly: <strong class='text-vector-primary'>${{ (Number(calculateValidatorROI) /
+            12).toFixed(2) }}</strong></p>
+          <p class="text-white">Yearly: <strong class='text-vector-primary'>${{
+            calculateValidatorROI.toFixed(2) }}</strong></p>
         </div>
       </div>
     </div>

src/pages/index.vue

@@ -59,25 +59,27 @@ function handleKeyPress(event: KeyboardEvent) {
       <h1 class="text-primary  text-3xl font-bold">
         {{ $t('pages.title') }}
       </h1>
-      <div class="flex w-full max-w-[600px] ">
-        <input class="input flex-1 w-full !input-bordered !rounded-r-none" @keypress="handleKeyPress"
-          v-model="searchQuery" placeholder="Search for Height/Transaction/Account Address" />
+      <div class="w-full max-w-[600px]">
+        <div class="flex w-full max-w-[600px]">
+          <input class="input flex-1 w-full !input-bordered !rounded-r-none" @keypress="handleKeyPress"
+            v-model="searchQuery" autofocus placeholder="Search for Height/Transaction/Account Address" />
+          <div class="">
+            <button class=" btn !rounded-l-none btn-primary" @click="confirm">
+              <Icon icon="mdi:magnify" class="text-2xl text-gray-500 dark:text-gray-200" />
+            </button>
+          </div>
+        </div>
         <div class="">
-          <button class=" btn !rounded-l-none btn-primary" @click="confirm">
-            <Icon icon="mdi:magnify" class="text-2xl text-gray-500 dark:text-gray-200" />
-          </button>
+          <div class="mt-4 text-center text-sm text-error" v-show="errorMessage">
+            {{ errorMessage }}
+          </div>
         </div>
       </div>
-
       <div class="text-center text-base">
         <p class="mb-1">
           {{ $t('pages.slogan') }}
         </p>
-        <div class="">
-          <div class="mt-2 text-right text-sm text-error" v-show="errorMessage">
-            {{ errorMessage }}
-          </div>
-        </div>
+
       </div>
       <!-- Socials -->
       <div class="flex gap-8">

src/plugins/i18n/locales/en.json

@@ -225,8 +225,8 @@
     "signer_addr": "Signer Address",
     "consensus_pub_key": "Consensus Public Key",
     "liquid_staking": "Liquid Staking",
-    "liquid_staking_shares":"Liquid Shares",
-    "validator_bond_share":"Validator Bonded"
+    "liquid_staking_shares": "Liquid Shares",
+    "validator_bond_share": "Validator Bonded"
   },
   "statesync": {
     "title": "What's State Sync?",
@@ -268,7 +268,7 @@
     "signed_blocks": "Signed Blocks",
     "missing_blocks": "Missing Blocks",
     "add_validators": "Add Validators",
-    "add": "Add",
+    "add": "Confirm",
     "legend": "Legend",
     "committed": "Committed",
     "precommitted": "Precommitted",
@@ -298,4 +298,4 @@
     "app_versions": "Application Versions",
     "node_info": "Node Information"
   }
-}
+}