1774100750

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/25cf05004056d8edb15d25a82c4f1de604945b3a">25cf05004">&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/25cf05004056d8edb15d25a82c4f1de604945b3a">25cf05004</a><a href="https://github.com/gnosis/safe-react/commit/25cf05004056d8edb15d25a82c4f1de604945b3a">&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/25cf05004056d8edb15d25a82c4f1de604945b3a&quot;&gt;25cf05004&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/25cf05004056d8edb15d25a82c4f1de604945b3a&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 #3397: style: redesign stepper

Run Details

1063 of 4226 branches covered (25.15%)

Branch coverage included in aggregate %.

25 of 25 new or added lines in 1 file covered. (100.0%)

3224 of 8552 relevant lines covered (37.7%)

32.0 hits per line

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

26.03

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

import { ReactElement, useState } from 'react'
import styled from 'styled-components'
import { Step, StepConnector, StepContent, StepLabel, Stepper } from '@material-ui/core'
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'
import ControlPointIcon from '@material-ui/icons/ControlPoint'
import RadioButtonUncheckedOutlinedIcon from '@material-ui/icons/RadioButtonUncheckedOutlined'
import CheckCircleIcon from '@material-ui/icons/CheckCircle'
import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined'

import { ExpandedTxDetails, isMultiSigExecutionDetails } from 'src/logic/safe/store/models/types/gateway.d'
import { AddressInfo } from 'src/routes/safe/components/Transactions/TxList/AddressInfo'
import { isCancelTxDetails } from 'src/routes/safe/components/Transactions/TxList/utils'
import { black300, primary400 } from 'src/theme/variables'

// Icons
const getStyledIcon = (icon: typeof ControlPointIcon): typeof ControlPointIcon => {
  return styled(icon)`
    height: 20px;
    width: 20px;
    margin-left: 2px;
  `
}

const TxCreationIcon = getStyledIcon(ControlPointIcon)

const TxRejectionIcon = getStyledIcon(CancelOutlinedIcon)

const CheckIcon = getStyledIcon(CheckCircleIcon)

const CircleIcon = styled(getStyledIcon(RadioButtonUncheckedOutlinedIcon))`
  stroke: currentColor;
  stroke-width: 1px;
`

const DotIcon = styled(FiberManualRecordIcon)`
  height: 14px;
  width: 14px;
  margin-left: 5px;
`

// Stepper
const StyledStepper = styled(Stepper)`
  padding: 0;
`

const StyledStepConnector = styled(StepConnector)`
  padding: 0;

  .MuiStepConnector-line {
    margin-left: -1px;
    border-color: gray500;
    border-left-width: 2px;
    min-height: 14px;
  }
`

type StepColor = 'green' | 'gray' | 'orange'
const getStepColor = (color: StepColor): string => {
  switch (color) {
    case 'green':
      return primary400
    case 'gray':
      return black300
    case 'orange':
      return '#e8663d'
  }
}

type StyledStepProps = {
  bold?: boolean
  color: StepColor
}
const StyledStep = styled(Step)<StyledStepProps>`
  height: max-content;

  .MuiStepLabel-label {
    font-weight: ${({ bold = false }) => (bold ? 'bold' : 'normal')};
    color: ${({ color }) => getStepColor(color)};
  }

  .MuiStepLabel-completed {
    color: ${getStepColor('green')};
  }

  .MuiStepLabel-iconContainer {
    color: ${({ color }) => getStepColor(color)};
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: white;
  }

  .MuiStepLabel-active {
    color: ${getStepColor('orange')};
  }

  .MuiStepContent-root {
    color: ${getStepColor('gray')};
  }
`

export const TxOwners = ({
  txDetails,
  isPending,
}: {
  txDetails: ExpandedTxDetails
  isPending: boolean
}): ReactElement | null => {
  const { txInfo, detailedExecutionInfo } = txDetails

  const [hideConfirmations, showConfirmations] = useState<boolean>(false)
  const toggleHide = () => {
    showConfirmations((prev) => !prev)
  }

  if (!detailedExecutionInfo || !isMultiSigExecutionDetails(detailedExecutionInfo)) {
    return null
  }

  const confirmationsNeeded = detailedExecutionInfo.confirmationsRequired - detailedExecutionInfo.confirmations.length
  const isConfirmed = confirmationsNeeded <= 0
  const isExecuted = !!detailedExecutionInfo.executor

  return (
    <StyledStepper orientation="vertical" nonLinear activeStep={-1} connector={<StyledStepConnector />}>
      {isCancelTxDetails(txInfo) ? (
        <StyledStep bold color="green">
          <StepLabel icon={<TxRejectionIcon />}>On-chain rejection created</StepLabel>
        </StyledStep>
      ) : (
        <StyledStep bold color="green">
          <StepLabel icon={<TxCreationIcon />}>Created</StepLabel>
        </StyledStep>
      )}
      <StyledStep bold color={isConfirmed ? 'green' : 'orange'}>
        <StepLabel icon={isConfirmed ? <CheckIcon /> : <CircleIcon />}>
          Confirmations{' '}
          <span style={{ color: '#B2BBC0', fontWeight: 'normal' }}>
            ({`${detailedExecutionInfo.confirmations.length} of ${detailedExecutionInfo.confirmationsRequired}`})
          </span>
        </StepLabel>
      </StyledStep>
      {!hideConfirmations &&
        detailedExecutionInfo.confirmations.map(({ signer }) => (
          <StyledStep key={signer.value} bold color="green">
            <StepLabel icon={<DotIcon />}>
              <AddressInfo
                address={signer.value}
                name={signer?.name || undefined}
                avatarUrl={signer?.logoUri || undefined}
                shortenHash={4}
              />
            </StepLabel>
          </StyledStep>
        ))}
      {detailedExecutionInfo.confirmations.length > 0 && (
        <StyledStep color="green">
          <StepLabel icon={<DotIcon strokeWidth={14} />} onClick={toggleHide} style={{ cursor: 'pointer' }}>
            {hideConfirmations ? 'Show all' : 'Hide all'}
          </StepLabel>
        </StyledStep>
      )}
      <StyledStep expanded bold color={isExecuted ? 'green' : 'gray'}>
        <StepLabel icon={isExecuted ? <CheckIcon /> : <CircleIcon />}>
          {isExecuted ? 'Executed' : isPending ? 'Executing' : 'Execution'}
        </StepLabel>
        {!isConfirmed && !isPending && (
          <StepContent>
            {detailedExecutionInfo.executor ? (
              <AddressInfo
                address={detailedExecutionInfo.executor.value}
                name={detailedExecutionInfo.executor?.name || undefined}
                avatarUrl={detailedExecutionInfo.executor?.logoUri || undefined}
                shortenHash={4}
              />
            ) : (
              'Can be executed once the threshold is reached'
            )}
          </StepContent>
        )}
      </StyledStep>
    </StyledStepper>
  )
}

1	import { ReactElement, useState } from 'react'
2	import styled from 'styled-components'
3	import { Step, StepConnector, StepContent, StepLabel, Stepper } from '@material-ui/core'
4	import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'
5	import ControlPointIcon from '@material-ui/icons/ControlPoint'
6	import RadioButtonUncheckedOutlinedIcon from '@material-ui/icons/RadioButtonUncheckedOutlined'
7	import CheckCircleIcon from '@material-ui/icons/CheckCircle'
8	import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined'
9
10	import { ExpandedTxDetails, isMultiSigExecutionDetails } from 'src/logic/safe/store/models/types/gateway.d'
11	import { AddressInfo } from 'src/routes/safe/components/Transactions/TxList/AddressInfo'
12	import { isCancelTxDetails } from 'src/routes/safe/components/Transactions/TxList/utils'
13	import { black300, primary400 } from 'src/theme/variables'
14
15	// Icons
16	const getStyledIcon = (icon: typeof ControlPointIcon): typeof ControlPointIcon => {	1✔
17	return styled(icon)`	4✔
18	height: 20px;
19	width: 20px;
20	margin-left: 2px;
21	`
22	}
23
24	const TxCreationIcon = getStyledIcon(ControlPointIcon)	1✔
25
26	const TxRejectionIcon = getStyledIcon(CancelOutlinedIcon)	1✔
27
28	const CheckIcon = getStyledIcon(CheckCircleIcon)	1✔
29
30	const CircleIcon = styled(getStyledIcon(RadioButtonUncheckedOutlinedIcon))`	1✔
31	stroke: currentColor;
32	stroke-width: 1px;
33	`
34
35	const DotIcon = styled(FiberManualRecordIcon)`	1✔
36	height: 14px;
37	width: 14px;
38	margin-left: 5px;
39	`
40
41	// Stepper
42	const StyledStepper = styled(Stepper)`	1✔
43	padding: 0;
44	`
45
46	const StyledStepConnector = styled(StepConnector)`	1✔
47	padding: 0;
48
49	.MuiStepConnector-line {
50	margin-left: -1px;
51	border-color: gray500;
52	border-left-width: 2px;
53	min-height: 14px;
54	}
55	`
56
57	type StepColor = 'green' \| 'gray' \| 'orange'
58	const getStepColor = (color: StepColor): string => {	1✔
59	switch (color) {	3✔
60	case 'green':
61	return primary400	1✔
62	case 'gray':
63	return black300	1✔
64	case 'orange':
65	return '#e8663d'	1✔
66	}
67	}
68
69	type StyledStepProps = {
70	bold?: boolean
71	color: StepColor
72	}
73	const StyledStep = styled(Step)<StyledStepProps>`	1✔
74	height: max-content;
75
76	.MuiStepLabel-label {
77	font-weight: ${({ bold = false }) => (bold ? 'bold' : 'normal')};	×
78	color: ${({ color }) => getStepColor(color)};	×
79	}
80
81	.MuiStepLabel-completed {
82	color: ${getStepColor('green')};
83	}
84
85	.MuiStepLabel-iconContainer {
86	color: ${({ color }) => getStepColor(color)};	×
87	align-items: center;
88	padding-top: 5px;
89	padding-bottom: 5px;
90	background-color: white;
91	}
92
93	.MuiStepLabel-active {
94	color: ${getStepColor('orange')};
95	}
96
97	.MuiStepContent-root {
98	color: ${getStepColor('gray')};
99	}
100	`
101
102	export const TxOwners = ({	1✔
103	txDetails,
104	isPending,
105	}: {
106	txDetails: ExpandedTxDetails
107	isPending: boolean
108	}): ReactElement \| null => {
109	const { txInfo, detailedExecutionInfo } = txDetails	×
110
111	const [hideConfirmations, showConfirmations] = useState<boolean>(false)	×
112	const toggleHide = () => {	×
113	showConfirmations((prev) => !prev)	×
114	}
115
116	if (!detailedExecutionInfo \|\| !isMultiSigExecutionDetails(detailedExecutionInfo)) {	×
117	return null	×
118	}
119
120	const confirmationsNeeded = detailedExecutionInfo.confirmationsRequired - detailedExecutionInfo.confirmations.length	×
121	const isConfirmed = confirmationsNeeded <= 0	×
122	const isExecuted = !!detailedExecutionInfo.executor	×
123
124	return (	×
125	<StyledStepper orientation="vertical" nonLinear activeStep={-1} connector={<StyledStepConnector />}>
126	{isCancelTxDetails(txInfo) ? (	×
127	<StyledStep bold color="green">
128	<StepLabel icon={<TxRejectionIcon />}>On-chain rejection created</StepLabel>
129	</StyledStep>
130	) : (
131	<StyledStep bold color="green">
132	<StepLabel icon={<TxCreationIcon />}>Created</StepLabel>
133	</StyledStep>
134	)}
135	<StyledStep bold color={isConfirmed ? 'green' : 'orange'}>	×
136	<StepLabel icon={isConfirmed ? <CheckIcon /> : <CircleIcon />}>	×
137	Confirmations{' '}
138	<span style={{ color: '#B2BBC0', fontWeight: 'normal' }}>
139	({`${detailedExecutionInfo.confirmations.length} of ${detailedExecutionInfo.confirmationsRequired}`})
140	</span>
141	</StepLabel>
142	</StyledStep>
143	{!hideConfirmations &&	×
144	detailedExecutionInfo.confirmations.map(({ signer }) => (
145	<StyledStep key={signer.value} bold color="green">	×
146	<StepLabel icon={<DotIcon />}>
147	<AddressInfo
148	address={signer.value}
149	name={signer?.name \|\| undefined}	×
150	avatarUrl={signer?.logoUri \|\| undefined}	×
151	shortenHash={4}
152	/>
153	</StepLabel>
154	</StyledStep>
155	))}
156	{detailedExecutionInfo.confirmations.length > 0 && (	×
157	<StyledStep color="green">
158	<StepLabel icon={<DotIcon strokeWidth={14} />} onClick={toggleHide} style={{ cursor: 'pointer' }}>
159	{hideConfirmations ? 'Show all' : 'Hide all'}	×
160	</StepLabel>
161	</StyledStep>
162	)}
163	<StyledStep expanded bold color={isExecuted ? 'green' : 'gray'}>	×
164	<StepLabel icon={isExecuted ? <CheckIcon /> : <CircleIcon />}>	×
165	{isExecuted ? 'Executed' : isPending ? 'Executing' : 'Execution'}	×
166	</StepLabel>
167	{!isConfirmed && !isPending && (	×
168	<StepContent>
169	{detailedExecutionInfo.executor ? (	×
170	<AddressInfo
171	address={detailedExecutionInfo.executor.value}
172	name={detailedExecutionInfo.executor?.name \|\| undefined}	×
173	avatarUrl={detailedExecutionInfo.executor?.logoUri \|\| undefined}	×
174	shortenHash={4}
175	/>
176	) : (
177	'Can be executed once the threshold is reached'
178	)}
179	</StepContent>
180	)}
181	</StyledStep>
182	</StyledStepper>
183	)
184	}

gnosis / safe-react / 1774100750

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