add cex onboarding page

ui/page/dcrdex/dcrdex_page.go

@@ -42,7 +42,7 @@ func NewDEXPage(l *load.Load) *DEXPage {
 	}
 
 	dp.initSplashPageWidgets()
-	dp.navigateToSettingsBtn = dp.Theme.Button(values.StringF(values.StrEnableAPI, values.String(values.StrDex)))
+	dp.navigateToSettingsBtn = dp.Theme.Button(values.String(values.StrStartTrading))
 	return dp
 }
 

ui/page/exchange/cex_splash_page.go

@@ -0,0 +1,71 @@
+package exchange
+
+import (
+	"gioui.org/font"
+	"gioui.org/layout"
+
+	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
+	"github.com/crypto-power/cryptopower/ui/modal"
+	"github.com/crypto-power/cryptopower/ui/page/components"
+	"github.com/crypto-power/cryptopower/ui/renderers"
+	"github.com/crypto-power/cryptopower/ui/values"
+)
+
+func (pg *CreateOrderPage) initSplashPageWidgets() {
+	_, pg.splashPageInfoButton = components.SubpageHeaderButtons(pg.Load)
+	pg.enableDEXBtn = pg.Theme.Button(values.String(values.StrBack))
+}
+
+func (pg *CreateOrderPage) splashPage(gtx layout.Context) layout.Dimensions {
+	return cryptomaterial.LinearLayout{
+		Orientation: layout.Vertical,
+		Width:       cryptomaterial.MatchParent,
+		Height:      cryptomaterial.WrapContent,
+		Background:  pg.Theme.Color.Surface,
+		Direction:   layout.Center,
+		Alignment:   layout.Middle,
+		Border:      cryptomaterial.Border{Radius: cryptomaterial.Radius(14)},
+		Padding:     layout.UniformInset(values.MarginPadding24),
+	}.Layout(gtx,
+		layout.Flexed(1, func(gtx C) D {
+			return layout.Stack{Alignment: layout.NE}.Layout(gtx,
+				layout.Expanded(func(gtx C) D {
+					return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
+						layout.Rigid(func(gtx C) D {
+							return pg.Theme.Icons.GovernanceActiveIcon.LayoutSize(gtx, values.MarginPadding150)
+						}),
+						layout.Rigid(func(gtx C) D {
+							txt := pg.Theme.Label(values.TextSize24, values.String(values.StrWhatIsDex))
+							txt.Font.Weight = font.SemiBold
+
+							return layout.Inset{
+								Top:    values.MarginPadding30,
+								Bottom: values.MarginPadding16,
+							}.Layout(gtx, txt.Layout)
+						}),
+						layout.Rigid(func(gtx C) D {
+							text := values.StringF(values.StrDexContent, `<span style="text-color: gray">`, `<br>`, `</span>`)
+							return renderers.RenderHTML(text, pg.Theme).Layout(gtx)
+						}),
+					)
+				}),
+				layout.Stacked(pg.splashPageInfoButton.Layout),
+			)
+		}),
+		layout.Rigid(func(gtx C) D {
+			gtx.Constraints.Min.X = gtx.Dp(values.MarginPadding350)
+			return layout.Inset{
+				Top:   values.MarginPadding24,
+				Right: values.MarginPadding16,
+			}.Layout(gtx, pg.navToSettingsBtn.Layout)
+		}),
+	)
+}
+
+func (pg *CreateOrderPage) showInfoModal() {
+	info := modal.NewCustomModal(pg.Load).
+		Title(values.String(values.StrDecentralized)).
+		Body(values.String(values.StrDexInfo)).
+		SetPositiveButtonText(values.String(values.StrGotIt))
+	pg.ParentWindow().ShowModal(info)
+}

ui/page/exchange/create_order_page.go

@@ -79,6 +79,8 @@ type CreateOrderPage struct {
 	refreshIcon            *cryptomaterial.Image
 	viewAllButton          cryptomaterial.Button
 	navToSettingsBtn       cryptomaterial.Button
+	splashPageInfoButton   cryptomaterial.IconButton
+	enableDEXBtn           cryptomaterial.Button
 
 	min          float64
 	max          float64
@@ -128,6 +130,9 @@ func NewCreateOrderPage(l *load.Load) *CreateOrderPage {
 		refreshIcon:      l.Theme.Icons.Restore,
 	}
 
+	pg.initSplashPageWidgets()
+	pg.navToSettingsBtn = pg.Theme.Button(values.String(values.StrStartTrading))
+
 	// pageSize defines the number of orders that can be fetched at ago.
 	pageSize := int32(5)
 	pg.scroll = components.NewScroll(l, pageSize, pg.fetchOrders)
@@ -260,6 +265,10 @@ func (pg *CreateOrderPage) OnNavigatedTo() {
 	}
 }
 
+func (pg *CreateOrderPage) isExchangeAPIAllowed() bool {
+	return pg.WL.AssetsManager.IsHTTPAPIPrivacyModeOff(libutils.ExchangeHTTPAPI)
+}
+
 // initPage initializes required data on this page and should be called only
 // once after it has been displayed.
 func (pg *CreateOrderPage) initPage() {
@@ -336,6 +345,10 @@ func (pg *CreateOrderPage) HandleUserInteractions() {
 		pg.ParentWindow().ShowModal(info)
 	}
 
+	if pg.splashPageInfoButton.Button.Clicked() {
+		pg.showInfoModal()
+	}
+
 	for _, evt := range pg.fromAmountEditor.Edit.Editor.Events() {
 		if pg.fromAmountEditor.Edit.Editor.Focused() {
 			switch evt.(type) {
@@ -615,13 +628,13 @@ func (pg *CreateOrderPage) swapCurrency() {
 	pg.updateExchangeConfig()
 }
 
-func (pg *CreateOrderPage) isExchangeAPIAllowed() bool {
-	isAllowed := pg.WL.AssetsManager.IsHTTPAPIPrivacyModeOff(libutils.ExchangeHTTPAPI)
-	if !isAllowed {
-		pg.errMsg = values.StringF(values.StrNotAllowed, values.String(values.StrExchange))
-	}
-	return isAllowed
-}
+// func (pg *CreateOrderPage) isExchangeAPIAllowed() bool {
+// 	isAllowed := pg.WL.AssetsManager.IsHTTPAPIPrivacyModeOff(libutils.ExchangeHTTPAPI)
+// 	if !isAllowed {
+// 		pg.errMsg = values.StringF(values.StrNotAllowed, values.String(values.StrExchange))
+// 	}
+// 	return isAllowed
+// }
 
 // isMultipleAssetTypeWalletAvailable checks if multiple asset types are
 // available for exchange functionality to run smoothly. Otherwise exchange
@@ -662,10 +675,10 @@ func (pg *CreateOrderPage) Layout(gtx C) D {
 		msg = values.String(values.StrNoExchangeOnTestnet)
 		overlaySet = true
 
-	case !pg.isExchangeAPIAllowed():
-		msg = pg.errMsg
-		navBtn = &pg.navToSettingsBtn
-		overlaySet = true
+	// case !pg.isExchangeAPIAllowed():
+	// 	msg = pg.errMsg
+	// 	navBtn = &pg.navToSettingsBtn
+	// 	overlaySet = true
 
 	case !pg.isMultipleAssetTypeWalletAvailable():
 		msg = pg.errMsg
@@ -684,10 +697,11 @@ func (pg *CreateOrderPage) Layout(gtx C) D {
 		Direction: layout.Center,
 	}.Layout2(gtx, func(gtx C) D {
 		return cryptomaterial.LinearLayout{
-			Width:     gtx.Dp(values.MarginPadding600),
+			Width:     cryptomaterial.MatchParent,
 			Height:    cryptomaterial.MatchParent,
 			Alignment: layout.Middle,
-			Padding:   layout.Inset{Top: values.MarginPadding20},
+			Direction: layout.Center,
+			Padding:   layout.Inset{Top: values.MarginPadding0},
 		}.Layout2(gtx, func(gtx C) D {
 			overlay := layout.Stacked(func(gtx C) D { return D{} })
 			if overlaySet {
@@ -704,6 +718,9 @@ func (pg *CreateOrderPage) Layout(gtx C) D {
 }
 
 func (pg *CreateOrderPage) layout(gtx C) D {
+	if !pg.isExchangeAPIAllowed() {
+		return components.UniformPadding(gtx, pg.splashPage)
+	}
 	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
 			return layout.Inset{

ui/values/localizable/en.go

@@ -163,7 +163,7 @@ const EN = `
 "dcrDex" = "DCRDEX"
 "dcrReceived" = "You have received %s DCR"
 "debug" = "Debug"
-"decentralized" = "Decentralized Exchange (DEX)
+"decentralized" = "Decentralized Exchange (DEX)"
 "default" = "default"
 "delete" = "Delete"
 "descriptionNote" = "Description Note"
@@ -175,7 +175,7 @@ const EN = `
 "dex" = "Dex"
 "dexDataReset" = "DEX client data reset complete."
 "dexDataResetFalse" = "DEX client data reset failed. Check the logs."
-"dexContent" = "%vThe Decred Decentralized Exchange (DEX) is a system that enables exchange of different types of blockchain assets via a familiar market-based API. DEX uses atomic swap technology to match trading parties and facilitates price discovery while communicating swap details.%v"
+"dexContent" = "%vThe Decred Decentralized Exchange (DEX) is a system that enables exchange of different types of blockchain assets via a familiar market-based API. DEX uses atomic swap technology to match trading parties and facilitates price discovery while communicating swap details.%vWould you like to trade on Decred DEX%v"
 "dexInfo" = "Customization and notification of trading can be modified from the settings page"
 "dexResetInfo" = "You may need to restart cryptopower before you can use the DEX again. Proceed?"
 "dexStartupErr" = "Unable to start DEX client: %v"
@@ -567,6 +567,7 @@ const EN = `
 "staking" = "Staking"
 "stakingActivity" = "Staking Activities"
 "start" = "Start"
+"startTrading" = "Start Trading"
 "startupPassConfirm" = "Startup password changed"
 "startupPassword" = "Startup Password"
 "startupPasswordEnabled" = "Startup password %v"

ui/values/strings.go

@@ -677,6 +677,7 @@ const (
 	StrStaking                         = "staking"
 	StrStakingActivity                 = "stakingActivity"
 	StrStart                           = "start"
+	StrStartTrading                    = "startTrading"
 	StrStartupPassConfirm              = "startupPassConfirm"
 	StrStartupPassword                 = "startupPassword"
 	StrStartupPasswordEnabled          = "startupPasswordEnabled"