Merge branch 'styled-components-refactor' of github.com:satoshilabs/trezor-wallet into styled-components-refactor

src/js/components/CoinLogo/index.js

@@ -27,7 +27,7 @@ const CoinLogo = ({
     return (
         <Logo
             className={className}
-            coinImg={coinImg || coinImgUrl}
+            coinImg={coinImgName ? coinImgUrl : coinImg}
         />
     );
 };
@@ -35,7 +35,7 @@ const CoinLogo = ({
 CoinLogo.propTypes = {
     className: PropTypes.string,
     coinImg: PropTypes.string,
-    coinNetwork: PropTypes.string.isRequired,
+    coinNetwork: PropTypes.string,
 };
 
 export default CoinLogo;

src/js/components/Paragraph/index.js

@@ -28,7 +28,7 @@ P.propTypes = {
     children: PropTypes.oneOfType([
         PropTypes.array,
         PropTypes.string,
-    ]).isRequired,
+    ]),
 };
 
 export default P;

src/js/config/variables.js

@@ -1,4 +1,5 @@
 export const FONT_SIZE = {
+    SMALLEST: '10px',
     SMALLER: '12px',
     SMALL: '14px',
     BASE: '16px',

src/js/views/Landing/index.js

@@ -11,6 +11,7 @@ import Notifications, { Notification } from 'components/Notification';
 import colors from 'config/colors';
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
+import { isWebUSB } from 'utils/device';
 
 import BrowserNotSupported from './components/BrowserNotSupported';
 import ConnectDevice from './components/ConnectDevice';
@@ -72,7 +73,6 @@ export default (props: Props) => {
     const bridgeRoute: boolean = props.router.location.state.hasOwnProperty('bridge');
     const deviceLabel = props.wallet.disconnectRequest ? props.wallet.disconnectRequest.label : '';
 
-    const hasWebUsb = transport && transport.version.indexOf('webusb') >= 0;
     const shouldShowInstallBridge = connectError || bridgeRoute;
     const shouldShowConnectDevice = props.wallet.ready && devices.length < 1;
     const shouldShowDisconnectDevice = !!props.wallet.disconnectRequest;
@@ -111,7 +111,7 @@ export default (props: Props) => {
 
                                 <ConnectDevice
                                     deviceLabel={deviceLabel}
-                                    showWebUsb={hasWebUsb}
+                                    showWebUsb={isWebUSB(transport)}
                                     showDisconnect={shouldShowDisconnectDevice}
                                 />
 
@@ -119,7 +119,7 @@ export default (props: Props) => {
 
                                 {shouldShowConnectDevice && (
                                     <LandingFooterWrapper>
-                                        {hasWebUsb && (
+                                        {isWebUSB(transport) && (
                                             <P>
                                                 <LandingFooterTextWrapper>
                                                     Device not recognized?

src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js

@@ -83,7 +83,7 @@ const iconShape = {
 RowCoin.propTypes = {
     coin: PropTypes.shape({
         name: PropTypes.string.isRequired,
-        network: PropTypes.string.isRequired,
+        network: PropTypes.string,
         img: PropTypes.string,
     }).isRequired,
     iconLeft: PropTypes.shape(iconShape),

src/js/views/Wallet/components/TopNavigationAccount/index.js

@@ -76,7 +76,7 @@ class Indicator extends Component<Props, State> {
     }
 }
 
-const AccountTabs = (props: any) => {
+const TopNavigationAccount = (props: any) => {
     const urlParams = props.match.params;
     const basePath = `/device/${urlParams.device}/network/${urlParams.network}/account/${urlParams.account}`;
 
@@ -102,4 +102,4 @@ const AccountTabs = (props: any) => {
     );
 };
 
-export default AccountTabs;
+export default TopNavigationAccount;

src/js/views/Wallet/index.js

@@ -14,10 +14,10 @@ import Footer from 'components/Footer';
 import ModalContainer from 'components/modal';
 import Notifications from 'components/Notification';
 import Log from 'components/Log';
-import DeviceSettingsTabs from './views/DeviceSettingsTabs';
 
 import LeftNavigation from './components/LeftNavigation/Container';
-import AccountTabs from './components/Tabs';
+import TopNavigationAccount from './components/TopNavigationAccount';
+import TopNavigationDeviceSettings from './components/TopNavigationDeviceSettings';
 
 type WalletContainerProps = {
     wallet: $ElementType<State, 'wallet'>,
@@ -80,8 +80,8 @@ const Wallet = (props: WalletContainerProps) => (
             <LeftNavigation />
             <MainContent>
                 <Navigation>
-                    <Route path="/device/:device/network/:network/account/:account" component={AccountTabs} />
+                    <Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} />
-                    <Route path="/device/:device/device-settings" component={DeviceSettingsTabs} />
+                    <Route path="/device/:device/device-settings" component={TopNavigationDeviceSettings} />
                 </Navigation>
                 <Notifications />
                 <Log />

src/js/views/Wallet/views/AccountReceive/index.js

@@ -7,7 +7,7 @@ import Tooltip from 'rc-tooltip';
 import { QRCode } from 'react-qr-svg';
 
 import { Notification } from 'components/Notification';
-import SelectedAccount from '../SelectedAccount';
+import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 
 import type { Props } from './index';
 
@@ -16,7 +16,7 @@ const StyledH2 = styled(H2)`
     padding: 20px 48px;
 `;
 
-const Receive = (props: Props) => {
+const AccountReceive = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const {
         account,
@@ -96,6 +96,6 @@ const Receive = (props: Props) => {
 
 export default (props: Props) => (
     <SelectedAccount {...props}>
-        <Receive {...props} />
+        <AccountReceive {...props} />
     </SelectedAccount>
 );

src/js/views/Wallet/views/AccountSend/index.js

@@ -5,16 +5,15 @@ import styled from 'styled-components';
 import Select from 'react-select';
 import { H2 } from 'components/Heading';
 import { calculate, validation } from 'actions/SendFormActions';
+import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 import type { Token } from 'flowtype';
 import AdvancedForm from './components/AdvancedForm';
 import PendingTransactions from './components/PendingTransactions';
 import { FeeSelectValue, FeeSelectOption } from './components/FeeSelect';
-import SelectedAccount from '../SelectedAccount';
-
 
 import type { Props } from './index';
 
-export default class SendContainer extends Component<Props> {
+export default class AccountSendContainer extends Component<Props> {
     componentWillReceiveProps(newProps: Props) {
         calculate(this.props, newProps);
         validation(newProps);

src/js/views/Wallet/views/AccountSignVerify/index.js

@@ -40,7 +40,7 @@ const Textarea = styled.textarea`
 
 const Input = styled.input``;
 
-const SignVerify = () => (
+const AccountSignVerify = () => (
     <Wrapper>
         <Sign>
             <StyledH2>Sign message</StyledH2>
@@ -63,4 +63,4 @@ const SignVerify = () => (
     </Wrapper>
 );
 
-export default SignVerify;
+export default AccountSignVerify;

src/js/views/index.js

@@ -10,6 +10,11 @@ import LandingContainer from 'views/Landing/Container';
 
 // wallet views
 import WalletContainer from 'views/Wallet';
+import AccountSummary from 'views/Wallet/views/AccountSummary/Container';
+import AccountSend from 'views/Wallet/views/AccountSend/Container';
+import AccountReceive from 'views/Wallet/views/AccountReceive/Container';
+import AccountSignVerify from 'views/Wallet/views/AccountSignVerify';
+
 import WalletDashboard from 'views/Wallet/views/Dashboard';
 import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';
 import WalletSettings from 'views/Wallet/views/WalletSettings';
@@ -18,13 +23,6 @@ import WalletInitialize from 'views/Wallet/views/Initialize';
 import WalletAcquire from 'views/Wallet/views/Acquire';
 import WalletUnreadableDevice from 'views/Wallet/views/UnreadableDevice';
 
-// wallet views - accounts
-// import SummaryContainer from './Wallet/components/Summary/Container';
-import AccountContainer from 'views/Wallet/views/Account/Container';
-import SignVerifyContainer from './Wallet/components/Sign';
-import ReceiveContainer from './Wallet/components/Receive/Container';
-import SendFormContainer from './Wallet/components/Send/Container';
-
 import store, { history } from '../store';
 
 const App = () => (
@@ -45,11 +43,11 @@ const App = () => (
                             <Route exact path="/device/:device/bootloader" component={WalletBootloader} />
                             <Route exact path="/device/:device/initialize" component={WalletInitialize} />
                             <Route exact path="/device/:device/settings" component={WalletDeviceSettings} />
-                            <Route exact path="/device/:device/network/:network/account/:account" component={AccountContainer} />
+                            <Route exact path="/device/:device/network/:network/account/:account" component={AccountSummary} />
-                            <Route path="/device/:device/network/:network/account/:account/send" component={SendFormContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/send" component={AccountSend} />
-                            <Route path="/device/:device/network/:network/account/:account/send/override" component={SendFormContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/send/override" component={AccountSend} />
-                            <Route path="/device/:device/network/:network/account/:account/receive" component={ReceiveContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/receive" component={AccountReceive} />
-                            <Route path="/device/:device/network/:network/account/:account/signverify" component={SignVerifyContainer} />
+                            <Route path="/device/:device/network/:network/account/:account/signverify" component={AccountSignVerify} />
                         </WalletContainer>
                     </ErrorBoundary>
                 </Route>