2227244328

Committed 26 Apr 2022 02:15PM UTC coverage: 35.417% (-0.3%) from 35.726%

Build Type

github

Committed by GitHub

Commit Message

Merge 2e6ed72b1 into f05d56b96

Pull Request Pull Request #3818: Release 3.25.0

Run Details

1271 of 4535 branches covered (28.03%)

Branch coverage included in aggregate %.

91 of 354 new or added lines in 57 files covered. (25.71%)

88 existing lines in 20 files now uncovered.

3597 of 9210 relevant lines covered (39.06%)

35.5 hits per line

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

0.0

/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts

import { useSnackbar } from 'notistack'
import {
  InterfaceMessageIds,
  InterfaceMessageToPayload,
  SDKMessageIds,
  SDKMessageToPayload,
  SDK_MESSAGES,
  INTERFACE_MESSAGES,
  RequestId,
  Transaction,
  LowercaseNetworks,
} from '@gnosis.pm/safe-apps-sdk-v1'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect, useCallback, MutableRefObject } from 'react'

import { getChainInfo, getTxServiceUrl } from 'src/config/'
import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
import { TransactionParams } from '../components/AppFrame'
import { SafeApp } from 'src/routes/safe/components/Apps/types'
import { getLegacyChainName } from '../utils'
import { THIRD_PARTY_COOKIES_CHECK_URL } from './useThirdPartyCookies'
import { getSafeAppName, trackEvent } from 'src/utils/googleTagManager'
import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'

type InterfaceMessageProps<T extends InterfaceMessageIds> = {
  messageId: T
  data: InterfaceMessageToPayload[T]
}

type ReturnType = {
  sendMessageToIframe: <T extends InterfaceMessageIds>(message: InterfaceMessageProps<T>, requestId?: RequestId) => void
}

const useIframeMessageHandler = (
  selectedApp: SafeApp | undefined,
  openConfirmationModal: (txs: Transaction[], params: TransactionParams | undefined, requestId: RequestId) => void,
  closeModal: () => void,
  iframeRef: MutableRefObject<HTMLIFrameElement | null>,
): ReturnType => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
  const { address: safeAddress, ethBalance, name: safeName } = useSelector(currentSafeWithNames)
  const dispatch = useDispatch()
  const { chainId, chainName } = getChainInfo()

  const sendMessageToIframe = useCallback(
    function <T extends InterfaceMessageIds>(message: InterfaceMessageProps<T>, requestId?: RequestId) {
      const requestWithMessage = {
        ...message,
        requestId: requestId || Math.trunc(window.performance.now()),
        version: '0.4.2',
      }

      if (iframeRef && selectedApp) {
        iframeRef.current?.contentWindow?.postMessage(requestWithMessage, selectedApp.url)
      }
    },
    [iframeRef, selectedApp],
  )

  useEffect(() => {
    const handleIframeMessage = (
      messageId: SDKMessageIds,
      messagePayload: SDKMessageToPayload[typeof messageId],
      requestId: RequestId,
    ): void => {
      if (!messageId) {
        return
      }

      trackEvent({ ...SAFE_APPS_EVENTS.LEGACY_API_CALL, label: `${getSafeAppName(selectedApp)}-${messageId}` })

      switch (messageId) {
        // typescript doesn't narrow type in switch/case statements
        // issue: https://github.com/microsoft/TypeScript/issues/20375
        // possible solution: https://stackoverflow.com/a/43879897/7820085
        case SDK_MESSAGES.SEND_TRANSACTIONS: {
          if (messagePayload) {
            openConfirmationModal(
              messagePayload as SDKMessageToPayload[typeof SDK_MESSAGES.SEND_TRANSACTIONS],
              undefined,
              requestId,
            )
          }
          break
        }

        case SDK_MESSAGES.SAFE_APP_SDK_INITIALIZED: {
          const safeInfoMessage = {
            messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
            data: {
              safeAddress: safeAddress as string,
              network: getLegacyChainName(chainName, chainId).toLowerCase() as LowercaseNetworks,
              ethBalance: ethBalance as string,
            },
          }
          const envInfoMessage = {
            messageId: INTERFACE_MESSAGES.ENV_INFO,
            data: {
              txServiceUrl: getTxServiceUrl(),
            },
          }

          sendMessageToIframe(safeInfoMessage)
          sendMessageToIframe(envInfoMessage)
          break
        }
        default: {
          console.error(`ThirdPartyApp: A message was received with an unknown message id ${messageId}.`)
          break
        }
      }
    }
    const onIframeMessage = async (
      message: MessageEvent<{
        requestId: RequestId
        messageId: SDKMessageIds
        data: SDKMessageToPayload[SDKMessageIds]
      }>,
    ) => {
      if (message.origin === window.origin || message.origin === THIRD_PARTY_COOKIES_CHECK_URL) {
        return
      }

      if (!selectedApp?.url.includes(message.origin)) {
        console.error(`ThirdPartyApp: A message was received from an unknown origin ${message.origin}`)
        return
      }
      handleIframeMessage(message.data.messageId, message.data.data, message.data.requestId)
    }

    window.addEventListener('message', onIframeMessage)
    return () => {
      window.removeEventListener('message', onIframeMessage)
    }
  }, [
    chainName,
    chainId,
    closeModal,
    closeSnackbar,
    dispatch,
    enqueueSnackbar,
    ethBalance,
    openConfirmationModal,
    safeAddress,
    safeName,
    selectedApp,
    sendMessageToIframe,
  ])

  return {
    sendMessageToIframe,
  }
}

export { useIframeMessageHandler }

1	import { useSnackbar } from 'notistack'
2	import {
3	InterfaceMessageIds,
4	InterfaceMessageToPayload,
5	SDKMessageIds,
6	SDKMessageToPayload,
7	SDK_MESSAGES,
8	INTERFACE_MESSAGES,
9	RequestId,
10	Transaction,
11	LowercaseNetworks,
12	} from '@gnosis.pm/safe-apps-sdk-v1'
13	import { useDispatch, useSelector } from 'react-redux'
14	import { useEffect, useCallback, MutableRefObject } from 'react'
15
16	import { getChainInfo, getTxServiceUrl } from 'src/config/'
17	import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
18	import { TransactionParams } from '../components/AppFrame'
19	import { SafeApp } from 'src/routes/safe/components/Apps/types'
20	import { getLegacyChainName } from '../utils'
21	import { THIRD_PARTY_COOKIES_CHECK_URL } from './useThirdPartyCookies'
22	import { getSafeAppName, trackEvent } from 'src/utils/googleTagManager'
23	import { SAFE_APPS_EVENTS } from 'src/utils/events/safeApps'
24
25	type InterfaceMessageProps<T extends InterfaceMessageIds> = {
26	messageId: T
27	data: InterfaceMessageToPayload[T]
28	}
29
30	type ReturnType = {
31	sendMessageToIframe: <T extends InterfaceMessageIds>(message: InterfaceMessageProps<T>, requestId?: RequestId) => void
32	}
33
34	const useIframeMessageHandler = (	×
35	selectedApp: SafeApp \| undefined,
36	openConfirmationModal: (txs: Transaction[], params: TransactionParams \| undefined, requestId: RequestId) => void,
37	closeModal: () => void,
38	iframeRef: MutableRefObject<HTMLIFrameElement \| null>,
39	): ReturnType => {
40	const { enqueueSnackbar, closeSnackbar } = useSnackbar()	×
41	const { address: safeAddress, ethBalance, name: safeName } = useSelector(currentSafeWithNames)	×
42	const dispatch = useDispatch()	×
43	const { chainId, chainName } = getChainInfo()	×
44
45	const sendMessageToIframe = useCallback(	×
46	function <T extends InterfaceMessageIds>(message: InterfaceMessageProps<T>, requestId?: RequestId) {
47	const requestWithMessage = {	×
48	...message,
49	requestId: requestId \|\| Math.trunc(window.performance.now()),	×
50	version: '0.4.2',
51	}
52
53	if (iframeRef && selectedApp) {	×
54	iframeRef.current?.contentWindow?.postMessage(requestWithMessage, selectedApp.url)	×
55	}
56	},
57	[iframeRef, selectedApp],
58	)
59
60	useEffect(() => {	×
61	const handleIframeMessage = (	×
62	messageId: SDKMessageIds,
63	messagePayload: SDKMessageToPayload[typeof messageId],
64	requestId: RequestId,
65	): void => {
66	if (!messageId) {	×
67	return	×
68	}
69
NEW 70	trackEvent({ ...SAFE_APPS_EVENTS.LEGACY_API_CALL, label: `${getSafeAppName(selectedApp)}-${messageId}` })	×
71
UNCOV 72	switch (messageId) {	×
73	// typescript doesn't narrow type in switch/case statements
74	// issue: https://github.com/microsoft/TypeScript/issues/20375
75	// possible solution: https://stackoverflow.com/a/43879897/7820085
76	case SDK_MESSAGES.SEND_TRANSACTIONS: {
77	if (messagePayload) {	×
78	openConfirmationModal(	×
79	messagePayload as SDKMessageToPayload[typeof SDK_MESSAGES.SEND_TRANSACTIONS],
80	undefined,
81	requestId,
82	)
83	}
84	break	×
85	}
86
87	case SDK_MESSAGES.SAFE_APP_SDK_INITIALIZED: {
88	const safeInfoMessage = {	×
89	messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
90	data: {
91	safeAddress: safeAddress as string,
92	network: getLegacyChainName(chainName, chainId).toLowerCase() as LowercaseNetworks,
93	ethBalance: ethBalance as string,
94	},
95	}
96	const envInfoMessage = {	×
97	messageId: INTERFACE_MESSAGES.ENV_INFO,
98	data: {
99	txServiceUrl: getTxServiceUrl(),
100	},
101	}
102
103	sendMessageToIframe(safeInfoMessage)	×
104	sendMessageToIframe(envInfoMessage)	×
105	break	×
106	}
107	default: {
108	console.error(`ThirdPartyApp: A message was received with an unknown message id ${messageId}.`)	×
109	break	×
110	}
111	}
112	}
113	const onIframeMessage = async (	×
114	message: MessageEvent<{
115	requestId: RequestId
116	messageId: SDKMessageIds
117	data: SDKMessageToPayload[SDKMessageIds]
118	}>,
119	) => {
120	if (message.origin === window.origin \|\| message.origin === THIRD_PARTY_COOKIES_CHECK_URL) {	×
121	return	×
122	}
123
124	if (!selectedApp?.url.includes(message.origin)) {	×
125	console.error(`ThirdPartyApp: A message was received from an unknown origin ${message.origin}`)	×
126	return	×
127	}
128	handleIframeMessage(message.data.messageId, message.data.data, message.data.requestId)	×
129	}
130
131	window.addEventListener('message', onIframeMessage)	×
132	return () => {	×
133	window.removeEventListener('message', onIframeMessage)	×
134	}
135	}, [
136	chainName,
137	chainId,
138	closeModal,
139	closeSnackbar,
140	dispatch,
141	enqueueSnackbar,
142	ethBalance,
143	openConfirmationModal,
144	safeAddress,
145	safeName,
146	selectedApp,
147	sendMessageToIframe,
148	])
149
150	return {	×
151	sendMessageToIframe,
152	}
153	}
154
155	export { useIframeMessageHandler }

safe-global / safe-react / 2227244328

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