Merge pull request #458 from rithvikvibhu/misc-fixes

Misc fixes

README.md

@@ -67,7 +67,7 @@ The output app will be created in the `/release/mac` folder. Open `Bob.app` to s
 #### Linux
 
 ```bash
-apt-get install libusb-dev libudev-dev
+apt-get install libusb-1.0-0-dev libudev-dev
 git clone https://github.com/kyokan/bob-wallet
 cd bob-wallet
 npm install
@@ -77,7 +77,7 @@ Build the app package:
 
 ```bash
 npm run package-linux
-``` 
+```
 
 The output app will be created in the `/release` folder. Open `Bob-x.x.x.AppImage` to start the wallet.
 

app/components/BidSearchInput/index.js

@@ -1,16 +1,30 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { I18nContext } from "../../utils/i18n";
 import './bid-search-input.scss';
 
-export default function BidSearchInput(props) {
-  return (
-    <div className={`bid-search-input ${props.className || ''}`}>
-      <div className="bid-search-input__icon" />
-      <input
-        className="bid-search-input__input"
-        placeholder={props.placeholder || "Search your bids"}
-        onChange={props.onChange}
-        value={props.value}
-      />
-    </div>
-  );
+export default class BidSearchInput extends Component {
+  static contextType = I18nContext;
+
+  render() {
+    const {t} = this.context;
+
+    const {
+      className,
+      placeholder,
+      onChange,
+      value
+    } = this.props;
+
+    return (
+      <div className={`bid-search-input ${className || ''}`}>
+        <div className="bid-search-input__icon" />
+        <input
+          className="bid-search-input__input"
+          placeholder={placeholder || t('searchYourBids')}
+          onChange={onChange}
+          value={value}
+        />
+      </div>
+    );
+  }
 }

app/components/Collapsible/collapsible.scss

@@ -38,7 +38,6 @@
     // padding: 1rem;
     position: relative;
     max-height: 35rem;
-    overflow-y: auto;
     height: auto;
     transition: 0.5s ease-out;
 
@@ -48,5 +47,9 @@
       overflow: hidden;
       transition: 0.5s ease-out;
     }
+
+    &--overflowY {
+      overflow-y: auto;
+    }
   }
 }

app/components/Collapsible/index.js

@@ -10,11 +10,13 @@ export default class Collapsible extends Component {
     className: PropTypes.string,
     defaultCollapsed: PropTypes.bool,
     children: PropTypes.node.isRequired,
+    overflowY: PropTypes.bool,
   };
 
   static defaultProps = {
     className: '',
     defaultCollapsed: false,
+    overflowY: true,
   };
 
   static contextType = I18nContext;
@@ -65,7 +67,8 @@ export default class Collapsible extends Component {
   renderContent() {
     return (
       <div className={cn('collapsible__content', {
-        'collapsible__content--hidden': this.state.isCollapsed
+        'collapsible__content--hidden': this.state.isCollapsed,
+        'collapsible__content--overflowY': this.props.overflowY,
       })} >
         { this.props.children }
       </div>

app/components/Sidebar/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import './sidebar.scss';
 import ellipsify from '../../utils/ellipsify';
+import {I18nContext} from "../../utils/i18n";
 import { Logo } from '../Logo';
 import {clientStub} from "../../background/node/client";
 import {NETWORKS} from "../../constants/networks";
@@ -45,6 +46,8 @@ class Sidebar extends Component {
     address: PropTypes.string.isRequired,
   };
 
+  static contextType = I18nContext;
+
   render() {
     return (
       <div className="sidebar">
@@ -60,9 +63,11 @@ class Sidebar extends Component {
   }
 
   renderNav() {
+    const {t} = this.context;
     const title = this.props.walletWatchOnly
       ? `Ledger Wallet (${this.props.walletId})`
       : `Wallet (${this.props.walletId})`;
+
     return (
       <React.Fragment>
         <div className="sidebar__section">{title}</div>
@@ -72,60 +77,60 @@ class Sidebar extends Component {
             to="/account"
             activeClassName="sidebar__action--selected"
           >
-            Portfolio
+            {t('headingPortfolio')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/send"
             activeClassName="sidebar__action--selected"
           >
-            Send
+            {t('headingSend')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/receive"
             activeClassName="sidebar__action--selected"
           >
-            Receive
+            {t('headingReceive')}
           </NavLink>
 
           <NavLink
             className="sidebar__action"
             to="/domain_manager"
             activeClassName="sidebar__action--selected"
           >
-            Domain Manager
+            {t('headingDomainManager')}
           </NavLink>
         </div>
-        <div className="sidebar__section">Top-Level Domains</div>
+        <div className="sidebar__section">{t('topLevelDomains')}</div>
         <div className="sidebar__actions">
           <NavLink
             className="sidebar__action"
             to="/domains"
             activeClassName="sidebar__action--selected"
           >
-            Browse Domains
+            {t('headingBrowseDomains')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/bids"
             activeClassName="sidebar__action--selected"
           >
-            Your Bids
+            {t('headingYourBids')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/watching"
             activeClassName="sidebar__action--selected"
           >
-            Watching
+            {t('headingWatching')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/exchange"
             activeClassName="sidebar__action--selected"
           >
-            Exchange
+            {t('headingExchange')}
           </NavLink>
         </div>
         { this.renderMisc() }
@@ -134,34 +139,37 @@ class Sidebar extends Component {
   }
 
   renderMisc() {
+    const {t} = this.context;
+
     return (
       <>
         <div
           className="sidebar__section"
         >
-          Miscellaneous
+
+          {t('miscellaneous')}
         </div>
         <div className="sidebar__actions">
           <NavLink
             className="sidebar__action"
             to="/get_coins"
             activeClassName="sidebar__action--selected"
           >
-            Claim Airdrop or Name
+            {t('headingClaimAirdropName')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/sign_message"
             activeClassName="sidebar__action--selected"
           >
-            Sign Message
+            {t('headingSignMessage')}
           </NavLink>
           <NavLink
             className="sidebar__action"
             to="/verify_message"
             activeClassName="sidebar__action--selected"
           >
-            Verify Message
+            {t('headingVerifyMessage')}
           </NavLink>
         </div>
       </>
@@ -183,6 +191,8 @@ class Sidebar extends Component {
   }
 
   renderFooter() {
+    const {t} = this.context;
+
     const {
       walletSync,
       walletHeight,
@@ -197,7 +207,7 @@ class Sidebar extends Component {
           <div className="sidebar__footer__title">{newBlockStatus}</div>
         </div>
         <div className="sidebar__footer__row">
-          <div className="sidebar__footer__title">Current Height</div>
+          <div className="sidebar__footer__title">{t('currentHeight')}</div>
           <div className="sidebar__footer__text">
             {walletSync ? `${walletHeight}/${chainHeight}` : `${chainHeight}` || '--'}
           </div>
@@ -208,7 +218,7 @@ class Sidebar extends Component {
           </div>
         </div>
         <div className="sidebar__footer__row">
-          <div className="sidebar__footer__title">Current Hash</div>
+          <div className="sidebar__footer__title">{t('currentHash')}</div>
           <div className="sidebar__footer__text">
             {tip ? ellipsify(tip) : '--'}
           </div>

app/components/TLDInput/index.js

@@ -6,6 +6,7 @@ import c from 'classnames';
 import * as nameActions from '../../ducks/names';
 import { verifyName } from '../../utils/nameChecker';
 import { decodePunycode } from '../../utils/nameHelpers';
+import { I18nContext } from "../../utils/i18n";
 import './TLDInput.scss';
 
 @withRouter
@@ -26,6 +27,8 @@ class TLDInput extends Component {
     getNameInfo: PropTypes.func.isRequired
   };
 
+  static contextType = I18nContext;
+
   state = {
     inputValue: '',
     showError: false
@@ -56,6 +59,8 @@ class TLDInput extends Component {
   };
 
   render() {
+    const {t} = this.context;
+
     const { showError } = this.state;
     const { minimalErrorDisplay, greyTheme } = this.props;
     return (
@@ -75,7 +80,7 @@ class TLDInput extends Component {
             value={this.state.inputValue}
             onChange={this.handleInputValueChange}
             onKeyDown={e => e.key === 'Enter' && this.handleSearchClick()}
-            placeholder="Search a top-level domain"
+            placeholder={t('searchInputPlaceholder')}
             autoFocus
           />
           <div

app/components/Topbar/index.js

@@ -9,6 +9,7 @@ import SyncStatus from '../SyncStatus';
 import { Logo } from '../Logo';
 import './topbar.scss';
 import { displayBalance } from '../../utils/balances';
+import { I18nContext } from "../../utils/i18n";
 import * as walletActions from '../../ducks/walletActions';
 
 @withRouter
@@ -50,6 +51,8 @@ class Topbar extends Component {
     walletWatchOnly: PropTypes.bool.isRequired,
   };
 
+  static contextType = I18nContext;
+
   state = {
     inputValue: '',
     isShowingSettingMenu: false,
@@ -116,6 +119,8 @@ class Topbar extends Component {
   }
 
   renderSettingIcon() {
+    const {t} = this.context;
+
     const { unconfirmedBalance, spendableBalance, walletId } = this.props;
     const { isShowingSettingMenu } = this.state;
     const walletName = this.props.walletWatchOnly
@@ -134,9 +139,9 @@ class Topbar extends Component {
             ? (
               <div className="setting-menu">
                 <div className="setting-menu__balance-container">
-                  {this.renderSettingGroup('Wallet ID', walletName)}
-                  {this.renderSettingGroup('Total Balance', `HNS ${displayBalance(unconfirmedBalance)}`)}
-                  {this.renderSettingGroup('Spendable Balance', `HNS ${displayBalance(spendableBalance)}`)}
+                  {this.renderSettingGroup(t('walletID'), walletName)}
+                  {this.renderSettingGroup(t('balanceTotal'), `HNS ${displayBalance(unconfirmedBalance)}`)}
+                  {this.renderSettingGroup(t('balanceSpendable'), `HNS ${displayBalance(spendableBalance)}`)}
                 </div>
                 <div className="setting-menu__items">
                   <div
@@ -147,7 +152,7 @@ class Topbar extends Component {
                       this.setState({ isShowingSettingMenu: false });
                     }}
                   >
-                    Settings
+                    {t('headingSettings')}
                   </div>
                   <div
                     className="setting-menu__items__item"
@@ -157,7 +162,7 @@ class Topbar extends Component {
                       this.setState({ isShowingSettingMenu: false });
                     }}
                   >
-                    Logout
+                    {t('logout')}
                   </div>
                 </div>
               </div>

app/components/Transactions/Transaction/index.js

@@ -32,7 +32,6 @@ const FINALIZE = 'FINALIZE';
     explorer: state.node.explorer
   })
 )
-
 class Transaction extends Component {
   static propTypes = {
     explorer: PropTypes.object.isRequired,