From 4d41257ac7386d96eecabd797940f4a83c205226 Mon Sep 17 00:00:00 2001
From: Adam Havel <adamhavel@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:06:28 +0200
Subject: [PATCH] chore(suite): update staking modal

---
 .../StakeEthInANutshellModal/InfoRow.tsx      | 41 +---------
 .../StakeEthInANutshellModal/Process.tsx      | 36 ---------
 .../StakeEthInANutshellModal.tsx              | 78 +++++++++++--------
 .../StakeEthInANutshellModal/StakingInfo.tsx  |  4 +-
 .../UnstakingInfo.tsx                         |  4 +-
 5 files changed, 52 insertions(+), 111 deletions(-)
 delete mode 100644 packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/Process.tsx

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/InfoRow.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/InfoRow.tsx
index da33e4347b1..0b0f722083a 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/InfoRow.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/InfoRow.tsx
@@ -1,35 +1,4 @@
-import { Badge, Paragraph, Row, useElevation } from '@trezor/components';
-import { Elevation, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
-import styled from 'styled-components';
-
-const ListItem = styled.li<{ $elevation: Elevation }>`
-    position: relative;
-    padding-left: ${spacingsPx.xl};
-    margin-bottom: ${spacingsPx.md};
-    list-style-type: none;
-
-    &::before {
-        position: absolute;
-        content: '';
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: ${spacingsPx.md};
-        height: ${spacingsPx.md};
-        border-radius: 50%;
-        border: ${spacingsPx.xxs} solid ${mapElevationToBorder};
-    }
-
-    &:not(:last-child)::after {
-        position: absolute;
-        content: '';
-        left: ${spacings.xs - spacings.xxxs / 2}px;
-        top: 100%;
-        width: ${spacingsPx.xxxs};
-        height: ${spacingsPx.md};
-        border-left: ${spacingsPx.xxxs} dashed ${mapElevationToBorder};
-    }
-`;
+import { Badge, Paragraph, Row, List } from '@trezor/components';
 
 interface InfoRowProps {
     label: React.ReactNode;
@@ -40,9 +9,7 @@ interface InfoRowProps {
 }
 
 export const InfoRow = ({ label, content }: InfoRowProps) => {
-    const { elevation } = useElevation();
-
-    const displayContent = content.isBadge ? (
+    const displayContent = content?.isBadge ? (
         <Badge size="tiny">{content.text}</Badge>
     ) : (
         <Paragraph variant="tertiary" typographyStyle="hint">
@@ -51,11 +18,11 @@ export const InfoRow = ({ label, content }: InfoRowProps) => {
     );
 
     return (
-        <ListItem $elevation={elevation}>
+        <List.Item>
             <Row justifyContent="space-between">
                 {label}
                 {displayContent}
             </Row>
-        </ListItem>
+        </List.Item>
     );
 };
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/Process.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/Process.tsx
deleted file mode 100644
index 7982a08529b..00000000000
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/Process.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Badge, Column, Icon, Paragraph, Row } from '@trezor/components';
-import { spacings } from '@trezor/theme';
-import { useState } from 'react';
-
-interface ProcessProps {
-    heading: React.ReactNode;
-    badge: React.ReactNode;
-    content: React.ReactNode;
-}
-
-export const Process = ({ heading, badge, content }: ProcessProps) => {
-    const [isContentVisible, setContentVisibility] = useState(false);
-
-    const toggleContentVisibility = () => {
-        setContentVisibility(!isContentVisible);
-    };
-
-    return (
-        <Column gap={spacings.md} justifyContent="flex-start" alignItems="normal">
-            <Row justifyContent="space-between">
-                <Row gap={spacings.xxs}>
-                    <Paragraph typographyStyle="body" variant="tertiary">
-                        {heading}
-                    </Paragraph>
-                    <Badge size="tiny">{badge}</Badge>
-                </Row>
-                <Icon
-                    size={20}
-                    name={isContentVisible ? 'caretCircleUp' : 'caretCircleDown'}
-                    onClick={toggleContentVisibility}
-                />
-            </Row>
-            {isContentVisible && content}
-        </Column>
-    );
-};
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx
index 6bf39e1a18a..2cc515760ef 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx
@@ -1,24 +1,27 @@
-import { Icon, IconName, Paragraph, NewModal, Row, Column, useElevation } from '@trezor/components';
+import {
+    Icon,
+    IconName,
+    Paragraph,
+    NewModal,
+    Badge,
+    List,
+    Column,
+    Row,
+    Text,
+    Divider,
+    CollapsibleBox,
+} from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { TranslationKey } from '@suite-common/intl-types';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { openModal } from 'src/actions/suite/modalActions';
-import { Elevation, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
+import { spacings } from '@trezor/theme';
 import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
 import { getUnstakingPeriodInDays } from 'src/utils/suite/stake';
 import { selectValidatorsQueueData } from '@suite-common/wallet-core';
-import styled from 'styled-components';
-
-import { Process } from './Process';
 import { StakingInfo } from './StakingInfo';
 import { UnstakingInfo } from './UnstakingInfo';
 
-const Processes = styled.div<{ $elevation: Elevation }>`
-    margin-top: ${spacingsPx.md};
-    padding: ${spacingsPx.md} ${spacingsPx.zero} ${spacingsPx.zero};
-    border-top: 1px solid ${mapElevationToBorder};
-`;
-
 interface StakingDetails {
     id: number;
     icon: IconName;
@@ -49,15 +52,13 @@ interface StakeEthInANutshellModalProps {
 
 export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalProps) => {
     const account = useSelector(selectSelectedAccount);
+    const dispatch = useDispatch();
     const { validatorWithdrawTime } = useSelector(state =>
         selectValidatorsQueueData(state, account?.symbol),
     );
 
     const unstakingPeriod = getUnstakingPeriodInDays(validatorWithdrawTime);
 
-    const dispatch = useDispatch();
-    const { elevation } = useElevation();
-
     const proceedToEverstakeModal = () => {
         onCancel();
         dispatch(openModal({ type: 'everstake' }));
@@ -92,15 +93,15 @@ export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalP
                 </NewModal.Button>
             }
         >
-            <Column
-                gap={spacings.xl}
-                margin={{ top: spacings.sm, bottom: spacings.md }}
-                alignItems="flex-start"
+            <List
+                gap={spacings.lg}
+                bulletGap={spacings.md}
+                typographyStyle="hint"
+                margin={{ top: spacings.xs }}
             >
                 {STAKING_DETAILS.map(({ id, icon, translationId }) => (
-                    <Row key={id} gap={spacings.md}>
-                        <Icon name={icon} variant="primary" />
-                        <Paragraph typographyStyle="hint" variant="tertiary">
+                    <List.Item key={id} bulletComponent={<Icon name={icon} variant="primary" />}>
+                        <Paragraph variant="tertiary">
                             <Translation
                                 id={translationId}
                                 values={{
@@ -109,21 +110,30 @@ export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalP
                                 }}
                             />
                         </Paragraph>
-                    </Row>
+                    </List.Item>
+                ))}
+            </List>
+            <Divider margin={{ top: spacings.xl, bottom: spacings.md }} />
+            <Column alignItems="stretch" gap={spacings.lg}>
+                {processes.map(({ heading, badge, content }, index) => (
+                    <CollapsibleBox
+                        key={index}
+                        heading={
+                            <Row gap={spacings.xs}>
+                                <Text variant="tertiary">{heading}</Text>
+                                <Badge size="tiny">{badge}</Badge>
+                            </Row>
+                        }
+                        fillType="none"
+                        paddingType="none"
+                        hasDivider={false}
+                    >
+                        <List isOrdered bulletGap={spacings.sm} gap={spacings.md}>
+                            {content}
+                        </List>
+                    </CollapsibleBox>
                 ))}
             </Column>
-            <Processes $elevation={elevation}>
-                <Column alignItems="normal" gap={spacings.md}>
-                    {processes.map((process, index) => (
-                        <Process
-                            key={index}
-                            heading={process.heading}
-                            badge={process.badge}
-                            content={process.content}
-                        />
-                    ))}
-                </Column>
-            </Processes>
         </NewModal>
     );
 };
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakingInfo.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakingInfo.tsx
index 49924e481df..2ef76ac4b70 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakingInfo.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakingInfo.tsx
@@ -53,10 +53,10 @@ export const StakingInfo = ({ account }: StakingInfoProps) => {
     ];
 
     return (
-        <ol>
+        <>
             {infoRows.map(({ label, content }, index) => (
                 <InfoRow key={index} label={label} content={content} />
             ))}
-        </ol>
+        </>
     );
 };
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/UnstakingInfo.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/UnstakingInfo.tsx
index 2d3d94d39f7..3d834e86252 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/UnstakingInfo.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/UnstakingInfo.tsx
@@ -63,10 +63,10 @@ export const UnstakingInfo = ({ account }: StakingInfoProps) => {
     ];
 
     return (
-        <ol>
+        <>
             {infoRows.map(({ label, content }, index) => (
                 <InfoRow key={index} label={label} content={content} />
             ))}
-        </ol>
+        </>
     );
 };