2110463085

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/gnosis/safe-react/commit/<a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/ca892b23afc9cb61c605b45c37bb8bf78cc2bec4">ca892b23a">&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/</a><a class="double-link" href="https://github.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/ca892b23afc9cb61c605b45c37bb8bf78cc2bec4">ca892b23a</a><a href="https://github.com/gnosis/safe-react/commit/ca892b23afc9cb61c605b45c37bb8bf78cc2bec4">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/gnosis/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/gnosis/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/gnosis/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/gnosis/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/gnosis/safe-react/commit/ca892b23afc9cb61c605b45c37bb8bf78cc2bec4&quot;&gt;ca892b23a&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/ca892b23afc9cb61c605b45c37bb8bf78cc2bec4&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/gnosis/safe-react/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/gnosis/safe-react/commit/&amp;amp;lt;a ... (continued)

Pull Request Pull Request #3765: feat: filter form

Run Details

1235 of 4393 branches covered (28.11%)

Branch coverage included in aggregate %.

61 of 61 new or added lines in 4 files covered. (100.0%)

3505 of 8879 relevant lines covered (39.48%)

36.56 hits per line

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

32.26

/src/routes/safe/components/Transactions/TxList/HistoryFilter.tsx

import { ReactElement } from 'react'
import { Controller, useForm } from 'react-hook-form'
import styled from 'styled-components'
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 Button from 'src/components/layout/Button'
import RHFTextField from 'src/components/forms/RHF/RHFTextField'
import RHFAddressSearchField from 'src/components/forms/RHF/RHFAddressSearchField'

import { lg, md, primary300, grey400, largeFontSize } from 'src/theme/variables'

enum FilterType {
  INCOMING = 'Incoming',
  MODULE = 'Module',
  MULTISIG = 'Multisignature',
}
enum Module {
  EXAMPLE = 'Example',
}
type FilterForm = {
  type: FilterType
  from: number
  to: number
  recipient: string
  amount: number
  tokenAddress: string
  module: Module
  nonce: number
}

const HistoryFilter = (): ReactElement => {
  const { handleSubmit, formState, reset, watch, control } = useForm<FilterForm>({
    defaultValues: {
      type: FilterType.INCOMING,
      from: undefined,
      to: undefined,
      recipient: undefined,
      amount: undefined,
      tokenAddress: undefined,
      module: undefined,
      nonce: undefined,
    },
    shouldUnregister: true, // Remove values of unmounted inputs
  })

  const type = watch('type')

  const isClearable = formState.isDirty && !formState.dirtyFields.type

  const onClear = () => {
    reset({ type })
  }

  const onSubmit = ({ type: _, ...rest }: FilterForm) => {
    const filter = Object.fromEntries(Object.entries(rest).filter(([, value]) => value !== undefined))
    console.log(filter)
  }

  return (
    <Wrapper>
      <StyledPaper elevation={0} variant="outlined">
        <form onSubmit={handleSubmit(onSubmit)}>
          <FilterWrapper>
            <StyledTxTypeFormControl>
              <StyledFormLabel>Transaction type</StyledFormLabel>
              <Controller
                name="type"
                control={control}
                render={({ field }) => (
                  <RadioGroup {...field}>
                    {Object.values(FilterType).map((value) => (
                      <StyledRadioFormControlLabel value={value} control={<Radio />} label={value} key={value} />
                    ))}
                  </RadioGroup>
                )}
              />
            </StyledTxTypeFormControl>
            <ParamsFormControl>
              <StyledFormLabel>Parameters</StyledFormLabel>
              <ParametersFormWrapper>
                <RHFTextField name="from" label="From" type="date" control={control} />
                <RHFTextField name="to" label="To" type="date" control={control} />
                {/* <RHFTextField name="recipient" label="Recipient" />
                 */}
                <RHFAddressSearchField name="recipient" label="Recipient" control={control} />
                {[FilterType.INCOMING, FilterType.MULTISIG].includes(type) && (
                  <>
                    <RHFTextField name="amount" label="Amount" control={control} />
                    {type === FilterType.INCOMING && (
                      <RHFTextField name="tokenAddress" label="Token Address" control={control} />
                    )}
                    {type === FilterType.MULTISIG && <RHFTextField name="nonce" label="Nonce" control={control} />}
                  </>
                )}
                {type === FilterType.MODULE && <RHFTextField name="module" label="Module" control={control} />}
              </ParametersFormWrapper>
              <ButtonWrapper>
                <Button type="submit" variant="contained" disabled={!isClearable} color="primary">
                  Apply
                </Button>
                <Button variant="contained" onClick={onClear} disabled={!isClearable} color="gray">
                  Clear
                </Button>
              </ButtonWrapper>
            </ParamsFormControl>
          </FilterWrapper>
        </form>
      </StyledPaper>
    </Wrapper>
  )
}

export default HistoryFilter

const Wrapper = styled.div`
  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 StyledTxTypeFormControl = 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 } from 'react'
2	import { Controller, useForm } from 'react-hook-form'
3	import styled from 'styled-components'
4	import RadioGroup from '@material-ui/core/RadioGroup/RadioGroup'
5	import Radio from '@material-ui/core/Radio/Radio'
6	import Paper from '@material-ui/core/Paper/Paper'
7	import FormControl from '@material-ui/core/FormControl/FormControl'
8	import FormLabel from '@material-ui/core/FormLabel/FormLabel'
9	import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel'
10
11	import Button from 'src/components/layout/Button'
12	import RHFTextField from 'src/components/forms/RHF/RHFTextField'
13	import RHFAddressSearchField from 'src/components/forms/RHF/RHFAddressSearchField'
14
15	import { lg, md, primary300, grey400, largeFontSize } from 'src/theme/variables'
16
17	enum FilterType {
18	INCOMING = 'Incoming',
19	MODULE = 'Module',
20	MULTISIG = 'Multisignature',
21	}
22	enum Module {
23	EXAMPLE = 'Example',
24	}
25	type FilterForm = {
26	type: FilterType
27	from: number
28	to: number
29	recipient: string
30	amount: number
31	tokenAddress: string
32	module: Module
33	nonce: number
34	}
35
36	const HistoryFilter = (): ReactElement => {	1✔
37	const { handleSubmit, formState, reset, watch, control } = useForm<FilterForm>({	×
38	defaultValues: {
39	type: FilterType.INCOMING,
40	from: undefined,
41	to: undefined,
42	recipient: undefined,
43	amount: undefined,
44	tokenAddress: undefined,
45	module: undefined,
46	nonce: undefined,
47	},
48	shouldUnregister: true, // Remove values of unmounted inputs
49	})
50
51	const type = watch('type')	×
52
53	const isClearable = formState.isDirty && !formState.dirtyFields.type	×
54
55	const onClear = () => {	×
56	reset({ type })	×
57	}
58
59	const onSubmit = ({ type: _, ...rest }: FilterForm) => {	×
60	const filter = Object.fromEntries(Object.entries(rest).filter(([, value]) => value !== undefined))	×
61	console.log(filter)	×
62	}
63
64	return (	×
65	<Wrapper>
66	<StyledPaper elevation={0} variant="outlined">
67	<form onSubmit={handleSubmit(onSubmit)}>
68	<FilterWrapper>
69	<StyledTxTypeFormControl>
70	<StyledFormLabel>Transaction type</StyledFormLabel>
71	<Controller
72	name="type"
73	control={control}
74	render={({ field }) => (
75	<RadioGroup {...field}>	×
76	{Object.values(FilterType).map((value) => (
77	<StyledRadioFormControlLabel value={value} control={<Radio />} label={value} key={value} />	×
78	))}
79	</RadioGroup>
80	)}
81	/>
82	</StyledTxTypeFormControl>
83	<ParamsFormControl>
84	<StyledFormLabel>Parameters</StyledFormLabel>
85	<ParametersFormWrapper>
86	<RHFTextField name="from" label="From" type="date" control={control} />
87	<RHFTextField name="to" label="To" type="date" control={control} />
88	{/* <RHFTextField name="recipient" label="Recipient" />
89	*/}
90	<RHFAddressSearchField name="recipient" label="Recipient" control={control} />
91	{[FilterType.INCOMING, FilterType.MULTISIG].includes(type) && (	×
92	<>
93	<RHFTextField name="amount" label="Amount" control={control} />
94	{type === FilterType.INCOMING && (	×
95	<RHFTextField name="tokenAddress" label="Token Address" control={control} />
96	)}
97	{type === FilterType.MULTISIG && <RHFTextField name="nonce" label="Nonce" control={control} />}	×
98	</>
99	)}
100	{type === FilterType.MODULE && <RHFTextField name="module" label="Module" control={control} />}	×
101	</ParametersFormWrapper>
102	<ButtonWrapper>
103	<Button type="submit" variant="contained" disabled={!isClearable} color="primary">
104	Apply
105	</Button>
106	<Button variant="contained" onClick={onClear} disabled={!isClearable} color="gray">
107	Clear
108	</Button>
109	</ButtonWrapper>
110	</ParamsFormControl>
111	</FilterWrapper>
112	</form>
113	</StyledPaper>
114	</Wrapper>
115	)
116	}
117
118	export default HistoryFilter
119
120	const Wrapper = styled.div`	1✔
121	box-sizing: border-box;
122	position: relative;
123	z-index: 1;
124	width: 100%;
125	`
126
127	const StyledPaper = styled(Paper)`	1✔
128	border: 2px solid ${primary300};
129	position: absolute;
130	width: calc(100% - 30px);
131	margin-left: 10px;
132	top: 0;
133	left: 0;
134	`
135
136	const FilterWrapper = styled.div`	1✔
137	display: grid;
138	grid-template-columns: 1fr 3fr;
139	gap: ${lg};
140	`
141
142	const StyledTxTypeFormControl = styled(FormControl)`	1✔
143	&.MuiFormControl-root {
144	box-sizing: border-box;
145	padding: ${lg};
146	border-right: 2px solid ${grey400}; // Divider
147	}
148	`
149
150	const StyledFormLabel = styled(FormLabel)`	1✔
151	&.MuiFormLabel-root {
152	margin-bottom: ${lg};
153	font-size: 12px;
154	color: #b2bbc0;
155	}
156	`
157
158	const StyledRadioFormControlLabel = styled(FormControlLabel)`	1✔
159	.MuiFormControlLabel-root {
160	font-size: ${largeFontSize};
161	}
162	`
163
164	const ParamsFormControl = styled(FormControl)`	1✔
165	&.MuiFormControl-root {
166	box-sizing: border-box;
167	padding: ${lg} 128px ${lg} ${lg};
168	}
169	`
170
171	const ParametersFormWrapper = styled.div`	1✔
172	display: grid;
173	grid-template-columns: 1fr 1fr;
174	gap: 26px;
175	`
176
177	const ButtonWrapper = styled.div`	1✔
178	grid-column: span 2;
179	margin-top: 36px;
180	display: grid;
181	grid-template-columns: 100px 100px;
182	gap: ${md};
183	`

gnosis / safe-react / 2110463085

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