multi: Improve UX when DEX is unreachable. (#3568)

Add a visible overlay to the trade page when the DEX server is
disconnected or running an incompatible protocol version. Previously,
a version mismatch only produced a generic "DEX auth error" with no
explanation. Now the client sends a clear "Server version incompatible"
notification and marks the connection as unusable so the overlay
displays correctly and the misleading auth error is suppressed.

Author: JoeGruffins

client/core/bookie.go

@@ -28,6 +28,7 @@ var (
 	bookFeedTimeout = time.Minute
 
 	outdatedClientErr = errors.New("outdated client")
+	outdatedServerErr = errors.New("outdated server")
 )
 
 // BookFeed manages a channel for receiving order book updates. It is imperative
@@ -844,6 +845,8 @@ func (dc *dexConnection) refreshServerConfig() (*msgjson.ConfigResult, error) {
 		err := fmt.Errorf("unsupported server API version %v", apiVer)
 		if apiVer > supportedAPIVers[len(supportedAPIVers)-1] {
 			err = fmt.Errorf("%v: %w", err, outdatedClientErr)
+		} else if apiVer < supportedAPIVers[0] {
+			err = fmt.Errorf("%v: %w", err, outdatedServerErr)
 		}
 		return nil, err
 	}

client/core/core.go

@@ -5498,8 +5498,9 @@ func (c *Core) initializeDEXConnection(dc *dexConnection, crypter encrypt.Crypte
 	// Pending bonds will be handled by authDEX. Expired bonds will be
 	// refunded by rotateBonds.
 
-	// If the connection is down, authDEX will fail on Send.
-	if dc.IsDown() {
+	// If the connection is down or unusable (e.g. version mismatch),
+	// authDEX will fail.
+	if dc.IsDown() || dc.status() != comms.Connected {
 		c.log.Warnf("Connection to %v not available for authorization. "+
 			"It will automatically authorize when it connects.", dc.acct.host)
 		subject, details := c.formatDetails(TopicDEXDisconnected, dc.acct.host)
@@ -8823,6 +8824,13 @@ func sendOutdatedClientNotification(c *Core, dc *dexConnection) {
 	c.notify(newUpgradeNote(TopicUpgradeNeeded, subject, details, db.WarningLevel))
 }
 
+// sendOutdatedServerNotification will send a notification to the UI that
+// indicates the DEX server is running an incompatible older protocol version.
+func sendOutdatedServerNotification(c *Core, dc *dexConnection) {
+	subject, details := c.formatDetails(TopicServerVersionTooOld, dc.acct.host)
+	c.notify(newUpgradeNote(TopicServerVersionTooOld, subject, details, db.ErrorLevel))
+}
+
 func isOnionHost(addr string) bool {
 	host, _, err := net.SplitHostPort(addr)
 	if err != nil {
@@ -9032,8 +9040,12 @@ func (c *Core) startDexConnection(acctInfo *db.AccountInfo, dc *dexConnection) e
 	if err != nil {
 		// Sort out the bonds with current time to indicate refundable bonds.
 		categorizeBonds(time.Now().Unix())
+		// Mark the connection as unusable so the UI shows disconnected.
+		atomic.StoreUint32(&dc.connectionStatus, uint32(comms.Disconnected))
 		if errors.Is(err, outdatedClientErr) {
 			sendOutdatedClientNotification(c, dc)
+		} else if errors.Is(err, outdatedServerErr) {
+			sendOutdatedServerNotification(c, dc)
 		}
 		return err // no dc.acct.dexPubKey
 	}
@@ -9067,8 +9079,12 @@ func (c *Core) handleReconnect(host string) {
 	// server configuration.
 	cfg, err := dc.refreshServerConfig()
 	if err != nil {
+		// Mark the connection as unusable so the UI shows disconnected.
+		atomic.StoreUint32(&dc.connectionStatus, uint32(comms.Disconnected))
 		if errors.Is(err, outdatedClientErr) {
 			sendOutdatedClientNotification(c, dc)
+		} else if errors.Is(err, outdatedServerErr) {
+			sendOutdatedServerNotification(c, dc)
 		}
 		c.log.Errorf("handleReconnect: Unable to apply new configuration for DEX at %s: %v", host, err)
 		return

client/core/locale_ntfn.go

@@ -262,6 +262,10 @@ var originLocale = map[Topic]*translation{
 		subject:  intl.Translation{T: "Upgrade needed"},
 		template: intl.Translation{T: "You may need to update your client to trade at %s.", Notes: "args: [host]"},
 	},
+	TopicServerVersionTooOld: {
+		subject:  intl.Translation{T: "Server version incompatible"},
+		template: intl.Translation{T: "The server at %s is running an incompatible older protocol version.", Notes: "args: [host]"},
+	},
 	TopicMMSnapshotsNotSupported: {
 		subject:  intl.Translation{T: "MM Snapshots Not Supported"},
 		template: intl.Translation{T: "The server at %s does not support market maker epoch snapshots.", Notes: "args: [host]"},

client/core/notification.go

@@ -721,6 +721,7 @@ type UpgradeNote struct {
 
 const (
 	TopicUpgradeNeeded           Topic = "UpgradeNeeded"
+	TopicServerVersionTooOld     Topic = "ServerVersionTooOld"
 	TopicMMSnapshotsNotSupported Topic = "MMSnapshotsNotSupported"
 )
 

client/webserver/locales/en-us.go

@@ -66,6 +66,8 @@ var EnUS = map[string]*intl.Translation{
 	"price":                          {T: "price"},
 	"volume":                         {T: "volume"},
 	"volume_24":                      {T: "24 Hr. Volume"},
+	"Connection to server failed":    {T: "Connection to server failed"},
+	"Waiting to reconnect...":        {T: "Waiting to reconnect..."},
 	"High":                           {T: "High"},
 	"Low":                            {T: "Low"},
 	"buys":                           {T: "buys"},

client/webserver/site/src/html/markets.tmpl

@@ -98,6 +98,11 @@
       </div>
 
       <div class="flex-grow-1 position-relative">
+        <div id="disconnectedOverlay" class="d-hide fill-abs flex-center flex-column" style="z-index:10; background-color: rgba(0,0,0,0.5);">
+          <span class="ico-disconnected fs40 text-danger mb-3"></span>
+          <span class="fs22 demi">[[[Connection to server failed]]]</span>
+          <span class="fs16 grey mt-2">[[[Waiting to reconnect...]]]</span>
+        </div>
         <div id="mainContent">
 
           {{- /* ORDER BOOK */ -}}

client/webserver/site/src/js/markets.ts

@@ -1135,7 +1135,7 @@ export default class MarketsPage extends BasePage {
       let errMsg = intl.prep(intl.ID_CONNECTION_FAILED)
       if (dex.disabled) errMsg = intl.prep(intl.ID_DEX_DISABLED_MSG)
       page.chartErrMsg.textContent = errMsg
-      Doc.show(page.chartErrMsg)
+      Doc.show(page.chartErrMsg, page.disconnectedOverlay)
       return
     }
 
@@ -1147,7 +1147,7 @@ export default class MarketsPage extends BasePage {
     const [bui, qui] = [app().unitInfo(baseID, dex), app().unitInfo(quoteID, dex)]
 
     const rateConversionFactor = OrderUtil.RateEncodingFactor / bui.conventional.conversionFactor * qui.conventional.conversionFactor
-    Doc.hide(page.maxOrd, page.chartErrMsg)
+    Doc.hide(page.maxOrd, page.chartErrMsg, page.disconnectedOverlay)
     if (this.maxEstimateTimer) {
       window.clearTimeout(this.maxEstimateTimer)
       this.maxEstimateTimer = null