Skip to content

Commit

Permalink
fix lint and more refactor
Browse files Browse the repository at this point in the history 
Signed-off-by: Philemon Ukane <[email protected]>
  • Loading branch information
@ukane-philemon
ukane-philemon committed Nov 20, 2023
1 parent 4f4d3ba commit 715b7fc
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 74 deletions.
12 changes: 12 additions & 0 deletions ui/page/components/utils.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,3 +162,15 @@ func LayoutOrderAmount(l *load.Load, gtx C, assetType string, amount float64) D

return l.Theme.Label(values.TextSize16, convertedAmountStr).Layout(gtx)
}

// ImageIconWithClickable wraps a clickable with an icon to make iconLayout
// clickable. This is different from using clickable.Layout(gtx).
func ImageIconWithClickable(gtx C, inset layout.Inset, clickable *cryptomaterial.Clickable, iconLayout func(gtx C) D) D {
return inset.Layout(gtx, func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.WrapContent,
Height: cryptomaterial.WrapContent,
Clickable: clickable,
}.Layout2(gtx, iconLayout)
})
}
135 changes: 61 additions & 74 deletions ui/page/dcrdex/market.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ var (
Text: values.String(values.StrMarket),
},
}

vertical = layout.Vertical
horizontal = layout.Horizontal
)

type DEXMarketPage struct {
Expand Down Expand Up @@ -93,9 +96,9 @@ func NewDEXMarketPage(l *load.Load) *DEXMarketPage {
th := l.Theme
pg := &DEXMarketPage{
Load: l,
ordersContainer: &widget.List{List: layout.List{Axis: layout.Vertical, Alignment: layout.Middle}},
ordersContainer: &widget.List{List: layout.List{Axis: vertical, Alignment: layout.Middle}},
GenericPageModal: app.NewGenericPageModal(DEXAccountOnboardingID),
scrollContainer: &widget.List{List: layout.List{Axis: layout.Vertical, Alignment: layout.Middle}},
scrollContainer: &widget.List{List: layout.List{Axis: vertical, Alignment: layout.Middle}},
priceEditor: newTextEditor(l.Theme, values.String(values.StrPrice), "0", false),
totalEditor: newTextEditor(th, values.String(values.StrTotal), "", false),
switchLotsOrAmount: l.Theme.Switch(), // TODO: Set last user choice, default is unchecked.
Expand All @@ -111,7 +114,7 @@ func NewDEXMarketPage(l *load.Load) *DEXMarketPage {
openOrdersBtn: th.Button(values.String(values.StrOpenOrders)),
orderHistoryBtn: th.Button(values.String(values.StrTradeHistory)),
openOrdersDisplayed: true,
ordersTableHorizontalScroll: &widget.List{List: layout.List{Axis: layout.Horizontal, Alignment: layout.Middle}},
ordersTableHorizontalScroll: &widget.List{List: layout.List{Axis: horizontal, Alignment: layout.Middle}},
}

btnPadding := layout.Inset{Top: u8, Right: u20, Left: u20, Bottom: u8}
Expand Down Expand Up @@ -189,9 +192,9 @@ func (pg *DEXMarketPage) OnNavigatedTo() {
func (pg *DEXMarketPage) marketDropdownListItem(baseAsset, quoteAsset libutils.AssetType) func(gtx C) D {
baseIcon, quoteIcon := assetIcon(pg.Theme, baseAsset), assetIcon(pg.Theme, quoteAsset)
return func(gtx cryptomaterial.C) cryptomaterial.D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
if baseIcon == nil {
return D{}
Expand All @@ -207,7 +210,7 @@ func (pg *DEXMarketPage) marketDropdownListItem(baseAsset, quoteAsset libutils.A
return layout.Inset{Right: u2, Left: u2}.Layout(gtx, pg.Theme.Label(values.TextSize16, "/").Layout)
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
if quoteIcon == nil {
return D{}
Expand Down Expand Up @@ -268,7 +271,7 @@ func (pg *DEXMarketPage) Layout(gtx C) D {
return layout.Stack{}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return layout.Inset{Top: 110}.Layout(gtx, func(gtx C) D {
l := &layout.List{Axis: layout.Vertical}
l := &layout.List{Axis: vertical}
return l.Layout(gtx, len(pageContent), func(gtx C, i int) D {
return pageContent[i](gtx)
})
Expand All @@ -283,7 +286,7 @@ func (pg *DEXMarketPage) Layout(gtx C) D {
// addServerBtnDisplay returns a clickable button layout. The pg.addServerBtn
// will should open a modal or page to add a new server to DEX when clicked.
func (pg DEXMarketPage) addServerBtnDisplay(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
return layout.Flex{Axis: vertical}.Layout(gtx,
layout.Rigid(pg.Theme.Separator().Layout),
layout.Rigid(components.IconButton(pg.Theme.Icons.ContentAdd, values.String(values.StrAddServer),
layout.Inset{Top: u10, Bottom: u5, Left: values.MarginPadding8}, pg.Theme, pg.addServerBtn,
Expand All @@ -301,8 +304,8 @@ func (pg *DEXMarketPage) serverAndCurrencySelection(gtx C) D {
},
}.Layout(gtx,
layout.Flexed(0.5, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(gtx, values.String(values.StrServer)).Layout),
return layout.Flex{Axis: vertical}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(values.String(values.StrServer)).Layout),
layout.Rigid(func(gtx C) D {
pg.serverSelector.Background = &pg.Theme.Color.Surface
pg.serverSelector.BorderColor = &pg.Theme.Color.Gray5
Expand All @@ -312,8 +315,8 @@ func (pg *DEXMarketPage) serverAndCurrencySelection(gtx C) D {
}),
layout.Flexed(0.5, func(gtx C) D {
return layout.Inset{Left: values.MarginPadding60}.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical, Alignment: layout.End}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(gtx, values.String(values.StrCurrencyPair)).Layout),
return layout.Flex{Axis: vertical, Alignment: layout.End}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(values.String(values.StrCurrencyPair)).Layout),
layout.Rigid(func(gtx C) D {
pg.marketSelector.Background = &pg.Theme.Color.Surface
pg.marketSelector.BorderColor = &pg.Theme.Color.Gray5
Expand Down Expand Up @@ -385,20 +388,20 @@ func (pg *DEXMarketPage) priceAndVolumeDetail(gtx C) D {
}

func (pg *DEXMarketPage) priceAndVolumeColume(gtx C, title1 string, body1 func(gtx C) D, title2, body2 string) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
return layout.Flex{Axis: vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.WrapContent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Bottom: u20},
Orientation: layout.Vertical,
Orientation: vertical,
}.Layout(gtx,
layout.Rigid(semiBoldLabelGrey3(pg.Theme, title1).Layout),
layout.Rigid(body1),
)
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
return layout.Flex{Axis: vertical}.Layout(gtx,
layout.Rigid(semiBoldLabelGrey3(pg.Theme, title2).Layout),
layout.Rigid(pg.semiBoldLabelSize14(body2).Layout),
)
Expand All @@ -416,7 +419,7 @@ func (pg *DEXMarketPage) orderFormAndOrderBook(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Orientation: layout.Horizontal,
Orientation: horizontal,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.W.Layout(gtx, pg.orderForm)
Expand All @@ -438,34 +441,24 @@ func (pg *DEXMarketPage) orderForm(gtx C) D {
Border: cryptomaterial.Border{
Radius: cryptomaterial.Radius(8),
},
Orientation: layout.Vertical,
Orientation: vertical,
}.Layout2(gtx, func(gtx C) D {
return layout.Stack{Alignment: layout.NW}.Layout(gtx,
layout.Expanded(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Top: 70},
Orientation: layout.Vertical,
Orientation: vertical,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Bottom: u10, Top: u10},
Orientation: layout.Vertical,
}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(gtx, values.String(values.StrPrice)).Layout),
return orderFormRow(gtx, vertical, []layout.FlexChild{
layout.Rigid(pg.semiBoldLabelText(values.String(values.StrPrice)).Layout),
layout.Rigid(pg.priceEditor.Layout),
)
})
}),
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Bottom: u10, Top: u10},
Orientation: layout.Vertical,
}.Layout(gtx,
return orderFormRow(gtx, vertical, []layout.FlexChild{
layout.Rigid(func(gtx C) D {
return layout.Inset{Bottom: u5}.Layout(gtx, func(gtx C) D {
var labelText string
Expand All @@ -474,8 +467,8 @@ func (pg *DEXMarketPage) orderForm(gtx C) D {
} else {
labelText = values.String(values.StrLots)
}
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(gtx, labelText).Layout),
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(labelText).Layout),
layout.Flexed(1, func(gtx C) D {
return layout.E.Layout(gtx, pg.switchLotsOrAmount.Layout)
}),
Expand All @@ -497,60 +490,45 @@ func (pg *DEXMarketPage) orderForm(gtx C) D {
} else {
maxStr = values.StringF(values.StrMaxLots, 10)
}
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
return layout.E.Layout(gtx, pg.Theme.Label(values.TextSize12, maxStr).Layout)
}),
)
}),
)
})
}),
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Bottom: u10, Top: u10},
Orientation: layout.Vertical,
}.Layout(gtx,
return orderFormRow(gtx, vertical, []layout.FlexChild{
layout.Rigid(func(gtx C) D {
return layout.Inset{Bottom: u5}.Layout(gtx, pg.semiBoldLabelText(gtx, values.String(values.StrTotal)).Layout)
return layout.Inset{Bottom: u5}.Layout(gtx, pg.semiBoldLabelText(values.String(values.StrTotal)).Layout)
}),
layout.Rigid(pg.totalEditor.Layout),
)
})
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(semiBoldLabelGrey3(pg.Theme, values.String(values.StrEstimatedFee)).Layout),
layout.Rigid(pg.Theme.Label(values.TextSize16, pg.Printer.Sprintf("%f %s", 0.0023434, "DCR" /* TODO: use real value */)).Layout),
)
}),
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Bottom: u10, Top: u10},
Orientation: layout.Horizontal,
}.Layout(gtx,
return orderFormRow(gtx, horizontal, []layout.FlexChild{
layout.Rigid(pg.immediateOrder.Layout),
layout.Rigid(func(gtx C) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.WrapContent,
Height: cryptomaterial.WrapContent,
Clickable: pg.immediateMoreInfo,
Padding: layout.Inset{Top: u10, Left: u2},
}.Layout2(gtx, pg.Theme.Icons.InfoAction.Layout16dp)
}),
return components.ImageIconWithClickable(gtx, layout.Inset{Top: u10, Left: u2}, pg.immediateMoreInfo, pg.Theme.Icons.InfoAction.Layout16dp)
})},
)
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx,
return layout.Flex{Axis: horizontal, Alignment: layout.Middle}.Layout(gtx,
layout.Flexed(1, pg.createOrderBtn.Layout),
)
}),
)
}),
layout.Stacked(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(pg.toggleBuyAndSellBtn.Layout),
layout.Flexed(1, func(gtx C) D {
pg.orderTypesDropdown.Background = &pg.Theme.Color.Surface
Expand All @@ -562,6 +540,15 @@ func (pg *DEXMarketPage) orderForm(gtx C) D {
})
}

func orderFormRow(gtx C, orientation layout.Axis, children []layout.FlexChild) D {
return cryptomaterial.LinearLayout{
Width: cryptomaterial.MatchParent,
Height: cryptomaterial.WrapContent,
Margin: layout.Inset{Bottom: u10, Top: u10},
Orientation: orientation,
}.Layout(gtx, children...)
}

func (pg *DEXMarketPage) orderbook(gtx C) D {
// TODO: Use real values
makeOrderBookBuyOrSell := func(sell bool) []layout.FlexChild {
Expand Down Expand Up @@ -592,12 +579,12 @@ func (pg *DEXMarketPage) orderbook(gtx C) D {
Margin: layout.Inset{Top: u5, Bottom: u5},
Padding: layout.UniformInset(u16),
Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(8)},
Orientation: layout.Vertical,
Orientation: vertical,
Direction: layout.Center,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(gtx, values.String(values.StrOrderBooks)).Layout),
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(pg.semiBoldLabelText(values.String(values.StrOrderBooks)).Layout),
layout.Flexed(1, func(gtx C) D {
return layout.E.Layout(gtx, pg.seeFullOrderBookBtn.Layout)
}),
Expand All @@ -613,7 +600,7 @@ func (pg *DEXMarketPage) orderbook(gtx C) D {
})
}),
layout.Flexed(0.5, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx, makeOrderBookBuyOrSell(true)...)
return layout.Flex{Axis: vertical}.Layout(gtx, makeOrderBookBuyOrSell(true)...)
}),
layout.Rigid(func(gtx C) D {
return layout.Inset{Top: u5, Bottom: u10}.Layout(gtx, func(gtx C) D {
Expand All @@ -627,7 +614,7 @@ func (pg *DEXMarketPage) orderbook(gtx C) D {
Padding: layout.Inset{Top: u5, Bottom: u5, Right: u16, Left: u16},
Border: cryptomaterial.Border{Radius: cryptomaterial.Radius(16)},
Direction: layout.Center,
Orientation: layout.Horizontal,
Orientation: horizontal,
}.Layout2(gtx, func(gtx C) D {
// TODO: Fetch rate for the base asset from DEX server and exchange rate from rate source!
fiatRate := 34000.00
Expand All @@ -644,12 +631,12 @@ func (pg *DEXMarketPage) orderbook(gtx C) D {
})
}),
layout.Flexed(0.5, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx, makeOrderBookBuyOrSell(false)...)
return layout.Flex{Axis: vertical}.Layout(gtx, makeOrderBookBuyOrSell(false)...)
}),
)
}

func (pg *DEXMarketPage) semiBoldLabelText(gtx C, title string) cryptomaterial.Label {
func (pg *DEXMarketPage) semiBoldLabelText(title string) cryptomaterial.Label {
lb := pg.Theme.Label(values.TextSize16, title)
lb.Font.Weight = font.SemiBold
lb.Color = pg.Theme.Color.Text
Expand Down Expand Up @@ -736,7 +723,7 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D {
Border: cryptomaterial.Border{
Radius: cryptomaterial.Radius(8),
},
Orientation: layout.Vertical,
Orientation: vertical,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
gr2 := pg.Theme.Color.Gray2
Expand All @@ -752,7 +739,7 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D {
pg.orderHistoryBtn.Background = gr2
pg.orderHistoryBtn.Color = pg.Theme.Color.GrayText1
}
return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
return layout.Flex{Axis: horizontal}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Inset{Left: u5, Right: u10}.Layout(gtx, pg.openOrdersBtn.Layout)
}),
Expand All @@ -763,9 +750,9 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D {
return pg.Theme.List(pg.ordersTableHorizontalScroll).Layout(gtx, 1, func(gtx C, index int) D {
gtx.Constraints.Max.X = gtx.Dp(sectionWidth)
gtx.Constraints.Min.X = gtx.Constraints.Max.X
return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
return layout.Flex{Axis: vertical, Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal, Spacing: layout.SpaceBetween, Alignment: layout.Middle}.Layout(gtx, headersFn...)
return layout.Flex{Axis: horizontal, Spacing: layout.SpaceBetween, Alignment: layout.Middle}.Layout(gtx, headersFn...)
}),
layout.Rigid(func(gtx C) D {
if len(orders) == 0 {
Expand All @@ -780,7 +767,7 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D {

return pg.Theme.List(pg.ordersContainer).Layout(gtx, len(orders), func(gtx C, index int) D {
ord := orders[index]
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
return layout.Flex{Axis: vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
if index == 0 {
sep := pg.Theme.Separator()
Expand All @@ -790,7 +777,7 @@ func (pg *DEXMarketPage) openOrdersAndHistory(gtx C) D {
return D{}
}),
layout.Rigid(func(gtx C) D {
return layout.Flex{Axis: layout.Horizontal, Spacing: layout.SpaceBetween, Alignment: layout.Middle}.Layout(gtx,
return layout.Flex{Axis: horizontal, Spacing: layout.SpaceBetween, Alignment: layout.Middle}.Layout(gtx,
pg.orderColumn(false, ord.ordType, columnWidth),
pg.orderColumn(false, ord.market, columnWidth),
pg.orderColumn(false, ord.age, columnWidth),
Expand Down Expand Up @@ -831,7 +818,7 @@ func (pg *DEXMarketPage) orderColumn(header bool, txt string, columnWidth unit.D
return cryptomaterial.LinearLayout{
Width: gtx.Dp(columnWidth),
Height: cryptomaterial.WrapContent,
Orientation: layout.Horizontal,
Orientation: horizontal,
Alignment: layout.Middle,
Padding: layout.Inset{Top: u16, Bottom: u16},
Direction: layout.Center,
Expand Down

0 comments on commit 715b7fc

Please sign in to comment.