From 883c93595a1f16dc2a4c3b6f185b79d652769952 Mon Sep 17 00:00:00 2001 From: buck54321 Date: Fri, 1 Sep 2023 17:00:30 -0700 Subject: [PATCH] ui: improve active order interactions (#2171) * improve active order interactions Show all live orders and fill out the remainder of the table with recent orders that are retired. Show (a copy of) the button menu on hover, allowing the user to perform actions without expanding the active order entry. --- client/core/core.go | 13 ++ client/core/types.go | 4 + client/db/bolt/db.go | 7 + client/db/types.go | 7 + client/webserver/locales/en-us.go | 2 + client/webserver/site/src/css/market.scss | 30 +++- .../webserver/site/src/css/market_dark.scss | 5 + .../webserver/site/src/html/bodybuilder.tmpl | 4 +- client/webserver/site/src/html/markets.tmpl | 22 +-- client/webserver/site/src/js/markets.ts | 168 ++++++++++++++---- client/webserver/site/src/js/orders.ts | 11 +- client/webserver/site/src/js/orderutil.ts | 4 + client/webserver/site/src/js/registry.ts | 12 +- dex/testing/dcr/harness.sh | 3 +- .../firo/test/electrumx_network_test.go | 2 + 15 files changed, 237 insertions(+), 57 deletions(-) diff --git a/client/core/core.go b/client/core/core.go index 981d71c829..ad41b934e4 100644 --- a/client/core/core.go +++ b/client/core/core.go @@ -4847,11 +4847,20 @@ func (c *Core) Orders(filter *OrderFilter) ([]*Order, error) { copy(oid[:], filter.Offset) } + var mkt *db.OrderFilterMarket + if filter.Market != nil { + mkt = &db.OrderFilterMarket{ + Base: filter.Market.Base, + Quote: filter.Market.Quote, + } + } + ords, err := c.db.Orders(&db.OrderFilter{ N: filter.N, Offset: oid, Hosts: filter.Hosts, Assets: filter.Assets, + Market: mkt, Statuses: filter.Statuses, }) if err != nil { @@ -4864,6 +4873,10 @@ func (c *Core) Orders(filter *OrderFilter) ([]*Order, error) { if err != nil { return nil, err } + baseWallet, baseOK := c.wallet(corder.BaseID) + quoteWallet, quoteOK := c.wallet(corder.QuoteID) + corder.ReadyToTick = baseOK && baseWallet.connected() && baseWallet.unlocked() && + quoteOK && quoteWallet.connected() && quoteWallet.unlocked() cords = append(cords, corder) } diff --git a/client/core/types.go b/client/core/types.go index 792cd2e36f..102b56798b 100644 --- a/client/core/types.go +++ b/client/core/types.go @@ -1092,6 +1092,10 @@ type OrderFilter struct { Hosts []string `json:"hosts"` Assets []uint32 `json:"assets"` Statuses []order.OrderStatus `json:"statuses"` + Market *struct { + Base uint32 `json:"baseID"` + Quote uint32 `json:"quoteID"` + } `json:"market"` } // Account holds data returned from AccountExport. diff --git a/client/db/bolt/db.go b/client/db/bolt/db.go index 24be9ea44e..d1b5cefa8a 100644 --- a/client/db/bolt/db.go +++ b/client/db/bolt/db.go @@ -1162,6 +1162,13 @@ func (db *BoltDB) Orders(orderFilter *dexdb.OrderFilter) (ords []*dexdb.MetaOrde } } + if orderFilter.Market != nil { + filters = append(filters, func(_ []byte, oBkt *bbolt.Bucket) bool { + baseID, quoteID := intCoder.Uint32(oBkt.Get(baseKey)), intCoder.Uint32(oBkt.Get(quoteKey)) + return orderFilter.Market.Base == baseID && orderFilter.Market.Quote == quoteID + }) + } + if !orderFilter.Offset.IsZero() { offsetOID := orderFilter.Offset var stampB []byte diff --git a/client/db/types.go b/client/db/types.go index 78a80c7554..adbe1a40cd 100644 --- a/client/db/types.go +++ b/client/db/types.go @@ -1192,6 +1192,11 @@ func (n *Notification) Encode() []byte { AddData([]byte(n.TopicID)) } +type OrderFilterMarket struct { + Base uint32 + Quote uint32 +} + // OrderFilter is used to limit the results returned by a query to (DB).Orders. type OrderFilter struct { // N is the number of orders to return in the set. @@ -1206,6 +1211,8 @@ type OrderFilter struct { // Assets is a list of BIP IDs for acceptable assets. A zero-length Assets // means all assets are accepted. Assets []uint32 + // Market limits results to a specific market. + Market *OrderFilterMarket // Statuses is a list of acceptable statuses. A zero-length Statuses means // all statuses are accepted. Statuses []order.OrderStatus diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go index 62e98cc8c0..2a178aadbb 100644 --- a/client/webserver/locales/en-us.go +++ b/client/webserver/locales/en-us.go @@ -94,6 +94,8 @@ var EnUS = map[string]string{ "fee balance": "fee balance", "Sell Orders": "Sell Orders", "Your Orders": "Your Orders", + "sweep_orders": "Hide fully executed orders", + "sweep_order": "Hide this fully executed order", "Recent Matches": "Recent Matches", "Type": "Type", "Side": "Side", diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss index a80192adac..777422568b 100644 --- a/client/webserver/site/src/css/market.scss +++ b/client/webserver/site/src/css/market.scss @@ -130,7 +130,6 @@ div[data-handler=markets] { } .user-order { - margin: 0 20px; border: 1px solid $light_border_color; &:not(:last-child) { @@ -164,6 +163,10 @@ div[data-handler=markets] { &.sell { background-color: $sellcolor_light; } + + &.inactive { + opacity: 0.5; + } } .active-indicator { @@ -187,6 +190,7 @@ div[data-handler=markets] { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 10px; + column-gap: 5px; line-height: 1; .user-order-datum { @@ -895,3 +899,27 @@ div[data-handler=markets] { max-height: none; } } + +.user-order-floaty-menu { + position: absolute; + display: flex; + align-items: center; + z-index: 5; + border-style: none solid solid; + border-width: 0 2px 2px 1px; + border-color: $light_input_border; + background-color: $light_body_bg; + cursor: pointer; + overflow: hidden; + + & > span, + & > a { + margin: 0 5px; + padding-right: 10px; + padding-left: 10px; + + &:hover { + background-color: #7775; + } + } +} diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss index bd78086ae0..f5d3bc4f45 100644 --- a/client/webserver/site/src/css/market_dark.scss +++ b/client/webserver/site/src/css/market_dark.scss @@ -184,6 +184,11 @@ body.dark { border-color: $dark_border_color; background-color: $dark_body_bg; } + + .user-order-floaty-menu { + border-color: $dark_border_color $dark_input_border $dark_input_border $dark_input_border; + background-color: $dark_body_bg; + } } @include media-breakpoint-up(lg) { diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl index 025470f024..e518d94812 100644 --- a/client/webserver/site/src/html/bodybuilder.tmpl +++ b/client/webserver/site/src/html/bodybuilder.tmpl @@ -9,7 +9,7 @@ {{.Title}} - +