20438811440

Committed 22 Dec 2025 05:10PM UTC coverage: 66.424% (-0.07%) from 66.495%

Build # 20438811440

Build Type

push

github

Committed by

web-flow

Commit Message

feat: upgrade to React 18 (#2549)

* feat: migrate from render to createRoot for React 18 (#2546)

* fix: migrate tests from @testing-library/react-hooks to @testing-library/react (#2547)

* chore: update dependencies for React 18

- Update react and react-dom to ^18.3.1
- Update @types/react and @types/react-dom to ^18.2.0
- Update @testing-library/react to ^14.0.0

* chore: update decentraland-dapps v26.0.0

* chore: decentraland-transactions v 2.24.2

* fix: date-fns imports (#2560)

* fix: store translations (#2559)

* refactor: fix React types (#2558)

* test: fix mocks and test setup (#2557)

* chore: update config files (#2556)

* fix: dispatch fetchTranslationsRequest on store init

* refactor: fix React types (ReactNode, FormEvent, CheckboxProps)

* ci: remove --legacy-peer-deps from workflows (#2561)

* test: added libsodium-wrappers-sumo mock file

## Breaking Changes
React 18 upgrade and related tooling changes.

Run Details

2813 of 5513 branches covered (51.02%)

Branch coverage included in aggregate %.

13 of 20 new or added lines in 9 files covered. (65.0%)

4 existing lines in 4 files now uncovered.

8250 of 11142 relevant lines covered (74.04%)

75.27 hits per line

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

26.09

/webapp/src/components/AssetFilters/NetworkFilter/NetworkFilter.tsx

import { useCallback, useMemo } from 'react'
import { Network } from '@dcl/schemas'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { Box, CheckboxProps, Radio, useTabletAndBelowMediaQuery } from 'decentraland-ui'
import './NetworkFilter.css'

export type NetworkFilterProps = {
  network?: Network
  onChange: (value: Network) => void
  defaultCollapsed?: boolean
}

export const NetworkFilter = ({ network, onChange, defaultCollapsed = false }: NetworkFilterProps) => {
  const isMobileOrTablet = useTabletAndBelowMediaQuery()
  const networkOptions = useMemo(() => {
    const options = [Network.ETHEREUM, Network.MATIC].filter(value => typeof value === 'string')
    return [
      {
        value: undefined,
        text: t('nft_filters.network.all_items')
      },
      ...options.map(network => ({
        value: network,
        text: t(`networks.${network.toLowerCase()}`)
      }))
    ]
  }, [])

  const handleChange = useCallback(
    (_: React.FormEvent<HTMLInputElement>, { value }: CheckboxProps) => onChange(value as Network),
    [onChange]
  )

  const header = useMemo(
    () =>
      isMobileOrTablet ? (
        <div className="mobile-box-header">
          <span className="box-filter-name">{t('nft_filters.network.title')}</span>
          <span className="box-filter-value">{network ? t(`networks.${network.toLowerCase()}`) : t('nft_filters.network.all_items')}</span>
        </div>
      ) : (
        t('nft_filters.network.title')
      ),
    [network, isMobileOrTablet]
  )

  return (
    <Box header={header} className="filters-sidebar-box network-filter" collapsible defaultCollapsed={defaultCollapsed || isMobileOrTablet}>
      <div className="network-options filters-radio-group">
        {networkOptions.map(option => (
          <Radio
            key={option.text}
            type="radio"
            onChange={handleChange}
            label={option.text}
            value={option.value}
            name="network"
            checked={network === option.value}
          />
        ))}
      </div>
    </Box>
  )
}

1	import { useCallback, useMemo } from 'react'	2✔
2	import { Network } from '@dcl/schemas'	2✔
3	import { t } from 'decentraland-dapps/dist/modules/translation/utils'	2✔
4	import { Box, CheckboxProps, Radio, useTabletAndBelowMediaQuery } from 'decentraland-ui'	2✔
5	import './NetworkFilter.css'	2✔
6
7	export type NetworkFilterProps = {
8	network?: Network
9	onChange: (value: Network) => void
10	defaultCollapsed?: boolean
11	}
12
13	export const NetworkFilter = ({ network, onChange, defaultCollapsed = false }: NetworkFilterProps) => {	2!
14	const isMobileOrTablet = useTabletAndBelowMediaQuery()	×
15	const networkOptions = useMemo(() => {	×
16	const options = [Network.ETHEREUM, Network.MATIC].filter(value => typeof value === 'string')	×
17	return [	×
18	{
19	value: undefined,
20	text: t('nft_filters.network.all_items')
21	},
22	...options.map(network => ({	×
23	value: network,
24	text: t(`networks.${network.toLowerCase()}`)
25	}))
26	]
27	}, [])
28
NEW 29	const handleChange = useCallback(	×
NEW 30	(_: React.FormEvent<HTMLInputElement>, { value }: CheckboxProps) => onChange(value as Network),	×
31	[onChange]
32	)
33
34	const header = useMemo(	×
35	() =>
36	isMobileOrTablet ? (	×
37	<div className="mobile-box-header">
38	<span className="box-filter-name">{t('nft_filters.network.title')}</span>
39	<span className="box-filter-value">{network ? t(`networks.${network.toLowerCase()}`) : t('nft_filters.network.all_items')}</span>	×
40	</div>
41	) : (
42	t('nft_filters.network.title')
43	),
44	[network, isMobileOrTablet]
45	)
46
47	return (
48	<Box header={header} className="filters-sidebar-box network-filter" collapsible defaultCollapsed={defaultCollapsed \|\| isMobileOrTablet}>	×
49	<div className="network-options filters-radio-group">
50	{networkOptions.map(option => (
51	<Radio	×
52	key={option.text}
53	type="radio"
54	onChange={handleChange}
55	label={option.text}
56	value={option.value}
57	name="network"
58	checked={network === option.value}
59	/>
60	))}
61	</div>
62	</Box>
63	)
64	}

decentraland / marketplace / 20438811440

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