From 3c9260d269cabb032ad1163aabb632b0dfd3a0b0 Mon Sep 17 00:00:00 2001
From: shotgunofdeath <faust.child@gmail.com>
Date: Tue, 27 Feb 2024 11:55:32 +0100
Subject: [PATCH] feat(eth-staking): update account staked balance ui

---
 .../components/suite/StakeAmountWrapper.tsx   |  9 +-
 .../AccountTopPanel/AccountTopPanel.tsx       | 87 ++++++++++++++-----
 2 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/packages/suite/src/components/suite/StakeAmountWrapper.tsx b/packages/suite/src/components/suite/StakeAmountWrapper.tsx
index 1ba22d5df5e8..1d9062f57342 100644
--- a/packages/suite/src/components/suite/StakeAmountWrapper.tsx
+++ b/packages/suite/src/components/suite/StakeAmountWrapper.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import styled from 'styled-components';
-import { Tooltip, TOOLTIP_DELAY_LONG } from '@trezor/components';
+import { Tooltip, TOOLTIP_DELAY_NONE, TOOLTIP_DELAY_NORMAL } from '@trezor/components';
 import { mediaQueries } from '@trezor/styles';
 import { Translation } from './Translation';
 import { goto } from 'src/actions/suite/routerActions';
@@ -16,7 +16,6 @@ const Container = styled.div`
     border-radius: 6px;
     transition: background 0.1s ease-in;
     cursor: pointer;
-
     ${mediaQueries.hover} {
         :hover {
             background: ${({ theme }) => theme.BG_GREY};
@@ -36,9 +35,9 @@ export const StakeAmountWrapper = ({ children }: StakeAmountWrapperProps) => {
         <Tooltip
             cursor="default"
             maxWidth={200}
-            delayShow={0}
-            delayHide={TOOLTIP_DELAY_LONG}
-            placement="top"
+            delayShow={TOOLTIP_DELAY_NORMAL}
+            delayHide={TOOLTIP_DELAY_NONE}
+            placement="bottom"
             interactive={false}
             hideOnClick={false}
             content={<Translation id="TR_STAKE_STAKED_AMOUNT" />}
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx
index a87947e1625f..d0c67cac16ea 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx
@@ -1,16 +1,24 @@
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { forwardRef } from 'react';
 
 import { spacingsPx } from '@trezor/theme';
 import { NetworkSymbol } from '@suite-common/wallet-config';
-import { CoinLogo, SkeletonCircle, SkeletonRectangle } from '@trezor/components';
+import { CoinLogo, Icon, SkeletonCircle, SkeletonRectangle } from '@trezor/components';
 
-import { FormattedCryptoAmount, AmountUnitSwitchWrapper } from 'src/components/suite';
+import {
+    FormattedCryptoAmount,
+    AmountUnitSwitchWrapper,
+    StakeAmountWrapper,
+} from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { FiatHeader } from 'src/views/dashboard/components/FiatHeader';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { useFiatFromCryptoValue } from 'src/hooks/suite/useFiatFromCryptoValue';
 import { globalPaddingEraserStyle } from 'src/components/suite/layouts/SuiteLayout/utils';
+import { STAKE_SYMBOLS } from 'src/constants/suite/ethStaking';
+import { selectIsDebugModeActive } from 'src/reducers/suite/suiteReducer';
+import { selectSelectedAccountAutocompoundBalance } from 'src/reducers/wallet/selectedAccountReducer';
+import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils';
 
 export const ACCOUNT_INFO_HEIGHT = 80;
 
@@ -19,7 +27,7 @@ const Container = styled.div`
     flex-direction: column;
     gap: ${spacingsPx.xxs};
     width: fit-content;
-    height: ${ACCOUNT_INFO_HEIGHT}px;
+    min-height: ${ACCOUNT_INFO_HEIGHT}px;
 
     ${globalPaddingEraserStyle}
 `;
@@ -31,15 +39,11 @@ const AccountCryptoBalance = styled.div`
     color: ${({ theme }) => theme.textSubdued};
 `;
 
-// const AmountsWrapper = styled.div`
-//     display: flex;
-//     flex-direction: column;
-//     gap: ${spacingsPx.sm};
-//
-//     & > div:nth-of-type(2) {
-//         max-width: fit-content;
-//     }
-// `;
+const AmountsWrapper = styled.div`
+    display: flex;
+    gap: ${spacingsPx.lg};
+    flex-wrap: wrap;
+`;
 
 interface AccountTopPanelSkeletonProps {
     animate?: boolean;
@@ -58,8 +62,10 @@ const AccountTopPanelSkeleton = ({ animate, symbol }: AccountTopPanelSkeletonPro
 );
 
 export const AccountTopPanel = forwardRef<HTMLDivElement>((_, ref) => {
+    const theme = useTheme();
     const { account, loader, status } = useSelector(state => state.wallet.selectedAccount);
     const localCurrency = useSelector(selectLocalCurrency);
+    const autocompoundBalance = useSelector(selectSelectedAccountAutocompoundBalance);
     const isDebug = useSelector(selectIsDebugModeActive);
 
     // TODO: move this to FiatHeader
@@ -68,6 +74,12 @@ export const AccountTopPanel = forwardRef<HTMLDivElement>((_, ref) => {
         symbol: account?.symbol || '',
     });
 
+    const mappedSymbol = account?.symbol ? mapTestnetSymbol(account?.symbol) : '';
+    const { fiatAmount: fiatStakeAmount } = useFiatFromCryptoValue({
+        amount: autocompoundBalance,
+        symbol: mappedSymbol,
+    });
+
     if (status !== 'loaded' || !account) {
         return (
             <AccountTopPanelSkeleton
@@ -79,19 +91,48 @@ export const AccountTopPanel = forwardRef<HTMLDivElement>((_, ref) => {
 
     const { symbol, formattedBalance } = account;
     // TODO: remove isDebug for staking release
-    // const isStakeShown = STAKE_SYMBOLS.includes(symbol) && isDebug;
+    const isStakeShown = STAKE_SYMBOLS.includes(symbol) && isDebug;
 
     return (
         <Container ref={ref}>
-            <AmountUnitSwitchWrapper symbol={symbol}>
-                <AccountCryptoBalance>
-                    <CoinLogo size={16} symbol={symbol} />
-
-                    <FormattedCryptoAmount value={formattedBalance} symbol={symbol} />
-                </AccountCryptoBalance>
-            </AmountUnitSwitchWrapper>
-
-            <FiatHeader size="large" localCurrency={localCurrency} fiatAmount={fiatAmount ?? '0'} />
+            <AmountsWrapper>
+                <div>
+                    <AmountUnitSwitchWrapper symbol={symbol}>
+                        <AccountCryptoBalance>
+                            <CoinLogo size={16} symbol={symbol} />
+
+                            <FormattedCryptoAmount value={formattedBalance} symbol={symbol} />
+                        </AccountCryptoBalance>
+                    </AmountUnitSwitchWrapper>
+
+                    <FiatHeader
+                        size="large"
+                        localCurrency={localCurrency}
+                        fiatAmount={fiatAmount ?? '0'}
+                    />
+                </div>
+
+                {isStakeShown && (
+                    <div>
+                        <StakeAmountWrapper>
+                            <AccountCryptoBalance>
+                                <Icon icon="PIGGY_BANK" color={theme.TYPE_DARK_GREY} size={16} />
+
+                                <FormattedCryptoAmount
+                                    value={autocompoundBalance}
+                                    symbol={symbol}
+                                />
+                            </AccountCryptoBalance>
+                        </StakeAmountWrapper>
+
+                        <FiatHeader
+                            size="large"
+                            localCurrency={localCurrency}
+                            fiatAmount={fiatStakeAmount ?? '0'}
+                        />
+                    </div>
+                )}
+            </AmountsWrapper>
         </Container>
     );
 });