chore(suite): refactor staking modals

trezor · Dec 5, 2024 · aff5a1c · aff5a1c
1 parent 88654c4
commit aff5a1c
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 154 deletions.
diff --git a/packages/components/src/components/typography/utils.tsx b/packages/components/src/components/typography/utils.tsx
@@ -5,7 +5,7 @@ import { typography, TypographyStyle, typographyStyles } from '@trezor/theme';
 import { TransientProps, makePropsTransient } from '../../utils/transientProps';
 import { UIHorizontalAlignment, uiHorizontalAlignments } from '../../config/types';
 
-export const textWraps = ['balance', 'break-word'];
+export const textWraps = ['balance', 'break-word', 'pretty'];
 export type TextWrap = (typeof textWraps)[number];
 
 export type TextProps = {

diff --git a/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx b/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx
@@ -1,7 +1,7 @@
 import * as semver from 'semver';
 
 import { getFirmwareVersion } from '@trezor/device-utils';
-import { H2, DeviceAnimation, NewModal, Paragraph, List, Column } from '@trezor/components';
+import { H2, DeviceAnimation, NewModal, Paragraph, BulletList, Column } from '@trezor/components';
 import { DEVICE, Device, DeviceModelInternal, UI } from '@trezor/connect';
 import { ConfirmOnDevice } from '@trezor/product-components';
 import { TranslationKey } from '@suite-common/intl-types';
@@ -180,29 +180,27 @@ export const ReconnectDevicePrompt = ({ onClose, onSuccess }: ReconnectDevicePro
                 {!isRebootDone && (
                     <Column gap={spacings.lg}>
                         {isManualRebootRequired ? (
-                            <List isOrdered margin={{ top: spacings.md }}>
+                            <BulletList
+                                isOrdered
+                                margin={{ top: spacings.md }}
+                                gap={spacings.xl}
+                                titleGap={spacings.xxxs}
+                                bulletGap={spacings.md}
+                            >
                                 {/* First step asks for disconnecting a device */}
-                                <List.Item data-testid="@firmware/disconnect-message">
-                                    <Paragraph
-                                        variant={
-                                            rebootPhase !== 'disconnected' ? 'primary' : 'default'
-                                        }
-                                    >
-                                        <Translation id="TR_DISCONNECT_YOUR_DEVICE" />
-                                    </Paragraph>
-                                </List.Item>
+                                <BulletList.Item
+                                    title={<Translation id="TR_DISCONNECT_YOUR_DEVICE" />}
+                                    data-testid="@firmware/disconnect-message"
+                                    state={rebootPhase === 'disconnected' ? 'done' : 'default'}
+                                />
 
                                 {/* Second step reconnect in bootloader */}
-                                <List.Item data-testid="@firmware/connect-in-bootloader-message">
-                                    <Paragraph
-                                        variant={
-                                            rebootPhase === 'disconnected' ? 'primary' : 'default'
-                                        }
-                                    >
-                                        <Translation id={getSecondStep()} />
-                                    </Paragraph>
-                                </List.Item>
-                            </List>
+                                <BulletList.Item
+                                    title={<Translation id={getSecondStep()} />}
+                                    data-testid="@firmware/connect-in-bootloader-message"
+                                    state={rebootPhase === 'disconnected' ? 'default' : 'pending'}
+                                />
+                            </BulletList>
                         ) : (
                             <Paragraph
                                 typographyStyle="hint"

diff --git a/packages/suite/src/components/suite/StakingFeature.tsx b/packages/suite/src/components/suite/StakingFeature.tsx
@@ -11,7 +11,7 @@ interface StakingFeatureProps {
 
 export const StakingFeature = ({ icon, title, description }: StakingFeatureProps) => (
     <section>
-        <IconCircle name={icon} variant="primary" size="extraLarge" />
+        <IconCircle name={icon} variant="primary" size={80} />
         <H3 margin={{ top: spacings.md }}>{title}</H3>
         <Paragraph variant="tertiary">{description}</Paragraph>
     </section>

diff --git a/packages/suite/src/components/suite/StakingProcess/InfoRow.tsx b/packages/suite/src/components/suite/StakingProcess/InfoRow.tsx
@@ -1,33 +1,35 @@
-import { Badge, Column, List, Paragraph, Row } from '@trezor/components';
-
-import { Subheading } from './Subheading';
-import { RowContent, RowSubheading } from './types';
+import { Badge, BulletList, Paragraph, Row } from '@trezor/components';
 
 interface InfoRowProps {
     heading: React.ReactNode;
-    subheading: RowSubheading;
-    content: RowContent;
+    subheading?: React.ReactNode;
+    content?: {
+        text: React.ReactNode;
+        isBadge?: boolean;
+    };
     isExpanded?: boolean;
 }
 
-export const InfoRow = ({ heading, subheading, content, isExpanded = false }: InfoRowProps) => {
-    const displayContent = content.isBadge ? (
-        <Badge size="tiny">{content.text}</Badge>
-    ) : (
-        <Paragraph variant="tertiary" typographyStyle="hint">
-            {content.text}
-        </Paragraph>
-    );
-
-    return (
-        <List.Item>
+export const InfoRow = ({ heading, subheading, content, isExpanded = false }: InfoRowProps) => (
+    <BulletList.Item
+        title={
             <Row justifyContent="space-between">
-                <Column>
-                    {heading}
-                    <Subheading isExpanded={isExpanded} subheading={subheading} />
-                </Column>
-                {displayContent}
+                {heading}
+                {content &&
+                    (content.isBadge ? (
+                        <Badge size="tiny">{content.text}</Badge>
+                    ) : (
+                        <Paragraph variant="tertiary" typographyStyle="hint">
+                            {content.text}
+                        </Paragraph>
+                    ))}
             </Row>
-        </List.Item>
-    );
-};
+        }
+    >
+        {subheading && isExpanded && (
+            <Paragraph variant="tertiary" typographyStyle="hint">
+                {subheading}
+            </Paragraph>
+        )}
+    </BulletList.Item>
+);
diff --git a/packages/suite/src/components/suite/StakingProcess/StakingInfo.tsx b/packages/suite/src/components/suite/StakingProcess/StakingInfo.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { BulletList } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 import {
     selectAccountStakeTransactions,
     selectValidatorsQueue,
@@ -41,19 +43,16 @@ export const StakingInfo = ({ isExpanded }: StakingInfoProps) => {
     const infoRows = [
         {
             heading: <Translation id="TR_STAKE_SIGN_TRANSACTION" />,
-            subheading: { isCurrentStep: true },
             content: { text: <Translation id="TR_COINMARKET_NETWORK_FEE" />, isBadge: true },
         },
         {
             heading: <Translation id="TR_STAKE_ENTER_THE_STAKING_POOL" />,
-            subheading: {
-                text: (
-                    <Translation
-                        id="TR_STAKING_GETTING_READY"
-                        values={{ symbol: account.symbol.toUpperCase() }}
-                    />
-                ),
-            },
+            subheading: (
+                <Translation
+                    id="TR_STAKING_GETTING_READY"
+                    values={{ symbol: account.symbol.toUpperCase() }}
+                />
+            ),
             content: {
                 text: (
                     <>
@@ -64,16 +63,21 @@ export const StakingInfo = ({ isExpanded }: StakingInfoProps) => {
         },
         {
             heading: <Translation id="TR_STAKE_EARN_REWARDS_WEEKLY" />,
-            subheading: { text: <Translation id="TR_STAKING_REWARDS_ARE_RESTAKED" /> },
+            subheading: <Translation id="TR_STAKING_REWARDS_ARE_RESTAKED" />,
             content: { text: `~${ethApy}% p.a.` },
         },
     ];
 
     return (
-        <>
+        <BulletList
+            bulletGap={spacings.sm}
+            gap={spacings.md}
+            bulletSize="small"
+            titleGap={spacings.xxxs}
+        >
             {infoRows.map(({ heading, content, subheading }, index) => (
                 <InfoRow key={index} {...{ heading, subheading, content, isExpanded }} />
             ))}
-        </>
+        </BulletList>
     );
 };
diff --git a/packages/suite/src/components/suite/StakingProcess/Subheading.tsx b/packages/suite/src/components/suite/StakingProcess/Subheading.tsx
diff --git a/packages/suite/src/components/suite/StakingProcess/UnstakingInfo.tsx b/packages/suite/src/components/suite/StakingProcess/UnstakingInfo.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { BulletList } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 import {
     selectAccountUnstakeTransactions,
     selectValidatorsQueue,
@@ -37,22 +39,19 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => {
     const infoRows = [
         {
             heading: <Translation id="TR_STAKE_SIGN_UNSTAKING_TRANSACTION" />,
-            subheading: { isCurrentStep: true },
             content: {
                 text: <Translation id="TR_COINMARKET_NETWORK_FEE" />,
                 isBadge: true,
             },
         },
         {
             heading: <Translation id="TR_STAKE_LEAVE_STAKING_POOL" />,
-            subheading: {
-                text: (
-                    <Translation
-                        id="TR_STAKING_CONSOLIDATING_FUNDS"
-                        values={{ symbol: accountSymbol }}
-                    />
-                ),
-            },
+            subheading: (
+                <Translation
+                    id="TR_STAKING_CONSOLIDATING_FUNDS"
+                    values={{ symbol: accountSymbol }}
+                />
+            ),
             content: {
                 text: <Translation id="TR_STAKE_DAYS" values={{ count: daysToUnstake }} />,
             },
@@ -61,31 +60,32 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => {
             heading: (
                 <Translation id="TR_STAKE_CLAIM_UNSTAKED" values={{ symbol: accountSymbol }} />
             ),
-            subheading: {
-                text: (
-                    <Translation
-                        id="TR_STAKING_YOUR_UNSTAKED_FUNDS"
-                        values={{ symbol: accountSymbol }}
-                    />
-                ),
-            },
+            subheading: (
+                <Translation
+                    id="TR_STAKING_YOUR_UNSTAKED_FUNDS"
+                    values={{ symbol: accountSymbol }}
+                />
+            ),
             content: {
                 text: <Translation id="TR_COINMARKET_NETWORK_FEE" />,
                 isBadge: true,
             },
         },
         {
             heading: <Translation id="TR_STAKE_IN_ACCOUNT" values={{ symbol: accountSymbol }} />,
-            subheading: null,
-            content: { text: null },
         },
     ];
 
     return (
-        <>
+        <BulletList
+            bulletGap={spacings.sm}
+            gap={spacings.md}
+            bulletSize="small"
+            titleGap={spacings.xxs}
+        >
             {infoRows.map(({ heading, content, subheading }, index) => (
                 <InfoRow key={index} {...{ heading, subheading, content, isExpanded }} />
             ))}
-        </>
+        </BulletList>
     );
 };
diff --git a/packages/suite/src/components/suite/StakingProcess/types.ts b/packages/suite/src/components/suite/StakingProcess/types.ts
diff --git a/.../modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx b/.../modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx
@@ -131,9 +131,7 @@ export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalP
                         paddingType="none"
                         hasDivider={false}
                     >
-                        <List isOrdered bulletGap={spacings.sm} gap={spacings.md}>
-                            {content}
-                        </List>
+                        {content}
                     </CollapsibleBox>
                 ))}
             </Column>

diff --git a/...suite/modals/ReduxModal/UserContextModal/StakeModal/StakingInfoCards/StakingInfoCards.tsx b/...suite/modals/ReduxModal/UserContextModal/StakeModal/StakingInfoCards/StakingInfoCards.tsx
@@ -1,4 +1,4 @@
-import { CollapsibleBox, Column, H3, List } from '@trezor/components';
+import { CollapsibleBox, Column, H3 } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite/Translation';
@@ -29,9 +29,7 @@ export const StakingInfoCards = () => {
                     hasDivider={false}
                     defaultIsOpen={card.defaultIsOpen}
                 >
-                    <List isOrdered bulletGap={spacings.sm} gap={spacings.md}>
-                        {card.content}
-                    </List>
+                    {card.content}
                 </CollapsibleBox>
             ))}
         </Column>

diff --git a/...ite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeModal.tsx b/...ite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeModal.tsx
@@ -3,7 +3,6 @@ import {
     Column,
     Grid,
     H3,
-    List,
     NewModal,
     useMediaQuery,
     variables,
@@ -55,9 +54,7 @@ export const UnstakeModal = ({ onCancel }: UnstakeModalModalProps) => {
                             hasDivider={false}
                             defaultIsOpen
                         >
-                            <List isOrdered bulletGap={spacings.sm} gap={spacings.md}>
-                                <UnstakingInfo isExpanded />
-                            </List>
+                            <UnstakingInfo isExpanded />
                         </CollapsibleBox>
                     </Column>
                 </Grid>