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

Improve layout in ValidateOnDevice #1975

Merged
merged 5 commits into from
Nov 28, 2022
Merged

Improve layout in ValidateOnDevice #1975

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f163e8
Improve layout in ValidateOnDevice
ofreyssinet-ledger Nov 25, 2022
da49d78
Changeset
ofreyssinet-ledger Nov 25, 2022
24441c5
put back log component for address rendering
ofreyssinet-ledger Nov 25, 2022
730bbf3
fix typing
ofreyssinet-ledger Nov 25, 2022
29fdc1e
Fix centering of scrollview
ofreyssinet-ledger Nov 25, 2022
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
5 changes: 5 additions & 0 deletions .changeset/funny-ants-accept.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"live-mobile": patch
---

Device actions: remove unnecessary padding & replace huge text by smaller text
36 changes: 15 additions & 21 deletions apps/ledger-live-mobile/src/components/DeviceAction/rendering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@ import {
Flex,
Tag,
Icons,
Log,
BoxedIcon,
Log,
} from "@ledgerhq/native-ui";
import { LockAltMedium } from "@ledgerhq/native-ui/assets/icons";
import {
LockAltMedium,
DownloadMedium,
} from "@ledgerhq/native-ui/assets/icons";
import BigNumber from "bignumber.js";
import {
ExchangeRate,
Expand All @@ -37,7 +40,6 @@ import {
import { TFunction } from "react-i18next";
import { DeviceModelId } from "@ledgerhq/types-devices";
import type { DeviceModelInfo } from "@ledgerhq/types-live";
import { DownloadMedium } from "@ledgerhq/native-ui/assets/icons";
import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
import { StackNavigationProp } from "@react-navigation/stack";
import { ParamListBase } from "@react-navigation/native";
Expand Down Expand Up @@ -109,24 +111,12 @@ const CenteredText = styled(Text).attrs({
textAlign: "center",
})``;

const TitleContainer = styled(Flex).attrs({
py: 8,
})``;

const TitleText = ({
children,
disableUppercase,
}: {
children: React.ReactNode;
disableUppercase?: boolean;
}) => (
<TitleContainer>
<Log
extraTextProps={disableUppercase ? { textTransform: "none" } : undefined}
>
export const TitleText = ({ children }: { children: React.ReactNode }) => (
<Flex>
<Text textAlign="center" variant="h4" fontWeight="semiBold">
Copy link
Contributor Author

@ofreyssinet-ledger ofreyssinet-ledger Nov 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

validated with Aamir, we don't need the huge padding above and below and h4 is a better variant than the <Log /> component.

{children}
</Log>
</TitleContainer>
</Text>
</Flex>
);

const DescriptionText = styled(CenteredText).attrs({
Expand Down Expand Up @@ -243,7 +233,11 @@ export function renderVerifyAddress({
onPress={onPress}
/>
)}
{address && <TitleText disableUppercase>{address}</TitleText>}
{address && (
<Flex py={8}>
<Log extraTextProps={{ textTransform: "none" }}>{address}</Log>
</Flex>
)}
</ActionContainer>
</Wrapper>
);
Expand Down
47 changes: 15 additions & 32 deletions apps/ledger-live-mobile/src/components/ValidateOnDevice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ import { getDeviceModel } from "@ledgerhq/devices";

import { useTheme } from "@react-navigation/native";
import styled from "styled-components/native";
import { Flex, Log } from "@ledgerhq/native-ui";
import { Flex } from "@ledgerhq/native-ui";
import { DeviceModelId } from "@ledgerhq/types-devices";
import Alert from "./Alert";
import perFamilyTransactionConfirmFields from "../generated/TransactionConfirmFields";
import { DataRowUnitValue, TextValueField } from "./ValidateOnDeviceDataRow";
import Animation from "./Animation";
import { getDeviceAnimation } from "../helpers/getDeviceAnimation";
import { TitleText } from "./DeviceAction/rendering";

export type FieldComponentProps = {
account: AccountLike;
Expand Down Expand Up @@ -181,15 +183,20 @@ export default function ValidateOnDevice({
? transTitleWording
: t("ValidateOnDevice.title.send", getDeviceModel(device.modelId));

const isBigLottie = device.modelId === DeviceModelId.nanoFTS;

return (
<RootContainer>
<ScrollContainer>
<ScrollView
// @ts-expect-error this property actually working and the only way to do what we want (contentContainerStyle doesn't work)
ofreyssinet-ledger marked this conversation as resolved.
Show resolved Hide resolved
justifyContent="center"
>
<InnerContainer>
<AnimationContainer>
<Flex marginBottom={isBigLottie ? 0 : 8}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

validated with Aamir

<Animation
source={getDeviceAnimation({ device, key: "validate", theme })}
/>
</AnimationContainer>
</Flex>
{Title ? (
<Title
account={account}
Expand Down Expand Up @@ -235,13 +242,13 @@ export default function ValidateOnDevice({
) : null}
</DataRowsContainer>
</InnerContainer>
</ScrollContainer>
</ScrollView>
{Footer ? (
<Footer transaction={transaction} recipientWording={recipientWording} />
) : (
<FooterContainer>
<Flex>
<Alert type="help">{recipientWording}</Alert>
</FooterContainer>
</Flex>
)}
</RootContainer>
);
Expand All @@ -252,36 +259,12 @@ const RootContainer = styled(Flex).attrs({
})``;

const DataRowsContainer = styled(Flex).attrs({
marginVertical: 24,
my: 7,
alignSelf: "stretch",
})``;

const InnerContainer = styled(Flex).attrs({
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
flex: 1,
})``;

const FooterContainer = styled(Flex).attrs({
padding: 16,
})``;

const AnimationContainer = styled(Flex).attrs({
marginBottom: 40,
})``;

const ScrollContainer = styled(ScrollView)`
flex: 1;
padding: 16px;
`;

const TitleContainer = styled(Flex).attrs({
py: 8,
})``;

const TitleText = ({ children }: { children: React.ReactNode }) => (
<TitleContainer>
<Log>{children}</Log>
</TitleContainer>
);
6 changes: 5 additions & 1 deletion apps/ledger-live-mobile/src/screens/ConnectDevice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import invariant from "invariant";
import React, { useCallback, useMemo } from "react";
import { StyleSheet } from "react-native";
import { useSelector } from "react-redux";
import { SafeAreaView } from "react-native-safe-area-context";
import { Edge, SafeAreaView } from "react-native-safe-area-context";
import { useTranslation } from "react-i18next";
import { getMainAccount } from "@ledgerhq/live-common/account/index";
import { createAction } from "@ledgerhq/live-common/hw/actions/transaction";
Expand Down Expand Up @@ -238,6 +238,7 @@ export default function ConnectDevice({ route, navigation }: Props) {
() =>
transaction ? (
<SafeAreaView
edges={edges}
style={[
styles.root,
{
Expand Down Expand Up @@ -270,6 +271,9 @@ export default function ConnectDevice({ route, navigation }: Props) {
[status, transaction, tokenCurrency, route.params.device],
);
}

const edges = ["bottom"] as Edge[];

const styles = StyleSheet.create({
root: {
flex: 1,
Expand Down