Skip to content

Commit

Permalink
Format transactions row and details (#582)
Browse files Browse the repository at this point in the history
* Format transactions row for various tx types

* transactions: add mixed transaction type to dropdown selector

* transactions: display denomination and mix count for mixed transactions

* Support formatting amount with different text sizes and scale

* transactions: display mix denomination in transaction row

* transactions: show number of days ticket took to vote or revoke

* transactions: show vote reward and ticket price price for stake transactions

* tx details: add button to view associated ticket

* tx detais: fix padding and margins for rows and page sections

* tx details: show ticket status, days to vote and vote reward

* tx details: add maturity progress bar

* Remove redundant seperator function
  • Loading branch information
beansgum committed Aug 30, 2021
1 parent b2e7703 commit aa0dc61
Show file tree
Hide file tree
Showing 18 changed files with 621 additions and 256 deletions.
2 changes: 1 addition & 1 deletion go.mod
Expand Up @@ -19,7 +19,7 @@ require (
github.com/jrick/logrotate v1.0.0
github.com/onsi/ginkgo v1.14.0
github.com/onsi/gomega v1.10.1
github.com/planetdecred/dcrlibwallet v1.6.1-0.20210806104554-ee2986c7f314
github.com/planetdecred/dcrlibwallet v1.6.1-0.20210816165030-bb3af17a746a
github.com/yeqown/go-qrcode v1.5.1
golang.org/x/exp v0.0.0-20200331195152-e8c3332aa8e5
golang.org/x/image v0.0.0-20210220032944-ac19c3e999fb
Expand Down
2 changes: 2 additions & 0 deletions go.sum
Expand Up @@ -665,6 +665,8 @@ github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINE
github.com/pkg/profile v1.2.1/go.mod h1:hJw3o1OdXxsrSjjVksARp5W95eeEaEfptyVZyv6JUPA=
github.com/planetdecred/dcrlibwallet v1.6.1-0.20210806104554-ee2986c7f314 h1:BClJn5RwAKpgQoys6CNEsp3gwzvKmy00oq3FyBb6D+k=
github.com/planetdecred/dcrlibwallet v1.6.1-0.20210806104554-ee2986c7f314/go.mod h1:sRwfsPrOEnpGBNL54KS83Dpxx2kp2AzZ0Je5vKRRE4o=
github.com/planetdecred/dcrlibwallet v1.6.1-0.20210816165030-bb3af17a746a h1:loa8rSQsMWs4mGL4wW0Vzvw9kmH7aoO7A/SL4cE+KOM=
github.com/planetdecred/dcrlibwallet v1.6.1-0.20210816165030-bb3af17a746a/go.mod h1:sRwfsPrOEnpGBNL54KS83Dpxx2kp2AzZ0Je5vKRRE4o=
github.com/pmezard/go-difflib v0.0.0-20151028094244-d8ed2627bdf0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
Expand Down
Binary file added ui/assets/decredicons/ic_decred02.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/assets/decredicons/ic_next.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/assets/decredicons/mixed_tx.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/assets/decredicons/transferred.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion ui/decredmaterial/linearlayout.go
Expand Up @@ -23,6 +23,8 @@ type LinearLayout struct {
Margin layout.Inset
Padding layout.Inset
Direction layout.Direction
Spacing layout.Spacing
Alignment layout.Alignment
}

// Layout2 displays a linear layout with a single child.
Expand Down Expand Up @@ -57,7 +59,7 @@ func (ll LinearLayout) Layout(gtx C, children ...layout.FlexChild) D {
return ll.Padding.Layout(gtx, func(gtx C) D {
// draw layout direction
return ll.Direction.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: ll.Orientation}.Layout(gtx, children...)
return layout.Flex{Axis: ll.Orientation, Alignment: ll.Alignment, Spacing: ll.Spacing}.Layout(gtx, children...)
})
})
})
Expand Down
7 changes: 6 additions & 1 deletion ui/decredmaterial/progressbar.go
Expand Up @@ -17,6 +17,7 @@ import (
type ProgressBarStyle struct {
Radius unit.Value
Height unit.Value
Width unit.Value
material.ProgressBarStyle
}

Expand Down Expand Up @@ -46,7 +47,11 @@ func (p ProgressBarStyle) Layout(gtx layout.Context) layout.Dimensions {
return layout.Dimensions{Size: d}
}

progressBarWidth := float32(gtx.Constraints.Max.X)
if p.Width.V <= 0 {
p.Width = unit.Px(float32(gtx.Constraints.Max.X))
}

progressBarWidth := p.Width.V
return layout.Stack{Alignment: layout.W}.Layout(gtx,
layout.Stacked(func(gtx layout.Context) layout.Dimensions {
return shader(progressBarWidth, p.TrackColor)
Expand Down
65 changes: 37 additions & 28 deletions ui/decredmaterial/theme.go
Expand Up @@ -40,34 +40,37 @@ type Theme struct {
Shaper text.Shaper
Base *material.Theme
Color struct {
Primary color.NRGBA
Secondary color.NRGBA
Text color.NRGBA
Hint color.NRGBA
Overlay color.NRGBA
InvText color.NRGBA
Success color.NRGBA
Success2 color.NRGBA
Danger color.NRGBA
Background color.NRGBA
Surface color.NRGBA
Gray color.NRGBA
Black color.NRGBA
DeepBlue color.NRGBA
LightBlue color.NRGBA
LightGray color.NRGBA
InactiveGray color.NRGBA
ActiveGray color.NRGBA
Gray1 color.NRGBA
Gray2 color.NRGBA
Gray3 color.NRGBA
Orange color.NRGBA
Orange2 color.NRGBA
Gray4 color.NRGBA
Gray5 color.NRGBA
Gray6 color.NRGBA
Green50 color.NRGBA
Green500 color.NRGBA
Primary color.NRGBA
Secondary color.NRGBA
Text color.NRGBA
Hint color.NRGBA
Overlay color.NRGBA
InvText color.NRGBA
Success color.NRGBA
Success2 color.NRGBA
Danger color.NRGBA
Background color.NRGBA
Surface color.NRGBA
Gray color.NRGBA
Black color.NRGBA
DeepBlue color.NRGBA
LightBlue color.NRGBA
LightBlue2 color.NRGBA
BlueProgressTint color.NRGBA
LightGray color.NRGBA
InactiveGray color.NRGBA
ActiveGray color.NRGBA
Gray1 color.NRGBA
Gray2 color.NRGBA
Gray3 color.NRGBA
Orange color.NRGBA
Orange2 color.NRGBA
Gray4 color.NRGBA
Gray5 color.NRGBA
Gray6 color.NRGBA
Green50 color.NRGBA
Green500 color.NRGBA
Turquoise800 color.NRGBA
}
Icon struct {
ContentCreate *widget.Icon
Expand Down Expand Up @@ -119,8 +122,11 @@ func (t *Theme) setColorMode(darkMode bool) {
t.Color.Black = rgb(0x000000)
t.Color.Background = argb(0x22444444)
t.Color.LightBlue = rgb(0xe4f6ff)
t.Color.LightBlue2 = rgb(0x75D8FF)
t.Color.BlueProgressTint = rgb(0x73d7ff)
t.Color.Orange = rgb(0xD34A21)
t.Color.Orange2 = rgb(0xF8E8E7)
t.Color.Turquoise800 = rgb(0x008F52)
t.TextSize = unit.Sp(16)
} else {
t.DarkMode = false
Expand Down Expand Up @@ -149,8 +155,11 @@ func (t *Theme) setColorMode(darkMode bool) {
t.Color.Black = rgb(0x000000)
t.Color.Background = argb(0x22444444)
t.Color.LightBlue = rgb(0xe4f6ff)
t.Color.LightBlue2 = rgb(0x75D8FF)
t.Color.BlueProgressTint = rgb(0x73d7ff)
t.Color.Orange = rgb(0xD34A21)
t.Color.Orange2 = rgb(0xF8E8E7)
t.Color.Turquoise800 = rgb(0x008F52)
t.TextSize = unit.Sp(16)
}
}
Expand Down
12 changes: 8 additions & 4 deletions ui/load/load.go
Expand Up @@ -40,14 +40,14 @@ type Icons struct {
ImageBrightness1, ContentClear, DropDownIcon, Cached, ContentRemove *widget.Icon

OverviewIcon, OverviewIconInactive, WalletIcon, WalletIconInactive,
ReceiveIcon, TransactionIcon, TransactionIconInactive, SendIcon, MoreIcon, MoreIconInactive,
ReceiveIcon, Transferred, TransactionIcon, TransactionIconInactive, SendIcon, MoreIcon, MoreIconInactive,
PendingIcon, Logo, RedirectIcon, ConfirmIcon, NewWalletIcon, WalletAlertIcon,
ImportedAccountIcon, AccountIcon, EditIcon, expandIcon, CopyIcon, mixer, MixerSmall,
ArrowForwardIcon, TransactionFingerPrintIcon, SettingsIcon, SecurityIcon, HelpIcon,
ImportedAccountIcon, AccountIcon, EditIcon, expandIcon, CopyIcon, MixedTx, mixer, MixerSmall,
ArrowForwardIcon, Next, TransactionFingerPrintIcon, SettingsIcon, SecurityIcon, HelpIcon,
AboutIcon, DebugIcon, VerifyMessageIcon, LocationPinIcon, AlertGray, ArrowDownIcon,
WatchOnlyWalletIcon, CurrencySwapIcon, SyncingIcon, ProposalIconActive, ProposalIconInactive,
Restore, DocumentationIcon, DownloadIcon, TimerIcon, TicketIcon, TicketIconInactive, StakeyIcon,
List, ListGridIcon, DecredSymbolIcon *widget.Image
List, ListGridIcon, DecredSymbolIcon, DecredSymbol2 *widget.Image

TicketPurchasedIcon,
TicketImmatureIcon,
Expand Down Expand Up @@ -108,6 +108,7 @@ func NewLoad(th *decredmaterial.Theme, decredIcons map[string]image.Image) *Load
OverviewIconInactive: &widget.Image{Src: paint.NewImageOp(decredIcons["overview_inactive"])},
WalletIconInactive: &widget.Image{Src: paint.NewImageOp(decredIcons["wallet_inactive"])},
ReceiveIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["receive"])},
Transferred: &widget.Image{Src: paint.NewImageOp(decredIcons["transferred"])},
TransactionIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["transaction"])},
TransactionIconInactive: &widget.Image{Src: paint.NewImageOp(decredIcons["transaction_inactive"])},
SendIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["send"])},
Expand All @@ -124,10 +125,12 @@ func NewLoad(th *decredmaterial.Theme, decredIcons map[string]image.Image) *Load
EditIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["editIcon"])},
expandIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["expand_icon"])},
CopyIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["copy_icon"])},
MixedTx: &widget.Image{Src: paint.NewImageOp(decredIcons["mixed_tx"])},
mixer: &widget.Image{Src: paint.NewImageOp(decredIcons["mixer"])},
MixerSmall: &widget.Image{Src: paint.NewImageOp(decredIcons["mixer_small"])},
TransactionFingerPrintIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["transaction_fingerprint"])},
ArrowForwardIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["arrow_forward"])},
Next: &widget.Image{Src: paint.NewImageOp(decredIcons["ic_next"])},
SettingsIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["settings"])},
SecurityIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["security"])},
HelpIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["help_icon"])},
Expand Down Expand Up @@ -161,6 +164,7 @@ func NewLoad(th *decredmaterial.Theme, decredIcons map[string]image.Image) *Load
List: &widget.Image{Src: paint.NewImageOp(decredIcons["list"])},
ListGridIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["list_grid"])},
DecredSymbolIcon: &widget.Image{Src: paint.NewImageOp(decredIcons["decred_symbol"])},
DecredSymbol2: &widget.Image{Src: paint.NewImageOp(decredIcons["ic_decred02"])},
}

wl := &WalletLoad{
Expand Down
16 changes: 5 additions & 11 deletions ui/page/account_details_page.go
Expand Up @@ -188,17 +188,10 @@ func (pg *AcctDetailsPage) accountBalanceLayout(gtx layout.Context) layout.Dimen

func (pg *AcctDetailsPage) acctBalLayout(gtx layout.Context, balType string, balance string, isTotalBalance bool) layout.Dimensions {

mainBalance, subBalance := components.BreakBalance(pg.Printer, balance)

mainLabel := pg.theme.Body1(mainBalance)
subLabel := pg.theme.Caption(subBalance)
subLabel.Color = pg.theme.Color.DeepBlue
marginTop := values.MarginPadding16
marginLeft := values.MarginPadding35

if isTotalBalance {
mainLabel = pg.theme.H4(mainBalance)
subLabel = pg.theme.Body1(subBalance)
marginTop = values.MarginPadding0
marginLeft = values.MarginPadding0
}
Expand All @@ -209,10 +202,11 @@ func (pg *AcctDetailsPage) acctBalLayout(gtx layout.Context, balType string, bal
}.Layout(gtx, func(gtx C) D {
return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return layout.Flex{Alignment: layout.Baseline}.Layout(gtx,
layout.Rigid(mainLabel.Layout),
layout.Rigid(subLabel.Layout),
)
if isTotalBalance {
return components.LayoutBalanceSize(gtx, pg.Load, balance, values.TextSize34)
}

return components.LayoutBalance(gtx, pg.Load, balance)
}),
layout.Rigid(func(gtx C) D {
txt := pg.theme.Body2(balType)
Expand Down
66 changes: 66 additions & 0 deletions ui/page/components/coinformat.go
@@ -0,0 +1,66 @@
package components

import (
"regexp"
"strings"

"gioui.org/layout"
"gioui.org/unit"
"github.com/planetdecred/godcr/ui/load"
"github.com/planetdecred/godcr/ui/values"
)

const defaultScale = .7

var (
doubleOrMoreDecimalPlaces = regexp.MustCompile(`(([0-9]{1,3},*)*\.)\d{2,}`)
oneDecimalPlace = regexp.MustCompile(`(([0-9]{1,3},*)*\.)\d`)
noDecimal = regexp.MustCompile(`([0-9]{1,3},*)+`)
)

func formatBalance(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Value, scale float32) D {

startIndex := 0

if doubleOrMoreDecimalPlaces.MatchString(amount) {
decimalIndex := strings.Index(amount, ".")
startIndex = decimalIndex + 3
} else if oneDecimalPlace.MatchString(amount) {
decimalIndex := strings.Index(amount, ".")
startIndex = decimalIndex + 2
} else if noDecimal.MatchString(amount) {
loc := noDecimal.FindStringIndex(amount)
startIndex = loc[1] // start scaling from the end
}

mainText, subText := amount[:startIndex], amount[startIndex:]

subTextSize := unit.Sp(mainTextSize.V * scale)

return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx,
layout.Rigid(func(gtx C) D {
label := l.Theme.Label(mainTextSize, mainText)
label.Color = l.Theme.Color.DeepBlue
return label.Layout(gtx)
}),
layout.Rigid(func(gtx C) D {
label := l.Theme.Label(subTextSize, subText)
label.Color = l.Theme.Color.DeepBlue
return label.Layout(gtx)
}),
)
}

// 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)
}

func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Value) layout.Dimensions {
return formatBalance(gtx, l, amount, mainTextSize, defaultScale)
}

func LayoutBalanceSizeScale(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Value, scale float32) layout.Dimensions {
return formatBalance(gtx, l, amount, mainTextSize, scale)
}

0 comments on commit aa0dc61

Please sign in to comment.