Add staked in farm tx overview row (#443)

packages/app/src/features/farm-details/dialogs/stake/components/TransactionOverview.tsx

@@ -71,12 +71,10 @@ function StakeTransactionOverview({ txOverview }: StakeTransactionOverviewProps)
       </TransactionOverview.Row>
       <TransactionOverview.Row>
         <TransactionOverview.Label>Outcome</TransactionOverview.Label>
-        <TransactionOverview.TokenAmount
+        <TransactionOverview.StakedInFarm
           token={stakingToken}
           amount={stakingTokenRouteItem.value}
-          usdAmount={stakingTokenRouteItem.usdValue}
-          amountDataTestId={testIds.farmDetails.stakeDialog.transactionOverview.outcome}
-          usdAmountDataTestId={testIds.farmDetails.stakeDialog.transactionOverview.outcomeUsd}
+          farmName={`${rewardToken.symbol} Farm`}
         />
       </TransactionOverview.Row>
     </TransactionOverview>

packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx

@@ -1,8 +1,8 @@
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { assets } from '@/ui/assets'
-import { DocsLink } from '@/ui/atoms/docs-link/DocsLink'
-import { Typography } from '@/ui/atoms/typography/Typography'
+import { Link } from '@/ui/atoms/link/Link'
 import { links } from '@/ui/constants/links'
+import { cn } from '@/ui/utils/style'
 
 interface SparkAirdropInfoProps {
   variant: 'deposit' | 'borrow'
@@ -12,13 +12,23 @@ interface SparkAirdropInfoProps {
 export function SparkAirdropInfoPanel({ variant, eligibleToken }: SparkAirdropInfoProps) {
   const participants = variant === 'deposit' ? 'depositors' : 'borrowers'
   return (
-    <div className="col-span-3 mt-3 flex flex-row items-center gap-3.5 rounded-lg bg-spark/10 p-[15px] sm:mt-10">
+    <div
+      className={cn(
+        'relative isolate col-span-3 mt-3 flex flex-row items-center gap-3.5 overflow-hidden rounded-lg p-[15px]',
+        'before:-z-10 before:absolute before:inset-0 before:bg-gradient-spark-primary before:opacity-10',
+        'sm:mt-10',
+      )}
+    >
       <img src={assets.sparkIcon} alt="Spark logo" className="h-[2.75rem]" />
       <div className="flex flex-col gap-1">
-        <Typography variant="h4">Eligible for Spark Airdrop</Typography>
-        <p className="max-w-[62ch] text-prompt-foreground text-xs">
+        <h4 className="typography-label-3 text-primary">Eligible for Spark Airdrop</h4>
+        <p className="typography-label-6 text-secondary">
           {eligibleToken} {participants} will be eligible for a future ⚡&nbsp;SPK airdrop. Please read the details on
-          the <DocsLink to={links.docs.sparkAirdrop}>Spark Docs</DocsLink>.
+          the{' '}
+          <Link to={links.docs.sparkAirdrop} external>
+            Spark Docs
+          </Link>
+          .
         </p>
       </div>
     </div>

packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx

@@ -6,7 +6,7 @@ import { Percentage } from '@/domain/types/NumericValues'
 import { Token } from '@/domain/types/Token'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { assets } from '@/ui/assets'
-import { DocsLink } from '@/ui/atoms/docs-link/DocsLink'
+import { Link } from '@/ui/atoms/link/Link'
 import { links } from '@/ui/constants/links'
 import { EModeBadge } from '@/ui/molecules/e-mode-badge/EModeBadge'
 import { InfoTile } from '@/ui/molecules/info-tile/InfoTile'
@@ -70,15 +70,15 @@ export function EModeStatusPanel({
           E-Mode for {categoryName} assets increases your LTV within the {categoryName} category. This means that when
           E-Mode is enabled, you will have higher borrowing power for assets in this category:{' '}
           {eModeCategoryTokens.join(', ')}. You can enter E-Mode from your{' '}
-          <DocsLink to={paths.myPortfolio}>My portfolio</DocsLink>. To learn more about E-Mode and its applied
-          restrictions, visit the{' '}
-          <DocsLink to={links.docs.eMode} external>
+          <Link to={paths.myPortfolio}>My portfolio</Link>. To learn more about E-Mode and its applied restrictions,
+          visit the{' '}
+          <Link to={links.docs.eMode} external>
             FAQ
-          </DocsLink>{' '}
+          </Link>{' '}
           or the{' '}
-          <DocsLink to={links.aaveTechnicalPaper} external>
+          <Link to={links.aaveTechnicalPaper} external>
             Aave V3 Technical Paper
-          </DocsLink>
+          </Link>
           .
         </p>
       </InfoTilesGrid>

packages/app/src/ui/organisms/new/transaction-overview/TransactionOverview.tsx

@@ -10,6 +10,7 @@ import { TransactionOverviewHealthFactorChange } from './rows/TransactionOvervie
 import { TransactionOverviewMaxLtvChange } from './rows/TransactionOverviewMaxLtvChange'
 import { TransactionOverviewRoute, TransactionOverviewRoutePlaceholder } from './rows/TransactionOverviewRoute'
 import { TransactionOverviewSavingsApy } from './rows/TransactionOverviewSavingsApy'
+import { TransactionOverviewStakedInFarm } from './rows/TransactionOverviewStakedInFarm'
 import { TransactionOverviewTokenAmount } from './rows/TransactionOverviewTokenAmount'
 import { TransactionOverviewTokenAmountChange } from './rows/TransactionOverviewTokenAmountChange'
 
@@ -75,6 +76,7 @@ TransactionOverview.TokenAmountChange = TransactionOverviewTokenAmountChange
 TransactionOverview.HealthFactorChange = TransactionOverviewHealthFactorChange
 TransactionOverview.AvailableAssets = TransactionOverviewAvailableAssets
 TransactionOverview.MaxLtvChange = TransactionOverviewMaxLtvChange
+TransactionOverview.StakedInFarm = TransactionOverviewStakedInFarm
 TransactionOverview.Generic = TransactionOverviewGenericRow
 
 export { TransactionOverview }

packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewRoute.tsx

@@ -62,7 +62,7 @@ export function TransactionOverviewRoutePlaceholder({ className, ...rest }: HTML
   return (
     <div
       {...rest}
-      className={cn('typography-label-4 flex min-h-[38px] flex-col justify-center text-primary', className)}
+      className={cn('typography-label-4 flex min-h-[42px] flex-col justify-center text-primary', className)}
     />
   )
 }

packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx

@@ -0,0 +1,30 @@
+import { NormalizedUnitNumber } from '@/domain/types/NumericValues'
+import { Token } from '@/domain/types/Token'
+import { TokenIcon } from '@/ui/atoms/token-icon/TokenIcon'
+import { testIds } from '@/ui/utils/testIds'
+
+export interface TransactionOverviewStakedInFarmProps {
+  token: Token
+  amount: NormalizedUnitNumber
+  farmName: string
+}
+
+export function TransactionOverviewStakedInFarm({ token, amount, farmName }: TransactionOverviewStakedInFarmProps) {
+  const formattedAmount = token.format(amount, { style: 'auto' })
+
+  return (
+    <div className="flex w-fit items-center gap-1.5">
+      <TokenIcon token={token} className="h-4 w-4" />
+      <div className="flex items-baseline gap-1">
+        <div
+          className="typography-label-4 text-primary"
+          data-testid={testIds.farmDetails.stakeDialog.transactionOverview.outcome}
+        >
+          {formattedAmount}
+          {/* @note: next line is need to maintain backward compatibility with e2e test - amount should include token symbol */}
+          <span className="hidden"> {token.symbol}</span> Staked in {farmName}
+        </div>
+      </div>
+    </div>
+  )
+}