Fix bitshares#1463: Handle non-existant assets in exchange and asset pages

Author: svk31

app/assets/locales/locale-en.json

@@ -2,6 +2,8 @@
     "page404": {
         "page_not_found_title": "404 page not found",
         "page_not_found_subtitle": "This page does not exist",
+        "asset_not_found_subtitle": "That asset does not exist",
+        "market_not_found_subtitle": "That market does not exist",
         "home": "Home"
     },
     "counterpart": {

app/components/Blockchain/Asset.jsx

@@ -15,6 +15,7 @@ import {ChainStore} from "bitsharesjs/es";
 import {Apis} from "bitsharesjs-ws";
 import {Tabs, Tab} from "../Utility/Tabs";
 import {CallOrder, FeedPrice} from "common/MarketClasses";
+import Page404 from "../Page404/Page404";
 
 class AssetFlag extends React.Component {
     render() {
@@ -1148,6 +1149,9 @@ Asset = AssetWrapper(Asset, {
 
 class AssetContainer extends React.Component {
     render() {
+        if (this.props.asset === null) {
+            return <Page404 subtitle="asset_not_found_subtitle" />;
+        }
         let backingAsset = this.props.asset.has("bitasset")
             ? this.props.asset.getIn([
                   "bitasset",
@@ -1164,7 +1168,7 @@ AssetContainer = AssetWrapper(AssetContainer, {
 
 export default class AssetSymbolSplitter extends React.Component {
     render() {
-        let symbol = this.props.params.symbol;
+        let symbol = this.props.params.symbol.toUpperCase();
         return <AssetContainer {...this.props} asset={symbol} />;
     }
 }

app/components/Exchange/ExchangeContainer.jsx

@@ -16,7 +16,7 @@ class ExchangeContainer extends React.Component {
     render() {
         let symbols = this.props.params.marketID.toUpperCase().split("_");
         if (symbols[0] === symbols[1]) {
-            return <Page404 />;
+            return <Page404 subtitle="market_not_found_subtitle" />;
         }
         return (
             <AltContainer
@@ -151,6 +151,9 @@ class ExchangeSubscriber extends React.Component {
     }
 
     componentWillMount() {
+        if (this.props.quoteAsset === null || this.props.baseAsset === null) {
+            return;
+        }
         if (this.props.quoteAsset.toJS && this.props.baseAsset.toJS) {
             this._subToMarket(this.props);
             // this._addMarket(this.props.quoteAsset.get("symbol"), this.props.baseAsset.get("symbol"));
@@ -203,6 +206,9 @@ class ExchangeSubscriber extends React.Component {
     }
 
     componentWillReceiveProps(nextProps) {
+        if (nextProps.quoteAsset === null || nextProps.baseAsset === null) {
+            return;
+        }
         /* Prediction markets should only be shown in one direction, if the link goes to the wrong one we flip it */
         if (
             nextProps.baseAsset &&
@@ -238,6 +244,10 @@ class ExchangeSubscriber extends React.Component {
 
     componentWillUnmount() {
         let {quoteAsset, baseAsset} = this.props;
+        if (quoteAsset === null || baseAsset === null) {
+            return;
+        }
+
         MarketsActions.unSubscribeMarket(
             quoteAsset.get("id"),
             baseAsset.get("id")
@@ -269,6 +279,9 @@ class ExchangeSubscriber extends React.Component {
     }
 
     render() {
+        if (this.props.quoteAsset === null || this.props.baseAsset === null)
+            return <Page404 subtitle="market_not_found_subtitle" />;
+
         return (
             <Exchange
                 {...this.props}

app/components/Page404/Page404.jsx

@@ -9,6 +9,9 @@ const dark = require("assets/logo-404-dark.png");
 const midnight = require("assets/logo-404-midnight.png");
 
 class Page404 extends React.Component {
+    static defaultProps = {
+        subtitle: "page_not_found_subtitle"
+    };
     render() {
         let logo;
 
@@ -34,7 +37,7 @@ class Page404 extends React.Component {
                         <Translate content="page404.page_not_found_title" />
                     </div>
                     <div className="page-404-subtitle">
-                        <Translate content="page404.page_not_found_subtitle" />
+                        <Translate content={"page404." + this.props.subtitle} />
                     </div>
                     <div className="page-404-button-back">
                         <Link to={"/"}>

app/components/Utility/AssetWrapper.jsx

@@ -74,7 +74,10 @@ function AssetWrapper(Component, options = {}) {
             let passTroughProps = {};
             let dos = List();
             Object.keys(this.props).forEach(prop => {
-                if (options.propNames.indexOf(prop) !== -1) {
+                if (
+                    this.props[prop] &&
+                    options.propNames.indexOf(prop) !== -1
+                ) {
                     if (options.withDynamic) {
                         if (!options.asList) {
                             dos = dos.push(

app/components/Utility/BindToChainState.jsx

@@ -339,13 +339,17 @@ function BindToChainState(Component, options = {}) {
                     this.default_props[key];
                 if (prop) {
                     let new_obj = ChainStore.getAsset(prop);
+
                     if (
                         new_obj === undefined &&
                         this.required_props.indexOf(key) === -1 &&
                         new_obj !== this.state[key]
                     )
                         new_state[key] = new_obj;
-                    else if (new_obj && new_obj !== this.state[key])
+                    else if (
+                        (new_obj && new_obj !== this.state[key]) ||
+                        new_obj === null
+                    )
                         new_state[key] = new_obj;
                     ++all_objects_counter;
                     if (new_obj !== undefined) ++resolved_objects_counter;
@@ -513,7 +517,13 @@ function BindToChainState(Component, options = {}) {
 
         render() {
             const props = omit(this.props, this.all_chain_props);
-
+            if (Component.name === "ExchangeSubscriber")
+                console.log(
+                    "props:",
+                    this.all_chain_props,
+                    "state:",
+                    this.state
+                );
             for (let prop of this.required_props) {
                 if (this.state[prop] === undefined) {
                     if (typeof options !== "undefined" && options.show_loader) {

app/components/Utility/ChainTypes.js

@@ -9,21 +9,28 @@ const {object_type} = grapheneChainTypes;
 function createChainableTypeChecker(validate) {
     function checkType(isRequired, props, propName, componentName, location) {
         componentName = componentName || ANONYMOUS;
-        if (props[propName] == null) {
-            if (isRequired) {
-                return new Error(
-                    "Required " +
-                        location +
-                        " `" +
-                        propName +
-                        "` was not specified in " +
-                        ("`" + componentName + "`.")
-                );
-            }
-            return null;
-        } else {
-            return validate(props, propName, componentName, location);
-        }
+        if (componentName === "ExchangeSubscriber")
+            console.log(
+                componentName,
+                propName,
+                props[propName],
+                validate(props, propName, componentName, location)
+            );
+        // if (props[propName] == null) {
+        //     if (isRequired) {
+        //         return new Error(
+        //             "Required " +
+        //                 location +
+        //                 " `" +
+        //                 propName +
+        //                 "` was not specified in " +
+        //                 ("`" + componentName + "`.")
+        //         );
+        //     }
+        //     return null;
+        // } else {
+        return validate(props, propName, componentName, location);
+        // }
     }
 
     let chainedCheckType = checkType.bind(null, false);