@@ -153,7 +167,8 @@ const StyledContainer = styled.div`
`
const StyledTextInput = styled(TextInput)`
- width: 13rem;
+ width: 28ch;
+ ${font({ monospace: true })};
`
const StyledDatePickersContainer = styled.div`
diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js
index c3565ee120..1e65ad208a 100644
--- a/apps/finance/app/src/components/Transfers.js
+++ b/apps/finance/app/src/components/Transfers.js
@@ -6,7 +6,6 @@ import {
format,
isWithinInterval,
startOfDay,
- subDays,
} from 'date-fns'
import {
Button,
@@ -31,8 +30,6 @@ const TRANSFER_TYPES = [
const TRANSFERS_PER_PAGE = 10
const TRANSFER_TYPES_STRING = TRANSFER_TYPES.map(TransferTypes.convertToString)
-const DEFAULT_DAYS_SELECTED = 90
-
const formatDate = date => format(date, 'dd/MM/yy')
const reduceTokenDetails = (details, { address, decimals, symbol }) => {
@@ -45,8 +42,8 @@ const reduceTokenDetails = (details, { address, decimals, symbol }) => {
const initialState = {
selectedDateRange: {
- start: subDays(new Date(), DEFAULT_DAYS_SELECTED),
- end: new Date(),
+ start: null,
+ end: null,
},
selectedToken: 0,
selectedTransferType: 0,
@@ -75,9 +72,10 @@ class Transfers extends React.PureComponent {
})
}
handleResetFilters = () => {
- this.setState({
+ this.setState(({ selectedDateRange }) => ({
...initialState,
- })
+ selectedDateRange,
+ }))
}
handleDateRangeChange = selectedDateRange => {
this.setState({ selectedDateRange })
@@ -136,10 +134,11 @@ class Transfers extends React.PureComponent {
const transferType = TRANSFER_TYPES[selectedTransferType]
return transactions.filter(
({ token, isIncoming, date }) =>
- isWithinInterval(new Date(date), {
- start: startOfDay(selectedDateRange.start),
- end: endOfDay(selectedDateRange.end),
- }) &&
+ (!selectedDateRange.start || !selectedDateRange.end ||
+ isWithinInterval(new Date(date), {
+ start: startOfDay(selectedDateRange.start),
+ end: endOfDay(selectedDateRange.end),
+ })) &&
(selectedToken === 0 ||
addressesEqual(token, tokens[selectedToken - 1].address)) &&
(transferType === TransferTypes.All ||
@@ -200,9 +199,11 @@ class Transfers extends React.PureComponent {
{filteredTransfers.length === 0 ? (
- No transfers match your filter and period (
- {formatDate(selectedDateRange.start)} to{' '}
- {formatDate(selectedDateRange.end)}) selection.{' '}
+ No transfers match your filter{' '}
+ {selectedDateRange.start &&
+ `and period (${formatDate(
+ selectedDateRange.start
+ )} to ${formatDate(selectedDateRange.end)}) selection. `}
{filtersActive && (
Clear filters
diff --git a/apps/finance/app/src/components/TransfersFilters.js b/apps/finance/app/src/components/TransfersFilters.js
index 4a34aadf1e..a5387373db 100644
--- a/apps/finance/app/src/components/TransfersFilters.js
+++ b/apps/finance/app/src/components/TransfersFilters.js
@@ -131,8 +131,6 @@ const Filters = styled.div`
width: 100%;
margin: 0;
justify-content: space-between;
- margin-left: 0;
- margin-right: 0;
/* Easier than passing compactMode to every Filter & FilterLabel */
${Filter} {