Build has been canceled!

2567814017

Committed 27 Jun 2022 08:27AM UTC coverage: 38.556% (+0.9%) from 37.62%

Build Type

github

Committed by GitHub

Commit Message

Merge 072b0de97 into 22df041cb

Pull Request Pull Request #3978: feat: add security feedback when accessing safe apps

Run Details

1549 of 4974 branches covered (31.14%)

Branch coverage included in aggregate %.

121 of 155 new or added lines in 14 files covered. (78.06%)

32 existing lines in 2 files now uncovered.

4209 of 9960 relevant lines covered (42.26%)

38.66 hits per line

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

74.7

/src/routes/safe/components/Apps/components/SecurityFeedbackModal/Slider.tsx

import React from 'react'
import styled from 'styled-components'
import { useState, useRef, useEffect } from 'react'
import { Button } from '@gnosis.pm/safe-react-components'
import { Box } from '@material-ui/core'
import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'

type SliderProps = {
  onCancel: () => void
  onComplete: () => void
}

type SliderState = {
  translate: number
  activeSlide: number
  transition: number
  renderedSlides: React.ReactElement[]
}

const SLIDER_TIMEOUT = 500

const Slider: React.FC<SliderProps> = ({ onCancel, onComplete, children }) => {
  const allSlides = React.Children.toArray(children).filter(Boolean) as React.ReactElement[]
  const stateRef = useRef<SliderState>({
    translate: 1,
    activeSlide: 0,
    transition: 0.45,
    renderedSlides: [],
  })
  const firstSlide = allSlides?.[0]
  const secondSlide = allSlides?.[1]
  const lastSlide = allSlides?.[allSlides?.length - 1]
  const [disabledBtn, setDisabledBtn] = useState(false)
  const [state, setState] = useState<SliderState>({
    translate: 1,
    activeSlide: 0,
    transition: 0.45,
    renderedSlides: [lastSlide, firstSlide, secondSlide],
  })

  stateRef.current = state

  useEffect(() => {
    const smooth = (e: TransitionEvent) => {
      if ((e.target as HTMLElement).className.includes('inner')) {
        smoothTransition()
      }
    }

    document.addEventListener('transitionend', smooth)

    return () => {
      document.removeEventListener('transitionend', smooth)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    let id: ReturnType<typeof setTimeout>

    if (disabledBtn) {
      id = setTimeout(() => {
        setDisabledBtn(false)
      }, SLIDER_TIMEOUT)
    }

    return () => {
      if (id) clearTimeout(id)
    }
  }, [disabledBtn])

  useEffect(() => {
    if (stateRef.current.transition === 0) {
      setState((prev) => ({ ...prev, transition: 0.45 }))
    }
  }, [state.transition])

  const smoothTransition = () => {
    let slides: React.ReactElement[] = []

    if (stateRef.current.activeSlide === allSlides.length - 1) {
      slides = [allSlides[allSlides.length - 2], lastSlide, firstSlide]
    } else if (stateRef.current.activeSlide === 0) {
      slides = [lastSlide, firstSlide, secondSlide]
    } else {
      slides = allSlides.slice(stateRef.current.activeSlide - 1, stateRef.current.activeSlide + 2)
    }

    setState({
      ...stateRef.current,
      renderedSlides: slides,
      translate: 1,
      transition: 0,
    })
  }
  const nextSlide = () => {
    if (disabledBtn) return

    if (stateRef.current.activeSlide === allSlides.length - 1) {
      onComplete()
      return
    }

    setDisabledBtn(true)

    setState({
      ...stateRef.current,
      translate: 2,
      activeSlide: stateRef.current.activeSlide === allSlides.length - 1 ? 0 : stateRef.current.activeSlide + 1,
    })
  }

  const prevSlide = () => {
    if (disabledBtn) return

    setDisabledBtn(true)

    setState({
      ...stateRef.current,
      translate: 0,
      activeSlide: stateRef.current.activeSlide === 0 ? allSlides.length - 1 : stateRef.current.activeSlide - 1,
    })
  }

  return (
    <>
      <StyledContainer className="container">
        <StyledInner
          className="inner"
          style={{
            transition: `transform ${stateRef.current.transition}s ease`,
            transform: `translateX(-${stateRef.current.translate * 100}%)`,
          }}
        >
          {stateRef.current.renderedSlides.map((slide, index) => (
            <SliderItem key={index}>{slide}</SliderItem>
          ))}
        </StyledInner>
      </StyledContainer>
      <Box display="flex" justifyContent="center" m={5}>
        {allSlides.length > 1 &&
          allSlides.map((_, index) => (
            <StyledDot key={index} color={index === stateRef.current.activeSlide ? 'primary' : 'secondaryLight'} />
          ))}
      </Box>
      <Box display="flex" justifyContent="center" width="100%">
        <Button
          color="primary"
          size="md"
          variant="bordered"
          fullWidth
          onClick={stateRef.current.activeSlide === 0 ? onCancel : prevSlide}
        >
          {stateRef.current.activeSlide === 0 ? 'Cancel' : 'Back'}
        </Button>

        <Button
          color="primary"
          size="md"
          fullWidth
          onClick={nextSlide}
          style={{
            marginLeft: 10,
          }}
        >
          Continue
        </Button>
      </Box>
    </>
  )
}

const StyledContainer = styled.div`
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
`

const StyledInner = styled.div`
  position: relative;
  display: flex;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(0);
  height: 400px;
`

const StyledDot = styled.div<{ color: ThemeColors }>`
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: ${(props) => props.theme.colors[props.color]};
  margin: 0 8px;
`

const SliderItem = styled.div`
  min-width: 100%;
  min-height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
`

export default Slider

1	import React from 'react'
2	import styled from 'styled-components'
3	import { useState, useRef, useEffect } from 'react'
4	import { Button } from '@gnosis.pm/safe-react-components'
5	import { Box } from '@material-ui/core'
6	import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
7
8	type SliderProps = {
9	onCancel: () => void
10	onComplete: () => void
11	}
12
13	type SliderState = {
14	translate: number
15	activeSlide: number
16	transition: number
17	renderedSlides: React.ReactElement[]
18	}
19
20	const SLIDER_TIMEOUT = 500	1✔
21
22	const Slider: React.FC<SliderProps> = ({ onCancel, onComplete, children }) => {	1✔
23	const allSlides = React.Children.toArray(children).filter(Boolean) as React.ReactElement[]	28✔
24	const stateRef = useRef<SliderState>({	28✔
25	translate: 1,
26	activeSlide: 0,
27	transition: 0.45,
28	renderedSlides: [],
29	})
30	const firstSlide = allSlides?.[0]	28✔
31	const secondSlide = allSlides?.[1]	28✔
32	const lastSlide = allSlides?.[allSlides?.length - 1]	28✔
33	const [disabledBtn, setDisabledBtn] = useState(false)	28✔
34	const [state, setState] = useState<SliderState>({	28✔
35	translate: 1,
36	activeSlide: 0,
37	transition: 0.45,
38	renderedSlides: [lastSlide, firstSlide, secondSlide],
39	})
40
41	stateRef.current = state	28✔
42
43	useEffect(() => {	28✔
44	const smooth = (e: TransitionEvent) => {	8✔
NEW 45	if ((e.target as HTMLElement).className.includes('inner')) {	×
NEW 46	smoothTransition()	×
47	}
48	}
49
50	document.addEventListener('transitionend', smooth)	8✔
51
52	return () => {	8✔
53	document.removeEventListener('transitionend', smooth)	8✔
54	}
55	// eslint-disable-next-line react-hooks/exhaustive-deps
56	}, [])
57
58	useEffect(() => {	28✔
59	let id: ReturnType<typeof setTimeout>
60
61	if (disabledBtn) {	28✔
62	id = setTimeout(() => {	10✔
63	setDisabledBtn(false)	10✔
64	}, SLIDER_TIMEOUT)
65	}
66
67	return () => {	28✔
68	if (id) clearTimeout(id)	28✔
69	}
70	}, [disabledBtn])
71
72	useEffect(() => {	28✔
73	if (stateRef.current.transition === 0) {	8!
NEW 74	setState((prev) => ({ ...prev, transition: 0.45 }))	×
75	}
76	}, [state.transition])
77
78	const smoothTransition = () => {	28✔
NEW 79	let slides: React.ReactElement[] = []	×
80
NEW 81	if (stateRef.current.activeSlide === allSlides.length - 1) {	×
NEW 82	slides = [allSlides[allSlides.length - 2], lastSlide, firstSlide]	×
NEW 83	} else if (stateRef.current.activeSlide === 0) {	×
NEW 84	slides = [lastSlide, firstSlide, secondSlide]	×
85	} else {
NEW 86	slides = allSlides.slice(stateRef.current.activeSlide - 1, stateRef.current.activeSlide + 2)	×
87	}
88
NEW 89	setState({	×
90	...stateRef.current,
91	renderedSlides: slides,
92	translate: 1,
93	transition: 0,
94	})
95	}
96	const nextSlide = () => {	28✔
97	if (disabledBtn) return	10!
98
99	if (stateRef.current.activeSlide === allSlides.length - 1) {	10✔
100	onComplete()	2✔
101	return	2✔
102	}
103
104	setDisabledBtn(true)	8✔
105
106	setState({	8✔
107	...stateRef.current,
108	translate: 2,
109	activeSlide: stateRef.current.activeSlide === allSlides.length - 1 ? 0 : stateRef.current.activeSlide + 1,	8!
110	})
111	}
112
113	const prevSlide = () => {	28✔
114	if (disabledBtn) return	2!
115
116	setDisabledBtn(true)	2✔
117
118	setState({	2✔
119	...stateRef.current,
120	translate: 0,
121	activeSlide: stateRef.current.activeSlide === 0 ? allSlides.length - 1 : stateRef.current.activeSlide - 1,	2!
122	})
123	}
124
125	return (	28✔
126	<>
127	<StyledContainer className="container">
128	<StyledInner
129	className="inner"
130	style={{
131	transition: `transform ${stateRef.current.transition}s ease`,
132	transform: `translateX(-${stateRef.current.translate * 100}%)`,
133	}}
134	>
135	{stateRef.current.renderedSlides.map((slide, index) => (
136	<SliderItem key={index}>{slide}</SliderItem>	84✔
137	))}
138	</StyledInner>
139	</StyledContainer>
140	<Box display="flex" justifyContent="center" m={5}>
141	{allSlides.length > 1 &&	53✔
142	allSlides.map((_, index) => (
143	<StyledDot key={index} color={index === stateRef.current.activeSlide ? 'primary' : 'secondaryLight'} />	101✔
144	))}
145	</Box>
146	<Box display="flex" justifyContent="center" width="100%">
147	<Button
148	color="primary"
149	size="md"
150	variant="bordered"
151	fullWidth
152	onClick={stateRef.current.activeSlide === 0 ? onCancel : prevSlide}	28✔
153	>
154	{stateRef.current.activeSlide === 0 ? 'Cancel' : 'Back'}	28✔
155	</Button>
156
157	<Button
158	color="primary"
159	size="md"
160	fullWidth
161	onClick={nextSlide}
162	style={{
163	marginLeft: 10,
164	}}
165	>
166	Continue
167	</Button>
168	</Box>
169	</>
170	)
171	}
172
173	const StyledContainer = styled.div`	1✔
174	position: relative;
175	margin: 0 auto;
176	width: 100%;
177	height: 100%;
178	overflow: hidden;
179	`
180
181	const StyledInner = styled.div`	1✔
182	position: relative;
183	display: flex;
184	min-width: 100%;
185	min-height: 100%;
186	transform: translateX(0);
187	height: 400px;
188	`
189
190	const StyledDot = styled.div<{ color: ThemeColors }>`	1✔
191	width: 6px;
192	height: 6px;
193	border-radius: 50%;
194	background-color: ${(props) => props.theme.colors[props.color]};	101✔
195	margin: 0 8px;
196	`
197
198	const SliderItem = styled.div`	1✔
199	min-width: 100%;
200	min-height: 100%;
201
202	background-position: center;
203	background-repeat: no-repeat;
204	background-size: cover;
205	`
206
207	export default Slider

safe-global / safe-react / 2567814017

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