From 129b1b1db03b943f5e00cbc306adf1072557659f Mon Sep 17 00:00:00 2001 From: katspaugh <381895+katspaugh@users.noreply.github.com> Date: Tue, 20 Feb 2024 07:17:39 +0100 Subject: [PATCH] Fix: avoid fetching Safe Apps on all pages (#3254) --- .../__tests__/SafeTokenWidget.test.tsx | 37 +++---------------- .../common/SafeTokenWidget/index.tsx | 34 +++++------------ src/config/constants.ts | 11 +++++- .../__tests__/WalletConnectContext.test.tsx | 20 +--------- .../WalletConnectProvider/index.tsx | 18 +++------ .../analytics/__tests__/tx-tracking.test.ts | 2 +- src/utils/gateway.ts | 7 +--- 7 files changed, 36 insertions(+), 93 deletions(-) diff --git a/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx b/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx index 04d4c189e0..49090fab72 100644 --- a/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx +++ b/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx @@ -1,50 +1,23 @@ -import * as nextRouter from 'next/router' +import * as nextNav from 'next/navigation' import useChainId from '@/hooks/useChainId' import { render, waitFor } from '@/tests/test-utils' -import { SafeAppAccessPolicyTypes } from '@safe-global/safe-gateway-typescript-sdk' import SafeTokenWidget from '..' import { toBeHex } from 'ethers' import { AppRoutes } from '@/config/routes' import useSafeTokenAllocation, { useSafeVotingPower } from '@/hooks/useSafeTokenAllocation' -const MOCK_GOVERNANCE_APP_URL = 'https://mock.governance.safe.global' - jest.mock('@/hooks/useChainId', () => jest.fn(() => '1')) jest.mock('@/hooks/useSafeTokenAllocation') -jest.mock( - '@/hooks/safe-apps/useRemoteSafeApps', - jest.fn(() => ({ - useRemoteSafeApps: () => [ - [ - { - id: 61, - url: MOCK_GOVERNANCE_APP_URL, - chainIds: ['4'], - name: 'Safe {DAO} Governance', - description: '', - iconUrl: '', - tags: ['safe-dao-governance-app'], - accessControl: { - type: SafeAppAccessPolicyTypes.NoRestrictions, - }, - }, - ], - ], - })), -) - describe('SafeTokenWidget', () => { const fakeSafeAddress = toBeHex('0x1', 20) beforeEach(() => { jest.restoreAllMocks() - jest.spyOn(nextRouter, 'useRouter').mockImplementation( + jest.spyOn(nextNav, 'useSearchParams').mockImplementation( () => ({ - query: { - safe: fakeSafeAddress, - }, + get: () => fakeSafeAddress, } as any), ) }) @@ -90,7 +63,9 @@ describe('SafeTokenWidget', () => { const result = render() await waitFor(() => { expect(result.baseElement).toContainHTML( - `href="${AppRoutes.apps.open}?safe=${fakeSafeAddress}&appUrl=${encodeURIComponent(MOCK_GOVERNANCE_APP_URL)}"`, + `href="${AppRoutes.apps.open}?safe=${fakeSafeAddress}&appUrl=${encodeURIComponent( + 'https://safe-dao-governance.dev.5afe.dev', + )}`, ) }) }) diff --git a/src/components/common/SafeTokenWidget/index.tsx b/src/components/common/SafeTokenWidget/index.tsx index ffd3f6b1bd..234f1d3b84 100644 --- a/src/components/common/SafeTokenWidget/index.tsx +++ b/src/components/common/SafeTokenWidget/index.tsx @@ -1,14 +1,12 @@ -import { SafeAppsTag, SAFE_TOKEN_ADDRESSES } from '@/config/constants' +import { IS_PRODUCTION, SAFE_TOKEN_ADDRESSES } from '@/config/constants' import { AppRoutes } from '@/config/routes' -import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps' import useChainId from '@/hooks/useChainId' import useSafeTokenAllocation, { useSafeVotingPower, type Vesting } from '@/hooks/useSafeTokenAllocation' import { OVERVIEW_EVENTS } from '@/services/analytics' import { formatVisualAmount } from '@/utils/formatters' import { Box, Button, ButtonBase, Skeleton, Tooltip, Typography } from '@mui/material' import Link from 'next/link' -import { useRouter } from 'next/router' -import type { UrlObject } from 'url' +import { useSearchParams } from 'next/navigation' import Track from '../Track' import SafeTokenIcon from '@/public/images/common/safe-token.svg' import css from './styles.module.css' @@ -36,13 +34,11 @@ const canRedeemSep5Airdrop = (allocation?: Vesting[]): boolean => { return !sep5Allocation.isRedeemed && !sep5Allocation.isExpired } -const SEP5_DEADLINE = '27.10' +const GOVERNANCE_APP_URL = IS_PRODUCTION ? 'https://governance.safe.global' : 'https://safe-dao-governance.dev.5afe.dev' const SafeTokenWidget = () => { const chainId = useChainId() - const router = useRouter() - const [apps] = useRemoteSafeApps(SafeAppsTag.SAFE_GOVERNANCE_APP) - const governanceApp = apps?.[0] + const query = useSearchParams() const [allocationData, , allocationDataLoading] = useSafeTokenAllocation() const [allocation, , allocationLoading] = useSafeVotingPower(allocationData) @@ -52,30 +48,20 @@ const SafeTokenWidget = () => { return null } - const url: UrlObject | undefined = governanceApp - ? { - pathname: AppRoutes.apps.open, - query: { safe: router.query.safe, appUrl: governanceApp.url }, - } - : undefined + const url = { + pathname: AppRoutes.apps.open, + query: { safe: query.get('safe'), appUrl: GOVERNANCE_APP_URL }, + } const canRedeemSep5 = canRedeemSep5Airdrop(allocationData) const flooredSafeBalance = formatVisualAmount(allocation || BigInt(0), TOKEN_DECIMALS, 2) return ( - + - + ({ - 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', }, ) diff --git a/src/features/walletconnect/components/WalletConnectProvider/index.tsx b/src/features/walletconnect/components/WalletConnectProvider/index.tsx index f104e95da3..092195f752 100644 --- a/src/features/walletconnect/components/WalletConnectProvider/index.tsx +++ b/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, WC_APP_DEV, WC_APP_PROD } from '@/config/constants' import { getPeerName, stripEip155Prefix } from '@/features/walletconnect/services/utils' import { trackRequest } from '@/features/walletconnect//services/tracking' import { wcPopupStore } from '@/features/walletconnect/components' @@ -18,6 +16,8 @@ enum Errors { WRONG_CHAIN = '%%dappName%% made a request on a different chain than the one you are connected to', } +const WalletConnectSafeApp = IS_PRODUCTION ? WC_APP_PROD : WC_APP_DEV + const walletConnectSingleton = new WalletConnectWallet() const getWrongChainError = (dappName: string): Error => { @@ -25,11 +25,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 +35,6 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) => const setOpen = wcPopupStore.setStore const [error, setError] = useState(null) const safeWalletProvider = useSafeWalletProvider() - const wcApp = useWalletConnectApp() // Init WalletConnect useEffect(() => { @@ -88,8 +82,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 +99,7 @@ export const WalletConnectProvider = ({ children }: { children: ReactNode }) => setError(asError(e)) } }) - }, [walletConnect, chainId, safeWalletProvider, wcApp]) + }, [walletConnect, chainId, safeWalletProvider]) return ( diff --git a/src/services/analytics/__tests__/tx-tracking.test.ts b/src/services/analytics/__tests__/tx-tracking.test.ts index dc2abb999e..41705985ca 100644 --- a/src/services/analytics/__tests__/tx-tracking.test.ts +++ b/src/services/analytics/__tests__/tx-tracking.test.ts @@ -144,7 +144,7 @@ describe('getTransactionTrackingType', () => { type: TransactionInfoType.CUSTOM, }, safeAppInfo: { - url: 'https://apps-portal.safe.global/wallet-connect', + url: 'https://safe-apps.dev.5afe.dev/wallet-connect', }, } as unknown) diff --git a/src/utils/gateway.ts b/src/utils/gateway.ts index 985960a211..d397442967 100644 --- a/src/utils/gateway.ts +++ b/src/utils/gateway.ts @@ -1,3 +1,4 @@ +import { WC_APP_PROD, WC_APP_DEV } from '@/config/constants' import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk' export const _replaceTemplate = (uri: string, data: Record): 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 === WC_APP_PROD.url || url === WC_APP_DEV.url }