feat: Sendform coin-control layout moved to the right

trezor · Dec 20, 2024 · bb9eb32 · bb9eb32
1 parent 50993b7
commit bb9eb32
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 53 deletions.
diff --git a/packages/suite/src/views/wallet/send/TotalSent/TotalSent.tsx b/packages/suite/src/views/wallet/send/TotalSent/TotalSent.tsx
@@ -1,5 +1,3 @@
-import styled from 'styled-components';
-
 import { Card, Column, InfoItem } from '@trezor/components';
 import { formatNetworkAmount, formatAmount } from '@suite-common/wallet-utils';
 import { spacings } from '@trezor/theme';
@@ -9,11 +7,6 @@ import { Translation, FiatValue, FormattedCryptoAmount } from 'src/components/su
 
 import { ReviewButton } from './ReviewButton';
 
-const Container = styled.div`
-    position: sticky;
-    top: 80px;
-`;
-
 export const TotalSent = () => {
     const {
         account: { symbol, networkType },
@@ -28,52 +21,47 @@ export const TotalSent = () => {
     const tokenInfo = hasTransactionInfo ? transactionInfo.token : undefined;
 
     return (
-        <Container>
-            <Card height="min-content" fillType="none">
-                <Column gap={spacings.xxs} margin={{ bottom: spacings.xl }}>
-                    <InfoItem
-                        label={<Translation id="TOTAL_SENT" />}
-                        direction="row"
-                        variant="default"
-                        typographyStyle="body"
-                    >
-                        {hasTransactionInfo && (
+        <Card fillType="none">
+            <Column gap={spacings.xxs} margin={{ bottom: spacings.xl }}>
+                <InfoItem
+                    label={<Translation id="TOTAL_SENT" />}
+                    direction="row"
+                    variant="default"
+                    typographyStyle="body"
+                >
+                    {hasTransactionInfo && (
+                        <FormattedCryptoAmount
+                            disableHiddenPlaceholder
+                            value={
+                                tokenInfo
+                                    ? formatAmount(transactionInfo.totalSpent, tokenInfo.decimals)
+                                    : formatNetworkAmount(transactionInfo.totalSpent, symbol)
+                            }
+                            symbol={tokenInfo?.symbol ?? symbol}
+                        />
+                    )}
+                </InfoItem>
+                <InfoItem
+                    label={<Translation id={isTokenTransfer ? 'FEE' : 'INCLUDING_FEE'} />}
+                    direction="row"
+                >
+                    {hasTransactionInfo &&
+                        (tokenInfo ? (
                             <FormattedCryptoAmount
                                 disableHiddenPlaceholder
-                                value={
-                                    tokenInfo
-                                        ? formatAmount(
-                                              transactionInfo.totalSpent,
-                                              tokenInfo.decimals,
-                                          )
-                                        : formatNetworkAmount(transactionInfo.totalSpent, symbol)
-                                }
-                                symbol={tokenInfo?.symbol ?? symbol}
+                                value={formatNetworkAmount(transactionInfo.fee, symbol)}
+                                symbol={symbol}
+                            />
+                        ) : (
+                            <FiatValue
+                                disableHiddenPlaceholder
+                                amount={formatNetworkAmount(transactionInfo.totalSpent, symbol)}
+                                symbol={symbol}
                             />
-                        )}
-                    </InfoItem>
-                    <InfoItem
-                        label={<Translation id={isTokenTransfer ? 'FEE' : 'INCLUDING_FEE'} />}
-                        direction="row"
-                    >
-                        {hasTransactionInfo &&
-                            (tokenInfo ? (
-                                <FormattedCryptoAmount
-                                    disableHiddenPlaceholder
-                                    value={formatNetworkAmount(transactionInfo.fee, symbol)}
-                                    symbol={symbol}
-                                />
-                            ) : (
-                                <FiatValue
-                                    disableHiddenPlaceholder
-                                    amount={formatNetworkAmount(transactionInfo.totalSpent, symbol)}
-                                    symbol={symbol}
-                                />
-                            ))}
-                    </InfoItem>
-                </Column>
-                <ReviewButton />
-            </Card>
-        </Container>
+                        ))}
+                </InfoItem>
+            </Column>
+            <ReviewButton />
+        </Card>
     );
 };
diff --git a/packages/suite/src/views/wallet/send/index.tsx b/packages/suite/src/views/wallet/send/index.tsx
@@ -96,9 +96,8 @@ const SendLoaded = ({ children, selectedAccount }: SendLoadedProps) => {
                                 <Translation id="TR_SOLANA_DEVNET_SHORTCUT_WARNING" />
                             </Banner>
                         )}
-
-                        <TotalSent />
                     </FormGrid>
+                    <TotalSent />
                 </Column>
 
                 {children}