improve dex screens on mobile

libwallet/assets_manager.go

@@ -21,6 +21,7 @@ import (
 	"github.com/crypto-power/cryptopower/libwallet/instantswap"
 	"github.com/crypto-power/cryptopower/libwallet/internal/politeia"
 	"github.com/crypto-power/cryptopower/libwallet/utils"
+	libutils "github.com/crypto-power/cryptopower/libwallet/utils"
 	"github.com/crypto-power/cryptopower/ui/notification"
 	"github.com/crypto-power/cryptopower/ui/values"
 	bolt "go.etcd.io/bbolt"
@@ -980,8 +981,8 @@ func (mgr *AssetsManager) DEXDBExists() bool {
 // initialized first so the DEX client can bind previously added wallets when it
 // starts.
 func (mgr *AssetsManager) InitializeDEX() {
-	// Ignore attempts to InitializeDEX on mobile.
-	if appos.Current().IsMobile() {
+	// Ignore attempts to InitializeDEX on iOS.
+	if appos.Current().IsIOS() {
 		return
 	}
 
@@ -1109,3 +1110,29 @@ func (mgr *AssetsManager) BadgerDB() string {
 func (mgr *AssetsManager) BoltDB() string {
 	return BoltDB
 }
+
+// AssetToCreate checks if there is any asset type that has not been created
+// and returns the first one.
+func (mgr *AssetsManager) AssetToCreate() libutils.AssetType {
+	assetToCreate := mgr.AllAssetTypes()
+	wallets := mgr.AllWallets()
+
+	assetsNotCreated := make([]libutils.AssetType, 0)
+
+	for _, asset := range assetToCreate {
+		assetExists := false
+
+		for _, wallet := range wallets {
+			if wallet.GetAssetType() == asset {
+				assetExists = true
+				break
+			}
+		}
+
+		if !assetExists {
+			assetsNotCreated = append(assetsNotCreated, asset)
+		}
+	}
+
+	return assetsNotCreated[0]
+}

ui/cryptomaterial/icon_gallery.go

@@ -25,7 +25,8 @@ type Icons struct {
 	SimpleSwapIcon, SwapzoneIcon, ShapeShiftIcon, GodexIcon, CoinSwitchIcon, ChangeNowIcon, TrocadorIcon,
 	LTCBackground, LTCGroupIcon, DCRBackground, LogoDCRSlide, BTCBackground, BTCGroupIcon, CrossPlatformIcon,
 	IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchangeIcon, FilterImgIcon, FilterOffImgIcon, ShareIcon,
-	CircleBTC, CircleLTC, CircleDCR, TelegramIcon, MatrixIcon, WebsiteIcon, TwitterIcon, OrangeAlert, ImportedAccountIcon *Image
+	CircleBTC, CircleLTC, CircleDCR, TelegramIcon, MatrixIcon, WebsiteIcon, TwitterIcon, OrangeAlert, ImportedAccountIcon,
+	StakeyImage *Image
 
 	TicketImmatureIcon,
 	TicketLiveIcon,
@@ -183,6 +184,7 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.MatrixIcon = NewImage(decredIcons["ic_matrix"])
 	i.WebsiteIcon = NewImage(decredIcons["ic_www"])
 	i.TwitterIcon = NewImage(decredIcons["logo_twitter"])
+	i.StakeyImage = NewImage(decredIcons["stakey_deal_with_it"])
 
 	return i
 }

ui/modal/info_modal.go

@@ -259,6 +259,8 @@ func (in *InfoModal) SetupWithTemplate(template string) *InfoModal {
 		customTemplate = totalValueInfo(in.Theme)
 	case BondStrengthInfoTemplate:
 		customTemplate = bondStrengthInfo(in.Theme)
+	case StakeyImageTemplate:
+		customTemplate = stakeyImage(in.Theme)
 	}
 
 	in.dialogTitle = title

ui/modal/info_modal_layouts.go

@@ -24,6 +24,7 @@ const (
 	SourceModalInfoTemplate        = "SourceModalInfo"
 	TotalValueInfoTemplate         = "TotalValueInfo"
 	BondStrengthInfoTemplate       = "BondStrengthInfo"
+	StakeyImageTemplate            = "StakeyImage"
 )
 
 func verifyMessageInfo(th *cryptomaterial.Theme) []layout.Widget {
@@ -129,3 +130,13 @@ func bondStrengthInfo(th *cryptomaterial.Theme) []layout.Widget {
 		renderers.RenderHTML(text, th).Layout,
 	}
 }
+
+func stakeyImage(th *cryptomaterial.Theme) []layout.Widget {
+	return []layout.Widget{
+		func(gtx C) D {
+			return layout.Center.Layout(gtx, func(gtx C) D {
+				return th.Icons.StakeyImage.LayoutSize(gtx, values.MarginPadding200)
+			})
+		},
+	}
+}

ui/page/dcrdex/dcrdex_page.go

@@ -7,6 +7,7 @@ import (
 	"gioui.org/widget/material"
 	"github.com/crypto-power/cryptopower/app"
 	"github.com/crypto-power/cryptopower/libwallet"
+	sharedW "github.com/crypto-power/cryptopower/libwallet/assets/wallet"
 	libutils "github.com/crypto-power/cryptopower/libwallet/utils"
 	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
 	"github.com/crypto-power/cryptopower/ui/load"
@@ -26,13 +27,13 @@ type DEXPage struct {
 
 	*load.Load
 
-	openTradeMainPage    *cryptomaterial.Clickable
-	splashPageInfoButton cryptomaterial.IconButton
-	splashPageContainer  *widget.List
-	startTradingBtn      cryptomaterial.Button
-	showSplashPage       bool
-	dexIsLoading         bool
-	materialLoader       material.LoaderStyle
+	openTradeMainPage   *cryptomaterial.Clickable
+	splashPageContainer *widget.List
+	startTradingBtn     cryptomaterial.Button
+	createWalletBtn     cryptomaterial.Button
+	showSplashPage      bool
+	dexIsLoading        bool
+	materialLoader      material.LoaderStyle
 }
 
 func NewDEXPage(l *load.Load) *DEXPage {
@@ -41,6 +42,7 @@ func NewDEXPage(l *load.Load) *DEXPage {
 		Load:              l,
 		openTradeMainPage: l.Theme.NewClickable(false),
 		startTradingBtn:   l.Theme.Button(values.String(values.StrStartTrading)),
+		createWalletBtn:   l.Theme.Button(values.String(values.StrCreateANewWallet)),
 		splashPageContainer: &widget.List{List: layout.List{
 			Alignment: layout.Middle,
 			Axis:      layout.Vertical,
@@ -53,8 +55,6 @@ func NewDEXPage(l *load.Load) *DEXPage {
 		dp.showSplashPage = false
 	}
 
-	// Init splash page more info widget.
-	_, dp.splashPageInfoButton = components.SubpageHeaderButtons(l)
 	return dp
 }
 
@@ -124,7 +124,7 @@ func (pg *DEXPage) Layout(gtx C) D {
 	}
 
 	if hasMultipleWallets := pg.isMultipleAssetTypeWalletAvailable(); !hasMultipleWallets {
-		return components.DisablePageWithOverlay(pg.Load, nil, gtx, values.String(values.StrMultipleAssetRequiredMsg), "", nil)
+		return components.DisablePageWithOverlay(pg.Load, nil, gtx, values.String(values.StrMultipleAssetRequiredMsg), "", &pg.createWalletBtn)
 	}
 
 	return pg.CurrentPage().Layout(gtx)
@@ -153,9 +153,7 @@ func (pg *DEXPage) HandleUserInteractions(gtx C) {
 	if pg.CurrentPage() != nil {
 		pg.CurrentPage().HandleUserInteractions(gtx)
 	}
-	if pg.splashPageInfoButton.Button.Clicked(gtx) {
-		pg.showInfoModal()
-	}
+
 	if pg.startTradingBtn.Button.Clicked(gtx) {
 		if !pg.AssetsManager.DEXDBExists() && !pg.AssetsManager.DEXCInitialized() {
 			// Attempt to initialize dex again.
@@ -168,6 +166,13 @@ func (pg *DEXPage) HandleUserInteractions(gtx C) {
 			}()
 		}
 	}
+
+	if pg.createWalletBtn.Button.Clicked(gtx) {
+		assetToCreate := pg.AssetsManager.AssetToCreate()
+		pg.ParentWindow().Display(components.NewCreateWallet(pg.Load, func(_ sharedW.Asset) {
+			pg.walletCreationSuccessFunc()
+		}, assetToCreate))
+	}
 }
 
 // OnNavigatedFrom is called when the page is about to be removed from the
@@ -196,3 +201,9 @@ func pendingBondConfirmation(am *libwallet.AssetsManager, host string) (string,
 	}
 	return "", nil, nil
 }
+
+func (pg *DEXPage) walletCreationSuccessFunc() {
+	pg.OnNavigatedTo()
+	pg.ParentWindow().CloseCurrentPage()
+	pg.ParentWindow().Reload()
+}

ui/page/dcrdex/dex_onboarding_page.go

@@ -19,6 +19,7 @@ import (
 	"gioui.org/widget/material"
 
 	"github.com/crypto-power/cryptopower/app"
+	"github.com/crypto-power/cryptopower/appos"
 	"github.com/crypto-power/cryptopower/dexc"
 	sharedW "github.com/crypto-power/cryptopower/libwallet/assets/wallet"
 	libutils "github.com/crypto-power/cryptopower/libwallet/utils"
@@ -269,15 +270,16 @@ func (pg *DEXOnboarding) Layout(gtx C) D {
 		return D{}
 	}
 
+	padding := layout.Inset{
+		Right: dp10,
+		Left:  dp10,
+	}
 	return cryptomaterial.LinearLayout{
-		Width:       cryptomaterial.MatchParent,
+		Width:       cryptomaterial.WrapContent,
 		Height:      cryptomaterial.MatchParent,
 		Orientation: layout.Vertical,
 		Background:  pg.Theme.Color.Surface,
-		Margin: layout.Inset{
-			Right: dp20,
-			Left:  dp20,
-		},
+		Padding:     padding,
 		Border: cryptomaterial.Border{
 			Radius: cryptomaterial.Radius(8),
 		},
@@ -295,8 +297,10 @@ func (pg *DEXOnboarding) Layout(gtx C) D {
 					return pg.Theme.Separator().Layout(gtx)
 				}),
 				layout.Rigid(func(gtx C) D {
-					gtx.Constraints.Max.X = gtx.Dp(formWidth)
-					gtx.Constraints.Min.X = gtx.Constraints.Max.X
+					if !appos.Current().IsMobile() {
+						gtx.Constraints.Max.X = gtx.Dp(formWidth)
+						gtx.Constraints.Min.X = gtx.Constraints.Max.X
+					}
 					return pg.onBoardingSteps[pg.currentStep].stepFn(gtx)
 				}),
 			)
@@ -328,7 +332,9 @@ func (pg *DEXOnboarding) onBoardingStepRow(gtx C) D {
 				layout.Stacked(func(gtx C) D {
 					dp30 := values.MarginPadding30
 					sep := pg.Theme.Separator()
-					sep.Width = gtx.Dp(values.MarginPadding500)
+					if !appos.Current().IsMobile() {
+						sep.Width = gtx.Dp(values.MarginPadding500)
+					}
 					sep.Height = gtx.Dp(values.MarginPadding3)
 					return layout.Inset{Bottom: values.MarginPadding35, Right: dp30, Left: dp30}.Layout(gtx, sep.Layout)
 				}),
@@ -1132,7 +1138,11 @@ func (pg *DEXOnboarding) setAddServerStep() {
 	}
 
 	pg.serverDropDown = pg.Theme.DropDown(dropdownServers, nil, values.DEXServerDropdownGroup, false)
-	pg.serverDropDown.Width = formWidth
+	width := formWidth
+	if appos.Current().IsMobile() {
+		width = values.MarginPadding280
+	}
+	pg.serverDropDown.Width = width
 	pg.serverDropDown.MakeCollapsedLayoutVisibleWhenExpanded = true
 
 	pg.currentStep = onBoardingStepAddServer

ui/page/dcrdex/dex_splash_page.go

@@ -6,7 +6,6 @@ import (
 	"gioui.org/text"
 
 	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
-	"github.com/crypto-power/cryptopower/ui/modal"
 	"github.com/crypto-power/cryptopower/ui/values"
 )
 
@@ -43,7 +42,6 @@ func (pg *DEXPage) splashPage(gtx C) D {
 							}),
 						)
 					}),
-					layout.Stacked(pg.splashPageInfoButton.Layout),
 				)
 			})
 		}),
@@ -61,11 +59,3 @@ func (pg *DEXPage) splashPage(gtx C) D {
 		}),
 	)
 }
-
-func (pg *DEXPage) showInfoModal() {
-	info := modal.NewCustomModal(pg.Load).
-		Title(values.String(values.StrDecentralized)).
-		Body(values.String(values.StrTradeSettingsMsg)).
-		SetPositiveButtonText(values.String(values.StrGotIt))
-	pg.ParentWindow().ShowModal(info)
-}