add dex onboarding page

ui/page/dcrdex/dcrdex_page.go

@@ -5,8 +5,11 @@ import (
 
 	"gioui.org/layout"
 	"github.com/crypto-power/cryptopower/app"
+	libutils "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/page/components"
+	"github.com/crypto-power/cryptopower/ui/values"
 )
 
 const DCRDEXID = "DCRDEXID"
@@ -24,8 +27,11 @@ type DEXPage struct {
 	ctx       context.Context // page context
 	ctxCancel context.CancelFunc
 
-	openTradeMainPage *cryptomaterial.Clickable
-	inited            bool // TODO: Set value
+	openTradeMainPage     *cryptomaterial.Clickable
+	splashPageInfoButton  cryptomaterial.IconButton
+	enableDEXBtn          cryptomaterial.Button
+	navigateToSettingsBtn cryptomaterial.Button
+	inited                bool // TODO: Set value
 }
 
 func NewDEXPage(l *load.Load) *DEXPage {
@@ -34,6 +40,9 @@ func NewDEXPage(l *load.Load) *DEXPage {
 		MasterPage:        app.NewMasterPage(DCRDEXID),
 		openTradeMainPage: l.Theme.NewClickable(false),
 	}
+
+	dp.initSplashPageWidgets()
+	dp.navigateToSettingsBtn = dp.Theme.Button(values.StringF(values.StrEnableAPI, values.String(values.StrDex)))
 	return dp
 }
 
@@ -59,10 +68,17 @@ func (pg *DEXPage) OnNavigatedTo() {
 	pg.CurrentPage().OnNavigatedTo()
 }
 
+func (pg *DEXPage) isExchangeAPIAllowed() bool {
+	return pg.WL.AssetsManager.IsHTTPAPIPrivacyModeOff(libutils.ExchangeHTTPAPI)
+}
+
 // Layout draws the page UI components into the provided layout context to be
 // eventually drawn on screen.
 // Part of the load.Page interface.
 func (pg *DEXPage) Layout(gtx C) D {
+	if !pg.isExchangeAPIAllowed() {
+		return components.UniformPadding(gtx, pg.splashPage)
+	}
 	return layout.Stack{}.Layout(gtx,
 		layout.Expanded(func(gtx C) D {
 			return cryptomaterial.LinearLayout{
@@ -87,6 +103,9 @@ func (pg *DEXPage) HandleUserInteractions() {
 	if pg.CurrentPage() != nil {
 		pg.CurrentPage().HandleUserInteractions()
 	}
+	if pg.splashPageInfoButton.Button.Clicked() {
+		pg.showInfoModal()
+	}
 }
 
 // OnNavigatedFrom is called when the page is about to be removed from the

ui/page/dcrdex/dex_splash_page.go

@@ -0,0 +1,72 @@
+package dcrdex
+
+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 *DEXPage) initSplashPageWidgets() {
+	_, pg.splashPageInfoButton = components.SubpageHeaderButtons(pg.Load)
+	pg.enableDEXBtn = pg.Theme.Button(values.String(values.StrBack))
+}
+
+
+func (pg *DEXPage) 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.navigateToSettingsBtn.Layout)
+		}),
+	)
+}
+
+func (pg *DEXPage) 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/values/localizable/en.go

@@ -163,6 +163,7 @@ const EN = `
 "dcrDex" = "DCRDEX"
 "dcrReceived" = "You have received %s DCR"
 "debug" = "Debug"
+"decentralized" = "Decentralized Exchange (DEX)
 "default" = "default"
 "delete" = "Delete"
 "descriptionNote" = "Description Note"
@@ -174,6 +175,8 @@ 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"
+"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"
 "disable" = "Disable"
@@ -731,6 +734,7 @@ const EN = `
 "weeksAgo" = "%d weeks ago"
 "welcomeNote" = "Welcome to Cryptopower Wallet."
 "whatToCallWallet" = "What would you like to call your wallet?"
+"whatIsDex" = "What is Decred Decentralized Exchange?"
 "word" = "Word"
 "writeDownAll33Words" = "Write down all 33 words in the correct order."
 "writeDownSeed" = "Write down seed phrase"

ui/values/strings.go

@@ -273,6 +273,7 @@ const (
 	StrDcrDex                          = "dcrDex"
 	StrDcrReceived                     = "dcrReceived"
 	StrDebug                           = "debug"
+	StrDecentralized                   = "decentralized"
 	StrDefault                         = "default"
 	StrDeleted                         = "delete"
 	StrDescriptionNote                 = "descriptionNote"
@@ -282,8 +283,10 @@ const (
 	StrDestinationModalInfo            = "destinationModalInfo"
 	StrDestinationWalletNotSynced      = "destinationWalletNotSynced"
 	StrDex                             = "dex"
+	StrDexContent                      = "dexContent"
 	StrDexDataReset                    = "dexDataReset"
 	StrDexDataResetFalse               = "dexDataResetFalse"
+	StrDexInfo                         = "dexInfo"
 	StrDexResetInfo                    = "dexResetInfo"
 	StrDexStartupErr                   = "dexStartupErr"
 	StrDisable                         = "disable"
@@ -840,6 +843,7 @@ const (
 	StrWeekAgo                         = "weekAgo"
 	StrWeeksAgo                        = "weeksAgo"
 	StrWelcomeNote                     = "welcomeNote"
+	StrWhatIsDex                       = "whatIsDex"
 	StrWhatToCallWallet                = "whatToCallWallet"
 	StrWord                            = "word"
 	StrWriteDownAll33Words             = "writeDownAll33Words"