feat(testapp): add COOP simulation toggle

Made-with: Cursor

Author: fan-zhang-sv

examples/testapp/public/coop-service-worker.js

@@ -0,0 +1,39 @@
+const COOP_QUERY_KEY = 'coop';
+const COOP_QUERY_VALUE = 'same-origin';
+const COOP_HEADER = 'Cross-Origin-Opener-Policy';
+
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  if (
+    event.request.mode !== 'navigate' ||
+    url.origin !== self.location.origin ||
+    url.searchParams.get(COOP_QUERY_KEY) !== COOP_QUERY_VALUE
+  ) {
+    return;
+  }
+
+  event.respondWith(
+    (async () => {
+      const response = await fetch(event.request);
+      const headers = new Headers(response.headers);
+      headers.set(COOP_HEADER, COOP_QUERY_VALUE);
+      headers.delete('content-encoding');
+      headers.delete('content-length');
+
+      return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers,
+      });
+    })()
+  );
+});

examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx

@@ -18,15 +18,17 @@ import {
   Textarea,
   VStack,
 } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
+import React, { type ReactNode, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { Chain, hexToNumber } from 'viem';
 import { mainnet } from 'viem/chains';
 
 import { useEIP1193Provider } from '../../context/EIP1193ProviderContextProvider';
+import { RpcRequestInput } from './method/RpcRequestInput';
 import { verifySignMsg } from './method/signMessageMethods';
 import { ADDR_TO_FILL, CHAIN_ID_TO_FILL } from './shortcut/const';
 import { multiChainShortcutsMap } from './shortcut/multipleChainShortcuts';
+import { ShortcutType } from './shortcut/ShortcutType';
 
 type ResponseType = string;
 type RequestFormData = Record<string, unknown>;
@@ -65,7 +67,19 @@ const replaceAddressInValue = async (
   return value;
 };
 
-export function RpcMethodCard({ format, method, params, shortcuts }) {
+export function RpcMethodCard({
+  format,
+  method,
+  params,
+  shortcuts,
+  children = null,
+}: {
+  format?: RpcRequestInput['format'];
+  method: RpcRequestInput['method'];
+  params?: RpcRequestInput['params'];
+  shortcuts?: ShortcutType[];
+  children?: ReactNode;
+}) {
   const [response, setResponse] = React.useState<unknown>(null);
   const [verifyResult, setVerifyResult] = React.useState<string | null>(null);
   const [error, setError] = React.useState<Record<string, unknown> | string | number | null>(null);
@@ -144,7 +158,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
       if (!provider) return;
 
       const dataToSubmit = { ...data };
-      let values = dataToSubmit;
+      let values: object | readonly unknown[] = dataToSubmit;
       if (format) {
         const getCurrentAddress = async () =>
           (await provider.request({ method: 'eth_accounts' })) as [string];
@@ -159,7 +173,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
             }
           }
         }
-        values = format(dataToSubmit);
+        values = format(dataToSubmit as Record<string, string>);
       }
       try {
         const response = await provider.request({
@@ -313,6 +327,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
             </Code>
           </VStack>
         )}
+        {children}
       </CardBody>
     </Card>
   );

examples/testapp/src/components/RpcMethods/shortcut/connectionMethodShortcuts.ts

@@ -16,6 +16,6 @@ const walletConnectShortcuts: ShortcutType[] = [
   },
 ];
 
-export const connectionMethodShortcutsMap = {
+export const connectionMethodShortcutsMap: Record<string, ShortcutType[]> = {
   wallet_connect: walletConnectShortcuts,
 };

examples/testapp/src/pages/index.page.tsx

@@ -1,9 +1,11 @@
-import { Box, Container, Grid, Heading } from '@chakra-ui/react';
-import React, { useEffect } from 'react';
+import { Box, Container, Flex, Grid, GridItem, Heading, Switch, Text } from '@chakra-ui/react';
+import React, { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 import { EventListenersCard } from '../components/EventListeners/EventListenersCard';
 import { WIDTH_2XL } from '../components/Layout';
 import { MethodsSection } from '../components/MethodsSection/MethodsSection';
+import { RpcMethodCard } from '../components/RpcMethods/RpcMethodCard';
 import { connectionMethods } from '../components/RpcMethods/method/connectionMethods';
 import { ephemeralMethods } from '../components/RpcMethods/method/ephemeralMethods';
 import { experimentalMethods } from '../components/RpcMethods/method/experimentalMethods';
@@ -23,8 +25,58 @@ import { walletTxShortcutsMap } from '../components/RpcMethods/shortcut/walletTx
 import { SDKConfig } from '../components/SDKConfig/SDKConfig';
 import { useEIP1193Provider } from '../context/EIP1193ProviderContextProvider';
 
+const COOP_QUERY_KEY = 'coop';
+const COOP_QUERY_VALUE = 'same-origin';
+
+async function ensureCoopServiceWorkerReady(basePath: string) {
+  if (!('serviceWorker' in navigator)) {
+    return;
+  }
+
+  await navigator.serviceWorker.register(`${basePath}/coop-service-worker.js`);
+  await navigator.serviceWorker.ready;
+
+  if (navigator.serviceWorker.controller) {
+    return;
+  }
+
+  await new Promise<void>((resolve) => {
+    const timeout = window.setTimeout(resolve, 1000);
+    navigator.serviceWorker.addEventListener(
+      'controllerchange',
+      () => {
+        window.clearTimeout(timeout);
+        resolve();
+      },
+      { once: true }
+    );
+  });
+}
+
 export default function Home() {
   const { provider } = useEIP1193Provider();
+  const router = useRouter();
+  const simulateCoop = router.query[COOP_QUERY_KEY] === COOP_QUERY_VALUE;
+
+  const handleSimulateCoopToggle = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const url = new URL(window.location.href);
+
+      if (event.target.checked) {
+        url.searchParams.set(COOP_QUERY_KEY, COOP_QUERY_VALUE);
+        try {
+          await ensureCoopServiceWorkerReady(router.basePath);
+        } catch {
+          // Still navigate so the URL reflects the requested simulation state.
+        }
+      } else {
+        url.searchParams.delete(COOP_QUERY_KEY);
+      }
+
+      window.location.assign(url.toString());
+    },
+    [router.basePath]
+  );
   const [connected, setConnected] = React.useState(false);
   const [chainId, setChainId] = React.useState<number | undefined>(undefined);
   // This is for Extension compatibility, Extension with SDK3.9 does not emit connect event
@@ -75,11 +127,46 @@ export default function Home() {
       <Box mt={4}>
         <SDKConfig />
       </Box>
-      <MethodsSection
-        title="Wallet Connection"
-        methods={connectionMethods}
-        shortcutsMap={connectionMethodShortcutsMap}
-      />
+      <Box mt={4}>
+        <Heading size="md">Wallet Connection</Heading>
+        <Grid
+          mt={2}
+          templateColumns={{
+            base: '100%',
+            md: 'repeat(2, 50%)',
+            xl: 'repeat(3, 33%)',
+          }}
+          gap={2}
+        >
+          <GridItem w="100%" key="eth_requestAccounts">
+            <RpcMethodCard
+              method="eth_requestAccounts"
+              params={[]}
+              format={undefined}
+              shortcuts={connectionMethodShortcutsMap.eth_requestAccounts}
+            >
+              <Flex align="center" justify="space-between" mt={4} pt={3} borderTopWidth={1}>
+                <Text fontSize="sm" fontWeight="medium">
+                  Simulate COOP
+                </Text>
+                <Switch isChecked={simulateCoop} onChange={handleSimulateCoopToggle} />
+              </Flex>
+            </RpcMethodCard>
+          </GridItem>
+          {connectionMethods
+            .filter((rpc) => rpc.method !== 'eth_requestAccounts')
+            .map((rpc) => (
+              <GridItem w="100%" key={rpc.method}>
+                <RpcMethodCard
+                  method={rpc.method}
+                  params={rpc.params}
+                  format={rpc.format}
+                  shortcuts={connectionMethodShortcutsMap[rpc.method]}
+                />
+              </GridItem>
+            ))}
+        </Grid>
+      </Box>
       <MethodsSection
         title="Ephemeral Methods"
         methods={ephemeralMethods}