Organize maker tx overview components

packages/app/src/features/actions/flavours/native-sdai-deposit/NativeSDaiDepositActionRow.tsx

@@ -1,6 +1,7 @@
 import { assets, getTokenImage } from '@/ui/assets'
 
 import { IconStack } from '@/ui/molecules/icon-stack/IconStack'
+import { testIds } from '@/ui/utils/testIds'
 import { ActionRow } from '../../components/action-row/ActionRow'
 import { UpDownMarker } from '../../components/action-row/UpDownMarker'
 import { ActionRowBaseProps } from '../../components/action-row/types'
@@ -24,7 +25,7 @@ export function NativeSDaiDepositActionRow({
   const successMessage = `Wrapped ${fromToken.format(action.value, { style: 'auto' })} ${fromToken.symbol}!`
 
   return (
-    <ActionRow>
+    <ActionRow data-testid={testIds.actions.flavours.nativeSDaiDepositActionRow.wrapper}>
       <ActionRow.Index index={index} />
 
       <ActionRow.Icon path={assets.actions.exchange} actionStatus={status} />

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

@@ -0,0 +1,83 @@
+import { Token } from '@/domain/types/Token'
+import { DialogPanel } from '@/features/dialogs/common/components/DialogPanel'
+import { DialogPanelTitle } from '@/features/dialogs/common/components/DialogPanelTitle'
+import { assets } from '@/ui/assets'
+import { testIds } from '@/ui/utils/testIds'
+import { assert } from '@/utils/assert'
+import { SavingsDialogTxOverviewMaker } from '../../types'
+import { APYDetails, MakerBadge, RouteItem, TransactionOutcome, TransactionOverviewDetailsItem } from './components'
+
+export interface MakerTransactionOverviewProps {
+  txOverview: SavingsDialogTxOverviewMaker
+  selectedToken: Token
+}
+
+export function MakerTransactionOverview({ txOverview, selectedToken }: MakerTransactionOverviewProps) {
+  if (txOverview.status !== 'success') {
+    return (
+      <MakerTransactionOverviewPlaceholder isLoading={txOverview.status === 'loading'} badgeToken={selectedToken} />
+    )
+  }
+  const { APY, daiEarnRate, route, makerBadgeToken } = txOverview
+
+  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++)}
+      >
+        <APYDetails APY={APY} daiEarnRate={daiEarnRate} />
+      </TransactionOverviewDetailsItem>
+      <TransactionOverviewDetailsItem
+        label="Route"
+        data-testid={testIds.dialog.depositSavings.transactionDetailsRow(dataTestIdIndex++)}
+      >
+        <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} />
+          ))}
+        </div>
+        <MakerBadge token={makerBadgeToken} />
+      </TransactionOverviewDetailsItem>
+      <TransactionOverviewDetailsItem
+        label="Outcome"
+        data-testid={testIds.dialog.depositSavings.transactionDetailsRow(dataTestIdIndex++)}
+      >
+        <TransactionOutcome outcome={outcome} />
+      </TransactionOverviewDetailsItem>
+    </DialogPanel>
+  )
+}
+
+interface MakerTransactionOverviewPlaceholder {
+  isLoading: boolean
+  badgeToken: Token
+}
+function MakerTransactionOverviewPlaceholder({ isLoading, badgeToken }: MakerTransactionOverviewPlaceholder) {
+  const placeholder = isLoading ? (
+    <img src={assets.threeDots} alt="loader" width={20} height={5} data-chromatic="ignore" />
+  ) : (
+    '-'
+  )
+  return (
+    <DialogPanel>
+      <DialogPanelTitle>Transaction overview</DialogPanelTitle>
+      <TransactionOverviewDetailsItem label="APY">
+        <div className="min-h-[46px]">{placeholder}</div>
+      </TransactionOverviewDetailsItem>
+      <TransactionOverviewDetailsItem label="Route">
+        <div className="flex min-h-[92px] flex-col items-end justify-between">
+          <div>{placeholder}</div>
+          <MakerBadge token={badgeToken} />
+        </div>
+      </TransactionOverviewDetailsItem>
+      <TransactionOverviewDetailsItem label="Outcome">{placeholder}</TransactionOverviewDetailsItem>
+    </DialogPanel>
+  )
+}

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

@@ -0,0 +1,17 @@
+import { formatPercentage } from '@/domain/common/format'
+import { NormalizedUnitNumber, Percentage } from '@/domain/types/NumericValues'
+import { USD_MOCK_TOKEN } from '@/domain/types/Token'
+
+export interface APYDetailsProps {
+  APY: Percentage
+  daiEarnRate: NormalizedUnitNumber
+}
+
+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>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { Token } from '@/domain/types/Token'
+import { assets } from '@/ui/assets'
+import { Info } from '@/ui/molecules/info/Info'
+
+export interface MakerBadgeProps {
+  token: Token
+}
+
+export function MakerBadge({ token }: 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">
+      <img src={assets.makerLogo} className="h-5 w-5" />
+      <span>
+        <span className="hidden font-medium md:inline"> Powered by Maker. </span>
+        <span className="font-light">No slippage & fees for {token.symbol}.</span>
+      </span>
+      <Info className="text-inherit">The transaction uses Maker infrastructure without any third-parties.</Info>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { USD_MOCK_TOKEN } from '@/domain/types/Token'
+import { assets } from '@/ui/assets'
+import { cn } from '@/ui/utils/style'
+import { RouteItem as RouteItemType } from '../../../types'
+
+export interface RouteItemProps {
+  item: RouteItemType
+  isLast: boolean
+}
+export function RouteItem({ item, 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>
+        {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">
+        {USD_MOCK_TOKEN.formatUSD(item.usdValue)}
+      </div>
+      {!isLast && (
+        <img src={assets.arrowRight} className="mt-1.5 h-3.5 w-3.5 rotate-90 justify-self-end md:mt-0 md:rotate-0" />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { USD_MOCK_TOKEN } from '@/domain/types/Token'
+import { RouteItem } from '../../../types'
+
+export interface TransactionOutcomeProps {
+  outcome: RouteItem
+}
+
+export function TransactionOutcome({ outcome }: TransactionOutcomeProps) {
+  return (
+    <div className="flex flex-col items-end gap-0.5 md:block">
+      <span>
+        {outcome.token.format(outcome.value, { style: 'auto' })} {outcome.token.symbol}
+      </span>
+      <span> worth </span>
+      <span className="font-semibold">{USD_MOCK_TOKEN.formatUSD(outcome.usdValue)}</span>
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface TransactionOverviewDetailsItemProps {
+  label: string
+  children: ReactNode
+  'data-testid'?: string
+}
+
+export function TransactionOverviewDetailsItem({
+  label,
+  children,
+  'data-testid': dataTestId,
+}: TransactionOverviewDetailsItemProps) {
+  return (
+    <div className="flex justify-between border-b py-4 last:border-0 last:pb-0" data-testid={dataTestId}>
+      <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/common/components/maker-transaction-overview/components/index.ts

@@ -0,0 +1,5 @@
+export { APYDetails } from './APYDetails'
+export { MakerBadge } from './MakerBadge'
+export { TransactionOutcome } from './TransactionOutcome'
+export { TransactionOverviewDetailsItem } from './TransactionOverviewDetailsItem'
+export { RouteItem } from './RouteItem'

packages/app/src/features/dialogs/savings/common/components/maker-transaction-overview/index.ts

@@ -0,0 +1 @@
+export { MakerTransactionOverview } from './MakerTransactionOverview'

packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.tsx

@@ -12,7 +12,7 @@ import { FormFieldsForDialog, PageStatus } from '@/features/dialogs/common/types
 import { DialogTitle } from '@/ui/atoms/dialog/Dialog'
 
 import { LiFiTransactionOverview } from '../../common/components/LiFiTransactionOverview'
-import { MakerTransactionOverview } from '../../common/components/MakerTransactionOverview'
+import { MakerTransactionOverview } from '../../common/components/maker-transaction-overview'
 import { SavingsDialogTxOverview } from '../../common/types'
 import { RiskAcknowledgementInfo } from '../logic/useSavingsDepositDialog'
 

packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.tsx

@@ -12,7 +12,7 @@ import { FormFieldsForDialog, PageStatus } from '@/features/dialogs/common/types
 import { DialogTitle } from '@/ui/atoms/dialog/Dialog'
 
 import { LiFiTransactionOverview } from '../../common/components/LiFiTransactionOverview'
-import { MakerTransactionOverview } from '../../common/components/MakerTransactionOverview'
+import { MakerTransactionOverview } from '../../common/components/maker-transaction-overview'
 import { SavingsDialogTxOverview } from '../../common/types'
 import { RiskAcknowledgementInfo } from '../logic/useSavingsWithdrawDialog'
 

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

@@ -73,6 +73,9 @@ export const testIds = makeTestIds({
         finalDAIAmount: true,
         finalSDAIAmount: true,
       },
+      nativeSDaiDepositActionRow: {
+        wrapper: true,
+      },
     },
   },
   navbar: {