2257365061

Committed 02 May 2022 10:30AM UTC coverage: 36.165% (+0.8%) from 35.33%

Build Type

github

Committed by GitHub

Commit Message

Merge 5fa8991e9 into 83276a76b

Pull Request Pull Request #3764: feat: Safe Apps landing page

Run Details

1324 of 4601 branches covered (28.78%)

Branch coverage included in aggregate %.

123 of 149 new or added lines in 14 files covered. (82.55%)

19 existing lines in 5 files now uncovered.

3721 of 9349 relevant lines covered (39.8%)

36.52 hits per line

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

7.28

/src/routes/CreateSafePage/components/SafeCreationProcess.tsx

import { ReactElement, useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { backOff } from 'exponential-backoff'
import { TransactionReceipt } from 'web3-core'
import { GenericModal } from '@gnosis.pm/safe-react-components'
import styled from 'styled-components'
import { SafeInfo } from '@gnosis.pm/safe-react-gateway-sdk'

import { getSafeDeploymentTransaction } from 'src/logic/contracts/safeContracts'
import { txMonitor } from 'src/logic/safe/transactions/txMonitor'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import { SafeDeployment } from 'src/routes/opening'
import { loadFromStorage, removeFromStorage, saveToStorage } from 'src/utils/storage'
import { addOrUpdateSafe } from 'src/logic/safe/store/actions/addOrUpdateSafe'
import {
  SAFE_PENDING_CREATION_STORAGE_KEY,
  CreateSafeFormValues,
  FIELD_NEW_SAFE_THRESHOLD,
  FIELD_SAFE_OWNERS_LIST,
  FIELD_NEW_SAFE_GAS_LIMIT,
  FIELD_NEW_SAFE_CREATION_TX_HASH,
  FIELD_CREATE_SUGGESTED_SAFE_NAME,
  FIELD_CREATE_CUSTOM_SAFE_NAME,
  FIELD_NEW_SAFE_PROXY_SALT,
  FIELD_NEW_SAFE_GAS_PRICE,
  FIELD_SAFE_OWNER_ENS_LIST,
  FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE,
} from '../fields/createSafeFields'
import { getSafeInfo } from 'src/logic/safe/utils/safeInformation'
import { buildSafe } from 'src/logic/safe/store/actions/fetchSafe'
import { addressBookSafeLoad } from 'src/logic/addressBook/store/actions'
import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
import Paragraph from 'src/components/layout/Paragraph'
import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
import Button from 'src/components/layout/Button'
import { boldFont } from 'src/theme/variables'
import { WELCOME_ROUTE, history, generateSafeRoute, SAFE_ROUTES } from 'src/routes/routes'
import { getExplorerInfo, getShortName } from 'src/config'
import { createSendParams } from 'src/logic/safe/transactions/gas'
import { currentChainId } from 'src/logic/config/store/selectors'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
import { trackEvent } from 'src/utils/googleTagManager'
import { CREATE_SAFE_EVENTS } from 'src/utils/events/createLoadSafe'
import Track from 'src/components/Track'
import { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'
import { useQuery } from 'src/logic/hooks/useQuery'
import { ADDRESSED_ROUTE } from 'src/routes/routes'
import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'

export const InlinePrefixedEthHashInfo = styled(PrefixedEthHashInfo)`
  display: inline-flex;
`

const ButtonContainer = styled.div`
  text-align: center;
`

const EmphasisLabel = styled.span`
  font-weight: ${boldFont};
`

type ModalDataType = {
  safeAddress: string
  safeName?: string
  safeCreationTxHash?: string
}

const goToWelcomePage = () => {
  history.push(WELCOME_ROUTE)
}

const sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms))

/**
 * Parse MM error message, as a workaround for a bug in web3.js that doesn't do it correctly.
 * It returns a formatting error like this:
 *
 * `[ethjs-query] while formatting outputs from RPC '{"value":{"code":-32000,"message":"intrinsic gas too low"}}'`
 */
const parseError = (err: Error): Error => {
  const prefix = '[ethjs-query] while formatting outputs from RPC '

  if (!err.message.startsWith(prefix)) return err

  const json = err.message.split(prefix).pop() || ''
  let actualMessage = ''
  try {
    actualMessage = JSON.parse(json.slice(1, -1)).value.message
  } catch (e) {
    actualMessage = ''
  }

  return actualMessage ? new Error(actualMessage) : err
}

const getSavedSafeCreation = (): CreateSafeFormValues | void => {
  return loadFromStorage<CreateSafeFormValues>(SAFE_PENDING_CREATION_STORAGE_KEY)
}

const loadSavedDataOrLeave = (): CreateSafeFormValues | void => {
  return getSavedSafeCreation() || goToWelcomePage()
}

const createNewSafe = (userAddress: string, onHash: (hash: string) => void): Promise<TransactionReceipt> => {
  if (!userAddress) {
    return Promise.reject(new Error('No user address'))
  }

  const safeCreationFormValues = loadSavedDataOrLeave()

  if (!safeCreationFormValues) {
    return Promise.reject(new Error('No saved Safe creation'))
  }

  return new Promise((resolve, reject) => {
    const confirmations = safeCreationFormValues[FIELD_NEW_SAFE_THRESHOLD]
    const ownerFields = safeCreationFormValues[FIELD_SAFE_OWNERS_LIST]
    const ownerAddresses = ownerFields.map(({ addressFieldName }) => safeCreationFormValues[addressFieldName])
    const gasLimit = safeCreationFormValues[FIELD_NEW_SAFE_GAS_LIMIT]
    const gasPrice = safeCreationFormValues[FIELD_NEW_SAFE_GAS_PRICE]
    const gasMaxPrioFee = safeCreationFormValues[FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE]
    const safeCreationSalt = Date.now() // never retry with the same salt
    const deploymentTx = getSafeDeploymentTransaction(ownerAddresses, confirmations, safeCreationSalt)

    const sendParams = createSendParams(userAddress, {
      ethGasLimit: gasLimit.toString(),
      ethGasPriceInGWei: gasPrice,
      ethMaxPrioFeeInGWei: gasMaxPrioFee.toString(),
    })

    deploymentTx
      .send(sendParams)
      .once('transactionHash', (txHash) => {
        onHash(txHash)

        saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, {
          ...safeCreationFormValues,
          [FIELD_NEW_SAFE_PROXY_SALT]: safeCreationSalt,
          [FIELD_NEW_SAFE_CREATION_TX_HASH]: txHash,
        })

        // Monitor the latest block to find a potential speed-up tx
        txMonitor({ sender: userAddress, hash: txHash, data: deploymentTx.encodeABI() })
          .then((txReceipt) => {
            // txMonitor returns the txReceipt from `getTransactionReceipt` which doesn't throw
            // if it was reverted. We must check the status of the receipt manually.
            if (didTxRevert(txReceipt)) {
              reject(new Error('Sped-up tx reverted'))
              return
            }

            console.log('Sped-up tx mined:', txReceipt)
            trackEvent(CREATE_SAFE_EVENTS.CREATED_SAFE)
            resolve(txReceipt)
          })
          .catch((error) => {
            reject(parseError(error))
          })
      })
      .then((txReceipt) => {
        console.log('Original tx mined:', txReceipt)
        trackEvent(CREATE_SAFE_EVENTS.CREATED_SAFE)
        resolve(txReceipt)
      })
      .catch((error) => {
        // `deploymentTx` will throw if the transaction was reverted
        reject(parseError(error))
      })
  })
}

const pollSafeInfo = async (safeAddress: string): Promise<SafeInfo> => {
  // exponential delay between attempts for around 4 min
  return await backOff(() => getSafeInfo(safeAddress), {
    startingDelay: 750,
    maxDelay: 20000,
    numOfAttempts: 19,
    retry: (e) => {
      console.info('waiting for client-gateway to provide safe information', e)
      return true
    },
  })
}

const APP_URL_QUERY_PARAM = 'appUrl'

function SafeCreationProcess(): ReactElement {
  const [safeCreationTxHash, setSafeCreationTxHash] = useState<string | undefined>()
  const [creationTxPromise, setCreationTxPromise] = useState<Promise<TransactionReceipt>>()

  const dispatch = useDispatch()
  const userAddress = useSelector(userAccountSelector)
  const chainId = useSelector(currentChainId)
  const query = useQuery()
  const redirect = query.get('redirect')

  const [showModal, setShowModal] = useState(false)
  const [modalData, setModalData] = useState<ModalDataType>({ safeAddress: '' })
  const [showCouldNotLoadModal, setShowCouldNotLoadModal] = useState(false)
  const [newSafeAddress, setNewSafeAddress] = useState<string>('')

  useEffect(() => {
    const safeCreationFormValues = loadSavedDataOrLeave()
    if (!safeCreationFormValues) {
      return
    }

    const newCreationTxHash = safeCreationFormValues[FIELD_NEW_SAFE_CREATION_TX_HASH]
    if (newCreationTxHash) {
      setSafeCreationTxHash(newCreationTxHash)
    } else {
      setCreationTxPromise(createNewSafe(userAddress, setSafeCreationTxHash))
    }
  }, [userAddress])

  const onSafeCreated = async (safeAddress: string): Promise<void> => {
    const createSafeFormValues = loadSavedDataOrLeave()

    const defaultSafeValue = createSafeFormValues[FIELD_CREATE_SUGGESTED_SAFE_NAME]
    const safeName = createSafeFormValues[FIELD_CREATE_CUSTOM_SAFE_NAME] || defaultSafeValue
    const owners = createSafeFormValues[FIELD_SAFE_OWNERS_LIST]

    // we update the address book with the owners and the new safe
    const ownersAddressBookEntry = owners.map(({ nameFieldName, addressFieldName }) => {
      const ownerAddress = createSafeFormValues[addressFieldName]
      return makeAddressBookEntry({
        address: createSafeFormValues[addressFieldName],
        name: createSafeFormValues[nameFieldName] || createSafeFormValues[FIELD_SAFE_OWNER_ENS_LIST][ownerAddress],
        chainId,
      })
    })
    const safeAddressBookEntry = makeAddressBookEntry({ address: safeAddress, name: safeName, chainId })
    dispatch(addressBookSafeLoad([...ownersAddressBookEntry, safeAddressBookEntry]))

    // a default 5s wait before starting to request safe information
    await sleep(5000)

    try {
      await pollSafeInfo(safeAddress)
    } catch (e) {
      setNewSafeAddress(safeAddress)
      setShowCouldNotLoadModal(true)
      return
    }

    const safeProps = await buildSafe(safeAddress)
    dispatch(addOrUpdateSafe(safeProps))

    setShowModal(true)
    setModalData({
      safeAddress: safeProps.address,
      safeName,
      safeCreationTxHash: createSafeFormValues[FIELD_NEW_SAFE_CREATION_TX_HASH],
    })
  }

  const onRetry = (): void => {
    const safeCreationFormValues = loadSavedDataOrLeave()

    if (!safeCreationFormValues) {
      return
    }

    // Clear the previous tx hash
    setSafeCreationTxHash(undefined)
    saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, {
      ...safeCreationFormValues,
      safeCreationTxHash: undefined,
    })

    setCreationTxPromise(createNewSafe(userAddress, setSafeCreationTxHash))
  }

  const onCancel = () => {
    removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
    goToWelcomePage()
  }

  const onClickModalButton = () => {
    removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)

    const { safeName, safeCreationTxHash, safeAddress } = modalData

    if (redirect) {
      // If the URL includes ADDRESSED_ROUTE template, then we need to replace it with the new safe address
      if (redirect.includes(ADDRESSED_ROUTE)) {
        history.push({
          pathname: generateSafeRoute(redirect, {
            shortName: getShortName(),
            safeAddress,
          }),
        })
      } else {
        history.push({
          pathname: redirect,
        })
      }

      if (redirect.includes(APP_URL_QUERY_PARAM)) {
        trackEvent({ ...SAFE_APPS_EVENTS.SHARED_APP_OPEN_AFTER_SAFE_CREATION })
      }

      return
    }

    history.push({
      pathname: generateSafeRoute(SAFE_ROUTES.DASHBOARD, {
        shortName: getShortName(),
        safeAddress,
      }),
      state: {
        name: safeName,
        tx: safeCreationTxHash,
      },
    })
  }

  return (
    <>
      <SafeDeployment
        creationTxHash={safeCreationTxHash}
        onCancel={onCancel}
        onRetry={onRetry}
        onSuccess={onSafeCreated}
        submittedPromise={creationTxPromise}
      />
      {showModal && (
        <GenericModal
          onClose={onClickModalButton}
          title="Safe Created!"
          body={
            <div data-testid="safe-created-popup">
              <Paragraph>
                You just created a new Safe on <NetworkLabel />
              </Paragraph>
              <Paragraph>
                You will only be able to use this Safe on <NetworkLabel />
              </Paragraph>
              <Paragraph>
                If you send assets on other networks to this address,{' '}
                <EmphasisLabel>you will not be able to access them</EmphasisLabel>
              </Paragraph>
            </div>
          }
          footer={
            <ButtonContainer>
              <Track {...CREATE_SAFE_EVENTS.GO_TO_SAFE}>
                <Button
                  testId="safe-created-button"
                  onClick={onClickModalButton}
                  color="primary"
                  type={'button'}
                  size="small"
                  variant="contained"
                >
                  Continue
                </Button>
              </Track>
            </ButtonContainer>
          }
        />
      )}
      {showCouldNotLoadModal && newSafeAddress && (
        <GenericModal
          onClose={onCancel}
          title="Unable to load the new Safe"
          body={
            <div>
              <Paragraph>
                We are currently unable to load the Safe but it was successfully created and can be found <br />
                under the following address{' '}
                <InlinePrefixedEthHashInfo
                  hash={newSafeAddress}
                  showCopyBtn
                  explorerUrl={getExplorerInfo(newSafeAddress)}
                />
              </Paragraph>
            </div>
          }
          footer={
            <ButtonContainer>
              <Button onClick={onCancel} color="primary" type="button" size="small" variant="contained">
                OK
              </Button>
            </ButtonContainer>
          }
        />
      )}
    </>
  )
}

export default SafeCreationProcess

1	import { ReactElement, useState, useEffect } from 'react'
2	import { useDispatch, useSelector } from 'react-redux'
3	import { backOff } from 'exponential-backoff'
4	import { TransactionReceipt } from 'web3-core'
5	import { GenericModal } from '@gnosis.pm/safe-react-components'
6	import styled from 'styled-components'
7	import { SafeInfo } from '@gnosis.pm/safe-react-gateway-sdk'
8
9	import { getSafeDeploymentTransaction } from 'src/logic/contracts/safeContracts'
10	import { txMonitor } from 'src/logic/safe/transactions/txMonitor'
11	import { userAccountSelector } from 'src/logic/wallets/store/selectors'
12	import { SafeDeployment } from 'src/routes/opening'
13	import { loadFromStorage, removeFromStorage, saveToStorage } from 'src/utils/storage'
14	import { addOrUpdateSafe } from 'src/logic/safe/store/actions/addOrUpdateSafe'
15	import {
16	SAFE_PENDING_CREATION_STORAGE_KEY,
17	CreateSafeFormValues,
18	FIELD_NEW_SAFE_THRESHOLD,
19	FIELD_SAFE_OWNERS_LIST,
20	FIELD_NEW_SAFE_GAS_LIMIT,
21	FIELD_NEW_SAFE_CREATION_TX_HASH,
22	FIELD_CREATE_SUGGESTED_SAFE_NAME,
23	FIELD_CREATE_CUSTOM_SAFE_NAME,
24	FIELD_NEW_SAFE_PROXY_SALT,
25	FIELD_NEW_SAFE_GAS_PRICE,
26	FIELD_SAFE_OWNER_ENS_LIST,
27	FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE,
28	} from '../fields/createSafeFields'
29	import { getSafeInfo } from 'src/logic/safe/utils/safeInformation'
30	import { buildSafe } from 'src/logic/safe/store/actions/fetchSafe'
31	import { addressBookSafeLoad } from 'src/logic/addressBook/store/actions'
32	import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
33	import Paragraph from 'src/components/layout/Paragraph'
34	import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
35	import Button from 'src/components/layout/Button'
36	import { boldFont } from 'src/theme/variables'
37	import { WELCOME_ROUTE, history, generateSafeRoute, SAFE_ROUTES } from 'src/routes/routes'
38	import { getExplorerInfo, getShortName } from 'src/config'
39	import { createSendParams } from 'src/logic/safe/transactions/gas'
40	import { currentChainId } from 'src/logic/config/store/selectors'
41	import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
42	import { trackEvent } from 'src/utils/googleTagManager'
43	import { CREATE_SAFE_EVENTS } from 'src/utils/events/createLoadSafe'
44	import Track from 'src/components/Track'
45	import { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'
46	import { useQuery } from 'src/logic/hooks/useQuery'
47	import { ADDRESSED_ROUTE } from 'src/routes/routes'
48	import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
49
50	export const InlinePrefixedEthHashInfo = styled(PrefixedEthHashInfo)`	1✔
51	display: inline-flex;
52	`
53
54	const ButtonContainer = styled.div`	1✔
55	text-align: center;
56	`
57
58	const EmphasisLabel = styled.span`	1✔
59	font-weight: ${boldFont};
60	`
61
62	type ModalDataType = {
63	safeAddress: string
64	safeName?: string
65	safeCreationTxHash?: string
66	}
67
68	const goToWelcomePage = () => {	1✔
69	history.push(WELCOME_ROUTE)	×
70	}
71
72	const sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms))	1✔
73
74	/**
75	* Parse MM error message, as a workaround for a bug in web3.js that doesn't do it correctly.
76	* It returns a formatting error like this:
77	*
78	* `[ethjs-query] while formatting outputs from RPC '{"value":{"code":-32000,"message":"intrinsic gas too low"}}'`
79	*/
80	const parseError = (err: Error): Error => {	1✔
81	const prefix = '[ethjs-query] while formatting outputs from RPC '	×
82
83	if (!err.message.startsWith(prefix)) return err	×
84
85	const json = err.message.split(prefix).pop() \|\| ''	×
86	let actualMessage = ''	×
87	try {	×
88	actualMessage = JSON.parse(json.slice(1, -1)).value.message	×
89	} catch (e) {
90	actualMessage = ''	×
91	}
92
93	return actualMessage ? new Error(actualMessage) : err	×
94	}
95
96	const getSavedSafeCreation = (): CreateSafeFormValues \| void => {	1✔
97	return loadFromStorage<CreateSafeFormValues>(SAFE_PENDING_CREATION_STORAGE_KEY)	×
98	}
99
100	const loadSavedDataOrLeave = (): CreateSafeFormValues \| void => {	1✔
101	return getSavedSafeCreation() \|\| goToWelcomePage()	×
102	}
103
104	const createNewSafe = (userAddress: string, onHash: (hash: string) => void): Promise<TransactionReceipt> => {	1✔
105	if (!userAddress) {	×
106	return Promise.reject(new Error('No user address'))	×
107	}
108
109	const safeCreationFormValues = loadSavedDataOrLeave()	×
110
111	if (!safeCreationFormValues) {	×
112	return Promise.reject(new Error('No saved Safe creation'))	×
113	}
114
115	return new Promise((resolve, reject) => {	×
116	const confirmations = safeCreationFormValues[FIELD_NEW_SAFE_THRESHOLD]	×
117	const ownerFields = safeCreationFormValues[FIELD_SAFE_OWNERS_LIST]	×
118	const ownerAddresses = ownerFields.map(({ addressFieldName }) => safeCreationFormValues[addressFieldName])	×
119	const gasLimit = safeCreationFormValues[FIELD_NEW_SAFE_GAS_LIMIT]	×
120	const gasPrice = safeCreationFormValues[FIELD_NEW_SAFE_GAS_PRICE]	×
121	const gasMaxPrioFee = safeCreationFormValues[FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE]	×
122	const safeCreationSalt = Date.now() // never retry with the same salt	×
123	const deploymentTx = getSafeDeploymentTransaction(ownerAddresses, confirmations, safeCreationSalt)	×
124
125	const sendParams = createSendParams(userAddress, {	×
126	ethGasLimit: gasLimit.toString(),
127	ethGasPriceInGWei: gasPrice,
128	ethMaxPrioFeeInGWei: gasMaxPrioFee.toString(),
129	})
130
131	deploymentTx	×
132	.send(sendParams)
133	.once('transactionHash', (txHash) => {
134	onHash(txHash)	×
135
136	saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, {	×
137	...safeCreationFormValues,
138	[FIELD_NEW_SAFE_PROXY_SALT]: safeCreationSalt,
139	[FIELD_NEW_SAFE_CREATION_TX_HASH]: txHash,
140	})
141
142	// Monitor the latest block to find a potential speed-up tx
143	txMonitor({ sender: userAddress, hash: txHash, data: deploymentTx.encodeABI() })	×
144	.then((txReceipt) => {
145	// txMonitor returns the txReceipt from `getTransactionReceipt` which doesn't throw
146	// if it was reverted. We must check the status of the receipt manually.
147	if (didTxRevert(txReceipt)) {	×
148	reject(new Error('Sped-up tx reverted'))	×
149	return	×
150	}
151
152	console.log('Sped-up tx mined:', txReceipt)	×
153	trackEvent(CREATE_SAFE_EVENTS.CREATED_SAFE)	×
154	resolve(txReceipt)	×
155	})
156	.catch((error) => {
157	reject(parseError(error))	×
158	})
159	})
160	.then((txReceipt) => {
161	console.log('Original tx mined:', txReceipt)	×
162	trackEvent(CREATE_SAFE_EVENTS.CREATED_SAFE)	×
163	resolve(txReceipt)	×
164	})
165	.catch((error) => {
166	// `deploymentTx` will throw if the transaction was reverted
167	reject(parseError(error))	×
168	})
169	})
170	}
171
172	const pollSafeInfo = async (safeAddress: string): Promise<SafeInfo> => {	1✔
173	// exponential delay between attempts for around 4 min
174	return await backOff(() => getSafeInfo(safeAddress), {	×
175	startingDelay: 750,
176	maxDelay: 20000,
177	numOfAttempts: 19,
178	retry: (e) => {
179	console.info('waiting for client-gateway to provide safe information', e)	×
180	return true	×
181	},
182	})
183	}
184
185	const APP_URL_QUERY_PARAM = 'appUrl'	1✔
186
187	function SafeCreationProcess(): ReactElement {
188	const [safeCreationTxHash, setSafeCreationTxHash] = useState<string \| undefined>()	×
189	const [creationTxPromise, setCreationTxPromise] = useState<Promise<TransactionReceipt>>()	×
190
191	const dispatch = useDispatch()	×
192	const userAddress = useSelector(userAccountSelector)	×
193	const chainId = useSelector(currentChainId)	×
NEW 194	const query = useQuery()	×
NEW 195	const redirect = query.get('redirect')	×
196
197	const [showModal, setShowModal] = useState(false)	×
198	const [modalData, setModalData] = useState<ModalDataType>({ safeAddress: '' })	×
199	const [showCouldNotLoadModal, setShowCouldNotLoadModal] = useState(false)	×
200	const [newSafeAddress, setNewSafeAddress] = useState<string>('')	×
201
202	useEffect(() => {	×
203	const safeCreationFormValues = loadSavedDataOrLeave()	×
204	if (!safeCreationFormValues) {	×
205	return	×
206	}
207
208	const newCreationTxHash = safeCreationFormValues[FIELD_NEW_SAFE_CREATION_TX_HASH]	×
209	if (newCreationTxHash) {	×
210	setSafeCreationTxHash(newCreationTxHash)	×
211	} else {
212	setCreationTxPromise(createNewSafe(userAddress, setSafeCreationTxHash))	×
213	}
214	}, [userAddress])
215
216	const onSafeCreated = async (safeAddress: string): Promise<void> => {	×
217	const createSafeFormValues = loadSavedDataOrLeave()	×
218
219	const defaultSafeValue = createSafeFormValues[FIELD_CREATE_SUGGESTED_SAFE_NAME]	×
220	const safeName = createSafeFormValues[FIELD_CREATE_CUSTOM_SAFE_NAME] \|\| defaultSafeValue	×
221	const owners = createSafeFormValues[FIELD_SAFE_OWNERS_LIST]	×
222
223	// we update the address book with the owners and the new safe
224	const ownersAddressBookEntry = owners.map(({ nameFieldName, addressFieldName }) => {	×
225	const ownerAddress = createSafeFormValues[addressFieldName]	×
226	return makeAddressBookEntry({	×
227	address: createSafeFormValues[addressFieldName],
228	name: createSafeFormValues[nameFieldName] \|\| createSafeFormValues[FIELD_SAFE_OWNER_ENS_LIST][ownerAddress],	×
229	chainId,
230	})
231	})
232	const safeAddressBookEntry = makeAddressBookEntry({ address: safeAddress, name: safeName, chainId })	×
233	dispatch(addressBookSafeLoad([...ownersAddressBookEntry, safeAddressBookEntry]))	×
234
235	// a default 5s wait before starting to request safe information
236	await sleep(5000)	×
237
238	try {	×
239	await pollSafeInfo(safeAddress)	×
240	} catch (e) {
241	setNewSafeAddress(safeAddress)	×
242	setShowCouldNotLoadModal(true)	×
243	return	×
244	}
245
246	const safeProps = await buildSafe(safeAddress)	×
247	dispatch(addOrUpdateSafe(safeProps))	×
248
249	setShowModal(true)	×
250	setModalData({	×
251	safeAddress: safeProps.address,
252	safeName,
253	safeCreationTxHash: createSafeFormValues[FIELD_NEW_SAFE_CREATION_TX_HASH],
254	})
255	}
256
257	const onRetry = (): void => {	×
258	const safeCreationFormValues = loadSavedDataOrLeave()	×
259
260	if (!safeCreationFormValues) {	×
261	return	×
262	}
263
264	// Clear the previous tx hash
265	setSafeCreationTxHash(undefined)	×
266	saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, {	×
267	...safeCreationFormValues,
268	safeCreationTxHash: undefined,
269	})
270
271	setCreationTxPromise(createNewSafe(userAddress, setSafeCreationTxHash))	×
272	}
273
274	const onCancel = () => {	×
275	removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)	×
276	goToWelcomePage()	×
277	}
278
NEW 279	const onClickModalButton = () => {	×
280	removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)	×
281
282	const { safeName, safeCreationTxHash, safeAddress } = modalData	×
283
NEW 284	if (redirect) {	×
285	// If the URL includes ADDRESSED_ROUTE template, then we need to replace it with the new safe address
NEW 286	if (redirect.includes(ADDRESSED_ROUTE)) {	×
NEW 287	history.push({	×
288	pathname: generateSafeRoute(redirect, {
289	shortName: getShortName(),
290	safeAddress,
291	}),
292	})
293	} else {
NEW 294	history.push({	×
295	pathname: redirect,
296	})
297	}
298
NEW 299	if (redirect.includes(APP_URL_QUERY_PARAM)) {	×
NEW 300	trackEvent({ ...SAFE_APPS_EVENTS.SHARED_APP_OPEN_AFTER_SAFE_CREATION })	×
301	}
302
NEW 303	return	×
304	}
305
UNCOV 306	history.push({	×
307	pathname: generateSafeRoute(SAFE_ROUTES.DASHBOARD, {
308	shortName: getShortName(),
309	safeAddress,
310	}),
311	state: {
312	name: safeName,
313	tx: safeCreationTxHash,
314	},
315	})
316	}
317
318	return (	×
319	<>
320	<SafeDeployment
321	creationTxHash={safeCreationTxHash}
322	onCancel={onCancel}
323	onRetry={onRetry}
324	onSuccess={onSafeCreated}
325	submittedPromise={creationTxPromise}
326	/>
327	{showModal && (	×
328	<GenericModal
329	onClose={onClickModalButton}
330	title="Safe Created!"
331	body={
332	<div data-testid="safe-created-popup">
333	<Paragraph>
334	You just created a new Safe on <NetworkLabel />
335	</Paragraph>
336	<Paragraph>
337	You will only be able to use this Safe on <NetworkLabel />
338	</Paragraph>
339	<Paragraph>
340	If you send assets on other networks to this address,{' '}
341	<EmphasisLabel>you will not be able to access them</EmphasisLabel>
342	</Paragraph>
343	</div>
344	}
345	footer={
346	<ButtonContainer>
347	<Track {...CREATE_SAFE_EVENTS.GO_TO_SAFE}>
348	<Button
349	testId="safe-created-button"
350	onClick={onClickModalButton}
351	color="primary"
352	type={'button'}
353	size="small"
354	variant="contained"
355	>
356	Continue
357	</Button>
358	</Track>
359	</ButtonContainer>
360	}
361	/>
362	)}
363	{showCouldNotLoadModal && newSafeAddress && (	×
364	<GenericModal
365	onClose={onCancel}
366	title="Unable to load the new Safe"
367	body={
368	<div>
369	<Paragraph>
370	We are currently unable to load the Safe but it was successfully created and can be found <br />
371	under the following address{' '}
372	<InlinePrefixedEthHashInfo
373	hash={newSafeAddress}
374	showCopyBtn
375	explorerUrl={getExplorerInfo(newSafeAddress)}
376	/>
377	</Paragraph>
378	</div>
379	}
380	footer={
381	<ButtonContainer>
382	<Button onClick={onCancel} color="primary" type="button" size="small" variant="contained">
383	OK
384	</Button>
385	</ButtonContainer>
386	}
387	/>
388	)}
389	</>
390	)
391	}
392
393	export default SafeCreationProcess

safe-global / safe-react / 2257365061

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