1998835328

Build # 1998835328

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/77a153f1697fef080669b0f80c23e7c1508f0835">77a153f16">&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/77a153f1697fef080669b0f80c23e7c1508f0835">77a153f16</a><a href="https://github.com/gnosis/safe-react/commit/77a153f1697fef080669b0f80c23e7c1508f0835">&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/77a153f1697fef080669b0f80c23e7c1508f0835&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/77a153f1697fef080669b0f80c23e7c1508f0835&amp;quot;&amp;gt;77a153f16&amp;lt;/a&amp;gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/77a153f1697fef080669b0f80c23e7c1508f0835&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/gnosis/safe-react/commit/77a153f1697fef080669b0f80c23e7c1&amp;lt;/a&amp;gt;508f0</a>835&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/80f144962&quot;&gt;80f1449... (continued)

Pull Request Pull Request #3692: fix: reject Safe creation if reverted

Run Details

1180 of 4319 branches covered (27.32%)

Branch coverage included in aggregate %.

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

3376 of 8781 relevant lines covered (38.45%)

33.44 hits per line

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

7.52

/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 { useAnalytics, USER_EVENTS } from 'src/utils/googleAnalytics'
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 { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'

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
            // if it was reverted. We must check the status of the receipt manually.
            if (didTxRevert(txReceipt)) {
              reject('Sped-up tx reverted')
            }

            console.log('Sped-up tx mined:', txReceipt)
            resolve(txReceipt)
          })
          .catch((error) => {
            reject(parseError(error))
          })
      })
      .then((txReceipt) => {
        console.log('Original tx mined:', txReceipt)
        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
    },
  })
}

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

  const { trackEvent } = useAnalytics()
  const dispatch = useDispatch()
  const userAddress = useSelector(userAccountSelector)
  const chainId = useSelector(currentChainId)

  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]))

    trackEvent(USER_EVENTS.CREATE_SAFE)

    // 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()
  }

  function onClickModalButton() {
    removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)

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

gnosis / safe-react / 1998835328

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