You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.7 KiB
68 lines
1.7 KiB
// @flow
|
|
|
|
import React, { PureComponent } from 'react'
|
|
import { translate } from 'react-i18next'
|
|
import styled from 'styled-components'
|
|
import { connect } from 'react-redux'
|
|
import { createStructuredSelector } from 'reselect'
|
|
|
|
import type { CurrencyStatus } from 'reducers/currenciesStatus'
|
|
import { currencyDownStatus } from 'reducers/currenciesStatus'
|
|
import { openURL } from 'helpers/linking'
|
|
import Box from 'components/base/Box'
|
|
import IconTriangleWarning from 'icons/TriangleWarning'
|
|
import IconExternalLink from 'icons/ExternalLink'
|
|
|
|
type Props = {
|
|
t: *,
|
|
status: ?CurrencyStatus,
|
|
}
|
|
|
|
const CurrencyDownBox = styled(Box).attrs({
|
|
horizontal: true,
|
|
align: 'center',
|
|
color: 'white',
|
|
borderRadius: 1,
|
|
fontSize: 1,
|
|
px: 4,
|
|
py: 2,
|
|
mb: 4,
|
|
})`
|
|
background-color: ${p => p.theme.colors.alertRed};
|
|
`
|
|
|
|
const Link = styled.span`
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
`
|
|
|
|
class CurrencyDownStatusAlert extends PureComponent<Props> {
|
|
onClick = () => {
|
|
const { status } = this.props
|
|
if (status) openURL(status.link)
|
|
}
|
|
|
|
render() {
|
|
const { status, t } = this.props
|
|
if (!status) return null
|
|
return (
|
|
<CurrencyDownBox>
|
|
<Box mr={2}>
|
|
<IconTriangleWarning height={16} width={16} />
|
|
</Box>
|
|
<Box style={{ display: 'block' }} ff="Open Sans|SemiBold" fontSize={3} horizontal shrink>
|
|
{status.message}
|
|
<Link onClick={this.onClick}>{t('common.learnMore')}</Link>
|
|
<IconExternalLink size={12} />
|
|
</Box>
|
|
</CurrencyDownBox>
|
|
)
|
|
}
|
|
}
|
|
export default connect(
|
|
createStructuredSelector({
|
|
status: currencyDownStatus,
|
|
}),
|
|
)(translate()(CurrencyDownStatusAlert))
|
|
|