From 72dc5c12b4af3b5f612cc587e4fc5d3b309b8f62 Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Thu, 9 Nov 2023 22:56:18 +0700
Subject: [PATCH 1/9] update staking info section

---
 ui/cryptomaterial/progressbar.go  |  14 +++
 ui/page/components/utils.go       |  19 +++-
 ui/page/staking/stake_info.go     | 148 ++++++++++++++++--------------
 ui/page/staking/stake_overview.go |   2 +-
 ui/values/localizable/en.go       |   2 +
 ui/values/strings.go              |   2 +
 6 files changed, 114 insertions(+), 73 deletions(-)

diff --git a/ui/cryptomaterial/progressbar.go b/ui/cryptomaterial/progressbar.go
index 1260f7e0b..ced1963c9 100644
--- a/ui/cryptomaterial/progressbar.go
+++ b/ui/cryptomaterial/progressbar.go
@@ -235,6 +235,20 @@ func (mp *MultiLayerProgressBar) Layout(gtx C, labelWdg layout.Widget) D {
 	)
 }
 
+func (mp *MultiLayerProgressBar) Layout2(gtx C, labelWdg layout.Widget) D {
+	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+		layout.Rigid(func(gtx C) D {
+			if mp.ShowLedger {
+				return labelWdg(gtx)
+			}
+			return D{}
+		}),
+		layout.Rigid(func(gtx C) D {
+			return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
+		}),
+	)
+}
+
 func (t *Theme) ProgressBarCirle(progress int) ProgressCircleStyle {
 	return ProgressCircleStyle{ProgressCircleStyle: material.ProgressCircle(t.Base, float32(progress)/100)}
 }
diff --git a/ui/page/components/utils.go b/ui/page/components/utils.go
index f6ecb72c7..a2fdc81dc 100644
--- a/ui/page/components/utils.go
+++ b/ui/page/components/utils.go
@@ -112,22 +112,33 @@ func checksumByte(data []byte) byte {
 }
 
 func LayoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA) D {
+	return layoutIconAndText(l, gtx, title, val, col, values.TextSize14, values.MarginPadding8)
+}
+
+func LayoutIconAndTextWithSize(l *load.Load, gtx C, title string, val string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
+	return layoutIconAndText(l, gtx, title, val, col, size, iconSize)
+}
+
+func layoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
 	return layout.Inset{Right: values.MarginPadding12}.Layout(gtx, func(gtx C) D {
 		return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
-				return layout.Inset{Right: values.MarginPadding5, Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
+				return layout.Inset{
+					Right: values.MarginPadding5,
+					Top:   values.MarginPadding10,
+				}.Layout(gtx, func(gtx C) D {
 					ic := cryptomaterial.NewIcon(l.Theme.Icons.ImageBrightness1)
 					ic.Color = col
-					return ic.Layout(gtx, values.MarginPadding8)
+					return ic.Layout(gtx, iconSize)
 				})
 			}),
 			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(values.TextSize14, title)
+				txt := l.Theme.Label(size, title)
 				txt.Color = l.Theme.Color.GrayText2
 				return txt.Layout(gtx)
 			}),
 			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(values.TextSize14, val)
+				txt := l.Theme.Label(size, val)
 				txt.Color = l.Theme.Color.GrayText2
 				return txt.Layout(gtx)
 			}),
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index 9087b073d..fe13ce393 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -3,6 +3,7 @@ package staking
 import (
 	"fmt"
 
+	"gioui.org/font"
 	"gioui.org/layout"
 
 	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
@@ -19,9 +20,55 @@ func (pg *Page) initStakePriceWidget() *Page {
 	return pg
 }
 
+func (pg *Page) pageHead(gtx C) D {
+	txt := pg.Theme.Label(values.TextSize20, values.String(values.StrStakingInfo))
+	txt.Font.Weight = font.SemiBold
+	isWatchWallet := pg.WL.SelectedWallet.Wallet.IsWatchingOnlyWallet()
+	return layout.Inset{
+		Bottom: values.MarginPadding24,
+	}.Layout(gtx, func(gtx C) D {
+		return layout.Flex{Spacing: layout.SpaceBetween}.Layout(gtx,
+			layout.Rigid(txt.Layout),
+			layout.Rigid(func(gtx C) D {
+				return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+					layout.Rigid(func(gtx C) D {
+						if !isWatchWallet {
+							title := pg.Theme.Label(values.TextSize16, values.String(values.StrStake))
+							title.Color = pg.Theme.Color.GrayText2
+							return title.Layout(gtx)
+						}
+						return D{}
+					}),
+					layout.Rigid(func(gtx C) D {
+						if !isWatchWallet {
+							return layout.Inset{
+								Right: values.MarginPadding24,
+								Left:  values.MarginPadding8,
+							}.Layout(gtx, pg.stake.Layout)
+						}
+						return D{}
+					}),
+					layout.Rigid(func(gtx C) D {
+						icon := pg.Theme.Icons.HeaderSettingsIcon
+						// Todo -- darkmode icons
+						// if pg.ticketBuyerWallet.IsAutoTicketsPurchaseActive() {
+						// 	icon = pg.Theme.Icons.SettingsInactiveIcon
+						// }
+						if !isWatchWallet {
+							return pg.stakeSettings.Layout(gtx, icon.Layout24dp)
+						}
+						return D{}
+					}),
+				)
+			}),
+		)
+	})
+}
+
 func (pg *Page) stakePriceSection(gtx C) D {
 	return pg.pageSections(gtx, func(gtx C) D {
 		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+			layout.Rigid(pg.pageHead),
 			layout.Rigid(func(gtx C) D {
 				return layout.Inset{
 					Bottom: values.MarginPadding11,
@@ -47,68 +94,30 @@ func (pg *Page) stakePriceSection(gtx C) D {
 											return components.LayoutBalanceSize(gtx, pg.Load, pg.ticketPrice, values.TextSize16)
 										})
 									}),
-									layout.Rigid(func(gtx C) D {
-										return layout.Inset{
-											Left:  values.MarginPadding8,
-											Right: values.MarginPadding4,
-										}.Layout(gtx, pg.Theme.Icons.TimerIcon.Layout12dp)
-									}),
-									layout.Rigid(func(gtx C) D {
-										secs, _ := pg.dcrImpl.NextTicketPriceRemaining()
-										txt := pg.Theme.Label(values.TextSize16, nextTicketRemaining(int(secs)))
-										txt.Color = col
-
-										if pg.WL.SelectedWallet.Wallet.IsSyncing() {
-											txt.Text = values.String(values.StrSyncingState)
-										}
-										return txt.Layout(gtx)
-									}),
 								)
 							}),
-							pg.dataRows(values.String(values.StrLiveTickets), pg.ticketOverview.Live),
-							pg.dataRows(values.String(values.StrCanBuy), pg.CalculateTotalTicketsCanBuy()),
+							layout.Rigid(func(gtx C) D {
+								live := fmt.Sprintf("%d", pg.ticketOverview.Live)
+								return pg.dataRows(gtx, values.String(values.StrLiveTickets), live)
+							}),
 						)
 					}
 
 					rightWg := func(gtx C) D {
-						return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
-							layout.Rigid(func(gtx C) D {
-								title := pg.Theme.Label(values.TextSize16, values.String(values.StrStake))
-								title.Color = col
-								if !pg.WL.SelectedWallet.Wallet.IsWatchingOnlyWallet() {
-									return title.Layout(gtx)
-								}
-								return D{}
-							}),
-							layout.Rigid(func(gtx C) D {
-								if !pg.WL.SelectedWallet.Wallet.IsWatchingOnlyWallet() {
-									return layout.Inset{
-										Right: values.MarginPadding40,
-										Left:  values.MarginPadding4,
-									}.Layout(gtx, pg.stake.Layout)
-								}
-								return D{}
-							}),
+						return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 							layout.Rigid(func(gtx C) D {
-								icon := pg.Theme.Icons.HeaderSettingsIcon
-								// Todo -- darkmode icons
-								// if pg.ticketBuyerWallet.IsAutoTicketsPurchaseActive() {
-								// 	icon = pg.Theme.Icons.SettingsInactiveIcon
-								// }
-								if !pg.WL.SelectedWallet.Wallet.IsWatchingOnlyWallet() {
-									return pg.stakeSettings.Layout(gtx, icon.Layout24dp)
-								}
-								return D{}
+								secs, _ := pg.dcrImpl.NextTicketPriceRemaining()
+								timeleft := nextTicketRemaining(int(secs))
+								return pg.dataRows(gtx, values.String(values.StrLiveTickets), timeleft)
 							}),
 							layout.Rigid(func(gtx C) D {
-								pg.infoButton.Inset = layout.UniformInset(values.MarginPadding0)
-								pg.infoButton.Size = values.MarginPadding22
-								return layout.Inset{Left: values.MarginPadding10}.Layout(gtx, pg.infoButton.Layout)
+								canBuy := fmt.Sprintf("%d", pg.CalculateTotalTicketsCanBuy())
+								return pg.dataRows(gtx, values.String(values.StrCanBuy), canBuy)
 							}),
 						)
 					}
 
-					return layout.Flex{Axis: layout.Horizontal, Spacing: layout.SpaceBetween}.Layout(gtx,
+					return layout.Flex{Alignment: layout.Middle, Spacing: layout.SpaceBetween}.Layout(gtx,
 						layout.Rigid(leftWg),
 						layout.Rigid(rightWg),
 					)
@@ -119,24 +128,23 @@ func (pg *Page) stakePriceSection(gtx C) D {
 	})
 }
 
-func (pg *Page) dataRows(title string, count int) layout.FlexChild {
-	return layout.Rigid(func(gtx C) D {
-		return layout.Inset{Top: values.MarginPadding7}.Layout(gtx, func(gtx C) D {
-			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
-				layout.Rigid(func(gtx C) D {
-					label := pg.Theme.Label(values.TextSize16, title+":")
+func (pg *Page) dataRows(gtx C, title1, value1 string) D {
+	return layout.Inset{Top: values.MarginPadding7}.Layout(gtx, func(gtx C) D {
+		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+			layout.Rigid(func(gtx C) D {
+				label := pg.Theme.Label(values.TextSize16, title1+":")
+				label.Color = pg.Theme.Color.GrayText2
+				return label.Layout(gtx)
+			}),
+			layout.Rigid(func(gtx C) D {
+				return layout.Inset{Left: values.MarginPadding4}.Layout(gtx, func(gtx C) D {
+					label := pg.Theme.Label(values.TextSize16, value1)
 					label.Color = pg.Theme.Color.GrayText2
+					label.Font.Weight = font.SemiBold
 					return label.Layout(gtx)
-				}),
-				layout.Rigid(func(gtx C) D {
-					return layout.Inset{Left: values.MarginPadding4}.Layout(gtx, func(gtx C) D {
-						label := pg.Theme.Label(values.TextSize16, fmt.Sprintf("%d", count))
-						label.Color = pg.Theme.Color.GrayText2
-						return label.Layout(gtx)
-					})
-				}),
-			)
-		})
+				})
+			}),
+		)
 	})
 }
 
@@ -185,10 +193,14 @@ func (pg *Page) balanceProgressBarLayout(gtx C) D {
 		return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
 			return layout.Flex{}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, values.String(values.StrStaked)+": ", totalBalance.LockedByTickets.String(), items[0].Color)
+					title := values.String(values.StrStaked) + ": "
+					value := totalBalance.LockedByTickets.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, title, value, items[0].Color, values.TextSize16, values.MarginPadding10)
 				}),
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, values.String(values.StrLabelSpendable)+": ", totalBalance.Spendable.String(), items[1].Color)
+					title := values.String(values.StrLabelSpendable) + ": "
+					value := totalBalance.Spendable.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, title, value, items[1].Color, values.TextSize16, values.MarginPadding10)
 				}),
 			)
 		})
@@ -197,7 +209,7 @@ func (pg *Page) balanceProgressBarLayout(gtx C) D {
 	pb := pg.Theme.MultiLayerProgressBar(pg.WL.SelectedWallet.Wallet.ToAmount(total).ToCoin(), items)
 	pb.Height = values.MarginPadding16
 	pb.ShowLedger = true
-	return pb.Layout(gtx, labelWdg)
+	return pb.Layout2(gtx, labelWdg)
 }
 
 func (pg *Page) stakingRecordStatistics(gtx C) D {
diff --git a/ui/page/staking/stake_overview.go b/ui/page/staking/stake_overview.go
index 535bca80a..50696089b 100644
--- a/ui/page/staking/stake_overview.go
+++ b/ui/page/staking/stake_overview.go
@@ -243,7 +243,7 @@ func (pg *Page) pageSections(gtx C, body layout.Widget) D {
 	}.Layout(gtx, func(gtx C) D {
 		return pg.Theme.Card().Layout(gtx, func(gtx C) D {
 			gtx.Constraints.Min.X = gtx.Constraints.Max.X
-			return layout.UniformInset(values.MarginPadding26).Layout(gtx, body)
+			return layout.UniformInset(values.MarginPadding24).Layout(gtx, body)
 		})
 	})
 }
diff --git a/ui/values/localizable/en.go b/ui/values/localizable/en.go
index 3a36f8a0e..a0e359a36 100644
--- a/ui/values/localizable/en.go
+++ b/ui/values/localizable/en.go
@@ -790,4 +790,6 @@ const EN = `
 "assets" = "Assets"
 "noWalletsAvailable" = "You cannot spend from a watch only wallet, try creating another wallet."
 "createAssetWalletToSwapMsg" = "You need to create a %s wallet to swap."
+"stakingInfo" = "Staking Info"
+"timeLeftTit" = "Time Left"
 `
diff --git a/ui/values/strings.go b/ui/values/strings.go
index a6929f7aa..58a41dec1 100644
--- a/ui/values/strings.go
+++ b/ui/values/strings.go
@@ -900,4 +900,6 @@ const (
 	StrAssets                          = "assets"
 	StrNoWalletsAvailable              = "noWalletsAvailable"
 	StrCreateAssetWalletToSwapMsg      = "createAssetWalletToSwapMsg"
+	StrStakingInfo                     = "stakingInfo"
+	StrTimeLeftTit                     = "timeLeftTit"
 )

From b051f4f681290cd34fa9519dc7c67ebde38ed20c Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Fri, 10 Nov 2023 12:15:03 +0700
Subject: [PATCH 2/9] Add new layout for Statistics section and Update tikets
 section

---
 ui/assets/decredicons/ticket_immature.png | Bin 1134 -> 1115 bytes
 ui/assets/decredicons/ticket_unmined.png  | Bin 1355 -> 1188 bytes
 ui/assets/decredicons/ticket_voted.png    | Bin 1084 -> 1152 bytes
 ui/cryptomaterial/progressbar.go          |   2 +-
 ui/page/components/coinformat.go          |  24 +++++-
 ui/page/components/utils.go               |   3 +-
 ui/page/staking/stake_info.go             |   4 +-
 ui/page/staking/stake_list.go             |   5 +-
 ui/page/staking/stake_overview.go         |  17 ++--
 ui/page/staking/stake_statics.go          |  98 ++++++++++++++++++++++
 ui/values/localizable/en.go               |   1 +
 ui/values/strings.go                      |   1 +
 12 files changed, 136 insertions(+), 19 deletions(-)
 create mode 100644 ui/page/staking/stake_statics.go

diff --git a/ui/assets/decredicons/ticket_immature.png b/ui/assets/decredicons/ticket_immature.png
index b49902c9501fc3ed98592d187729eb403af89479..c661a4e9a1a4c57f5dea2fa489b0697f610d500b 100644
GIT binary patch
delta 1101
zcmV-T1hV_?2-^rYiBL{Q4GJ0x0000DNk~Le0000%0000$2nGNE07a`B-~a#s32;bR
za{vGqB>(^xB>_oNB=C_oAAbYzNkl<ZcmeI3|4!3T6vw~C&BTZV_yZC^K`@a&P=|^U
z|InHE0Qv;t6Ih-AcmTtE1AGG>zy$aUBOp^um<f=fU;=+I6bJ?w^_+E!`_XP)+fzoo
zpQO3j?QQ7&-gC}9r!9a&p-?Ck3JWy2M4vUf5XMxwF&F9(eREe^hkp;~bH)_iZI|77
z?G&-`2ijY>AOtTM_BX|xrV*jW7ZHdk{XP3z(a;E&)IpL8A~}VuAPPZ5MWEGr4nNTF
z5`xHD0-3PaRn!+L_OL4mA}s<l4lksk`{h=41R+9%tihEKbR7%u8o~r20;97KWZI4+
zct!xPR^*VNL|}9rV}EgY-Y6U7IEG|$f`9~IyyXeiLdlL{U_$?BjMA@Z%GBbt_5aGA
zy8|--Mi4N;ijc$1{DutF20^+*&7wqr5+Oq%F=1y5*xmq+kAO>;f%a}{>+Q#%(726N
zU~d-)Uo^*GX@VG{A{_1mOS3>~yRd(C3FzzvdheB9!vf5`2Y-I2{`IXV%&~lp1fuT1
zlPMM;2Tv@qP};w_RwzIY7LEmyKum;9GUvmC@?%&Cc9nd#epruXSK6@=)GJ~l@C2Q}
zu_7Oi0d|DK5J5}?4r)#)ww9Kw*5f#kHn&0qF%ftda0BlIoi_{nLS!A0#}GqocW9zj
zJ6x+guBD^2uYdPG(AHzdi!ixB>oqx7V8le=?d)d-5!l3e<*jIFGLIk-a|fP4-=O_@
z7GU5RY68(@iC39}Sz_MY-guu6Wivpw6t{81Z^YAPo@oCQXJa|H;AAP6U~yb&zfMOF
zL^+%12^MgAT^vJFTiIi~ylZ)-CaTDlFXe+MTgS>0#D5SMfw#HjGG&Hk(&6=QsL1z(
zT<sv{4t&F(W(o@^jt{&e<d@NVDQA;ovAD33$Qs2gVR@mng5(tW>xZJgeK_Xi7$S&?
zP+S=0VE4#h`Dz}PoVx<bDGkl#pEBh*mjzUV&ATR^OsJ?_?t6%eSUrXE3o#M;9+j@J
zT{Xxn%zt@6$l_T7_uU$_F0}kYY<I}*1e^u_IWPrj>$Xpob1C*tHbG+QDPDB+$X1Yy
zXvWABzHz&{@hpa2WhsSv?*Ju21|<T{?yYnZ1|~HPacXzzccWo`k`smS_eoX+Ekax~
zppOq|GdAbPG9PNCF+$=DAs~VjAr>3ZhAR&0*ME}Kywc~4&(x04;rb&@rvw!fMx6+d
z4~>se^8x`NFM@$2O=t`*pzEfo8HF(NBBb#Y9>@sDfm9G_5vF5<86WqCfe8pADgx~U
zlkkHRyn`UpmJo*zWUa~JE8gnywnbL(RpTi8jiNuqEBw=km`DnRLZMLnr~CzP2N|UH
T6b@E{00000NkvXXu0mjfF1+d?

delta 1120
zcmV-m1fToc2<`|riBL{Q4GJ0x0000DNk~Le0000;0000;2nGNE09Ea?M*si-32;bR
za{vG#H~;`4H~~eLF<_B4AAbY`Nkl<ZcmeI3&r4KM6vw~!RYXB0<RYkGYEfAWr$t1P
zqYGQLNjGX6?LWxBAo~mKKd7BbkhN%43)4WT&9o@Zg$!8G!oU=Y2;b?R86Qs0oA+bp
z-t#8C9~ji*y%+9x&OJZwya5~zhr{7;IQAzBO|mpyptv#q7WH4gJAeNi23ef!9#x)t
z95?RL;9OIC^dNvzXoGQ74gv@Xr1CI~_MT1%Amu?LFpL8ALI4qgbdYLWoV?i!LvZ}z
zH6ehAK#V$|9>5U#co|zO4l#j1s`vBLLem>to-R!2A2|piCy<7Gj4w@f-$#S6z&_CM
z{6-KJsEkq*jd&7!4u1;_VMGeWI+S!K8oM|cT|jbhSDwcOVGa$@Y@v7%*^wit87**0
zDVp8#@j($4Jx{f55poASbn3WuM=D#@BTIn-aztv><M&w?Oze*QJ2mQ;hLMj!{~1o8
z7@R;cIDuji4bqFNmDlF4%HPM103By5uP8Qt0<Vj}+6M6Z4}Wm}6i~RL=O2Z2L<HhZ
zy?hUR{r<0=H_o<q%fP^m@D1~rskzD;0W04s^M(udMG`q;&lYOMsfI=1G1Vdj%zq5G
zv+Y$8*0C-SAE~t;@#9#e;!3TZy`>&}<ZL4%P*Rq@)Y=Y51c5NmGL3bCl6X%5d(m#%
zPt+gJ!P+)0pMU22^5I^@HqK<Wu`W=Q2khqfkr12CQbRpE-onD1KB+TU&mKwhys@YZ
zR?X@5a65~1`x-LAx(9I)80Hzf;W5`QpyjYG(BVTse^<0f{J()NnIn@HkxDv<BTG8v
ze_GwCU)atb)_JZXWGf=pi?INm=PR!yaE-%-Bgd~GhJSIu&!3C$-AvL7H;OfIJv6gW
zTNiOn#Z7Be?`E2otb@YDsV1s-Gfm40#H~q`I05x~H`9n5u{8HNX*Qj-zG?>R9u(Z?
z@MeM|!5#Xfwrz%ZN}3LRPY9IteNMAj7bxw04)<9}X+I9@*sr8h-sjZo$HK@btf`tI
z({4WOK7WS`!KA&LM8RlXptScnX?iyatf%>)5946X@rZ?Cuez15UkUS^k-kbz#A!c>
zRUDtrw9EExV$EtJ_c=*EGqa8RWHkmSPz+9>7@R;cWPcw-G)tu3kVi%3(|XzDsWy*P
zFBEkCgYmC1q#-+j%EHjYj^Venbw-pQ?%aNelYgI$&P1qe1R@%{G&KJx$<S>9uP#m&
z#+3)LC+q{nV-WdtFR3`ybPUgp^IQlc{iMA<Qu9yHAUv1XfFP0r71;~WB;_>}%|Zw<
zfynpAU<leGF)xx5s1%W{Qp0O0U>yR;2t;@R!}z}WHNz0{AS%Hyq)6mOTSOrJZkJ#f
mMIkar%;9i291e$Lzw#IOhgH(lm5KuZ0000<MNUMnLSTYE9|0Ty

diff --git a/ui/assets/decredicons/ticket_unmined.png b/ui/assets/decredicons/ticket_unmined.png
index 83c6423b83cafd23eb253388db8d0217f3313806..fa7f569333efa13c2877f3332dc06685c872bbd3 100644
GIT binary patch
delta 1173
zcmV;G1Zw-s3Zw}(iBL{Q4GJ0x0000DNk~Le0000%0000$2nGNE07a`B-~a#s32;bR
za{vGqB>(^xB>_oNB=C_oAb&YYL_t(|0qvX3P82~9$N#f}5k*B0a`1zVlE^`bsF>hE
zAu;iYcMswdxEmipd;r6~0eJ8%Tue+n00%LA2!Vr;09h1`a)4DdBz)LbZEt566xf~V
zYBcFzGU;7sW}W_bRdsbu19&_hkH_Qr3jrdK98wQe42c~tP)Mhmf`3+6ATg|3=xMul
zyXHU)El;lm^C*!rL_h_oqK?LQxugoV*!%wqO$@SBJ$k2VU;~9)5JFl6Y;K|*HVAMR
zLWqk%BiN3JB!*PGlq)duA_Rz2P<xD!B*s(~J!R<oi$PulO-FJ>-A5QUXhsmU0>+gH
zPzv3Nw<=NW^=tuTL4PmkqgX63I1?eu0d$gocO?c@e7DQ8F<=v8a3BB^DNhJRK!LIh
z?KH~c^sO(Tgh~P5C~G@T?d9Aoz&U|4+>4OsG9N0JvpVeaAGmdge-tkQ_Q@SK)_|q2
zbSwhvYx>`+&j6>+>T_iW;S{GLto{Jzr-4ti)Y<i|=T27Zc7I_G_%H?3UDcwvz?leX
z>e%c=zVqDaqbGosC2bLgWwMafpJXBHaE22RCI^AfbNch?^T34$pyEjW9128eyro^m
zSjJetwg|pY3ULvpMzjFz=k?9hp)-5mV+3F^78mq!?1Z))2}DI;-{%;>0yN#$9VrDC
zqqd$pe^O2WMt@X<*-72jHk2-afnA3&Gm1p86w4FX3OK-V=W8w^GH+f|d>GJT*hWl*
z`6=C=tAiET9oVhDXJ8!>ci;qQCHJtlqI&%edf0M^AYutC%epmD-Udbhb}`$CSwi;5
z3({ZC76*C}iC52cd*>dkB4P<9cuASBZA2{L^aWZFoqyXZLPcft5#;+N+(B%1U;%7S
zXXdv|x@{9N5jb7$@6id44c?DZOrhUf{0QraiEyY=uNXP+x54tFb_GtMZ6lU8bAG_t
zqOEE2W}CLE|H>W859S4!naJl3rNVUx;{rDGjzYw1jJ$^6h1BqClnjsj^r&7lgcY$E
z#Onz>U4L>1Dvs*!oHQ{!W$uJ2s_?;XWvWn8IH@evUCV#wN)iXT#+!Osy!1r}yy~+$
z!!%VWt})io;_Ff~#Bo|^<#hURr53?N`I$-moi`5gsB_@UrrVJ=5|xHi5ja@#$g*Xa
zY?7^kg)#2I1(@0fIAvenI~1nVaZB}vDEK!}@P8s?+0VDq{93+;h9QGrNK+eED)(w$
zcxTFX+>4;ljdCPYjluS6A-!h7GdhyVG1aCvk#Z%5OA#_O$`4XaLC;<nb~XlFgX&ET
zt4?Z*-r^G$cQHYsHFa%o0SY0(lH5QTXS>%@*Mo6{ASXnqdyB=zW=`JZ{RGiSLJ)Bg
zf>szh5D^lwkD5LRAufVi&qn>oWT#Uhq(#W2nu9bfpkgTb?-+_D(iBOflc9%8?|6aQ
n<y@)ggenb>$K&yMJg)c+7V9`6>rq-d00000NkvXXu0mjf5fu%<

delta 1341
zcmV-D1;YBI3CjvLiBL{Q4GJ0x0000DNk~Le0000;0000;2nGNE09Ea?M*si-32;bR
za{vG#H~;`4H~~eLF<_B4Ab;RVL_t(|0qvVVY!g=;$G^{Epm=eIW}u5<OroR_*bD?}
zBDD(*YKMjnRg;tfsU<BzZIz`WQI`}UQbhkKO9P#nENvA!wW4lgq&5aM2{9YQ6P1Eg
zSON@ikN10*Gbdzn&iUQ%9PvJq<;&Uki|>2CfA8lrV6j*%7K_F5e19TPCxzmo40?|v
z@Yep_?LWgHf6XoSCj=&g-q)3Buj?EWV4%rC3WgC<rojM<Kn~<9Fik>qfB_bPgb;l&
zjEb8a7+?`dk(w?3n}Z=PtNcSY!2p*)>WVj=gdtQ_FlH+VHh~nm%f)MTpO~te<4Wx`
znBWvhU3ocD_<P|vLVvO*aOmU1z$%cYNsNc_B=Q^*7|gIViqH7ZWd|4vY9MEe*K(@o
znG73N^)`xI5El|@<-R`^t}K?-UwKHmAmPkQ(UeN4CQ!8o9gf7C0y0(qWeiVz0(nU7
z8U5r^s?w<rnRY5!B;wSi0)GzLWLSX$h(E;ESY3Uf9{2TjbAR)TXcS@<XsL7qm;Shl
z()F8IS-Df$|HbH0w6*Tk`<AZXKzD98;vyD-W-b;mHT@e_?>(scdh<)J2hIFiz(w_#
zn))3R-wh)USOp@FIQPx8@|>HMedH<GY^xS!?9>lck85q)S=pvgOeVL23pRmBoX<~A
zVCA+ON(T<?!hezeLzR>DhnUBafgbc6?5g~|ynIWGNFm6Tr&y|(U!3H&t@;E%`mnbq
zPaq*YG06MK2HE0*MIgHBo;YVtAJ<_OhT+fpup_-)J--JoA`h`k`72m1-_qNI#}3yO
z8g%TL(;tJA$UTTE5J5R-PqqanphSJ{>uJ2(H-e~%RDU4y9xo}s^Y&{nhg7z&>c-Mv
z5u+f|5GyUYA6}PngH<P)d;xE$>PF9$*P<j+fxN35HYu+MwE!GMDv%dmRCzr7Yp!bV
z-H?6NKCImSU)g^-vgR=|f&7i1w{#$=qM7Jp$o|m}#`N~Yx5JSMWXBx=L^hMAFj_AE
zr@iOt1b<y^S>dPFgzkpeopp0uy))_fhW1P}^w6FbmvhCE_NMm-4#6bfPtNFPD)&(?
zTq6~T<~=`7yPfpm-q(#KQVK1a6%pwj+tJ;;3sDhilBV21jT|jAOhYy)zjf!L6Nj)l
zC;+xHPx<J?CuajI*m}^hCq6x^t0Na|0?|x}nt#NxQx^~xI#y2=zr3J3at_!8(qmGU
zGX~Wpk<dL%4c_D~O<XbPSh7L3xaQKVImkb7r+E&IEP4*^t+W81U|!j#Qcl&167k@%
zUW8%O<RHR-)t}69+|Tc=t?1ziwM~sPh=1lvh>O_1IHd2n$b;Hi++~7)HBZ~*MSC(W
zx_?!OVq8)y4OQkn&(VW0Lpf&i-XBzjM*2?P!;U)wumT0p2qBi2kbg?y%nOOTv_lG{
zgp<e#fmc<UH2*V(4G^b5N|;BZ`!b#RXS}X&?xZ{P1rp<N2^Et-a;PiQ@l`GFTobT!
zwzx1NAlUA(_h8RKDvSnd701uMOvi{LAASvh8SXpnNB3si&m$!Jvz_P31{h%!NX(NL
zpiW#HA`d3m1d@0-1VboWY+l48kdWnds?~;Bvvn5?um~g_`~t%`QX02e4W6H5Iw-?1
z2?z6FfagcOTSOU#aT0<h#4Hwz#bU8oo>v|NgMQuM12vK400000NkvXXu0mjfebQ|q

diff --git a/ui/assets/decredicons/ticket_voted.png b/ui/assets/decredicons/ticket_voted.png
index 6e5c40193e81c812b075b9d60cea64436b2959e1..ee983ed0ac40ac99daed95687c955758bff37249 100644
GIT binary patch
delta 1138
zcmV-&1daQ=2!IJTiBL{Q4GJ0x0000DNk~Le0000%0000$2nGNE07a`B-~a#s32;bR
za{vGqB>(^xB>_oNB=C_oAAbZDNkl<ZcmeI2&u<e)6vw~gHBLf9Vk$>eicsBDEu@Ep
zUN}{iQTqq9CoU~DQq?Q;FKGA+%Bi8KQd(7NkEn-oLL!J;E|C+2a{&w}{7_6BIU#oJ
zT@Uk?7+Jw<uf6joM4FG}UpwQq=R5P>ym>Q##bU8oES5G1MBvJc<$nu8%8P+Fmni%+
zHgyIXm|a`W#DtvdRL61RnIDgS_7FW1M+8IzN%fKrDwpuf^&x|QD+)32lKi7|_d{qv
z#4rsexJ7{H*0az+tbuR91iJ_jB8!NSKah|aFu^Z^vg6;^a=#z~-5g?6_(kv$GqX<@
zGw1^);0%{TY+^_R^?yTg=h|=2au>tapDQgUuNHHcm4J~(Q5cMgph!B7`1MM0X>PW(
znC?`Od_c`}7NryyV1P(*LO-YgDl1$kdv$GTUP8<_q<j<H#Dtm#g_;GVOjD3y3gaR)
zQEkkqXB7p$U0@oM=J3v9MSvB-XWx9nYJCeuw}PTq@joYogMX1&0uzZ*9B~pbiBS=D
zq=#H(4Y_L3f8UPV+fR^+58~9o7)}np4-*&@fqMP_%>p(XwGefyxZys=s=I|R-W$h&
z8YP?<@d+frwer1C0<@CfDf!<E8a29L7oqIcA~l2ryskzNC+s5V=t**-<V(0<6(L_;
z@7V-`Sg1T_Gk*(K5mt8Ap$igVrK<0Kt+0x)>b`_dbl<NDn+Rmbx*;dY!GQ{!%bNVl
zUhLWdj3RJEd8zmiIA9Zj7D2j&pam8OtRo@i=<T_Q#0WTG^$DjBAA>GN)X4fsEwedb
z6=D3)FvjD<(82WJ7~5)+eRlZj$nnU3p2VCUOo0n_5r4>;eLM1T-$IZXd_8;|oEV7{
zXlgr~{Iut^8Kv6Jj;im)c++jhGD|cfen?JYVf#7qHMP3*f}=kg{-=kI`L8B0o@k{R
zgC4ZDpvPvT?q7eMXg!39fl>CJ-^;#boBf%?P)~Qmt{q@S@agFY->Lk+X-~LsPK|td
zcsxBdlz&R&9pRsimHBmVr)xbS#GgwizWb~BxhJ2{5bjO19NDW%7yYt#2a2HRlKe!!
zJ5Y5Q=3J93l(*ggTCao_VJiRkj70QfGt~IoFIQFLt8bOjJ_9j1a8yl^AMk9)Imi}1
zKflp>DU=AiW)S(<3^ks%;JQI#+^?1WSYdi-41fBNmzO^|cWdv}P$KM_K_qT$JyO}{
zQt0}WU8a3WLXQx#uvzggwJYf=LMJnz?C-+%vu?NWbA!DI&<Y6=cE6$4sa_j1Xwq?Z
z*foO(IPfSlIC<{ppwf<Uf(|p-e}c`RNuUV2W`q5vF1<5BX3(Uq2xJCQfc+39H>wRY
zD>IYl3*G9qb&R`FVF3piHHtUxocR6{EEbE!VzKngD-kz=5OR?f^#A|>07*qoM6N<$
Ef)*JK(EtDd

delta 1069
zcmV+|1k(F}3A_k4iBL{Q4GJ0x0000DNk~Le0000;0000;2nGNE09Ea?M*si-32;bR
za{vG#H~;`4H~~eLF<_B4AAbYUNkl<ZcmeI3-A)rh6vxlDVA=rMlJL<)ljTBFOpIK6
z)%XOyfe>!g8_N>_Z@`Vl8$%z#Cy@9AUYLmCh9(-Tm`DvMO-nnTvt?s#x6E!k=WMO>
zOEwGpF}w5MbI#11nF3fW7K_DVvHYJnFeJ-GrF7Te1#2I6oDvu$Uw>4q`0~5D>-Kk?
zq3W0b0q_koU>J@vgAfr2E$A*7#$hNk2q_DC0ER))3m|}qKu88-Mga^#@dtM<2p}a8
zS<xmK!em)G!~{YLw~K1%isjp7xFCe2KomE&@*C<Q3<%we*0TkIhzdkF3QB`m((;CS
zO80^=;sOz5Nhs3WFn@uYuEEae9^SMAF)#r!fg-J-yX;}*%lPlBCcqo~TGflw?nOVR
zfZGbhNNfUi;Nn(H;szr~EH3shVFl7)1=3&z(hzHqp1{wOn^lmRQZSPSNKLj=OSOgr
zwK_oM*n#6y{JR0M5sN^nNr0t=7UZ(3&w1rtL&6ax)Zy1eEPq0Y3$%!$+{(3JA{qW3
z5;8m0gu|nRCzd3l0xc~lSekFaAf&F~aN~Ll_X)HnIg!MIG+Du*;&eh~EM~Q7aASxF
z<i#8V;`oq@QkfEn2t)yyT*MR<zo<+J*af05onvqbDl<x;9~5?hveSI=BA4N}B6fi|
z18Qa(*kKna&3_n7XHxvF8Gj7A!dD5CfxjPiu&RMwpjw@;*GmIhZrBAnsR0|D;`^`*
zR6PYYD%CL%s8Z#7#PQED5a_%KEGY^qb1Y&IL3tb!$`of9d#FqaM4m!l`k-R&QRO2U
z>mkJYL0`PI>F};bWk_ZfMKg-z7PW=~cV0m{Vh{Vg>3_h%XB4_B+qV_ZNqaLD*!oZc
zEo>UZOWKpTLT=SbEVCL^(fv=DTRy^c2+mwAX2_!cjN7OKcyfk)s9$Y&G8y2b66?H}
zH}_R{#Ahm^U<a!jtUwy9KpG-B|C5*JJ-?55{Z1frJ_PsgM2YZD>DhX6t@B9eApL0f
z%ynAMrhm71&LA`oKX(maI@NB;hz8cFid}(kKSUQUl$-VXcK5;10wr6MB#sM)poIxE
z6`h?57JTlif}6RvQ13tTFI>R4*naUiUG6>}N+5DA+^vEkqRi2gkoWTKg$sOh@=odb
zda@LBMjNC(*8<1b(*NZfgU!*?J+yd%fk4;t(QaCh&b9nSPhrT-4ma6HLlYXyRlb8U
z`ni_Rr8XPXYK<4YtyVXEUCgv=jUbo0mQP=SOt)I2hR(Ho0%MTrR%`U=-)eQ!V?oxn
n{-#GD>sl6z#bU8oEEeK7(=tT}Ul@eh00000NkvXXu0mjf_-EoR

diff --git a/ui/cryptomaterial/progressbar.go b/ui/cryptomaterial/progressbar.go
index ced1963c9..6eedf8b97 100644
--- a/ui/cryptomaterial/progressbar.go
+++ b/ui/cryptomaterial/progressbar.go
@@ -244,7 +244,7 @@ func (mp *MultiLayerProgressBar) Layout2(gtx C, labelWdg layout.Widget) D {
 			return D{}
 		}),
 		layout.Rigid(func(gtx C) D {
-			return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
+			return layout.Inset{Top: values.MarginPadding24}.Layout(gtx, mp.progressBarLayout)
 		}),
 	)
 }
diff --git a/ui/page/components/coinformat.go b/ui/page/components/coinformat.go
index 2c7d847e1..1877bb847 100644
--- a/ui/page/components/coinformat.go
+++ b/ui/page/components/coinformat.go
@@ -22,6 +22,10 @@ var (
 )
 
 func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, displayUnitText bool) D {
+	return formatBalanceFull(gtx, l, amount, mainTextSize, scale, col, 0, displayUnitText)
+}
+
+func formatBalanceFull(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, weight font.Weight, displayUnitText bool) D {
 
 	startIndex := 0
 	stopIndex := 0
@@ -51,18 +55,24 @@ func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, sca
 		layout.Rigid(func(gtx C) D {
 			txt := l.Theme.Label(mainTextSize, mainText)
 			txt.Color = col
+			txt.Font.Weight = weight
 			return txt.Layout(gtx)
 		}),
 		layout.Rigid(func(gtx C) D {
 			txt := l.Theme.Label(subTextSize, subText)
 			txt.Color = col
+			txt.Font.Weight = weight
 			return txt.Layout(gtx)
 		}),
 		layout.Rigid(func(gtx C) D {
 			if displayUnitText {
-				return l.Theme.Label(mainTextSize, unitText).Layout(gtx)
+				txt := l.Theme.Label(mainTextSize, unitText)
+				txt.Font.Weight = weight
+				return txt.Layout(gtx)
 			}
-			return l.Theme.Label(subTextSize, unitText).Layout(gtx)
+			txt := l.Theme.Label(subTextSize, unitText)
+			txt.Font.Weight = weight
+			return txt.Layout(gtx)
 		}),
 	)
 }
@@ -121,7 +131,15 @@ func LayoutBalanceWithUnitSize(gtx layout.Context, l *load.Load, amount string,
 }
 
 func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, values.TextSize16, defaultScale, l.Theme.Color.Text, false)
+}
+
+func LayoutBalanceBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
+	return formatBalanceFull(gtx, l, amount, values.TextSize16, defaultScale, l.Theme.Color.Text, font.Bold, false)
+}
+
+func LayoutBalanceSemiBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
+	return formatBalanceFull(gtx, l, amount, values.TextSize16, defaultScale, l.Theme.Color.Text, font.SemiBold, false)
 }
 
 func LayoutBalanceSizeScale(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp, scale float32) layout.Dimensions {
diff --git a/ui/page/components/utils.go b/ui/page/components/utils.go
index a2fdc81dc..c29c5293d 100644
--- a/ui/page/components/utils.go
+++ b/ui/page/components/utils.go
@@ -121,11 +121,10 @@ func LayoutIconAndTextWithSize(l *load.Load, gtx C, title string, val string, co
 
 func layoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
 	return layout.Inset{Right: values.MarginPadding12}.Layout(gtx, func(gtx C) D {
-		return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
+		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
 				return layout.Inset{
 					Right: values.MarginPadding5,
-					Top:   values.MarginPadding10,
 				}.Layout(gtx, func(gtx C) D {
 					ic := cryptomaterial.NewIcon(l.Theme.Icons.ImageBrightness1)
 					ic.Color = col
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index fe13ce393..f42b9f138 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -91,7 +91,7 @@ func (pg *Page) stakePriceSection(gtx C) D {
 												return title.Layout(gtx)
 											}
 
-											return components.LayoutBalanceSize(gtx, pg.Load, pg.ticketPrice, values.TextSize16)
+											return components.LayoutBalanceSemiBold(gtx, pg.Load, pg.ticketPrice)
 										})
 									}),
 								)
@@ -139,7 +139,7 @@ func (pg *Page) dataRows(gtx C, title1, value1 string) D {
 			layout.Rigid(func(gtx C) D {
 				return layout.Inset{Left: values.MarginPadding4}.Layout(gtx, func(gtx C) D {
 					label := pg.Theme.Label(values.TextSize16, value1)
-					label.Color = pg.Theme.Color.GrayText2
+					label.Color = pg.Theme.Color.Text
 					label.Font.Weight = font.SemiBold
 					return label.Layout(gtx)
 				})
diff --git a/ui/page/staking/stake_list.go b/ui/page/staking/stake_list.go
index 77bebed71..2842dfd5e 100644
--- a/ui/page/staking/stake_list.go
+++ b/ui/page/staking/stake_list.go
@@ -1,6 +1,7 @@
 package staking
 
 import (
+	"gioui.org/font"
 	"gioui.org/layout"
 	"gioui.org/text"
 
@@ -68,8 +69,8 @@ func (pg *Page) ticketListLayout(gtx C) D {
 			}.Layout(gtx, func(gtx C) D {
 				return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 					layout.Rigid(func(gtx C) D {
-						txt := pg.Theme.Body1(values.String(values.StrTickets))
-						txt.Color = pg.Theme.Color.GrayText2
+						txt := pg.Theme.Label(values.TextSize20, values.String(values.StrTickets))
+						txt.Font.Weight = font.SemiBold
 						return layout.Inset{Bottom: values.MarginPadding18}.Layout(gtx, txt.Layout)
 					}),
 					layout.Rigid(func(gtx C) D {
diff --git a/ui/page/staking/stake_overview.go b/ui/page/staking/stake_overview.go
index 50696089b..df64d47ea 100644
--- a/ui/page/staking/stake_overview.go
+++ b/ui/page/staking/stake_overview.go
@@ -208,15 +208,14 @@ func (pg *Page) layoutDesktop(gtx C) D {
 
 	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 		layout.Rigid(pg.stakePriceSection),
+		layout.Rigid(pg.stakeStatisticsSection),
 		layout.Flexed(1, func(gtx C) D {
-			return layout.Inset{Top: values.MarginPadding8}.Layout(gtx, func(gtx C) D {
-				if pg.showMaterialLoader {
-					gtx.Constraints.Min.X = gtx.Constraints.Max.X
-					return layout.Center.Layout(gtx, pg.materialLoader.Layout)
-				}
-				return pg.scroll.List().Layout(gtx, 1, func(gtx C, i int) D {
-					return pg.ticketListLayout(gtx)
-				})
+			if pg.showMaterialLoader {
+				gtx.Constraints.Min.X = gtx.Constraints.Max.X
+				return layout.Center.Layout(gtx, pg.materialLoader.Layout)
+			}
+			return pg.scroll.List().Layout(gtx, 1, func(gtx C, i int) D {
+				return pg.ticketListLayout(gtx)
 			})
 		}),
 	)
@@ -239,7 +238,7 @@ func (pg *Page) layoutMobile(gtx layout.Context) layout.Dimensions {
 
 func (pg *Page) pageSections(gtx C, body layout.Widget) D {
 	return layout.Inset{
-		Bottom: values.MarginPadding8,
+		Bottom: values.MarginPadding16,
 	}.Layout(gtx, func(gtx C) D {
 		return pg.Theme.Card().Layout(gtx, func(gtx C) D {
 			gtx.Constraints.Min.X = gtx.Constraints.Max.X
diff --git a/ui/page/staking/stake_statics.go b/ui/page/staking/stake_statics.go
new file mode 100644
index 000000000..62fc125a0
--- /dev/null
+++ b/ui/page/staking/stake_statics.go
@@ -0,0 +1,98 @@
+package staking
+
+import (
+	"fmt"
+
+	"gioui.org/font"
+	"gioui.org/layout"
+	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
+	"github.com/crypto-power/cryptopower/ui/page/components"
+	"github.com/crypto-power/cryptopower/ui/values"
+)
+
+type statisticsItem struct {
+	Icon     *cryptomaterial.Image
+	Title    string
+	Value    string
+	ValueDim func(gtx C) D
+}
+
+func (pg *Page) stakeStatisticsSection(gtx C) D {
+	return pg.pageSections(gtx, func(gtx C) D {
+		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+			layout.Rigid(func(gtx C) D {
+				txt := pg.Theme.Label(values.TextSize20, values.String(values.StrStatistics))
+				txt.Font.Weight = font.SemiBold
+				return layout.Inset{
+					Bottom: values.MarginPadding24,
+				}.Layout(gtx, txt.Layout)
+			}),
+			layout.Rigid(func(gtx C) D {
+				return layout.Flex{Spacing: layout.SpaceBetween}.Layout(gtx,
+					layout.Rigid(func(gtx C) D {
+						totalRewardDim := func(gtx C) D {
+							if pg.totalRewards == "" {
+								return D{}
+							}
+							return components.LayoutBalanceSemiBold(gtx, pg.Load, pg.totalRewards)
+						}
+						item1 := &statisticsItem{Icon: pg.Theme.Icons.StakeyIcon, Title: values.String(values.StrTotalReward), Value: pg.totalRewards, ValueDim: totalRewardDim}
+						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketRevokedIcon, Title: values.String(values.StrRevoke), Value: fmt.Sprintf("%d", pg.ticketOverview.Revoked)}
+						return pg.dataStatisticsCol(gtx, item1, item2)
+					}),
+					layout.Rigid(func(gtx C) D {
+						item1 := &statisticsItem{Icon: pg.Theme.Icons.TicketUnminedIcon, Title: values.String(values.StrUmined), Value: fmt.Sprintf("%d", pg.ticketOverview.Immature)}
+						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketVotedIcon, Title: values.String(values.StrVoted), Value: fmt.Sprintf("%d", pg.ticketOverview.Voted)}
+						return pg.dataStatisticsCol(gtx, item1, item2)
+					}),
+					layout.Rigid(func(gtx C) D {
+						item1 := &statisticsItem{Icon: pg.Theme.Icons.TicketImmatureIcon, Title: values.String(values.StrImmature), Value: fmt.Sprintf("%d", pg.ticketOverview.Immature)}
+						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketExpiredIcon, Title: values.String(values.StrExpired), Value: fmt.Sprintf("%d", pg.ticketOverview.Expired)}
+						return pg.dataStatisticsCol(gtx, item1, item2)
+					}),
+				)
+			}),
+		)
+	})
+}
+
+func (pg *Page) dataStatisticsCol(gtx C, item1, item2 *statisticsItem) D {
+	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+		layout.Rigid(func(gtx C) D {
+			return layout.Inset{Bottom: values.MarginPadding24}.Layout(gtx, func(gtx C) D {
+				return pg.dataStatisticsItem(gtx, item1.Icon, item1.Title, item1.Value, item1.ValueDim)
+			})
+		}),
+		layout.Rigid(func(gtx C) D {
+			return pg.dataStatisticsItem(gtx, item2.Icon, item2.Title, item2.Value, item2.ValueDim)
+		}),
+	)
+}
+
+func (pg *Page) dataStatisticsItem(gtx C, icon *cryptomaterial.Image, title, value string, dim func(gtx C) D) D {
+	return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+		layout.Rigid(func(gtx C) D {
+			return layout.Inset{
+				Right: values.MarginPadding10,
+			}.Layout(gtx, icon.Layout36dp)
+		}),
+		layout.Rigid(func(gtx C) D {
+			return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+				layout.Rigid(func(gtx C) D {
+					label := pg.Theme.Label(values.TextSize16, title)
+					label.Color = pg.Theme.Color.GrayText2
+					return label.Layout(gtx)
+				}),
+				layout.Rigid(func(gtx C) D {
+					if dim != nil {
+						return dim(gtx)
+					}
+					label := pg.Theme.Label(values.TextSize16, value)
+					label.Color = pg.Theme.Color.Text
+					label.Font.Weight = font.SemiBold
+					return label.Layout(gtx)
+				}),
+			)
+		}),
+	)
+}
diff --git a/ui/values/localizable/en.go b/ui/values/localizable/en.go
index a0e359a36..6b4ffb7b3 100644
--- a/ui/values/localizable/en.go
+++ b/ui/values/localizable/en.go
@@ -792,4 +792,5 @@ const EN = `
 "createAssetWalletToSwapMsg" = "You need to create a %s wallet to swap."
 "stakingInfo" = "Staking Info"
 "timeLeftTit" = "Time Left"
+"totalReward" = "Total Reward"
 `
diff --git a/ui/values/strings.go b/ui/values/strings.go
index 58a41dec1..1aaced4c3 100644
--- a/ui/values/strings.go
+++ b/ui/values/strings.go
@@ -902,4 +902,5 @@ const (
 	StrCreateAssetWalletToSwapMsg      = "createAssetWalletToSwapMsg"
 	StrStakingInfo                     = "stakingInfo"
 	StrTimeLeftTit                     = "timeLeftTit"
+	StrTotalReward                     = "totalReward"
 )

From 876211c0dae3f03a9701ac382fd2f095ad35b2bf Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Fri, 10 Nov 2023 12:25:41 +0700
Subject: [PATCH 3/9] fix lint

---
 ui/page/components/coinformat.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/page/components/coinformat.go b/ui/page/components/coinformat.go
index 1877bb847..d6276d2fc 100644
--- a/ui/page/components/coinformat.go
+++ b/ui/page/components/coinformat.go
@@ -131,7 +131,7 @@ func LayoutBalanceWithUnitSize(gtx layout.Context, l *load.Load, amount string,
 }
 
 func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize16, defaultScale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.Text, false)
 }
 
 func LayoutBalanceBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {

From adc932ccdecef6d6c7bdc5267ac9fb9044933c0d Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Tue, 14 Nov 2023 16:44:00 +0700
Subject: [PATCH 4/9] fix image size, coinformat and progressbar

---
 ui/assets/decredicons/ticket_immature.png | Bin 1115 -> 682 bytes
 ui/assets/decredicons/ticket_unmined.png  | Bin 1188 -> 686 bytes
 ui/assets/decredicons/ticket_voted.png    | Bin 1152 -> 760 bytes
 ui/cryptomaterial/progressbar.go          |  63 +++++++++++-----------
 ui/page/components/coinformat.go          |  26 ++++-----
 ui/page/staking/stake_info.go             |   4 +-
 6 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/ui/assets/decredicons/ticket_immature.png b/ui/assets/decredicons/ticket_immature.png
index c661a4e9a1a4c57f5dea2fa489b0697f610d500b..37235dcd01b98024a43f404d401025967eeaaf24 100644
GIT binary patch
delta 664
zcmV;J0%!f(2&x4(iBL{Q4GJ0x0000DNk~Le0000X0000W2nGNE0GzlH$^ZZW32;bR
za{vGf6951U69E94oEVWdAAbTrNkl<ZcmeH~&q^CX9LK-gZUkE!njFlbEe7nN1zVbf
zP<m*+^xV8b(>I7uVEYE?6WG2%PxT@gF9wXFhzC805%r*lC@KhUWc>YRvd%``O@0Fb
z4}M^G=g-dkzBBv#&CUQ1+#|fC%5q&zKp`J_yHOeUs^~&_QI$FhQh)eYDR{?m@B2Wa
z#P4)3UFQ}4(7l?}q`ab@qlM{?ZUSu6V?M6UBS`R2)JBpBP=pYf2!Ka96<0|D^VH)M
zgh)kbTlCGR%QZ3>EoA?>#9W6D^@tA_Jn|DCB{E!X=kwaQf)j2cEED?fXgoyxIa(J$
z^8h$Kx?RWRd`S__#D7T>sLzs+z~o2Y1Fzqi^u`jfvuV;}AAuL6=o!&Wtk<jnW^2uk
z{BX~fHxD5~B;xdrH7^u3^2V0sUO|NDb7Y5akMdc@ipb=ECqvX}3L-=^G4=@<ereMF
z08sb>3_i8>>5N=}?o0AA8)U;bX>1t(U`F0rXYCbnh;nG2pMTl>{uZ#gY<z<+7Q<zI
z6TxA)@E@qn*mdHrNa$;HgzG>+3)aD|Nk@GmBsGBkiQwo6NoUQIqhfH#mUB89uDu{~
z%<->g2G~%#9hyAq&)@8#mCZqn_y-oZ5V;t477>Bh&(-!bPuB-H;wqv-Eq_HfuX<PI
zxT$g3S^cCP_gUo4-81DIc#Hz?$RR`~LXiO<zvHU4FohrJs|XLPN#_TRul+<svQH@d
y^*npdPyu$(1r|A3S49$heKb(5?(H79H(UWVFQt*!2M4zR0000<MNUMnLSTZXgDlMe

delta 1101
zcmV-T1hV_81=|QViBL{Q4GJ0x0000DNk~Le0000%0000$2nGNE07a`B-~a#s32;bR
za{vGqB>(^xB>_oNB=C_oAAbYzNkl<ZcmeI3|4!3T6vw~C&BTZV_yZC^K`@a&P=|^U
z|InHE0Qv;t6Ih-AcmTtE1AGG>zy$aUBOp^um<f=fU;=+I6bJ?w^_+E!`_XP)+fzoo
zpQO3j?QQ7&-gC}9r!9a&p-?Ck3JWy2M4vUf5XMxwF&F9(eREe^hkp;~bH)_iZI|77
z?G&-`2ijY>AOtTM_BX|xrV*jW7ZHdk{XP3z(a;E&)IpL8A~}VuAPPZ5MWEGr4nNTF
z5`xHD0-3PaRn!+L_OL4mA}s<l4lksk`{h=41R+9%tihEKbR7%u8o~r20;97KWZI4+
zct!xPR^*VNL|}9rV}EgY-Y6U7IEG|$f`9~IyyXeiLdlL{U_$?BjMA@Z%GBbt_5aGA
zy8|--Mi4N;ijc$1{DutF20^+*&7wqr5+Oq%F=1y5*xmq+kAO>;f%a}{>+Q#%(726N
zU~d-)Uo^*GX@VG{A{_1mOS3>~yRd(C3FzzvdheB9!vf5`2Y-I2{`IXV%&~lp1fuT1
zlPMM;2Tv@qP};w_RwzIY7LEmyKum;9GUvmC@?%&Cc9nd#epruXSK6@=)GJ~l@C2Q}
zu_7Oi0d|DK5J5}?4r)#)ww9Kw*5f#kHn&0qF%ftda0BlIoi_{nLS!A0#}GqocW9zj
zJ6x+guBD^2uYdPG(AHzdi!ixB>oqx7V8le=?d)d-5!l3e<*jIFGLIk-a|fP4-=O_@
z7GU5RY68(@iC39}Sz_MY-guu6Wivpw6t{81Z^YAPo@oCQXJa|H;AAP6U~yb&zfMOF
zL^+%12^MgAT^vJFTiIi~ylZ)-CaTDlFXe+MTgS>0#D5SMfw#HjGG&Hk(&6=QsL1z(
zT<sv{4t&F(W(o@^jt{&e<d@NVDQA;ovAD33$Qs2gVR@mng5(tW>xZJgeK_Xi7$S&?
zP+S=0VE4#h`Dz}PoVx<bDGkl#pEBh*mjzUV&ATR^OsJ?_?t6%eSUrXE3o#M;9+j@J
zT{Xxn%zt@6$l_T7_uU$_F0}kYY<I}*1e^u_IWPrj>$Xpob1C*tHbG+QDPDB+$X1Yy
zXvWABzHz&{@hpa2WhsSv?*Ju21|<T{?yYnZ1|~HPacXzzccWo`k`smS_eoX+Ekax~
zppOq|GdAbPG9PNCF+$=DAs~VjAr>3ZhAR&0*ME}Kywc~4&(x04;rb&@rvw!fMx6+d
z4~>se^8x`NFM@$2O=t`*pzEfo8HF(NBBb#Y9>@sDfm9G_5vF5<86WqCfe8pADgx~U
zlkkHRyn`UpmJo*zWUa~JE8gnywnbL(RpTi8jiNuqEBw=km`DnRLZMLnr~CzP2N|UH
T6b@E{00000NkvXXu0mjf{YL59

diff --git a/ui/assets/decredicons/ticket_unmined.png b/ui/assets/decredicons/ticket_unmined.png
index fa7f569333efa13c2877f3332dc06685c872bbd3..dafcd4f1fe78a3657f8919f8326f8daeb90a628f 100644
GIT binary patch
delta 668
zcmV;N0%QH839bb;iBL{Q4GJ0x0000DNk~Le0000X0000W2nGNE0GzlH$^ZZW32;bR
za{vGf6951U69E94oEVWdAAbTvNkl<ZcmeH~%}N_l6vzKJofM=WR2K@3#n2XN7cE+n
zZks~;9({vOpP>2#iBF)ufh#u(#*Kn59MFXe#fZ8vf{Gs~X5@O#+<Xi%nar6{Q1AzL
zCii1z{`Z`7?>zyYctEJ2PJ2bCQ9-WWkic;vqo&XSds*k8k@kJ1RDZ~-V!QDcf^g|Y
z3gh*<_Jnm8hSf2G`A^T~e9ukLwb*WO0#aNI1$BGYgHJ#R<RUc2?M3fHt+^&E2$73W
z<f3PoYZgKlcw;Z=2@?4SLM%jqg;?040CcEUqLTL9q$0g7qKF1V)e?(HBHSxrcM~`&
z11Cqow;yyr1bX^_u78&hBaVrSGhksFIM@T;zBe0<^&B`QF<d#^hZvCv7O*@EeEbSz
ze*t~(8hwKq5|aeB*Nvs_O~l43kosUO(268kWSCr25(*KCDDSox;D_BKA#`A}E0SdH
zt{2AdHQ!e%x5vKjHUZ0l8ivr8;Molf-fkcGWW>cGv?bWz9DjK1Yo1}yEZGYEA>39&
zwnSBH^EY#OE{hA1h!oAPykkl$DrBXl8Ct?$AVR!Z_0rz(s;99GFV0On*LmYgf0nNf
zu?SurT)Y^evbJD$OI{J|s@{HxiF|;is)3jNjo8FJMIFi?9PelsW>a?|!ciJ_{=1s5
zHF#;Ai@*F6LS5t{G$k=f{LD8cyOjKv==P5i9ZwSkhyzn4FcO$;TNtHlr))f)h<rv(
z2K84379qgu(CescU*f7m&u~mB)c+)D7u$H^v2X*^+n`};o<V{D0000<MNUMnLSTYK
Cx+4+*

delta 1174
zcmV;H1Zn%O1*8c!iBL{Q4GJ0x0000DNk~Le0000%0000$2nGNE07a`B-~a#s32;bR
za{vGqB>(^xB>_oNB=C_oAAbZnNkl<ZcmeI3%}x|S5Xb+sf)PbU4|4E>jgrVgh^Uz0
zK_M~mh<6X-6Sx~6Kzsnhz5#gfEL==XJOBqVd<cPqkN{Z}jdFlhG$ef3R&8%*7Zli?
z>1s6TUoz=kXJ(!LcU5(DO#^s59*@W4`3nIekQ`DERSbz8FHlIQnty^;SRgU1TIgxJ
zcDv?43@uNu1oJ47GDJWHsG^R>ce$hrw%Ggs3QY{MR6Tm9YG4C}TM$B81Z-}i9X1GX
z7ea`OKqJ_Wh$MzoyOb+1@*)I?Q&4-1kR--b6+LC>`-?$d1WiYBMBPUiHfTl=v;xMJ
z2v7>$iMJ|I?DcE`WPd>~=%ZLHFgOz-%K>zfe|IGYReZP0vN2#2V{jk<6Ddy!ML>bF
z4DB?^<MgdBpoB^R-zaN4PVME~EWkN|Gu(@i=Q1BEm$N$T^B=f%hkq0=0`|!rHr9Zp
zuXHQ|>udVos?PwY&gyez2jLW_BCP%Z=BI&Av((x3t>;cw>wk7(4)`zy)Lqr0xWJhR
zY3kVQM85Of>7yrrl_hNvhGnvl)t_V`>u`n>5he$L&vW|o>GQya2B6|d{u~NKXuPFe
z#aPBzzqSazPYQ7nrbe^??C15()S)wb-(v(|F%}o}aqNV)90^24VBhB$zydVg)*UGY
z7NfSFI)7450DneQgxN{m);5$bfPr0yF*AxpuoTM^*a|qnap!9;A~J7YQhXTDV%SDZ
zg!w7mo~wfu*d5rdzGq+^5qIDOXeIZswxW9d4SLveh#+DKE6chyQQihd0Cq9kh*?7R
z#|zS5&K3uH5s6pNb$jO?tRi9wCU{AiuWdvu;q(Ps5PzN9DndnN^bzFyCEP)5c3=T)
zPG{z~OuB6oF%dXj?(fkFjt$<AQcR)WTl@&?h>38hQm+^}@3+D7qILyNp=~3UHgkT!
z*`lp!@@AX1s{hIz$`9rRn3>4u4yD3%2;%}a^NvEqYmB^x;DyxiYm^L+{Pd_^GlUhf
z7{u!dJbzts2P%&0@0>I-JZ0{LDXQ?nZe^-aQaGtB)m_Vf=1LL=xyGA%S-kW`2fXUD
zI>R(oD6TQq(BkV-GsJOPXytVJaHST(MERLX{hc=s@u+j)%ck3rHWHPFQxP~=^2oAf
zm~4`*frT;d!3CJw1~_G3-a8bg({W4nhA8+qP=D|uWZBQR()?P!hlU}8Ur19MS1R{v
zUU+B9cHE1g(2a5=Q;os)Y9YO5!81CN$uZTYHj#2AhD#ALG|CTBO+n9I7j`xVT!ZRO
z469CRi{9cB7I!g0p*3}FZvhG+!IIoS7-zfJQrClVgditGsC$dW#b!?4<oyKENJ0>C
z5m$m3IuH>Ov5%TQ2q7+lTF*xP$YiHeA*4mfq?&^?ETCd2`R^EtCDIg0qm!YBOYeAr
o+T~oS=!7Z_kH_Qjcs#E74HoM-A?s0EIsgCw07*qoM6N<$f{um_q5uE@

diff --git a/ui/assets/decredicons/ticket_voted.png b/ui/assets/decredicons/ticket_voted.png
index ee983ed0ac40ac99daed95687c955758bff37249..7e3624c7d52b4ec7c7f36639dd208b5fb4467b38 100644
GIT binary patch
delta 743
zcmV<D0vP>(3HSvziBL{Q4GJ0x0000DNk~Le0000X0000W2nGNE0GzlH$^ZZW32;bR
za{vGf6951U69E94oEVWdAAbUkNkl<ZcmeH}y>8P`6vzMmXg)+6lBxkjg)mHs1WLLv
zF;rq@=o7Tc1`|9&cmtRaU6P7{H(&zMssj=Op)e#9M4%QyqbB65sbl+cPbx?GXdGX+
zmOAt&S@AhOcK$x++~W&eaE_3iF21Z5G}%zsY@0FE9$mTn0#kTZDSxbhsVUpGU~D~(
zFKteWSK)-AYW%OWwkdJRxoTk}6I-e|-Uo#XXDhZPL#1bIPKuTxNT-9e({;)o7?vS`
zun2iZ$?<GNCtX)e`6>U2LI7bA{4F)zR0_Q}9)N_cS9YE=COv^5D!jmj$cFM`eShZ*
zgIwmV64gzX=6<0JoPSP4UyH>1gQeNA;h9s3s2GPhVrK7rab^}?@g!om+r)Nj7ZtP9
z_eJCY5}_FGg|9&rVG-Z;e|Xy{kNNACj!*4BXqa6*n7siJgjPr0)OiN>9Ak<{2Pkz8
z;F}04LxaEZG>Uo^B8Z7Fny%ugVSN+f7JJ3`A|kGYUB!tmSAQW9iO@WPk}@?e8H_;$
zArU0t{-x`VF{w}-iQqg$5S|ms;Bhv#+k1Q_=tBZi;W!^wS0Re0iFrG4xp&Yipdm%m
za!v`jD%F{Zuvt*USb)1`b>hT5=AGi}Wm!V*W*~xxbGNifH&Z6|`4Qn+a9R<c5C7Ia
zwto+A37NI=HGjF5rPHxYqzk#I#Rc#$v({zSi4Udm{l58=53g3=M<t<tpcOQV!K^47
z+HJ9N7gpZ3#za_QHA@2MoQ4jK>Osgy-;dGpO}+81^$T^TV^JN>%4n=5$=On3wQSo%
z<)AX~9rXwJ3d?^>tY!v1{W*~?zR{=;;48cg%zQTL?I@SSfT8ic<l!flv{g!G%DCV>
Z^B>(;?zR=PzmNa`002ovPDHLkV1gC8O{@R_

delta 1138
zcmV-&1daRn1%L@QiBL{Q4GJ0x0000DNk~Le0000%0000$2nGNE07a`B-~a#s32;bR
za{vGqB>(^xB>_oNB=C_oAAbZDNkl<ZcmeI2&u<e)6vw~gHBLf9Vk$>eicsBDEu@Ep
zUN}{iQTqq9CoU~DQq?Q;FKGA+%Bi8KQd(7NkEn-oLL!J;E|C+2a{&w}{7_6BIU#oJ
zT@Uk?7+Jw<uf6joM4FG}UpwQq=R5P>ym>Q##bU8oES5G1MBvJc<$nu8%8P+Fmni%+
zHgyIXm|a`W#DtvdRL61RnIDgS_7FW1M+8IzN%fKrDwpuf^&x|QD+)32lKi7|_d{qv
z#4rsexJ7{H*0az+tbuR91iJ_jB8!NSKah|aFu^Z^vg6;^a=#z~-5g?6_(kv$GqX<@
zGw1^);0%{TY+^_R^?yTg=h|=2au>tapDQgUuNHHcm4J~(Q5cMgph!B7`1MM0X>PW(
znC?`Od_c`}7NryyV1P(*LO-YgDl1$kdv$GTUP8<_q<j<H#Dtm#g_;GVOjD3y3gaR)
zQEkkqXB7p$U0@oM=J3v9MSvB-XWx9nYJCeuw}PTq@joYogMX1&0uzZ*9B~pbiBS=D
zq=#H(4Y_L3f8UPV+fR^+58~9o7)}np4-*&@fqMP_%>p(XwGefyxZys=s=I|R-W$h&
z8YP?<@d+frwer1C0<@CfDf!<E8a29L7oqIcA~l2ryskzNC+s5V=t**-<V(0<6(L_;
z@7V-`Sg1T_Gk*(K5mt8Ap$igVrK<0Kt+0x)>b`_dbl<NDn+Rmbx*;dY!GQ{!%bNVl
zUhLWdj3RJEd8zmiIA9Zj7D2j&pam8OtRo@i=<T_Q#0WTG^$DjBAA>GN)X4fsEwedb
z6=D3)FvjD<(82WJ7~5)+eRlZj$nnU3p2VCUOo0n_5r4>;eLM1T-$IZXd_8;|oEV7{
zXlgr~{Iut^8Kv6Jj;im)c++jhGD|cfen?JYVf#7qHMP3*f}=kg{-=kI`L8B0o@k{R
zgC4ZDpvPvT?q7eMXg!39fl>CJ-^;#boBf%?P)~Qmt{q@S@agFY->Lk+X-~LsPK|td
zcsxBdlz&R&9pRsimHBmVr)xbS#GgwizWb~BxhJ2{5bjO19NDW%7yYt#2a2HRlKe!!
zJ5Y5Q=3J93l(*ggTCao_VJiRkj70QfGt~IoFIQFLt8bOjJ_9j1a8yl^AMk9)Imi}1
zKflp>DU=AiW)S(<3^ks%;JQI#+^?1WSYdi-41fBNmzO^|cWdv}P$KM_K_qT$JyO}{
zQt0}WU8a3WLXQx#uvzggwJYf=LMJnz?C-+%vu?NWbA!DI&<Y6=cE6$4sa_j1Xwq?Z
z*foO(IPfSlIC<{ppwf<Uf(|p-e}c`RNuUV2W`q5vF1<5BX3(Uq2xJCQfc+39H>wRY
zD>IYl3*G9qb&R`FVF3piHHtUxocR6{EEbE!VzKngD-kz=5OR?f^#A|>07*qoM6N<$
Ef)kAn3IG5A

diff --git a/ui/cryptomaterial/progressbar.go b/ui/cryptomaterial/progressbar.go
index 6eedf8b97..47b9bddd9 100644
--- a/ui/cryptomaterial/progressbar.go
+++ b/ui/cryptomaterial/progressbar.go
@@ -38,13 +38,13 @@ type ProgressBarItem struct {
 type MultiLayerProgressBar struct {
 	t *Theme
 
-	items            []ProgressBarItem
-	Radius           CornerRadius
-	Height           unit.Dp
-	Width            unit.Dp
-	total            float64
-	ShowLedger       bool
-	ShowOverLayValue bool
+	ShowAddWidgetFirst bool
+	items              []ProgressBarItem
+	Radius             CornerRadius
+	Height             unit.Dp
+	Width              unit.Dp
+	total              float64
+	ShowOverLayValue   bool
 }
 
 func (t *Theme) ProgressBar(progress int) ProgressBarStyle {
@@ -221,32 +221,35 @@ func (mp *MultiLayerProgressBar) progressBarLayout(gtx C) D {
 	)
 }
 
-func (mp *MultiLayerProgressBar) Layout(gtx C, labelWdg layout.Widget) D {
-	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
-		layout.Rigid(func(gtx C) D {
-			return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
-		}),
-		layout.Rigid(func(gtx C) D {
-			if mp.ShowLedger {
-				return layout.Center.Layout(gtx, labelWdg)
-			}
-			return D{}
-		}),
-	)
-}
+func (mp *MultiLayerProgressBar) Layout(gtx C, additionalWidget layout.Widget) D {
+	if additionalWidget == nil {
+		// We're only displaying the progress bar, no need for flex layout to wrap it.
+		// TODO: Verify if a top padding is necessary if we're only displaying the progressbar.
+		return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
+	}
 
-func (mp *MultiLayerProgressBar) Layout2(gtx C, labelWdg layout.Widget) D {
-	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
-		layout.Rigid(func(gtx C) D {
-			if mp.ShowLedger {
-				return labelWdg(gtx)
-			}
-			return D{}
-		}),
+	progressBarTopPadding, otherWidget := values.MarginPadding24, additionalWidget
+	if !mp.ShowAddWidgetFirst {
+		// reduce the top padding if we're showing the progress bar before the other widget
+		progressBarTopPadding = values.MarginPadding5
+		otherWidget = func(gtx C) D {
+			return layout.Center.Layout(gtx, additionalWidget)
+		}
+	}
+
+	flexWidgets := []layout.FlexChild{
 		layout.Rigid(func(gtx C) D {
-			return layout.Inset{Top: values.MarginPadding24}.Layout(gtx, mp.progressBarLayout)
+			return layout.Inset{Top: progressBarTopPadding}.Layout(gtx, mp.progressBarLayout)
 		}),
-	)
+		layout.Rigid(otherWidget),
+	}
+
+	if mp.ShowAddWidgetFirst {
+		// Swap the label and progress bar...
+		flexWidgets[0], flexWidgets[1] = flexWidgets[1], flexWidgets[0]
+	}
+
+	return layout.Flex{Axis: layout.Vertical}.Layout(gtx, flexWidgets...)
 }
 
 func (t *Theme) ProgressBarCirle(progress int) ProgressCircleStyle {
diff --git a/ui/page/components/coinformat.go b/ui/page/components/coinformat.go
index d6276d2fc..137ce060f 100644
--- a/ui/page/components/coinformat.go
+++ b/ui/page/components/coinformat.go
@@ -21,11 +21,7 @@ var (
 	noDecimal                 = regexp.MustCompile(`([0-9]{1,3},*)+`)
 )
 
-func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, displayUnitText bool) D {
-	return formatBalanceFull(gtx, l, amount, mainTextSize, scale, col, 0, displayUnitText)
-}
-
-func formatBalanceFull(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, weight font.Weight, displayUnitText bool) D {
+func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, col color.NRGBA, weight font.Weight, displayUnitText bool) D {
 
 	startIndex := 0
 	stopIndex := 0
@@ -49,7 +45,7 @@ func formatBalanceFull(gtx C, l *load.Load, amount string, mainTextSize unit.Sp,
 
 	mainText, subText, unitText := amount[:startIndex], amount[startIndex:stopIndex], amount[stopIndex:]
 
-	subTextSize := unit.Sp(float32(mainTextSize) * scale)
+	subTextSize := unit.Sp(float32(mainTextSize) * defaultScale)
 
 	return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
@@ -119,35 +115,31 @@ func getIndexUnit(amount string) int {
 // LayoutBalance aligns the main and sub DCR balances horizontally, putting the sub
 // balance at the baseline of the row.
 func LayoutBalance(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.Text, font.Normal, false)
 }
 
 func LayoutBalanceWithUnit(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.PageNavText, true)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.PageNavText, font.Normal, true)
 }
 
 func LayoutBalanceWithUnitSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.PageNavText, true)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.PageNavText, font.Normal, true)
 }
 
 func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.Text, font.Normal, false)
 }
 
 func LayoutBalanceBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalanceFull(gtx, l, amount, values.TextSize16, defaultScale, l.Theme.Color.Text, font.Bold, false)
+	return formatBalance(gtx, l, amount, values.TextSize16, l.Theme.Color.Text, font.Bold, false)
 }
 
 func LayoutBalanceSemiBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalanceFull(gtx, l, amount, values.TextSize16, defaultScale, l.Theme.Color.Text, font.SemiBold, false)
-}
-
-func LayoutBalanceSizeScale(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp, scale float32) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, scale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, values.TextSize16, l.Theme.Color.Text, font.SemiBold, false)
 }
 
 func LayoutBalanceColor(gtx layout.Context, l *load.Load, amount string, color color.NRGBA) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, color, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, color, font.Normal, false)
 }
 
 func LayoutBalanceWithState(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index f42b9f138..9391cf62e 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -207,9 +207,9 @@ func (pg *Page) balanceProgressBarLayout(gtx C) D {
 	}
 	total := totalBalance.Spendable.ToInt() + totalBalance.LockedByTickets.ToInt()
 	pb := pg.Theme.MultiLayerProgressBar(pg.WL.SelectedWallet.Wallet.ToAmount(total).ToCoin(), items)
+	pb.ShowAddWidgetFirst = true
 	pb.Height = values.MarginPadding16
-	pb.ShowLedger = true
-	return pb.Layout2(gtx, labelWdg)
+	return pb.Layout(gtx, labelWdg)
 }
 
 func (pg *Page) stakingRecordStatistics(gtx C) D {

From 38281dd51dbf9326e562f66b43d41766c07c262d Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Wed, 15 Nov 2023 14:25:54 +0700
Subject: [PATCH 5/9] optimize some function, update layout on staking section

---
 ui/cryptomaterial/progressbar.go      | 18 +++++------
 ui/page/components/utils.go           | 17 +++-------
 ui/page/privacy/account_mixer_page.go |  6 ++--
 ui/page/staking/stake_info.go         | 45 +++++++++++----------------
 ui/page/staking/stake_statics.go      | 36 ++++++++++-----------
 ui/values/localizable/en.go           |  2 +-
 ui/values/strings.go                  |  2 +-
 7 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/ui/cryptomaterial/progressbar.go b/ui/cryptomaterial/progressbar.go
index 47b9bddd9..006a2be5a 100644
--- a/ui/cryptomaterial/progressbar.go
+++ b/ui/cryptomaterial/progressbar.go
@@ -38,13 +38,13 @@ type ProgressBarItem struct {
 type MultiLayerProgressBar struct {
 	t *Theme
 
-	ShowAddWidgetFirst bool
-	items              []ProgressBarItem
-	Radius             CornerRadius
-	Height             unit.Dp
-	Width              unit.Dp
-	total              float64
-	ShowOverLayValue   bool
+	items                []ProgressBarItem
+	Radius               CornerRadius
+	Height               unit.Dp
+	Width                unit.Dp
+	total                float64
+	ShowOverLayValue     bool
+	ShowOtherWidgetFirst bool
 }
 
 func (t *Theme) ProgressBar(progress int) ProgressBarStyle {
@@ -229,7 +229,7 @@ func (mp *MultiLayerProgressBar) Layout(gtx C, additionalWidget layout.Widget) D
 	}
 
 	progressBarTopPadding, otherWidget := values.MarginPadding24, additionalWidget
-	if !mp.ShowAddWidgetFirst {
+	if !mp.ShowOtherWidgetFirst {
 		// reduce the top padding if we're showing the progress bar before the other widget
 		progressBarTopPadding = values.MarginPadding5
 		otherWidget = func(gtx C) D {
@@ -244,7 +244,7 @@ func (mp *MultiLayerProgressBar) Layout(gtx C, additionalWidget layout.Widget) D
 		layout.Rigid(otherWidget),
 	}
 
-	if mp.ShowAddWidgetFirst {
+	if mp.ShowOtherWidgetFirst {
 		// Swap the label and progress bar...
 		flexWidgets[0], flexWidgets[1] = flexWidgets[1], flexWidgets[0]
 	}
diff --git a/ui/page/components/utils.go b/ui/page/components/utils.go
index c29c5293d..ccfcfea3f 100644
--- a/ui/page/components/utils.go
+++ b/ui/page/components/utils.go
@@ -111,15 +111,11 @@ func checksumByte(data []byte) byte {
 	return sha256.Sum256(intermediateHash[:])[0]
 }
 
-func LayoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA) D {
-	return layoutIconAndText(l, gtx, title, val, col, values.TextSize14, values.MarginPadding8)
+func LayoutIconAndTextWithSize(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
+	return layoutIconAndText(l, gtx, text, col, size, iconSize)
 }
 
-func LayoutIconAndTextWithSize(l *load.Load, gtx C, title string, val string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
-	return layoutIconAndText(l, gtx, title, val, col, size, iconSize)
-}
-
-func layoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
+func layoutIconAndText(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
 	return layout.Inset{Right: values.MarginPadding12}.Layout(gtx, func(gtx C) D {
 		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
@@ -132,12 +128,7 @@ func layoutIconAndText(l *load.Load, gtx C, title string, val string, col color.
 				})
 			}),
 			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(size, title)
-				txt.Color = l.Theme.Color.GrayText2
-				return txt.Layout(gtx)
-			}),
-			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(size, val)
+				txt := l.Theme.Label(size, text)
 				txt.Color = l.Theme.Color.GrayText2
 				return txt.Layout(gtx)
 			}),
diff --git a/ui/page/privacy/account_mixer_page.go b/ui/page/privacy/account_mixer_page.go
index ad5091c45..9b129cdc0 100644
--- a/ui/page/privacy/account_mixer_page.go
+++ b/ui/page/privacy/account_mixer_page.go
@@ -176,10 +176,12 @@ func (pg *AccountMixerPage) mixerProgressBarLayout(gtx C) D {
 		return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
 			return layout.Flex{}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, "", pg.mixedBalance.String(), items[0].Color)
+					text := pg.mixedBalance.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[0].Color, values.TextSize14, values.MarginPadding8)
 				}),
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, "", pg.unmixedBalance.String(), items[1].Color)
+					text := pg.unmixedBalance.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[1].Color, values.TextSize14, values.MarginPadding8)
 				}),
 			)
 		})
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index 9391cf62e..9ed5b4e0f 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -23,30 +23,26 @@ func (pg *Page) initStakePriceWidget() *Page {
 func (pg *Page) pageHead(gtx C) D {
 	txt := pg.Theme.Label(values.TextSize20, values.String(values.StrStakingInfo))
 	txt.Font.Weight = font.SemiBold
-	isWatchWallet := pg.WL.SelectedWallet.Wallet.IsWatchingOnlyWallet()
 	return layout.Inset{
 		Bottom: values.MarginPadding24,
 	}.Layout(gtx, func(gtx C) D {
 		return layout.Flex{Spacing: layout.SpaceBetween}.Layout(gtx,
 			layout.Rigid(txt.Layout),
 			layout.Rigid(func(gtx C) D {
+				if pg.WL.SelectedWallet.Wallet.IsWatchingOnlyWallet() {
+					return D{}
+				}
 				return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 					layout.Rigid(func(gtx C) D {
-						if !isWatchWallet {
-							title := pg.Theme.Label(values.TextSize16, values.String(values.StrStake))
-							title.Color = pg.Theme.Color.GrayText2
-							return title.Layout(gtx)
-						}
-						return D{}
+						title := pg.Theme.Label(values.TextSize16, values.String(values.StrStake))
+						title.Color = pg.Theme.Color.GrayText2
+						return title.Layout(gtx)
 					}),
 					layout.Rigid(func(gtx C) D {
-						if !isWatchWallet {
-							return layout.Inset{
-								Right: values.MarginPadding24,
-								Left:  values.MarginPadding8,
-							}.Layout(gtx, pg.stake.Layout)
-						}
-						return D{}
+						return layout.Inset{
+							Right: values.MarginPadding24,
+							Left:  values.MarginPadding8,
+						}.Layout(gtx, pg.stake.Layout)
 					}),
 					layout.Rigid(func(gtx C) D {
 						icon := pg.Theme.Icons.HeaderSettingsIcon
@@ -54,10 +50,7 @@ func (pg *Page) pageHead(gtx C) D {
 						// if pg.ticketBuyerWallet.IsAutoTicketsPurchaseActive() {
 						// 	icon = pg.Theme.Icons.SettingsInactiveIcon
 						// }
-						if !isWatchWallet {
-							return pg.stakeSettings.Layout(gtx, icon.Layout24dp)
-						}
-						return D{}
+						return pg.stakeSettings.Layout(gtx, icon.Layout24dp)
 					}),
 				)
 			}),
@@ -108,7 +101,7 @@ func (pg *Page) stakePriceSection(gtx C) D {
 							layout.Rigid(func(gtx C) D {
 								secs, _ := pg.dcrImpl.NextTicketPriceRemaining()
 								timeleft := nextTicketRemaining(int(secs))
-								return pg.dataRows(gtx, values.String(values.StrLiveTickets), timeleft)
+								return pg.dataRows(gtx, values.String(values.StrTimeLeftTitle), timeleft)
 							}),
 							layout.Rigid(func(gtx C) D {
 								canBuy := fmt.Sprintf("%d", pg.CalculateTotalTicketsCanBuy())
@@ -132,7 +125,7 @@ func (pg *Page) dataRows(gtx C, title1, value1 string) D {
 	return layout.Inset{Top: values.MarginPadding7}.Layout(gtx, func(gtx C) D {
 		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
-				label := pg.Theme.Label(values.TextSize16, title1+":")
+				label := pg.Theme.Label(values.TextSize16, title1)
 				label.Color = pg.Theme.Color.GrayText2
 				return label.Layout(gtx)
 			}),
@@ -193,21 +186,19 @@ func (pg *Page) balanceProgressBarLayout(gtx C) D {
 		return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
 			return layout.Flex{}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
-					title := values.String(values.StrStaked) + ": "
-					value := totalBalance.LockedByTickets.String()
-					return components.LayoutIconAndTextWithSize(pg.Load, gtx, title, value, items[0].Color, values.TextSize16, values.MarginPadding10)
+					text := values.String(values.StrStaked) + ": " + totalBalance.LockedByTickets.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[0].Color, values.TextSize16, values.MarginPadding10)
 				}),
 				layout.Rigid(func(gtx C) D {
-					title := values.String(values.StrLabelSpendable) + ": "
-					value := totalBalance.Spendable.String()
-					return components.LayoutIconAndTextWithSize(pg.Load, gtx, title, value, items[1].Color, values.TextSize16, values.MarginPadding10)
+					text := values.String(values.StrLabelSpendable) + ": " + totalBalance.Spendable.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[1].Color, values.TextSize16, values.MarginPadding10)
 				}),
 			)
 		})
 	}
 	total := totalBalance.Spendable.ToInt() + totalBalance.LockedByTickets.ToInt()
 	pb := pg.Theme.MultiLayerProgressBar(pg.WL.SelectedWallet.Wallet.ToAmount(total).ToCoin(), items)
-	pb.ShowAddWidgetFirst = true
+	pb.ShowOtherWidgetFirst = true
 	pb.Height = values.MarginPadding16
 	return pb.Layout(gtx, labelWdg)
 }
diff --git a/ui/page/staking/stake_statics.go b/ui/page/staking/stake_statics.go
index 62fc125a0..aa8e1706c 100644
--- a/ui/page/staking/stake_statics.go
+++ b/ui/page/staking/stake_statics.go
@@ -11,10 +11,10 @@ import (
 )
 
 type statisticsItem struct {
-	Icon     *cryptomaterial.Image
-	Title    string
-	Value    string
-	ValueDim func(gtx C) D
+	Icon        *cryptomaterial.Image
+	Title       string
+	ValueText   string
+	ValueWidget func(gtx C) D
 }
 
 func (pg *Page) stakeStatisticsSection(gtx C) D {
@@ -36,18 +36,18 @@ func (pg *Page) stakeStatisticsSection(gtx C) D {
 							}
 							return components.LayoutBalanceSemiBold(gtx, pg.Load, pg.totalRewards)
 						}
-						item1 := &statisticsItem{Icon: pg.Theme.Icons.StakeyIcon, Title: values.String(values.StrTotalReward), Value: pg.totalRewards, ValueDim: totalRewardDim}
-						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketRevokedIcon, Title: values.String(values.StrRevoke), Value: fmt.Sprintf("%d", pg.ticketOverview.Revoked)}
+						item1 := &statisticsItem{Icon: pg.Theme.Icons.StakeyIcon, Title: values.String(values.StrTotalReward), ValueText: pg.totalRewards, ValueWidget: totalRewardDim}
+						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketRevokedIcon, Title: values.String(values.StrRevoke), ValueText: fmt.Sprintf("%d", pg.ticketOverview.Revoked)}
 						return pg.dataStatisticsCol(gtx, item1, item2)
 					}),
 					layout.Rigid(func(gtx C) D {
-						item1 := &statisticsItem{Icon: pg.Theme.Icons.TicketUnminedIcon, Title: values.String(values.StrUmined), Value: fmt.Sprintf("%d", pg.ticketOverview.Immature)}
-						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketVotedIcon, Title: values.String(values.StrVoted), Value: fmt.Sprintf("%d", pg.ticketOverview.Voted)}
+						item1 := &statisticsItem{Icon: pg.Theme.Icons.TicketUnminedIcon, Title: values.String(values.StrUmined), ValueText: fmt.Sprintf("%d", pg.ticketOverview.Immature)}
+						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketVotedIcon, Title: values.String(values.StrVoted), ValueText: fmt.Sprintf("%d", pg.ticketOverview.Voted)}
 						return pg.dataStatisticsCol(gtx, item1, item2)
 					}),
 					layout.Rigid(func(gtx C) D {
-						item1 := &statisticsItem{Icon: pg.Theme.Icons.TicketImmatureIcon, Title: values.String(values.StrImmature), Value: fmt.Sprintf("%d", pg.ticketOverview.Immature)}
-						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketExpiredIcon, Title: values.String(values.StrExpired), Value: fmt.Sprintf("%d", pg.ticketOverview.Expired)}
+						item1 := &statisticsItem{Icon: pg.Theme.Icons.TicketImmatureIcon, Title: values.String(values.StrImmature), ValueText: fmt.Sprintf("%d", pg.ticketOverview.Immature)}
+						item2 := &statisticsItem{Icon: pg.Theme.Icons.TicketExpiredIcon, Title: values.String(values.StrExpired), ValueText: fmt.Sprintf("%d", pg.ticketOverview.Expired)}
 						return pg.dataStatisticsCol(gtx, item1, item2)
 					}),
 				)
@@ -60,34 +60,34 @@ func (pg *Page) dataStatisticsCol(gtx C, item1, item2 *statisticsItem) D {
 	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
 			return layout.Inset{Bottom: values.MarginPadding24}.Layout(gtx, func(gtx C) D {
-				return pg.dataStatisticsItem(gtx, item1.Icon, item1.Title, item1.Value, item1.ValueDim)
+				return pg.dataStatisticsItem(gtx, item1)
 			})
 		}),
 		layout.Rigid(func(gtx C) D {
-			return pg.dataStatisticsItem(gtx, item2.Icon, item2.Title, item2.Value, item2.ValueDim)
+			return pg.dataStatisticsItem(gtx, item2)
 		}),
 	)
 }
 
-func (pg *Page) dataStatisticsItem(gtx C, icon *cryptomaterial.Image, title, value string, dim func(gtx C) D) D {
+func (pg *Page) dataStatisticsItem(gtx C, item *statisticsItem) D {
 	return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
 			return layout.Inset{
 				Right: values.MarginPadding10,
-			}.Layout(gtx, icon.Layout36dp)
+			}.Layout(gtx, item.Icon.Layout36dp)
 		}),
 		layout.Rigid(func(gtx C) D {
 			return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
-					label := pg.Theme.Label(values.TextSize16, title)
+					label := pg.Theme.Label(values.TextSize16, item.Title)
 					label.Color = pg.Theme.Color.GrayText2
 					return label.Layout(gtx)
 				}),
 				layout.Rigid(func(gtx C) D {
-					if dim != nil {
-						return dim(gtx)
+					if item.ValueWidget != nil {
+						return item.ValueWidget(gtx)
 					}
-					label := pg.Theme.Label(values.TextSize16, value)
+					label := pg.Theme.Label(values.TextSize16, item.ValueText)
 					label.Color = pg.Theme.Color.Text
 					label.Font.Weight = font.SemiBold
 					return label.Layout(gtx)
diff --git a/ui/values/localizable/en.go b/ui/values/localizable/en.go
index 6b4ffb7b3..1d1b2ad28 100644
--- a/ui/values/localizable/en.go
+++ b/ui/values/localizable/en.go
@@ -791,6 +791,6 @@ const EN = `
 "noWalletsAvailable" = "You cannot spend from a watch only wallet, try creating another wallet."
 "createAssetWalletToSwapMsg" = "You need to create a %s wallet to swap."
 "stakingInfo" = "Staking Info"
-"timeLeftTit" = "Time Left"
+"timeLeftTitle" = "Time Left"
 "totalReward" = "Total Reward"
 `
diff --git a/ui/values/strings.go b/ui/values/strings.go
index 1aaced4c3..101ec12e7 100644
--- a/ui/values/strings.go
+++ b/ui/values/strings.go
@@ -901,6 +901,6 @@ const (
 	StrNoWalletsAvailable              = "noWalletsAvailable"
 	StrCreateAssetWalletToSwapMsg      = "createAssetWalletToSwapMsg"
 	StrStakingInfo                     = "stakingInfo"
-	StrTimeLeftTit                     = "timeLeftTit"
+	StrTimeLeftTitle                   = "timeLeftTitle"
 	StrTotalReward                     = "totalReward"
 )

From a9cf24bf55b3e148b790521b638a318051663670 Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Fri, 17 Nov 2023 20:15:38 +0700
Subject: [PATCH 6/9] update layout on staking overview

---
 ui/page/staking/stake_overview.go | 39 +++++++++++++++++++------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/ui/page/staking/stake_overview.go b/ui/page/staking/stake_overview.go
index df64d47ea..b4a949142 100644
--- a/ui/page/staking/stake_overview.go
+++ b/ui/page/staking/stake_overview.go
@@ -7,6 +7,7 @@ import (
 
 	"gioui.org/layout"
 	"gioui.org/text"
+	"gioui.org/widget"
 	"gioui.org/widget/material"
 
 	"github.com/crypto-power/cryptopower/app"
@@ -46,7 +47,8 @@ type Page struct {
 	*app.GenericPageModal
 	*listeners.TxAndBlockNotificationListener
 
-	scroll *components.Scroll[*transactionItem]
+	scroll          *components.Scroll[*transactionItem]
+	scrollContainer *widget.List
 
 	ctx       context.Context // page context
 	ctxCancel context.CancelFunc
@@ -80,6 +82,12 @@ func NewStakingPage(l *load.Load) *Page {
 		Load:             l,
 		GenericPageModal: app.NewGenericPageModal(OverviewPageID),
 		dcrImpl:          impl,
+		scrollContainer: &widget.List{
+			List: layout.List{
+				Axis:      layout.Vertical,
+				Alignment: layout.Middle,
+			},
+		},
 	}
 
 	pg.scroll = components.NewScroll(l, pageSize, pg.fetchTickets)
@@ -205,20 +213,21 @@ func (pg *Page) Layout(gtx C) D {
 
 func (pg *Page) layoutDesktop(gtx C) D {
 	pg.scroll.OnScrollChangeListener(pg.ParentWindow())
-
-	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
-		layout.Rigid(pg.stakePriceSection),
-		layout.Rigid(pg.stakeStatisticsSection),
-		layout.Flexed(1, func(gtx C) D {
-			if pg.showMaterialLoader {
-				gtx.Constraints.Min.X = gtx.Constraints.Max.X
-				return layout.Center.Layout(gtx, pg.materialLoader.Layout)
-			}
-			return pg.scroll.List().Layout(gtx, 1, func(gtx C, i int) D {
-				return pg.ticketListLayout(gtx)
-			})
-		}),
-	)
+	return pg.Theme.List(pg.scrollContainer).Layout(gtx, 1, func(gtx C, i int) D {
+		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+			layout.Rigid(pg.stakePriceSection),
+			layout.Rigid(pg.stakeStatisticsSection),
+			layout.Rigid(func(gtx C) D {
+				if pg.showMaterialLoader {
+					gtx.Constraints.Min.X = gtx.Constraints.Max.X
+					return layout.Center.Layout(gtx, pg.materialLoader.Layout)
+				}
+				return pg.scroll.List().Layout(gtx, 1, func(gtx C, i int) D {
+					return pg.ticketListLayout(gtx)
+				})
+			}),
+		)
+	})
 }
 
 func (pg *Page) layoutMobile(gtx layout.Context) layout.Dimensions {

From 70ffa776426f43391fa50d412bdd2fb34f121cbf Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Sat, 18 Nov 2023 17:05:16 +0700
Subject: [PATCH 7/9] update layout staking and fix crash

---
 ui/page/components/coinformat.go  | 7 ++++++-
 ui/page/staking/stake_info.go     | 1 -
 ui/page/staking/stake_overview.go | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/page/components/coinformat.go b/ui/page/components/coinformat.go
index 137ce060f..acc518d6a 100644
--- a/ui/page/components/coinformat.go
+++ b/ui/page/components/coinformat.go
@@ -22,7 +22,12 @@ var (
 )
 
 func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, col color.NRGBA, weight font.Weight, displayUnitText bool) D {
-
+	if amount == "" {
+		txt := l.Theme.Label(mainTextSize, "0")
+		txt.Color = col
+		txt.Font.Weight = weight
+		return txt.Layout(gtx)
+	}
 	startIndex := 0
 	stopIndex := 0
 
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index 9ed5b4e0f..ec514ea6f 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -83,7 +83,6 @@ func (pg *Page) stakePriceSection(gtx C) D {
 												title.Color = col
 												return title.Layout(gtx)
 											}
-
 											return components.LayoutBalanceSemiBold(gtx, pg.Load, pg.ticketPrice)
 										})
 									}),
diff --git a/ui/page/staking/stake_overview.go b/ui/page/staking/stake_overview.go
index b4a949142..ea896f53f 100644
--- a/ui/page/staking/stake_overview.go
+++ b/ui/page/staking/stake_overview.go
@@ -223,6 +223,7 @@ func (pg *Page) layoutDesktop(gtx C) D {
 					return layout.Center.Layout(gtx, pg.materialLoader.Layout)
 				}
 				return pg.scroll.List().Layout(gtx, 1, func(gtx C, i int) D {
+					gtx.Constraints.Max.Y = 500
 					return pg.ticketListLayout(gtx)
 				})
 			}),

From 813ed6b346dbb3f03b9d6bc150ec3bf13bb79b9e Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Thu, 23 Nov 2023 14:54:34 +0700
Subject: [PATCH 8/9] add divider to staking info section

---
 ui/page/components/utils.go                   |  4 --
 ui/page/info/sync_status.go                   |  2 +-
 ui/page/staking/stake_info.go                 | 50 ++++++++++---------
 ui/page/staking/stake_overview.go             |  5 +-
 .../{stake_statics.go => stake_statistics.go} |  0
 ui/values/dimensions.go                       |  1 +
 ui/values/localizable/en.go                   |  4 +-
 ui/values/strings.go                          |  4 +-
 8 files changed, 37 insertions(+), 33 deletions(-)
 rename ui/page/staking/{stake_statics.go => stake_statistics.go} (100%)

diff --git a/ui/page/components/utils.go b/ui/page/components/utils.go
index ccfcfea3f..0ce35f4fd 100644
--- a/ui/page/components/utils.go
+++ b/ui/page/components/utils.go
@@ -112,10 +112,6 @@ func checksumByte(data []byte) byte {
 }
 
 func LayoutIconAndTextWithSize(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
-	return layoutIconAndText(l, gtx, text, col, size, iconSize)
-}
-
-func layoutIconAndText(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
 	return layout.Inset{Right: values.MarginPadding12}.Layout(gtx, func(gtx C) D {
 		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
diff --git a/ui/page/info/sync_status.go b/ui/page/info/sync_status.go
index 69783f1da..96aa7e0f0 100644
--- a/ui/page/info/sync_status.go
+++ b/ui/page/info/sync_status.go
@@ -270,7 +270,7 @@ func (pg *WalletInfo) progressStatusDetails() (int, string) {
 	}
 
 	if pg.WL.SelectedWallet.Wallet.IsSyncing() || pg.WL.SelectedWallet.Wallet.IsRescanning() {
-		timeLeftLabel = values.StringF(values.StrTimeLeft, timeLeft)
+		timeLeftLabel = values.StringF(values.StrTimeLeftFmt, timeLeft)
 		if progress == 0 {
 			timeLeftLabel = values.String(values.StrLoading)
 		}
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index ec514ea6f..1bdc98362 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -46,10 +46,6 @@ func (pg *Page) pageHead(gtx C) D {
 					}),
 					layout.Rigid(func(gtx C) D {
 						icon := pg.Theme.Icons.HeaderSettingsIcon
-						// Todo -- darkmode icons
-						// if pg.ticketBuyerWallet.IsAutoTicketsPurchaseActive() {
-						// 	icon = pg.Theme.Icons.SettingsInactiveIcon
-						// }
 						return pg.stakeSettings.Layout(gtx, icon.Layout24dp)
 					}),
 				)
@@ -70,23 +66,28 @@ func (pg *Page) stakePriceSection(gtx C) D {
 					leftWg := func(gtx C) D {
 						return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 							layout.Rigid(func(gtx C) D {
-								return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
-									layout.Rigid(func(gtx C) D {
-										title := pg.Theme.Label(values.TextSize16, values.String(values.StrTicketPrice)+": ")
-										title.Color = col
-										return title.Layout(gtx)
-									}),
-									layout.Rigid(func(gtx C) D {
-										return layout.Center.Layout(gtx, func(gtx C) D {
-											if pg.WL.SelectedWallet.Wallet.IsSyncing() || pg.WL.SelectedWallet.Wallet.IsRescanning() || !pg.isTicketsPurchaseAllowed() {
-												title := pg.Theme.Label(values.TextSize16, values.String(values.StrLoadingPrice))
-												title.Color = col
-												return title.Layout(gtx)
-											}
-											return components.LayoutBalanceSemiBold(gtx, pg.Load, pg.ticketPrice)
-										})
-									}),
-								)
+								return layout.Inset{
+									Top:    values.MarginPadding6,
+									Bottom: values.MarginPadding6,
+								}.Layout(gtx, func(gtx C) D {
+									return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+										layout.Rigid(func(gtx C) D {
+											title := pg.Theme.Label(values.TextSize16, values.String(values.StrTicketPrice)+": ")
+											title.Color = col
+											return title.Layout(gtx)
+										}),
+										layout.Rigid(func(gtx C) D {
+											return layout.Center.Layout(gtx, func(gtx C) D {
+												if pg.WL.SelectedWallet.Wallet.IsSyncing() || pg.WL.SelectedWallet.Wallet.IsRescanning() || !pg.isTicketsPurchaseAllowed() {
+													title := pg.Theme.Label(values.TextSize16, values.String(values.StrLoadingPrice))
+													title.Color = col
+													return title.Layout(gtx)
+												}
+												return components.LayoutBalanceSemiBold(gtx, pg.Load, pg.ticketPrice)
+											})
+										}),
+									)
+								})
 							}),
 							layout.Rigid(func(gtx C) D {
 								live := fmt.Sprintf("%d", pg.ticketOverview.Live)
@@ -100,7 +101,7 @@ func (pg *Page) stakePriceSection(gtx C) D {
 							layout.Rigid(func(gtx C) D {
 								secs, _ := pg.dcrImpl.NextTicketPriceRemaining()
 								timeleft := nextTicketRemaining(int(secs))
-								return pg.dataRows(gtx, values.String(values.StrTimeLeftTitle), timeleft)
+								return pg.dataRows(gtx, values.String(values.StrTimeLeft), timeleft)
 							}),
 							layout.Rigid(func(gtx C) D {
 								canBuy := fmt.Sprintf("%d", pg.CalculateTotalTicketsCanBuy())
@@ -115,13 +116,16 @@ func (pg *Page) stakePriceSection(gtx C) D {
 					)
 				})
 			}),
+			layout.Rigid(func(gtx C) D {
+				return layout.Inset{Top: values.MarginPadding11, Bottom: values.MarginPadding14}.Layout(gtx, pg.Theme.Separator().Layout)
+			}),
 			layout.Rigid(pg.balanceProgressBarLayout),
 		)
 	})
 }
 
 func (pg *Page) dataRows(gtx C, title1, value1 string) D {
-	return layout.Inset{Top: values.MarginPadding7}.Layout(gtx, func(gtx C) D {
+	return layout.Inset{Top: values.MarginPadding6, Bottom: values.MarginPadding6}.Layout(gtx, func(gtx C) D {
 		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
 				label := pg.Theme.Label(values.TextSize16, title1)
diff --git a/ui/page/staking/stake_overview.go b/ui/page/staking/stake_overview.go
index ea896f53f..3866e1196 100644
--- a/ui/page/staking/stake_overview.go
+++ b/ui/page/staking/stake_overview.go
@@ -36,6 +36,9 @@ const (
 
 	// pageSize define the maximum number of items fetched for the list scroll view.
 	pageSize int32 = 20
+
+	// The ticket height limit helps separate the scrolling of the ticket list and the page
+	ticketHeight = 500
 )
 
 type Page struct {
@@ -223,7 +226,7 @@ func (pg *Page) layoutDesktop(gtx C) D {
 					return layout.Center.Layout(gtx, pg.materialLoader.Layout)
 				}
 				return pg.scroll.List().Layout(gtx, 1, func(gtx C, i int) D {
-					gtx.Constraints.Max.Y = 500
+					gtx.Constraints.Max.Y = ticketHeight
 					return pg.ticketListLayout(gtx)
 				})
 			}),
diff --git a/ui/page/staking/stake_statics.go b/ui/page/staking/stake_statistics.go
similarity index 100%
rename from ui/page/staking/stake_statics.go
rename to ui/page/staking/stake_statistics.go
diff --git a/ui/values/dimensions.go b/ui/values/dimensions.go
index 277a372d5..e16ae0c26 100644
--- a/ui/values/dimensions.go
+++ b/ui/values/dimensions.go
@@ -29,6 +29,7 @@ var (
 	MarginPadding15       = unit.Dp(15)
 	MarginPaddingMinus15  = unit.Dp(-15)
 	MarginPadding16       = unit.Dp(16)
+	MarginPadding17       = unit.Dp(17)
 	MarginPadding18       = unit.Dp(18)
 	MarginPadding18p5     = unit.Dp(18.5)
 	MarginPadding20       = unit.Dp(20)
diff --git a/ui/values/localizable/en.go b/ui/values/localizable/en.go
index 1d1b2ad28..712141df2 100644
--- a/ui/values/localizable/en.go
+++ b/ui/values/localizable/en.go
@@ -598,7 +598,7 @@ const EN = `
 "tickets" = "Tickets"
 "ticketSettingSaved" = "Auto ticket purchase setting saved successfully."
 "ticketVotedTitle" = "Ticket, Voted"
-"timeLeft" = "%v left"
+"timeLeftFmt" = "%v left"
 "to" = "To"
 "token" = "Token:   %s"
 "total" = "Total"
@@ -791,6 +791,6 @@ const EN = `
 "noWalletsAvailable" = "You cannot spend from a watch only wallet, try creating another wallet."
 "createAssetWalletToSwapMsg" = "You need to create a %s wallet to swap."
 "stakingInfo" = "Staking Info"
-"timeLeftTitle" = "Time Left"
+"timeLeft" = "Time Left"
 "totalReward" = "Total Reward"
 `
diff --git a/ui/values/strings.go b/ui/values/strings.go
index 101ec12e7..1820c02af 100644
--- a/ui/values/strings.go
+++ b/ui/values/strings.go
@@ -708,7 +708,7 @@ const (
 	StrTickets                         = "tickets"
 	StrTicketSettingSaved              = "ticketSettingSaved"
 	StrTicketVotedTitle                = "ticketVotedTitle"
-	StrTimeLeft                        = "timeLeft"
+	StrTimeLeftFmt                     = "timeLeftFmt"
 	StrTo                              = "to"
 	StrToken                           = "token"
 	StrTotal                           = "total"
@@ -901,6 +901,6 @@ const (
 	StrNoWalletsAvailable              = "noWalletsAvailable"
 	StrCreateAssetWalletToSwapMsg      = "createAssetWalletToSwapMsg"
 	StrStakingInfo                     = "stakingInfo"
-	StrTimeLeftTitle                   = "timeLeftTitle"
+	StrTimeLeft                        = "timeLeft"
 	StrTotalReward                     = "totalReward"
 )

From e7527c54b8d72b3e09776a3ade1337a334de8201 Mon Sep 17 00:00:00 2001
From: Justin Do <justin.namdo@gmail.com>
Date: Tue, 28 Nov 2023 16:20:39 +0700
Subject: [PATCH 9/9] update layout for staking page

---
 ui/page/components/coinformat.go | 18 +++++++-----------
 ui/page/staking/stake_info.go    | 12 ++++++++----
 ui/values/dimensions.go          |  1 -
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/ui/page/components/coinformat.go b/ui/page/components/coinformat.go
index 486d0ee3f..31b533e15 100644
--- a/ui/page/components/coinformat.go
+++ b/ui/page/components/coinformat.go
@@ -21,7 +21,7 @@ var (
 	noDecimal                 = regexp.MustCompile(`([0-9]{1,3},*)+`)
 )
 
-func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, isBoldText, displayUnitText bool) D {
+func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, col color.NRGBA, isBoldText, displayUnitText bool) D {
 
 	startIndex := 0
 	stopIndex := 0
@@ -115,31 +115,27 @@ func getIndexUnit(amount string) int {
 // LayoutBalance aligns the main and sub DCR balances horizontally, putting the sub
 // balance at the baseline of the row.
 func LayoutBalance(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.Text, false, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.Text, false, false)
 }
 
 func LayoutBalanceWithUnit(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.PageNavText, false, true)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.PageNavText, false, true)
 }
 
 func LayoutBalanceWithUnitSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.PageNavText, false, true)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.PageNavText, false, true)
 }
 
 func LayoutBalanceWithUnitSizeBoldText(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, .85, l.Theme.Color.PageNavText, true, true)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.PageNavText, true, true)
 }
 
 func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.Text, false, false)
-}
-
-func LayoutBalanceSizeScale(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp, scale float32) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, scale, l.Theme.Color.Text, false, false)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.Text, false, false)
 }
 
 func LayoutBalanceColor(gtx layout.Context, l *load.Load, amount string, color color.NRGBA) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, color, false, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, color, false, false)
 }
 
 func LayoutBalanceWithState(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
diff --git a/ui/page/staking/stake_info.go b/ui/page/staking/stake_info.go
index 6e0ab9b8d..c58834f9b 100644
--- a/ui/page/staking/stake_info.go
+++ b/ui/page/staking/stake_info.go
@@ -116,9 +116,6 @@ func (pg *Page) stakePriceSection(gtx C) D {
 					)
 				})
 			}),
-			layout.Rigid(func(gtx C) D {
-				return layout.Inset{Top: values.MarginPadding11, Bottom: values.MarginPadding14}.Layout(gtx, pg.Theme.Separator().Layout)
-			}),
 			layout.Rigid(pg.balanceProgressBarLayout),
 		)
 	})
@@ -203,7 +200,14 @@ func (pg *Page) balanceProgressBarLayout(gtx C) D {
 	pb := pg.Theme.MultiLayerProgressBar(pg.WL.SelectedWallet.Wallet.ToAmount(total).ToCoin(), items)
 	pb.ShowOtherWidgetFirst = true
 	pb.Height = values.MarginPadding16
-	return pb.Layout(gtx, labelWdg)
+	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+		layout.Rigid(func(gtx C) D {
+			return layout.Inset{Top: values.MarginPadding11, Bottom: values.MarginPadding14}.Layout(gtx, pg.Theme.Separator().Layout)
+		}),
+		layout.Rigid(func(gtx C) D {
+			return pb.Layout(gtx, labelWdg)
+		}),
+	)
 }
 
 func (pg *Page) stakingRecordStatistics(gtx C) D {
diff --git a/ui/values/dimensions.go b/ui/values/dimensions.go
index e16ae0c26..277a372d5 100644
--- a/ui/values/dimensions.go
+++ b/ui/values/dimensions.go
@@ -29,7 +29,6 @@ var (
 	MarginPadding15       = unit.Dp(15)
 	MarginPaddingMinus15  = unit.Dp(-15)
 	MarginPadding16       = unit.Dp(16)
-	MarginPadding17       = unit.Dp(17)
 	MarginPadding18       = unit.Dp(18)
 	MarginPadding18p5     = unit.Dp(18.5)
 	MarginPadding20       = unit.Dp(20)