feat: add permissions management

package.json

@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@ethersproject/hash": "^5.5.0",
-    "@gnosis.pm/safe-apps-sdk": "7.3.0",
+    "@gnosis.pm/safe-apps-sdk": "7.6.0",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/[email protected]",
     "@gnosis.pm/safe-core-sdk": "^2.0.0",
     "@gnosis.pm/safe-deployments": "^1.15.0",

src/components/AppLayout/Sidebar/useSidebarItems.tsx

@@ -106,6 +106,11 @@ const useSidebarItems = (): ListItemType[] => {
         iconType: 'settingsTool',
         href: currentSafeRoutes.SETTINGS_ADVANCED,
       }),
+      makeEntryItem({
+        label: 'Safe Apps Permissions',
+        iconType: 'info',
+        href: currentSafeRoutes.SETTINGS_SAFE_APPS_PERMISSIONS,
+      }),
     ].filter(Boolean)
 
     return [

src/components/Modal/index.tsx

@@ -73,16 +73,26 @@ interface GnoModalProps {
   open: boolean
   paperClassName?: string
   title: string
+  style?: React.CSSProperties
 }
 
-const GnoModal = ({ children, description, handleClose, open, paperClassName, title }: GnoModalProps): ReactElement => {
+const GnoModal = ({
+  children,
+  description,
+  handleClose,
+  open,
+  paperClassName,
+  title,
+  style,
+}: GnoModalProps): ReactElement => {
   return (
     <ModalStyled
       BackdropProps={{ className: 'overlay' }}
       aria-describedby={description}
       aria-labelledby={title}
       onClose={handleClose}
       open={open}
+      style={style}
     >
       <div className={cn('paper', paperClassName)}>{children}</div>
     </ModalStyled>
@@ -216,7 +226,7 @@ const Buttons = ({ cancelButtonProps = {}, confirmButtonProps = {} }: ButtonsPro
       <Button
         size="md"
         color="primary"
-        variant="outlined"
+        variant={cancelButtonProps.variant || 'outlined'}
         type={cancelOnClick ? 'button' : 'submit'}
         disabled={cancelDisabled || [ButtonStatus.DISABLED, ButtonStatus.LOADING].includes(cancelStatus)}
         data-testid={cancelTestId}
@@ -278,6 +288,7 @@ interface ModalProps {
   handleClose: () => void
   open?: boolean
   title?: string
+  style?: React.CSSProperties
 }
 
 export const Modal = ({ children, description = '', open = true, title = '', ...props }: ModalProps): ReactElement => {

src/routes/SafeAppLandingPage/SafeAppLandingPage.test.tsx

@@ -39,6 +39,7 @@ describe('<SafeAppLandingPage>', () => {
             type: safeAppsGatewaySDK.SafeAppAccessPolicyTypes.NoRestrictions,
           },
           tags: [],
+          safeAppsPermissions: [],
         },
       ]),
     )
@@ -59,6 +60,7 @@ describe('<SafeAppLandingPage>', () => {
           type: safeAppsGatewaySDK.SafeAppAccessPolicyTypes.NoRestrictions,
         },
         tags: [],
+        safeAppsPermissions: [],
       }),
     )
 

src/routes/SafeAppLandingPage/components/SafeAppsDetails.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, SyntheticEvent } from 'react'
+import { ReactElement, SyntheticEvent, useMemo } from 'react'
 import styled from 'styled-components'
 import Divider from '@material-ui/core/Divider'
 import { Title, Text } from '@gnosis.pm/safe-react-components'
@@ -7,8 +7,9 @@ import { getChainById } from 'src/config'
 import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
 import { black300 } from 'src/theme/variables'
 import fallbackSafeAppLogoSvg from 'src/assets/icons/apps.svg'
-import { useSecurityFeedbackModal } from 'src/routes/safe/components/Apps/hooks/useSecurityFeedbackModal'
 import UnknownAppWarning from 'src/routes/safe/components/Apps/components/SecurityFeedbackModal/UnknownAppWarning'
+import { useSafeAppUrl } from 'src/logic/hooks/useSafeAppUrl'
+import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
 
 type SafeAppDetailsTypes = {
   iconUrl: string
@@ -19,7 +20,13 @@ type SafeAppDetailsTypes = {
 
 const SafeAppDetails = ({ iconUrl, name, description, availableChains }: SafeAppDetailsTypes): ReactElement => {
   const showAvailableChains = availableChains?.length > 0
-  const { isModalVisible: isLoaded, isSafeAppInDefaultList } = useSecurityFeedbackModal()
+  const { isLoading: isSafeAppListLoading, getSafeApp } = useAppList()
+  const { getAppUrl } = useSafeAppUrl()
+  const url = getAppUrl()
+
+  const isSafeAppInDefaultList = useMemo(() => {
+    return !!getSafeApp(url)
+  }, [getSafeApp, url])
 
   return (
     <>
@@ -51,7 +58,7 @@ const SafeAppDetails = ({ iconUrl, name, description, availableChains }: SafeApp
           <Separator />
         </>
       )}
-      {isLoaded && !isSafeAppInDefaultList && (
+      {!isSafeAppListLoading && !isSafeAppInDefaultList && (
         <>
           <UnknownAppWarning />
           <Separator />

src/routes/routes.ts

@@ -66,6 +66,7 @@ export const SAFE_ROUTES = {
   SETTINGS_POLICIES: `${ADDRESSED_ROUTE}/settings/policies`,
   SETTINGS_SPENDING_LIMIT: `${ADDRESSED_ROUTE}/settings/spending-limit`,
   SETTINGS_ADVANCED: `${ADDRESSED_ROUTE}/settings/advanced`,
+  SETTINGS_SAFE_APPS_PERMISSIONS: `${ADDRESSED_ROUTE}/settings/safe-apps-permissions`,
 }
 
 export const getNetworkRootRoutes = (): Array<{ chainId: ChainId; route: string; shortName: string }> =>

src/routes/safe/components/Apps/__tests__/trackAppUsageCount.test.ts

@@ -97,6 +97,7 @@ describe('rankTrackedSafeApps', () => {
         },
         fetchStatus: FETCH_STATUS.SUCCESS,
         tags: [],
+        safeAppsPermissions: [],
       },
     ]
 

src/routes/safe/components/Apps/__tests__/utils.test.ts

@@ -14,6 +14,7 @@ describe('SafeApp manifest', () => {
         },
       ],
       providedBy: 'test',
+      safeAppsPermissions: [],
     }
 
     const result = isAppManifestValid(manifest)

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

@@ -0,0 +1,33 @@
+import { render, screen, fireEvent, within, act, waitFor } from 'src/utils/test-utils'
+import AppFrame from './AppFrame'
+import axios from 'axios'
+import * as safeAppsUtils from 'src/routes/safe/components/Apps/utils'
+
+jest.mock('axios')
+
+describe('Safe Apps -> AppFrame', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    safeAppsUtils.canLoadAppImage = jest.fn().mockResolvedValue(true)
+    // @ts-ignore
+    axios.get.mockImplementation((url: string) => {
+      console.log(url)
+      return Promise.resolve({
+        data: {
+          name: 'Safe Test App',
+          description: 'Safe Test App description',
+          iconPath: '/image-path.svg',
+        },
+      })
+    })
+  })
+
+  it('should render the correct allow attribute', async () => {
+    render(<AppFrame appUrl="http://test.eth" allowList="camera; microphone" />)
+
+    const iframeElement = await screen.findByTitle('Safe Test App')
+
+    expect(iframeElement).toBeInTheDocument()
+    expect(iframeElement).toHaveAttribute('allow', 'camera; microphone')
+  })
+})

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

@@ -12,6 +12,7 @@ import {
 } 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'
@@ -22,23 +23,26 @@ 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 { 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 { 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 { 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 { useSafeAppFromManifest } from 'src/routes/safe/components/Apps/hooks/useSafeAppFromManifest'
+import { useSafePermissions } from 'src/routes/safe/components/Apps/hooks/permissions'
 
 const AppWrapper = styled.div`
   display: flex;
@@ -74,6 +78,7 @@ type ConfirmTransactionModalState = {
 
 type Props = {
   appUrl: string
+  allowList: string
 }
 
 const APP_LOAD_ERROR_TIMEOUT = 30000
@@ -88,16 +93,16 @@ const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
 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 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 [safeApp, setSafeApp] = useState<SafeApp>(() => getEmptySafeApp(appUrl))
   const [signMessageModalState, openSignMessageModal, closeSignMessageModal] = useSignMessageModal()
   const timer = useRef<number>()
   const [isLoadingSlow, setIsLoadingSlow] = useState<boolean>(false)
@@ -106,12 +111,14 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
   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 } = useSafeAppFromManifest(appUrl)
 
   useEffect(() => {
     const clearTimeouts = () => {
@@ -225,6 +232,26 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
       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
 
@@ -292,6 +319,10 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
     safeAppWeb3Provider,
     granted,
     blockExplorerUriTemplate,
+    addressBook,
+    getPermissions,
+    setPermissionsRequest,
+    hasPermission,
   ])
 
   const onUserTxConfirm = (safeTxHash: string, requestId: RequestId) => {
@@ -320,21 +351,24 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
     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)
     }
-
-    const loadApp = async () => {
-      try {
-        const app = await getAppInfoFromUrl(appUrl, false)
-        setSafeApp(app)
-      } catch (err) {
-        logError(Errors._900, `${appUrl}, ${err.message}`)
-      }
-    }
-
-    loadApp()
   }, [appUrl])
 
   useEffect(() => {
@@ -362,7 +396,7 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
           src={appUrl}
           title={safeApp.name}
           onLoad={onIframeLoad}
-          allow="camera"
+          allow={allowList}
         />
       </StyledCard>
 
@@ -393,6 +427,17 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
         onUserConfirm={onUserTxConfirm}
         onTxReject={onTxReject}
       />
+
+      {permissionsRequest && (
+        <PermissionsPrompt
+          isOpen
+          origin={permissionsRequest.origin}
+          requestId={permissionsRequest.requestId}
+          onAccept={onAcceptPermissionRequest}
+          onReject={onRejectPermissionRequest}
+          permissions={permissionsRequest.request}
+        />
+      )}
     </AppWrapper>
   )
 }