EIP-7928 BAL Exploration

package.json

@@ -33,9 +33,12 @@
     "format": "prettier --write src/ cypress/e2e/ community-token/"
   },
   "dependencies": {
+    "@ethereumjs/block": "^10.1.2",
     "@ethereumjs/common": "^10.1.2",
     "@ethereumjs/evm": "^10.1.2",
+    "@ethereumjs/tx": "^10.1.2",
     "@ethereumjs/util": "^10.1.2",
+    "@ethereumjs/vm": "^10.1.2",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
     "@paulmillr/trusted-setups": "^0.2.0",

src/explorations/REGISTRY.ts

@@ -1,12 +1,14 @@
 import { INFO as eip7594 } from './eip-7594/info'
 import { INFO as eip7883 } from './eip-7883/info'
+import { INFO as eip7928 } from './eip-7928/info'
 import { INFO as eip7951 } from './eip-7951/info'
 import { INFO as eip8024 } from './eip-8024/info'
 import type { Tag } from './TAGS'
 
 export const EXPLORATIONS: Explorations = {
   [eip7594.id]: eip7594,
   [eip7883.id]: eip7883,
+  [eip7928.id]: eip7928,
   [eip7951.id]: eip7951,
   [eip8024.id]: eip8024,
 }
@@ -32,6 +34,10 @@ export interface Exploration {
   timeline: string
   tags: Tag[]
   image?: string
+  /** Optional max height for the cover image in the exploration sidebar (CSS length, e.g. `12rem`). */
+  imageBoxHeight?: string
+  /** When set, exploration content may Teleport into `#exploration-right-panel`. */
+  rightPanel?: boolean
   introText: string
   usageText: string
   creatorName?: string

src/explorations/TAGS.ts

@@ -20,6 +20,7 @@
  * - Short form preferred (e.g. "EVM" not "Ethereum Virtual Machine").
  */
 export enum Tag {
+  BAL = 'BAL',
   EVM = 'EVM',
   GasCosts = 'Gas Costs',
   PeerDAS = 'PeerDAS',

src/explorations/eip-7928/BalExplorerPanel.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { BALJSONBlockAccessList } from '@ethereumjs/util'
+
+import { type Topic, TOPIC_COLORS, topicCSSVars } from '@/explorations/TOPICS'
+
+import BalJsonView from './BalJsonView.vue'
+import type { TriggerGroupViewModel } from './transitions'
+import TriggerGroupsView from './TriggerGroupsView.vue'
+
+defineProps<{
+  topic: Topic
+  groups: TriggerGroupViewModel[]
+  balJson?: BALJSONBlockAccessList
+  activePath: string | null
+  hasResult: boolean
+}>()
+
+const emit = defineEmits<{
+  hoverPath: [path: string | null]
+}>()
+
+function setActivePath(path: string | null) {
+  emit('hoverPath', path)
+}
+</script>
+
+<template>
+  <div
+    :style="topicCSSVars(topic.color)"
+    :class="[
+      'exploration-c bal-explorer-panel bg-white rounded-lg p-4 shadow-sm min-h-[20rem]',
+      TOPIC_COLORS[topic.color].classes.borderCard,
+    ]"
+  >
+    <h2 class="text-lg font-bold tracking-tight e-text mb-1">Access list explorer</h2>
+    <p v-if="hasResult" class="text-xs font-mono opacity-50 mb-3 leading-relaxed">
+      Hover an event on the left — the matching entry highlights in the record on the right.
+    </p>
+    <p v-else class="text-xs font-mono opacity-50 mb-3 leading-relaxed">
+      Run the block to generate the grouped view and full BAL record.
+    </p>
+
+    <div
+      v-if="hasResult && balJson"
+      class="grid grid-cols-1 min-[1100px]:grid-cols-2 gap-3 items-start min-h-0"
+    >
+      <div class="min-w-0">
+        <TriggerGroupsView :groups="groups" :active-path="activePath" @hover-path="setActivePath" />
+      </div>
+
+      <div class="min-w-0 max-h-[70vh] overflow-y-auto rounded border e-border e-bg-light p-2">
+        <BalJsonView :bal-json="balJson" :active-path="activePath" @hover-path="setActivePath" />
+      </div>
+    </div>
+
+    <div v-else class="rounded-md border border-dashed e-border e-bg-medium px-4 py-10 text-center">
+      <p class="text-sm font-mono opacity-45">Waiting for block execution…</p>
+    </div>
+  </div>
+</template>