Add ID_VERSION_NOT_SUPPORTED message on loaderMsg when version not supported

lint

Author: vctt94

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

@@ -14,6 +14,7 @@ export const ID_SHOW_ADDITIONAL_SETTINGS = 'ID_SHOW_ADDITIONAL_SETTINGS'
 export const ID_BUY = 'ID_BUY'
 export const ID_SELL = 'ID_SELL'
 export const ID_NOT_SUPPORTED = 'ID_NOT_SUPPORTED'
+export const ID_VERSION_NOT_SUPPORTED = 'ID_VERSION_NOT_SUPPORTED'
 export const ID_CONNECTION_FAILED = 'ID_CONNECTION_FAILED'
 export const ID_ORDER_PREVIEW = 'ID_ORDER_PREVIEW'
 export const ID_CALCULATING = 'ID_CALCULATING'
@@ -111,6 +112,7 @@ export const enUS: Locale = {
   [ID_BUY]: 'Buy',
   [ID_SELL]: 'Sell',
   [ID_NOT_SUPPORTED]: '{{ asset }} is not supported',
+  [ID_VERSION_NOT_SUPPORTED]: 'version: {{ version }} of {{ asset }} is not supported',
   [ID_CONNECTION_FAILED]: 'Connection to dex server failed. You can close dexc and try again later or wait for it to reconnect.',
   [ID_ORDER_PREVIEW]: 'Total: {{ total }} {{ asset }}',
   [ID_CALCULATING]: 'calculating...',

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

@@ -604,27 +604,74 @@ export default class MarketsPage extends BasePage {
   /* assetsAreSupported is true if all the assets of the current market are
    * supported
    */
-  assetsAreSupported () {
-    const [base, quote] = [this.market.base, this.market.quote]
-    if (!base || !quote) return false
+  assetsAreSupported (): {
+    isSupported: boolean;
+    text: string;
+    } {
+    const { market } = this
+    const [base, quote] = [market.base, market.quote]
+    if (!base || !quote) {
+      const symbol = market.base ? market.quoteCfg.symbol : market.baseCfg.symbol
+      return {
+        isSupported: false,
+        text: intl.prep(intl.ID_NOT_SUPPORTED, { asset: symbol.toUpperCase() })
+      }
+    }
     const { baseCfg, quoteCfg } = this.market
     // check if versions are supported. If asset is a token, we check if its
     // parent supports the version.
+    let text = ''
     if (base.token && quote.token) {
       const bParent = app().assets[base.token.parentID]
       const qParent = app().assets[quote.token.parentID]
-      return qParent.info?.versions.includes(quoteCfg.version) && bParent.info?.versions.includes(baseCfg.version)
+      if (!bParent.info?.versions.includes(baseCfg.version)) {
+        text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: bParent.symbol.toUpperCase(), version: baseCfg.version + '' })
+      }
+      if (!qParent.info?.versions.includes(quoteCfg.version)) {
+        text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: qParent.symbol.toUpperCase(), version: quoteCfg.version + '' })
+      }
+      return {
+        isSupported: !!qParent.info?.versions.includes(quoteCfg.version) && !!bParent.info?.versions.includes(baseCfg.version),
+        text
+      }
     }
     if (base.token) {
       const bParent = app().assets[base.token.parentID]
-      return quote.info?.versions.includes(quoteCfg.version) && bParent.info?.versions.includes(baseCfg.version)
+      if (!bParent.info?.versions.includes(baseCfg.version)) {
+        text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: bParent.symbol.toUpperCase(), version: baseCfg.version + '' })
+      }
+      if (!quote.info?.versions.includes(quoteCfg.version)) {
+        text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: quote.symbol.toUpperCase(), version: quoteCfg.version + '' })
+      }
+      return {
+        isSupported: !!quote.info?.versions.includes(quoteCfg.version) && !!bParent.info?.versions.includes(baseCfg.version),
+        text
+      }
     }
     if (quote.token) {
       const qParent = app().assets[quote.token.parentID]
-      return base.info?.versions.includes(baseCfg.version) && qParent.info?.versions.includes(quoteCfg.version)
+      if (!base.info?.versions.includes(baseCfg.version)) {
+        text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: base.symbol.toUpperCase(), version: baseCfg.version + '' })
+      }
+      if (!qParent.info?.versions.includes(quoteCfg.version)) {
+        text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: quote.symbol.toUpperCase(), version: quoteCfg.version + '' })
+      }
+      return {
+        isSupported: !!base.info?.versions.includes(baseCfg.version) && !!qParent.info?.versions.includes(quoteCfg.version),
+        text
+      }
     }
     // if none them are token, just check if own asset is supported.
-    return base.info?.versions.includes(baseCfg.version) && quote.info?.versions.includes(quoteCfg.version)
+    if (!base.info?.versions.includes(baseCfg.version)) {
+      text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: base.symbol.toUpperCase(), version: baseCfg.version + '' })
+    }
+    if (!quote.info?.versions.includes(quoteCfg.version)) {
+      text = intl.prep(intl.ID_VERSION_NOT_SUPPORTED, { asset: quote.symbol.toUpperCase(), version: quoteCfg.version + '' })
+    }
+    return {
+      isSupported: !!base.info?.versions.includes(baseCfg.version) && !!quote.info?.versions.includes(quoteCfg.version),
+      text
+    }
   }
 
   /*
@@ -660,7 +707,7 @@ export default class MarketsPage extends BasePage {
     // and ready for trading the form should show up.
     Doc.hide(page.orderForm, page.orderTypeBttns)
     const feePaid = !this.hasFeePending()
-    const assetsAreSupported = this.assetsAreSupported()
+    const assetsAreSupported = this.assetsAreSupported().isSupported
     const { base, quote } = this.market
     const hasWallets = base && app().assets[base.id].wallet && quote && app().assets[quote.id].wallet
 
@@ -673,15 +720,15 @@ export default class MarketsPage extends BasePage {
    * supported
    */
   setLoaderMsgVisibility () {
-    const { page, market } = this
+    const { page } = this
 
-    if (this.assetsAreSupported()) {
+    const { isSupported, text } = this.assetsAreSupported()
+    if (isSupported) {
       // make sure to hide the loader msg
       Doc.hide(page.loaderMsg)
       return
     }
-    const symbol = market.base ? market.quoteCfg.symbol : market.baseCfg.symbol
-    page.loaderMsg.textContent = intl.prep(intl.ID_NOT_SUPPORTED, { asset: symbol.toUpperCase() })
+    page.loaderMsg.textContent = text
     Doc.show(page.loaderMsg)
     Doc.hide(page.noWallet)
   }