Submit Deposits page

.github/workflows/_shared-build.yaml

@@ -42,8 +42,37 @@ on:
 
 # shared build jobs
 jobs:
+  build_ui_package:
+    name: Build UI package
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        ref: ${{ inputs.ref }}
+
+    # setup node & npm
+    - name: Set up node
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20.x
+        cache: 'npm'
+        cache-dependency-path: ./ui-package/package-lock.json
+
+    # build UI package
+    - name: Build UI package
+      run: |
+        make build-ui
+
+    # upload artifacts
+    - name: "Upload artifact: ui-package"
+      uses: actions/upload-artifact@v3
+      with:
+        path: ./ui-package/dist/*
+        name: ui-package
+
   build_linux_amd64_binary:
     name: Build linux/amd64 binary
+    needs: [build_ui_package]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
@@ -61,6 +90,13 @@ jobs:
       run: |
         go get -v -t -d ./...
 
+    # download UI build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
+
     # build binaries
     - name: Build linux amd64 binary
       run: |
@@ -77,6 +113,7 @@ jobs:
 
   build_linux_arm64_binary:
     name: Build linux/arm64 binary
+    needs: [build_ui_package]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
@@ -100,6 +137,13 @@ jobs:
       run: |
         go get -v -t -d ./...
 
+    # download UI build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
+
     # build binaries
     - name: Build linux arm64 binary
       run: |
@@ -116,6 +160,7 @@ jobs:
 
   build_windows_binary:
     name: Build windows/amd64 binary
+    needs: [build_ui_package]
     runs-on: windows-latest
     steps:
     - uses: actions/checkout@v3
@@ -133,6 +178,13 @@ jobs:
       run: |
         go get -v -t -d ./...
 
+    # download UI build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
+
     # build binaries
     - name: Build windows binary
       run: |
@@ -149,6 +201,7 @@ jobs:
 
   build_darwin_amd64_binary:
     name: Build macos/amd64 binary
+    needs: [build_ui_package]
     runs-on: macos-latest
     steps:
     - uses: actions/checkout@v3
@@ -166,6 +219,13 @@ jobs:
       run: |
         go get -v -t -d ./...
 
+    # download UI build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
+
     # build binaries
     - name: Build macos amd64 binary
       run: |
@@ -182,6 +242,7 @@ jobs:
 
   build_darwin_arm64_binary:
     name: Build macos/arm64 binary
+    needs: [build_ui_package]
     runs-on: macos-latest
     steps:
     - uses: actions/checkout@v3
@@ -199,6 +260,13 @@ jobs:
       run: |
         go get -v -t -d ./...
 
+    # download UI build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
+
     # build binaries
     - name: Build macos arm64 binary
       run: |
@@ -237,6 +305,11 @@ jobs:
         password: ${{ secrets.DOCKERHUB_TOKEN }}
 
     # download build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
     - name: Download build artifacts
       uses: actions/download-artifact@v3
       with:
@@ -286,6 +359,11 @@ jobs:
         password: ${{ secrets.DOCKERHUB_TOKEN }}
 
     # download build artifacts
+    - name: Download UI build artifacts
+      uses: actions/download-artifact@v3
+      with:
+        name: ui-package
+        path: ./ui-package/dist
     - name: Download build artifacts
       uses: actions/download-artifact@v3
       with:

.github/workflows/_shared-check.yaml

@@ -16,7 +16,10 @@ jobs:
       uses: actions/setup-go@v4
       with:
         go-version: 1.22.x
-
+
+    - name: Prepare test environment
+      run: mkdir -p ui-package/dist && touch ui-package/dist/dummy
+
     - name: Verify dependencies
       run: go mod verify
 

.hack/devnet/run.sh

@@ -50,8 +50,21 @@ frontend:
   siteName: "Dora the Explorer"
   siteSubtitle: "$ENCLAVE_NAME - Kurtosis"
   ethExplorerLink: ""
+  publicRpcUrl: "$(
+  for node in $EXECUTION_NODES; do
+    ip=$(echo '127.0.0.1')
+    port=$(docker inspect --format='{{ (index (index .NetworkSettings.Ports "8545/tcp") 0).HostPort }}' $node)
+    if [ -z "$port" ]; then
+      continue
+    fi
+    echo "http://$ip:$port"
+    break
+  done
+  )"
+  rainbowkitProjectId: "15fe4ab4d5c0bcb6f0dc7c398301ff0e"
   validatorNamesYaml: "${__dir}/generated-validator-ranges.yaml"
   showSensitivePeerInfos: true
+  showSubmitDeposit: true
 beaconapi:
   localCacheSize: 10
   redisCacheAddr: ""

Dockerfile

@@ -1,9 +1,18 @@
-# build env
-FROM golang:1.22 AS build-env
+# node build env
+FROM node:20 AS node-env
+WORKDIR /app
+COPY ui-package/package.json /app
+RUN npm install
+COPY ui-package /app
+RUN npm run build
+
+# go build env
+FROM golang:1.22 AS go-env
 COPY go.mod go.sum /src/
 WORKDIR /src
 RUN go mod download
 COPY . .
+COPY --from=node-env /app/dist /src/ui-package/dist
 ARG TARGETOS
 ARG TARGETARCH
 ARG release=
@@ -14,7 +23,7 @@ FROM debian:stable-slim
 WORKDIR /app
 RUN apt-get update && apt-get install -y --no-install-recommends ca-certificates && apt-get clean && rm -rf /var/lib/apt/lists/*
 RUN update-ca-certificates
-COPY --from=build-env /src/bin /app
+COPY --from=go-env /src/bin /app
 EXPOSE 8080
 ENTRYPOINT ["./dora-explorer"]
 CMD []

Makefile

@@ -10,20 +10,29 @@ GOLDFLAGS += -X 'github.com/ethpandaops/dora/utils.BuildRelease="$(RELEASE)"'
 
 all: test build
 
-test:
+test: ensure-ui
+	$(MAKE) -C ui-package test
 	go test ./...
 
-build:
+build: ensure-ui
 	@echo version: $(VERSION)
 	env CGO_ENABLED=1 go build -v -o bin/ -ldflags="-s -w $(GOLDFLAGS)" ./cmd/*
 
+ensure-ui:
+	if [ ! -f ui-package/dist/react-ui.js ]; then $(MAKE) build-ui; fi
+
+build-ui:
+	$(MAKE) -C ui-package install
+	$(MAKE) -C ui-package build
+
 clean:
 	rm -f bin/*
+	$(MAKE) -C ui-package clean
 
 devnet:
 	.hack/devnet/run.sh
 
-devnet-run: devnet
+devnet-run: devnet ensure-ui
 	go run cmd/dora-explorer/main.go --config .hack/devnet/generated-dora-config.yaml
 
 devnet-clean:

clients/consensus/chainspec.go

@@ -52,6 +52,7 @@ type ChainSpec struct {
 	DepositContractAddress             []byte            `yaml:"DEPOSIT_CONTRACT_ADDRESS"`
 	MaxConsolidationRequestsPerPayload uint64            `yaml:"MAX_CONSOLIDATION_REQUESTS_PER_PAYLOAD"`
 	MaxWithdrawalRequestsPerPayload    uint64            `yaml:"MAX_WITHDRAWAL_REQUESTS_PER_PAYLOAD"`
+	DepositChainId                     uint64            `yaml:"DEPOSIT_CHAIN_ID"`
 
 	// EIP7594: PeerDAS
 	NumberOfColumns              *uint64 `yaml:"NUMBER_OF_COLUMNS"`

cmd/dora-explorer/main.go

@@ -3,6 +3,7 @@ package main
 import (
 	"context"
 	"flag"
+	"io/fs"
 	"net"
 	"net/http"
 	_ "net/http/pprof"
@@ -17,6 +18,7 @@ import (
 	"github.com/ethpandaops/dora/services"
 	"github.com/ethpandaops/dora/static"
 	"github.com/ethpandaops/dora/types"
+	uipackage "github.com/ethpandaops/dora/ui-package"
 	"github.com/ethpandaops/dora/utils"
 )
 
@@ -158,6 +160,7 @@ func startFrontend(webserver *http.Server) {
 	router.HandleFunc("/validators", handlers.Validators).Methods("GET")
 	router.HandleFunc("/validators/activity", handlers.ValidatorsActivity).Methods("GET")
 	router.HandleFunc("/validators/deposits", handlers.Deposits).Methods("GET")
+	router.HandleFunc("/validators/deposits/submit", handlers.SubmitDeposit).Methods("GET")
 	router.HandleFunc("/validators/initiated_deposits", handlers.InitiatedDeposits).Methods("GET")
 	router.HandleFunc("/validators/included_deposits", handlers.IncludedDeposits).Methods("GET")
 	router.HandleFunc("/validators/voluntary_exits", handlers.VoluntaryExits).Methods("GET")
@@ -180,10 +183,20 @@ func startFrontend(webserver *http.Server) {
 		cssHandler := http.FileServer(http.Dir("static/css"))
 		router.PathPrefix("/css").Handler(http.StripPrefix("/css/", cssHandler))
 
+		doraUiHandler := http.FileServer(http.Dir("ui-package/dist"))
+		router.PathPrefix("/ui-package").Handler(http.StripPrefix("/ui-package/", doraUiHandler))
+
 		jsHandler := http.FileServer(http.Dir("static/js"))
 		router.PathPrefix("/js").Handler(http.StripPrefix("/js/", jsHandler))
+	} else {
+		// serve dora ui package from go embed
+		uiEmbedFS, _ := fs.Sub(uipackage.Files, "dist")
+		uiFileSys := http.FS(uiEmbedFS)
+		uiHandler := handlers.CustomFileServer(http.FileServer(uiFileSys), uiFileSys, handlers.NotFound)
+		router.PathPrefix("/ui-package").Handler(http.StripPrefix("/ui-package/", uiHandler))
 	}
 
+	// serve static files from go embed
 	fileSys := http.FS(static.Files)
 	router.PathPrefix("/").Handler(handlers.CustomFileServer(http.FileServer(fileSys), fileSys, handlers.NotFound))
 

config/default.config.yml

@@ -30,6 +30,11 @@ frontend:
   # file or inventory url to load validator names from
   validatorNamesYaml: ""
   validatorNamesInventory: ""
+
+  # frontend features
+  showSensitivePeerInfos: false
+  showPeerDASInfos: false
+  showSubmitDeposit: false
 
 beaconapi:
   # beacon node rpc endpoints

handlers/pageData.go

@@ -207,6 +207,18 @@ func createMenuItems(active string) []types.MainMenuItem {
 		},
 	})
 
+	if utils.Config.Frontend.ShowSubmitDeposit {
+		validatorMenu = append(validatorMenu, types.NavigationGroup{
+			Links: []types.NavigationLink{
+				{
+					Label: "Submit Deposits",
+					Path:  "/validators/deposits/submit",
+					Icon:  "fa-file-import",
+				},
+			},
+		})
+	}
+
 	return []types.MainMenuItem{
 		{
 			Label:    "Blockchain",