Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Home/TokenListItem.js
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import makeBlockie from 'ethereum-blockies-base64'; | import makeBlockie from 'ethereum-blockies-base64'; | ||||
import { Img } from 'react-image'; | import { Img } from 'react-image'; | ||||
import { currency } from '@components/Common/Ticker'; | import { currency } from '@components/Common/Ticker'; | ||||
import TokenIcon from '@components/Tokens/TokenIcon'; | |||||
const TokenIcon = styled.div` | const TokenIconWrapper = styled.div` | ||||
height: 32px; | |||||
width: 32px; | |||||
margin-right: 10px; | margin-right: 10px; | ||||
`; | `; | ||||
const TokenNameCtn = styled.div` | const TokenNameCtn = styled.div` | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
`; | `; | ||||
Show All 16 Lines | :hover { | ||||
} | } | ||||
} | } | ||||
`; | `; | ||||
const TokenListItem = ({ ticker, balance, tokenId }) => { | const TokenListItem = ({ ticker, balance, tokenId }) => { | ||||
return ( | return ( | ||||
<Wrapper> | <Wrapper> | ||||
<TokenNameCtn> | <TokenNameCtn> | ||||
<TokenIcon> | <TokenIconWrapper> | ||||
{currency.tokenIconsUrl !== '' ? ( | <TokenIcon size={32} tokenId={tokenId} /> | ||||
<Img | </TokenIconWrapper> | ||||
src={`${currency.tokenIconsUrl}/32/${tokenId}.png`} | |||||
width={32} | |||||
height={32} | |||||
unloader={ | |||||
<img | |||||
alt={`identicon of tokenId ${tokenId} `} | |||||
height="32" | |||||
width="32" | |||||
style={{ | |||||
borderRadius: '50%', | |||||
}} | |||||
key={`identicon-${tokenId}`} | |||||
src={makeBlockie(tokenId)} | |||||
/> | |||||
} | |||||
/> | |||||
) : ( | |||||
<img | |||||
alt={`identicon of tokenId ${tokenId} `} | |||||
height="32" | |||||
width="32" | |||||
style={{ | |||||
borderRadius: '50%', | |||||
}} | |||||
key={`identicon-${tokenId}`} | |||||
src={makeBlockie(tokenId)} | |||||
/> | |||||
)} | |||||
</TokenIcon> | |||||
<h4>{ticker}</h4> | <h4>{ticker}</h4> | ||||
</TokenNameCtn> | </TokenNameCtn> | ||||
<h4>{balance}</h4> | <h4>{balance}</h4> | ||||
</Wrapper> | </Wrapper> | ||||
); | ); | ||||
}; | }; | ||||
TokenListItem.propTypes = { | TokenListItem.propTypes = { | ||||
ticker: PropTypes.string, | ticker: PropTypes.string, | ||||
balance: PropTypes.string, | balance: PropTypes.string, | ||||
tokenId: PropTypes.string, | tokenId: PropTypes.string, | ||||
}; | }; | ||||
export default TokenListItem; | export default TokenListItem; |