111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import translate from 'translations';
|
|
import { getRecentWalletTransactions } from 'selectors/transactions';
|
|
import { getNetworkConfig } from 'selectors/config';
|
|
import { NewTabLink } from 'components/ui';
|
|
import RecentTransaction from './RecentTransaction';
|
|
import { TransactionStatus } from 'components';
|
|
import { IWallet } from 'libs/wallet';
|
|
import { NetworkConfig } from 'types/network';
|
|
import { AppState } from 'reducers';
|
|
import './RecentTransactions.scss';
|
|
|
|
interface OwnProps {
|
|
wallet: IWallet;
|
|
}
|
|
|
|
interface StateProps {
|
|
recentTransactions: AppState['transactions']['recent'];
|
|
network: NetworkConfig;
|
|
}
|
|
|
|
type Props = OwnProps & StateProps;
|
|
|
|
interface State {
|
|
activeTxHash: string;
|
|
}
|
|
|
|
class RecentTransactions extends React.Component<Props> {
|
|
public state: State = {
|
|
activeTxHash: ''
|
|
};
|
|
|
|
public render() {
|
|
const { activeTxHash } = this.state;
|
|
let content: React.ReactElement<string>;
|
|
if (activeTxHash) {
|
|
content = (
|
|
<React.Fragment>
|
|
<TransactionStatus txHash={activeTxHash} />
|
|
<button className="RecentTxs-back btn btn-default" onClick={this.clearActiveTxHash}>
|
|
<i className="fa fa-arrow-left" /> Back to Recent Transactions
|
|
</button>
|
|
</React.Fragment>
|
|
);
|
|
} else {
|
|
content = this.renderTxList();
|
|
}
|
|
|
|
return <div className="RecentTxs Tab-content-pane">{content}</div>;
|
|
}
|
|
|
|
private renderTxList() {
|
|
const { wallet, recentTransactions, network } = this.props;
|
|
|
|
let explorer: React.ReactElement<string>;
|
|
if (network.isCustom) {
|
|
explorer = <span>an explorer for the {network.name} network</span>;
|
|
} else {
|
|
explorer = (
|
|
<NewTabLink href={network.blockExplorer.addressUrl(wallet.getAddressString())}>
|
|
{network.blockExplorer.name}
|
|
</NewTabLink>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{recentTransactions.length ? (
|
|
<table className="RecentTxs-txs">
|
|
<thead>
|
|
<td>{translate('SEND_addr')}</td>
|
|
<td>{translate('SEND_amount_short')}</td>
|
|
<td>{translate('Sent')}</td>
|
|
<td />
|
|
</thead>
|
|
<tbody>
|
|
{recentTransactions.map(tx => (
|
|
<RecentTransaction
|
|
key={tx.time}
|
|
tx={tx}
|
|
network={network}
|
|
onClick={this.setActiveTxHash}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="RecentTxs-empty well">
|
|
<h2 className="RecentTxs-empty-text">
|
|
No recent MyCrypto transactions found, try checking on {explorer}.
|
|
</h2>
|
|
</div>
|
|
)}
|
|
<p className="RecentTxs-help">
|
|
Only recent transactions sent from this address via MyCrypto on the {network.name} network
|
|
are listed here. If you don't see your transaction, you can view all of them on {explorer}.
|
|
</p>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
private setActiveTxHash = (activeTxHash: string) => this.setState({ activeTxHash });
|
|
private clearActiveTxHash = () => this.setState({ activeTxHash: '' });
|
|
}
|
|
|
|
export default connect((state: AppState): StateProps => ({
|
|
recentTransactions: getRecentWalletTransactions(state),
|
|
network: getNetworkConfig(state)
|
|
}))(RecentTransactions);
|