1916286431

Build # 1916286431

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/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/b69a9be0eb8577c95bdf61e1403aef8a10c73c10">b69a9be0e">&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/b69a9be0eb8577c95bdf61e1403aef8a10c73c10">b69a9be0e</a><a href="https://github.com/gnosis/safe-react/commit/b69a9be0eb8577c95bdf61e1403aef8a10c73c10">&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/b69a9be0eb8577c95bdf61e1403aef8a10c73c10&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 class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;https://git&amp;quot;&amp;gt;&amp;amp;lt;a class=&amp;lt;/a&amp;gt;hub.com/gnosis/safe-react/commit/b69a9be0eb8577c95bdf61e1403aef8a10c73c10&amp;quot;&amp;gt;b69a9be0e&amp;lt;/a&amp;gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/b69a9be0eb8577c95bdf61e1403aef8a10c73c10&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/gnosis/safe-react/commit/b69a9be0eb8577c95bdf61e1403aef8a&amp;lt;/a&amp;gt;10c73</a>c10&quot;&gt;&amp;quot;&amp;gt;Merge &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;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/gnosis/safe-react/commit/e418d0188&quot;&gt;e418d01... (continued)

Pull Request Pull Request #3553: feat: track create/load Safe

Run Details

1200 of 4304 branches covered (27.88%)

Branch coverage included in aggregate %.

31 of 31 new or added lines in 10 files covered. (100.0%)

3439 of 8762 relevant lines covered (39.25%)

36.69 hits per line

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

86.21

/src/routes/CreateSafePage/CreateSafePage.tsx

import { ReactElement, useEffect, useState } from 'react'
import IconButton from '@material-ui/core/IconButton'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import styled from 'styled-components'
import { useSelector } from 'react-redux'
import queryString from 'query-string'
import { useLocation } from 'react-router-dom'
import { Loader } from '@gnosis.pm/safe-react-components'

import Page from 'src/components/layout/Page'
import Block from 'src/components/layout/Block'
import Row from 'src/components/layout/Row'
import Heading from 'src/components/layout/Heading'
import { history } from 'src/routes/routes'
import { secondary, sm } from 'src/theme/variables'
import StepperForm, { StepFormElement } from 'src/components/StepperForm/StepperForm'
import NameNewSafeStep, { nameNewSafeStepLabel } from './steps/NameNewSafeStep'
import {
  CreateSafeFormValues,
  FIELD_CREATE_CUSTOM_SAFE_NAME,
  FIELD_CREATE_SUGGESTED_SAFE_NAME,
  FIELD_MAX_OWNER_NUMBER,
  FIELD_NEW_SAFE_PROXY_SALT,
  FIELD_NEW_SAFE_THRESHOLD,
  FIELD_SAFE_OWNER_ENS_LIST,
  FIELD_SAFE_OWNERS_LIST,
  SAFE_PENDING_CREATION_STORAGE_KEY,
} from './fields/createSafeFields'
import { useMnemonicSafeName } from 'src/logic/hooks/useMnemonicName'
import { providerNameSelector, shouldSwitchWalletChain, userAccountSelector } from 'src/logic/wallets/store/selectors'
import OwnersAndConfirmationsNewSafeStep, {
  ownersAndConfirmationsNewSafeStepLabel,
} from './steps/OwnersAndConfirmationsNewSafeStep'
import { currentNetworkAddressBookAsMap } from 'src/logic/addressBook/store/selectors'
import ReviewNewSafeStep, { reviewNewSafeStepLabel } from './steps/ReviewNewSafeStep'
import { loadFromStorage, saveToStorage } from 'src/utils/storage'
import SafeCreationProcess from './components/SafeCreationProcess'
import SelectWalletAndNetworkStep, { selectWalletAndNetworkStepLabel } from './steps/SelectWalletAndNetworkStep'
import { reverseENSLookup } from 'src/logic/wallets/getWeb3'
import { CREATE_SAFE_TRACKING_EVENTS, CREATE_SAFE_TRACKING_ID } from 'src/utils/tags/createLoadSafe'
import { trackEventGTM } from 'src/utils/googleTagManager'

function CreateSafePage(): ReactElement {
  const [safePendingToBeCreated, setSafePendingToBeCreated] = useState<CreateSafeFormValues>()
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const providerName = useSelector(providerNameSelector)
  const isWrongNetwork = useSelector(shouldSwitchWalletChain)
  const provider = !!providerName && !isWrongNetwork

  useEffect(() => {
    const checkIfSafeIsPendingToBeCreated = async (): Promise<void> => {
      setIsLoading(true)

      // Removing the await completely is breaking the tests for a mysterious reason
      // @TODO: remove the promise
      const safePendingToBeCreated = await Promise.resolve(
        loadFromStorage<CreateSafeFormValues>(SAFE_PENDING_CREATION_STORAGE_KEY),
      )

      if (provider) {
        setSafePendingToBeCreated(safePendingToBeCreated)
      }
      setIsLoading(false)
    }
    checkIfSafeIsPendingToBeCreated()
  }, [provider])

  const userWalletAddress = useSelector(userAccountSelector)
  const addressBook = useSelector(currentNetworkAddressBookAsMap)
  const location = useLocation()
  const safeRandomName = useMnemonicSafeName()

  const showSafeCreationProcess = (newSafeFormValues: CreateSafeFormValues): void => {
    trackEventGTM({
      ...CREATE_SAFE_TRACKING_EVENTS.CREATE,
      payload: {
        owners: newSafeFormValues[FIELD_SAFE_OWNERS_LIST].length,
        threshold: newSafeFormValues[FIELD_NEW_SAFE_THRESHOLD],
      },
    })

    saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, { ...newSafeFormValues })
    setSafePendingToBeCreated(newSafeFormValues)
  }

  const [initialFormValues, setInitialFormValues] = useState<CreateSafeFormValues>()

  useEffect(() => {
    let isCurrent = true
    if (provider && userWalletAddress) {
      const getInitValues = async () => {
        const initialValuesFromUrl = await getInitialValues(userWalletAddress, addressBook, location, safeRandomName)
        if (isCurrent) {
          setInitialFormValues(initialValuesFromUrl)
        }
      }
      getInitValues()
    }
    return () => {
      isCurrent = false
    }
  }, [provider, userWalletAddress, addressBook, location, safeRandomName])

  if (isLoading) {
    return (
      <LoaderContainer data-testid={'create-safe-loader'}>
        <Loader size="md" />
      </LoaderContainer>
    )
  }

  const isInitializing = !provider || !initialFormValues

  return !!safePendingToBeCreated ? (
    <SafeCreationProcess />
  ) : (
    <Page>
      <Block>
        <Row align="center">
          <BackIcon disableRipple onClick={history.goBack}>
            <ChevronLeft />
          </BackIcon>
          <Heading tag="h2">Create new Safe</Heading>
        </Row>
        <StepperForm
          initialValues={initialFormValues}
          onSubmit={showSafeCreationProcess}
          testId={'create-safe-form'}
          trackingId={CREATE_SAFE_TRACKING_ID}
        >
          <StepFormElement
            label={selectWalletAndNetworkStepLabel}
            nextButtonLabel="Continue"
            disableNextButton={isInitializing}
          >
            <SelectWalletAndNetworkStep />
          </StepFormElement>
          <StepFormElement label={nameNewSafeStepLabel} nextButtonLabel="Continue">
            <NameNewSafeStep />
          </StepFormElement>
          <StepFormElement label={ownersAndConfirmationsNewSafeStepLabel} nextButtonLabel="Continue">
            <OwnersAndConfirmationsNewSafeStep />
          </StepFormElement>
          <StepFormElement label={reviewNewSafeStepLabel} nextButtonLabel="Create">
            <ReviewNewSafeStep />
          </StepFormElement>
        </StepperForm>
      </Block>
    </Page>
  )
}

export default CreateSafePage

const DEFAULT_THRESHOLD_VALUE = 1

// initial values can be present in the URL because the Old MultiSig migration
async function getInitialValues(userAddress, addressBook, location, suggestedSafeName): Promise<CreateSafeFormValues> {
  const query = queryString.parse(location.search, { arrayFormat: 'comma' })
  const { name, owneraddresses, ownernames, threshold } = query

  // if owners are not present in the URL we use current user account as default owner
  const isOwnersPresentInTheUrl = !!owneraddresses
  const ownersFromUrl = Array.isArray(owneraddresses) ? owneraddresses : [owneraddresses]
  const owners = isOwnersPresentInTheUrl ? ownersFromUrl : [userAddress]

  // we set the owner names
  const ownersNamesFromUrl = Array.isArray(ownernames) ? ownernames : [ownernames]
  const userAddressName = [addressBook[userAddress]?.name || '']
  const ownerNames = isOwnersPresentInTheUrl ? ownersNamesFromUrl : userAddressName

  const thresholdFromURl = Number(threshold)
  const isValidThresholdInTheUrl =
    threshold && !Number.isNaN(threshold) && thresholdFromURl <= owners.length && thresholdFromURl > 0

  return {
    [FIELD_CREATE_SUGGESTED_SAFE_NAME]: suggestedSafeName,
    [FIELD_CREATE_CUSTOM_SAFE_NAME]: name,
    [FIELD_NEW_SAFE_THRESHOLD]: isValidThresholdInTheUrl ? threshold : DEFAULT_THRESHOLD_VALUE,
    [FIELD_SAFE_OWNERS_LIST]: owners.map((owner, index) => ({
      nameFieldName: `owner-name-${index}`,
      addressFieldName: `owner-address-${index}`,
    })),
    [FIELD_SAFE_OWNER_ENS_LIST]: (
      await Promise.all(
        owners.map(async (address) => {
          return { [address]: await reverseENSLookup(address) }
        }),
      )
    ).reduce((acc, owner) => {
      return { ...acc, ...owner }
    }, {}),
    // we set owners address values as owner-address-${index} format in the form state
    ...owners.reduce(
      (ownerAddressFields, ownerAddress, index) => ({
        ...ownerAddressFields,
        [`owner-address-${index}`]: ownerAddress,
      }),
      {},
    ),
    // we set owners name values as owner-name-${index} format in the form state
    ...ownerNames.reduce(
      (ownerNameFields, ownerName, index) => ({
        ...ownerNameFields,
        [`owner-name-${index}`]: ownerName,
      }),
      {},
    ),
    [FIELD_MAX_OWNER_NUMBER]: owners.length,
    [FIELD_NEW_SAFE_PROXY_SALT]: Date.now(),
  }
}

const LoaderContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
`

const BackIcon = styled(IconButton)`
  color: ${secondary};
  padding: ${sm};
  margin-right: 5px;
`

1	import { ReactElement, useEffect, useState } from 'react'
2	import IconButton from '@material-ui/core/IconButton'
3	import ChevronLeft from '@material-ui/icons/ChevronLeft'
4	import styled from 'styled-components'
5	import { useSelector } from 'react-redux'
6	import queryString from 'query-string'
7	import { useLocation } from 'react-router-dom'
8	import { Loader } from '@gnosis.pm/safe-react-components'
9
10	import Page from 'src/components/layout/Page'
11	import Block from 'src/components/layout/Block'
12	import Row from 'src/components/layout/Row'
13	import Heading from 'src/components/layout/Heading'
14	import { history } from 'src/routes/routes'
15	import { secondary, sm } from 'src/theme/variables'
16	import StepperForm, { StepFormElement } from 'src/components/StepperForm/StepperForm'
17	import NameNewSafeStep, { nameNewSafeStepLabel } from './steps/NameNewSafeStep'
18	import {
19	CreateSafeFormValues,
20	FIELD_CREATE_CUSTOM_SAFE_NAME,
21	FIELD_CREATE_SUGGESTED_SAFE_NAME,
22	FIELD_MAX_OWNER_NUMBER,
23	FIELD_NEW_SAFE_PROXY_SALT,
24	FIELD_NEW_SAFE_THRESHOLD,
25	FIELD_SAFE_OWNER_ENS_LIST,
26	FIELD_SAFE_OWNERS_LIST,
27	SAFE_PENDING_CREATION_STORAGE_KEY,
28	} from './fields/createSafeFields'
29	import { useMnemonicSafeName } from 'src/logic/hooks/useMnemonicName'
30	import { providerNameSelector, shouldSwitchWalletChain, userAccountSelector } from 'src/logic/wallets/store/selectors'
31	import OwnersAndConfirmationsNewSafeStep, {
32	ownersAndConfirmationsNewSafeStepLabel,
33	} from './steps/OwnersAndConfirmationsNewSafeStep'
34	import { currentNetworkAddressBookAsMap } from 'src/logic/addressBook/store/selectors'
35	import ReviewNewSafeStep, { reviewNewSafeStepLabel } from './steps/ReviewNewSafeStep'
36	import { loadFromStorage, saveToStorage } from 'src/utils/storage'
37	import SafeCreationProcess from './components/SafeCreationProcess'
38	import SelectWalletAndNetworkStep, { selectWalletAndNetworkStepLabel } from './steps/SelectWalletAndNetworkStep'
39	import { reverseENSLookup } from 'src/logic/wallets/getWeb3'
40	import { CREATE_SAFE_TRACKING_EVENTS, CREATE_SAFE_TRACKING_ID } from 'src/utils/tags/createLoadSafe'
41	import { trackEventGTM } from 'src/utils/googleTagManager'
42
43	function CreateSafePage(): ReactElement {
44	const [safePendingToBeCreated, setSafePendingToBeCreated] = useState<CreateSafeFormValues>()	112✔
45	const [isLoading, setIsLoading] = useState<boolean>(true)	111✔
46	const providerName = useSelector(providerNameSelector)	111✔
47	const isWrongNetwork = useSelector(shouldSwitchWalletChain)	111✔
48	const provider = !!providerName && !isWrongNetwork	111✔
49
50	useEffect(() => {	111✔
51	const checkIfSafeIsPendingToBeCreated = async (): Promise<void> => {	23✔
52	setIsLoading(true)	23✔
53
54	// Removing the await completely is breaking the tests for a mysterious reason
55	// @TODO: remove the promise
56	const safePendingToBeCreated = await Promise.resolve(	23✔
57	loadFromStorage<CreateSafeFormValues>(SAFE_PENDING_CREATION_STORAGE_KEY),
58	)
59
60	if (provider) {	23✔
61	setSafePendingToBeCreated(safePendingToBeCreated)	21✔
62	}
63	setIsLoading(false)	23✔
64	}
65	checkIfSafeIsPendingToBeCreated()	23✔
66	}, [provider])
67
68	const userWalletAddress = useSelector(userAccountSelector)	111✔
69	const addressBook = useSelector(currentNetworkAddressBookAsMap)	111✔
70	const location = useLocation()	111✔
71	const safeRandomName = useMnemonicSafeName()	111✔
72
73	const showSafeCreationProcess = (newSafeFormValues: CreateSafeFormValues): void => {	111✔
74	trackEventGTM({	×
75	...CREATE_SAFE_TRACKING_EVENTS.CREATE,
76	payload: {
77	owners: newSafeFormValues[FIELD_SAFE_OWNERS_LIST].length,
78	threshold: newSafeFormValues[FIELD_NEW_SAFE_THRESHOLD],
79	},
80	})
81
82	saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, { ...newSafeFormValues })	×
83	setSafePendingToBeCreated(newSafeFormValues)	×
84	}
85
86	const [initialFormValues, setInitialFormValues] = useState<CreateSafeFormValues>()	111✔
87
88	useEffect(() => {	111✔
89	let isCurrent = true	46✔
90	if (provider && userWalletAddress) {	46✔
91	const getInitValues = async () => {	42✔
92	const initialValuesFromUrl = await getInitialValues(userWalletAddress, addressBook, location, safeRandomName)	42✔
93	if (isCurrent) {	42✔
94	setInitialFormValues(initialValuesFromUrl)	21✔
95	}
96	}
97	getInitValues()	42✔
98	}
99	return () => {	46✔
100	isCurrent = false	46✔
101	}
102	}, [provider, userWalletAddress, addressBook, location, safeRandomName])
103
104	if (isLoading) {	111✔
105	return (	67✔
106	<LoaderContainer data-testid={'create-safe-loader'}>
107	<Loader size="md" />
108	</LoaderContainer>
109	)
110	}
111
112	const isInitializing = !provider \|\| !initialFormValues	44✔
113
114	return !!safePendingToBeCreated ? (	44!
115	<SafeCreationProcess />
116	) : (
117	<Page>
118	<Block>
119	<Row align="center">
120	<BackIcon disableRipple onClick={history.goBack}>
121	<ChevronLeft />
122	</BackIcon>
123	<Heading tag="h2">Create new Safe</Heading>
124	</Row>
125	<StepperForm
126	initialValues={initialFormValues}
127	onSubmit={showSafeCreationProcess}
128	testId={'create-safe-form'}
129	trackingId={CREATE_SAFE_TRACKING_ID}
130	>
131	<StepFormElement
132	label={selectWalletAndNetworkStepLabel}
133	nextButtonLabel="Continue"
134	disableNextButton={isInitializing}
135	>
136	<SelectWalletAndNetworkStep />
137	</StepFormElement>
138	<StepFormElement label={nameNewSafeStepLabel} nextButtonLabel="Continue">
139	<NameNewSafeStep />
140	</StepFormElement>
141	<StepFormElement label={ownersAndConfirmationsNewSafeStepLabel} nextButtonLabel="Continue">
142	<OwnersAndConfirmationsNewSafeStep />
143	</StepFormElement>
144	<StepFormElement label={reviewNewSafeStepLabel} nextButtonLabel="Create">
145	<ReviewNewSafeStep />
146	</StepFormElement>
147	</StepperForm>
148	</Block>
149	</Page>
150	)
151	}
152
153	export default CreateSafePage
154
155	const DEFAULT_THRESHOLD_VALUE = 1	1✔
156
157	// initial values can be present in the URL because the Old MultiSig migration
158	async function getInitialValues(userAddress, addressBook, location, suggestedSafeName): Promise<CreateSafeFormValues> {
159	const query = queryString.parse(location.search, { arrayFormat: 'comma' })	42✔
160	const { name, owneraddresses, ownernames, threshold } = query	42✔
161
162	// if owners are not present in the URL we use current user account as default owner
163	const isOwnersPresentInTheUrl = !!owneraddresses	42✔
164	const ownersFromUrl = Array.isArray(owneraddresses) ? owneraddresses : [owneraddresses]	42!
165	const owners = isOwnersPresentInTheUrl ? ownersFromUrl : [userAddress]	42!
166
167	// we set the owner names
168	const ownersNamesFromUrl = Array.isArray(ownernames) ? ownernames : [ownernames]	42!
169	const userAddressName = [addressBook[userAddress]?.name \|\| '']	42✔
170	const ownerNames = isOwnersPresentInTheUrl ? ownersNamesFromUrl : userAddressName	42!
171
172	const thresholdFromURl = Number(threshold)	42✔
173	const isValidThresholdInTheUrl =
174	threshold && !Number.isNaN(threshold) && thresholdFromURl <= owners.length && thresholdFromURl > 0	42!
175
176	return {	42✔
177	[FIELD_CREATE_SUGGESTED_SAFE_NAME]: suggestedSafeName,
178	[FIELD_CREATE_CUSTOM_SAFE_NAME]: name,
179	[FIELD_NEW_SAFE_THRESHOLD]: isValidThresholdInTheUrl ? threshold : DEFAULT_THRESHOLD_VALUE,	42!
180	[FIELD_SAFE_OWNERS_LIST]: owners.map((owner, index) => ({	42✔
181	nameFieldName: `owner-name-${index}`,
182	addressFieldName: `owner-address-${index}`,
183	})),
184	[FIELD_SAFE_OWNER_ENS_LIST]: (
185	await Promise.all(
186	owners.map(async (address) => {
187	return { [address]: await reverseENSLookup(address) }	42✔
188	}),
189	)
190	).reduce((acc, owner) => {
191	return { ...acc, ...owner }	42✔
192	}, {}),
193	// we set owners address values as owner-address-${index} format in the form state
194	...owners.reduce(
195	(ownerAddressFields, ownerAddress, index) => ({	42✔
196	...ownerAddressFields,
197	[`owner-address-${index}`]: ownerAddress,
198	}),
199	{},
200	),
201	// we set owners name values as owner-name-${index} format in the form state
202	...ownerNames.reduce(
203	(ownerNameFields, ownerName, index) => ({	42✔
204	...ownerNameFields,
205	[`owner-name-${index}`]: ownerName,
206	}),
207	{},
208	),
209	[FIELD_MAX_OWNER_NUMBER]: owners.length,
210	[FIELD_NEW_SAFE_PROXY_SALT]: Date.now(),
211	}
212	}
213
214	const LoaderContainer = styled.div`	1✔
215	display: flex;
216	justify-content: center;
217	align-items: center;
218	height: 100%;
219	`
220
221	const BackIcon = styled(IconButton)`	1✔
222	color: ${secondary};
223	padding: ${sm};
224	margin-right: 5px;
225	`

gnosis / safe-react / 1916286431

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