-
Notifications
You must be signed in to change notification settings - Fork 504
/
index.tsx
93 lines (87 loc) · 2.21 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import {
CoinType,
SBPairType,
SupportedCoinsType,
SupportedCoinType
} from 'core/types'
import { fiatToString } from 'core/exchange/currency'
import {
getCoinFromPair,
getFiatFromPair
} from 'data/components/simpleBuy/model'
import { Icon, Text } from 'blockchain-info-components'
import { RatesType } from 'data/types'
import React from 'react'
import styled from 'styled-components'
const DisplayContainer = styled.div<{
coinType: SupportedCoinType
}>`
display: flex;
width: 100%;
align-items: center;
box-sizing: border-box;
padding: 16px 40px;
border-bottom: 1px solid ${props => props.theme.grey000};
&hover {
background-color: ${props => props.theme.grey100};
}
`
const Display = styled.div`
position: relative;
display: flex;
flex-direction: column;
margin-left: 12px;
width: 100%;
cursor: pointer;
font-size: 16px;
font-weight: 500;
color: ${props => props.theme.grey800};
`
const DisplayName = styled(Text)`
font-weight: 600;
`
const Rate = styled(Text)`
font-size: 14px;
font-weight: 500;
margin-top: 4px;
color: ${props => props.theme.grey600} !important;
> span {
color: ${props => props.theme.green500};
}
`
export type Props = {
onClick: (string) => void
rates: { [key in CoinType]: RatesType }
supportedCoins: SupportedCoinsType
value: SBPairType
}
const CryptoItem: React.FC<Props> = props => {
const coin = getCoinFromPair(props.value.pair)
const fiat = getFiatFromPair(props.value.pair)
const coinType = props.supportedCoins[coin]
const displayName = coinType.displayName
const icon = coinType.icons.circleFilled
const color = coinType.colorCode
return (
<DisplayContainer
coinType={coinType}
data-e2e={`sb${props.value.pair}CurrencySelector`}
role='button'
onClick={props.onClick}
>
<Icon size='32px' color={color} name={icon} />
<Display>
<DisplayName>{displayName}</DisplayName>
<Rate>
{fiatToString({
value: props.rates[coin][fiat].last,
unit: fiat
})}
<span>+ xx.x%</span>
</Rate>
</Display>
<Icon name='chevron-right' size='32px' color='grey600' />
</DisplayContainer>
)
}
export default CryptoItem