add hello world ui package

Makefile

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

cmd/dora-explorer/main.go

@@ -17,6 +17,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 +159,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 +182,18 @@ 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("/js/dora-ui").Handler(http.StripPrefix("/js/dora-ui/", doraUiHandler))
+
 		jsHandler := http.FileServer(http.Dir("static/js"))
 		router.PathPrefix("/js").Handler(http.StripPrefix("/js/", jsHandler))
+	} else {
+		// serve dora ui package from go embed
+		uiFileSys := http.FS(uipackage.Files)
+		router.PathPrefix("/js/dora-ui").Handler(handlers.CustomFileServer(http.FileServer(uiFileSys), uiFileSys, handlers.NotFound))
 	}
 
+	// serve static files from go embed
 	fileSys := http.FS(static.Files)
 	router.PathPrefix("/").Handler(handlers.CustomFileServer(http.FileServer(fileSys), fileSys, handlers.NotFound))
 

templates/submit_deposit/submit_deposit.html

@@ -17,16 +17,35 @@ <h1 class="h4 mb-1 mb-md-0">
 
   <div class="card mt-2">
     <div class="card-body">
-
-
-
-
+      <div id="submit-deposit-container"></div>
     </div>
   </div>
 </div>
 
 {{ end }}
 {{ define "js" }}
+<script src="/js/dora-ui/dora-ui.js"></script>
+<script type="text/javascript">
+  $(function() {
+    window.doraUiComponents.SubmitDeposit(
+      document.getElementById("submit-deposit-container"),
+      {
+        wagmiConfig: {
+          projectId: "vx",
+          chains: [
+            {
+              chainId: 1,
+              name: "Ethereum",
+              rpcUrl: "",
+              tokenName: "Ethereum",
+              tokenSymbol: "ETH",
+            }
+          ]
+        }
+      }
+    );
+  });
+</script>
 {{ end }}
 {{ define "css" }}
 {{ end }}

ui-package/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+webpack-stats.html

ui-package/Makefile

@@ -0,0 +1,20 @@
+
+all: install test build
+
+dep_npm:
+	if [ -z "$(shell which npm)" ]; then \
+		echo "npm is not installed"; \
+		exit 1; \
+	fi
+
+install: dep_npm
+	npm install
+
+test: dep_npm
+	npm run test
+
+build: dep_npm
+	npm run build
+
+clean:
+	rm -rf dist/*