💄(llm): ui and message on receive confirmation screen (#7868)

💄(llm): ui and message on receive confirmation screen

.changeset/green-starfishes-suffer.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+add change address disclaimer for utxos accounts

apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepReceiveFunds.tsx

@@ -40,6 +40,7 @@ import { useCompleteActionCallback } from "~/renderer/components/PostOnboardingH
 import { getDefaultAccountName } from "@ledgerhq/live-wallet/accountName";
 import { useMaybeAccountName } from "~/renderer/reducers/wallet";
 import { UTXOAddressAlert } from "~/renderer/components/UTXOAddressAlert";
+import { isUTXOCompliant } from "@ledgerhq/live-common/currencies/helpers";
 
 const Separator = styled.div`
   border-top: 1px solid #99999933;
@@ -56,8 +57,6 @@ const QRCodeWrapper = styled.div`
   background: white;
 `;
 
-const UTXOFamily = ["bitcoin", "bitcoin_cash", "dash", "dogecoin", "litecoin", "zcash", "cardano"];
-
 const Receive1ShareAddress = ({
   account,
   name,
@@ -69,7 +68,7 @@ const Receive1ShareAddress = ({
   address: string;
   showQRCodeModal: () => void;
 }) => {
-  const isUTXOCompliant = UTXOFamily.includes(account.currency.id);
+  const isUTXOCompliantCurrency = isUTXOCompliant(account.currency.family);
   return (
     <>
       <Box horizontal alignItems="center" flow={2} mb={4}>
@@ -99,7 +98,7 @@ const Receive1ShareAddress = ({
       </Box>
       <ReadOnlyAddressField address={address} />
 
-      {isUTXOCompliant && (
+      {isUTXOCompliantCurrency && (
         <Box mt={3}>
           <UTXOAddressAlert />
         </Box>

apps/ledger-live-mobile/src/locales/en/common.json

@@ -3158,6 +3158,7 @@
         }
       },
       "receiveConfirmation": {
+        "utxoWarning": "For privacy reasons, a new address is generated for every transaction. The previous ones do remain valid.",
         "title": "Receive {{currencyTicker}}",
         "onCurrencyName": "On {{currencyName}}",
         "copyAdress": "Copy address",

apps/ledger-live-mobile/src/screens/ReceiveFunds/03-Confirmation.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Linking, Share, View } from "react-native";
+import { Dimensions, Linking, Share, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 import QRCode from "react-native-qrcode-svg";
 import { useTranslation } from "react-i18next";
@@ -27,7 +27,6 @@ import { ScreenName } from "~/const";
 import { track, TrackScreen } from "~/analytics";
 import byFamily from "../../generated/Confirmation";
 import byFamilyPostAlert from "../../generated/ReceiveConfirmationPostAlert";
-
 import { ReceiveFundsStackParamList } from "~/components/RootNavigator/types/ReceiveFundsNavigator";
 import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
 import styled, { BaseStyledProps } from "@ledgerhq/native-ui/components/styled";
@@ -37,12 +36,16 @@ import { BankMedium } from "@ledgerhq/native-ui/assets/icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { hasClosedWithdrawBannerSelector } from "~/reducers/settings";
 import { setCloseWithdrawBanner } from "~/actions/settings";
-import * as Animatable from "react-native-animatable";
 import { useCompleteActionCallback } from "~/logic/postOnboarding/useCompleteAction";
 import { urls } from "~/utils/urls";
 import { useMaybeAccountName } from "~/reducers/wallet";
-
-const AnimatedView = Animatable.View;
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  runOnJS,
+} from "react-native-reanimated";
+import { isUTXOCompliant } from "@ledgerhq/live-common/currencies/helpers";
 
 type ScreenProps = BaseComposite<
   StackNavigatorProps<ReceiveFundsStackParamList, ScreenName.ReceiveConfirmation>
@@ -83,7 +86,7 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
   const insets = useSafeAreaInsets();
 
   const hasClosedWithdrawBanner = useSelector(hasClosedWithdrawBannerSelector);
-  const [displayBanner, setBanner] = useState(!hasClosedWithdrawBanner);
+  const [displayBanner, setDisplayBanner] = useState(!hasClosedWithdrawBanner);
 
   const onRetry = useCallback(() => {
     track("button_clicked", {
@@ -113,8 +116,9 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
       button: "How to withdraw from exchange",
       page: "Receive Account Qr Code",
     });
+
     dispatch(setCloseWithdrawBanner(true));
-    setBanner(false);
+    setDisplayBanner(false);
   }, [dispatch]);
 
   const clickLearn = () => {
@@ -125,6 +129,7 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
     });
     Linking.openURL(urls.withdrawCrypto);
   };
+
   useEffect(() => {
     if (route.params?.createTokenAccount && !hasAddedTokenAccount) {
       const newMainAccount = { ...mainAccount };
@@ -225,9 +230,26 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
 
   const mainAccountName = useMaybeAccountName(mainAccount);
 
+  const screenHeight = Dimensions.get("window").height;
+  const bannerHeight = useSharedValue(screenHeight * 0.23);
+  const bannerOpacity = useSharedValue(1);
+
+  const animatedBannerStyle = useAnimatedStyle(() => ({
+    height: withTiming(bannerHeight.value, { duration: 200 }, onFinish => {
+      if (onFinish && bannerHeight.value === 0) {
+        runOnJS(hideBanner)();
+      }
+    }),
+    opacity: withTiming(bannerOpacity.value, { duration: 200 }),
+  }));
+
+  const handleBannerClose = useCallback(() => {
+    bannerHeight.value = 0;
+    bannerOpacity.value = 0;
+  }, [bannerHeight, bannerOpacity]);
+
   if (!account || !currency || !mainAccount) return null;
 
-  // check for coin specific UI
   if (currency.type === "CryptoCurrency" && Object.keys(byFamily).includes(currency.family)) {
     const CustomConfirmation =
       currency.type === "CryptoCurrency"
@@ -255,8 +277,11 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
         : null;
   }
 
+  const isAnAccount = account.type === "Account";
+  const isUTXOCompliantCurrency = isAnAccount && isUTXOCompliant(account.currency.family);
+
   return (
-    <Flex flex={1} mb={insets.bottom}>
+    <Flex flex={1}>
       <NavigationScrollView style={{ flex: 1 }}>
         <TrackScreen
           category="Deposit"
@@ -365,15 +390,13 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
               )}
             </StyledTouchableOpacity>
           </Flex>
-          <Flex px={6}>
-            <Text
-              variant="small"
-              fontWeight="medium"
-              color="neutral.c70"
-              mt={6}
-              mb={4}
-              textAlign="center"
-            >
+          <Flex px={6} flexDirection="column" rowGap={8} mt={6}>
+            {isUTXOCompliantCurrency && (
+              <Text variant="small" fontWeight="medium" color="neutral.c70" textAlign="center">
+                {t("transfer.receive.receiveConfirmation.utxoWarning")}
+              </Text>
+            )}
+            <Text variant="small" fontWeight="medium" color="neutral.c70" mb={4} textAlign="center">
               {t("transfer.receive.receiveConfirmation.sendWarning", {
                 network: network || currency.name,
               })}
@@ -382,21 +405,25 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
           {CustomConfirmationAlert && <CustomConfirmationAlert mainAccount={mainAccount} />}
         </Flex>
       </NavigationScrollView>
-      <Flex m={6}>
-        <Flex>
+      {displayBanner && (
+        <Animated.View style={[animatedBannerStyle, { marginHorizontal: 16, marginTop: 16 }]}>
+          <WithdrawBanner hideBanner={handleBannerClose} onPress={clickLearn} />
+        </Animated.View>
+      )}
+      <Flex
+        px={6}
+        mt={6}
+        position="absolute"
+        bottom={0}
+        left={0}
+        right={0}
+        backgroundColor="background.main"
+        paddingBottom={insets.bottom}
+      >
+        <Flex my={4}>
           <Button type="main" size="large" onPress={onRetry} testID="button-receive-confirmation">
             {t("transfer.receive.receiveConfirmation.verifyAddress")}
           </Button>
-
-          {displayBanner ? (
-            <AnimatedView animation="fadeInUp" delay={50} duration={300}>
-              <WithdrawBanner hideBanner={hideBanner} onPress={clickLearn} />
-            </AnimatedView>
-          ) : (
-            <AnimatedView animation="fadeOutDown" delay={50} duration={300}>
-              <WithdrawBanner hideBanner={hideBanner} onPress={clickLearn} />
-            </AnimatedView>
-          )}
         </Flex>
       </Flex>
       {verified ? null : isModalOpened ? (
@@ -413,16 +440,13 @@ type BannerProps = {
 
 const WithdrawBanner = ({ onPress, hideBanner }: BannerProps) => {
   const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
   return (
-    <Flex pb={insets.bottom} mt={6}>
-      <BannerCard
-        typeOfRightIcon="close"
-        title={t("transfer.receive.receiveConfirmation.bannerTitle")}
-        LeftElement={<BankMedium />}
-        onPressDismiss={hideBanner}
-        onPress={onPress}
-      />
-    </Flex>
+    <BannerCard
+      typeOfRightIcon="close"
+      title={t("transfer.receive.receiveConfirmation.bannerTitle")}
+      LeftElement={<BankMedium />}
+      onPressDismiss={hideBanner}
+      onPress={onPress}
+    />
   );
 };

libs/ledger-live-common/src/currencies/helpers.ts

@@ -16,6 +16,10 @@ export function isTokenCurrency(currency: Currency): currency is TokenCurrency {
   return currency.type === "TokenCurrency";
 }
 
+export function isUTXOCompliant(currencyFamilly: string): boolean {
+  return currencyFamilly === "bitcoin" || currencyFamilly === "cardano";
+}
+
 export function listCurrencies(includeTokens: boolean): CryptoOrTokenCurrency[] {
   const currencies = listSupportedCurrencies();