Enable apps for non-owners; fix app URL redirect (#2676)

* Enable apps for non-owners; fix app URL redirect

* Add a non-owner warning text

* Hide the gas estimation text for non-owners

* Fix error not being displayed

Author: katspaugh

src/components/TransactionFailText/index.tsx

@@ -8,6 +8,7 @@ import InfoIcon from 'src/assets/icons/info_red.svg'
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { currentSafeThreshold } from 'src/logic/safe/store/selectors'
+import { grantedSelector } from 'src/routes/safe/container/selector'
 
 const styles = createStyles({
   executionWarningRow: {
@@ -32,8 +33,9 @@ export const TransactionFailText = ({
 }: TransactionFailTextProps): React.ReactElement | null => {
   const classes = useStyles()
   const threshold = useSelector(currentSafeThreshold)
+  const isOwner = useSelector(grantedSelector)
 
-  if (txEstimationExecutionStatus !== EstimationStatus.FAILURE) {
+  if (txEstimationExecutionStatus !== EstimationStatus.FAILURE && isOwner) {
     return null
   }
 
@@ -49,7 +51,12 @@ export const TransactionFailText = ({
     <Row align="center">
       <Paragraph color="error" className={classes.executionWarningRow}>
         <Img alt="Info Tooltip" height={16} src={InfoIcon} className={classes.warningIcon} />
-        This transaction will most likely fail. {errorMessage}
+
+        {isOwner ? (
+          <>This transaction will most likely fail. {errorMessage}</>
+        ) : (
+          <>You are currently not an owner of this Safe and won&apos;t be able to submit this tx.</>
+        )}
       </Paragraph>
     </Row>
   )

src/components/TransactionsFees/index.tsx

@@ -7,7 +7,7 @@ import { Text } from '@gnosis.pm/safe-react-components'
 
 type TransactionFailTextProps = {
   txEstimationExecutionStatus: EstimationStatus
-  gasCostFormatted: string
+  gasCostFormatted?: string
   isExecution: boolean
   isCreation: boolean
   isOffChainSignature: boolean
@@ -35,19 +35,21 @@ export const TransactionFees = ({
 
   return (
     <>
-      <Paragraph size="lg" align="center">
-        You&apos;re about to {transactionAction} a transaction and will have to confirm it with your currently connected
-        wallet.{' '}
-        {!isOffChainSignature && (
-          <>
-            Make sure you have{' '}
-            <Text size="lg" as="span" color="text" strong>
-              {gasCostFormatted}
-            </Text>{' '}
-            (fee price) {nativeCoin.name} in this wallet to fund this confirmation.
-          </>
-        )}
-      </Paragraph>
+      {gasCostFormatted != null && (
+        <Paragraph size="lg" align="center">
+          You&apos;re about to {transactionAction} a transaction and will have to confirm it with your currently
+          connected wallet.{' '}
+          {!isOffChainSignature && (
+            <>
+              Make sure you have{' '}
+              <Text size="lg" as="span" color="text" strong>
+                {gasCostFormatted}
+              </Text>{' '}
+              (fee price) {nativeCoin.name} in this wallet to fund this confirmation.
+            </>
+          )}
+        </Paragraph>
+      )}
       <TransactionFailText txEstimationExecutionStatus={txEstimationExecutionStatus} isExecution={isExecution} />
     </>
   )

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
-import { FixedIcon, Loader, Title, Card } from '@gnosis.pm/safe-react-components'
+import { Loader, Title, Card } from '@gnosis.pm/safe-react-components'
 import {
   GetBalanceParams,
   GetTxBySafeTxHashParams,
@@ -14,7 +14,6 @@ import { INTERFACE_MESSAGES, Transaction, RequestId, LowercaseNetworks } from '@
 import Web3 from 'web3'
 
 import { currentSafe } from 'src/logic/safe/store/selectors'
-import { grantedSelector } from 'src/routes/safe/container/selector'
 import { getNetworkId, getNetworkName, getSafeAppsRpcServiceUrl, getTxServiceUrl } from 'src/config'
 import { SAFE_ROUTES } from 'src/routes/routes'
 import { isSameURL } from 'src/utils/url'
@@ -34,14 +33,6 @@ import { fetchSafeTransaction } from 'src/logic/safe/transactions/api/fetchSafeT
 import { logError, Errors } from 'src/logic/exceptions/CodedException'
 import { addressBookEntryName } from 'src/logic/addressBook/store/selectors'
 
-const OwnerDisclaimer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  height: 476px;
-`
-
 const AppWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -93,7 +84,6 @@ const safeAppWeb3Provider = new Web3.providers.HttpProvider(getSafeAppsRpcServic
 })
 
 const AppFrame = ({ appUrl }: Props): ReactElement => {
-  const granted = useSelector(grantedSelector)
   const { address: safeAddress, ethBalance, owners, threshold } = useSelector(currentSafe)
   const safeName = useSelector((state) => addressBookEntryName(state, { address: safeAddress }))
   const { trackEvent } = useAnalytics()
@@ -291,15 +281,6 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
     return <LegalDisclaimer onCancel={redirectToBalance} onConfirm={onConsentReceipt} />
   }
 
-  if (NETWORK_NAME === 'UNKNOWN' || !granted) {
-    return (
-      <OwnerDisclaimer>
-        <FixedIcon type="notOwner" />
-        <Title size="xs">To use apps, you must be an owner of this Safe</Title>
-      </OwnerDisclaimer>
-    )
-  }
-
   return (
     <AppWrapper>
       <StyledCard>

src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx

@@ -1,7 +1,7 @@
 import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
 import { EthHashInfo, Text } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement, useEffect, useMemo, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import ModalTitle from 'src/components/ModalTitle'
@@ -28,6 +28,7 @@ import Divider from 'src/components/Divider'
 import { ConfirmTxModalProps, DecodedTxDetail } from '.'
 import Hairline from 'src/components/layout/Hairline'
 import { ButtonStatus, Modal } from 'src/components/Modal'
+import { grantedSelector } from 'src/routes/safe/container/selector'
 
 const { nativeCoin } = getNetworkInfo()
 
@@ -86,6 +87,7 @@ export const ReviewConfirm = ({
   const [decodedData, setDecodedData] = useState<DecodedData | null>(null)
   const dispatch = useDispatch()
   const explorerUrl = getExplorerInfo(safeAddress)
+  const isOwner = useSelector(grantedSelector)
 
   const txRecipient: string | undefined = useMemo(
     () => (isMultiSend ? getMultisendContractAddress() : txs[0]?.to),
@@ -240,7 +242,7 @@ export const ReviewConfirm = ({
           {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
             <TransactionFeesWrapper>
               <TransactionFees
-                gasCostFormatted={gasCostFormatted}
+                gasCostFormatted={isOwner ? gasCostFormatted : undefined}
                 isExecution={isExecution}
                 isCreation={isCreation}
                 isOffChainSignature={isOffChainSignature}
@@ -255,7 +257,7 @@ export const ReviewConfirm = ({
               cancelButtonProps={{ onClick: handleTxRejection }}
               confirmButtonProps={{
                 onClick: () => confirmTransactions(txParameters),
-                disabled: areTxsMalformed,
+                disabled: !isOwner || areTxsMalformed,
                 status: buttonStatus,
                 text: txEstimationExecutionStatus === EstimationStatus.LOADING ? 'Estimating' : undefined,
               }}

src/routes/safe/container/index.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { generatePath, Redirect, Route, Switch } from 'react-router-dom'
 
-import { currentSafeFeaturesEnabled, safeAddressFromUrl } from 'src/logic/safe/store/selectors'
+import { currentSafeFeaturesEnabled, currentSafeOwners, safeAddressFromUrl } from 'src/logic/safe/store/selectors'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 import { SAFE_ROUTES } from 'src/routes/routes'
 import { FEATURES } from 'src/config/networks/network.d'
@@ -26,6 +26,8 @@ const AddressBookTable = React.lazy(() => import('src/routes/safe/components/Add
 const Container = (): React.ReactElement => {
   const safeAddress = useSelector(safeAddressFromUrl)
   const featuresEnabled = useSelector(currentSafeFeaturesEnabled)
+  const owners = useSelector(currentSafeOwners)
+  const isSafeLoaded = owners.length > 0
   const balancesBaseRoute = generatePath(SAFE_ROUTES.ASSETS_BASE_ROUTE, {
     safeAddress,
   })
@@ -40,7 +42,7 @@ const Container = (): React.ReactElement => {
     onClose: () => {},
   })
 
-  if (!featuresEnabled) {
+  if (!isSafeLoaded) {
     return (
       <LoadingContainer>
         <Loader size="md" />