2881105391

Committed 18 Aug 2022 09:41AM UTC coverage: 41.63% (+0.02%) from 41.608%

Build Type

github

Committed by GitHub

Commit Message

Merge a8f76852d into 562525324

Pull Request Pull Request #4049: feat: add eip712 sign

Run Details

1764 of 5125 branches covered (34.42%)

Branch coverage included in aggregate %.

9 of 11 new or added lines in 2 files covered. (81.82%)

9 existing lines in 2 files now uncovered.

4590 of 10138 relevant lines covered (45.28%)

38.44 hits per line

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

0.0

/src/routes/safe/components/Apps/components/AppFrame.tsx

import { ReactElement, useState, useRef, useCallback, useEffect, useMemo } from 'react'
import styled from 'styled-components'
import { Loader, Card, Title } from '@gnosis.pm/safe-react-components'
import {
  GetBalanceParams,
  GetTxBySafeTxHashParams,
  MethodToResponse,
  RPCPayload,
  Methods,
  SignMessageParams,
  RequestId,
} from '@gnosis.pm/safe-apps-sdk'
import { useSelector } from 'react-redux'
import { INTERFACE_MESSAGES, Transaction, LowercaseNetworks } from '@gnosis.pm/safe-apps-sdk-v1'
import Web3 from 'web3'

import { currentSafe } from 'src/logic/safe/store/selectors'
import { getChainInfo, getSafeAppsRpcServiceUrl, getTxServiceUrl } from 'src/config'
import { isSameURL } from 'src/utils/url'
import { LoadingContainer } from 'src/components/LoaderContainer/index'
import { SAFE_POLLING_INTERVAL } from 'src/utils/constants'
import { ConfirmTxModal } from './ConfirmTxModal'
import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
import { LegacyMethods, useAppCommunicator } from '../communicator'
import { SafeApp } from '../types'
import { EMPTY_SAFE_APP, getAppInfoFromUrl, getEmptySafeApp, getLegacyChainName } from '../utils'
import { fetchTokenCurrenciesBalances } from 'src/logic/safe/api/fetchTokenCurrenciesBalances'
import { fetchSafeTransaction } from 'src/logic/safe/transactions/api/fetchSafeTransaction'
import { logError, Errors } from 'src/logic/exceptions/CodedException'
import { addressBookEntryName } from 'src/logic/addressBook/store/selectors'
import { useSignMessageModal } from '../hooks/useSignMessageModal'
import { SignMessageModal } from './SignMessageModal'
import { web3HttpProviderOptions } from 'src/logic/wallets/getWeb3'
import { useThirdPartyCookies } from '../hooks/useThirdPartyCookies'
import { ThirdPartyCookiesWarning } from './ThirdPartyCookiesWarning'
import { grantedSelector } from 'src/routes/safe/container/selector'
import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
import { trackEvent } from 'src/utils/googleTagManager'
import { checksumAddress } from 'src/utils/checksumAddress'
import { useRemoteSafeApps } from 'src/routes/safe/components/Apps/hooks/appList/useRemoteSafeApps'
import { trackSafeAppOpenCount } from 'src/routes/safe/components/Apps/trackAppUsageCount'

const AppWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: calc(100% + 16px);
  margin: -8px -24px;
`

const StyledCard = styled(Card)`
  flex-grow: 1;
  padding: 0;
  border-radius: 0;
`

const StyledIframe = styled.iframe<{ isLoading: boolean }>`
  height: 100%;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: ${({ isLoading }) => (isLoading ? 'none' : 'block')};
`

export type TransactionParams = {
  safeTxGas?: number
}

type ConfirmTransactionModalState = {
  isOpen: boolean
  txs: Transaction[]
  requestId: RequestId
  params?: TransactionParams
}

type Props = {
  appUrl: string
}

const APP_LOAD_ERROR_TIMEOUT = 30000

const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
  isOpen: false,
  txs: [],
  requestId: '',
  params: undefined,
}

const URL_NOT_PROVIDED_ERROR = 'App url No provided or it is invalid.'
const APP_LOAD_ERROR = 'There was an error loading the Safe App. There might be a problem with the App provider.'

const AppFrame = ({ appUrl }: Props): ReactElement => {
  const { address: safeAddress, ethBalance, owners, threshold } = useSelector(currentSafe)
  const { nativeCurrency, chainId, chainName, shortName, blockExplorerUriTemplate } = getChainInfo()
  const safeName = useSelector((state) => addressBookEntryName(state, { address: safeAddress }))
  const granted = useSelector(grantedSelector)
  const iframeRef = useRef<HTMLIFrameElement>(null)
  const [confirmTransactionModal, setConfirmTransactionModal] =
    useState<ConfirmTransactionModalState>(INITIAL_CONFIRM_TX_MODAL_STATE)
  const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
  const [safeApp, setSafeApp] = useState<SafeApp>(() => getEmptySafeApp(appUrl))
  const [signMessageModalState, openSignMessageModal, closeSignMessageModal] = useSignMessageModal()
  const timer = useRef<number>()
  const [isLoadingSlow, setIsLoadingSlow] = useState<boolean>(false)
  const errorTimer = useRef<number>()
  const [, setAppLoadError] = useState<boolean>(false)
  const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
  const { remoteSafeApps } = useRemoteSafeApps()
  const currentApp = remoteSafeApps.filter((app) => app.url === appUrl)[0]

  const safeAppsRpc = getSafeAppsRpcServiceUrl()
  const safeAppWeb3Provider = useMemo(
    () => new Web3.providers.HttpProvider(safeAppsRpc, web3HttpProviderOptions),
    [safeAppsRpc],
  )

  useEffect(() => {
    const clearTimeouts = () => {
      clearTimeout(timer.current)
      clearTimeout(errorTimer.current)
    }

    if (appIsLoading) {
      timer.current = window.setTimeout(() => {
        setIsLoadingSlow(true)
      }, SAFE_POLLING_INTERVAL)
      errorTimer.current = window.setTimeout(() => {
        setAppLoadError(() => {
          throw Error(APP_LOAD_ERROR)
        })
      }, APP_LOAD_ERROR_TIMEOUT)
    } else {
      clearTimeouts()
      setIsLoadingSlow(false)
    }

    return () => {
      clearTimeouts()
    }
  }, [appIsLoading])

  useEffect(() => {
    if (!currentApp) return

    trackSafeAppOpenCount(currentApp.id)
  }, [currentApp])

  const openConfirmationModal = useCallback(
    (txs: Transaction[], params: TransactionParams | undefined, requestId: RequestId) =>
      setConfirmTransactionModal({
        isOpen: true,
        txs,
        requestId,
        params,
      }),
    [setConfirmTransactionModal],
  )
  const closeConfirmationModal = useCallback(
    () => setConfirmTransactionModal(INITIAL_CONFIRM_TX_MODAL_STATE),
    [setConfirmTransactionModal],
  )

  const { sendMessageToIframe } = useIframeMessageHandler(
    safeApp,
    openConfirmationModal,
    closeConfirmationModal,
    iframeRef,
  )

  const onIframeLoad = useCallback(() => {
    const iframe = iframeRef.current
    if (!iframe || !isSameURL(iframe.src, appUrl as string)) {
      return
    }

    setAppIsLoading(false)
    sendMessageToIframe({
      messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
      data: {
        safeAddress: safeAddress as string,
        // FIXME `network` is deprecated. we should find how many apps are still using it
        network: getLegacyChainName(chainName, chainId).toLowerCase() as LowercaseNetworks,
        ethBalance: ethBalance as string,
      },
    })
  }, [chainName, chainId, ethBalance, safeAddress, appUrl, sendMessageToIframe])

  const communicator = useAppCommunicator(iframeRef, safeApp)

  useEffect(() => {
    /**
     * @deprecated: getEnvInfo is a legacy method. Should not be used
     */
    communicator?.on(LegacyMethods.getEnvInfo, () => ({
      txServiceUrl: getTxServiceUrl(),
    }))

    communicator?.on(Methods.getTxBySafeTxHash, async (msg) => {
      const { safeTxHash } = msg.data.params as GetTxBySafeTxHashParams

      const tx = await fetchSafeTransaction(safeTxHash)

      return tx
    })

    communicator?.on(Methods.getEnvironmentInfo, async () => ({
      origin: document.location.origin,
    }))

    communicator?.on(Methods.getSafeInfo, () => ({
      safeAddress,
      // FIXME `network` is deprecated. we should find how many apps are still using it
      // Apps using this property expect this to be in UPPERCASE
      network: getLegacyChainName(chainName, chainId).toUpperCase(),
      chainId: parseInt(chainId, 10),
      owners,
      threshold,
      isReadOnly: !granted,
    }))

    communicator?.on(Methods.getSafeBalances, async (msg) => {
      const { currency = 'usd' } = msg.data.params as GetBalanceParams

      const balances = await fetchTokenCurrenciesBalances({ safeAddress, selectedCurrency: currency })

      return balances
    })

    communicator?.on(Methods.rpcCall, async (msg) => {
      const params = msg.data.params as RPCPayload

      try {
        const response = new Promise<MethodToResponse['rpcCall']>((resolve, reject) => {
          safeAppWeb3Provider.send(
            {
              jsonrpc: '2.0',
              method: params.call,
              params: params.params,
              id: '1',
            },
            (err, res) => {
              if (err || res?.error) {
                reject(err || res?.error)
              }

              resolve(res?.result)
            },
          )
        })

        return response
      } catch (err) {
        return err
      }
    })

    communicator?.on(Methods.sendTransactions, (msg) => {
      // @ts-expect-error explore ways to fix this
      const transactions = (msg.data.params.txs as Transaction[]).map(({ to, ...rest }) => ({
        to: checksumAddress(to),
        ...rest,
      }))
      // @ts-expect-error explore ways to fix this
      openConfirmationModal(transactions, msg.data.params.params, msg.data.id)
    })

    communicator?.on(Methods.signMessage, async (msg) => {
      const { message } = msg.data.params as SignMessageParams

      openSignMessageModal(message, msg.data.id, Methods.signMessage)
    })

    communicator?.on(Methods.signTypedMessage, async (msg) => {
      const { message } = msg.data.params as SignMessageParams

      openSignMessageModal(message, msg.data.id, Methods.signTypedMessage)
    })

    communicator?.on(Methods.getChainInfo, async () => {
      return {
        chainName,
        chainId,
        shortName,
        nativeCurrency,
        blockExplorerUriTemplate,
      }
    })
  }, [
    communicator,
    openConfirmationModal,
    safeAddress,
    owners,
    threshold,
    openSignMessageModal,
    nativeCurrency,
    chainId,
    chainName,
    shortName,
    safeAppWeb3Provider,
    granted,
    blockExplorerUriTemplate,
  ])

  const onUserTxConfirm = (safeTxHash: string, requestId: RequestId) => {
    // Safe Apps SDK V1 Handler
    sendMessageToIframe(
      { messageId: INTERFACE_MESSAGES.TRANSACTION_CONFIRMED, data: { safeTxHash } },
      confirmTransactionModal.requestId,
    )

    // Safe Apps SDK V2 Handler
    communicator?.send({ safeTxHash }, requestId as string)

    trackEvent({ ...SAFE_APPS_EVENTS.TRANSACTION_CONFIRMED, label: safeApp.name })
  }

  const onTxReject = (requestId: RequestId) => {
    // Safe Apps SDK V1 Handler
    sendMessageToIframe(
      { messageId: INTERFACE_MESSAGES.TRANSACTION_REJECTED, data: {} },
      confirmTransactionModal.requestId,
    )

    // Safe Apps SDK V2 Handler
    communicator?.send('Transaction was rejected', requestId as string, true)

    trackEvent({ ...SAFE_APPS_EVENTS.TRANSACTION_REJECTED, label: safeApp.name })
  }

  useEffect(() => {
    if (!appUrl) {
      throw Error(URL_NOT_PROVIDED_ERROR)
    }

    const loadApp = async () => {
      try {
        const app = await getAppInfoFromUrl(appUrl, false)
        setSafeApp(app)
      } catch (err) {
        logError(Errors._900, `${appUrl}, ${err.message}`)
      }
    }

    loadApp()
  }, [appUrl])

  useEffect(() => {
    if (safeApp && safeApp.name !== EMPTY_SAFE_APP) {
      trackEvent({ ...SAFE_APPS_EVENTS.OPEN_APP, label: safeApp.name })
    }
  }, [safeApp])

  return (
    <AppWrapper>
      {thirdPartyCookiesDisabled && <ThirdPartyCookiesWarning onClose={() => setThirdPartyCookiesDisabled(false)} />}
      <StyledCard>
        {appIsLoading && (
          <LoadingContainer style={{ flexDirection: 'column' }}>
            {isLoadingSlow && <Title size="xs">The Safe App is taking too long to load, consider refreshing.</Title>}
            <Loader size="md" />
          </LoadingContainer>
        )}

        <StyledIframe
          isLoading={appIsLoading}
          frameBorder="0"
          id={`iframe-${appUrl}`}
          ref={iframeRef}
          src={appUrl}
          title={safeApp.name}
          onLoad={onIframeLoad}
          allow="camera"
        />
      </StyledCard>

      <ConfirmTxModal
        isOpen={confirmTransactionModal.isOpen}
        app={safeApp as SafeApp}
        safeAddress={safeAddress}
        ethBalance={ethBalance as string}
        safeName={safeName as string}
        txs={confirmTransactionModal.txs}
        onClose={closeConfirmationModal}
        requestId={confirmTransactionModal.requestId}
        onUserConfirm={onUserTxConfirm}
        params={confirmTransactionModal.params}
        onTxReject={onTxReject}
        appId={currentApp?.id}
      />

      <SignMessageModal
        isOpen={signMessageModalState.isOpen}
        app={safeApp as SafeApp}
        safeAddress={safeAddress}
        ethBalance={ethBalance as string}
        safeName={safeName as string}
        onClose={closeSignMessageModal}
        requestId={signMessageModalState.requestId}
        message={signMessageModalState.message}
        method={signMessageModalState.method}
        onUserConfirm={onUserTxConfirm}
        onTxReject={onTxReject}
      />
    </AppWrapper>
  )
}

export default AppFrame

1	import { ReactElement, useState, useRef, useCallback, useEffect, useMemo } from 'react'
2	import styled from 'styled-components'
3	import { Loader, Card, Title } from '@gnosis.pm/safe-react-components'
4	import {
5	GetBalanceParams,
6	GetTxBySafeTxHashParams,
7	MethodToResponse,
8	RPCPayload,
9	Methods,
10	SignMessageParams,
11	RequestId,
12	} from '@gnosis.pm/safe-apps-sdk'
13	import { useSelector } from 'react-redux'
14	import { INTERFACE_MESSAGES, Transaction, LowercaseNetworks } from '@gnosis.pm/safe-apps-sdk-v1'
15	import Web3 from 'web3'
16
17	import { currentSafe } from 'src/logic/safe/store/selectors'
18	import { getChainInfo, getSafeAppsRpcServiceUrl, getTxServiceUrl } from 'src/config'
19	import { isSameURL } from 'src/utils/url'
20	import { LoadingContainer } from 'src/components/LoaderContainer/index'
21	import { SAFE_POLLING_INTERVAL } from 'src/utils/constants'
22	import { ConfirmTxModal } from './ConfirmTxModal'
23	import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
24	import { LegacyMethods, useAppCommunicator } from '../communicator'
25	import { SafeApp } from '../types'
26	import { EMPTY_SAFE_APP, getAppInfoFromUrl, getEmptySafeApp, getLegacyChainName } from '../utils'
27	import { fetchTokenCurrenciesBalances } from 'src/logic/safe/api/fetchTokenCurrenciesBalances'
28	import { fetchSafeTransaction } from 'src/logic/safe/transactions/api/fetchSafeTransaction'
29	import { logError, Errors } from 'src/logic/exceptions/CodedException'
30	import { addressBookEntryName } from 'src/logic/addressBook/store/selectors'
31	import { useSignMessageModal } from '../hooks/useSignMessageModal'
32	import { SignMessageModal } from './SignMessageModal'
33	import { web3HttpProviderOptions } from 'src/logic/wallets/getWeb3'
34	import { useThirdPartyCookies } from '../hooks/useThirdPartyCookies'
35	import { ThirdPartyCookiesWarning } from './ThirdPartyCookiesWarning'
36	import { grantedSelector } from 'src/routes/safe/container/selector'
37	import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
38	import { trackEvent } from 'src/utils/googleTagManager'
39	import { checksumAddress } from 'src/utils/checksumAddress'
40	import { useRemoteSafeApps } from 'src/routes/safe/components/Apps/hooks/appList/useRemoteSafeApps'
41	import { trackSafeAppOpenCount } from 'src/routes/safe/components/Apps/trackAppUsageCount'
42
43	const AppWrapper = styled.div`	×
44	display: flex;
45	flex-direction: column;
46	height: calc(100% + 16px);
47	margin: -8px -24px;
48	`
49
50	const StyledCard = styled(Card)`	×
51	flex-grow: 1;
52	padding: 0;
53	border-radius: 0;
54	`
55
56	const StyledIframe = styled.iframe<{ isLoading: boolean }>`	×
57	height: 100%;
58	width: 100%;
59	overflow: auto;
60	box-sizing: border-box;
61	display: ${({ isLoading }) => (isLoading ? 'none' : 'block')};	×
62	`
63
64	export type TransactionParams = {
65	safeTxGas?: number
66	}
67
68	type ConfirmTransactionModalState = {
69	isOpen: boolean
70	txs: Transaction[]
71	requestId: RequestId
72	params?: TransactionParams
73	}
74
75	type Props = {
76	appUrl: string
77	}
78
79	const APP_LOAD_ERROR_TIMEOUT = 30000	×
80
81	const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {	×
82	isOpen: false,
83	txs: [],
84	requestId: '',
85	params: undefined,
86	}
87
88	const URL_NOT_PROVIDED_ERROR = 'App url No provided or it is invalid.'	×
89	const APP_LOAD_ERROR = 'There was an error loading the Safe App. There might be a problem with the App provider.'	×
90
91	const AppFrame = ({ appUrl }: Props): ReactElement => {	×
92	const { address: safeAddress, ethBalance, owners, threshold } = useSelector(currentSafe)	×
93	const { nativeCurrency, chainId, chainName, shortName, blockExplorerUriTemplate } = getChainInfo()	×
94	const safeName = useSelector((state) => addressBookEntryName(state, { address: safeAddress }))	×
95	const granted = useSelector(grantedSelector)	×
96	const iframeRef = useRef<HTMLIFrameElement>(null)	×
97	const [confirmTransactionModal, setConfirmTransactionModal] =
98	useState<ConfirmTransactionModalState>(INITIAL_CONFIRM_TX_MODAL_STATE)	×
99	const [appIsLoading, setAppIsLoading] = useState<boolean>(true)	×
100	const [safeApp, setSafeApp] = useState<SafeApp>(() => getEmptySafeApp(appUrl))	×
101	const [signMessageModalState, openSignMessageModal, closeSignMessageModal] = useSignMessageModal()	×
102	const timer = useRef<number>()	×
103	const [isLoadingSlow, setIsLoadingSlow] = useState<boolean>(false)	×
104	const errorTimer = useRef<number>()	×
105	const [, setAppLoadError] = useState<boolean>(false)	×
106	const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()	×
107	const { remoteSafeApps } = useRemoteSafeApps()	×
108	const currentApp = remoteSafeApps.filter((app) => app.url === appUrl)[0]	×
109
110	const safeAppsRpc = getSafeAppsRpcServiceUrl()	×
111	const safeAppWeb3Provider = useMemo(	×
112	() => new Web3.providers.HttpProvider(safeAppsRpc, web3HttpProviderOptions),	×
113	[safeAppsRpc],
114	)
115
116	useEffect(() => {	×
117	const clearTimeouts = () => {	×
118	clearTimeout(timer.current)	×
119	clearTimeout(errorTimer.current)	×
120	}
121
122	if (appIsLoading) {	×
123	timer.current = window.setTimeout(() => {	×
124	setIsLoadingSlow(true)	×
125	}, SAFE_POLLING_INTERVAL)
126	errorTimer.current = window.setTimeout(() => {	×
127	setAppLoadError(() => {	×
128	throw Error(APP_LOAD_ERROR)	×
129	})
130	}, APP_LOAD_ERROR_TIMEOUT)
131	} else {
132	clearTimeouts()	×
133	setIsLoadingSlow(false)	×
134	}
135
136	return () => {	×
137	clearTimeouts()	×
138	}
139	}, [appIsLoading])
140
141	useEffect(() => {	×
142	if (!currentApp) return	×
143
144	trackSafeAppOpenCount(currentApp.id)	×
145	}, [currentApp])
146
147	const openConfirmationModal = useCallback(	×
148	(txs: Transaction[], params: TransactionParams \| undefined, requestId: RequestId) =>
149	setConfirmTransactionModal({	×
150	isOpen: true,
151	txs,
152	requestId,
153	params,
154	}),
155	[setConfirmTransactionModal],
156	)
157	const closeConfirmationModal = useCallback(	×
158	() => setConfirmTransactionModal(INITIAL_CONFIRM_TX_MODAL_STATE),	×
159	[setConfirmTransactionModal],
160	)
161
162	const { sendMessageToIframe } = useIframeMessageHandler(	×
163	safeApp,
164	openConfirmationModal,
165	closeConfirmationModal,
166	iframeRef,
167	)
168
169	const onIframeLoad = useCallback(() => {	×
170	const iframe = iframeRef.current	×
171	if (!iframe \|\| !isSameURL(iframe.src, appUrl as string)) {	×
172	return	×
173	}
174
175	setAppIsLoading(false)	×
176	sendMessageToIframe({	×
177	messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
178	data: {
179	safeAddress: safeAddress as string,
180	// FIXME `network` is deprecated. we should find how many apps are still using it
181	network: getLegacyChainName(chainName, chainId).toLowerCase() as LowercaseNetworks,
182	ethBalance: ethBalance as string,
183	},
184	})
185	}, [chainName, chainId, ethBalance, safeAddress, appUrl, sendMessageToIframe])
186
187	const communicator = useAppCommunicator(iframeRef, safeApp)	×
188
189	useEffect(() => {	×
190	/**
191	* @deprecated: getEnvInfo is a legacy method. Should not be used
192	*/
193	communicator?.on(LegacyMethods.getEnvInfo, () => ({	×
194	txServiceUrl: getTxServiceUrl(),
195	}))
196
197	communicator?.on(Methods.getTxBySafeTxHash, async (msg) => {	×
198	const { safeTxHash } = msg.data.params as GetTxBySafeTxHashParams	×
199
200	const tx = await fetchSafeTransaction(safeTxHash)	×
201
202	return tx	×
203	})
204
205	communicator?.on(Methods.getEnvironmentInfo, async () => ({	×
206	origin: document.location.origin,
207	}))
208
209	communicator?.on(Methods.getSafeInfo, () => ({	×
210	safeAddress,
211	// FIXME `network` is deprecated. we should find how many apps are still using it
212	// Apps using this property expect this to be in UPPERCASE
213	network: getLegacyChainName(chainName, chainId).toUpperCase(),
214	chainId: parseInt(chainId, 10),
215	owners,
216	threshold,
217	isReadOnly: !granted,
218	}))
219
220	communicator?.on(Methods.getSafeBalances, async (msg) => {	×
221	const { currency = 'usd' } = msg.data.params as GetBalanceParams	×
222
223	const balances = await fetchTokenCurrenciesBalances({ safeAddress, selectedCurrency: currency })	×
224
225	return balances	×
226	})
227
228	communicator?.on(Methods.rpcCall, async (msg) => {	×
229	const params = msg.data.params as RPCPayload	×
230
231	try {	×
232	const response = new Promise<MethodToResponse['rpcCall']>((resolve, reject) => {	×
233	safeAppWeb3Provider.send(	×
234	{
235	jsonrpc: '2.0',
236	method: params.call,
237	params: params.params,
238	id: '1',
239	},
240	(err, res) => {
241	if (err \|\| res?.error) {	×
242	reject(err \|\| res?.error)	×
243	}
244
245	resolve(res?.result)	×
246	},
247	)
248	})
249
250	return response	×
251	} catch (err) {
252	return err	×
253	}
254	})
255
256	communicator?.on(Methods.sendTransactions, (msg) => {	×
257	// @ts-expect-error explore ways to fix this
258	const transactions = (msg.data.params.txs as Transaction[]).map(({ to, ...rest }) => ({	×
259	to: checksumAddress(to),
260	...rest,
261	}))
262	// @ts-expect-error explore ways to fix this
263	openConfirmationModal(transactions, msg.data.params.params, msg.data.id)	×
264	})
265
266	communicator?.on(Methods.signMessage, async (msg) => {	×
267	const { message } = msg.data.params as SignMessageParams	×
268
269	openSignMessageModal(message, msg.data.id, Methods.signMessage)	×
270	})
271
272	communicator?.on(Methods.signTypedMessage, async (msg) => {	×
273	const { message } = msg.data.params as SignMessageParams	×
274
UNCOV 275	openSignMessageModal(message, msg.data.id, Methods.signTypedMessage)	×
276	})
277
UNCOV 278	communicator?.on(Methods.getChainInfo, async () => {	×
UNCOV 279	return {	×
280	chainName,
281	chainId,
282	shortName,
283	nativeCurrency,
284	blockExplorerUriTemplate,
285	}
286	})
287	}, [
288	communicator,
289	openConfirmationModal,
290	safeAddress,
291	owners,
292	threshold,
293	openSignMessageModal,
294	nativeCurrency,
295	chainId,
296	chainName,
297	shortName,
298	safeAppWeb3Provider,
299	granted,
300	blockExplorerUriTemplate,
301	])
302
UNCOV 303	const onUserTxConfirm = (safeTxHash: string, requestId: RequestId) => {	×
304	// Safe Apps SDK V1 Handler
305	sendMessageToIframe(	×
306	{ messageId: INTERFACE_MESSAGES.TRANSACTION_CONFIRMED, data: { safeTxHash } },
307	confirmTransactionModal.requestId,
308	)
309
310	// Safe Apps SDK V2 Handler
311	communicator?.send({ safeTxHash }, requestId as string)	×
312
313	trackEvent({ ...SAFE_APPS_EVENTS.TRANSACTION_CONFIRMED, label: safeApp.name })	×
314	}
315
316	const onTxReject = (requestId: RequestId) => {	×
317	// Safe Apps SDK V1 Handler
318	sendMessageToIframe(	×
319	{ messageId: INTERFACE_MESSAGES.TRANSACTION_REJECTED, data: {} },
320	confirmTransactionModal.requestId,
321	)
322
323	// Safe Apps SDK V2 Handler
324	communicator?.send('Transaction was rejected', requestId as string, true)	×
325
326	trackEvent({ ...SAFE_APPS_EVENTS.TRANSACTION_REJECTED, label: safeApp.name })	×
327	}
328
329	useEffect(() => {	×
330	if (!appUrl) {	×
331	throw Error(URL_NOT_PROVIDED_ERROR)	×
332	}
333
334	const loadApp = async () => {	×
335	try {	×
336	const app = await getAppInfoFromUrl(appUrl, false)	×
337	setSafeApp(app)	×
338	} catch (err) {
339	logError(Errors._900, `${appUrl}, ${err.message}`)	×
340	}
341	}
342
343	loadApp()	×
344	}, [appUrl])
345
346	useEffect(() => {	×
347	if (safeApp && safeApp.name !== EMPTY_SAFE_APP) {	×
348	trackEvent({ ...SAFE_APPS_EVENTS.OPEN_APP, label: safeApp.name })	×
349	}
350	}, [safeApp])
351
352	return (	×
353	<AppWrapper>
354	{thirdPartyCookiesDisabled && <ThirdPartyCookiesWarning onClose={() => setThirdPartyCookiesDisabled(false)} />}	×
355	<StyledCard>
356	{appIsLoading && (	×
357	<LoadingContainer style={{ flexDirection: 'column' }}>
358	{isLoadingSlow && <Title size="xs">The Safe App is taking too long to load, consider refreshing.</Title>}	×
359	<Loader size="md" />
360	</LoadingContainer>
361	)}
362
363	<StyledIframe
364	isLoading={appIsLoading}
365	frameBorder="0"
366	id={`iframe-${appUrl}`}
367	ref={iframeRef}
368	src={appUrl}
369	title={safeApp.name}
370	onLoad={onIframeLoad}
371	allow="camera"
372	/>
373	</StyledCard>
374
375	<ConfirmTxModal
376	isOpen={confirmTransactionModal.isOpen}
377	app={safeApp as SafeApp}
378	safeAddress={safeAddress}
379	ethBalance={ethBalance as string}
380	safeName={safeName as string}
381	txs={confirmTransactionModal.txs}
382	onClose={closeConfirmationModal}
383	requestId={confirmTransactionModal.requestId}
384	onUserConfirm={onUserTxConfirm}
385	params={confirmTransactionModal.params}
386	onTxReject={onTxReject}
387	appId={currentApp?.id}
388	/>
389
390	<SignMessageModal
391	isOpen={signMessageModalState.isOpen}
392	app={safeApp as SafeApp}
393	safeAddress={safeAddress}
394	ethBalance={ethBalance as string}
395	safeName={safeName as string}
396	onClose={closeSignMessageModal}
397	requestId={signMessageModalState.requestId}
398	message={signMessageModalState.message}
399	method={signMessageModalState.method}
400	onUserConfirm={onUserTxConfirm}
401	onTxReject={onTxReject}
402	/>
403	</AppWrapper>
404	)
405	}
406
407	export default AppFrame

safe-global / safe-react / 2881105391

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