2112033478

Build # 2112033478

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/0df542aba9eb1304fe112b89b0937747c9be36bd">0df542aba">&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/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/0df542aba9eb1304fe112b89b0937747c9be36bd">0df542aba</a><a href="https://github.com/gnosis/safe-react/commit/0df542aba9eb1304fe112b89b0937747c9be36bd">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/0df542aba9eb1304fe112b89b0937747c9be36bd&quot;&gt;0df542aba&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/0df542aba9eb1304fe112b89b0937747c9be36bd&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 ... (continued)

Pull Request Pull Request #3738: feat: Dashboard Safe Apps

Run Details

1233 of 4425 branches covered (27.86%)

Branch coverage included in aggregate %.

47 of 47 new or added lines in 5 files covered. (100.0%)

3481 of 8938 relevant lines covered (38.95%)

36.29 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 { EMPTY_SAFE_APP, getAppInfoFromUrl, getEmptySafeApp, getLegacyChainName } from '../utils'
import { SafeApp } from '../types'
import { useAppCommunicator } from '../communicator'
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 { loadFromStorage, saveToStorage } from 'src/utils/storage'
import { useRemoteSafeApps } from 'src/routes/safe/components/Apps/hooks/appList/useRemoteSafeApps'

const AppWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 -16px;
`

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

type AppTrackData = {
  string: {
    timestamp: Date
    openCount: number
    txCount: number
  }
}

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 APPS_DASHBOARD = 'APPS_DASHBOARD'

const AppFrame = ({ appUrl }: Props): ReactElement => {
  const { address: safeAddress, ethBalance, owners, threshold } = useSelector(currentSafe)
  const { nativeCurrency, chainId, chainName, shortName } = 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 && currentApp) {
      const trackData = loadFromStorage<AppTrackData>(APPS_DASHBOARD) || {}
      let currentOpenCount = trackData[currentApp.id]?.openCount
      saveToStorage(APPS_DASHBOARD, {
        ...trackData,
        [currentApp.id]: { timestamp: Date.now(), openCount: currentOpenCount ? ++currentOpenCount : 1 },
      })
      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, 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('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
      openConfirmationModal(msg.data.params.txs as Transaction[], 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,
      }
    })
  }, [
    communicator,
    openConfirmationModal,
    safeAddress,
    owners,
    threshold,
    openSignMessageModal,
    nativeCurrency,
    chainId,
    chainName,
    shortName,
    safeAppWeb3Provider,
    granted,
  ])

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

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

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

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

gnosis / safe-react / 2112033478

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