2455928977

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/safe-global/safe-react/commit/<a class=hub.com/safe-global/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/safe-global/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/safe-global/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/safe-global/safe-react/commit/bcd1ef9ae6fdec4351971a034d7858c1dcacc4c3">bcd1ef9ae">&lt;a href=&quot;https://github.com/safe-global/safe-react/commit/</a><a class="double-link" href="https://github.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/bcd1ef9ae6fdec4351971a034d7858c1dcacc4c3">bcd1ef9ae</a><a href="https://github.com/safe-global/safe-react/commit/bcd1ef9ae6fdec4351971a034d7858c1dcacc4c3">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/safe-global/safe-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/bcd1ef9ae6fdec4351971a034d7858c1dcacc4c3&quot;&gt;bcd1ef9ae&lt;/a&gt;&lt;a href=&quot;https://github.com/safe-global/safe-react/commit/bcd1ef9ae6fdec4351971a034d7858c1dcacc4c3&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/safe-global/safe-react/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp... (continued)

Pull Request Pull Request #3870: fix: filter historical transactions

Run Details

1451 of 4875 branches covered (29.76%)

Branch coverage included in aggregate %.

138 of 138 new or added lines in 11 files covered. (100.0%)

3997 of 9777 relevant lines covered (40.88%)

37.78 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

51.04

/src/routes/safe/components/Transactions/TxList/Filter/index.tsx

import { ReactElement, useCallback, useEffect, useState } from 'react'
import { Controller, DefaultValues, useForm } from 'react-hook-form'
import styled from 'styled-components'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import ExpandLessIcon from '@material-ui/icons/ExpandLess'
import ClickAwayListener from '@material-ui/core/ClickAwayListener/ClickAwayListener'
import RadioGroup from '@material-ui/core/RadioGroup/RadioGroup'
import Radio from '@material-ui/core/Radio/Radio'
import Paper from '@material-ui/core/Paper/Paper'
import FormControl from '@material-ui/core/FormControl/FormControl'
import FormLabel from '@material-ui/core/FormLabel/FormLabel'
import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel'
import { parse } from 'query-string'
import { useHistory, useLocation } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'

import Button from 'src/components/layout/Button'
import RHFTextField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFTextField'
import RHFAddressSearchField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFAddressSearchField'
import BackdropLayout from 'src/components/layout/Backdrop'
import filterIcon from 'src/routes/safe/components/Transactions/TxList/assets/filter-icon.svg'
import { lg, md, primary300, grey400, largeFontSize, primary200, sm, black300 } from 'src/theme/variables'
import { trackEvent } from 'src/utils/googleTagManager'
import { TX_LIST_EVENTS } from 'src/utils/events/txList'
import { isValidAmount, isValidNonce } from 'src/routes/safe/components/Transactions/TxList/Filter/validation'
import { currentChainId } from 'src/logic/config/store/selectors'
import useSafeAddress from 'src/logic/currentSession/hooks/useSafeAddress'
import {
  addHistoryTransactions,
  removeHistoryTransactions,
} from 'src/logic/safe/store/actions/transactions/gatewayTransactions'
import { loadHistoryTransactions } from 'src/logic/safe/store/actions/transactions/fetchTransactions/loadGatewayTransactions'
import { checksumAddress } from 'src/utils/checksumAddress'
import { ChainId } from 'src/config/chain'
import { Dispatch } from 'src/logic/safe/store/actions/types'
import ScheduleIcon from '@material-ui/icons/Schedule'
import { IconButton, InputAdornment } from '@material-ui/core'
import { Tooltip } from 'src/components/layout/Tooltip'
import { isEqual } from 'lodash'

export const FILTER_TYPE_FIELD_NAME = 'type'
export const DATE_FROM_FIELD_NAME = 'execution_date__gte'
export const DATE_TO_FIELD_NAME = 'execution_date__lte'
export const RECIPIENT_FIELD_NAME = 'to'
export const AMOUNT_FIELD_NAME = 'value'
export const TOKEN_ADDRESS_FIELD_NAME = 'token_address'
export const MODULE_FIELD_NAME = 'module'
export const NONCE_FIELD_NAME = 'nonce'

export enum FilterType {
  INCOMING = 'Incoming',
  MULTISIG = 'Outgoing',
  MODULE = 'Module-based',
}

// Types cannot take computed property names
export type FilterForm = {
  [FILTER_TYPE_FIELD_NAME]: FilterType
  [DATE_FROM_FIELD_NAME]: string
  [DATE_TO_FIELD_NAME]: string
  [RECIPIENT_FIELD_NAME]: string
  [AMOUNT_FIELD_NAME]: string
  [TOKEN_ADDRESS_FIELD_NAME]: string
  [MODULE_FIELD_NAME]: string
  [NONCE_FIELD_NAME]: string
}

const defaultValues: DefaultValues<FilterForm> = {
  [FILTER_TYPE_FIELD_NAME]: FilterType.INCOMING,
  [DATE_FROM_FIELD_NAME]: '',
  [DATE_TO_FIELD_NAME]: '',
  [RECIPIENT_FIELD_NAME]: '',
  [AMOUNT_FIELD_NAME]: '',
  [TOKEN_ADDRESS_FIELD_NAME]: '',
  [MODULE_FIELD_NAME]: '',
  [NONCE_FIELD_NAME]: '',
}

const getInitialValues = (search: string): DefaultValues<FilterForm> => {
  return {
    ...defaultValues,
    ...parse(search),
  }
}

const loadTransactions = ({
  chainId,
  safeAddress,
  filter,
}: {
  chainId: ChainId
  safeAddress: string
  filter?: FilterForm
}) => {
  return async (dispatch: Dispatch) => {
    dispatch(removeHistoryTransactions({ chainId, safeAddress }))

    try {
      const values = await loadHistoryTransactions(safeAddress, filter)
      dispatch(addHistoryTransactions({ chainId, safeAddress, values }))
    } catch (e) {
      e.log()
    }
  }
}

const StyledRHFTextField = styled(RHFTextField)`
  &:hover {
    .MuiOutlinedInput-notchedOutline {
      border-color: ${black300};
    }
  }
`

const Filter = (): ReactElement => {
  const dispatch = useDispatch()
  const chainId = useSelector(currentChainId)
  const { safeAddress } = useSafeAddress()
  const { pathname, search } = useLocation()
  const history = useHistory()

  const [showFilter, setShowFilter] = useState<boolean>(false)
  const hideFilter = () => setShowFilter(false)

  const methods = useForm<FilterForm>({
    defaultValues: getInitialValues(search),
    shouldUnregister: true,
  })
  const { handleSubmit, reset, watch, control } = methods

  const toggleFilter = () => {
    if (showFilter) {
      setShowFilter(false)
      return
    }
    setShowFilter(true)

    // We use `shouldUnregister` to avoid saving every value to search
    // We must therefore reset the form to the values from it
    Object.entries(getInitialValues(search)).forEach(([key, value]) => {
      methods.setValue(key as keyof FilterForm, value)
    })
  }

  const clearFilter = useCallback(
    ({ clearSearch = true } = {}) => {
      if (search && clearSearch) {
        history.replace(pathname)
        dispatch(loadTransactions({ chainId, safeAddress: checksumAddress(safeAddress) }))
        reset(defaultValues)
      }

      hideFilter()
    },
    [search, history, pathname, chainId, dispatch, reset, safeAddress],
  )

  useEffect(() => {
    return () => {
      // If search is programatically cleared on unmount, the router routes back to here
      // Search is inherently cleared when unmounting either way
      clearFilter({ clearSearch: false })
    }
  }, [clearFilter])

  const filterType = watch(FILTER_TYPE_FIELD_NAME)

  const onSubmit = (filter: FilterForm) => {
    // Don't apply the same filter twice
    if (isEqual(filter, getInitialValues(search))) {
      hideFilter()
    }

    const query = Object.fromEntries(Object.entries(filter).filter(([, value]) => !!value))

    history.replace({ pathname, search: `?${new URLSearchParams(query).toString()}` })

    dispatch(loadTransactions({ chainId, safeAddress: checksumAddress(safeAddress), filter }))

    const trackedFields = [
      FILTER_TYPE_FIELD_NAME,
      // DATE_FROM_FIELD_NAME,
      // DATE_TO_FIELD_NAME,
      RECIPIENT_FIELD_NAME,
      AMOUNT_FIELD_NAME,
      TOKEN_ADDRESS_FIELD_NAME,
      MODULE_FIELD_NAME,
      NONCE_FIELD_NAME,
    ]

    trackedFields.forEach((field) => {
      if (query[field]) {
        trackEvent({ ...TX_LIST_EVENTS.FILTER, label: query[field] })
      }
    })

    hideFilter()
  }

  const comingSoonAdornment = (
    <InputAdornment position="end">
      <Tooltip title="Coming soon" arrow>
        <IconButton>
          <ScheduleIcon />
        </IconButton>
      </Tooltip>
    </InputAdornment>
  )

  return (
    <>
      <BackdropLayout isOpen={showFilter} />
      <ClickAwayListener onClickAway={hideFilter}>
        <Wrapper>
          <StyledFilterButton onClick={toggleFilter} variant="contained" color="primary" disableElevation>
            <StyledFilterIconImage src={filterIcon} /> Filters{' '}
            {showFilter ? <ExpandLessIcon color="secondary" /> : <ExpandMoreIcon color="secondary" />}
          </StyledFilterButton>
          {showFilter && (
            <StyledPaper elevation={0} variant="outlined">
              <form onSubmit={handleSubmit(onSubmit)}>
                <FilterWrapper>
                  <TxTypeFormControl>
                    <StyledFormLabel>Transaction type</StyledFormLabel>
                    <Controller<FilterForm>
                      name={FILTER_TYPE_FIELD_NAME}
                      control={control}
                      render={({ field }) => (
                        <RadioGroup {...field}>
                          {Object.values(FilterType).map((value) => (
                            <StyledRadioFormControlLabel value={value} control={<Radio />} label={value} key={value} />
                          ))}
                        </RadioGroup>
                      )}
                    />
                  </TxTypeFormControl>
                  <ParamsFormControl>
                    <StyledFormLabel>Parameters</StyledFormLabel>
                    <ParametersFormWrapper>
                      <RHFAddressSearchField<FilterForm>
                        name={RECIPIENT_FIELD_NAME}
                        label="Recipient"
                        methods={methods}
                      />
                      {filterType !== FilterType.MODULE && (
                        <>
                          <RHFTextField<FilterForm>
                            name={AMOUNT_FIELD_NAME}
                            label="Amount"
                            control={control}
                            rules={{
                              validate: isValidAmount,
                            }}
                          />
                          {/* @ts-expect-error - styled-components don't have strict types */}
                          <StyledRHFTextField<FilterForm>
                            name={DATE_FROM_FIELD_NAME}
                            label="From"
                            // type="date"
                            control={control}
                            disabled
                            endAdornment={comingSoonAdornment}
                          />
                          {/* @ts-expect-error - styled-components don't have strict types */}
                          <StyledRHFTextField<FilterForm>
                            name={DATE_TO_FIELD_NAME}
                            label="To"
                            // type="date"
                            control={control}
                            disabled
                            endAdornment={comingSoonAdornment}
                          />
                        </>
                      )}
                      {filterType === FilterType.INCOMING && (
                        <RHFAddressSearchField<FilterForm>
                          name={TOKEN_ADDRESS_FIELD_NAME}
                          label="Token address"
                          methods={methods}
                        />
                      )}
                      {filterType === FilterType.MULTISIG && (
                        <RHFTextField<FilterForm>
                          name={NONCE_FIELD_NAME}
                          label="Nonce"
                          control={control}
                          rules={{
                            validate: isValidNonce,
                          }}
                        />
                      )}
                      {filterType === FilterType.MODULE && (
                        <RHFAddressSearchField<FilterForm> name={MODULE_FIELD_NAME} label="Module" methods={methods} />
                      )}
                    </ParametersFormWrapper>
                    <ButtonWrapper>
                      <Button type="submit" variant="contained" color="primary">
                        Apply
                      </Button>
                      <Button variant="contained" onClick={clearFilter} color="default" disabled={!search}>
                        Clear
                      </Button>
                    </ButtonWrapper>
                  </ParamsFormControl>
                </FilterWrapper>
              </form>
            </StyledPaper>
          )}
        </Wrapper>
      </ClickAwayListener>
    </>
  )
}

export default Filter

const StyledFilterButton = styled(Button)`
  &.MuiButton-root {
    align-items: center;
    background-color: ${primary200};
    border: 2px solid ${primary300};
    color: #162d45;
    align-self: flex-end;
    margin-right: ${md};
    margin-top: -51px;
    margin-bottom: ${md};
    &:hover {
      background-color: ${primary200};
    }
  }
`

const StyledFilterIconImage = styled.img`
  margin-right: ${sm};
`

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: 100%;
`

const StyledPaper = styled(Paper)`
  border: 2px solid ${primary300};
  position: absolute;
  width: calc(100% - 30px);
  margin-left: 10px;
  top: 0;
  left: 0;
`

const FilterWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: ${lg};
`

const TxTypeFormControl = styled(FormControl)`
  &.MuiFormControl-root {
    box-sizing: border-box;
    padding: ${lg};
    border-right: 2px solid ${grey400}; // Divider
  }
`

const StyledFormLabel = styled(FormLabel)`
  &.MuiFormLabel-root {
    margin-bottom: ${lg};
    font-size: 12px;
    color: #b2bbc0;
  }
`

const StyledRadioFormControlLabel = styled(FormControlLabel)`
  .MuiFormControlLabel-root {
    font-size: ${largeFontSize};
  }
`

const ParamsFormControl = styled(FormControl)`
  &.MuiFormControl-root {
    box-sizing: border-box;
    padding: ${lg} 128px ${lg} ${lg};
  }
`

const ParametersFormWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
`

const ButtonWrapper = styled.div`
  grid-column: span 2;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 100px 100px;
  gap: ${md};
`

1	import { ReactElement, useCallback, useEffect, useState } from 'react'
2	import { Controller, DefaultValues, useForm } from 'react-hook-form'
3	import styled from 'styled-components'
4	import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
5	import ExpandLessIcon from '@material-ui/icons/ExpandLess'
6	import ClickAwayListener from '@material-ui/core/ClickAwayListener/ClickAwayListener'
7	import RadioGroup from '@material-ui/core/RadioGroup/RadioGroup'
8	import Radio from '@material-ui/core/Radio/Radio'
9	import Paper from '@material-ui/core/Paper/Paper'
10	import FormControl from '@material-ui/core/FormControl/FormControl'
11	import FormLabel from '@material-ui/core/FormLabel/FormLabel'
12	import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel'
13	import { parse } from 'query-string'
14	import { useHistory, useLocation } from 'react-router-dom'
15	import { useDispatch, useSelector } from 'react-redux'
16
17	import Button from 'src/components/layout/Button'
18	import RHFTextField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFTextField'
19	import RHFAddressSearchField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFAddressSearchField'
20	import BackdropLayout from 'src/components/layout/Backdrop'
21	import filterIcon from 'src/routes/safe/components/Transactions/TxList/assets/filter-icon.svg'
22	import { lg, md, primary300, grey400, largeFontSize, primary200, sm, black300 } from 'src/theme/variables'
23	import { trackEvent } from 'src/utils/googleTagManager'
24	import { TX_LIST_EVENTS } from 'src/utils/events/txList'
25	import { isValidAmount, isValidNonce } from 'src/routes/safe/components/Transactions/TxList/Filter/validation'
26	import { currentChainId } from 'src/logic/config/store/selectors'
27	import useSafeAddress from 'src/logic/currentSession/hooks/useSafeAddress'
28	import {
29	addHistoryTransactions,
30	removeHistoryTransactions,
31	} from 'src/logic/safe/store/actions/transactions/gatewayTransactions'
32	import { loadHistoryTransactions } from 'src/logic/safe/store/actions/transactions/fetchTransactions/loadGatewayTransactions'
33	import { checksumAddress } from 'src/utils/checksumAddress'
34	import { ChainId } from 'src/config/chain'
35	import { Dispatch } from 'src/logic/safe/store/actions/types'
36	import ScheduleIcon from '@material-ui/icons/Schedule'
37	import { IconButton, InputAdornment } from '@material-ui/core'
38	import { Tooltip } from 'src/components/layout/Tooltip'
39	import { isEqual } from 'lodash'
40
41	export const FILTER_TYPE_FIELD_NAME = 'type'	10✔
42	export const DATE_FROM_FIELD_NAME = 'execution_date__gte'	10✔
43	export const DATE_TO_FIELD_NAME = 'execution_date__lte'	10✔
44	export const RECIPIENT_FIELD_NAME = 'to'	10✔
45	export const AMOUNT_FIELD_NAME = 'value'	10✔
46	export const TOKEN_ADDRESS_FIELD_NAME = 'token_address'	10✔
47	export const MODULE_FIELD_NAME = 'module'	10✔
48	export const NONCE_FIELD_NAME = 'nonce'	10✔
49
50	export enum FilterType {
51	INCOMING = 'Incoming',
52	MULTISIG = 'Outgoing',
53	MODULE = 'Module-based',
54	}
55
56	// Types cannot take computed property names
57	export type FilterForm = {
58	[FILTER_TYPE_FIELD_NAME]: FilterType
59	[DATE_FROM_FIELD_NAME]: string
60	[DATE_TO_FIELD_NAME]: string
61	[RECIPIENT_FIELD_NAME]: string
62	[AMOUNT_FIELD_NAME]: string
63	[TOKEN_ADDRESS_FIELD_NAME]: string
64	[MODULE_FIELD_NAME]: string
65	[NONCE_FIELD_NAME]: string
66	}
67
68	const defaultValues: DefaultValues<FilterForm> = {	10✔
69	[FILTER_TYPE_FIELD_NAME]: FilterType.INCOMING,
70	[DATE_FROM_FIELD_NAME]: '',
71	[DATE_TO_FIELD_NAME]: '',
72	[RECIPIENT_FIELD_NAME]: '',
73	[AMOUNT_FIELD_NAME]: '',
74	[TOKEN_ADDRESS_FIELD_NAME]: '',
75	[MODULE_FIELD_NAME]: '',
76	[NONCE_FIELD_NAME]: '',
77	}
78
79	const getInitialValues = (search: string): DefaultValues<FilterForm> => {	10✔
80	return {	2✔
81	...defaultValues,
82	...parse(search),
83	}
84	}
85
86	const loadTransactions = ({	10✔
87	chainId,
88	safeAddress,
89	filter,
90	}: {
91	chainId: ChainId
92	safeAddress: string
93	filter?: FilterForm
94	}) => {
95	return async (dispatch: Dispatch) => {	×
96	dispatch(removeHistoryTransactions({ chainId, safeAddress }))	×
97
98	try {	×
99	const values = await loadHistoryTransactions(safeAddress, filter)	×
100	dispatch(addHistoryTransactions({ chainId, safeAddress, values }))	×
101	} catch (e) {
102	e.log()	×
103	}
104	}
105	}
106
107	const StyledRHFTextField = styled(RHFTextField)`	10✔
108	&:hover {
109	.MuiOutlinedInput-notchedOutline {
110	border-color: ${black300};
111	}
112	}
113	`
114
115	const Filter = (): ReactElement => {	10✔
116	const dispatch = useDispatch()	2✔
117	const chainId = useSelector(currentChainId)	2✔
118	const { safeAddress } = useSafeAddress()	2✔
119	const { pathname, search } = useLocation()	2✔
120	const history = useHistory()	2✔
121
122	const [showFilter, setShowFilter] = useState<boolean>(false)	2✔
123	const hideFilter = () => setShowFilter(false)	2✔
124
125	const methods = useForm<FilterForm>({	2✔
126	defaultValues: getInitialValues(search),
127	shouldUnregister: true,
128	})
129	const { handleSubmit, reset, watch, control } = methods	2✔
130
131	const toggleFilter = () => {	2✔
132	if (showFilter) {	×
133	setShowFilter(false)	×
134	return	×
135	}
136	setShowFilter(true)	×
137
138	// We use `shouldUnregister` to avoid saving every value to search
139	// We must therefore reset the form to the values from it
140	Object.entries(getInitialValues(search)).forEach(([key, value]) => {	×
141	methods.setValue(key as keyof FilterForm, value)	×
142	})
143	}
144
145	const clearFilter = useCallback(	2✔
146	({ clearSearch = true } = {}) => {	×
147	if (search && clearSearch) {	2!
148	history.replace(pathname)	×
149	dispatch(loadTransactions({ chainId, safeAddress: checksumAddress(safeAddress) }))	×
150	reset(defaultValues)	×
151	}
152
153	hideFilter()	2✔
154	},
155	[search, history, pathname, chainId, dispatch, reset, safeAddress],
156	)
157
158	useEffect(() => {	2✔
159	return () => {	2✔
160	// If search is programatically cleared on unmount, the router routes back to here
161	// Search is inherently cleared when unmounting either way
162	clearFilter({ clearSearch: false })	2✔
163	}
164	}, [clearFilter])
165
166	const filterType = watch(FILTER_TYPE_FIELD_NAME)	2✔
167
168	const onSubmit = (filter: FilterForm) => {	2✔
169	// Don't apply the same filter twice
170	if (isEqual(filter, getInitialValues(search))) {	×
171	hideFilter()	×
172	}
173
174	const query = Object.fromEntries(Object.entries(filter).filter(([, value]) => !!value))	×
175
176	history.replace({ pathname, search: `?${new URLSearchParams(query).toString()}` })	×
177
178	dispatch(loadTransactions({ chainId, safeAddress: checksumAddress(safeAddress), filter }))	×
179
180	const trackedFields = [	×
181	FILTER_TYPE_FIELD_NAME,
182	// DATE_FROM_FIELD_NAME,
183	// DATE_TO_FIELD_NAME,
184	RECIPIENT_FIELD_NAME,
185	AMOUNT_FIELD_NAME,
186	TOKEN_ADDRESS_FIELD_NAME,
187	MODULE_FIELD_NAME,
188	NONCE_FIELD_NAME,
189	]
190
191	trackedFields.forEach((field) => {	×
192	if (query[field]) {	×
193	trackEvent({ ...TX_LIST_EVENTS.FILTER, label: query[field] })	×
194	}
195	})
196
197	hideFilter()	×
198	}
199
200	const comingSoonAdornment = (
201	<InputAdornment position="end">	2✔
202	<Tooltip title="Coming soon" arrow>
203	<IconButton>
204	<ScheduleIcon />
205	</IconButton>
206	</Tooltip>
207	</InputAdornment>
208	)
209
210	return (	2✔
211	<>
212	<BackdropLayout isOpen={showFilter} />
213	<ClickAwayListener onClickAway={hideFilter}>
214	<Wrapper>
215	<StyledFilterButton onClick={toggleFilter} variant="contained" color="primary" disableElevation>
216	<StyledFilterIconImage src={filterIcon} /> Filters{' '}
217	{showFilter ? <ExpandLessIcon color="secondary" /> : <ExpandMoreIcon color="secondary" />}	2!
218	</StyledFilterButton>
219	{showFilter && (	2!
220	<StyledPaper elevation={0} variant="outlined">
221	<form onSubmit={handleSubmit(onSubmit)}>
222	<FilterWrapper>
223	<TxTypeFormControl>
224	<StyledFormLabel>Transaction type</StyledFormLabel>
225	<Controller<FilterForm>
226	name={FILTER_TYPE_FIELD_NAME}
227	control={control}
228	render={({ field }) => (
229	<RadioGroup {...field}>	×
230	{Object.values(FilterType).map((value) => (
231	<StyledRadioFormControlLabel value={value} control={<Radio />} label={value} key={value} />	×
232	))}
233	</RadioGroup>
234	)}
235	/>
236	</TxTypeFormControl>
237	<ParamsFormControl>
238	<StyledFormLabel>Parameters</StyledFormLabel>
239	<ParametersFormWrapper>
240	<RHFAddressSearchField<FilterForm>
241	name={RECIPIENT_FIELD_NAME}
242	label="Recipient"
243	methods={methods}
244	/>
245	{filterType !== FilterType.MODULE && (	×
246	<>
247	<RHFTextField<FilterForm>
248	name={AMOUNT_FIELD_NAME}
249	label="Amount"
250	control={control}
251	rules={{
252	validate: isValidAmount,
253	}}
254	/>
255	{/* @ts-expect-error - styled-components don't have strict types */}
256	<StyledRHFTextField<FilterForm>
257	name={DATE_FROM_FIELD_NAME}
258	label="From"
259	// type="date"
260	control={control}
261	disabled
262	endAdornment={comingSoonAdornment}
263	/>
264	{/* @ts-expect-error - styled-components don't have strict types */}
265	<StyledRHFTextField<FilterForm>
266	name={DATE_TO_FIELD_NAME}
267	label="To"
268	// type="date"
269	control={control}
270	disabled
271	endAdornment={comingSoonAdornment}
272	/>
273	</>
274	)}
275	{filterType === FilterType.INCOMING && (	×
276	<RHFAddressSearchField<FilterForm>
277	name={TOKEN_ADDRESS_FIELD_NAME}
278	label="Token address"
279	methods={methods}
280	/>
281	)}
282	{filterType === FilterType.MULTISIG && (	×
283	<RHFTextField<FilterForm>
284	name={NONCE_FIELD_NAME}
285	label="Nonce"
286	control={control}
287	rules={{
288	validate: isValidNonce,
289	}}
290	/>
291	)}
292	{filterType === FilterType.MODULE && (	×
293	<RHFAddressSearchField<FilterForm> name={MODULE_FIELD_NAME} label="Module" methods={methods} />
294	)}
295	</ParametersFormWrapper>
296	<ButtonWrapper>
297	<Button type="submit" variant="contained" color="primary">
298	Apply
299	</Button>
300	<Button variant="contained" onClick={clearFilter} color="default" disabled={!search}>
301	Clear
302	</Button>
303	</ButtonWrapper>
304	</ParamsFormControl>
305	</FilterWrapper>
306	</form>
307	</StyledPaper>
308	)}
309	</Wrapper>
310	</ClickAwayListener>
311	</>
312	)
313	}
314
315	export default Filter
316
317	const StyledFilterButton = styled(Button)`	10✔
318	&.MuiButton-root {
319	align-items: center;
320	background-color: ${primary200};
321	border: 2px solid ${primary300};
322	color: #162d45;
323	align-self: flex-end;
324	margin-right: ${md};
325	margin-top: -51px;
326	margin-bottom: ${md};
327	&:hover {
328	background-color: ${primary200};
329	}
330	}
331	`
332
333	const StyledFilterIconImage = styled.img`	10✔
334	margin-right: ${sm};
335	`
336
337	const Wrapper = styled.div`	10✔
338	display: flex;
339	flex-direction: column;
340	box-sizing: border-box;
341	position: relative;
342	z-index: 1;
343	width: 100%;
344	`
345
346	const StyledPaper = styled(Paper)`	10✔
347	border: 2px solid ${primary300};
348	position: absolute;
349	width: calc(100% - 30px);
350	margin-left: 10px;
351	top: 0;
352	left: 0;
353	`
354
355	const FilterWrapper = styled.div`	10✔
356	display: grid;
357	grid-template-columns: 1fr 3fr;
358	gap: ${lg};
359	`
360
361	const TxTypeFormControl = styled(FormControl)`	10✔
362	&.MuiFormControl-root {
363	box-sizing: border-box;
364	padding: ${lg};
365	border-right: 2px solid ${grey400}; // Divider
366	}
367	`
368
369	const StyledFormLabel = styled(FormLabel)`	10✔
370	&.MuiFormLabel-root {
371	margin-bottom: ${lg};
372	font-size: 12px;
373	color: #b2bbc0;
374	}
375	`
376
377	const StyledRadioFormControlLabel = styled(FormControlLabel)`	10✔
378	.MuiFormControlLabel-root {
379	font-size: ${largeFontSize};
380	}
381	`
382
383	const ParamsFormControl = styled(FormControl)`	10✔
384	&.MuiFormControl-root {
385	box-sizing: border-box;
386	padding: ${lg} 128px ${lg} ${lg};
387	}
388	`
389
390	const ParametersFormWrapper = styled.div`	10✔
391	display: grid;
392	grid-template-columns: 1fr 1fr;
393	gap: 26px;
394	`
395
396	const ButtonWrapper = styled.div`	10✔
397	grid-column: span 2;
398	margin-top: 36px;
399	display: grid;
400	grid-template-columns: 100px 100px;
401	gap: ${md};
402	`

safe-global / safe-react / 2455928977

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous