Merge pull request #546 from DemocracyEarth/mobile

Nicer error messages.

src/components/Account/Account.jsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 
 import { shortenCryptoName } from 'utils/strings';
 import Search, { includeInSearch } from 'components/Search/Search';
+import parser from 'html-react-parser';
 
 import i18n from 'i18n';
 import { config } from 'config'
@@ -81,7 +82,15 @@ const AccountQuery = ({ publicAddress, width, height, format, hidden }) => {
         </div>
       );
     }
-    if (error) return `Error! ${error}`;
+    if (error) return (
+      <>
+        {(format === 'searchBar') ?
+          <Search />
+          :
+          <div className="empty failure">{parser(i18n.t('failure-short', { errorMessage: error }))}</div>
+        }
+      </>
+    );
 
     if (data) {
       label = getENSName(data, publicAddress);

src/components/Browser/Browser.jsx

@@ -136,6 +136,16 @@ class Browser extends Component {
       return <Timeline param={this.props.match.params.search} view={routerView.SEARCH} format="searchBar" />
     }
 
+    if (this.props.match.params.token) {
+      return <Search contextTag={{ id: this.props.match.params.token, text: i18n.t('search-token', { searchTerm: this.props.match.params.token }) }} />
+    }
+
+    if (this.props.match.params.date) {
+      let options = { year: 'numeric', month: 'short', day: 'numeric' };
+      var today = new Date(this.props.match.params.date);
+      return <Search contextTag={{ id: this.props.match.params.date, text: i18n.t('search-date', { searchTerm: today.toLocaleDateString('en-US', options) }) }} />
+    }
+
     return <Search />;
   }
 

src/components/DAO/DAO.jsx

@@ -8,6 +8,7 @@ import { findLast } from 'lodash';
 import { gui } from 'lib/const';
 import { shortenCryptoName } from 'utils/strings';
 import Search, { includeInSearch } from 'components/Search/Search';
+import parser from 'html-react-parser';
 
 import i18n from 'i18n';
 import { config } from 'config'
@@ -43,7 +44,7 @@ const DAOQuery = ({ publicAddress, width, height, format }) => {
   if (loading) {
     return null;
   }
-  if (error) return `Error! ${error}`;
+  if (error) return <div className="empty failure">{parser(i18n.t('failure-short', { errorMessage: error }))}</div>;
 
   const daoTitle = findLast(data.moloches, { id: publicAddress }).title;
   let label;

src/components/Dapp/Dapp.jsx

@@ -108,12 +108,18 @@ export default class Dapp extends Component {
 
     this.onConnect = this.onConnect.bind(this);
     this.reset = this.reset.bind(this);
+    this.resize = this.resize.bind(this);
   }
 
   async componentDidMount() {
     if (this.web3Modal.cachedProvider) {
       this.onConnect();
     }
+    window.addEventListener('resize', this.resize)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize)
   }
 
   async onConnect() {
@@ -131,6 +137,7 @@ export default class Dapp extends Component {
       connected: true,
       address,
       networkId,
+      mobile: (window.innerWidth < 768)
     });
   }
 
@@ -158,6 +165,14 @@ export default class Dapp extends Component {
     });
   }
 
+  resize() {
+    if (window.innerWidth < 768 && !this.state.mobile) {
+      this.setState({ mobile: true });
+    } else if (window.innerWidth >= 768 && this.state.mobile) {
+      this.setState({ mobile: false });
+    }
+  }
+
   async reset() {
     const { web3 } = this.state;
     if (web3 && web3.currentProvider && web3.currentProvider.close) {
@@ -183,7 +198,11 @@ export default class Dapp extends Component {
                     <Browser address={this.state.address} walletConnect={this.onConnect} walletReset={this.reset} />
                     <Layout address={this.state.address} />
                   </div>
-                  <Layout address={this.state.address} mobileMenu={true} />
+                  {(this.state.mobile) ?
+                    <Layout address={this.state.address} mobileMenu={true} />
+                    :
+                    null
+                  }                  
                 </>
               }
             />

src/components/Menu/Sidebar.jsx

@@ -9,6 +9,8 @@ import { query } from 'components/Menu/queries';
 import { reduce, sortBy } from 'lodash';
 import { view as routerView } from 'lib/const'
 
+import parser from 'html-react-parser';
+
 import back from 'images/back.svg';
 import i18n from 'i18n';
 import 'styles/Dapp.css';
@@ -231,7 +233,15 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
       </div>
     );
   }
-  if (error) return `Error! ${error}`;
+  if (error) return (
+    <div id="sidebar" className={_getScrollClass(scrollUp)}>
+      <div className="menu">
+        <div className="empty failure">
+          {parser(i18n.t('failure', { errorMessage: error }))}
+        </div>
+      </div>
+    </div>
+  );
 
   const defaultMenu = _getMenu(view, data, address, param);
   const sorted = _getDAOs(data);

src/components/Timeline/Timeline.jsx

@@ -30,6 +30,7 @@ import { uniqBy, orderBy as _orderBy } from 'lodash';
 import { getDescription } from 'components/Post/Post';
 
 import i18n from 'i18n';
+import parser from 'html-react-parser';
 
 import notFound from 'images/not-found.svg';
 import ethereum from 'images/ethereum.svg';
@@ -165,7 +166,15 @@ const Feed = (props) => {
     }
     return <Placeholder />;
   } 
-  if (error) return <p>Error!</p>;
+  if (error) return (
+    <>
+      {(props.format === 'searchBar') ?
+        <Search />
+        :
+        <div className="empty failure">{parser(i18n.t('failure', { errorMessage: error }))}</div>
+      }
+    </>
+  );
 
   const accountAddress = props.address;
   const timestamp = Math.floor(new Date().getTime() / 1000);

src/components/Vote/Vote.jsx

@@ -12,6 +12,7 @@ import Transaction from 'components/Transaction/Transaction';
 
 import { view as routerView } from 'lib/const';
 
+import parser from 'html-react-parser';
 import { query } from 'components/Vote/queries'
 import { config } from 'config'
 import 'styles/Dapp.css';
@@ -60,7 +61,7 @@ const VoteQuery = (props) => {
       </div>
     );
   }
-  if (error) return `Error! ${error}`;
+  if (error) return <div className="empty failure">{parser(i18n.t('failure', { errorMessage: error }))}</div>;
 
   if (data.votes.length === 0) {
     return (

src/lang/en.json

@@ -150,6 +150,7 @@
   "email-sample": "[email protected]",
   "password-sample": "make it long.",
   "sign-in": "Connect Wallet",
+  "connect": "Connect",
   "password": "Password",
   "use-social-media": "or use:",
   "facebook": "Facebook",
@@ -876,10 +877,11 @@
   "search-user": "👤 {{searchTerm}}",
   "search-collective": "🏳️ {{searchTerm}}",
   "search-contract": "💡 {{searchTerm}}",
+  "search-token": "💰 {{searchTerm}}",
   "search-summon": "🔥 Summon of {{dao}}",
   "search-ragequit": "💸 Ragequit of {{shares}} shares from {{dao}} by {{address}}",
   "search-default": "🔍 {{searchTerm}}",
-  "search-dates": "📅 {{searchTerm}}",
+  "search-date": "📅 {{searchTerm}}",
   "moloch-unsponsored": "Unsponsored Proposal",
   "voted-yes": "<strong>Yes</strong> to <em>{{proposal}}</em>",
   "voted-no": "<strong>No</strong> to <em>{{proposal}}</em>",
@@ -941,5 +943,7 @@
   "meta-token": "Proposals with {{token}} token.",
   "meta-proposal": "Votes on a DAO proposal.",
   "meta-date": "Proposals from {{date}}.",
-  "meta-search": "Proposals mentioning {{search}}."
+  "meta-search": "Proposals mentioning {{search}}.",
+  "failure": "😱 Blockchain unreachable<br>{{errorMessage}}<br><a href='https://status.thegraph.com/' target='_blank'>Check network status.</a>",
+  "failure-short": "😱"
 }

src/lib/const.js

@@ -50,7 +50,7 @@ const _gui = {
   LIMIT_TRANSACTIONS_PER_LEDGER: 10,
   COLLECTIVE_MAX_FETCH: 25,
   MAX_LENGTH_ACCOUNT_NAMES: 19,
-  MAX_LENGTH_TAG_LABELS: 25,
+  MAX_LENGTH_TAG_LABELS: 15,
 };
 
 /**

src/styles/Dapp.css

@@ -5963,6 +5963,7 @@ blockquote {
 .burger-menu.burger-menu-close {
   transition: width 0.15s ease 0.15s;
   width:0px;
+  border: 0px;
 }
 
 .hero-button {
@@ -8086,14 +8087,18 @@ width: 1px;
 
 .empty {
   border: 1px solid #7c839d;
-  font-size: 0.8em;
-  padding: 0px 5px;
+  padding: 5px;
   text-align: center;
   border-radius: 5px;
   color: #7c839d;
-  line-height: 28px;
+  line-height: 24px;
   background-color: #f0eef4;
   margin-bottom: 20px;
+  font-size:14px;
+}
+
+.empty.failure {
+  margin: 10px;
 }
 
 .sidebar-label.sidebar-label-dao {
@@ -9015,6 +9020,13 @@ h4 {
   .details.details-open {
     border: 1px solid var(--menu-sidebar-selected);
   }
+
+  .submenu {
+    padding: 0px;
+    background-color: transparent;
+    border-radius: 0px;
+    margin-bottom: 0px;
+  }
 }