3136946051

Committed 27 Sep 2022 03:38PM UTC coverage: 42.068% (-0.1%) from 42.192%

Build Type

push

github

Committed by GitHub

Commit Message

fix: Display claiming app at the first position in dashboard (#4078)

Run Details

1784 of 5228 branches covered (34.12%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 2 files covered. (0.0%)

8 existing lines in 1 file now uncovered.

4774 of 10361 relevant lines covered (46.08%)

38.95 hits per line

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

0.0

/src/components/AppLayout/Header/components/SafeTokenWidget/index.tsx

import { Box, ButtonBase } from '@material-ui/core'
import { Text, Tooltip } from '@gnosis.pm/safe-react-components'
import { useSelector } from 'react-redux'
import Img from 'src/components/layout/Img'
import { getShortName, _getChainId } from 'src/config'
import useSafeAddress from 'src/logic/currentSession/hooks/useSafeAddress'
import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
import { generateSafeRoute, SAFE_ROUTES } from 'src/routes/routes'
import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
import { background } from 'src/theme/variables'
import { isProdGateway, IS_PRODUCTION, SAFE_TOKEN_ADDRESSES } from 'src/utils/constants'
import SafeTokenIcon from './safe_token.svg'
import styled from 'styled-components'
import Track from 'src/components/Track'
import { OVERVIEW_EVENTS } from 'src/utils/events/overview'
import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'

const isStaging = !IS_PRODUCTION && !isProdGateway()
export const CLAIMING_APP_ID = isStaging ? '61' : '95'

export const getSafeTokenAddress = (chainId: string): string => {
  return SAFE_TOKEN_ADDRESSES[chainId]
}

const StyledWrapper = styled(Box)`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: center;
`

const buttonStyle = {
  alignSelf: 'stretch',
  display: 'flex',
  borderRadius: '8px',
  padding: '0px 8px 0px 8px',
  backgroundColor: background,
  margin: '8px 16px',
  height: '30px',
  alignItems: 'center',
  justifyContent: 'center',
  gap: '8px',
}

const SafeTokenWidget = (): JSX.Element | null => {
  const safeTokens = useSelector(extendedSafeTokensSelector)

  const { allApps } = useAppList()
  const claimingApp = allApps.find((app) => app.id === CLAIMING_APP_ID)

  const chainId = _getChainId()

  const { safeAddress } = useSafeAddress()
  if (!safeAddress) {
    return null
  }

  const appsPath = generateSafeRoute(SAFE_ROUTES.APPS, {
    shortName: getShortName(),
    safeAddress,
  })

  const tokenAddress = getSafeTokenAddress(chainId)
  if (!tokenAddress || !claimingApp) {
    return null
  }

  const url = `${appsPath}?appUrl=${encodeURI(claimingApp.url)}`

  const safeBalance = safeTokens.find((balanceItem) => {
    return balanceItem.address === tokenAddress
  })

  const safeBalanceDecimals = Number(safeBalance?.balance?.tokenBalance || 0)
  const flooredSafeBalance = formatAmount(safeBalanceDecimals.toFixed(2))

  return (
    <StyledWrapper>
      <Tooltip title={`Open ${claimingApp.name}`}>
        <Track {...OVERVIEW_EVENTS.SAFE_TOKEN_WIDGET}>
          <ButtonBase href={url || '#'} aria-describedby={'safe-token-widget'} style={buttonStyle}>
            <Img alt="Safe token" src={SafeTokenIcon} />
            <Text size="xl" strong>
              {flooredSafeBalance}
            </Text>
          </ButtonBase>
        </Track>
      </Tooltip>
    </StyledWrapper>
  )
}

export default SafeTokenWidget

1	import { Box, ButtonBase } from '@material-ui/core'
2	import { Text, Tooltip } from '@gnosis.pm/safe-react-components'
3	import { useSelector } from 'react-redux'
4	import Img from 'src/components/layout/Img'
5	import { getShortName, _getChainId } from 'src/config'
6	import useSafeAddress from 'src/logic/currentSession/hooks/useSafeAddress'
7	import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
8	import { generateSafeRoute, SAFE_ROUTES } from 'src/routes/routes'
9	import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
10	import { background } from 'src/theme/variables'
11	import { isProdGateway, IS_PRODUCTION, SAFE_TOKEN_ADDRESSES } from 'src/utils/constants'
12	import SafeTokenIcon from './safe_token.svg'
13	import styled from 'styled-components'
14	import Track from 'src/components/Track'
15	import { OVERVIEW_EVENTS } from 'src/utils/events/overview'
16	import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
17
18	const isStaging = !IS_PRODUCTION && !isProdGateway()	×
NEW 19	export const CLAIMING_APP_ID = isStaging ? '61' : '95'	×
20
21	export const getSafeTokenAddress = (chainId: string): string => {	×
22	return SAFE_TOKEN_ADDRESSES[chainId]	×
23	}
24
25	const StyledWrapper = styled(Box)`	×
26	display: flex;
27	flex-direction: column;
28	align-items: center;
29	gap: 8px;
30	height: 100%;
31	justify-content: center;
32	`
33
34	const buttonStyle = {	×
35	alignSelf: 'stretch',
36	display: 'flex',
37	borderRadius: '8px',
38	padding: '0px 8px 0px 8px',
39	backgroundColor: background,
40	margin: '8px 16px',
41	height: '30px',
42	alignItems: 'center',
43	justifyContent: 'center',
44	gap: '8px',
45	}
46
47	const SafeTokenWidget = (): JSX.Element \| null => {	×
48	const safeTokens = useSelector(extendedSafeTokensSelector)	×
49
50	const { allApps } = useAppList()	×
51	const claimingApp = allApps.find((app) => app.id === CLAIMING_APP_ID)	×
52
53	const chainId = _getChainId()	×
54
55	const { safeAddress } = useSafeAddress()	×
56	if (!safeAddress) {	×
57	return null	×
58	}
59
60	const appsPath = generateSafeRoute(SAFE_ROUTES.APPS, {	×
61	shortName: getShortName(),
62	safeAddress,
63	})
64
65	const tokenAddress = getSafeTokenAddress(chainId)	×
66	if (!tokenAddress \|\| !claimingApp) {	×
67	return null	×
68	}
69
70	const url = `${appsPath}?appUrl=${encodeURI(claimingApp.url)}`	×
71
72	const safeBalance = safeTokens.find((balanceItem) => {	×
73	return balanceItem.address === tokenAddress	×
74	})
75
76	const safeBalanceDecimals = Number(safeBalance?.balance?.tokenBalance \|\| 0)	×
77	const flooredSafeBalance = formatAmount(safeBalanceDecimals.toFixed(2))	×
78
79	return (	×
80	<StyledWrapper>
81	<Tooltip title={`Open ${claimingApp.name}`}>
82	<Track {...OVERVIEW_EVENTS.SAFE_TOKEN_WIDGET}>
83	<ButtonBase href={url \|\| '#'} aria-describedby={'safe-token-widget'} style={buttonStyle}>	×
84	<Img alt="Safe token" src={SafeTokenIcon} />
85	<Text size="xl" strong>
86	{flooredSafeBalance}
87	</Text>
88	</ButtonBase>
89	</Track>
90	</Tooltip>
91	</StyledWrapper>
92	)
93	}
94
95	export default SafeTokenWidget

safe-global / safe-react / 3136946051

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