1747067112

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/da141cf657480ff3c3b6c14fe959520195c293b4">da141cf65<a href="https://github.com/gnosis/safe-react/commit/da141cf657480ff3c3b6c14fe959520195c293b4">">Merge </a><a class="double-link" href="https://github.com/gnosis/safe-react/commit/<a class="double-link" href="https://github.com/gnosis/safe-react/commit/10fbb0a199669718e41dfbb1462d4325b9bed921">10fbb0a19</a>">10fbb0a19</a><a href="https://github.com/gnosis/safe-react/commit/da141cf657480ff3c3b6c14fe959520195c293b4"> into d1e6e3aa0">d1e6e3aa0</a>

Pull Request Pull Request #3368: feat: Redesign Tx flow modals

Run Details

1059 of 4178 branches covered (25.35%)

Branch coverage included in aggregate %.

457 of 457 new or added lines in 78 files covered. (100.0%)

3190 of 8497 relevant lines covered (37.54%)

32.09 hits per line

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

0.0

/src/components/AppLayout/Sidebar/index.tsx

import { lazy } from 'react'
import styled from 'styled-components'
import { Divider, IconText } from '@gnosis.pm/safe-react-components'

import List, { ListItemType } from 'src/components/List'
import SafeHeader from './SafeHeader'
import { IS_PRODUCTION } from 'src/utils/constants'
import { wrapInSuspense } from 'src/utils/wrapInSuspense'

const StyledDivider = styled(Divider)`
  margin: 16px -8px 0;
`

const HelpContainer = styled.div`
  margin-top: auto;
`

const HelpCenterLink = styled.a`
  height: 30px;
  width: 166px;
  padding: 6px 0 8px 16px;
  margin: 14px 0px;
  text-decoration: none;
  display: block;

  &:hover {
    border-radius: 8px;
    background-color: ${({ theme }) => theme.colors.background};
    box-sizing: content-box;
  }
  p {
    font-family: ${({ theme }) => theme.fonts.fontFamily};
    font-size: 0.76em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1px;
    color: ${({ theme }) => theme.colors.placeHolder};
    text-transform: uppercase;
    padding: 0 0 0 4px;
  }
`
type Props = {
  safeAddress?: string
  safeName?: string
  balance?: string
  granted: boolean
  onToggleSafeList: () => void
  onReceiveClick: () => void
  onNewTransactionClick: () => void
  items: ListItemType[]
}

// This doesn't play well if exported to its own file
const lazyLoad = (path: string): React.ReactElement => {
  // import(path) does not work unless it is a template literal
  const Component = lazy(() => import(`${path}`))
  return wrapInSuspense(<Component />)
}

const Sidebar = ({
  items,
  balance,
  safeAddress,
  safeName,
  granted,
  onToggleSafeList,
  onReceiveClick,
  onNewTransactionClick,
}: Props): React.ReactElement => (
  <>
    <SafeHeader
      address={safeAddress}
      safeName={safeName}
      granted={granted}
      balance={balance}
      onToggleSafeList={onToggleSafeList}
      onReceiveClick={onReceiveClick}
      onNewTransactionClick={onNewTransactionClick}
    />

    {items.length ? (
      <>
        <StyledDivider />
        <List items={items} />
      </>
    ) : null}
    <HelpContainer>
      {!IS_PRODUCTION && safeAddress && (
        <>
          <StyledDivider />
          {lazyLoad('./DevTools')}
        </>
      )}

      {!IS_PRODUCTION && lazyLoad('./DebugToggle')}

      <StyledDivider />

      <HelpCenterLink href="https://help.gnosis-safe.io/en/" target="_blank" title="Help Center of Gnosis Safe">
        <IconText text="HELP CENTER" iconSize="md" textSize="md" color="placeHolder" iconType="question" />
      </HelpCenterLink>
    </HelpContainer>
  </>
)

export default Sidebar

1	import { lazy } from 'react'
2	import styled from 'styled-components'
3	import { Divider, IconText } from '@gnosis.pm/safe-react-components'
4
5	import List, { ListItemType } from 'src/components/List'
6	import SafeHeader from './SafeHeader'
7	import { IS_PRODUCTION } from 'src/utils/constants'
8	import { wrapInSuspense } from 'src/utils/wrapInSuspense'
9
10	const StyledDivider = styled(Divider)`	×
11	margin: 16px -8px 0;
12	`
13
14	const HelpContainer = styled.div`	×
15	margin-top: auto;
16	`
17
18	const HelpCenterLink = styled.a`	×
19	height: 30px;
20	width: 166px;
21	padding: 6px 0 8px 16px;
22	margin: 14px 0px;
23	text-decoration: none;
24	display: block;
25
26	&:hover {
27	border-radius: 8px;
28	background-color: ${({ theme }) => theme.colors.background};	×
29	box-sizing: content-box;
30	}
31	p {
32	font-family: ${({ theme }) => theme.fonts.fontFamily};	×
33	font-size: 0.76em;
34	font-weight: 600;
35	line-height: 1.5;
36	letter-spacing: 1px;
37	color: ${({ theme }) => theme.colors.placeHolder};	×
38	text-transform: uppercase;
39	padding: 0 0 0 4px;
40	}
41	`
42	type Props = {
43	safeAddress?: string
44	safeName?: string
45	balance?: string
46	granted: boolean
47	onToggleSafeList: () => void
48	onReceiveClick: () => void
49	onNewTransactionClick: () => void
50	items: ListItemType[]
51	}
52
53	// This doesn't play well if exported to its own file
54	const lazyLoad = (path: string): React.ReactElement => {	×
55	// import(path) does not work unless it is a template literal
56	const Component = lazy(() => import(`${path}`))	×
57	return wrapInSuspense(<Component />)	×
58	}
59
60	const Sidebar = ({	×
61	items,
62	balance,
63	safeAddress,
64	safeName,
65	granted,
66	onToggleSafeList,
67	onReceiveClick,
68	onNewTransactionClick,
69	}: Props): React.ReactElement => (
70	<>	×
71	<SafeHeader
72	address={safeAddress}
73	safeName={safeName}
74	granted={granted}
75	balance={balance}
76	onToggleSafeList={onToggleSafeList}
77	onReceiveClick={onReceiveClick}
78	onNewTransactionClick={onNewTransactionClick}
79	/>
80
81	{items.length ? (	×
82	<>
83	<StyledDivider />
84	<List items={items} />
85	</>
86	) : null}
87	<HelpContainer>
88	{!IS_PRODUCTION && safeAddress && (	×
89	<>
90	<StyledDivider />
91	{lazyLoad('./DevTools')}
92	</>
93	)}
94
95	{!IS_PRODUCTION && lazyLoad('./DebugToggle')}	×
96
97	<StyledDivider />
98
99	<HelpCenterLink href="https://help.gnosis-safe.io/en/" target="_blank" title="Help Center of Gnosis Safe">
100	<IconText text="HELP CENTER" iconSize="md" textSize="md" color="placeHolder" iconType="question" />
101	</HelpCenterLink>
102	</HelpContainer>
103	</>
104	)
105
106	export default Sidebar

gnosis / safe-react / 1747067112

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