Build basic form

.gitignore

@@ -16,3 +16,8 @@
 
 # Dependency directories (remove the comment below to include it)
 vendor/
+
+
+mainnet-commitments-client.log
+mainnet-commitments-ui
+mainnet-commitments-ui.exe
\ No newline at end of file

Makefile

@@ -12,10 +12,10 @@ build:
 	go mod tidy
 
 update_release:
-	GOFLAGS="" go get gitlab.com/elixxir/client@release
+	GOFLAGS="" go get git.xx.network/elixxir/mainnet-commitments@bee/upgrade
 
 update_master:
-	GOFLAGS="" go get gitlab.com/elixxir/client@master
+	GOFLAGS="" go get git.xx.network/elixxir/mainnet-commitments@master
 
 master: update_master clean build
 

README.md

 # MainNet Commitments UI
 
-Runs the UI for MainNet commitments using NW.js.
+Runs the UI for MainNet commitments UI.
 
-To run:
+### Setup:
+
+1. Download the most recent version of NW.js from https://nwjs.io/downloads/.
+The SDK version includes the developer console.
+2. Extract contents.
+
+### To run:
+
+1. Compile project
 ```
 go build
-pathTo/nwjs/nwjs .
+```
+2. Run with `nw`. (On Windows, run it with `nw.exe`)
+```
+pathTo/nwjs/nw .
 ```
\ No newline at end of file

go.mod

@@ -3,13 +3,21 @@ module git.xx.network/elixxir/mainnet-commitments-ui
 go 1.17
 
 require (
+	git.xx.network/elixxir/mainnet-commitments v0.0.0-20220222162816-885a8a6d20d2
 	github.com/dtylman/gowd v0.0.0-20190619113956-15e38debca22
 	github.com/spf13/cobra v1.3.0
 	github.com/spf13/jwalterweatherman v1.1.0
 )
 
 require (
+	github.com/go-resty/resty/v2 v2.6.0 // indirect
 	github.com/inconshreveable/mousetrap v1.0.0 // indirect
+	github.com/mitchellh/go-homedir v1.1.0 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
+	gitlab.com/xx_network/crypto v0.0.5-0.20210914231859-c309efac46c4 // indirect
+	gitlab.com/xx_network/primitives v0.0.4-0.20210915220237-70cb4551d6f3 // indirect
+	golang.org/x/crypto v0.0.0-20210817164053-32db794688a5 // indirect
 	golang.org/x/net v0.0.0-20210813160813-60bc85c4be6d // indirect
+	golang.org/x/sys v0.0.0-20211205182925-97ca703d548d // indirect
 )

index.go

 package main
 
 import (
+	"fmt"
+	"git.xx.network/elixxir/mainnet-commitments/client"
+	"git.xx.network/elixxir/mainnet-commitments/utils"
 	"github.com/dtylman/gowd"
 	"github.com/dtylman/gowd/bootstrap"
 	jww "github.com/spf13/jwalterweatherman"
+	"time"
 )
 
-func buildPage() {
-
 var body *gowd.Element
 
+func buildPage() error {
+
+	inputs := Inputs{}
+
 	// creates a new bootstrap fluid container
 	body = bootstrap.NewContainer(false)
-
 	// add some elements using the object model
-	div := bootstrap.NewElement("div", "well")
-	div.SetAttribute("style", "font-size:1.5em;margin-top:25px;")
-	body.AddElement(div)
-
-	logo := bootstrap.NewElement("img", "")
-	logo.SetAttribute("src", "img/xx_logo.svg")
-	logo.SetAttribute("style", "float:right;margin: -10px -10px 0 0;")
-	logo.SetAttribute("id", "logo")
-	div.AddElement(logo)
-
-	// Start the ui loop
-	err = gowd.Run(body)
+
+	jww.ERROR.Printf("PAGE LOADED")
+
+	// keyPathInput := bootstrap.NewFileButton(bootstrap.ButtonDefault, "keyPath", false)
+	keyPathInput := bootstrap.NewFormInput("file", "keyPath")
+	keyPathInput.SetValue("test")
+	idfPathInput := bootstrap.NewFormInput("file", "idfPath")
+	nominatorWalletInput := bootstrap.NewFormInput("text", "nominatorWallet")
+	validatorWalletInput := bootstrap.NewFormInput("text", "validatorWallet")
+	serverAddressInput := bootstrap.NewFormInput("text", "serverAddress")
+	serverCertPathInput := bootstrap.NewFormInput("file", "serverCertPath")
+	submit := bootstrap.NewButton(bootstrap.ButtonPrimary, "button")
+
+	errBox := bootstrap.NewElement("div", "well")
+
+	// keyPathInput.OnEvent(gowd.OnChange, func(sender *gowd.Element, event *gowd.EventElement) {
+	// 	jww.INFO.Printf("keyPath sender: %+v", sender)
+	// 	jww.INFO.Printf("keyPath event: %+v", event)
+	// 	inputs.keyPath = keyPathInput.GetValue()
+	// 	jww.INFO.Printf("keyPath set: %q", inputs.keyPath)
+	// })
+	// idfPathInput.OnEvent(gowd.OnChange, func(_ *gowd.Element, event *gowd.EventElement) {
+	// 	inputs.idfPath = event.GetValue()
+	// 	jww.INFO.Printf("idfPath set: %q", inputs.idfPath)
+	// })
+	// nominatorWalletInput.OnEvent(gowd.OnChange, func(_ *gowd.Element, event *gowd.EventElement) {
+	// 	inputs.nominatorWallet = event.GetValue()
+	// 	jww.INFO.Printf("nominatorWallet set: %q", inputs.nominatorWallet)
+	// })
+	// validatorWalletInput.OnEvent(gowd.OnChange, func(_ *gowd.Element, event *gowd.EventElement) {
+	// 	inputs.validatorWallet = event.GetValue()
+	// 	jww.INFO.Printf("validatorWallet set: %q", inputs.validatorWallet)
+	// })
+	// serverAddressInput.OnEvent(gowd.OnChange, func(_ *gowd.Element, event *gowd.EventElement) {
+	// 	inputs.serverAddress = event.GetValue()
+	// 	jww.INFO.Printf("serverAddress set: %q", inputs.serverAddress)
+	// })
+	// serverCertPathInput.OnEvent(gowd.OnChange, func(_ *gowd.Element, event *gowd.EventElement) {
+	// 	inputs.serverCertPath = event.GetValue()
+	// 	jww.INFO.Printf("serverCertPath set: %q", inputs.serverCertPath)
+	// })
+	submit.OnEvent(gowd.OnClick, func(_ *gowd.Element, event *gowd.EventElement) {
+		var errs int
+		inputs.keyPath = keyPathInput.GetValue()
+		if len(inputs.keyPath) == 0 {
+			keyPathInput.SetHelpText("Required.")
+			errs++
+		}
+		inputs.idfPath = keyPathInput.GetValue()
+		if len(inputs.idfPath) == 0 {
+			idfPathInput.SetHelpText("Required.")
+			errs++
+		}
+		inputs.nominatorWallet = nominatorWalletInput.GetValue()
+		if len(inputs.nominatorWallet) == 0 {
+			nominatorWalletInput.SetHelpText("Required.")
+			errs++
+		}
+		inputs.validatorWallet = validatorWalletInput.GetValue()
+		if len(inputs.validatorWallet) == 0 {
+			validatorWalletInput.SetHelpText("Required.")
+			errs++
+		}
+		inputs.serverAddress = serverAddressInput.GetValue()
+		if len(inputs.serverAddress) == 0 {
+			serverAddressInput.SetHelpText("Required.")
+			errs++
+		}
+		inputs.serverCertPath = serverCertPathInput.GetValue()
+		if len(inputs.serverCertPath) == 0 {
+			serverCertPathInput.SetHelpText("Required.")
+			errs++
+		}
+		jww.INFO.Printf("Inputs set: %+v", inputs)
+
+		if errs == 0 {
+			err := client.SignAndTransmit(inputs.keyPath,
+				inputs.idfPath,
+				inputs.nominatorWallet,
+				inputs.validatorWallet,
+				inputs.serverAddress,
+				inputs.serverCertPath,
+				utils.Contract)
 			if err != nil {
-		jww.ERROR.Printf("Failed to start ui loop: %+v", err)
+				errBox.SetText(err.Error())
 			}
 		}
+	})
+
+	form := bootstrap.NewFormGroup(
+		keyPathInput.Element,
+		idfPathInput.Element,
+		nominatorWalletInput.Element,
+		validatorWalletInput.Element,
+		serverAddressInput.Element,
+		serverCertPathInput.Element,
+		submit)
+
+	row := bootstrap.NewRow(bootstrap.NewColumn(bootstrap.ColumnSmall, 3, bootstrap.NewColumn(bootstrap.ColumnSmall, 3, bootstrap.NewElement("div", "well", form), errBox)))
+	body.AddElement(row)
+	// Start the UI loop
+	err := gowd.Run(body)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+type Inputs struct {
+	keyPath, idfPath, nominatorWallet, validatorWallet, serverAddress, serverCertPath string
+}
+
+// happens when the 'start' button is clicked
+func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
+	// adds a text and progress bar to the body
+	sender.SetText("Working...")
+	text := body.AddElement(gowd.NewStyledText("Working...", gowd.BoldText))
+	progressBar := bootstrap.NewProgressBar()
+	body.AddElement(progressBar.Element)
+
+	// makes the body stop responding to user events
+	body.Disable()
+
+	// clean up - remove the added elements
+	defer func() {
+		sender.SetText("Start")
+		body.RemoveElement(text)
+		body.RemoveElement(progressBar.Element)
+		body.Enable()
+	}()
+
+	// render the progress bar
+	for i := 0; i <= 123; i++ {
+		progressBar.SetValue(i, 123)
+		text.SetText(fmt.Sprintf("Working %v", i))
+		time.Sleep(time.Millisecond * 20)
+		// this will cause the body to be refreshed
+		body.Render()
+	}
+
+}

index.html

@@ -6,6 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<script type="text/javascript" src="js/jquery.min.js"></script>
 	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
+	<link rel="stylesheet" type="text/css" href="css/style.css"/>
 	<script type="text/javascript" src="js/bootstrap.min.js"></script>
 	<title>App</title>
 </head>

js/code.js

-var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
-var current = 0;
-
-var keyHandler = function (event) {
-
-    // If the key isn't in the pattern, or isn't the current key in the pattern, reset
-    if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
-        current = 0;
-        return;
-    }
-
-    // Update how much of the pattern is complete
-    current++;
-
-    // If complete, alert and reset
-    if (pattern.length === current) {
-        current = 0;
-        //window.alert('You found it!');
-        $('img').solitaireVictory({fallToLeft: true});
-    }
-
-};
-
-// Listen for keydown events
-document.addEventListener('keydown', keyHandler, false);
\ No newline at end of file

js/solitaireVictory.js

-(function( $ ) {
-
-    $.fn.solitaireVictory = function(settings) {
-
-        settings = settings || {};
-
-        var g = settings.g || -3;
-        var dt = settings.dt || 20;
-        var bounce = settings.bounce || 0.7;
-        var endVelocity = settings.endVelocity || 20;
-        var stagger = settings.stagger || 200;
-        var relativeToDocument = settings.relativeToDocument || false;
-        var clear = settings.clear || false;
-        var fallToLeft = settings.fallToLeft || false;
-
-        var body = $('body');
-        var windowHeight = (relativeToDocument ? $(document).height() : $(window).height());
-
-        var fallIteration = function(elem, elemHeight, oldPos, dx, dy) {
-            var copy = elem.clone();
-            body.append(copy);
-
-            var newTop = Math.min(windowHeight - elemHeight, oldPos.top + dy);
-            var newPos = {
-                left: oldPos.left + dx,
-                top: newTop
-            };
-            copy.offset(newPos);
-            if (Math.abs(newTop - (windowHeight - elemHeight)) < 5) {
-                if (dy < 0 || dy > endVelocity) {
-                    dy *= -1*bounce;
-                    setTimeout(function() {
-                        fallIteration(copy, elemHeight, newPos, dx, dy);
-                    }, dt);
-                }
-            } else {
-                dy = dy - g;
-                setTimeout(function() {
-                    fallIteration(copy, elemHeight, newPos, dx, dy);
-                }, dt);
-            }
-        };
-
-        var startFall = function(elem, height, stagger) {
-            var dx = settings.dx || Math.floor((Math.random()*10)) + 5;
-            if (fallToLeft) {
-                dx = -dx;
-            }
-            var copy = elem.clone();
-            copy.addClass('solitaire-victory-clone');
-            if (relativeToDocument) {
-                copy.css('position', 'absolute');
-            } else {
-                copy.css('position', 'fixed');
-            }
-            var originalOffset = elem.offset();
-            copy.offset({top: originalOffset.top, left: originalOffset.left});
-            body.append(copy);
-            setTimeout(function() {fallIteration(copy, height, copy.offset(), dx, 0);}, stagger);
-        };
-
-        if (clear) $('.solitaire-victory-clone').remove();
-
-        this.each(function(index) {
-            var obj = $(this);
-            if (relativeToDocument || obj.offset().top < $(window).height()) {
-                if (!obj.hasClass('solitaire-victory-clone')) {
-                    startFall(obj, obj.height(), index*stagger);
-                }
-            }
-        });
-    };
-
-}( jQuery ));
\ No newline at end of file

main.js

 let os = require('os');
 let child;
 let fails = 0;
-let goBinary = "./mainnet-commitments-ui.exe"; //or template.exe
+let goBinary = "./mainnet-commitments-ui"; //or template.exe
 
 function setPage(html) {
     const container = document.getElementById("app");
-    app.innerHTML = html;
+    container.innerHTML = html;
+
     // Set focus for autofocus element
     let elem = document.querySelector("input[autofocus]");
     if (elem != null) {
@@ -21,7 +22,7 @@ function start_process() {
     body_message("Loading...");
 
     const spawn = require('child_process').spawn;
-    child = spawn(goBinary, {maxBuffer: 1024 * 500});
+    child = spawn(goBinary);
 
     const readline = require('readline');
     const rl = readline.createInterface({
@@ -32,7 +33,7 @@ function start_process() {
         console.log(`Received: ${data}`);
 
         if (data.charAt(0) === "$") {
-            data = data.substr(1);
+            data = data.substring(1);
             eval(data);
         } else {
             setPage(data);
@@ -49,7 +50,7 @@ function start_process() {
     });
 
     child.on('error', (err) => {
-        body_message('Failed to start child process.');
+        body_message('Failed to start child process: ' + err);
         restart_process();
     });
 }
@@ -103,7 +104,7 @@ function fire_event(name, sender) {
     console.log(JSON.stringify(msg));
 }
 
-function fire_keypressed_event(e, keycode, name, sender) {
+function fire_keyPressed_event(e, keycode, name, sender) {
     if (e.keyCode === keycode) {
         e.preventDefault();
         fire_event(name, sender);