refactor(ui): delineators for unconfirmed transactions and new assetss
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M232.9 371.6c0 12.7 10.4 23.1 23.1 23.1s23.1-10.4 23.1-23.1c0-12.7-10.4-23.1-23.1-23.1s-23.1 10.3-23.1 23.1zm0-323.6v92.4h46.2V96.1c78.3 11.3 138.7 78.3 138.7 159.9 0 89.4-72.3 161.8-161.8 161.8S94.2 345.4 94.2 256c0-38.8 13.6-74.4 36.5-102.2L256 279.1l32.6-32.6L131.4 89.4v.5C80.8 127.7 48 187.8 48 256c0 114.9 92.9 208 208 208 114.9 0 208-93.1 208-208S370.9 48 256 48h-23.1zm161.8 208c0-12.7-10.4-23.1-23.1-23.1-12.7 0-23.1 10.4-23.1 23.1s10.4 23.1 23.1 23.1c12.7 0 23.1-10.4 23.1-23.1zm-277.4 0c0 12.7 10.4 23.1 23.1 23.1s23.1-10.4 23.1-23.1-10.4-23.1-23.1-23.1-23.1 10.4-23.1 23.1z" fill="#222"/></svg>
|
After Width: | Height: | Size: 677 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M232.9 371.6c0 12.7 10.4 23.1 23.1 23.1s23.1-10.4 23.1-23.1c0-12.7-10.4-23.1-23.1-23.1s-23.1 10.3-23.1 23.1zm0-323.6v92.4h46.2V96.1c78.3 11.3 138.7 78.3 138.7 159.9 0 89.4-72.3 161.8-161.8 161.8S94.2 345.4 94.2 256c0-38.8 13.6-74.4 36.5-102.2L256 279.1l32.6-32.6L131.4 89.4v.5C80.8 127.7 48 187.8 48 256c0 114.9 92.9 208 208 208 114.9 0 208-93.1 208-208S370.9 48 256 48h-23.1zm161.8 208c0-12.7-10.4-23.1-23.1-23.1-12.7 0-23.1 10.4-23.1 23.1s10.4 23.1 23.1 23.1c12.7 0 23.1-10.4 23.1-23.1zm-277.4 0c0 12.7 10.4 23.1 23.1 23.1s23.1-10.4 23.1-23.1-10.4-23.1-23.1-23.1-23.1 10.4-23.1 23.1z" fill="#ccc"/></svg>
|
After Width: | Height: | Size: 677 B |
|
@ -10,6 +10,8 @@ import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
|||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
import UnconfirmedLight from '../assets/images/unconfirmed_light.svg';
|
||||
import UnconfirmedDark from '../assets/images/unconfirmed_dark.svg';
|
||||
|
||||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
@ -70,6 +72,25 @@ const TransactionColumn = styled(ColumnComponent)`
|
|||
min-width: 60px;
|
||||
`;
|
||||
|
||||
const UnconfirmedStatusWrapper = styled.div`
|
||||
right: 30px;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
const UnconfirmedStatus = styled.img`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.6;
|
||||
|
||||
${String(Wrapper)}:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const RelativeRowComponent = styled(RowComponent)`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export type Transaction = {
|
||||
confirmed: boolean,
|
||||
confirmations: number,
|
||||
|
@ -108,6 +129,11 @@ const Component = ({
|
|||
|
||||
const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
|
||||
const unconfirmedIcon = theme.mode === DARK ? UnconfirmedLight : UnconfirmedDark;
|
||||
|
||||
// TODO: style the tooltip correctly (overlay issue)
|
||||
// const showUnconfirmed = !confirmed || confirmations < 1 || address === '(Shielded)';
|
||||
const showUnconfirmed = false;
|
||||
|
||||
return (
|
||||
<ModalComponent
|
||||
|
@ -119,13 +145,18 @@ const Component = ({
|
|||
onClick={toggleVisibility}
|
||||
>
|
||||
<RowComponent alignItems='center'>
|
||||
<RowComponent alignItems='center'>
|
||||
<RelativeRowComponent alignItems='center'>
|
||||
<Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
|
||||
<TransactionColumn>
|
||||
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
||||
<TransactionLabel value={transactionTime} isReceived={isReceived} />
|
||||
</TransactionColumn>
|
||||
</RowComponent>
|
||||
{showUnconfirmed && (
|
||||
<UnconfirmedStatusWrapper>
|
||||
<UnconfirmedStatus src={unconfirmedIcon} />
|
||||
</UnconfirmedStatusWrapper>
|
||||
)}
|
||||
</RelativeRowComponent>
|
||||
<TransactionAddress value={address} />
|
||||
</RowComponent>
|
||||
<ColumnComponent alignItems='flex-end'>
|
||||
|
|
|
@ -9,8 +9,8 @@ import { formatNumber } from '../utils/format-number';
|
|||
import { getCoinName } from '../utils/get-coin-name';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import ShieldDarkImage from '../assets/images/shield-dark.png';
|
||||
import ShieldLightImage from '../assets/images/shield-light.png';
|
||||
import ShieldDarkImage from '../assets/images/shield_dark.png';
|
||||
import ShieldLightImage from '../assets/images/shield_light.png';
|
||||
|
||||
const OutsideWrapper = styled.div`
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
|
|
|
@ -15,7 +15,7 @@ import MenuIconDark from '../assets/images/menu_icon_dark.svg';
|
|||
import MenuIconLight from '../assets/images/menu_icon_light.svg';
|
||||
import PlusIconDark from '../assets/images/plus_icon_dark.svg';
|
||||
import PlusIconLight from '../assets/images/plus_icon_light.svg';
|
||||
import ShieldGrayImage from '../assets/images/shield-dark-gray.png';
|
||||
import ShieldGrayImage from '../assets/images/shield_dark_gray.png';
|
||||
|
||||
import type { addressType } from '../redux/modules/receive';
|
||||
import type { MapStateToProps, MapDispatchToProps } from '../containers/receive';
|
||||
|
|