trezor-wallet/src/components/Footer/index.js

/* @flow */

import styled from 'styled-components';
import PropTypes from 'prop-types';
import React from 'react';
import { Link, colors } from 'trezor-ui-components';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import type { State, Dispatch } from 'flowtype';

import { FONT_SIZE, SCREEN_SIZE, FOOTER_HEIGHT } from 'config/variables';
import * as LogActions from 'actions/LogActions';
import l10nMessages from './index.messages';

type OwnProps = {|
    isLanding: boolean,
|};
type StateProps = {|
    opened: boolean,
|};

type DispatchProps = {|
    toggle: typeof LogActions.toggle,
|};

type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};

const Wrapper = styled.div`
    width: 100%;
    font-size: ${FONT_SIZE.SMALL};
    background: ${colors.LANDING};
    color: ${colors.TEXT_SECONDARY};
    padding: 10px 30px;
    display: flex;
    height: ${FOOTER_HEIGHT};
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid ${colors.BACKGROUND};

    @media all and (max-width: ${SCREEN_SIZE.MD}) {
        justify-content: center;
    }
`;

const StyledLink = styled(Link)`
    margin: 0 10px;
    white-space: nowrap;

    &: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``;

const RatesLeft = styled.div`
    @media all and (max-width: ${SCREEN_SIZE.XS}) {
        display: none;
    }
`;

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 = (
        <FormattedMessage
            {...l10nMessages.TR_EXCHANGE_RATES_BY}
            values={{
                service: (
                    <Link href="https://www.coingecko.com" isGreen>
                        Coingecko
                    </Link>
                ),
            }}
        />
    );
    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,
    isLanding: PropTypes.bool,
    toggle: PropTypes.func.isRequired,
};

const mapStateToProps = (state: State): StateProps => ({
    opened: state.log.opened,
});

const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
    toggle: bindActionCreators(LogActions.toggle, dispatch),
});

export default connect<Props, OwnProps, StateProps, DispatchProps, State, Dispatch>(
    mapStateToProps,
    mapDispatchToProps
)(Footer);