feat: Add final steps (succes,warning, quickActions, emptyState UI) f…

…or add account v2 workflow
LedgerHQ · Jan 16, 2025 · aa30d9e · aa30d9e
1 parent a0119ff
commit aa30d9e
Show file tree

Hide file tree

Showing 28 changed files with 1,026 additions and 282 deletions.
diff --git a/.changeset/sharp-items-nail.md b/.changeset/sharp-items-nail.md
@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/live-wallet": minor
+---
+
+feat: Add final steps (succes,warning, quickActions, emptyState UI) for add account v2 workflow
diff --git a/apps/ledger-live-mobile/src/components/SelectableAccountsList.tsx b/apps/ledger-live-mobile/src/components/SelectableAccountsList.tsx
@@ -30,7 +30,7 @@ import AccountItem from "LLM/features/Accounts/components/AccountsListView/compo
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { BaseComposite, StackNavigatorProps } from "./RootNavigator/types/helpers";
 
-const ANIMATION_DURATION = 200;
+import useAnimatedStyle from "LLM/features/Accounts/screens/ScanDeviceAccounts/components/ScanDeviceAccountsFooter/useAnimatedStyle";
 
 const selectAllHitSlop = {
   top: 16,
@@ -89,57 +89,23 @@ const SelectableAccountsList = ({
   }, [accounts, onUnselectAllProp]);
 
   const areAllSelected = accounts.every(a => selectedIds.indexOf(a.id) > -1);
-  const translateY = useRef(new Animated.Value(50)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
-  const scale = useRef(new Animated.Value(0.8)).current;
   const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
 
-  useEffect(() => {
-    if (!llmNetworkBasedAddAccountFlow?.enabled) return;
-    Animated.parallel([
-      Animated.timing(translateY, {
-        toValue: 0,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: true,
-      }),
-      Animated.timing(scale, {
-        toValue: 1,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [translateY, opacity, scale, llmNetworkBasedAddAccountFlow?.enabled]);
-
-  const animatedSelectableAccount = useMemo(
-    () => ({
-      transform: [{ translateY }, { scale }],
-      opacity,
-    }),
-    [translateY, scale, opacity],
-  );
-
   const renderSelectableAccount = useCallback(
     ({ item, index }: { index: number; item: Account }) =>
       llmNetworkBasedAddAccountFlow?.enabled ? (
-        <Animated.View style={[animatedSelectableAccount]}>
-          <SelectableAccount
-            navigation={navigation}
-            showHint={!index && showHint}
-            rowIndex={index}
-            listIndex={listIndex}
-            account={item}
-            onAccountNameChange={onAccountNameChange}
-            isSelected={forceSelected || selectedIds.indexOf(item.id) > -1}
-            isDisabled={isDisabled}
-            onPress={onPressAccount}
-            useFullBalance={useFullBalance}
-          />
-        </Animated.View>
+        <SelectableAccount
+          navigation={navigation}
+          showHint={!index && showHint}
+          rowIndex={index}
+          listIndex={listIndex}
+          account={item}
+          onAccountNameChange={onAccountNameChange}
+          isSelected={forceSelected || selectedIds.indexOf(item.id) > -1}
+          isDisabled={isDisabled}
+          onPress={onPressAccount}
+          useFullBalance={useFullBalance}
+        />
       ) : (
         <SelectableAccount
           navigation={navigation}
@@ -164,7 +130,6 @@ const SelectableAccountsList = ({
       onAccountNameChange,
       onPressAccount,
       useFullBalance,
-      animatedSelectableAccount,
       llmNetworkBasedAddAccountFlow?.enabled,
     ],
   );
@@ -325,64 +290,66 @@ const SelectableAccount = ({
 
   const subAccountCount = account.subAccounts && account.subAccounts.length;
   const isToken = listTokenTypesForCryptoCurrency(account.currency).length > 0;
-
+  const { animatedSelectableAccount } = useAnimatedStyle();
   const inner = (
-    <Flex
-      marginTop={3}
-      marginBottom={3}
-      marginLeft={6}
-      marginRight={6}
-      paddingLeft={6}
-      paddingRight={6}
-      paddingTop={3}
-      paddingBottom={3}
-      flexDirection="row"
-      alignItems="center"
-      borderRadius={4}
-      opacity={isDisabled ? 0.4 : 1}
-      backgroundColor="neutral.c30"
-    >
-      {llmNetworkBasedAddAccountFlow?.enabled ? (
-        <Flex
-          flex={1}
-          flexDirection="row"
-          height={56}
-          alignItems="center"
-          backgroundColor="neutral.c30"
-          borderRadius="12px"
-          padding="8px"
-          columnGap={8}
-        >
-          <AccountItem account={account} balance={account.spendableBalance} />
-        </Flex>
-      ) : (
-        <Flex flex={1}>
-          <AccountCard
-            useFullBalance={useFullBalance}
-            account={account}
-            AccountSubTitle={
-              subAccountCount && !isDisabled ? (
-                <Flex marginTop={2}>
-                  <Text fontWeight="semiBold" variant="small" color="pillActiveForeground">
-                    <Trans
-                      i18nKey={`selectableAccountsList.${isToken ? "tokenCount" : "subaccountCount"}`}
-                      count={subAccountCount}
-                      values={{ count: subAccountCount }}
-                    />
-                  </Text>
-                </Flex>
-              ) : null
-            }
-          />
-        </Flex>
-      )}
+    <Animated.View style={[animatedSelectableAccount]}>
+      <Flex
+        marginTop={3}
+        marginBottom={3}
+        marginLeft={6}
+        marginRight={6}
+        paddingLeft={6}
+        paddingRight={6}
+        paddingTop={3}
+        paddingBottom={3}
+        flexDirection="row"
+        alignItems="center"
+        borderRadius={4}
+        opacity={isDisabled ? 0.4 : 1}
+        backgroundColor="neutral.c30"
+      >
+        {llmNetworkBasedAddAccountFlow?.enabled ? (
+          <Flex
+            flex={1}
+            flexDirection="row"
+            height={56}
+            alignItems="center"
+            backgroundColor="neutral.c30"
+            borderRadius="12px"
+            padding="8px"
+            columnGap={8}
+          >
+            <AccountItem account={account as Account} balance={account.spendableBalance} />
+          </Flex>
+        ) : (
+          <Flex flex={1}>
+            <AccountCard
+              useFullBalance={useFullBalance}
+              account={account}
+              AccountSubTitle={
+                subAccountCount && !isDisabled ? (
+                  <Flex marginTop={2}>
+                    <Text fontWeight="semiBold" variant="small" color="pillActiveForeground">
+                      <Trans
+                        i18nKey={`selectableAccountsList.${isToken ? "tokenCount" : "subaccountCount"}`}
+                        count={subAccountCount}
+                        values={{ count: subAccountCount }}
+                      />
+                    </Text>
+                  </Flex>
+                ) : null
+              }
+            />
+          </Flex>
+        )}
 
-      {!isDisabled && (
-        <Flex marginLeft={4}>
-          <CheckBox onChange={handlePress} isChecked={!!isSelected} />
-        </Flex>
-      )}
-    </Flex>
+        {!isDisabled && (
+          <Flex marginLeft={4}>
+            <CheckBox onChange={handlePress} isChecked={!!isSelected} />
+          </Flex>
+        )}
+      </Flex>
+    </Animated.View>
   );
 
   if (isDisabled) return inner;

diff --git a/apps/ledger-live-mobile/src/const/navigation.ts b/apps/ledger-live-mobile/src/const/navigation.ts
@@ -542,6 +542,7 @@ export enum ScreenName {
   SelectAccounts = "SelectAccounts",
   ScanDeviceAccounts = "ScanDeviceAccounts",
   AddAccountsWarning = "AddAccountsWarning",
+  NoAssociatedAccounts = "NoAssociatedAccounts",
 }
 
 export enum NavigatorName {

diff --git a/apps/ledger-live-mobile/src/families/hedera/NoAssociatedAccounts.tsx b/apps/ledger-live-mobile/src/families/hedera/NoAssociatedAccounts.tsx
@@ -1,11 +1,14 @@
 import React, { useCallback } from "react";
 import i18next from "i18next";
-import { useTheme } from "@react-navigation/native";
-import { StyleSheet, Linking, Text } from "react-native";
+import { StyleSheet, Linking } from "react-native";
 import { urls } from "~/utils/urls";
 import Touchable, { Props as TouchableProps } from "~/components/Touchable";
 import LText from "~/components/LText";
 import ExternalLink from "~/icons/ExternalLink";
+import { Flex, Icons, Text, Button } from "@ledgerhq/native-ui";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { useTheme } from "styled-components/native";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   style?: {
@@ -16,10 +19,12 @@ type Props = {
 // "no associated accounts" text when adding/importing accounts
 function NoAssociatedAccounts({ style }: Props) {
   const { colors } = useTheme();
-  const c = colors.live;
+  const { t } = useTranslation();
+  const c = colors.primary.c100;
+  const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
   const fontSize = 13;
   const onPress = useCallback(() => Linking.openURL(urls.hedera.supportArticleLink), []);
-  return (
+  return !llmNetworkBasedAddAccountFlow?.enabled ? (
     <Touchable onPress={onPress} style={[style?.paddingHorizontal, styles.root]}>
       <Text>{i18next.t("hedera.createHederaAccountHelp.text") as React.ReactNode}</Text>
       <LText
@@ -30,10 +35,29 @@ function NoAssociatedAccounts({ style }: Props) {
           },
         ]}
       >
-        {i18next.t("hedera.createHederaAccountHelp.link") as React.ReactNode}
+        {t("hedera.createHederaAccountHelp.link") as React.ReactNode}
       </LText>
       <ExternalLink size={fontSize + 2} color={c} />
     </Touchable>
+  ) : (
+    <>
+      <Flex flex={1} alignSelf="stretch" alignItems="center">
+        <Text style={styles.title}> {t("hedera.createHederaAccountHelp.title")}</Text>
+
+        <Text style={styles.desc} color="neutral.c70">
+          {t("hedera.createHederaAccountHelp.description")}
+        </Text>
+      </Flex>
+      <Button
+        size="large"
+        type="shade"
+        testID="button-create-account"
+        Icon={() => <Icons.ExternalLink color={colors.neutral.c20} size="S" />}
+        onPress={onPress}
+      >
+        {t("hedera.createHederaAccountHelp.link")}
+      </Button>
+    </>
   );
 }
 
@@ -44,5 +68,28 @@ const styles = StyleSheet.create({
     alignItems: "center",
     flexWrap: "wrap",
   },
+  title: {
+    marginTop: 32,
+    fontSize: 24,
+    textAlign: "center",
+    width: "100%",
+    fontWeight: 600,
+    fontStyle: "normal",
+    lineHeight: 32.4,
+    letterSpacing: 0.75,
+  },
+  desc: {
+    marginTop: 16,
+    marginBottom: 32,
+    fontSize: 14,
+    width: "100%",
+    lineHeight: 23.8,
+    fontWeight: 500,
+    textAlign: "center",
+    alignSelf: "stretch",
+  },
+  cta: {
+    textTransform: "capitalize",
+  },
 });
 export default NoAssociatedAccounts;
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -99,7 +99,8 @@
       "id": "ID {{ value }}",
       "times": "x{{ value }}"
     },
-    "quote": "Quote"
+    "quote": "Quote",
+    "tryAgain": "Try again"
   },
   "errors": {
     "ReplacementTransactionUnderpriced": {
@@ -4066,18 +4067,29 @@
           "title": "New account"
         },
         "imported": {
-          "title": "Account already in the Portfolio ({{length}})",
-          "title_plural": "Accounts already in the Portfolio ({{length}})"
+          "title": "Account already in the Portfolio ({{count}})",
+          "title_plural": "Accounts already in the Portfolio ({{count}})"
         },
         "migrate": {
           "title": "Accounts to update"
         }
-      }
+      },
+      "retryScanning": "Try Again"
     },
     "addAccountsSuccess": {
       "ctaAddFunds": "Add funds to my account",
       "ctaClose": "Close"
-    }
+    },
+    "addAccountsWarning": {
+      "cantCreateAccount": {
+        "title": "We can’t add a new account",
+        "body": "A new account cannot be added before receiving assets on your {{accountName}} account."
+      },
+      "noAccountToCreate": {
+        "title": "We couldn’t add a new {{currency}} account"
+      }
+    },
+    "chooseAccountToFund": "Choose an account to add funds"
   },
   "DeviceAction": {
     "stayInTheAppPlz": "Stay in the Ledger Live app and keep your Ledger nearby.",
@@ -6560,7 +6572,9 @@
     "name": "hedera",
     "createHederaAccountHelp": {
       "text": "Please refer to this support article for",
-      "link": "how to create a Hedera account"
+      "link": "How to create a Hedera account ?",
+      "title": "We can’t create a new Hedera account",
+      "description": "In the Hedera ecosystem, only a select number of services can create new accounts. While Ledger does not currently offer this onboarding service, alternatives are available. You will be able to add your Hedera account on Ledger Live once it’s created."
     },
     "currentAddress": {
       "messageIfVirtual": "Your {{name}} address cannot be confirmed on your Ledger device. Use at your own risk."