From 4847469680cdfdf6fde5b638aa51ecd3e4e71551 Mon Sep 17 00:00:00 2001
From: Lucas Werey <73439207+LucasWerey@users.noreply.github.com>
Date: Wed, 25 Sep 2024 17:34:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(llm):=20ui=20and=20message=20on=20?=
=?UTF-8?q?receive=20confirmation=20screen=20(#7868)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
:lipstick:(llm): ui and message on receive confirmation screen
---
.changeset/green-starfishes-suffer.md | 5 +
.../modals/Receive/steps/StepReceiveFunds.tsx | 7 +-
.../src/locales/en/common.json | 1 +
.../screens/ReceiveFunds/03-Confirmation.tsx | 104 +++++++++++-------
.../src/currencies/helpers.ts | 4 +
5 files changed, 77 insertions(+), 44 deletions(-)
create mode 100644 .changeset/green-starfishes-suffer.md
diff --git a/.changeset/green-starfishes-suffer.md b/.changeset/green-starfishes-suffer.md
new file mode 100644
index 000000000000..4aacaeeb1498
--- /dev/null
+++ b/.changeset/green-starfishes-suffer.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+add change address disclaimer for utxos accounts
diff --git a/apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepReceiveFunds.tsx b/apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepReceiveFunds.tsx
index 20d0c2c9d7d7..fc9fed00f4d4 100644
--- a/apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepReceiveFunds.tsx
+++ b/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 (
<>
@@ -99,7 +98,7 @@ const Receive1ShareAddress = ({
- {isUTXOCompliant && (
+ {isUTXOCompliantCurrency && (
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
index 38b2c3e0d8c4..3b23fbe1c237 100644
--- a/apps/ledger-live-mobile/src/locales/en/common.json
+++ b/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",
diff --git a/apps/ledger-live-mobile/src/screens/ReceiveFunds/03-Confirmation.tsx b/apps/ledger-live-mobile/src/screens/ReceiveFunds/03-Confirmation.tsx
index a345ece5cd67..8fc419880fcd 100644
--- a/apps/ledger-live-mobile/src/screens/ReceiveFunds/03-Confirmation.tsx
+++ b/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
@@ -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 (
-
+
-
-
+
+ {isUTXOCompliantCurrency && (
+
+ {t("transfer.receive.receiveConfirmation.utxoWarning")}
+
+ )}
+
{t("transfer.receive.receiveConfirmation.sendWarning", {
network: network || currency.name,
})}
@@ -382,21 +405,25 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
{CustomConfirmationAlert && }
-
-
+ {displayBanner && (
+
+
+
+ )}
+
+
-
- {displayBanner ? (
-
-
-
- ) : (
-
-
-
- )}
{verified ? null : isModalOpened ? (
@@ -413,16 +440,13 @@ type BannerProps = {
const WithdrawBanner = ({ onPress, hideBanner }: BannerProps) => {
const { t } = useTranslation();
- const insets = useSafeAreaInsets();
return (
-
- }
- onPressDismiss={hideBanner}
- onPress={onPress}
- />
-
+ }
+ onPressDismiss={hideBanner}
+ onPress={onPress}
+ />
);
};
diff --git a/libs/ledger-live-common/src/currencies/helpers.ts b/libs/ledger-live-common/src/currencies/helpers.ts
index 0c50932a4fd7..70c839fa1e05 100644
--- a/libs/ledger-live-common/src/currencies/helpers.ts
+++ b/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();