Merge pull request #2297 from LedgerHQ/support/LIVE-1509-tezos-tx-flo…

…w-cleanup

Support/live 1509 tezos tx flow cleanup

package.json

@@ -68,7 +68,7 @@
     "@ledgerhq/hw-transport-http": "6.24.1",
     "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#develop",
     "@ledgerhq/logs": "6.10.0",
-    "@ledgerhq/native-ui": "^0.7.5",
+    "@ledgerhq/native-ui": "^0.7.6",
     "@ledgerhq/react-native-hid": "6.24.1",
     "@ledgerhq/react-native-hw-transport-ble": "6.25.1",
     "@ledgerhq/react-native-ledger-core": "4.19.1",

src/components/AccountCard.tsx

@@ -43,10 +43,7 @@ const AccountCard = ({
     getTagDerivationMode(currency as CryptoCurrency, account.derivationMode);
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.6}
-      onPress={!disabled ? onPress : undefined}
-    >
+    <TouchableOpacity disabled={disabled} onPress={onPress}>
       <Card
         flexDirection="row"
         paddingY={4}

src/components/ExternalLink.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { StyleSheet } from "react-native";
-import { useTheme } from "@react-navigation/native";
+import { useTheme } from "styled-components/native";
 import LText from "./LText";
 import Touchable from "./Touchable";
 import ExternalLink from "../icons/ExternalLink";
@@ -29,7 +29,7 @@ const Link = ({
   fontSize = 12,
 }: Props) => {
   const { colors } = useTheme();
-  const c = color || colors.live;
+  const c = color || colors.primary.c80;
   return (
     <Touchable
       event={event}

src/components/InfoModal.tsx

@@ -0,0 +1,156 @@
+import React, { memo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Trans } from "react-i18next";
+
+import { useTheme } from "styled-components/native";
+import { Icons, IconBox, Flex, Button } from "@ledgerhq/native-ui";
+import BottomModal from "./BottomModal";
+import LText from "./LText";
+import IconArrowRight from "../icons/ArrowRight";
+import type { Props as ModalProps } from "./BottomModal";
+
+type BulletItem = {
+  key: string;
+  val: React.ReactNode;
+};
+
+type InfoModalProps = ModalProps & {
+  id?: string;
+  title?: React.ReactNode;
+  desc?: React.ReactNode;
+  bullets?: BulletItem[];
+  Icon?: React.ReactNode;
+  withCancel?: boolean;
+  onContinue?: () => void;
+  children?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  confirmProps?: any;
+};
+
+const InfoModal = ({
+  isOpened,
+  onClose,
+  id,
+  title,
+  desc,
+  bullets,
+  Icon = Icons.InfoMedium,
+  withCancel,
+  onContinue,
+  children,
+  confirmLabel,
+  confirmProps,
+  style,
+  containerStyle,
+}: InfoModalProps) => (
+  <BottomModal
+    id={id}
+    isOpened={isOpened}
+    onClose={onClose}
+    style={[styles.modal, style || {}]}
+  >
+    <Flex alignItems="center">
+      <IconBox Icon={Icon} color="primary.c80" boxSize={64} iconSize={24} />
+      {title ? (
+        <LText style={styles.modalTitle} semiBold>
+          {title}
+        </LText>
+      ) : null}
+
+      {desc ? (
+        <LText style={styles.modalDesc} color="smoke">
+          {desc}
+        </LText>
+      ) : null}
+      {bullets ? (
+        <View style={styles.bulletsContainer}>
+          {bullets.map(b => (
+            <BulletLine key={b.key}>{b.val}</BulletLine>
+          ))}
+        </View>
+      ) : null}
+      <View
+        style={[
+          !title && !desc && !bullets ? styles.childrenContainer : null,
+          containerStyle,
+        ]}
+      >
+        {children}
+      </View>
+    </Flex>
+
+    <Flex pt={6}>
+      {withCancel ? (
+        <Button
+          event={(id || "") + "InfoModalClose"}
+          type={undefined}
+          onPress={onClose}
+          mt={7}
+        >
+          <Trans i18nKey="common.cancel" />
+        </Button>
+      ) : null}
+      <Button
+        event={(id || "") + "InfoModalGotIt"}
+        type="main"
+        onPress={onContinue || onClose}
+        {...confirmProps}
+        mt={7}
+      >
+        {confirmLabel || <Trans i18nKey="common.gotit" />}
+      </Button>
+    </Flex>
+  </BottomModal>
+);
+
+function BulletLine({ children }: { children: any }) {
+  const { colors } = useTheme();
+  return (
+    <View style={styles.bulletLine}>
+      <IconArrowRight size={16} color={colors.neutral.c70} />
+      <LText style={styles.bulletLineText} color={colors.neutral.c70}>
+        {children}
+      </LText>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    alignItems: "center",
+  },
+  modalTitle: {
+    marginVertical: 16,
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  modalDesc: {
+    textAlign: "center",
+
+    marginBottom: 24,
+  },
+  bulletsContainer: {
+    alignSelf: "flex-start",
+  },
+  bulletLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  bulletLineText: {
+    marginLeft: 4,
+    textAlign: "left",
+  },
+  childrenContainer: {
+    paddingTop: 24,
+  },
+  footer: {
+    alignSelf: "stretch",
+    paddingTop: 24,
+    flexDirection: "row",
+  },
+});
+
+export default memo<InfoModalProps>(InfoModal);

src/components/RootNavigator/AccountSettingsNavigator.js

@@ -31,7 +31,7 @@ export default function AccountSettingsNavigator() {
         component={AccountSettingsMain}
         options={{
           title: t("account.settings.header"),
-          headerRight: closableNavconfig.headerRight,
+          headerRight: null,
         }}
       />
       <Stack.Screen

src/components/ValidateSuccess.tsx

@@ -0,0 +1,97 @@
+import React, { memo } from "react";
+import { Trans } from "react-i18next";
+import { Icons, IconBox, Text, Flex, Button, Log } from "@ledgerhq/native-ui";
+
+import Alert from "./Alert";
+
+type Props = {
+  onClose?: () => void;
+  onViewDetails?: () => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  primaryButton?: React.ReactNode;
+  secondaryButton?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconColor?: string;
+  iconBoxSize: number;
+  iconSize: number;
+  info?: React.ReactNode;
+  onLearnMore?: () => void;
+};
+
+function ValidateSuccess({
+  onClose,
+  onViewDetails,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  icon = Icons.CheckAloneMedium,
+  iconColor = "success.c100",
+  iconBoxSize = 64,
+  iconSize = 24,
+  info,
+  onLearnMore,
+}: Props) {
+  return (
+    <Flex flex={1} p={6}>
+      <Flex
+        flex={1}
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <IconBox
+          Icon={icon}
+          color={iconColor}
+          boxSize={iconBoxSize}
+          iconSize={iconSize}
+        />
+        <Flex py={8}>
+          <Log>{title || <Trans i18nKey="send.validation.sent" />}</Log>
+        </Flex>
+        <Text
+          variant="body"
+          fontWeight="medium"
+          color="neutral.c70"
+          mt={6}
+          mb={7}
+          textAlign="center"
+        >
+          {description || <Trans i18nKey="send.validation.confirm" />}
+        </Text>
+        {info && (
+          <Alert type="primary" onLearnMore={onLearnMore}>
+            {info}
+          </Alert>
+        )}
+      </Flex>
+      <Flex>
+        {primaryButton ||
+          (onViewDetails && (
+            <Button
+              event="SendSuccessViewDetails"
+              type="main"
+              onPress={onViewDetails}
+              mt={7}
+            >
+              <Trans i18nKey="send.validation.button.details" />
+            </Button>
+          ))}
+        {secondaryButton ||
+          (onClose && (
+            <Button
+              event="SendSuccessClose"
+              type={undefined}
+              onPress={onClose}
+              mt={7}
+            >
+              <Trans i18nKey="common.close" />
+            </Button>
+          ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+export default memo<Props>(ValidateSuccess);

src/families/tezos/AccountHeader.tsx

@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
   },
   btn: {
     marginTop: 16,
-    width: 140,
+    width: 160,
   },
 });
 

src/families/tezos/DelegationFlow/Started.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback } from "react";
+import { Linking } from "react-native";
+import { Trans } from "react-i18next";
+import { Flex, Text, Icons, List, Link, Button, Log } from "@ledgerhq/native-ui";
+import { ScreenName } from "../../../const";
+import { TrackScreen } from "../../../analytics";
+import { urls } from "../../../config/urls";
+import Illustration from "../../../images/illustration/Illustration";
+import EarnLight from "../../../images/illustration/Earn.light.png";
+import EarnDark from "../../../images/illustration/Earn.dark.png";
+
+type Props = {
+  navigation: any;
+  route: { params: any };
+};
+
+const Check = <Icons.CheckAloneMedium size={20} color={"success.c100"} />;
+
+export default function DelegationStarted({ navigation, route }: Props) {
+  const onNext = useCallback(() => {
+    navigation.navigate(ScreenName.DelegationSummary, {
+      ...route.params,
+    });
+  }, [navigation, route.params]);
+
+  const howDelegationWorks = useCallback(() => {
+    Linking.openURL(urls.delegation);
+  }, []);
+
+  return (
+    <Flex flex={1} justifyContent="space-between" bg="background.main">
+      <Flex m={6}>
+        <TrackScreen category="DelegationFlow" name="Started" />
+        <Flex alignItems="center">
+          <Illustration
+            lightSource={EarnLight}
+            darkSource={EarnDark}
+            size={150}
+          />
+        </Flex>
+        <Flex py={8} alignItems="center">
+          <Log>
+            <Trans i18nKey="delegation.started.title" />
+          </Log>
+        </Flex>
+        <Text variant="body" fontWeight="medium" textAlign="center" mb={6}>
+          <Trans i18nKey="delegation.started.description" />
+        </Text>
+        <List
+          items={[
+            <Trans i18nKey="delegation.started.steps.0" />,
+            <Trans i18nKey="delegation.started.steps.1" />,
+            <Trans i18nKey="delegation.started.steps.2" />,
+          ].map(wording => ({ title: wording, bullet: Check }))}
+          itemContainerProps={{
+            alignItems: "center",
+          }}
+          my={8}
+        />
+        <Link
+          type="color"
+          size="medium"
+          iconPosition="right"
+          Icon={Icons.ExternalLinkMedium}
+          onPress={howDelegationWorks}
+        >
+          <Trans i18nKey="delegation.howDelegationWorks" />
+        </Link>
+      </Flex>
+      <Flex p={6}>
+        <Button event="DelegationStartedBtn" onPress={onNext} type="main">
+          <Trans i18nKey="delegation.started.cta" />
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}