From 7b8f10ec6654f2f32f0ab1c0225e7b4631df29d9 Mon Sep 17 00:00:00 2001 From: Vladyslav Yatsenko <52505649+yivlad@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:45:38 +0100 Subject: [PATCH] Add staked in farm tx overview row (#443) --- .../stake/components/TransactionOverview.tsx | 6 ++-- .../SparkAirdropInfoPanel.tsx | 22 ++++++++++---- .../status-panel/EModeStatusPanel.tsx | 14 ++++----- packages/app/src/ui/assets/spark-icon.svg | 30 ++++--------------- .../app/src/ui/atoms/docs-link/DocsLink.tsx | 9 ------ .../TransactionOverview.tsx | 2 ++ .../rows/TransactionOverviewRoute.tsx | 2 +- .../rows/TransactionOverviewStakedInFarm.tsx | 30 +++++++++++++++++++ 8 files changed, 63 insertions(+), 52 deletions(-) delete mode 100644 packages/app/src/ui/atoms/docs-link/DocsLink.tsx create mode 100644 packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx diff --git a/packages/app/src/features/farm-details/dialogs/stake/components/TransactionOverview.tsx b/packages/app/src/features/farm-details/dialogs/stake/components/TransactionOverview.tsx index 870af9015..2d25cdd80 100644 --- a/packages/app/src/features/farm-details/dialogs/stake/components/TransactionOverview.tsx +++ b/packages/app/src/features/farm-details/dialogs/stake/components/TransactionOverview.tsx @@ -71,12 +71,10 @@ function StakeTransactionOverview({ txOverview }: StakeTransactionOverviewProps) Outcome - diff --git a/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx b/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx index b52638109..0566852f4 100644 --- a/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx +++ b/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 ( -
+
Spark logo
- Eligible for Spark Airdrop -

+

Eligible for Spark Airdrop

+

{eligibleToken} {participants} will be eligible for a future ⚡ SPK airdrop. Please read the details on - the Spark Docs. + the{' '} + + Spark Docs + + .

diff --git a/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx b/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx index 272458430..2dd250ff3 100644 --- a/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx +++ b/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{' '} - My portfolio. To learn more about E-Mode and its applied - restrictions, visit the{' '} - + My portfolio. To learn more about E-Mode and its applied restrictions, + visit the{' '} + FAQ - {' '} + {' '} or the{' '} - + Aave V3 Technical Paper - + .

diff --git a/packages/app/src/ui/assets/spark-icon.svg b/packages/app/src/ui/assets/spark-icon.svg index 23b8ccaa0..b11458883 100644 --- a/packages/app/src/ui/assets/spark-icon.svg +++ b/packages/app/src/ui/assets/spark-icon.svg @@ -1,29 +1,9 @@ - - - - - - + + - - - - - - - - - - - - - - - - - - - + + + diff --git a/packages/app/src/ui/atoms/docs-link/DocsLink.tsx b/packages/app/src/ui/atoms/docs-link/DocsLink.tsx deleted file mode 100644 index c4726232f..000000000 --- a/packages/app/src/ui/atoms/docs-link/DocsLink.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Link, LinkProps } from '@/ui/atoms/link/Link' - -export function DocsLink({ to, children, ...rest }: LinkProps) { - return ( - - {children} - - ) -} diff --git a/packages/app/src/ui/organisms/new/transaction-overview/TransactionOverview.tsx b/packages/app/src/ui/organisms/new/transaction-overview/TransactionOverview.tsx index 439d08d69..f20d92326 100644 --- a/packages/app/src/ui/organisms/new/transaction-overview/TransactionOverview.tsx +++ b/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 } diff --git a/packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewRoute.tsx b/packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewRoute.tsx index d73dd187f..e307ad06a 100644 --- a/packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewRoute.tsx +++ b/packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewRoute.tsx @@ -62,7 +62,7 @@ export function TransactionOverviewRoutePlaceholder({ className, ...rest }: HTML return (
) } diff --git a/packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx b/packages/app/src/ui/organisms/new/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx new file mode 100644 index 000000000..0b9a6f56f --- /dev/null +++ b/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 ( +
+ +
+
+ {formattedAmount} + {/* @note: next line is need to maintain backward compatibility with e2e test - amount should include token symbol */} + {token.symbol} Staked in {farmName} +
+
+
+ ) +}