2866461206

Committed 16 Aug 2022 08:39AM UTC coverage: 42.171% (+0.6%) from 41.608%

Build Type

github

Committed by GitHub

Commit Message

Merge 119f59a46 into 562525324

Pull Request Pull Request #4019: feat: add permissions management

Run Details

1779 of 5210 branches covered (34.15%)

Branch coverage included in aggregate %.

78 of 218 new or added lines in 18 files covered. (35.78%)

34 existing lines in 1 file now uncovered.

4779 of 10341 relevant lines covered (46.21%)

38.53 hits per line

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

52.56

/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 { PermissionRequest } from '@gnosis.pm/safe-apps-sdk/dist/src/types/permissions'
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 { PermissionStatus, SafeApp } from '../types'
import { EMPTY_SAFE_APP, getLegacyChainName } from '../utils'
import { fetchTokenCurrenciesBalances } from 'src/logic/safe/api/fetchTokenCurrenciesBalances'
import { fetchSafeTransaction } from 'src/logic/safe/transactions/api/fetchSafeTransaction'
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 { currentNetworkAddressBook } from 'src/logic/addressBook/store/selectors'
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'
import PermissionsPrompt from 'src/routes/safe/components/Apps/components/PermissionsPrompt'
import { useSafeAppManifest } from 'src/routes/safe/components/Apps/hooks/useSafeAppManifest'
import { useSafePermissions } from 'src/routes/safe/components/Apps/hooks/permissions'

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
  allowList: 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, allowList }: 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 addressBook = useSelector(currentNetworkAddressBook)
  const iframeRef = useRef<HTMLIFrameElement>(null)
  const [confirmTransactionModal, setConfirmTransactionModal] =
    useState<ConfirmTransactionModalState>(INITIAL_CONFIRM_TX_MODAL_STATE)
  const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
  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 { confirmPermissionRequest, permissionsRequest, setPermissionsRequest, getPermissions, hasPermission } =
    useSafePermissions()
  const safeAppsRpc = getSafeAppsRpcServiceUrl()
  const safeAppWeb3Provider = useMemo(
    () => new Web3.providers.HttpProvider(safeAppsRpc, web3HttpProviderOptions),
    [safeAppsRpc],
  )
  const { safeApp } = useSafeAppManifest(appUrl)

  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.wallet_getPermissions, (msg) => {
      return getPermissions(msg.origin)
    })

    communicator?.on(Methods.wallet_requestPermissions, async (msg) => {
      setPermissionsRequest({
        origin: msg.origin,
        request: msg.data.params as PermissionRequest[],
        requestId: msg.data.id,
      })
    })

    communicator?.on(Methods.requestAddressBook, async (msg) => {
      if (hasPermission(msg.origin, Methods.requestAddressBook)) {
        return addressBook
      }

      return []
    })

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

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

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

  const onAcceptPermissionRequest = (origin: string, requestId: RequestId) => {
    const permissions = confirmPermissionRequest(PermissionStatus.GRANTED)
    communicator?.send(permissions, requestId as string)
  }

  const onRejectPermissionRequest = (requestId: RequestId) => {
    if (requestId) {
      confirmPermissionRequest(PermissionStatus.DENIED)
      communicator?.send('Permissions were rejected', requestId as string, true)
    } else {
      setPermissionsRequest(undefined)
    }
  }

  useEffect(() => {
    if (!appUrl) {
      throw Error(URL_NOT_PROVIDED_ERROR)
    }
  }, [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={allowList}
        />
      </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}
        onUserConfirm={onUserTxConfirm}
        onTxReject={onTxReject}
      />

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

safe-global / safe-react / 2866461206

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