feat: toggle between QRCode and deep-link

Co-authored-by: Tasos Bitsios <[email protected]>

ui/modals/info/info.go

@@ -78,12 +78,12 @@ func (m *ViewModel) UpdateState() {
 
 	if accountStatus == "Online" && m.Active {
 		m.BorderColor = "1"
-		m.Controls = "( take " + style.Red.Render(style.Red.Render("(o)ffline")) + " )"
+		m.Controls = "( " + style.Red.Render(style.Red.Render("take (o)ffline")) + " )"
 	}
 
 	if !m.Active {
 		m.BorderColor = "3"
-		m.Controls = "( " + style.Red.Render("(d)elete") + " | " + style.Green.Render("(r)egister") + " online )"
+		m.Controls = "( " + style.Red.Render("(d)elete") + " | " + style.Green.Render("(r)egister online") + " )"
 	}
 }
 func (m ViewModel) View() string {

ui/modals/transaction/controller.go

@@ -2,10 +2,12 @@ package transaction
 
 import (
 	"encoding/base64"
+
 	"github.com/algorand/go-algorand-sdk/v2/types"
 	"github.com/algorandfoundation/algourl/encoder"
 	"github.com/algorandfoundation/nodekit/internal/algod"
 	"github.com/algorandfoundation/nodekit/ui/app"
+	"github.com/algorandfoundation/nodekit/ui/style"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
@@ -34,7 +36,14 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (*ViewModel, tea.Cmd) {
 			return &m, app.EmitModalEvent(app.ModalEvent{
 				Type: app.CancelModal,
 			})
+		case "s":
+			if m.IsQREnabled() {
+				m.ShowLink = !m.ShowLink
+				m.UpdateState()
+				return &m, nil
+			}
 		}
+
 	// Handle View Size changes
 	case tea.WindowSizeMsg:
 		m.Width = msg.Width
@@ -43,6 +52,7 @@ func (m ViewModel) HandleMessage(msg tea.Msg) (*ViewModel, tea.Cmd) {
 	m.UpdateState()
 	return &m, cmd
 }
+
 func (m *ViewModel) Account() *algod.Account {
 	if m.Participation == nil || m.State == nil || m.State.Accounts == nil {
 		return nil
@@ -69,7 +79,25 @@ func (m *ViewModel) ShouldAddIncentivesFee() bool {
 	return m.State != nil && !m.State.IncentivesDisabled && !m.Active && m.IsIncentiveProtocol() && !m.Account().IncentiveEligible
 }
 
+func (m *ViewModel) GetControlText() string {
+	escLegend := style.Red.Render("(esc) go back")
+	if m.IsQREnabled() {
+		otherView := "link"
+		if m.ShowLink {
+			otherView = "QR"
+		}
+		return "( " + style.Yellow.Render("(s)how "+otherView) + " | " + escLegend + " )"
+	}
+	return "( " + escLegend + " )"
+}
+
 func (m *ViewModel) UpdateState() {
+	controlText := m.GetControlText()
+	if m.Controls != m.GetControlText() {
+		// TODO BUG: the controls do not re-render when changed
+		m.Controls = controlText
+	}
+
 	if m.Participation == nil {
 		return
 	}

ui/modals/transaction/model.go

@@ -31,6 +31,8 @@ type ViewModel struct {
 	Controls    string
 	navigation  string
 
+	ShowLink bool
+
 	// QR Code
 	ATxn *encoder.AUrlTxn
 }
@@ -39,15 +41,21 @@ func (m ViewModel) FormatedAddress() string {
 	return fmt.Sprintf("%s...%s", m.Participation.Address[0:4], m.Participation.Address[len(m.Participation.Address)-4:])
 }
 
+func (m ViewModel) IsQREnabled() bool {
+	return true // TODO
+	// return m.State.Status.Network == "testnet-v1.0" || m.State.Status.Network == "mainnet-v1.0"
+}
+
 // New creates and instance of the ViewModel with a default controls.Model
 func New(state *algod.StateModel) *ViewModel {
 	return &ViewModel{
 		State:       state,
 		Title:       "Offline Transaction",
+		ShowLink:    true,
 		IsOnline:    false,
 		BorderColor: "9",
 		navigation:  "| accounts | keys | " + style.Green.Render("txn") + " |",
-		Controls:    "( " + style.Red.Render("esc") + " )",
+		Controls:    "",
 		ATxn:        nil,
 	}
 }

ui/modals/transaction/view.go

@@ -2,6 +2,7 @@ package transaction
 
 import (
 	"fmt"
+
 	"github.com/algorandfoundation/nodekit/internal/algod/participation"
 	"github.com/algorandfoundation/nodekit/ui/style"
 	"github.com/charmbracelet/lipgloss"
@@ -15,11 +16,6 @@ func (m ViewModel) View() string {
 	if m.ATxn == nil || m.Link == nil {
 		return "Loading..."
 	}
-	// TODO: Refactor ATxn to Interface
-	txn, err := m.ATxn.ProduceQRCode()
-	if err != nil {
-		return "Something went wrong"
-	}
 
 	var adj string
 	isOffline := m.ATxn.AUrlTxnKeyreg.VotePK == nil
@@ -28,72 +24,73 @@ func (m ViewModel) View() string {
 	} else {
 		adj = "online"
 	}
+
 	intro := fmt.Sprintf("Sign this transaction to register your account as %s", adj)
-	link := participation.ToShortLink(*m.Link, m.ShouldAddIncentivesFee())
-	loraText := lipgloss.JoinVertical(
-		lipgloss.Center,
-		"Open this URL in your browser:\n",
-		style.WithHyperlink(link, link),
-	)
+	render := intro
+
+	if !m.ShowLink {
+		render = lipgloss.JoinVertical(
+			lipgloss.Center,
+			render,
+			style.Green.Render("Scan the QR code with Pera")+" or "+style.Yellow.Render("press S to show a link instead"),
+		)
+	}
 
 	if m.ShouldAddIncentivesFee() {
-		loraText = lipgloss.JoinVertical(
+		render = lipgloss.JoinVertical(
 			lipgloss.Center,
-			loraText,
+			render,
 			"",
-			"Note: Transction fee set to 2 ALGO",
-			"for staking rewards eligibility",
+			style.Bold("Note: Transction fee set to 2 ALGO (opting in to rewards)"),
 		)
 	}
 
 	if isOffline {
-		loraText = lipgloss.JoinVertical(
+		render = lipgloss.JoinVertical(
 			lipgloss.Center,
-			loraText,
+			render,
 			"",
-			"Note: this will take effect after 320 rounds (~15 min.)",
+			style.Bold("Note: this will take effect after 320 rounds (~15 min.)"),
 			"Please keep your node running during this cooldown period.",
 		)
 	}
 
-	var render string
-	if m.State.Status.Network == "testnet-v1.0" {
+	if m.ShowLink {
+		link := participation.ToShortLink(*m.Link, m.ShouldAddIncentivesFee())
 		render = lipgloss.JoinVertical(
 			lipgloss.Center,
-			intro,
+			render,
 			"",
-			"Scan the QR code with Pera or Defly",
-			style.Yellow.Render("(make sure you use the "+m.State.Status.Network+" network)"),
+			"Open this URL in your browser:",
 			"",
-			qrStyle.Render(txn),
-			"-or-",
+			style.WithHyperlink(link, link),
 			"",
-			loraText,
 		)
 	} else {
+		// TODO: Refactor ATxn to Interface
+		txn, err := m.ATxn.ProduceQRCode()
+		if err != nil {
+			return "Something went wrong"
+		}
 		render = lipgloss.JoinVertical(
 			lipgloss.Center,
-			"",
-			intro,
-			"",
-			loraText,
-			"",
+			render,
+			qrStyle.Render(txn),
 		)
 	}
 
 	width := lipgloss.Width(render)
 	height := lipgloss.Height(render)
 
-	if width > m.Width || height > m.Height {
+	if !m.ShowLink && (width > m.Width || height > m.Height) {
 		return lipgloss.JoinVertical(
 			lipgloss.Center,
 			intro,
 			"",
-			style.Red.Render(ansi.Wordwrap("Mobile QR is available but it does not fit on screen.", m.Width, " ")),
-			style.Red.Render(ansi.Wordwrap("Adjust terminal dimensions or font size to display.", m.Width, " ")),
+			style.Red.Render(ansi.Wordwrap("QR code is available but it does not fit on screen.", m.Width, " ")),
+			style.Red.Render(ansi.Wordwrap("Adjust terminal dimensions/font size to display.", m.Width, " ")),
 			"",
-			"-or-",
-			loraText,
+			ansi.Wordwrap("Or press S to switch to Link view.", m.Width, " "),
 		)
 	}
 

ui/viewport.go

@@ -133,8 +133,8 @@ func (m ViewportViewModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		m.PageHeight = max(0, msg.Height-lipgloss.Height(m.headerView()))
 
 		modalMsg := tea.WindowSizeMsg{
-			Width:  m.PageWidth,
-			Height: m.PageHeight,
+			Width:  msg.Width,
+			Height: msg.Height,
 		}
 
 		m.modal, cmd = m.modal.HandleMessage(modalMsg)