diff --git a/__tests__/components/TransactionHistoryPanel.test.js b/__tests__/components/TransactionHistoryPanel.test.js index b1cecd0c7..a3f36a4c7 100644 --- a/__tests__/components/TransactionHistoryPanel.test.js +++ b/__tests__/components/TransactionHistoryPanel.test.js @@ -45,7 +45,7 @@ const initialState = { batch: false, progress: LOADED, loadedCount: 1, - data: [], + data: { transactions: [] }, }, }, } @@ -114,10 +114,11 @@ describe('TransactionHistoryPanel', () => { test('correctly renders with NEO and GAS transaction history', () => { const transactionState = merge({}, initialState, { - spunky: { transactionHistory: { data: transactions } }, + spunky: { + transactionHistory: { data: { entries: transactions, count: 2 } }, + }, }) const { wrapper } = setup(transactionState, false) - const transactionList = wrapper.find('#transactionList') expect(transactionList.children().length).toEqual(2) diff --git a/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap b/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap index ed4cc3936..4de52765b 100644 --- a/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap +++ b/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TransactionHistoryPanel renders without crashing 1`] = ` -, + count: number, handleFetchAdditionalTxData: () => void, handleGetPendingTransactionInfo: () => void, handleRefreshTxData: () => void, pendingTransactions: Array, address: string, showSuccessNotification: ({ message: string }) => void, + loading: boolean, } const REFRESH_INTERVAL_MS = 30000 @@ -38,20 +43,61 @@ export default class TransactionHistory extends React.Component { } render() { - const { className, transactions } = this.props + const { + className, + transactions, + handleFetchAdditionalTxData, + loading, + count, + } = this.props const filteredPendingTransactions = this.pruneConfirmedTransactionsFromPending() this.pruneReturnedTransactionsFromStorage() return ( - - - + <> + + {loading && !transactions.length ? ( +
+ +
+ ) : ( + + )} +
+ + {!!transactions.length && ( +
+ + Displaying {transactions.length} of {count} transactions + + + +
+ )} + ) } @@ -97,13 +143,9 @@ export default class TransactionHistory extends React.Component { handleGetPendingTransactionInfo() } } +} - handleScroll = (e: SyntheticInputEvent) => { - const { handleFetchAdditionalTxData } = this.props - const bottom = - e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight - if (bottom) { - handleFetchAdditionalTxData() - } - } +TransactionHistory.defaultProps = { + transactions: [], + pendingTransactions: [], } diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.scss b/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.scss index 2b288b929..19f1bcc1a 100644 --- a/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.scss +++ b/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.scss @@ -26,3 +26,22 @@ .transactions { margin: -24px; } + +.loadMoreButton { + height: 40px; +} + +.transactionHistoryPanel { + margin-top: -12px; +} + +.buttonLoadingIndicator { + position: relative; + width: 15px; + height: 15px; + opacity: 0.4; + margin: auto; + left: -10px; + top: auto; + transform: none; +} diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/index.js b/app/components/TransactionHistory/TransactionHistoryPanel/index.js index a3418e75e..d022aec3a 100644 --- a/app/components/TransactionHistory/TransactionHistoryPanel/index.js +++ b/app/components/TransactionHistory/TransactionHistoryPanel/index.js @@ -17,8 +17,9 @@ import { showInfoNotification, } from '../../../modules/notifications' -const mapTransactionsDataToProps = transactions => ({ - transactions, +const mapTransactionsDataToProps = data => ({ + transactions: data?.entries ?? [], + count: data?.count ?? 0, }) const mapAccountActionsToProps = (actions, { net, address }) => ({ @@ -64,9 +65,6 @@ export default compose( ), withAuthData(), withNetworkData(), - withProgressPanel(transactionHistoryActions, { - title: '', - }), withActions(transactionHistoryActions, mapAccountActionsToProps), withActions(getPendingTransactionInfo, mapPendingTransactionActionsToProps), withCall(getPendingTransactionInfo), diff --git a/app/containers/TransactionHistory/TransactionHistory.scss b/app/containers/TransactionHistory/TransactionHistory.scss index 92cd51e5c..deec5c2fb 100644 --- a/app/containers/TransactionHistory/TransactionHistory.scss +++ b/app/containers/TransactionHistory/TransactionHistory.scss @@ -1,8 +1,7 @@ .transactionHistory { display: flex; flex-direction: column; - height: 100%; - max-height: calc(100vh - 120px) !important; + height: calc(100vh - 195px) !important; .transactionHistoryPanel { flex: 1 1 auto;