Gaëtan Renaudeau
6 years ago
committed by
GitHub
GitHub
11 changed files with 278 additions and 0 deletions
@ -0,0 +1,181 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import { compose } from 'redux' |
||||
|
import { translate } from 'react-i18next' |
||||
|
import { connect } from 'react-redux' |
||||
|
import { createStructuredSelector } from 'reselect' |
||||
|
import styled from 'styled-components' |
||||
|
import type { Currency } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import { colors } from 'styles/theme' |
||||
|
import { openURL } from 'helpers/linking' |
||||
|
import { CHECK_CUR_STATUS_INTERVAL } from 'config/constants' |
||||
|
import IconCross from 'icons/Cross' |
||||
|
import IconTriangleWarning from 'icons/TriangleWarning' |
||||
|
import IconChevronRight from 'icons/ChevronRight' |
||||
|
|
||||
|
import { dismissedBannersSelector } from 'reducers/settings' |
||||
|
import { currenciesStatusSelector, fetchCurrenciesStatus } from 'reducers/currenciesStatus' |
||||
|
import { currenciesSelector } from 'reducers/accounts' |
||||
|
import { dismissBanner } from 'actions/settings' |
||||
|
import type { CurrencyStatus } from 'reducers/currenciesStatus' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
|
||||
|
const mapStateToProps = createStructuredSelector({ |
||||
|
dismissedBanners: dismissedBannersSelector, |
||||
|
accountsCurrencies: currenciesSelector, |
||||
|
currenciesStatus: currenciesStatusSelector, |
||||
|
}) |
||||
|
|
||||
|
const mapDispatchToProps = { |
||||
|
dismissBanner, |
||||
|
fetchCurrenciesStatus, |
||||
|
} |
||||
|
|
||||
|
const getItemKey = (item: CurrencyStatus) => `${item.id}_${item.nonce}` |
||||
|
|
||||
|
const CloseIconContainer = styled.div` |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 10px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
|
||||
|
opacity: 0.5; |
||||
|
&:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const CloseIcon = (props: *) => ( |
||||
|
<CloseIconContainer {...props}> |
||||
|
<IconCross size={16} color="white" /> |
||||
|
</CloseIconContainer> |
||||
|
) |
||||
|
|
||||
|
type Props = { |
||||
|
accountsCurrencies: Currency[], |
||||
|
dismissedBanners: string[], |
||||
|
dismissBanner: string => void, |
||||
|
currenciesStatus: CurrencyStatus[], |
||||
|
fetchCurrenciesStatus: () => Promise<void>, |
||||
|
t: *, |
||||
|
} |
||||
|
|
||||
|
class CurrenciesStatusBanner extends PureComponent<Props> { |
||||
|
componentDidMount() { |
||||
|
this.pollStatus() |
||||
|
} |
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
this.unmounted = true |
||||
|
if (this.timeout) { |
||||
|
clearTimeout(this.timeout) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
unmounted = false |
||||
|
timeout: * |
||||
|
|
||||
|
pollStatus = async () => { |
||||
|
await this.props.fetchCurrenciesStatus() |
||||
|
if (this.unmounted) return |
||||
|
this.timeout = setTimeout(this.pollStatus, CHECK_CUR_STATUS_INTERVAL) |
||||
|
} |
||||
|
|
||||
|
dismiss = item => this.props.dismissBanner(getItemKey(item)) |
||||
|
|
||||
|
render() { |
||||
|
const { dismissedBanners, accountsCurrencies, currenciesStatus, t } = this.props |
||||
|
const filtered = currenciesStatus.filter( |
||||
|
item => |
||||
|
accountsCurrencies.find(cur => cur.id === item.id) && |
||||
|
dismissedBanners.indexOf(getItemKey(item)) === -1, |
||||
|
) |
||||
|
if (!filtered.length) return null |
||||
|
return ( |
||||
|
<Box flow={2} style={styles.container}> |
||||
|
{filtered.map(r => <BannerItem key={r.id} t={t} item={r} onItemDismiss={this.dismiss} />)} |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class BannerItem extends PureComponent<{ |
||||
|
item: CurrencyStatus, |
||||
|
onItemDismiss: CurrencyStatus => void, |
||||
|
t: *, |
||||
|
}> { |
||||
|
onLinkClick = () => openURL(this.props.item.link) |
||||
|
dismiss = () => this.props.onItemDismiss(this.props.item) |
||||
|
render() { |
||||
|
const { item, t } = this.props |
||||
|
return ( |
||||
|
<Box relative key={item.id} style={styles.banner}> |
||||
|
<CloseIcon onClick={this.dismiss} /> |
||||
|
<Box horizontal flow={2}> |
||||
|
<IconTriangleWarning height={16} width={16} color="white" /> |
||||
|
<Box shrink ff="Open Sans|SemiBold"> |
||||
|
{item.message} |
||||
|
</Box> |
||||
|
</Box> |
||||
|
{item.link && <BannerItemLink t={t} onClick={this.onLinkClick} />} |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const UnderlinedLink = styled.span` |
||||
|
border-bottom: 1px solid transparent; |
||||
|
&:hover { |
||||
|
border-bottom-color: white; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const BannerItemLink = ({ t, onClick }: { t: *, onClick: void => * }) => ( |
||||
|
<Box |
||||
|
mt={2} |
||||
|
ml={4} |
||||
|
flow={1} |
||||
|
horizontal |
||||
|
align="center" |
||||
|
cursor="pointer" |
||||
|
onClick={onClick} |
||||
|
color="white" |
||||
|
> |
||||
|
<IconChevronRight size={16} color="white" /> |
||||
|
<UnderlinedLink>{t('common.learnMore')}</UnderlinedLink> |
||||
|
</Box> |
||||
|
) |
||||
|
|
||||
|
const styles = { |
||||
|
container: { |
||||
|
position: 'fixed', |
||||
|
left: 32, |
||||
|
bottom: 32, |
||||
|
}, |
||||
|
banner: { |
||||
|
background: colors.alertRed, |
||||
|
overflow: 'hidden', |
||||
|
borderRadius: 4, |
||||
|
fontSize: 13, |
||||
|
padding: 14, |
||||
|
color: 'white', |
||||
|
fontWeight: 'bold', |
||||
|
paddingRight: 50, |
||||
|
width: 350, |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
export default compose( |
||||
|
connect( |
||||
|
mapStateToProps, |
||||
|
mapDispatchToProps, |
||||
|
), |
||||
|
translate(), |
||||
|
)(CurrenciesStatusBanner) |
||||
@ -0,0 +1,58 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import { handleActions, createAction } from 'redux-actions' |
||||
|
import type { Currency } from '@ledgerhq/live-common/lib/types' |
||||
|
|
||||
|
import network from 'api/network' |
||||
|
import { urls } from 'config/urls' |
||||
|
import logger from 'logger' |
||||
|
|
||||
|
import type { State } from './index' |
||||
|
|
||||
|
export type CurrencyStatus = { |
||||
|
id: string, // the currency id
|
||||
|
status: 'KO' | 'OK', |
||||
|
message: string, |
||||
|
link: string, |
||||
|
nonce: number, |
||||
|
} |
||||
|
|
||||
|
export type CurrenciesStatusState = CurrencyStatus[] |
||||
|
|
||||
|
const state: CurrenciesStatusState = [] |
||||
|
|
||||
|
const handlers = { |
||||
|
CURRENCIES_STATUS_SET: ( |
||||
|
state: CurrenciesStatusState, |
||||
|
{ payload }: { payload: CurrenciesStatusState }, |
||||
|
) => payload, |
||||
|
} |
||||
|
|
||||
|
// Actions
|
||||
|
|
||||
|
const setCurrenciesStatus = createAction('CURRENCIES_STATUS_SET') |
||||
|
export const fetchCurrenciesStatus = () => async (dispatch: *) => { |
||||
|
try { |
||||
|
const { data } = await network({ |
||||
|
method: 'GET', |
||||
|
url: process.env.LL_STATUS_ENDPOINT || urls.currenciesStatus, |
||||
|
}) |
||||
|
dispatch(setCurrenciesStatus(data)) |
||||
|
} catch (err) { |
||||
|
logger.error(err) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Selectors
|
||||
|
|
||||
|
export const currenciesStatusSelector = (state: State) => state.currenciesStatus |
||||
|
|
||||
|
// It's not a *real* selector, but it's better than having this logic inside component
|
||||
|
export const getIsCurrencyDown = (currenciesStatus: CurrenciesStatusState, currency: Currency) => { |
||||
|
const item = currenciesStatus.find(c => c.id === currency.id) |
||||
|
return !!item && item.status === 'KO' |
||||
|
} |
||||
|
|
||||
|
// Exporting reducer
|
||||
|
|
||||
|
export default handleActions(handlers, state) |
||||
Loading…
Reference in new issue