-
Notifications
You must be signed in to change notification settings - Fork 295
/
TransactionTypeIcon.tsx
109 lines (97 loc) · 3 KB
/
TransactionTypeIcon.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// @flow
import React, { Component } from 'react';
import classNames from 'classnames';
import SVGInline from 'react-svg-inline';
import { LoadingSpinner } from 'react-polymorph/lib/components/LoadingSpinner';
import { LoadingSpinnerSkin } from 'react-polymorph/lib/skins/simple/LoadingSpinnerSkin';
import styles from './TransactionTypeIcon.scss';
import spinnerOverrides from './SpinnerOverrides.scss';
import expendIcon from '../../../assets/images/wallet-nav/send-ic.inline.svg';
import incomeIcon from '../../../assets/images/wallet-nav/receive-ic.inline.svg';
import exchangeIcon from '../../../assets/images/exchange-ic.inline.svg';
import pendingIcon from '../../../assets/images/wallet-nav/pending.inline.svg';
import {
TransactionTypes,
TransactionStates,
} from '../../../domains/WalletTransaction';
type Props = {
exceedsPendingTimeLimit: boolean,
iconType: string,
};
export default class TransactionTypeIcon extends Component<Props> {
applyIconStyles = (iconType: string): string => {
if (iconType !== TransactionStates.PENDING) {
return iconType;
}
if (!this.props.exceedsPendingTimeLimit) {
return `${iconType}_regular`;
}
return `${iconType}_warning`;
};
renderPendingIcon = () => {
if (!this.props.exceedsPendingTimeLimit) {
return this.renderPendingRegularIcon();
}
return this.renderPendingWarningIcon();
};
renderPendingRegularIcon = () => (
<div className={styles.pendingTxnIconWrapper}>
<LoadingSpinner
skin={LoadingSpinnerSkin}
themeOverrides={spinnerOverrides}
/>
</div>
);
renderPendingWarningIcon = () => (
<div className={styles.pendingTxnIconWrapper}>
<LoadingSpinner
skin={LoadingSpinnerSkin}
themeOverrides={spinnerOverrides}
/>
<SVGInline svg={pendingIcon} className={styles.pendingTxnIcon} />
</div>
);
renderFailedIcon = () => {
return (
<SVGInline svg={pendingIcon} className={styles.transactionTypeIcon} />
);
};
renderIcon = (icon: string) => {
let iconType;
if (this.props.iconType === TransactionStates.PENDING) {
iconType = this.renderPendingIcon();
} else if (this.props.iconType === TransactionStates.FAILED) {
iconType = this.renderFailedIcon();
} else {
iconType = (
<SVGInline svg={icon} className={styles.transactionTypeIcon} />
);
}
return iconType;
};
render() {
const { iconType } = this.props;
const transactionTypeIconClasses = classNames([
styles.transactionTypeIconWrapper,
styles[this.applyIconStyles(iconType)],
]);
let icon;
switch (iconType) {
case TransactionTypes.EXPEND:
icon = expendIcon;
break;
case TransactionTypes.INCOME:
icon = incomeIcon;
break;
case TransactionTypes.EXCHANGE:
icon = exchangeIcon;
break;
default:
icon = '';
break;
}
return (
<div className={transactionTypeIconClasses}>{this.renderIcon(icon)}</div>
);
}
}