Merge pull request #439 from trezor/feature/sort-coin-menu

Feature/Sort coin menu

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