Send page improvements (#672)

* show confirmation before deleeting recipient

* hide advanced options on the send modal to create more space

* fix coin selection not clickable

* remove send page title
reduce top and bottom paadding for single wallet menu
reduce padding betwen send page content

* make single wallet pag balance bar horizontal to make more space
on the send pag, make the total balance non sticky to create more screen space
fix bug where the block header being reported was incorrect on the sync disabled page

* fix hide button alignment
fix market overview background

* don't show bottom nav in wallet page

ui/page/governance/proposal_vote_modal.go

@@ -189,10 +189,10 @@ func (vm *voteModal) Handle(gtx C) {
 		vm.Dismiss()
 		selectedWallet, _ := vm.walletSelector.selectedWallet.(*dcr.Asset)
 		walletCallbackFunc := func() {
-			vm.ParentNavigator().CloseCurrentPage()
+			vm.ParentWindow().CloseCurrentPage()
 		}
 		swmp := wallet.NewSingleWalletMasterPage(vm.Load, selectedWallet, walletCallbackFunc)
-		vm.ParentNavigator().Display(swmp)
+		vm.ParentWindow().Display(swmp)
 		swmp.Display(staking.NewStakingPage(vm.Load, selectedWallet)) // Display staking page on the main page.]
 		swmp.PageNavigationTab.SetSelectedSegment(values.String(values.StrStaking))
 	}

ui/page/root/home_page.go

@@ -891,14 +891,14 @@ func (hp *HomePage) totalBalanceLayout(gtx C) D {
 
 func (hp *HomePage) balanceLayout(gtx C) D {
 	if hp.AssetsManager.ExchangeRateFetchingEnabled() && totalBalanceUSD != "" {
-		return layout.Flex{}.Layout(gtx,
+		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(hp.LayoutUSDBalance),
 			layout.Rigid(func(gtx C) D {
 				icon := hp.Theme.Icons.VisibilityOffIcon
 				if hp.isBalanceHidden {
 					icon = hp.Theme.Icons.VisibilityIcon
 				}
-				return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
+				return layout.Inset{}.Layout(gtx, func(gtx C) D {
 					return hp.hideBalanceButton.Layout(gtx, hp.Theme.NewIcon(icon).Layout24dp)
 				})
 			}),

ui/page/root/overview_page.go

@@ -260,10 +260,10 @@ func (pg *OverviewPage) HandleUserInteractions(gtx C) {
 		pg.showNavigationFunc(true)
 		walletCallbackFunc := func() {
 			pg.showNavigationFunc(false)
-			pg.ParentNavigator().CloseCurrentPage()
+			pg.ParentWindow().CloseCurrentPage()
 		}
 		swmp := wallet.NewSingleWalletMasterPage(pg.Load, selectedWallet, walletCallbackFunc)
-		pg.ParentNavigator().Display(swmp)
+		pg.ParentWindow().Display(swmp)
 		swmp.Display(privacy.NewAccountMixerPage(pg.Load, selectedWallet)) // Display mixer page on the main page.
 		swmp.PageNavigationTab.SetSelectedSegment(values.String(values.StrStakeShuffle))
 	}
@@ -276,10 +276,10 @@ func (pg *OverviewPage) HandleUserInteractions(gtx C) {
 			pg.showNavigationFunc(true)
 			callback := func() {
 				pg.showNavigationFunc(false)
-				pg.ParentNavigator().CloseCurrentPage()
+				pg.ParentWindow().CloseCurrentPage()
 			}
 			swmp := wallet.NewSingleWalletMasterPage(pg.Load, info.GetWallet(), callback)
-			pg.ParentNavigator().Display(swmp)
+			pg.ParentWindow().Display(swmp)
 		}
 	}
 }
@@ -697,7 +697,7 @@ func (pg *OverviewPage) mobileMarketOverview(gtx C) D {
 						card := pg.Theme.Card()
 						radius := cryptomaterial.CornerRadius{TopLeft: 20, BottomLeft: 20, TopRight: 20, BottomRight: 20}
 						card.Radius = cryptomaterial.Radius(8)
-						card.Color = pg.Theme.Color.DefaultThemeColors().SurfaceHighlight
+						card.Color = pg.Theme.Color.DefaultThemeColors().Surface
 						if pg.AssetsManager.IsDarkModeOn() {
 							card.Color = pg.Theme.Color.DefaultThemeColors().Background
 						}

ui/page/root/wallet_selector_page.go

@@ -184,9 +184,9 @@ func (pg *WalletSelectorPage) HandleUserInteractions(gtx C) {
 		pg.showNavigationFunc(true)
 
 		callback := func() {
-			pg.ParentNavigator().CloseCurrentPage()
+			pg.ParentWindow().CloseCurrentPage()
 		}
-		pg.ParentNavigator().Display(wallet.NewSingleWalletMasterPage(pg.Load, selectedWallet, callback))
+		pg.ParentWindow().Display(wallet.NewSingleWalletMasterPage(pg.Load, selectedWallet, callback))
 	}
 
 	for _, walletsOfType := range pg.badWalletsList {

ui/page/send/layout.go

@@ -76,6 +76,22 @@ func (pg *Page) contentLayout(gtx C) D {
 		}
 	}
 
+	// Prevent total balance section from being sticky on mobile, this creates more view area.
+	if pg.IsMobileView() {
+		pageContent = append(pageContent, pg.balanceSection)
+		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+			layout.Rigid(func(gtx C) D {
+				return pg.Theme.List(pg.pageContainer).Layout(gtx, len(pageContent), func(gtx C, i int) D {
+					mp := values.MarginPaddingTransform(pg.IsMobileView(), values.MarginPadding8)
+					if i == len(pageContent)-1 {
+						mp = values.MarginPadding0
+					}
+					return layout.Inset{Bottom: mp}.Layout(gtx, pageContent[i])
+				})
+			}),
+		)
+	}
+
 	cgtx := gtx
 	macro := op.Record(cgtx.Ops)
 	dims := pg.balanceSection(cgtx)
@@ -87,7 +103,7 @@ func (pg *Page) contentLayout(gtx C) D {
 	return layout.Stack{Alignment: layout.S}.Layout(gtx,
 		layout.Expanded(func(gtx C) D {
 			return pg.Theme.List(pg.pageContainer).Layout(gtx, len(pageContent), func(gtx C, i int) D {
-				mp := values.MarginPaddingTransform(pg.IsMobileView(), values.MarginPadding32)
+				mp := values.MarginPaddingTransform(pg.IsMobileView(), values.MarginPadding8)
 				if i == len(pageContent)-1 {
 					mp = values.MarginPadding0
 				}
@@ -107,20 +123,23 @@ func (pg *Page) sendLayout(gtx C) D {
 	return pg.sectionWrapper(gtx, func(gtx C) D {
 		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
+				if pg.hideWalletDropdown { // Hide title while on the send page
+					return D{}
+				}
 				return layout.Inset{
-					Bottom: values.MarginPadding16,
+					Bottom: values.MarginPadding8,
 				}.Layout(gtx, pg.titleLayout)
 			}),
 			layout.Rigid(func(gtx C) D {
 				if pg.hideWalletDropdown {
 					return D{}
 				}
-				return layout.Inset{Bottom: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
+				return layout.Inset{Bottom: values.MarginPadding8}.Layout(gtx, func(gtx C) D {
 					return pg.walletDropdown.Layout(gtx, values.String(values.StrSourceWallet))
 				})
 			}),
 			layout.Rigid(func(gtx C) D {
-				return layout.Inset{Top: values.MarginPadding16}.Layout(gtx, func(gtx C) D {
+				return layout.Inset{Top: values.MarginPadding0}.Layout(gtx, func(gtx C) D {
 					return pg.accountDropdown.Layout(gtx, values.String(values.StrSourceAccount))
 				})
 			}),
@@ -129,7 +148,7 @@ func (pg *Page) sendLayout(gtx C) D {
 }
 
 func (pg *Page) titleLayout(gtx C) D {
-	return layout.Flex{}.Layout(gtx,
+	return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
 			return layout.Inset{Right: values.MarginPadding6}.Layout(gtx, func(gtx C) D {
 				lbl := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize20), values.String(values.StrSend))
@@ -215,6 +234,9 @@ func (pg *Page) notSyncedLayout(gtx C) D {
 }
 
 func (pg *Page) advanceOptionsLayout(gtx C) D {
+	if pg.hideAdvancedOptions { // Hide advanced options on the send modal to create more space
+		return D{}
+	}
 	marginMinus32 := values.MarginPadding0
 	if pg.modalLayout != nil {
 		marginMinus32 = values.MarginPaddingMinus32

ui/page/send/page.go

@@ -46,9 +46,10 @@ type Page struct {
 
 	pageContainer *widget.List
 
-	walletDropdown     *components.WalletDropdown
-	accountDropdown    *components.AccountDropdown
-	hideWalletDropdown bool
+	walletDropdown  *components.WalletDropdown
+	accountDropdown *components.AccountDropdown
+
+	hideWalletDropdown, hideAdvancedOptions bool
 
 	// recipient  *recipient
 	recipients []*recipient
@@ -107,8 +108,7 @@ type selectedUTXOsInfo struct {
 
 func NewSendPage(l *load.Load, wallet sharedW.Asset) *Page {
 	pg := &Page{
-		Load: l,
-
+		Load:              l,
 		authoredTxData:    &authoredTxData{},
 		exchangeRate:      -1,
 		navigateToSyncBtn: l.Theme.Button(values.String(values.StrStartSync)),
@@ -123,10 +123,12 @@ func NewSendPage(l *load.Load, wallet sharedW.Asset) *Page {
 		pg.modalLayout = l.Theme.ModalFloatTitle(values.String(values.StrSend), pg.IsMobileView(), nil)
 		pg.GenericPageModal = pg.modalLayout.GenericPageModal
 		pg.hideWalletDropdown = false
+		pg.hideAdvancedOptions = true
 	} else {
 		pg.GenericPageModal = app.NewGenericPageModal(SendPageID)
 		pg.selectedWallet = wallet
 		pg.hideWalletDropdown = true
+		pg.hideAdvancedOptions = false
 	}
 	pg.initModalWalletSelector(wallet) // will auto select the first wallet in the dropdown as pg.selectedWallet
 	callbackFunc := func() libUtil.AssetType {
@@ -146,7 +148,7 @@ func (pg *Page) addRecipient() {
 	if pg.selectedWallet == nil {
 		return
 	}
-	rc := newRecipient(pg.Load, pg.selectedWallet, pg.pageFields, pg.currentIDRecipient)
+	rc := newRecipient(pg.Load, pg.selectedWallet, pg.pageFields, pg.currentIDRecipient, pg.ParentWindow())
 	rc.onAddressChanged(func() {
 		pg.validateAndConstructTx()
 	})
@@ -539,7 +541,7 @@ func (pg *Page) getDestinationAddresses() []string {
 	for i := range pg.recipients {
 		recipient := pg.recipients[i]
 		destinationAddress := recipient.destinationAddress()
-		if destinationAddress != "" && recipient.isSendToAddress() {
+		if destinationAddress != "" {
 			addresses = append(addresses, destinationAddress)
 		}
 	}
@@ -601,12 +603,8 @@ func (pg *Page) HandleUserInteractions(gtx C) {
 	// }
 
 	if pg.toCoinSelection.Clicked(gtx) {
-		if len(pg.getDestinationAddresses()) == len(pg.recipients) {
-			if pg.modalLayout != nil {
-				pg.ParentWindow().ShowModal(NewManualCoinSelectionPage(pg.Load, pg))
-			} else {
-				pg.ParentNavigator().Display(NewManualCoinSelectionPage(pg.Load, pg))
-			}
+		if (len(pg.getDestinationAddresses()) == len(pg.recipients)) || !pg.recipients[0].isSendToAddress() {
+			pg.ParentNavigator().Display(NewManualCoinSelectionPage(pg.Load, pg))
 		}
 	}
 

ui/page/send/recipient.go

@@ -7,17 +7,20 @@ import (
 	"gioui.org/layout"
 	"gioui.org/widget"
 
+	"github.com/crypto-power/cryptopower/app"
 	sharedW "github.com/crypto-power/cryptopower/libwallet/assets/wallet"
 	libUtil "github.com/crypto-power/cryptopower/libwallet/utils"
 	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
 	"github.com/crypto-power/cryptopower/ui/load"
+	"github.com/crypto-power/cryptopower/ui/modal"
 	"github.com/crypto-power/cryptopower/ui/values"
 )
 
 type recipient struct {
 	*load.Load
 	id int
 
+	navigator   app.WindowNavigator
 	deleteBtn   *cryptomaterial.Clickable
 	description cryptomaterial.Editor
 
@@ -30,9 +33,10 @@ type recipient struct {
 	deleteRecipient func(int)
 }
 
-func newRecipient(l *load.Load, selectedWallet sharedW.Asset, pageParam getPageFields, id int) *recipient {
+func newRecipient(l *load.Load, selectedWallet sharedW.Asset, pageParam getPageFields, id int, navigator app.WindowNavigator) *recipient {
 	rp := &recipient{
 		Load:           l,
+		navigator:      navigator,
 		selectedWallet: selectedWallet,
 		pageParam:      pageParam,
 		id:             id,
@@ -251,7 +255,7 @@ func (rp *recipient) topLayout(gtx C, index int) D {
 		layout.Rigid(titleTxt.Layout),
 		layout.Flexed(1, func(gtx C) D {
 			return layout.E.Layout(gtx, func(gtx C) D {
-				return rp.deleteBtn.Layout(gtx, rp.Theme.NewIcon(rp.Theme.Icons.ChevronLeft).Layout20dp)
+				return rp.deleteBtn.Layout(gtx, rp.Theme.NewIcon(rp.Theme.Icons.DeleteIcon).Layout20dp)
 			})
 		}),
 	)
@@ -380,7 +384,9 @@ func (rp *recipient) handle(gtx C) {
 	}
 
 	if rp.deleteBtn.Clicked(gtx) {
-		rp.deleteRecipient(rp.id)
+		title := values.String(values.StrRemoveRecipient)
+		msg := values.String(values.StrRemoveRecipientWarning)
+		rp.showWarningModalDialog(title, msg)
 	}
 
 	// if destination switch is equal to Address
@@ -410,3 +416,21 @@ func (rp *recipient) handle(gtx C) {
 		}
 	}
 }
+
+func (rp *recipient) showWarningModalDialog(title, msg string) {
+	warningModal := modal.NewCustomModal(rp.Load).
+		Title(title).
+		Body(msg).
+		SetNegativeButtonText(values.String(values.StrCancel)).
+		SetNegativeButtonCallback(func() {
+
+		}).
+		SetNegativeButtonText(values.String(values.StrCancel)).
+		PositiveButtonStyle(rp.Theme.Color.Surface, rp.Theme.Color.Danger).
+		SetPositiveButtonText(values.String(values.StrRemove)).
+		SetPositiveButtonCallback(func(_ bool, _ *modal.InfoModal) bool {
+			rp.deleteRecipient(rp.id)
+			return true
+		})
+	rp.navigator.ShowModal(warningModal)
+}

ui/page/wallet/single_wallet_main_page.go

@@ -249,7 +249,7 @@ func (swmp *SingleWalletMasterPage) initTabOptions() {
 	swmp.PageNavigationTab.ContentPadding = layout.Inset{
 		Left:  dp5,
 		Right: dp5,
-		Top:   values.MarginPaddingTransform(swmp.IsMobileView(), values.MarginPadding32),
+		Top:   values.MarginPaddingTransform(swmp.IsMobileView(), values.MarginPadding16),
 	}
 }
 
@@ -493,8 +493,8 @@ func (swmp *SingleWalletMasterPage) Layout(gtx C) D {
 				layout.Rigid(swmp.LayoutTopBar),
 				layout.Rigid(func(gtx C) D {
 					return layout.Inset{
-						Top:    values.MarginPadding24,
-						Bottom: values.MarginPadding16,
+						Top:    values.MarginPadding0,
+						Bottom: values.MarginPadding0,
 					}.Layout(gtx, func(gtx C) D {
 						return swmp.PageNavigationTab.Layout(gtx, func(gtx C) D {
 							if swmp.CurrentPage() == nil {
@@ -507,7 +507,7 @@ func (swmp *SingleWalletMasterPage) Layout(gtx C) D {
 								// Disable page functionality if a page is not synced or rescanning is in progress.
 								if swmp.selectedWallet.IsSyncing() {
 									syncInfo := components.NewWalletSyncInfo(swmp.Load, swmp.selectedWallet, func() {}, func(_ sharedW.Asset) {})
-									blockHeightFetched := values.StringF(values.StrBlockHeaderFetchedCount, swmp.selectedWallet.GetBestBlock().Height, syncInfo.FetchSyncProgress().HeadersToFetchOrScan)
+									blockHeightFetched := values.StringF(values.StrBlockHeaderFetchedCount, swmp.selectedWallet.GetBestBlock().Height, syncInfo.FetchSyncProgress().HeadersToFetchOrScan())
 									title := values.String(values.StrFunctionUnavailable)
 									subTitle := fmt.Sprintf("%s "+blockHeightFetched, values.String(values.StrBlockHeaderFetched))
 									return components.DisablePageWithOverlay(swmp.Load, swmp.CurrentPage(), gtx,

ui/values/localizable/en.go

@@ -951,4 +951,6 @@ const EN = `
 "restrictDetail" = "Restriction Detail"
 "rateUnavailable" = "The rate unavailable this time, please reset it later in settings."
 "privacy" = "Privacy"
+"removeRecipient" = "Remove recipient"
+"removeRecipientWarning" = "Are you sure you want to proceed with removing the recipient?"
 `

ui/values/strings.go

@@ -1060,4 +1060,6 @@ const (
 	StrRestrictedDetail                      = "restrictDetail"
 	StrRateUnavailable                       = "rateUnavailable"
 	StrPrivacy                               = "privacy"
+	StrRemoveRecipient                       = "removeRecipient"
+	StrRemoveRecipientWarning                = "removeRecipientWarning"
 )