2116559579

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/106aaa61d4ee4a2b53c1a19c4c73f1e347a95411">106aaa61d">&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/106aaa61d4ee4a2b53c1a19c4c73f1e347a95411">106aaa61d</a><a href="https://github.com/gnosis/safe-react/commit/106aaa61d4ee4a2b53c1a19c4c73f1e347a95411">&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/106aaa61d4ee4a2b53c1a19c4c73f1e347a95411&quot;&gt;106aaa61d&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/106aaa61d4ee4a2b53c1a19c4c73f1e347a95411&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

1254 of 4426 branches covered (28.33%)

Branch coverage included in aggregate %.

114 of 114 new or added lines in 8 files covered. (100.0%)

3542 of 8928 relevant lines covered (39.67%)

36.6 hits per line

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

30.38

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

import { ReactElement, useRef, 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 type { SettingsInfo } from '@gnosis.pm/safe-react-gateway-sdk'

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 RHFModuleSearchField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFModuleSearchField'
import BackdropLayout from 'src/components/layout/Backdrop'
import { isValidAddress } from 'src/utils/isValidAddress'
import filterIcon from 'src/routes/safe/components/Transactions/TxList/assets/filter-icon.svg'

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

// Types cannot take computed property names
const TYPE_FIELD_NAME = 'type'
const FROM_FIELD_NAME = 'from'
const TO_FIELD_NAME = 'to'
const RECIPIENT_FIELD_NAME = 'recipient'
const HIDDEN_RECIPIENT_FIELD_NAME = `__recipient`
const AMOUNT_FIELD_NAME = 'amount'
const TOKEN_ADDRESS_FIELD_NAME = 'tokenAddress'
const MODULE_FIELD_NAME = 'module'
const NONCE_FIELD_NAME = 'nonce'

enum FilterType {
  INCOMING = 'Incoming',
  MODULE = 'Module',
  MULTISIG = 'Multisignature',
}

type FilterForm = {
  [TYPE_FIELD_NAME]: FilterType
  [FROM_FIELD_NAME]: string
  [TO_FIELD_NAME]: string
  [RECIPIENT_FIELD_NAME]: string
  [HIDDEN_RECIPIENT_FIELD_NAME]: string
  [AMOUNT_FIELD_NAME]: string
  [TOKEN_ADDRESS_FIELD_NAME]: string
  [MODULE_FIELD_NAME]: SettingsInfo['type']
  [NONCE_FIELD_NAME]: string
}

const isValidAmount = (value: FilterForm['amount']): string | undefined => {
  if (value && isNaN(Number(value))) {
    return 'Invalid number'
  }
}

const isValidTokenAddress = (value: FilterForm['tokenAddress']): string | undefined => {
  if (value && !isValidAddress(value)) {
    return 'Invalid address'
  }
}

const isValidNonce = (value: FilterForm['nonce']): string | undefined => {
  if (value.length === 0) {
    return
  }

  const number = Number(value)
  if (isNaN(number)) {
    return 'Invalid number'
  }
  if (number < 0) {
    return 'Nonce cannot be negative'
  }
}

const Filter = (): ReactElement => {
  const [showFilter, setShowFilter] = useState<boolean>(false)
  const hideFilter = () => setShowFilter(false)
  const toggleFilter = () => setShowFilter((prev) => !prev)

  // We cannot rely on the default values in `useForm` because they are updated on unmount
  // meaning that each `reset` does not retain the 'original' default values
  const defaultValues = useRef<DefaultValues<FilterForm>>({
    [TYPE_FIELD_NAME]: FilterType.INCOMING,
    [FROM_FIELD_NAME]: '',
    [TO_FIELD_NAME]: '',
    [RECIPIENT_FIELD_NAME]: '',
    [HIDDEN_RECIPIENT_FIELD_NAME]: '',
    [AMOUNT_FIELD_NAME]: '',
    [TOKEN_ADDRESS_FIELD_NAME]: '',
    [MODULE_FIELD_NAME]: undefined,
    [NONCE_FIELD_NAME]: '',
  })

  const methods = useForm<FilterForm>({
    defaultValues: defaultValues.current,
  })
  const { handleSubmit, formState, reset, watch, control } = methods

  const type = watch(TYPE_FIELD_NAME)

  const isClearable = Object.entries(formState.dirtyFields).some(([name, value]) => value && name !== TYPE_FIELD_NAME)
  const clearParameters = () => {
    reset({ ...defaultValues.current, type })
  }

  const onSubmit = ({ [TYPE_FIELD_NAME]: _t, [HIDDEN_RECIPIENT_FIELD_NAME]: _hr, ...filter }: FilterForm) => {
    console.log(filter)
    hideFilter()
  }

  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={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>
                      <RHFTextField<FilterForm> name={FROM_FIELD_NAME} label="From" type="date" control={control} />
                      <RHFTextField<FilterForm> name={TO_FIELD_NAME} label="To" type="date" control={control} />
                      <RHFAddressSearchField<FilterForm>
                        name={RECIPIENT_FIELD_NAME}
                        hiddenName={HIDDEN_RECIPIENT_FIELD_NAME}
                        label="Recipient"
                        methods={methods}
                      />
                      {[FilterType.INCOMING, FilterType.MULTISIG].includes(type) && (
                        <RHFTextField<FilterForm>
                          name={AMOUNT_FIELD_NAME}
                          label="Amount"
                          control={control}
                          rules={{
                            validate: isValidAmount,
                          }}
                        />
                      )}
                      {type === FilterType.INCOMING && (
                        <RHFTextField<FilterForm>
                          name={TOKEN_ADDRESS_FIELD_NAME}
                          label="Token Address"
                          control={control}
                          rules={{
                            validate: isValidTokenAddress,
                          }}
                        />
                      )}
                      {type === FilterType.MULTISIG && (
                        <RHFTextField<FilterForm>
                          name={NONCE_FIELD_NAME}
                          label="Nonce"
                          control={control}
                          rules={{
                            validate: isValidNonce,
                          }}
                        />
                      )}
                      {type === FilterType.MODULE && (
                        <RHFModuleSearchField<FilterForm> name={MODULE_FIELD_NAME} label="Module" control={control} />
                      )}
                    </ParametersFormWrapper>
                    <ButtonWrapper>
                      <Button type="submit" variant="contained" disabled={!isClearable} color="primary">
                        Apply
                      </Button>
                      <Button variant="contained" onClick={clearParameters} disabled={!isClearable} color="default">
                        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, useRef, 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 type { SettingsInfo } from '@gnosis.pm/safe-react-gateway-sdk'
14
15	import Button from 'src/components/layout/Button'
16	import RHFTextField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFTextField'
17	import RHFAddressSearchField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFAddressSearchField'
18	import RHFModuleSearchField from 'src/routes/safe/components/Transactions/TxList/Filter/RHFModuleSearchField'
19	import BackdropLayout from 'src/components/layout/Backdrop'
20	import { isValidAddress } from 'src/utils/isValidAddress'
21	import filterIcon from 'src/routes/safe/components/Transactions/TxList/assets/filter-icon.svg'
22
23	import { lg, md, primary300, grey400, largeFontSize, primary200, sm } from 'src/theme/variables'
24
25	// Types cannot take computed property names
26	const TYPE_FIELD_NAME = 'type'	1✔
27	const FROM_FIELD_NAME = 'from'	1✔
28	const TO_FIELD_NAME = 'to'	1✔
29	const RECIPIENT_FIELD_NAME = 'recipient'	1✔
30	const HIDDEN_RECIPIENT_FIELD_NAME = `__recipient`	1✔
31	const AMOUNT_FIELD_NAME = 'amount'	1✔
32	const TOKEN_ADDRESS_FIELD_NAME = 'tokenAddress'	1✔
33	const MODULE_FIELD_NAME = 'module'	1✔
34	const NONCE_FIELD_NAME = 'nonce'	1✔
35
36	enum FilterType {
37	INCOMING = 'Incoming',
38	MODULE = 'Module',
39	MULTISIG = 'Multisignature',
40	}
41
42	type FilterForm = {
43	[TYPE_FIELD_NAME]: FilterType
44	[FROM_FIELD_NAME]: string
45	[TO_FIELD_NAME]: string
46	[RECIPIENT_FIELD_NAME]: string
47	[HIDDEN_RECIPIENT_FIELD_NAME]: string
48	[AMOUNT_FIELD_NAME]: string
49	[TOKEN_ADDRESS_FIELD_NAME]: string
50	[MODULE_FIELD_NAME]: SettingsInfo['type']
51	[NONCE_FIELD_NAME]: string
52	}
53
54	const isValidAmount = (value: FilterForm['amount']): string \| undefined => {	1✔
55	if (value && isNaN(Number(value))) {	×
56	return 'Invalid number'	×
57	}
58	}
59
60	const isValidTokenAddress = (value: FilterForm['tokenAddress']): string \| undefined => {	1✔
61	if (value && !isValidAddress(value)) {	×
62	return 'Invalid address'	×
63	}
64	}
65
66	const isValidNonce = (value: FilterForm['nonce']): string \| undefined => {	1✔
67	if (value.length === 0) {	×
68	return	×
69	}
70
71	const number = Number(value)	×
72	if (isNaN(number)) {	×
73	return 'Invalid number'	×
74	}
75	if (number < 0) {	×
76	return 'Nonce cannot be negative'	×
77	}
78	}
79
80	const Filter = (): ReactElement => {	1✔
81	const [showFilter, setShowFilter] = useState<boolean>(false)	×
82	const hideFilter = () => setShowFilter(false)	×
83	const toggleFilter = () => setShowFilter((prev) => !prev)	×
84
85	// We cannot rely on the default values in `useForm` because they are updated on unmount
86	// meaning that each `reset` does not retain the 'original' default values
87	const defaultValues = useRef<DefaultValues<FilterForm>>({	×
88	[TYPE_FIELD_NAME]: FilterType.INCOMING,
89	[FROM_FIELD_NAME]: '',
90	[TO_FIELD_NAME]: '',
91	[RECIPIENT_FIELD_NAME]: '',
92	[HIDDEN_RECIPIENT_FIELD_NAME]: '',
93	[AMOUNT_FIELD_NAME]: '',
94	[TOKEN_ADDRESS_FIELD_NAME]: '',
95	[MODULE_FIELD_NAME]: undefined,
96	[NONCE_FIELD_NAME]: '',
97	})
98
99	const methods = useForm<FilterForm>({	×
100	defaultValues: defaultValues.current,
101	})
102	const { handleSubmit, formState, reset, watch, control } = methods	×
103
104	const type = watch(TYPE_FIELD_NAME)	×
105
106	const isClearable = Object.entries(formState.dirtyFields).some(([name, value]) => value && name !== TYPE_FIELD_NAME)	×
107	const clearParameters = () => {	×
108	reset({ ...defaultValues.current, type })	×
109	}
110
111	const onSubmit = ({ [TYPE_FIELD_NAME]: _t, [HIDDEN_RECIPIENT_FIELD_NAME]: _hr, ...filter }: FilterForm) => {	×
112	console.log(filter)	×
113	hideFilter()	×
114	}
115
116	return (	×
117	<>
118	<BackdropLayout isOpen={showFilter} />
119	<ClickAwayListener onClickAway={hideFilter}>
120	<Wrapper>
121	<StyledFilterButton onClick={toggleFilter} variant="contained" color="primary" disableElevation>
122	<StyledFilterIconImage src={filterIcon} /> Filters{' '}
123	{showFilter ? <ExpandLessIcon color="secondary" /> : <ExpandMoreIcon color="secondary" />}	×
124	</StyledFilterButton>
125	{showFilter && (	×
126	<StyledPaper elevation={0} variant="outlined">
127	<form onSubmit={handleSubmit(onSubmit)}>
128	<FilterWrapper>
129	<TxTypeFormControl>
130	<StyledFormLabel>Transaction type</StyledFormLabel>
131	<Controller<FilterForm>
132	name={TYPE_FIELD_NAME}
133	control={control}
134	render={({ field }) => (
135	<RadioGroup {...field}>	×
136	{Object.values(FilterType).map((value) => (
137	<StyledRadioFormControlLabel value={value} control={<Radio />} label={value} key={value} />	×
138	))}
139	</RadioGroup>
140	)}
141	/>
142	</TxTypeFormControl>
143	<ParamsFormControl>
144	<StyledFormLabel>Parameters</StyledFormLabel>
145	<ParametersFormWrapper>
146	<RHFTextField<FilterForm> name={FROM_FIELD_NAME} label="From" type="date" control={control} />
147	<RHFTextField<FilterForm> name={TO_FIELD_NAME} label="To" type="date" control={control} />
148	<RHFAddressSearchField<FilterForm>
149	name={RECIPIENT_FIELD_NAME}
150	hiddenName={HIDDEN_RECIPIENT_FIELD_NAME}
151	label="Recipient"
152	methods={methods}
153	/>
154	{[FilterType.INCOMING, FilterType.MULTISIG].includes(type) && (	×
155	<RHFTextField<FilterForm>
156	name={AMOUNT_FIELD_NAME}
157	label="Amount"
158	control={control}
159	rules={{
160	validate: isValidAmount,
161	}}
162	/>
163	)}
164	{type === FilterType.INCOMING && (	×
165	<RHFTextField<FilterForm>
166	name={TOKEN_ADDRESS_FIELD_NAME}
167	label="Token Address"
168	control={control}
169	rules={{
170	validate: isValidTokenAddress,
171	}}
172	/>
173	)}
174	{type === FilterType.MULTISIG && (	×
175	<RHFTextField<FilterForm>
176	name={NONCE_FIELD_NAME}
177	label="Nonce"
178	control={control}
179	rules={{
180	validate: isValidNonce,
181	}}
182	/>
183	)}
184	{type === FilterType.MODULE && (	×
185	<RHFModuleSearchField<FilterForm> name={MODULE_FIELD_NAME} label="Module" control={control} />
186	)}
187	</ParametersFormWrapper>
188	<ButtonWrapper>
189	<Button type="submit" variant="contained" disabled={!isClearable} color="primary">
190	Apply
191	</Button>
192	<Button variant="contained" onClick={clearParameters} disabled={!isClearable} color="default">
193	Clear
194	</Button>
195	</ButtonWrapper>
196	</ParamsFormControl>
197	</FilterWrapper>
198	</form>
199	</StyledPaper>
200	)}
201	</Wrapper>
202	</ClickAwayListener>
203	</>
204	)
205	}
206
207	export default Filter
208
209	const StyledFilterButton = styled(Button)`	1✔
210	&.MuiButton-root {
211	align-items: center;
212	background-color: ${primary200};
213	border: 2px solid ${primary300};
214	color: #162d45;
215	align-self: flex-end;
216	margin-right: ${md};
217	margin-top: -51px;
218	margin-bottom: ${md};
219	&:hover {
220	background-color: ${primary200};
221	}
222	}
223	`
224
225	const StyledFilterIconImage = styled.img`	1✔
226	margin-right: ${sm};
227	`
228
229	const Wrapper = styled.div`	1✔
230	display: flex;
231	flex-direction: column;
232	box-sizing: border-box;
233	position: relative;
234	z-index: 1;
235	width: 100%;
236	`
237
238	const StyledPaper = styled(Paper)`	1✔
239	border: 2px solid ${primary300};
240	position: absolute;
241	width: calc(100% - 30px);
242	margin-left: 10px;
243	top: 0;
244	left: 0;
245	`
246
247	const FilterWrapper = styled.div`	1✔
248	display: grid;
249	grid-template-columns: 1fr 3fr;
250	gap: ${lg};
251	`
252
253	const TxTypeFormControl = styled(FormControl)`	1✔
254	&.MuiFormControl-root {
255	box-sizing: border-box;
256	padding: ${lg};
257	border-right: 2px solid ${grey400}; // Divider
258	}
259	`
260
261	const StyledFormLabel = styled(FormLabel)`	1✔
262	&.MuiFormLabel-root {
263	margin-bottom: ${lg};
264	font-size: 12px;
265	color: #b2bbc0;
266	}
267	`
268
269	const StyledRadioFormControlLabel = styled(FormControlLabel)`	1✔
270	.MuiFormControlLabel-root {
271	font-size: ${largeFontSize};
272	}
273	`
274
275	const ParamsFormControl = styled(FormControl)`	1✔
276	&.MuiFormControl-root {
277	box-sizing: border-box;
278	padding: ${lg} 128px ${lg} ${lg};
279	}
280	`
281
282	const ParametersFormWrapper = styled.div`	1✔
283	display: grid;
284	grid-template-columns: 1fr 1fr;
285	gap: 26px;
286	`
287
288	const ButtonWrapper = styled.div`	1✔
289	grid-column: span 2;
290	margin-top: 36px;
291	display: grid;
292	grid-template-columns: 100px 100px;
293	gap: ${md};
294	`

gnosis / safe-react / 2116559579

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