Add E2E Test Playground with SCW Release Test Suite

examples/testapp/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@base-org/account": "workspace:*",
+    "@base-org/account-npm": "npm:@base-org/account@latest",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",

examples/testapp/src/components/Layout.tsx

@@ -20,7 +20,7 @@ import {
 import NextLink from 'next/link';
 import React, { useMemo } from 'react';
 import { useConfig } from '../context/ConfigContextProvider';
-import { scwUrls, sdkVersions } from '../store/config';
+import { scwUrls } from '../store/config';
 import { cleanupSDKLocalStorage } from '../utils/cleanupSDKLocalStorage';
 type LayoutProps = {
   children: React.ReactNode;
@@ -38,10 +38,11 @@ const PAGES = [
   '/pay-playground',
   '/subscribe-playground',
   '/prolink-playground',
+  '/e2e-test',
 ];
 
 export function Layout({ children }: LayoutProps) {
-  const { version, setSDKVersion, scwUrl, setScwUrlAndSave } = useConfig();
+  const { scwUrl, setScwUrlAndSave } = useConfig();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
   const isSmallScreen = useBreakpointValue({ base: true, xl: false });
@@ -54,24 +55,6 @@ export function Layout({ children }: LayoutProps) {
   const configs = useMemo(() => {
     return (
       <>
-        <Menu>
-          <MenuButton colorScheme="telegram" as={Button} rightIcon={<ChevronDownIcon />}>
-            {`SDK: ${version}`}
-          </MenuButton>
-          <MenuList>
-            {sdkVersions.map((v) => (
-              <MenuItem
-                color={'MenuText'}
-                key={v}
-                icon={v === version ? <CheckIcon /> : null}
-                onClick={() => setSDKVersion(v)}
-              >
-                {v}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </Menu>
-
         <Menu>
           <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
             {`Env: ${scwUrl}`}
@@ -91,7 +74,7 @@ export function Layout({ children }: LayoutProps) {
         </Menu>
       </>
     );
-  }, [version, setSDKVersion, scwUrl, setScwUrlAndSave]);
+  }, [scwUrl, setScwUrlAndSave]);
 
   const handleGoToHome = () => {
     window.location.href = '/';

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

@@ -77,7 +77,9 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
         )?.data.chain ?? mainnet;
 
       if (method.includes('wallet_sign')) {
+        // biome-ignore lint/suspicious/noExplicitAny: old code, refactor soon
         const type = data.type || (data.request as any).type;
+        // biome-ignore lint/suspicious/noExplicitAny: old code, refactor soon
         const walletSignData = data.data || (data.request as any).data;
         let result: string | null = null;
         if (type === '0x01') {

examples/testapp/src/components/UserInteractionModal.tsx

@@ -0,0 +1,102 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { useEffect, useRef } from 'react';
+
+interface UserInteractionModalProps {
+  isOpen: boolean;
+  testName: string;
+  onContinue: () => void;
+  onCancel: () => void;
+}
+
+export function UserInteractionModal({
+  isOpen,
+  testName,
+  onContinue,
+  onCancel,
+}: UserInteractionModalProps) {
+  const continueButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Focus the continue button when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        continueButtonRef.current?.focus();
+      }, 100);
+    }
+  }, [isOpen]);
+
+  // Handle Enter key to continue
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onContinue();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onContinue, onCancel]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onCancel}
+      isCentered
+      closeOnOverlayClick={false}
+      closeOnEsc={true}
+    >
+      <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(10px)" />
+      <ModalContent>
+        <ModalHeader>User Interaction Required</ModalHeader>
+        <ModalBody>
+          <VStack spacing={4} align="stretch">
+            <Text>The next test requires user interaction to prevent popup blockers:</Text>
+            <Text fontWeight="bold" fontSize="lg" color="purple.500">
+              {testName}
+            </Text>
+            <Box
+              bg="purple.50"
+              borderWidth="2px"
+              borderColor="purple.400"
+              borderRadius="md"
+              p={4}
+              textAlign="center"
+            >
+              <Text fontWeight="bold" fontSize="xl" color="purple.600">
+                [Press Enter to Continue]
+              </Text>
+            </Box>
+            <Text fontSize="sm" color="gray.600">
+              Or click "Continue Test" to proceed, or "Cancel Test" to stop the test suite.
+            </Text>
+          </VStack>
+        </ModalBody>
+        <ModalFooter gap={3}>
+          <Button variant="ghost" onClick={onCancel}>
+            Cancel Test
+          </Button>
+          <Button ref={continueButtonRef} colorScheme="purple" onClick={onContinue}>
+            Continue Test
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

examples/testapp/src/hooks/useUserInteraction.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+interface UseUserInteractionReturn {
+  isModalOpen: boolean;
+  currentTestName: string;
+  requestUserInteraction: (testName: string, skipModal?: boolean) => Promise<void>;
+  handleContinue: () => void;
+  handleCancel: () => void;
+}
+
+export function useUserInteraction(): UseUserInteractionReturn {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentTestName, setCurrentTestName] = useState('');
+  const [resolver, setResolver] = useState<{
+    resolve: () => void;
+    reject: (error: Error) => void;
+  } | null>(null);
+
+  const requestUserInteraction = (testName: string, skipModal = false): Promise<void> => {
+    // If skipModal is true, immediately resolve without showing the modal
+    if (skipModal) {
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+      setCurrentTestName(testName);
+      setIsModalOpen(true);
+      setResolver({ resolve, reject });
+    });
+  };
+
+  const handleContinue = () => {
+    setIsModalOpen(false);
+    resolver?.resolve();
+    setResolver(null);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+    resolver?.reject(new Error('Test cancelled by user'));
+    setResolver(null);
+  };
+
+  return {
+    isModalOpen,
+    currentTestName,
+    requestUserInteraction,
+    handleContinue,
+    handleCancel,
+  };
+}

examples/testapp/src/pages/add-sub-account/components/SendCalls.tsx

@@ -35,7 +35,7 @@ export function SendCalls({
             version: '1',
             capabilities: {
               paymasterService: {
-                url: 'https://api.developer.coinbase.com/rpc/v1/base-sepolia/S-fOd2n2Oi4fl4e1Crm83XeDXZ7tkg8O',
+                url: 'https://example.paymaster.com',
               },
             },
           },

examples/testapp/src/pages/add-sub-account/components/SpendPermissions.tsx

@@ -78,7 +78,7 @@ export function SpendPermissions({
             ],
             capabilities: {
               paymasterService: {
-                url: 'https://api.developer.coinbase.com/rpc/v1/base-sepolia/S-fOd2n2Oi4fl4e1Crm83XeDXZ7tkg8O',
+                url: 'https://example.paymaster.com',
               },
             },
           },

examples/testapp/src/pages/auto-sub-account/index.page.tsx

@@ -472,7 +472,7 @@ export default function AutoSubAccount() {
               ],
               capabilities: {
                 paymasterService: {
-                  url: 'https://api.developer.coinbase.com/rpc/v1/base-sepolia/S-fOd2n2Oi4fl4e1Crm83XeDXZ7tkg8O',
+                  url: 'https://example.paymaster.com',
                 },
               },
             },
@@ -565,7 +565,7 @@ export default function AutoSubAccount() {
               ],
               capabilities: {
                 paymasterService: {
-                  url: 'https://api.developer.coinbase.com/rpc/v1/base-sepolia/S-fOd2n2Oi4fl4e1Crm83XeDXZ7tkg8O',
+                  url: 'https://example.paymaster.com',
                 },
               },
             },