2103836104

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/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/b9c5a79adf9b3cb6dd368eafe1f6d713607e9cbc">b9c5a79ad">&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/b9c5a79adf9b3cb6dd368eafe1f6d713607e9cbc">b9c5a79ad</a><a href="https://github.com/gnosis/safe-react/commit/b9c5a79adf9b3cb6dd368eafe1f6d713607e9cbc">&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/b9c5a79adf9b3cb6dd368eafe1f6d713607e9cbc&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 class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;https://git&amp;quot;&amp;gt;&amp;amp;lt;a class=&amp;lt;/a&amp;gt;hub.com/gnosis/safe-react/commit/b9c5a79adf9b3cb6dd368eafe1f6d713607e9cbc&amp;quot;&amp;gt;b9c5a79ad&amp;lt;/a&amp;gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/b9c5a79adf9b3cb6dd368eafe1f6d713607e9cbc&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/gnosis/safe-react/commit/b9c5a79adf9b3cb6dd368eafe1f6d713&amp;lt;/a&amp;gt;607e9</a>cbc&quot;&gt;&amp;quot;&amp;gt;Merge &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;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/gnosis/safe-react/commit/8826dcdca&quot;&gt;8826dcd... (continued)

Pull Request Pull Request #3765: feat: initial filter form

Run Details

1235 of 4375 branches covered (28.23%)

Branch coverage included in aggregate %.

28 of 28 new or added lines in 3 files covered. (100.0%)

3504 of 8846 relevant lines covered (39.61%)

36.7 hits per line

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

33.33

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

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

gnosis / safe-react / 2103836104

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