Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Sendform coin-control layout moved to the right #16082

Closed
wants to merge 1 commit into from
Closed

feat: Sendform coin-control layout moved to the right #16082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions packages/suite/src/views/wallet/send/Options/BitcoinOptions/BitcoinOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { OpenGuideFromTooltip } from 'src/components/guide';
import { useSelector } from 'src/hooks/suite';

import { Locktime } from './Locktime/Locktime';
import { CoinControl } from './CoinControl/CoinControl';
import { OnOffSwitcher } from '../OnOffSwitcher';
import { canLocktimeTxBeBroadcast } from './Locktime/canLocktimeTxBeBroadcast';

Expand Down Expand Up @@ -209,8 +208,6 @@ export const BitcoinOptions = () => {
}}
/>
)}

{utxoSelectionEnabled && <CoinControl close={toggleUtxoSelection} />}
</Wrapper>
);
};
90 changes: 39 additions & 51 deletions packages/suite/src/views/wallet/send/TotalSent/TotalSent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 },
Expand All @@ -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" width="auto">
<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>
);
};
89 changes: 49 additions & 40 deletions packages/suite/src/views/wallet/send/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { ReactNode } from 'react';
import { useWatch } from 'react-hook-form';

import styled from 'styled-components';

import { Banner, Column } from '@trezor/components';
import { breakpointMediaQueries } from '@trezor/styles';
import { spacingsPx, spacings } from '@trezor/theme';
import { Banner, Column, Row } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { useSelector } from 'src/hooks/suite';
import { WalletLayout } from 'src/components/wallet';
import { useSendForm, SendContext, UseSendFormProps } from 'src/hooks/wallet/useSendForm';
import {
useSendForm,
SendContext,
UseSendFormProps,
useSendFormContext,
} from 'src/hooks/wallet/useSendForm';
import {
selectTargetAnonymityByAccountKey,
selectRegisteredUtxosByAccountKey,
Expand All @@ -22,29 +25,32 @@ import { Options } from './Options/Options';
import { SendFees } from './SendFees';
import { TotalSent } from './TotalSent/TotalSent';
import { SendRaw } from './SendRaw';
import { CoinControl } from './Options/BitcoinOptions/CoinControl/CoinControl';

const FormGrid = styled.div`
gap: ${spacingsPx.md};
const UtxoPanel = () => {
const { toggleOption, setDraftSaveRequest, setValue, getDefaultValue, control } =
useSendFormContext();

${breakpointMediaQueries.xl} {
display: grid;
grid-template-columns: minmax(500px, auto) minmax(340px, 420px);
const toggleUtxoSelection = () => {
setValue('hasCoinControlBeenOpened', true); // required for analytics
toggleOption('utxoSelection');

> :not(:last-child) {
grid-column: 1;
}
// This will trigger the effect in `useSendForm` and do `saveSendFormDraftThunk`.
// This is not nice, but it will endure the new state is persisted in the Redux Store.
// Without this, this change may be lost which will result in UI glitch (closing the Coin Control UI)
setDraftSaveRequest(true);
};

> :last-child {
grid-column: 2;
grid-row: 1;
}
}
const options = useWatch({
name: 'options',
defaultValue: getDefaultValue('options', []),
control,
});

${breakpointMediaQueries.below_xl} {
display: flex;
flex-direction: column;
}
`;
const utxoSelectionEnabled = options.includes('utxoSelection');

return utxoSelectionEnabled && <CoinControl close={toggleUtxoSelection} />;
};

interface SendProps {
children: ReactNode;
Expand Down Expand Up @@ -83,23 +89,26 @@ const SendLoaded = ({ children, selectedAccount }: SendLoadedProps) => {
return (
<WalletLayout title="TR_NAV_SEND" isSubpage account={selectedAccount}>
<SendContext.Provider value={sendContextValues}>
<Column gap={spacings.xl}>
<SendHeader />

<FormGrid data-testid="@wallet/send/outputs-and-options">
<Outputs disableAnim={!!children} />
<Options />
<SendFees />

{symbol === 'dsol' && (
<Banner icon>
<Translation id="TR_SOLANA_DEVNET_SHORTCUT_WARNING" />
</Banner>
)}

<Row>
<Column gap={spacings.xl} alignItems="start">
<Column gap={spacings.xl}>
<SendHeader />

<Outputs disableAnim={!!children} />
<Options />
<SendFees />

{symbol === 'dsol' && (
<Banner icon>
<Translation id="TR_SOLANA_DEVNET_SHORTCUT_WARNING" />
</Banner>
)}
</Column>
<TotalSent />
</FormGrid>
</Column>
</Column>

<UtxoPanel />
</Row>

{children}
</SendContext.Provider>
Expand Down