Merge branch 'master' of github.com:satoshilabs/trezor-wallet

public/data/appConfig.json

@@ -1,6 +1,7 @@
 {
     "networks": [
         {
+            "order": 2,
             "type": "ethereum",
             "name": "Ethereum",
             "symbol": "ETH",
@@ -21,6 +22,7 @@
             }
         },
         {
+            "order": 18,
             "type": "ethereum",
             "name": "Ethereum Classic",
             "symbol": "ETC",
@@ -40,7 +42,8 @@
                 "address": "https://gastracker.io/addr/"
             }
         },
-        { 
+        {
+            "order": 2,
             "type": "ethereum",
             "name": "Ethereum Ropsten",
             "testnet": true,
@@ -74,6 +77,7 @@
             }
         },
         {
+            "order": 3,
             "type": "ripple",
             "name": "Ripple",
             "symbol": "XRP",
@@ -94,6 +98,7 @@
             }
         },
         {
+            "order": 3,
             "type": "ripple",
             "name": "Ripple Testnet",
             "testnet": true,

src/components/Footer/index.js

@@ -4,13 +4,12 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Link from 'components/Link';
-import { getYear } from 'date-fns';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
 import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, SCREEN_SIZE } from 'config/variables';
 import * as LogActions from 'actions/LogActions';
 import l10nMessages from './index.messages';
 
@@ -33,7 +32,7 @@ const Wrapper = styled.div`
     justify-content: space-between;
     border-top: 1px solid ${colors.BACKGROUND};
 
-    @media all and (max-width: 850px) {
+    @media all and (max-width: ${SCREEN_SIZE.MD}) {
         justify-content: center;
     }
 `;
@@ -41,52 +40,94 @@ const Wrapper = styled.div`
 const StyledLink = styled(Link)`
     margin: 0 10px;
     white-space: nowrap;
-`;
 
-const Copy = styled.div`
+    &:first-child {
-    white-space: nowrap;
+        margin-left: 0;
-    margin-right: 10px;
+    }
 `;
 
 const Left = styled.div`
     display: flex;
+    margin-right: 10px;
+
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
+        margin: 0;
+    }
 `;
 
-const Right = styled.div`
+const Right = styled.div``;
-    white-space: nowrap;
+
-    margin: 0 10px;
+const RatesLeft = styled.div`
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
+        display: none;
+    }
 `;
 
-const Footer = ({ opened, toggle, isLanding }: Props) => (
+const TranslatorsRight = styled.div`
-    <Wrapper>
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
-        <Left>
+        display: none;
-            <Copy>&copy; {getYear(new Date())}</Copy>
+    }
-            <StyledLink href="http://satoshilabs.com" isGreen>
+`;
-                SatoshiLabs
+
-            </StyledLink>
+const RatesRight = styled.div`
-            <StyledLink href="https://trezor.io/tos" isGreen>
+    display: none;
-                <FormattedMessage {...l10nMessages.TR_TERMS} />
+
-            </StyledLink>
+    @media all and (max-width: ${SCREEN_SIZE.XS}) {
-            <StyledLink onClick={toggle} isGreen>
+        display: block;
-                {opened ? 'Hide Log' : 'Show Log'}
+        width: 100%;
-            </StyledLink>
+    }
-        </Left>
+`;
-        {!isLanding && (
+
-            <Right>
+const Footer = ({ opened, toggle, isLanding }: Props) => {
-                <FormattedMessage
+    const exchangeRates = (
-                    {...l10nMessages.TR_EXCHANGE_RATES_BY}
+        <FormattedMessage
-                    values={{
+            {...l10nMessages.TR_EXCHANGE_RATES_BY}
-                        service: (
+            values={{
-                            <Link href="https://www.coingecko.com" isGreen>
+                service: (
-                                Coingecko
+                    <Link href="https://www.coingecko.com" isGreen>
-                            </Link>
+                        Coingecko
-                        ),
+                    </Link>
-                    }}
+                ),
-                />
+            }}
-            </Right>
+        />
-        )}
+    );
-    </Wrapper>
+    return (
-);
+        <Wrapper>
+            <Left>
+                <StyledLink href="http://satoshilabs.com" isGreen>
+                    SatoshiLabs
+                </StyledLink>
+                <StyledLink href="https://trezor.io/tos" isGreen>
+                    <FormattedMessage {...l10nMessages.TR_TERMS} />
+                </StyledLink>
+                <StyledLink onClick={toggle} isGreen>
+                    {opened ? 'Hide Log' : 'Show Log'}
+                </StyledLink>
+                <RatesLeft>{exchangeRates}</RatesLeft>
+            </Left>
+            {!isLanding && (
+                <Right>
+                    <TranslatorsRight>
+                        <FormattedMessage
+                            {...l10nMessages.TR_WE_THANK_OUR_TRANSLATORS}
+                            values={{
+                                TR_CONTRIBUTION: (
+                                    <Link
+                                        href="https://wiki.trezor.io/CrowdIn.com_-_A_tool_for_translation"
+                                        isGreen
+                                    >
+                                        <FormattedMessage {...l10nMessages.TR_CONTRIBUTION} />
+                                    </Link>
+                                ),
+                            }}
+                        />
+                    </TranslatorsRight>
+                    <RatesRight>{exchangeRates}</RatesRight>
+                </Right>
+            )}
+        </Wrapper>
+    );
+};
 
 Footer.propTypes = {
     opened: PropTypes.bool.isRequired,

src/components/Footer/index.messages.js

@@ -12,6 +12,15 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_EXCHANGE_RATES_BY',
         defaultMessage: 'Exchange rates by {service}',
     },
+    TR_WE_THANK_OUR_TRANSLATORS: {
+        id: 'TR_WE_THANK_OUR_TRANSLATORS',
+        defaultMessage: 'We thank our translators for their {TR_CONTRIBUTION}',
+    },
+    TR_CONTRIBUTION: {
+        id: 'TR_CONTRIBUTION',
+        defaultMessage: 'contribution',
+        description: 'Part of the sentence: We thank our translators for their contribution',
+    },
 });
 
 export default definedMessages;

src/constants/coins.js

@@ -3,69 +3,82 @@ export default [
         id: 'btc',
         coinName: 'Bitcoin',
         url: '../?coin=btc',
+        order: 1,
     },
     {
         id: 'bch',
         coinName: 'Bitcoin Cash',
         url: '../?coin=bch',
+        order: 6,
     },
     {
         id: 'btg',
         coinName: 'Bitcoin Gold',
         url: '../?coin=btg',
+        order: 27,
     },
     {
         id: 'dash',
         coinName: 'Dash',
         url: '../?coin=dash',
+        order: 15,
     },
     {
         id: 'dgb',
         coinName: 'DigiByte',
         url: '../?coin=dgb',
+        order: 42,
     },
     {
         id: 'doge',
         coinName: 'Dogecoin',
         url: '../?coin=doge',
+        order: 26,
     },
     {
         id: 'ltc',
         coinName: 'Litecoin',
         url: '../?coin=ltc',
+        order: 5,
     },
     {
         id: 'nmc',
         coinName: 'Namecoin',
         url: '../?coin=nmc',
+        order: 255,
     },
     {
         id: 'vtc',
         coinName: 'Vertcoin',
         url: '../?coin=vtc',
+        order: 154,
     },
     {
         id: 'zec',
         coinName: 'Zcash',
         url: '../?coin=zec',
+        order: 20,
     },
     {
         id: 'xem',
         coinName: 'NEM',
         url: 'https://nem.io/downloads/',
         external: true,
+        order: 19,
     },
     {
         id: 'xlm',
         coinName: 'Stellar',
         url: 'https://trezor.io/stellar',
         external: true,
+        order: 9,
     },
     {
         id: 'ada',
         coinName: 'Cardano',
         url: 'https://adalite.io/app',
         external: true,
+        order: 12,
     },
     {
         id: 'xtz',

src/reducers/LocalStorageReducer.js

@@ -13,6 +13,7 @@ type NetworkFeeLevel = {
 };
 
 export type Network = {
+    order: number,
     type: string,
     name: string,
     testnet?: boolean,

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

@@ -37,59 +37,62 @@ class CoinMenu extends PureComponent<Props> {
     }
 
     getOtherCoins() {
-        return coins.map(coin => {
+        return coins
-            const row = (
+            .sort((a, b) => a.order - b.order)
-                <RowCoin
+            .map(coin => {
-                    network={{
+                const row = (
-                        name: coin.coinName,
+                    <RowCoin
-                        shortcut: coin.id,
+                        network={{
-                    }}
+                            name: coin.coinName,
-                    iconRight={{
+                            shortcut: coin.id,
-                        type: ICONS.SKIP,
+                        }}
-                        color: colors.TEXT_SECONDARY,
+                        iconRight={{
-                        size: 27,
+                            type: ICONS.SKIP,
-                    }}
+                            color: colors.TEXT_SECONDARY,
-                />
+                            size: 27,
-            );
+                        }}
+                    />
+                );
 
-            if (coin.external)
+                if (coin.external)
+                    return (
+                        <ExternalWallet
+                            key={coin.id}
+                            onClick={() => this.props.gotoExternalWallet(coin.id, coin.url)}
+                        >
+                            {row}
+                        </ExternalWallet>
+                    );
                 return (
-                    <ExternalWallet
+                    <Link key={coin.id} href={coin.url} target="_top">
-                        key={coin.id}
-                        onClick={() => this.props.gotoExternalWallet(coin.id, coin.url)}
-                    >
                         {row}
-                    </ExternalWallet>
+                    </Link>
                 );
-            return (
+            });
-                <Link key={coin.id} href={coin.url} target="_top">
-                    {row}
-                </Link>
-            );
-        });
     }
 
     render() {
         const { config } = this.props.localStorage;
         return (
             <Wrapper data-test="Main__page__coin__menu">
-                {config.networks.map(item => (
+                {config.networks
-                    <NavLink
+                    .sort((a, b) => a.order - b.order)
-                        key={item.shortcut}
+                    .map(item => (
-                        to={`${this.getBaseUrl()}/network/${item.shortcut}/account/0`}
+                        <NavLink
-                    >
+                            key={item.shortcut}
-                        <RowCoin
+                            to={`${this.getBaseUrl()}/network/${item.shortcut}/account/0`}
-                            network={{
+                        >
-                                name: item.name,
+                            <RowCoin
-                                shortcut: item.shortcut,
+                                network={{
-                            }}
+                                    name: item.name,
-                        />
+                                    shortcut: item.shortcut,
-                    </NavLink>
+                                }}
-                ))}
+                            />
+                        </NavLink>
+                    ))}
                 <Divider
                     testId="Main__page__coin__menu__divider"
                     textLeft={<FormattedMessage {...l10nMessages.TR_OTHER_COINS} />}
-                    textRight={<FormattedMessage {...l10nMessages.TR_YOU_WILL_BE_REDIRECTED} />}
                     hasBorder
                 />
                 {this.getOtherCoins()}

src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js

@@ -7,10 +7,6 @@ const definedMessages: Messages = defineMessages({
         id: 'TR_OTHER_COINS',
         defaultMessage: 'Other coins',
     },
-    TR_YOU_WILL_BE_REDIRECTED: {
-        id: 'TR_YOU_WILL_BE_REDIRECTED',
-        defaultMessage: '(You will be redirected)',
-    },
 });
 
 export default definedMessages;

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

@@ -27,7 +27,7 @@ const TextLeft = styled.p`
 const Divider = ({ textLeft, textRight, hasBorder = false, className, testId }) => (
     <Wrapper data-test={testId} hasBorder={hasBorder} className={className}>
         <TextLeft>{textLeft}</TextLeft>
-        <p>{textRight}</p>
+        {textRight && <p>{textRight}</p>}
     </Wrapper>
 );