fix(suite): send max coliding with token balance

trezor · Apr 17, 2024 · c30cba6 · c30cba6
1 parent f859f33
commit c30cba6
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 67 deletions.
diff --git a/packages/components/src/components/form/Input/Input.tsx b/packages/components/src/components/form/Input/Input.tsx
@@ -77,8 +77,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     value?: string;
     innerRef?: Ref<HTMLInputElement>;
     label?: ReactElement | string;
-    labelHoverAddon?: ReactElement;
-    labelRight?: ReactElement;
+    labelHoverRight?: React.ReactNode;
+    labelLeft?: React.ReactNode;
+    labelRight?: React.ReactNode;
     innerAddon?: ReactElement;
     /**
      * @description pass `null` if bottom text can be `undefined`
@@ -103,8 +104,9 @@ const Input = ({
     innerRef,
     inputState,
     label,
-    labelHoverAddon,
+    labelLeft,
     labelRight,
+    labelHoverRight,
     innerAddon,
     innerAddonAlign = 'right',
     bottomText,
@@ -138,7 +140,12 @@ const Input = ({
             $hasBottomPadding={hasBottomPadding === true && bottomText === null}
             className={className}
         >
-            <TopAddons isHovered={isHovered} hoverAddon={labelHoverAddon} addonRight={labelRight} />
+            <TopAddons
+                isHovered={isHovered}
+                addonLeft={labelLeft}
+                hoverAddonRight={labelHoverRight}
+                addonRight={labelRight}
+            />
 
             <InputWrapper>
                 {innerAddon && innerAddonAlign === 'left' && (

diff --git a/packages/components/src/components/form/Textarea/Textarea.stories.tsx b/packages/components/src/components/form/Textarea/Textarea.stories.tsx
@@ -41,7 +41,7 @@ export const Textarea: StoryObj<TextareaProps> = {
                 type: 'range',
             },
         },
-        labelHoverAddon: {
+        labelHoverRight: {
             control: 'text',
         },
         labelRight: {

diff --git a/packages/components/src/components/form/Textarea/Textarea.tsx b/packages/components/src/components/form/Textarea/Textarea.tsx
@@ -72,7 +72,7 @@ const TextareaLabel = styled(Label)`
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     isDisabled?: boolean;
     label?: ReactNode;
-    labelHoverAddon?: ReactNode;
+    labelHoverRight?: ReactNode;
     labelRight?: ReactNode;
     innerRef?: Ref<HTMLTextAreaElement>;
     /**
@@ -90,7 +90,7 @@ export const Textarea = ({
     className,
     value,
     maxLength,
-    labelHoverAddon,
+    labelHoverRight,
     isDisabled,
     innerRef,
     label,
@@ -114,7 +114,11 @@ export const Textarea = ({
             onMouseLeave={() => setIsHovered(false)}
             $hasBottomPadding={hasBottomPadding === true && bottomText === null}
         >
-            <TopAddons isHovered={isHovered} hoverAddon={labelHoverAddon} addonRight={labelRight} />
+            <TopAddons
+                isHovered={isHovered}
+                hoverAddonRight={labelHoverRight}
+                addonRight={labelRight}
+            />
 
             <TextareaWrapper $inputState={inputState} disabled={isDisabled} $elevation={elevation}>
                 <StyledTextarea

diff --git a/packages/components/src/components/form/TopAddons.tsx b/packages/components/src/components/form/TopAddons.tsx
@@ -2,42 +2,67 @@ import React from 'react';
 import styled from 'styled-components';
 import { spacingsPx } from '@trezor/theme';
 
-const Container = styled.div`
+const Container = styled.div<{ hasLeftAddon?: boolean }>`
     display: flex;
-    justify-content: end;
+    justify-content: ${({ hasLeftAddon }) => (hasLeftAddon ? 'space-between' : 'flex-end')};
     align-items: flex-end;
     gap: ${spacingsPx.xs};
     min-height: 30px;
     padding-bottom: 6px;
 `;
 
-export const HoverAddon = styled.div<{ $isVisible?: boolean }>`
+export const RightAddonWrapper = styled.div`
+    display: flex;
+    gap: 6px;
+`;
+
+export const RightAddon = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+export const HoverAddonRight = styled.div<{ $isVisible?: boolean }>`
     opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
     transition: opacity 0.1s ease-out;
 `;
 
-export const RightAddon = styled.div`
+export const LeftAddon = styled.div`
     display: flex;
     align-items: center;
 `;
 
 interface TopAddonsProps {
     isHovered?: boolean;
+    addonLeft?: React.ReactNode;
     addonRight?: React.ReactNode;
-    hoverAddon?: React.ReactNode;
+    hoverAddonRight?: React.ReactNode;
 }
 
-export const TopAddons = ({ isHovered, addonRight, hoverAddon }: TopAddonsProps) => {
-    const isWithTopLabel = hoverAddon || addonRight;
+export const TopAddons = ({
+    isHovered,
+    addonLeft,
+    addonRight,
+    hoverAddonRight,
+}: TopAddonsProps) => {
+    const isWithTopLabel = addonLeft || addonRight || hoverAddonRight;
+
+    const isWithRightLabel = addonRight || hoverAddonRight;
 
     if (!isWithTopLabel) {
         return null;
     }
 
     return (
-        <Container>
-            {hoverAddon && <HoverAddon $isVisible={isHovered}>{hoverAddon}</HoverAddon>}
-            {addonRight && <RightAddon>{addonRight}</RightAddon>}
+        <Container hasLeftAddon={!!addonLeft}>
+            {addonLeft && <LeftAddon>{addonLeft}</LeftAddon>}
+            {isWithRightLabel && (
+                <RightAddonWrapper>
+                    {hoverAddonRight && (
+                        <HoverAddonRight $isVisible={isHovered}>{hoverAddonRight}</HoverAddonRight>
+                    )}
+                    {addonRight && <RightAddon>{addonRight}</RightAddon>}
+                </RightAddonWrapper>
+            )}
         </Container>
     );
 };
diff --git a/packages/components/src/components/form/form.stories.tsx b/packages/components/src/components/form/form.stories.tsx
@@ -92,7 +92,7 @@ export const All: StoryObj = {
                     value="Input label with warning"
                     dataTest="input-warning-label"
                     bottomText="bottom text"
-                    labelHoverAddon={
+                    labelHoverRight={
                         <Button variant="tertiary" icon="QR" onClick={() => {}}>
                             Scan QR code
                         </Button>

diff --git a/packages/suite/src/views/wallet/send/components/Outputs/components/Address/index.tsx b/packages/suite/src/views/wallet/send/components/Outputs/components/Address/index.tsx
@@ -26,10 +26,6 @@ const Container = styled.div`
     position: relative;
 `;
 
-const Heading = styled.p`
-    position: absolute;
-`;
-
 const Text = styled.span`
     display: flex;
     align-items: center;
@@ -228,13 +224,6 @@ export const Address = ({ output, outputId, outputsCount }: AddressProps) => {
 
     return (
         <Container>
-            <Heading>
-                <Translation
-                    id={outputsCount > 1 ? 'TR_SEND_RECIPIENT_ADDRESS' : 'TR_SEND_ADDRESS_SECTION'}
-                    values={{ index: recipientId }}
-                />
-            </Heading>
-
             <Input
                 inputState={inputState}
                 innerAddon={
@@ -266,11 +255,23 @@ export const Address = ({ output, outputId, outputsCount }: AddressProps) => {
                         <Translation id="RECIPIENT_ADDRESS" />
                     </Text>
                 }
-                labelHoverAddon={
+                labelHoverRight={
                     <Button variant="tertiary" size="tiny" icon="QR" onClick={handleQrClick}>
                         <Translation id="RECIPIENT_SCAN" />
                     </Button>
                 }
+                labelLeft={
+                    <p>
+                        <Translation
+                            id={
+                                outputsCount > 1
+                                    ? 'TR_SEND_RECIPIENT_ADDRESS'
+                                    : 'TR_SEND_ADDRESS_SECTION'
+                            }
+                            values={{ index: recipientId }}
+                        />
+                    </p>
+                }
                 labelRight={
                     outputsCount > 1 ? (
                         <IconButton

diff --git a/...ages/suite/src/views/wallet/send/components/Outputs/components/Amount/components/Fiat.tsx b/...ages/suite/src/views/wallet/send/components/Outputs/components/Amount/components/Fiat.tsx
@@ -36,9 +36,11 @@ const Wrapper = styled.div`
 interface FiatProps {
     output: Partial<Output>;
     outputId: number;
+    labelHoverRight?: React.ReactNode;
+    labelRight?: React.ReactNode;
 }
 
-export const Fiat = ({ output, outputId }: FiatProps) => {
+export const Fiat = ({ output, outputId, labelHoverRight, labelRight }: FiatProps) => {
     const {
         account,
         network,
@@ -213,6 +215,8 @@ export const Fiat = ({ output, outputId }: FiatProps) => {
     return (
         <Wrapper>
             <NumberInput
+                labelHoverRight={labelHoverRight}
+                labelRight={labelRight}
                 control={control}
                 inputState={inputState}
                 onChange={handleChange}

diff --git a/...e/src/views/wallet/send/components/Outputs/components/Amount/components/SendMaxSwitch.tsx b/...e/src/views/wallet/send/components/Outputs/components/Amount/components/SendMaxSwitch.tsx
@@ -0,0 +1,56 @@
+import { Switch } from '@trezor/components';
+import { breakpointMediaQueries } from '@trezor/styles';
+import { spacingsPx } from '@trezor/theme';
+import { Translation } from 'src/components/suite';
+import styled, { css } from 'styled-components';
+
+const StyledSwitch = styled(Switch)<{
+    $hideOnLargeScreens?: boolean;
+    $hideOnSmallScreens?: boolean;
+}>`
+    ${({ $hideOnLargeScreens }) =>
+        $hideOnLargeScreens &&
+        css`
+            ${breakpointMediaQueries.lg} {
+                display: none;
+            }
+        `}
+    ${({ $hideOnSmallScreens }) =>
+        $hideOnSmallScreens &&
+        css`
+            ${breakpointMediaQueries.below_lg} {
+                display: none;
+            }
+        `}
+
+    ${breakpointMediaQueries.below_md} {
+        gap: ${spacingsPx.xs};
+    }
+`;
+
+interface SendMaxSwitchProps {
+    hideOnLargeScreens?: boolean;
+    hideOnSmallScreens?: boolean;
+    isSetMaxActive: boolean;
+    dataTest: string;
+    onChange: () => void;
+}
+
+export const SendMaxSwitch = ({
+    isSetMaxActive,
+    dataTest,
+    onChange,
+    hideOnLargeScreens,
+    hideOnSmallScreens,
+}: SendMaxSwitchProps) => (
+    <StyledSwitch
+        $hideOnLargeScreens={hideOnLargeScreens}
+        $hideOnSmallScreens={hideOnSmallScreens}
+        labelPosition="left"
+        isChecked={isSetMaxActive}
+        dataTest={dataTest}
+        isSmall
+        onChange={onChange}
+        label={<Translation id="AMOUNT_SEND_MAX" />}
+    />
+);