Merge branch 'develop' into fix/cypress-ci

apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx

@@ -73,7 +73,9 @@ export function LimitOrdersWarnings(props: LimitOrdersWarningsProps) {
   const tradeQuote = useTradeQuote()
   const priceImpactParams = useTradePriceImpact()
 
-  const canTrade = localFormValidation === null && primaryFormValidation === null && !tradeQuote.error
+  const isBundling = primaryFormValidation && FORM_STATES_TO_SHOW_BUNDLE_BANNER.includes(primaryFormValidation)
+
+  const canTrade = localFormValidation === null && (primaryFormValidation === null || isBundling) && !tradeQuote.error
   const showPriceImpactWarning =
     canTrade && !expertMode && !!account && !priceImpactParams.loading && !priceImpactParams.priceImpact
 
@@ -84,8 +86,7 @@ export function LimitOrdersWarnings(props: LimitOrdersWarningsProps) {
 
   const showHighFeeWarning = feePercentage?.greaterThan(HIGH_FEE_WARNING_PERCENTAGE)
 
-  const showApprovalBundlingBanner =
-    !isConfirmScreen && primaryFormValidation && FORM_STATES_TO_SHOW_BUNDLE_BANNER.includes(primaryFormValidation)
+  const showApprovalBundlingBanner = !isConfirmScreen && isBundling
   const shouldZeroApprove = useShouldZeroApprove(slippageAdjustedSellAmount)
   const showZeroApprovalWarning = shouldZeroApprove && outputCurrency !== null // Show warning only when output currency is also present.
 

libs/wallet/src/web3-react/hooks/useWalletMetadata.ts

@@ -6,21 +6,9 @@ import { default as AlphaImage } from '../../api/assets/alpha.svg'
 import { ConnectionType } from '../../api/types'
 import { getIsAlphaWallet } from '../../api/utils/connection'
 import { getWeb3ReactConnection } from '../utils/getWeb3ReactConnection'
+import { useGnosisSafeInfo } from '../../api/hooks'
 
-const WC_DESKTOP_GNOSIS_SAFE_APP_NAME = 'WalletConnect Safe App'
-const WC_MOBILE_GNOSIS_SAFE_APP_NAME = 'Safe'
 const SAFE_APP_NAME = 'Safe App'
-const GNOSIS_SAFE_APP_NAME = 'Gnosis Safe App'
-const SAFE_WALLET_NAME = 'Safe{Wallet}'
-const SAFE_WALLET_IOS = 'Safe (iOS)'
-const GNOSIS_APP_NAMES = [
-  SAFE_APP_NAME,
-  GNOSIS_SAFE_APP_NAME,
-  WC_DESKTOP_GNOSIS_SAFE_APP_NAME,
-  WC_MOBILE_GNOSIS_SAFE_APP_NAME,
-  SAFE_WALLET_NAME,
-  SAFE_WALLET_IOS,
-]
 
 const SAFE_ICON_URL = 'https://app.safe.global/favicon.ico'
 
@@ -88,6 +76,7 @@ export function useWalletMetaData(): WalletMetaData {
     }
 
     if (connectionType === ConnectionType.GNOSIS_SAFE) {
+      // TODO: potentially here is where we'll need to work to show the multiple flavours of Safe wallets
       return METADATA_SAFE
     }
 
@@ -100,21 +89,23 @@ export function useWalletMetaData(): WalletMetaData {
  * It'll be false if connected to Safe wallet via WalletConnect
  */
 export function useIsSafeApp(): boolean {
-  const { walletName } = useWalletMetaData()
+  const isSafeWallet = useIsSafeWallet()
+
+  if (!isSafeWallet) {
+    return false
+  }
 
-  return walletName === SAFE_APP_NAME
+  // Will only be a SafeApp if within an iframe
+  // Which means, window.parent is different than window
+  return window?.parent !== window
 }
 
 /**
  * Detects whether the currently connected wallet is a Safe wallet
  * regardless of the connection method (WalletConnect or inside Safe as an App)
  */
 export function useIsSafeWallet(): boolean {
-  const { walletName } = useWalletMetaData()
-
-  if (!walletName) return false
-
-  return GNOSIS_APP_NAMES.includes(walletName.trim())
+  return !!useGnosisSafeInfo()
 }
 
 /**

libs/wallet/src/web3-react/updater.ts

@@ -7,7 +7,7 @@ import { getSafeInfo } from '@cowprotocol/core'
 import { getCurrentChainIdFromUrl } from '@cowprotocol/common-utils'
 
 import { useSafeAppsSdkInfo } from './hooks/useSafeAppsSdkInfo'
-import { useIsSafeWallet, useWalletMetaData } from './hooks/useWalletMetadata'
+import { useWalletMetaData } from './hooks/useWalletMetadata'
 
 import { gnosisSafeInfoAtom, walletDetailsAtom, walletInfoAtom } from '../api/state'
 import { GnosisSafeInfo, WalletDetails, WalletInfo } from '../api/types'
@@ -61,12 +61,11 @@ function _useWalletDetails(account?: string): WalletDetails {
 function _useSafeInfo(walletInfo: WalletInfo): GnosisSafeInfo | undefined {
   const { provider } = useWeb3React()
   const { account, chainId } = walletInfo
-  const isSafeConnected = useIsSafeWallet()
   const [safeInfo, setSafeInfo] = useState<GnosisSafeInfo>()
   const { isReadOnly } = useSafeAppsSdkInfo() || {}
 
   useEffect(() => {
-    if (chainId && account && isSafeConnected && provider) {
+    if (chainId && account && provider) {
       getSafeInfo(chainId, account, provider)
         .then((_safeInfo) =>
           setSafeInfo({
@@ -80,7 +79,7 @@ function _useSafeInfo(walletInfo: WalletInfo): GnosisSafeInfo | undefined {
     } else {
       setSafeInfo(undefined)
     }
-  }, [setSafeInfo, chainId, account, isSafeConnected, provider, isReadOnly])
+  }, [setSafeInfo, chainId, account, provider, isReadOnly])
 
   return safeInfo
 }