Add EVM explorer redirect button for MsgEthereumTx transactions

Detects MsgEthereumTx messages and shows a button to view on the EVM explorer.
Attempts to parse the EVM tx hash from events, falls back to block page if unavailable.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: trevormil

package.json

@@ -12,7 +12,8 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "generate-registry": "tsx scripts/generate-registry.ts",
-    "push-k8s": "sleep 90 && kubectl delete -f ./k8s && kubectl apply -f ./k8s"
+    "push-k8s": "sleep 150 && kubectl delete -f ./k8s && kubectl apply -f ./k8s",
+    "push-k8s:no-sleep": "kubectl delete -f ./k8s && kubectl apply -f ./k8s"
   },
   "dependencies": {
     "@chain-registry/client": "^1.53.184",

src/components/CardStatisticsVertical.vue

@@ -19,37 +19,83 @@ const isPositive = controlledComputed(
   () => props.change,
   () => Math.sign(props.change || 0) === 1
 );
+
+const colorClasses = {
+  primary: {
+    bg: 'bg-indigo-100 dark:bg-indigo-500/10',
+    text: 'text-indigo-500',
+    glow: 'shadow-indigo-500/20',
+  },
+  success: {
+    bg: 'bg-emerald-100 dark:bg-emerald-500/10',
+    text: 'text-emerald-500',
+    glow: 'shadow-emerald-500/20',
+  },
+  warning: {
+    bg: 'bg-amber-100 dark:bg-amber-500/10',
+    text: 'text-amber-500',
+    glow: 'shadow-amber-500/20',
+  },
+  error: {
+    bg: 'bg-red-100 dark:bg-red-500/10',
+    text: 'text-red-500',
+    glow: 'shadow-red-500/20',
+  },
+  info: {
+    bg: 'bg-sky-100 dark:bg-sky-500/10',
+    text: 'text-sky-500',
+    glow: 'shadow-sky-500/20',
+  },
+};
+
+const getColorClass = (type: 'bg' | 'text' | 'glow') => {
+  const colors = colorClasses[props.color as keyof typeof colorClasses] || colorClasses.primary;
+  return colors[type];
+};
 </script>
 
 <template>
-  <div class="bg-base-100 shadow rounded p-4">
-    <div class="flex items-center justify-center">
-      <div v-if="props.icon" class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center">
-        <Icon :class="[`text-${props?.color}`]" :icon="props.icon" size="32" />
-        <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20" :class="[`bg-${props?.color}`]"></div>
+  <div class="card-modern p-5 group">
+    <div class="flex items-start justify-between mb-4">
+      <!-- Icon -->
+      <div
+        v-if="props.icon"
+        class="w-12 h-12 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
+        :class="[getColorClass('bg'), 'shadow-lg', getColorClass('glow')]"
+      >
+        <Icon :class="[getColorClass('text')]" :icon="props.icon" class="text-2xl" />
       </div>
 
+      <!-- Change indicator -->
       <div
-        v-if="props.change"
-        :class="isPositive ? 'text-success' : 'text-error'"
-        class="flex items-center text-sm font-semibold"
+        v-if="props.change !== undefined && props.change !== 0"
+        class="flex items-center gap-0.5 text-sm font-semibold px-2 py-1 rounded-lg"
+        :class="isPositive
+          ? 'bg-emerald-100 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'bg-red-100 dark:bg-red-500/10 text-red-600 dark:text-red-400'"
       >
+        <Icon
+          :icon="isPositive ? 'mdi:trending-up' : 'mdi:trending-down'"
+          class="text-base"
+        />
         <span>{{ isPositive ? `+${props.change}` : props.change }}%</span>
-        <Icon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
       </div>
     </div>
 
-    <div class="">
-      <h6 class="text-lg text-center font-semibold mt-2 mb-1">
+    <!-- Stats Value -->
+    <div class="space-y-1">
+      <h3 class="text-2xl font-bold text-slate-900 dark:text-white">
         {{ props.stats || '-' }}
-      </h6>
-      <p class="text-sm text-center">
+      </h3>
+      <p class="text-sm font-medium text-slate-500 dark:text-slate-400">
         {{ props.title }}
       </p>
-
-      <div v-if="props.subtitle" size="x-small" class="font-semibold">
-        <span class="truncate">{{ props.subtitle }}</span>
-      </div>
+      <p
+        v-if="props.subtitle"
+        class="text-xs text-slate-400 dark:text-slate-500 truncate"
+      >
+        {{ props.subtitle }}
+      </p>
     </div>
   </div>
 </template>

src/components/ChainSummary.vue

@@ -19,27 +19,50 @@ const addFavor = (e: Event) => {
   dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
   window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap));
 };
+
+const isFavorite = computed(() => dashboardStore?.favoriteMap?.[props.name]);
 </script>
+
 <template>
   <RouterLink
     :to="`/${name}`"
-    class="bg-base-100 hover:bg-gray-100 dark:hover:bg-[#373f59] rounded shadow flex items-center px-3 py-3 cursor-pointer"
+    class="group card-modern p-4 flex items-center gap-4 cursor-pointer"
   >
-    <div class="w-8 h-8 rounded-full overflow-hidden">
-      <img :src="conf.logo" />
+    <!-- Chain Logo -->
+    <div class="relative">
+      <div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-700 ring-2 ring-slate-200/50 dark:ring-slate-600/50 group-hover:ring-indigo-500/50 transition-all duration-300">
+        <img
+          :src="conf.logo"
+          class="w-full h-full object-cover"
+          :alt="conf?.prettyName || props.name"
+        />
+      </div>
+      <!-- Online indicator -->
+      <div class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-emerald-500 border-2 border-white dark:border-slate-800"></div>
     </div>
-    <div class="font-semibold ml-4 text-base flex-1 truncate capitalize">
-      {{ conf?.prettyName || props.name }}
+
+    <!-- Chain Info -->
+    <div class="flex-1 min-w-0">
+      <h3 class="font-semibold text-slate-900 dark:text-white truncate group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
+        {{ conf?.prettyName || props.name }}
+      </h3>
+      <p class="text-xs text-slate-500 dark:text-slate-400 truncate capitalize">
+        {{ props.name }}
+      </p>
     </div>
-    <div
+
+    <!-- Favorite Button -->
+    <button
       @click="addFavor"
-      class="pl-4 text-xl"
-      :class="{
-        'text-warning': dashboardStore?.favoriteMap?.[props.name],
-        'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name],
-      }"
+      class="p-2 rounded-lg transition-all duration-200"
+      :class="isFavorite
+        ? 'text-amber-500 bg-amber-100 dark:bg-amber-500/10'
+        : 'text-slate-300 dark:text-slate-600 hover:text-amber-500 hover:bg-slate-100 dark:hover:bg-slate-700'"
     >
-      <Icon icon="mdi-star" />
-    </div>
+      <Icon
+        :icon="isFavorite ? 'mdi:star' : 'mdi:star-outline'"
+        class="text-xl"
+      />
+    </button>
   </RouterLink>
 </template>