diff --git a/public/data/appConfig.json b/public/data/appConfig.json index 6125250a..09d07ce9 100644 --- a/public/data/appConfig.json +++ b/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, diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index f0e49cdb..7d5bda50 100644 --- a/src/components/Footer/index.js +++ b/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` - white-space: nowrap; - margin-right: 10px; + &:first-child { + margin-left: 0; + } `; const Left = styled.div` display: flex; + margin-right: 10px; + + @media all and (max-width: ${SCREEN_SIZE.XS}) { + margin: 0; + } `; -const Right = styled.div` - white-space: nowrap; - margin: 0 10px; +const Right = styled.div``; + +const RatesLeft = styled.div` + @media all and (max-width: ${SCREEN_SIZE.XS}) { + display: none; + } `; -const Footer = ({ opened, toggle, isLanding }: Props) => ( - - - © {getYear(new Date())} - - SatoshiLabs - - - - - - {opened ? 'Hide Log' : 'Show Log'} - - - {!isLanding && ( - - - Coingecko - - ), - }} - /> - - )} - -); +const TranslatorsRight = styled.div` + @media all and (max-width: ${SCREEN_SIZE.XS}) { + display: none; + } +`; + +const RatesRight = styled.div` + display: none; + + @media all and (max-width: ${SCREEN_SIZE.XS}) { + display: block; + width: 100%; + } +`; + +const Footer = ({ opened, toggle, isLanding }: Props) => { + const exchangeRates = ( + + Coingecko + + ), + }} + /> + ); + return ( + + + + SatoshiLabs + + + + + + {opened ? 'Hide Log' : 'Show Log'} + + {exchangeRates} + + {!isLanding && ( + + + + + + ), + }} + /> + + {exchangeRates} + + )} + + ); +}; Footer.propTypes = { opened: PropTypes.bool.isRequired, diff --git a/src/components/Footer/index.messages.js b/src/components/Footer/index.messages.js index 74b84241..f5e1efb8 100644 --- a/src/components/Footer/index.messages.js +++ b/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; diff --git a/src/constants/coins.js b/src/constants/coins.js index 589e55d2..b584b7ab 100644 --- a/src/constants/coins.js +++ b/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', diff --git a/src/reducers/LocalStorageReducer.js b/src/reducers/LocalStorageReducer.js index 3e3918dd..4c1c81bf 100644 --- a/src/reducers/LocalStorageReducer.js +++ b/src/reducers/LocalStorageReducer.js @@ -13,6 +13,7 @@ type NetworkFeeLevel = { }; export type Network = { + order: number, type: string, name: string, testnet?: boolean, diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 4a7d60e8..30be38bb 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -37,59 +37,62 @@ class CoinMenu extends PureComponent { } getOtherCoins() { - return coins.map(coin => { - const row = ( - - ); + return coins + .sort((a, b) => a.order - b.order) + .map(coin => { + const row = ( + + ); - if (coin.external) + if (coin.external) + return ( + this.props.gotoExternalWallet(coin.id, coin.url)} + > + {row} + + ); return ( - this.props.gotoExternalWallet(coin.id, coin.url)} - > + {row} - + ); - return ( - - {row} - - ); - }); + }); } render() { const { config } = this.props.localStorage; return ( - {config.networks.map(item => ( - - - - ))} + {config.networks + .sort((a, b) => a.order - b.order) + .map(item => ( + + + + ))} } - textRight={} hasBorder /> {this.getOtherCoins()} diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js index fea97195..78b43096 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.messages.js +++ b/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; diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 20d8ad0f..a22d7d60 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/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 }) => ( {textLeft} -

{textRight}

+ {textRight &&

{textRight}

}
);