Fix: avoid fetching Safe Apps on all pages

src/config/constants.ts

@@ -60,6 +60,16 @@ export enum SafeAppsTag {
   ONRAMP = 'onramp',
 }
 
+export const WalletConnectSafeApp = IS_PRODUCTION
+  ? {
+      id: 111,
+      url: 'https://apps-portal.safe.global/wallet-connect',
+    }
+  : {
+      id: 25,
+      url: 'https://safe-apps.dev.5afe.dev/wallet-connect',
+    }
+
 // Safe Gelato relay service
 export const SAFE_RELAY_SERVICE_URL_PRODUCTION =
   process.env.NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_PRODUCTION || 'https://safe-client.safe.global/v1/relay'

src/features/walletconnect/__tests__/WalletConnectContext.test.tsx

@@ -16,22 +16,6 @@ import * as useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeW
 jest.mock('../services/WalletConnectWallet')
 jest.mock('@/services/safe-wallet-provider/useSafeWalletProvider')
 
-jest.mock('@/hooks/safe-apps/useRemoteSafeApps', () => ({
-  useRemoteSafeApps: () => [
-    [
-      {
-        id: 111,
-        url: 'https://apps-portal.safe.global/wallet-connect',
-        name: 'WC App',
-        iconUrl: 'https://test.com/icon.png',
-        description: 'Test App Description',
-      },
-    ],
-    undefined,
-    false,
-  ],
-}))
-
 const TestComponent = () => {
   const { walletConnect, error } = useContext(WalletConnectContext)
   return (
@@ -426,10 +410,10 @@ describe('WalletConnectProvider', () => {
         1,
         { method: 'fake', params: [] },
         {
-          id: 111,
+          id: 25,
           name: 'name',
           description: 'description',
-          url: 'https://apps-portal.safe.global/wallet-connect',
+          url: 'https://safe-apps.dev.5afe.dev/wallet-connect',
           iconUrl: 'iconUrl',
         },
       )

src/features/walletconnect/components/WalletConnectProvider/index.tsx

@@ -5,9 +5,7 @@ import { formatJsonRpcError } from '@walletconnect/jsonrpc-utils'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeWalletProvider'
 import { asError } from '@/services/exceptions/utils'
-import { IS_PRODUCTION } from '@/config/constants'
-import { SafeAppsTag } from '@/config/constants'
-import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
+import { IS_PRODUCTION, WalletConnectSafeApp } from '@/config/constants'
 import { getPeerName, stripEip155Prefix } from '@/features/walletconnect/services/utils'
 import { trackRequest } from '@/features/walletconnect//services/tracking'
 import { wcPopupStore } from '@/features/walletconnect/components'
@@ -25,11 +23,6 @@ const getWrongChainError = (dappName: string): Error => {
   return new Error(message)
 }
 
-const useWalletConnectApp = () => {
-  const [matchingApps] = useRemoteSafeApps(SafeAppsTag.WALLET_CONNECT)
-  return matchingApps?.[0]
-}
-
 export const WalletConnectProvider = ({ children }: { children: ReactNode }) => {
   const {
     safe: { chainId },
@@ -40,7 +33,6 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
   const setOpen = wcPopupStore.setStore
   const [error, setError] = useState<Error | null>(null)
   const safeWalletProvider = useSafeWalletProvider()
-  const wcApp = useWalletConnectApp()
 
   // Init WalletConnect
   useEffect(() => {
@@ -88,8 +80,8 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
 
         // Get response from Safe Wallet Provider
         return safeWalletProvider.request(event.id, event.params.request, {
-          id: wcApp?.id || -1,
-          url: wcApp?.url || '',
+          id: WalletConnectSafeApp.id,
+          url: WalletConnectSafeApp.url,
           name: getPeerName(session.peer) || 'Unknown dApp',
           description: session.peer.metadata.description,
           iconUrl: session.peer.metadata.icons[0],
@@ -105,7 +97,7 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) =>
         setError(asError(e))
       }
     })
-  }, [walletConnect, chainId, safeWalletProvider, wcApp])
+  }, [walletConnect, chainId, safeWalletProvider])
 
   return (
     <WalletConnectContext.Provider value={{ walletConnect, error, setError, open, setOpen }}>

src/utils/gateway.ts

@@ -1,3 +1,4 @@
+import { WalletConnectSafeApp } from '@/config/constants'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 export const _replaceTemplate = (uri: string, data: Record<string, string>): string => {
@@ -28,9 +29,5 @@ export const getExplorerLink = (
 }
 
 export const isWalletConnectSafeApp = (url: string): boolean => {
-  const WC_APP_URLS = [
-    'https://apps-portal.safe.global/wallet-connect',
-    'https://safe-apps.dev.5afe.dev/wallet-connect',
-  ]
-  return WC_APP_URLS.includes(url)
+  return url === WalletConnectSafeApp.url
 }