-
{balance.asset}
-
-
Total:
-
+
+
{(parseFloat(balance.free) + parseFloat(balance.locked)).toFixed(
5
- )}
+ )}{' '}
+ {balance.asset}
+ {balance.quote !== null ? (
+
+ {parseFloat(balance.estimate).toFixed(5)} {balance.quote}
+
+ ) : (
+
+ placeholder
+
+ )}
- Free:
+
+ Free
+
{parseFloat(balance.free).toFixed(5)}
-
-
Locked:
+
0 ? 'text-warning' : ''
+ }`}>
+
+ Locked
+
{parseFloat(balance.locked).toFixed(5)}
- {quoteEstimate !== null ? (
-
-
- In {quoteEstimate.quote}:
-
-
- {parseFloat(quoteEstimate.estimate).toFixed(5)}
-
-
- ) : (
-
- placeholder
-
- )}
);
diff --git a/public/js/App.js b/public/js/App.js
index 2ae20ef1..3ba7c0b0 100644
--- a/public/js/App.js
+++ b/public/js/App.js
@@ -22,26 +22,51 @@ class App extends React.Component {
publicURL: '',
dustTransfer: {},
availableSortOptions: [
- { sortBy: 'default', label: 'Default' },
- { sortBy: 'buy-difference-asc', label: 'Buy - Difference (asc)' },
- { sortBy: 'buy-difference-desc', label: 'Buy - Difference (desc)' },
- { sortBy: 'sell-profit-asc', label: 'Sell - Profit (asc)' },
- { sortBy: 'sell-profit-desc', label: 'Sell - Profit (desc)' },
- { sortBy: 'alpha-asc', label: 'Alphabetical (asc)' },
- { sortBy: 'alpha-desc', label: 'Alphabetical (desc)' }
+ { sortBy: 'default', sortByDesc: false, label: 'Default' },
+ {
+ sortBy: 'buy-difference',
+ sortByDesc: false,
+ label: 'Buy - Difference (asc)'
+ },
+ {
+ sortBy: 'buy-difference',
+ sortByDesc: true,
+ label: 'Buy - Difference (desc)'
+ },
+ {
+ sortBy: 'sell-profit',
+ sortByDesc: false,
+ label: 'Sell - Profit (asc)'
+ },
+ {
+ sortBy: 'sell-profit',
+ sortByDesc: true,
+ label: 'Sell - Profit (desc)'
+ },
+ { sortBy: 'alpha', sortByDesc: false, label: 'Alphabetical (asc)' },
+ { sortBy: 'alpha', sortByDesc: true, label: 'Alphabetical (desc)' }
],
- selectedSortOption: 'default',
+ selectedSortOption: {
+ sortBy: 'default',
+ sortByDesc: false
+ },
searchKeyword: '',
isLoaded: false,
isAuthenticated: false,
botOptions: {},
- authToken: localStorage.getItem('authToken') || ''
+ authToken: localStorage.getItem('authToken') || '',
+ totalProfitAndLoss: {},
+ streamsCount: 0,
+ symbolsCount: 0,
+ page: 1,
+ totalPages: 1
};
this.requestLatest = this.requestLatest.bind(this);
this.connectWebSocket = this.connectWebSocket.bind(this);
this.sendWebSocket = this.sendWebSocket.bind(this);
this.setSortOption = this.setSortOption.bind(this);
this.setSearchKeyword = this.setSearchKeyword.bind(this);
+ this.setPage = this.setPage.bind(this);
this.toast = this.toast.bind(this);
@@ -76,7 +101,12 @@ class App extends React.Component {
}
requestLatest() {
- this.sendWebSocket('latest');
+ this.sendWebSocket('latest', {
+ page: this.state.page,
+ searchKeyword: this.state.searchKeyword,
+ sortBy: this.state.selectedSortOption.sortBy,
+ sortByDesc: this.state.selectedSortOption.sortByDesc
+ });
}
toast({ type, title }) {
@@ -133,16 +163,20 @@ class App extends React.Component {
{}
),
closedTrades: _.get(response, ['common', 'closedTrades'], []),
- symbols: sortingSymbols(_.get(response, ['stats', 'symbols'], []), {
- selectedSortOption: self.state.selectedSortOption,
- searchKeyword: self.state.searchKeyword
- }),
+ symbols: _.get(response, ['stats', 'symbols'], []),
packageVersion: _.get(response, ['common', 'version'], ''),
gitHash: _.get(response, ['common', 'gitHash'], ''),
- exchangeSymbols: _.get(response, ['common', 'exchangeSymbols'], []),
accountInfo: _.get(response, ['common', 'accountInfo'], {}),
publicURL: _.get(response, ['common', 'publicURL'], ''),
- apiInfo: _.get(response, ['common', 'apiInfo'], {})
+ apiInfo: _.get(response, ['common', 'apiInfo'], {}),
+ totalProfitAndLoss: _.get(
+ response,
+ ['common', 'totalProfitAndLoss'],
+ ''
+ ),
+ streamsCount: _.get(response, ['common', 'streamsCount'], 0),
+ symbolsCount: _.get(response, ['common', 'symbolsCount'], 0),
+ totalPages: _.get(response, ['common', 'totalPages'], 1)
});
}
@@ -158,6 +192,12 @@ class App extends React.Component {
dustTransfer: response.dustTransfer
});
}
+
+ if (response.type === 'exchange-symbols-get-result') {
+ self.setState({
+ exchangeSymbols: response.exchangeSymbols
+ });
+ }
};
instance.onclose = () => {
@@ -198,13 +238,31 @@ class App extends React.Component {
setSearchKeyword(searchKeyword) {
this.setState({
- searchKeyword
+ searchKeyword,
+ page: 1
+ });
+ }
+
+ setPage(newPage) {
+ this.setState({
+ page: newPage
});
}
componentDidMount() {
- const selectedSortOption =
- localStorage.getItem('selectedSortOption') || 'default';
+ let selectedSortOption = {
+ sortBy: 'default',
+ sortByDesc: false
+ };
+
+ try {
+ selectedSortOption = JSON.parse(
+ localStorage.getItem('selectedSortOption')
+ ) || {
+ sortBy: 'default',
+ sortByDesc: false
+ };
+ } catch (e) {}
this.setState({
selectedSortOption
@@ -233,13 +291,18 @@ class App extends React.Component {
closedTrades,
publicURL,
apiInfo,
+ streamsCount,
+ symbolsCount,
dustTransfer,
availableSortOptions,
selectedSortOption,
searchKeyword,
isAuthenticated,
botOptions,
- isLoaded
+ isLoaded,
+ totalProfitAndLoss,
+ page,
+ totalPages
} = this.state;
if (isLoaded === false) {
@@ -270,14 +333,60 @@ class App extends React.Component {
);
});
- const symbolEstimates = symbols.map(symbol => {
- return {
- baseAsset: symbol.symbolInfo.baseAsset,
- quoteAsset: symbol.symbolInfo.quoteAsset,
- estimatedValue: symbol.baseAssetBalance.estimatedValue,
- tickSize: symbol.symbolInfo.filterPrice.tickSize
- };
+ const paginationItems = [];
+
+ paginationItems.push(
+
this.setPage(1)}
+ />
+ );
+ paginationItems.push(
+ this.setPage(page - 1)}
+ disabled={page === 1 || totalPages === 1}
+ />
+ );
+ [...Array(3).keys()].forEach(index => {
+ if (page === 1 && index === 0) {
+ paginationItems.push(
+ this.setPage(page)}>
+ {page}
+
+ );
+ } else {
+ const pageNum = page === 1 ? page + index : page + index - 1;
+ paginationItems.push(
+ totalPages}
+ key={`pagination-item-${index}`}
+ onClick={() => this.setPage(pageNum)}>
+ {pageNum}
+
+ );
+ }
});
+ paginationItems.push(
+ this.setPage(page + 1)}
+ disabled={page === totalPages || page >= totalPages}
+ />
+ );
+ const lastPage = totalPages;
+ paginationItems.push(
+ = totalPages}
+ onClick={() => this.setPage(lastPage)}
+ />
+ );
return (
@@ -301,7 +410,6 @@ class App extends React.Component {
accountInfo={accountInfo}
dustTransfer={dustTransfer}
sendWebSocket={this.sendWebSocket}
- quoteEstimates={symbolEstimates}
/>