Run query param sanitization

Author: chrstph-dvx

packages/app/src/utils/__tests__/sanitizeAndRedirect.test.ts

@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { PathnameEnum } from '@/bridge/constants';
+
+import { initializeBridgePage } from '../bridgePageUtils';
+
+const { redirectMock, registerLocalNetworkMock } = vi.hoisted(() => {
+  process.env.NEXT_PUBLIC_INFURA_KEY ||= 'test-infura-key';
+  process.env.NEXT_PUBLIC_FEATURE_FLAG_LIFI = 'true';
+
+  return {
+    redirectMock: vi.fn(),
+    registerLocalNetworkMock: vi.fn(async () => undefined),
+  };
+});
+
+vi.mock('next/navigation', () => ({
+  redirect: redirectMock,
+}));
+
+vi.mock('@/bridge/util/networks', async (importActual) => {
+  const actual = await importActual<typeof import('@/bridge/util/networks')>();
+
+  return {
+    ...actual,
+    registerLocalNetwork: registerLocalNetworkMock,
+  };
+});
+
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
+
+function getRedirectedUrl() {
+  const [redirectTarget] = redirectMock.mock.calls.at(-1) ?? [];
+
+  if (!redirectTarget) {
+    throw new Error('Expected redirect to be called.');
+  }
+
+  return new URL(redirectTarget, 'https://example.com');
+}
+
+describe('initializeBridgePage sanitization', () => {
+  beforeEach(() => {
+    redirectMock.mockClear();
+    registerLocalNetworkMock.mockClear();
+  });
+
+  it('sets destinationToken to zero address for first-load apechain -> superposition', async () => {
+    await initializeBridgePage({
+      searchParams: {
+        sourceChain: 'apechain',
+        destinationChain: 'superposition',
+      },
+      redirectPath: PathnameEnum.BRIDGE,
+    });
+
+    expect(redirectMock).toHaveBeenCalledTimes(1);
+    const redirected = getRedirectedUrl();
+
+    expect(redirected.pathname).toBe(PathnameEnum.BRIDGE);
+    expect(redirected.searchParams.get('sourceChain')).toBe('apechain');
+    expect(redirected.searchParams.get('destinationChain')).toBe('superposition');
+    expect(redirected.searchParams.get('destinationToken')).toBe(ZERO_ADDRESS);
+    expect(redirected.searchParams.get('sanitized')).toBe('true');
+  });
+
+  it('sets token and destinationToken to zero address for first-load superposition -> apechain', async () => {
+    await initializeBridgePage({
+      searchParams: {
+        sourceChain: 'superposition',
+        destinationChain: 'apechain',
+      },
+      redirectPath: PathnameEnum.BRIDGE,
+    });
+
+    expect(redirectMock).toHaveBeenCalledTimes(1);
+    const redirected = getRedirectedUrl();
+
+    expect(redirected.pathname).toBe(PathnameEnum.BRIDGE);
+    expect(redirected.searchParams.get('sourceChain')).toBe('superposition');
+    expect(redirected.searchParams.get('destinationChain')).toBe('apechain');
+    expect(redirected.searchParams.get('token')).toBe(ZERO_ADDRESS);
+    expect(redirected.searchParams.get('destinationToken')).toBe(ZERO_ADDRESS);
+    expect(redirected.searchParams.get('sanitized')).toBe('true');
+  });
+});

packages/app/src/utils/bridgePageUtils.tsx

@@ -1,8 +1,10 @@
+import { redirect } from 'next/navigation';
+
 import { onrampServices } from '@/bridge/components/BuyPanel/utils';
 import { PathnameEnum } from '@/bridge/constants';
 
 import { addOrbitChainsToArbitrumSDK } from '../initialization';
-import { sanitizeAndRedirect } from './sanitizeAndRedirect';
+import { getSanitizedRedirectPath } from './sanitizeAndRedirect';
 
 export type Slug = (typeof onrampServices)[number]['slug'];
 
@@ -11,14 +13,31 @@ export interface BridgePageProps {
   redirectPath: PathnameEnum | `${PathnameEnum.BUY}/${Slug}` | `${PathnameEnum.EMBED_BUY}/${Slug}`;
 }
 
-export async function initializeBridgePage({ searchParams, redirectPath }: BridgePageProps) {
+export async function getBridgePageSanitizedRedirectPath({
+  searchParams,
+  redirectPath,
+}: BridgePageProps) {
   /**
    * This code is run on every query param change,
    * we don't want to sanitize every query param change.
    * It should only be executed once per user per session.
    */
-  if (searchParams.sanitized !== 'true') {
-    addOrbitChainsToArbitrumSDK();
-    await sanitizeAndRedirect(searchParams, redirectPath);
+  if (searchParams.sanitized === 'true') {
+    return null;
+  }
+
+  addOrbitChainsToArbitrumSDK();
+
+  return getSanitizedRedirectPath(searchParams, redirectPath);
+}
+
+export async function initializeBridgePage({ searchParams, redirectPath }: BridgePageProps) {
+  const sanitizedRedirectPath = await getBridgePageSanitizedRedirectPath({
+    searchParams,
+    redirectPath,
+  });
+
+  if (sanitizedRedirectPath) {
+    redirect(sanitizedRedirectPath);
   }
 }

packages/app/src/utils/sanitizeAndRedirect.ts

@@ -1,5 +1,7 @@
+import { constants } from 'ethers';
 import { redirect } from 'next/navigation';
 
+import { ChainId } from '@/bridge/types/ChainId';
 import { sanitizeExperimentalFeaturesQueryParam } from '@/bridge/util';
 import { isE2eTestingEnvironment, isProductionEnvironment } from '@/bridge/util/CommonUtils';
 import { registerLocalNetwork } from '@/bridge/util/networks';
@@ -98,6 +100,19 @@ export async function sanitizeAndRedirect(
     [key: string]: string | string[] | undefined;
   },
   baseUrl: string,
+) {
+  const redirectPath = await getSanitizedRedirectPath(searchParams, baseUrl);
+
+  if (redirectPath) {
+    redirect(redirectPath);
+  }
+}
+
+export async function getSanitizedRedirectPath(
+  searchParams: {
+    [key: string]: string | string[] | undefined;
+  },
+  baseUrl: string,
 ) {
   const sourceChainId = decodeChainQueryParam(searchParams.sourceChain);
   const destinationChainId = decodeChainQueryParam(searchParams.destinationChain);
@@ -114,7 +129,7 @@ export async function sanitizeAndRedirect(
 
   // If both sourceChain and destinationChain are not present, let the client sync with Metamask
   if (!sourceChainId && !destinationChainId) {
-    return;
+    return null;
   }
 
   if (!isProductionEnvironment || isE2eTestingEnvironment) {
@@ -125,19 +140,32 @@ export async function sanitizeAndRedirect(
     sourceChainId,
     destinationChainId,
   });
+  const sanitizedToken = sanitizeTokenQueryParam({
+    token,
+    sourceChainId: sanitizedChainIds.sourceChainId,
+    destinationChainId: sanitizedChainIds.destinationChainId,
+  });
+  let sanitizedDestinationToken = sanitizeTokenQueryParam({
+    token: destinationToken,
+    sourceChainId: sanitizedChainIds.sourceChainId,
+    destinationChainId: sanitizedChainIds.destinationChainId,
+  });
+
+  // Reuse the same default selection behavior as setSelectedToken(null) for ApeChain -> Superposition.
+  if (
+    sanitizedChainIds.sourceChainId === ChainId.ApeChain &&
+    sanitizedChainIds.destinationChainId === ChainId.Superposition &&
+    typeof token === 'undefined' &&
+    typeof destinationToken === 'undefined'
+  ) {
+    sanitizedDestinationToken = constants.AddressZero;
+  }
+
   const sanitized = {
     ...sanitizedChainIds,
     experiments: sanitizeExperimentalFeaturesQueryParam(experiments),
-    token: sanitizeTokenQueryParam({
-      token,
-      sourceChainId: sanitizedChainIds.sourceChainId,
-      destinationChainId: sanitizedChainIds.destinationChainId,
-    }),
-    destinationToken: sanitizeTokenQueryParam({
-      token: destinationToken,
-      sourceChainId: sanitizedChainIds.sourceChainId,
-      destinationChainId: sanitizedChainIds.destinationChainId,
-    }),
+    token: sanitizedToken,
+    destinationToken: sanitizedDestinationToken,
     tab: sanitizeTabQueryParam(tab),
     disabledFeatures: DisabledFeaturesParam.decode(disabledFeatures),
   };
@@ -160,6 +188,8 @@ export async function sanitizeAndRedirect(
       `[sanitizeAndRedirect]     sourceChain=${sanitized.sourceChainId}&destinationChain=${sanitized.destinationChainId}&experiments=${sanitized.experiments}&token=${sanitized.token}&destinationToken=${sanitized.destinationToken}&tab=${sanitized.tab}&disabledFeatures=${sanitized.disabledFeatures}&sanitized=true (after)`,
     );
 
-    redirect(getDestinationWithSanitizedQueryParams(sanitized, searchParams, baseUrl));
+    return getDestinationWithSanitizedQueryParams(sanitized, searchParams, baseUrl);
   }
+
+  return null;
 }

packages/app/vitest.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '@/common': path.resolve(__dirname, '../portal/common'),
       '@/bridge': path.resolve(__dirname, '../arb-token-bridge-ui/src'),
     },
   },