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();