Add tests for native sDai deposit

packages/app/.env.playwright

@@ -4,6 +4,6 @@ VITE_PLAYWRIGHT=true
 VITE_FEATURE_CONFIGURABLE_SLIPPAGE=1
 
 # development
-VITE_DEV_NATIVE_ROUTES=0
+VITE_DEV_NATIVE_ROUTES=1
 
 VITE_BLOCK_ANALITICA_API_URL=https://spark-api.blockanalitica.com/api

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/MakerTransactionOverview.tsx

@@ -23,33 +23,28 @@ export function MakerTransactionOverview({ txOverview, selectedToken }: MakerTra
   assert(route.length > 0, 'Route must have at least one item')
   const outcome = route.at(-1)!
 
-  let dataTestIdIndex = 0
-
   return (
     <DialogPanel>
       <DialogPanelTitle>Transaction overview</DialogPanelTitle>
-      <TransactionOverviewDetailsItem
-        label="APY"
-        data-testid={testIds.dialog.depositSavings.transactionDetailsRow(dataTestIdIndex++)}
-      >
+      <TransactionOverviewDetailsItem label="APY">
         <APYDetails APY={APY} daiEarnRate={daiEarnRate} />
       </TransactionOverviewDetailsItem>
-      <TransactionOverviewDetailsItem
-        label="Route"
-        data-testid={testIds.dialog.depositSavings.transactionDetailsRow(dataTestIdIndex++)}
-      >
+      <TransactionOverviewDetailsItem label="Route">
         <div className="flex flex-col items-end gap-2 md:flex-row">
           {route.map((item, index) => (
-            <RouteItem key={item.token.symbol} item={item} isLast={index === route.length - 1} />
+            <RouteItem key={item.token.symbol} item={item} index={index} isLast={index === route.length - 1} />
           ))}
         </div>
-        <MakerBadge token={makerBadgeToken} />
+        <MakerBadge
+          token={makerBadgeToken}
+          data-testid={testIds.dialog.savings.nativeRouteTransactionOverview.makerBadge}
+        />
       </TransactionOverviewDetailsItem>
-      <TransactionOverviewDetailsItem
-        label="Outcome"
-        data-testid={testIds.dialog.depositSavings.transactionDetailsRow(dataTestIdIndex++)}
-      >
-        <TransactionOutcome outcome={outcome} />
+      <TransactionOverviewDetailsItem label="Outcome">
+        <TransactionOutcome
+          outcome={outcome}
+          data-testid={testIds.dialog.savings.nativeRouteTransactionOverview.outcome}
+        />
       </TransactionOverviewDetailsItem>
     </DialogPanel>
   )

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/components/APYDetails.tsx

@@ -1,6 +1,7 @@
 import { formatPercentage } from '@/domain/common/format'
 import { NormalizedUnitNumber, Percentage } from '@/domain/types/NumericValues'
 import { USD_MOCK_TOKEN } from '@/domain/types/Token'
+import { testIds } from '@/ui/utils/testIds'
 
 export interface APYDetailsProps {
   APY: Percentage
@@ -10,8 +11,13 @@ export interface APYDetailsProps {
 export function APYDetails({ APY, daiEarnRate }: APYDetailsProps) {
   return (
     <div className="flex flex-col items-end gap-0.5">
-      <div>{formatPercentage(APY)}</div>
-      <div className="text-basics-dark-grey text-sm">Earn ~{USD_MOCK_TOKEN.formatUSD(daiEarnRate)} DAI per year</div>
+      <div data-testid={testIds.dialog.savings.nativeRouteTransactionOverview.apy.value}>{formatPercentage(APY)}</div>
+      <div
+        className="text-basics-dark-grey text-sm"
+        data-testid={testIds.dialog.savings.nativeRouteTransactionOverview.apy.description}
+      >
+        Earn ~{USD_MOCK_TOKEN.format(daiEarnRate, { style: 'auto' })} DAI per year
+      </div>
     </div>
   )
 }

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/components/MakerBadge.tsx

@@ -4,11 +4,15 @@ import { Info } from '@/ui/molecules/info/Info'
 
 export interface MakerBadgeProps {
   token: Token
+  'data-testid'?: string
 }
 
-export function MakerBadge({ token }: MakerBadgeProps) {
+export function MakerBadge({ token, 'data-testid': dataTestId }: MakerBadgeProps) {
   return (
-    <div className="flex flex-row items-center gap-1.5 rounded-lg bg-emerald-300/10 px-2.5 py-1.5 text-emerald-400 text-sm">
+    <div
+      className="flex flex-row items-center gap-1.5 rounded-lg bg-emerald-300/10 px-2.5 py-1.5 text-emerald-400 text-sm"
+      data-testid={dataTestId}
+    >
       <img src={assets.makerLogo} className="h-5 w-5" />
       <span>
         <span className="hidden font-medium md:inline"> Powered by Maker. </span>

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/components/RouteItem.tsx

@@ -1,19 +1,24 @@
 import { USD_MOCK_TOKEN } from '@/domain/types/Token'
 import { assets } from '@/ui/assets'
 import { cn } from '@/ui/utils/style'
+import { testIds } from '@/ui/utils/testIds'
 import { RouteItem as RouteItemType } from '../../../types'
 
 export interface RouteItemProps {
   item: RouteItemType
+  index: number
   isLast: boolean
 }
-export function RouteItem({ item, isLast }: RouteItemProps) {
+export function RouteItem({ item, index, isLast }: RouteItemProps) {
   return (
     <div className={cn('grid grid-cols-1 items-center gap-x-2 gap-y-0.5', !isLast && 'md:grid-cols-[auto_auto]')}>
-      <div>
+      <div data-testid={testIds.dialog.savings.nativeRouteTransactionOverview.routeItem.tokenWithAmount(index)}>
         {item.token.format(item.value, { style: 'auto' })} {item.token.symbol}
       </div>
-      <div className="justify-self-end text-basics-dark-grey text-sm md:order-last">
+      <div
+        className="justify-self-end text-basics-dark-grey text-sm md:order-last"
+        data-testid={testIds.dialog.savings.nativeRouteTransactionOverview.routeItem.tokenUsdValue(index)}
+      >
         {USD_MOCK_TOKEN.formatUSD(item.usdValue)}
       </div>
       {!isLast && (

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/components/TransactionOutcome.tsx

@@ -3,11 +3,12 @@ import { RouteItem } from '../../../types'
 
 export interface TransactionOutcomeProps {
   outcome: RouteItem
+  'data-testid'?: string
 }
 
-export function TransactionOutcome({ outcome }: TransactionOutcomeProps) {
+export function TransactionOutcome({ outcome, 'data-testid': dataTestId }: TransactionOutcomeProps) {
   return (
-    <div className="flex flex-col items-end gap-0.5 md:block">
+    <div className="flex flex-col items-end gap-0.5 md:block" data-testid={dataTestId}>
       <span>
         {outcome.token.format(outcome.value, { style: 'auto' })} {outcome.token.symbol}
       </span>

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/components/TransactionOverviewDetailsItem.tsx

@@ -3,16 +3,11 @@ import { ReactNode } from 'react'
 export interface TransactionOverviewDetailsItemProps {
   label: string
   children: ReactNode
-  'data-testid'?: string
 }
 
-export function TransactionOverviewDetailsItem({
-  label,
-  children,
-  'data-testid': dataTestId,
-}: TransactionOverviewDetailsItemProps) {
+export function TransactionOverviewDetailsItem({ label, children }: TransactionOverviewDetailsItemProps) {
   return (
-    <div className="flex justify-between border-b py-4 last:border-0 last:pb-0" data-testid={dataTestId}>
+    <div className="flex justify-between border-b py-4 last:border-0 last:pb-0">
       <div className="text-basics-black">{label}</div>
       <div className="flex flex-col items-end gap-3.5">{children}</div>
     </div>

packages/app/src/features/dialogs/savings/deposit/SavingsDepositDialog.PageObject.ts

@@ -45,6 +45,44 @@ export class SavingsDepositDialogPageObject extends DialogPageObject {
     }
   }
 
+  async expectNativeRouteTransactionOverview(transactionOverview: NativeRouteTransactionOverview): Promise<void> {
+    const panel = this.locatePanelByHeader('Transaction overview')
+    await expect(panel).toBeVisible()
+    const txOverviewTestIds = testIds.dialog.savings.nativeRouteTransactionOverview
+
+    const apyValue = panel.getByTestId(txOverviewTestIds.apy.value)
+    const apyDescription = panel.getByTestId(txOverviewTestIds.apy.description)
+    await expect(apyValue).toContainText(transactionOverview.apy.value)
+    await expect(apyDescription).toContainText(transactionOverview.apy.description)
+
+    for (const [index, { tokenAmount: tokenWithAmount, tokenUsdValue }] of transactionOverview.routeItems.entries()) {
+      const routeItem = panel.getByTestId(txOverviewTestIds.routeItem.tokenWithAmount(index))
+      const routeItemUSD = panel.getByTestId(txOverviewTestIds.routeItem.tokenUsdValue(index))
+      await expect(routeItem).toContainText(tokenWithAmount)
+      await expect(routeItemUSD).toContainText(tokenUsdValue)
+    }
+
+    const makerBadge = panel.getByTestId(txOverviewTestIds.makerBadge)
+    await expect(makerBadge).toBeVisible()
+
+    const outcome = panel.getByTestId(txOverviewTestIds.outcome)
+    await expect(outcome).toContainText(transactionOverview.outcome)
+  }
+
+  async expectToUseNativeSDaiAction(nativeSDaiDepositParams: {
+    title: string
+    type: 'deposit' | 'withdraw'
+  }): Promise<void> {
+    const testId =
+      nativeSDaiDepositParams.type === 'deposit'
+        ? testIds.actions.flavours.nativeSDaiDepositActionRow.wrapper
+        : testIds.actions.flavours.nativeSDaiWithdrawActionRow.wrapper
+    const depositRow = this.locatePanelByHeader('Actions').getByTestId(testId)
+
+    await expect(depositRow).toBeVisible()
+    await expect(depositRow).toContainText(nativeSDaiDepositParams.title)
+  }
+
   async expectToUseLifiSwap(lifiSwapParams: LifiSwapParams): Promise<void> {
     const exchangeRow = this.locatePanelByHeader('Actions').getByTestId(
       testIds.actions.flavours.exchangeActionRow.wrapper,
@@ -82,3 +120,15 @@ interface LifiSwapParams {
 }
 
 type TransactionOverview = [string, string][]
+
+interface NativeRouteTransactionOverview {
+  apy: {
+    value: string
+    description: string
+  }
+  routeItems: {
+    tokenAmount: string
+    tokenUsdValue: string
+  }[]
+  outcome: string
+}

packages/app/src/features/dialogs/savings/deposit/e2e/DepositDAI.test-e2e.ts

@@ -0,0 +1,71 @@
+import { ActionsPageObject } from '@/features/actions/ActionsContainer.PageObject'
+import { SavingsPageObject } from '@/pages/Savings.PageObject'
+import { DEFAULT_BLOCK_NUMBER } from '@/test/e2e/constants'
+import { setup } from '@/test/e2e/setup'
+import { setupFork } from '@/test/e2e/setupFork'
+import { test } from '@playwright/test'
+import { mainnet } from 'viem/chains'
+import { SavingsDepositDialogPageObject } from '../SavingsDepositDialog.PageObject'
+
+test.describe('Deposit DAI on Mainnet', () => {
+  const fork = setupFork({ blockNumber: DEFAULT_BLOCK_NUMBER, chainId: mainnet.id })
+  let savingsPage: SavingsPageObject
+  let depositDialog: SavingsDepositDialogPageObject
+
+  test.beforeEach(async ({ page }) => {
+    await setup(page, fork, {
+      initialPage: 'savings',
+      account: {
+        type: 'connected',
+        assetBalances: {
+          ETH: 1,
+          DAI: 10_000,
+        },
+      },
+    })
+
+    savingsPage = new SavingsPageObject(page)
+    await savingsPage.clickDepositButtonAction('DAI')
+
+    depositDialog = new SavingsDepositDialogPageObject(page)
+    await depositDialog.fillAmountAction(10_000)
+  })
+
+  test('uses native sDai deposit', async ({ page, browser }) => {
+    await depositDialog.expectToUseNativeSDaiAction({
+      title: 'Wrap DAI into sDAI',
+      type: 'deposit',
+    })
+  })
+
+  test('displays transaction overview', async () => {
+    await depositDialog.expectNativeRouteTransactionOverview({
+      apy: {
+        value: '5.00%',
+        description: 'Earn ~$500.00 DAI per year',
+      },
+      routeItems: [
+        {
+          tokenAmount: '10,000.00 DAI',
+          tokenUsdValue: '$10,000.00',
+        },
+        {
+          tokenAmount: '9,332.66 sDAI',
+          tokenUsdValue: '$10,000.00',
+        },
+      ],
+      outcome: '9,332.66 sDAI worth $10,000.00',
+    })
+  })
+
+  test('executes deposit', async () => {
+    const actionsContainer = new ActionsPageObject(depositDialog.locatePanelByHeader('Actions'))
+    await actionsContainer.acceptAllActionsAction(2)
+
+    await depositDialog.expectSuccessPage()
+    await depositDialog.clickBackToSavingsButton()
+
+    await savingsPage.expectSavingsBalance({ sDaiBalance: '9,332.66 sDAI', estimatedDaiValue: '10,000' })
+    await savingsPage.expectCashInWalletAssetBalance('DAI', '-')
+  })
+})

packages/app/src/ui/utils/testIds.ts

@@ -53,6 +53,20 @@ export const testIds = makeTestIds({
     },
     success: true,
     acknowledgeRiskSwitch: true,
+    savings: {
+      nativeRouteTransactionOverview: {
+        apy: {
+          value: true,
+          description: true,
+        },
+        routeItem: {
+          tokenWithAmount: (index: number) => index,
+          tokenUsdValue: (index: number) => index,
+        },
+        outcome: true,
+        makerBadge: true,
+      },
+    },
     depositSavings: {
       transactionDetailsRow: (index: number) => index,
     },
@@ -76,6 +90,9 @@ export const testIds = makeTestIds({
       nativeSDaiDepositActionRow: {
         wrapper: true,
       },
+      nativeSDaiWithdrawActionRow: {
+        wrapper: true,
+      },
     },
   },
   navbar: {