fix: wrap lld memo tag send flow info box under a feature flag (#8388)

LedgerHQ · Nov 18, 2024 · 3d3c032 · 3d3c032
1 parent a6d347e
commit 3d3c032
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 40 deletions.
diff --git a/.changeset/moody-deers-marry.md b/.changeset/moody-deers-marry.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+use feature flag for send flow intermediary screen memo tag
diff --git a/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepRecipient.tsx b/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepRecipient.tsx
@@ -27,6 +27,7 @@ import { Flex, Text } from "@ledgerhq/react-ui";
 import CheckBox from "~/renderer/components/CheckBox";
 import { alwaysShowMemoTagInfoSelector } from "~/renderer/reducers/application";
 import { toggleShouldDisplayMemoTagInfo } from "~/renderer/actions/application";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 const StepRecipient = ({
   t,
@@ -48,6 +49,7 @@ const StepRecipient = ({
 }: StepProps) => {
   const isMemoTagBoxVisibile = useSelector(memoTagBoxVisibilitySelector);
   const forceAutoFocusOnMemoField = useSelector(forceAutoFocusOnMemoFieldSelector);
+  const lldMemoTag = useFeature("lldMemoTag");
 
   if (!status || !account) return null;
 
@@ -63,7 +65,7 @@ const StepRecipient = ({
         currencyName={currencyName}
         isNFTSend={isNFTSend}
       />
-      {isMemoTagBoxVisibile ? (
+      {isMemoTagBoxVisibile && lldMemoTag?.enabled ? (
         <MemoTagSendInfo />
       ) : (
         <>
@@ -140,6 +142,7 @@ export const StepRecipientFooter = ({
   transaction,
 }: StepProps) => {
   const dispatch = useDispatch();
+  const lldMemoTag = useFeature("lldMemoTag");
   const { errors } = status;
   const mainAccount = account ? getMainAccount(account, parentAccount) : null;
   const isTerminated = mainAccount && mainAccount.currency.terminated;
@@ -151,6 +154,7 @@ export const StepRecipientFooter = ({
 
   const handleOnNext = async () => {
     if (
+      lldMemoTag?.enabled &&
       !transaction?.memo &&
       MEMO_TAG_COINS.includes(transaction?.family as string) &&
       alwaysShowMemoTagInfo
@@ -187,7 +191,7 @@ export const StepRecipientFooter = ({
     dispatch(toggleShouldDisplayMemoTagInfo(!alwaysShowMemoTagInfo));
   };
 
-  return isMemoTagBoxVisibile ? (
+  return isMemoTagBoxVisibile && lldMemoTag?.enabled ? (
     <Flex justifyContent="space-between" width="100%">
       <Flex alignItems="center">
         <CheckBox isChecked={!alwaysShowMemoTagInfo} onChange={handleOnCheckboxChange} />

diff --git a/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepSummary.tsx b/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepSummary.tsx
@@ -29,6 +29,7 @@ import { useMaybeAccountUnit } from "~/renderer/hooks/useAccountUnit";
 import { useMaybeAccountName } from "~/renderer/reducers/wallet";
 import MemoIcon from "~/renderer/icons/MemoIcon";
 import { Flex } from "@ledgerhq/react-ui";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 const FromToWrapper = styled.div``;
 const Circle = styled.div`
@@ -63,6 +64,7 @@ const StepSummary = (props: StepProps) => {
   const mainAccount = account && getMainAccount(account, parentAccount);
   const unit = useMaybeAccountUnit(account);
   const accountName = useMaybeAccountName(account);
+  const lldMemoTag = useFeature("lldMemoTag");
 
   if (!account || !mainAccount || !transaction) {
     return null;
@@ -171,46 +173,59 @@ const StepSummary = (props: StepProps) => {
               </Ellipsis>
             </Box>
           </Box>
-          {memo && (
-            <>
-              <VerticalSeparator />
-              <Flex justifyContent="space-between">
-                <Box horizontal alignItems="center">
-                  <Circle>
-                    <MemoIcon size={14} />
-                  </Circle>
-                  <Box flex={1}>
-                    <Text ff="Inter|Medium" color="palette.text.shade40" fontSize={4}>
-                      <Trans i18nKey="operationDetails.extra.memo" />
+          {lldMemoTag?.enabled
+            ? memo && (
+                <>
+                  <VerticalSeparator />
+                  <Flex justifyContent="space-between">
+                    <Box horizontal alignItems="center">
+                      <Circle>
+                        <MemoIcon size={14} />
+                      </Circle>
+                      <Box flex={1}>
+                        <Text ff="Inter|Medium" color="palette.text.shade40" fontSize={4}>
+                          <Trans i18nKey="operationDetails.extra.memo" />
+                        </Text>
+                        <Ellipsis>
+                          <Text
+                            ff="Inter"
+                            color={
+                              transaction.recipientDomain
+                                ? "palette.text.shade70"
+                                : "palette.text.shade100"
+                            }
+                            fontSize={4}
+                            data-testid="recipient-address"
+                          >
+                            {memo}
+                          </Text>
+                        </Ellipsis>
+                      </Box>
+                    </Box>
+                    <Button
+                      lighterPrimary
+                      style={{
+                        backgroundColor: "transparent",
+                      }}
+                      onClick={handleOnEditMemo}
+                    >
+                      Edit
+                    </Button>
+                  </Flex>
+                </>
+              )
+            : memo && (
+                <Box horizontal justifyContent="space-between" alignItems="center" mb={2}>
+                  <Text ff="Inter|Medium" color="palette.text.shade40" fontSize={4}>
+                    <Trans i18nKey="operationDetails.extra.memo" />
+                  </Text>
+                  <Ellipsis ml={2}>
+                    <Text ff="Inter|Medium" fontSize={4}>
+                      {memo}
                     </Text>
-                    <Ellipsis>
-                      <Text
-                        ff="Inter"
-                        color={
-                          transaction.recipientDomain
-                            ? "palette.text.shade70"
-                            : "palette.text.shade100"
-                        }
-                        fontSize={4}
-                        data-testid="recipient-address"
-                      >
-                        {memo}
-                      </Text>
-                    </Ellipsis>
-                  </Box>
+                  </Ellipsis>
                 </Box>
-                <Button
-                  lighterPrimary
-                  style={{
-                    backgroundColor: "transparent",
-                  }}
-                  onClick={handleOnEditMemo}
-                >
-                  Edit
-                </Button>
-              </Flex>
-            </>
-          )}
+              )}
         </Box>
         <Separator />
         {!isNFTSend ? (