✅ E2E: Get EXA

components/SocketAssetSelector/index.tsx

@@ -13,13 +13,20 @@ type AssetOptionProps = {
   option?: boolean;
   optionSize?: number;
   selectedSize?: number;
+  'data-testid'?: string;
 };
 
-function AssetOption({ asset, option = false, optionSize = 20, selectedSize = 20 }: AssetOptionProps) {
+function AssetOption({
+  asset,
+  option = false,
+  optionSize = 20,
+  selectedSize = 20,
+  'data-testid': testId,
+}: AssetOptionProps) {
   const size = option ? optionSize : selectedSize;
 
   return (
-    <Box display="flex" gap={1} my={0.5} mx={option ? 0.5 : 0} alignItems="center" flex={1}>
+    <Box display="flex" gap={1} my={0.5} mx={option ? 0.5 : 0} alignItems="center" flex={1} data-testid={testId}>
       {asset.logoURI && (
         <Image
           src={asset.logoURI}
@@ -80,9 +87,10 @@ function SocketAssetSelector({ options, onChange, asset, disabled = false, onCli
       options={options}
       onChange={onChange}
       renderValue={<AssetOption asset={asset} />}
-      renderOption={(o: AssetBalance) => <AssetOption option asset={o} />}
+      renderOption={(o: AssetBalance) => <AssetOption option asset={o} data-testid={`get-exa-asset-${o.symbol}`} />}
       disabled={disabled}
       onClick={onClick}
+      data-testid="get-exa-asset"
     />
   );
 }

components/getEXA/ChainSelector.tsx

@@ -41,7 +41,7 @@ function ChainOption({ chain, option = false, optionSize = 17, selectedSize = 14
           }}
         />
       )}
-      <Typography fontWeight={600} fontSize={size} color="grey.900">
+      <Typography fontWeight={600} fontSize={size} color="grey.900" data-testid="get-exa-chain">
         {chain.name}
       </Typography>
     </Box>
@@ -71,7 +71,7 @@ const ChainSelector = ({ disabled }: { disabled?: boolean }) => {
       onChange={handleChainChange}
       renderValue={<ChainOption chain={chain} />}
       renderOption={(o: string) => <ChainOption option chain={chains.find(({ name }) => o === name)} />}
-      data-testid="modal-asset-selector"
+      data-testid="get-exa-chain"
       disabled={disabled}
     />
   );

components/getEXA/ReviewRoute.tsx

@@ -23,7 +23,7 @@ const ReviewRoute = () => {
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap={3}>
+    <Box display="flex" flexDirection="column" gap={3} data-testid="get-exa-view-review">
       <Typography fontSize={19} fontWeight={700}>
         {t('Transaction Summary')}
       </Typography>
@@ -177,11 +177,22 @@ const ReviewRoute = () => {
 
       {txError?.status && <ModalAlert message={txError.message} variant={txError.variant} mb={1} />}
       {txStep === TXStep.CONFIRM || txStep === TXStep.CONFIRM_PENDING ? (
-        <LoadingButton variant="contained" onClick={socketSubmit} loading={txStep === TXStep.CONFIRM_PENDING}>
+        <LoadingButton
+          variant="contained"
+          onClick={socketSubmit}
+          loading={txStep === TXStep.CONFIRM_PENDING}
+          data-testid="get-exa-submit"
+        >
           {t('Confirm')}
         </LoadingButton>
       ) : (
-        <LoadingButton fullWidth onClick={approve} variant="contained" loading={txStep === TXStep.APPROVE_PENDING}>
+        <LoadingButton
+          fullWidth
+          onClick={approve}
+          variant="contained"
+          loading={txStep === TXStep.APPROVE_PENDING}
+          data-testid="get-exa-approve"
+        >
           {t('Approve')}
         </LoadingButton>
       )}

components/getEXA/RouteSteps.tsx

@@ -54,7 +54,7 @@ const RouteSteps = () => {
   ];
 
   return (
-    <Box display="flex" alignItems="center" gap={1}>
+    <Box display="flex" alignItems="center" gap={1} data-testid="get-exa-route">
       {displaySteps.map((step, index) => (
         <>
           {index !== 0 && (

components/getEXA/SelectRoute.tsx

@@ -53,7 +53,7 @@ const SelectRoute = () => {
 
   return (
     <>
-      <Box display={'flex'} gap={2} flexDirection="column">
+      <Box display={'flex'} gap={2} flexDirection="column" data-testid="get-exa-view-route">
         <Box p={[2, 2, 3]} flexDirection="column" bgcolor="grey.100" borderRadius={1}>
           <Typography color="grey.400" fontWeight={500} fontSize={14} pb={1}>
             {t('Pay with')}:
@@ -91,6 +91,9 @@ const SelectRoute = () => {
               placeholder="0.0"
               value={qtyIn || ''}
               onChange={({ target: { value } }) => setQtyIn(value)}
+              inputProps={{
+                'data-testid': 'get-exa-input',
+              }}
             />
             {asset ? (
               <Typography
@@ -105,6 +108,7 @@ const SelectRoute = () => {
                     cursor: 'pointer',
                   },
                 }}
+                data-testid="get-exa-balance"
               >
                 {t('Balance')}: {formatNumber(asset.amount, asset.symbol)}
               </Typography>
@@ -203,7 +207,6 @@ const SelectRoute = () => {
             onClick={() => switchNetwork?.(chain?.chainId)}
             variant="contained"
             loading={switchIsLoading}
-            data-testid="modal-switch-network"
           >
             {t('Please switch to {{network}} network', { network: chain?.name })}
           </LoadingButton>
@@ -213,6 +216,7 @@ const SelectRoute = () => {
             variant="contained"
             onClick={handleSubmit}
             loading={txStep === TXStep.CONFIRM_PENDING}
+            data-testid={nativeSwap ? 'get-exa-submit' : 'get-exa-review'}
           >
             {insufficientBalance
               ? t('Insufficient {{symbol}} balance', { symbol: asset?.symbol })

components/getEXA/TXStatus.tsx

@@ -63,10 +63,10 @@ const SpinnerThing = ({
         />
       )}
       <Box display="flex" flexDirection="column" alignItems="center">
-        <Typography variant="h6" fontSize="16px" data-testid="modal-transaction-status">
-          {isLoading && t('Transaction processing...')}
-          {status === 'success' && t('Transaction Success')}
-          {status === 'error' && t('Transaction Error')}
+        <Typography variant="h6" fontSize="16px" data-testid="transaction-status">
+          {isLoading && t('Processing transaction...')}
+          {status === 'success' && t('Transaction success')}
+          {status === 'error' && t('Transaction error')}
         </Typography>
         <Box display="flex" flexDirection="column" alignItems="center" gap="8px" pt={1}>
           <Button
@@ -118,6 +118,7 @@ const BridgeTXStatus = () => {
       position="relative"
       justifyContent="space-around"
       alignItems="center"
+      data-testid="get-exa-view-tx-status"
     >
       <SpinnerThing {...(isBridge ? bridgeTXProps : swapTXProps)} />
     </Box>

contexts/GetEXAContext.tsx

@@ -207,7 +207,7 @@ export const GetEXAProvider: FC<PropsWithChildren> = ({ children }) => {
       const approvePermit2 = !(await isPermit(asset.address));
 
       if (await isMultiSig(walletAddress)) {
-        const allowance = await erc20.read.allowance([walletAddress, swapper?.address], opts);
+        const allowance = await erc20.read.allowance([walletAddress, swapper.address], opts);
 
         if (allowance < minimumApprovalAmount) {
           const args = [swapper.address, minimumApprovalAmount] as const;
@@ -479,10 +479,12 @@ export const GetEXAProvider: FC<PropsWithChildren> = ({ children }) => {
         data,
         value: parseEther(qtyIn),
       });
+
+      setScreen(Screen.TX_STATUS);
+
       setTX({ status: 'processing', hash: txHash_ });
       const { status, transactionHash } = await waitForTransaction({ hash: txHash_ });
       setTX({ status: status ? 'success' : 'error', hash: transactionHash });
-      setScreen(Screen.TX_STATUS);
     } catch (err) {
       setTXError({ status: true, message: handleOperationError(err) });
     } finally {

e2e/common/balance.ts

@@ -33,5 +33,13 @@ export default function ({ test, publicClient }: CommonTest & { publicClient: Pu
     });
   };
 
-  return { check };
+  const exists = async ({ address, symbol }: Pick<BalanceParams, 'address' | 'symbol'>) => {
+    await test.step(`checks that ${address} has some ${symbol} balance`, async () => {
+      const erc20Contract = await erc20(symbol, { publicClient });
+      const balance = await erc20Contract.read.balanceOf([address]);
+      expect(balance).toBeGreaterThan(0n);
+    });
+  };
+
+  return { check, exists };
 }

e2e/fixture/base.ts

@@ -13,6 +13,7 @@ import { optimism, type Chain } from 'viem/chains';
 
 import { type Tenderly, tenderly } from '../utils/tenderly';
 import actions, { type Actions } from './actions';
+import socket, { type Socket } from './socket';
 import graph, { type Graph } from './graph';
 import time, { type Time } from './time';
 
@@ -39,6 +40,7 @@ const defaultTestParams = {
 } as const;
 
 type Web2 = {
+  socket: Socket;
   graph: Graph;
   time: Time;
 };
@@ -66,7 +68,7 @@ const base = (params: TestParams = defaultTestParams) =>
   test.extend<TestProps>({
     bypassCSP: true,
     web2: async ({ page }, use) => {
-      await use({ graph: graph(page), time: time(page) });
+      await use({ graph: graph(page), time: time(page), socket: socket(page) });
     },
     web3: async ({ page }, use) => {
       const { privateKey, options } = {

e2e/fixture/socket.ts

@@ -0,0 +1,55 @@
+import { type Page } from '@playwright/test';
+import { type Address } from 'viem';
+
+import { chain } from './base';
+
+function socket(page: Page) {
+  const assets = {
+    ETH: {
+      chainId: chain.id,
+      address: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+      name: 'Ethereum',
+      symbol: 'ETH',
+      decimals: 18,
+      chainAgnosticId: null,
+      icon: 'https://maticnetwork.github.io/polygon-token-assets/assets/eth.svg',
+      logoURI: 'https://maticnetwork.github.io/polygon-token-assets/assets/eth.svg',
+    },
+    OP: {
+      chainId: chain.id,
+      address: '0x4200000000000000000000000000000000000042',
+      name: 'Optimism',
+      symbol: 'OP',
+      decimals: 18,
+      chainAgnosticId: null,
+      icon: 'https://optimistic.etherscan.io/token/images/optimism_32.png',
+      logoURI: 'https://optimistic.etherscan.io/token/images/optimism_32.png',
+    },
+  };
+
+  type Balance = {
+    account: Address;
+    balances: {
+      symbol: 'ETH' | 'OP';
+      amount: number;
+    }[];
+  };
+
+  const balances = async (params: Balance) => {
+    await page.route(/api\.socket\.tech\/v2\/balances/, async (route) => {
+      const json = {
+        success: true,
+        result: params.balances.map(({ symbol, amount }) => ({ ...assets[symbol], amount })),
+      };
+      await route.fulfill({ json });
+    });
+  };
+
+  return {
+    balances,
+  };
+}
+
+export type Socket = ReturnType<typeof socket>;
+
+export default socket;