Add memo-required flows for Dapp + Normal send

extension/e2e-tests/onboarding.test.ts

@@ -369,7 +369,8 @@ test("Incorrect mnemonic phrase", async ({ page }) => {
   const shuffledWords = shuffle(words);
 
   for (let i = 0; i < shuffledWords.length; i++) {
-    await page.getByLabel(shuffledWords[i]).check({ force: true });
+    // Use nth() to handle duplicate labels by selecting the first matching element
+    await page.getByLabel(shuffledWords[i]).first().check({ force: true });
   }
 
   await page.getByTestId("display-mnemonic-phrase-confirm-btn").click();

extension/src/popup/components/InternalTransaction/EditMemo/index.tsx

@@ -4,6 +4,7 @@ import { Field, FieldProps, Form, Formik } from "formik";
 import { useTranslation } from "react-i18next";
 
 import { View } from "popup/basics/layout/View";
+import { useValidateMemo } from "popup/helpers/useValidateMemo";
 
 import "./styles.scss";
 
@@ -19,61 +20,82 @@ interface EditMemoProps {
 
 export const EditMemo = ({ memo, onClose, onSubmit }: EditMemoProps) => {
   const { t } = useTranslation();
+  const [localMemo, setLocalMemo] = React.useState(memo);
+  const { error: memoError } = useValidateMemo(localMemo);
+
   const initialValues: FormValue = {
     memo,
   };
-  const handleSubmit = async (values: FormValue) => {
+
+  const handleSubmit = (values: FormValue) => {
+    // Prevent submission if there's a validation error
+    if (memoError) {
+      return;
+    }
     onSubmit(values);
   };
 
+  const handleFieldChange = (value: string) => {
+    setLocalMemo(value);
+  };
+
+  const renderField = ({ field }: FieldProps) => (
+    <Input
+      data-testid="edit-memo-input"
+      autoFocus
+      fieldSize="md"
+      autoComplete="off"
+      id="memo"
+      placeholder={t("Type your memo")}
+      {...field}
+      onChange={(e) => {
+        field.onChange(e);
+        handleFieldChange(e.target.value);
+      }}
+      error={memoError}
+    />
+  );
+
+  const renderForm = () => (
+    <Form className="EditMemo__form">
+      <Field name="memo">{renderField}</Field>
+      <div className="EditMemo__description">
+        {t("What is this transaction for? (optional)")}
+      </div>
+      <div className="EditMemo__actions">
+        <Button
+          type="button"
+          size="md"
+          isRounded
+          variant="tertiary"
+          onClick={onClose}
+        >
+          {t("Cancel")}
+        </Button>
+        <Button
+          type="submit"
+          size="md"
+          isRounded
+          variant="secondary"
+          disabled={!!memoError}
+        >
+          {t("Save")}
+        </Button>
+      </div>
+    </Form>
+  );
+
   return (
     <View.Content hasNoTopPadding>
       <div className="EditMemo">
         <Card>
-          <p>Memo</p>
-          <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-            {({ errors }) => (
-              <>
-                <Form className="EditMemo__form">
-                  <Field name="memo">
-                    {({ field }: FieldProps) => (
-                      <Input
-                        data-testid="edit-memo-input"
-                        autoFocus
-                        fieldSize="md"
-                        autoComplete="off"
-                        id="memo"
-                        placeholder={"Memo"}
-                        {...field}
-                        error={errors.memo}
-                      />
-                    )}
-                  </Field>
-                  <div className="EditMemo__description">
-                    What is this transaction for? (optional)
-                  </div>
-                  <div className="EditMemo__actions">
-                    <Button
-                      type="button"
-                      size="md"
-                      isRounded
-                      variant="tertiary"
-                      onClick={onClose}
-                    >
-                      {t("Cancel")}
-                    </Button>
-                    <Button
-                      type="submit"
-                      size="md"
-                      isRounded
-                      variant="secondary"
-                    >
-                      {t("Save")}
-                    </Button>
-                  </div>
-                </Form>
-              </>
-            )}
+          <p>{t("Memo")}</p>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            enableReinitialize
+          >
+            {renderForm}
           </Formik>
         </Card>
       </div>

extension/src/popup/components/InternalTransaction/EditSettings/index.tsx

@@ -56,8 +56,8 @@ export const EditSettings = ({
                       fieldSize="md"
                       autoComplete="off"
                       id="fee"
-                      placeholder={"Fee"}
-                      label="Transaction Fee"
+                      placeholder={t("Fee")}
+                      label={t("Transaction Fee")}
                       {...field}
                       error={errors.fee}
                       onChange={(e) => {
@@ -92,7 +92,7 @@ export const EditSettings = ({
                 </Field>
                 <div className="EditTxSettings__congestion">
                   <CongestionIndicator congestion={congestion} />
-                  {congestion} congestion
+                  {congestion} {t("congestion")}
                 </div>
                 <Field name="timeout">
                   {({ field }: FieldProps) => (
@@ -101,8 +101,8 @@ export const EditSettings = ({
                       fieldSize="md"
                       autoComplete="off"
                       id="timeout"
-                      placeholder={"Timeout"}
-                      label="Timeout (seconds)"
+                      placeholder={t("Timeout")}
+                      label={t("Timeout (seconds)")}
                       {...field}
                       error={errors.timeout}
                       onChange={(e) => {

extension/src/popup/components/InternalTransaction/ReviewTransaction/index.tsx

@@ -24,11 +24,13 @@ import { IdenticonImg } from "popup/components/identicons/IdenticonImg";
 import {
   BlockaidTxScanLabel,
   BlockAidTxScanExpanded,
+  MemoRequiredLabel,
 } from "popup/components/WarningMessages";
 import { HardwareSign } from "popup/components/hardwareConnect/HardwareSign";
 import { hardwareWalletTypeSelector } from "popup/ducks/accountServices";
 import { MultiPaneSlider } from "popup/components/SlidingPaneSwitcher";
 import { CopyValue } from "popup/components/CopyValue";
+import { useValidateTransactionMemo } from "popup/helpers/useValidateTransactionMemo";
 
 import "./styles.scss";
 
@@ -49,6 +51,7 @@ interface ReviewTxProps {
   title: string;
   onConfirm: () => void;
   onCancel: () => void;
+  onAddMemo?: () => void;
 }
 
 export const ReviewTx = ({
@@ -63,6 +66,7 @@ export const ReviewTx = ({
   title,
   onConfirm,
   onCancel,
+  onAddMemo,
 }: ReviewTxProps) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -77,6 +81,14 @@ export const ReviewTx = ({
     transactionData: { destination, memo, federationAddress },
   } = submission;
 
+  // Validate memo requirements using the transaction XDR
+  const transactionXdr = simulationState.data?.transactionXdr;
+  const { isMemoMissing: isRequiredMemoMissing, isValidatingMemo } =
+    useValidateTransactionMemo(transactionXdr);
+
+  // Disable button while validating or if memo is missing
+  const isSubmitDisabled = isRequiredMemoMissing || isValidatingMemo;
+
   const asset = getAssetFromCanonical(srcAsset);
   const dest = dstAsset ? getAssetFromCanonical(dstAsset.canonical) : null;
   const assetIcons = srcAsset !== "native" ? { [srcAsset]: assetIcon } : {};
@@ -200,18 +212,21 @@ export const ReviewTx = ({
                       onClick={() => setActivePaneIndex(1)}
                     />
                   )}
+                  {isRequiredMemoMissing && !isValidatingMemo && (
+                    <MemoRequiredLabel onClick={() => setActivePaneIndex(2)} />
+                  )}
                 </div>
                 <div className="ReviewTx__Details">
                   <div className="ReviewTx__Details__Row">
                     <div className="ReviewTx__Details__Row__Title">
                       <Icon.File02 />
-                      Memo
+                      {t("Memo")}
                     </div>
                     <div
                       className="ReviewTx__Details__Row__Value"
                       data-testid="review-tx-memo"
                     >
-                      {memo || "None"}
+                      {memo || t("None")}
                     </div>
                   </div>
                   <div className="ReviewTx__Details__Row">
@@ -244,29 +259,76 @@ export const ReviewTx = ({
                 scanResult={simulationState.data?.scanResult!}
                 onClose={() => setActivePaneIndex(0)}
               />,
+              <div className="ReviewTx__MemoDetails">
+                <div className="ReviewTx__MemoDetails__Header">
+                  <div className="ReviewTx__MemoDetails__Header__Icon">
+                    <Icon.InfoOctagon className="WarningMessage__icon" />
+                  </div>
+                  <div
+                    className="ReviewTx__MemoDetails__Header__Close"
+                    onClick={() => setActivePaneIndex(0)}
+                  >
+                    <Icon.X />
+                  </div>
+                </div>
+                <div className="ReviewTx__MemoDetails__Title">
+                  <span>{t("Memo is required")}</span>
+                </div>
+                <div className="ReviewTx__MemoDetails__Content">
+                  <div className="ReviewTx__MemoDetails__Text">
+                    {t(
+                      "Some destination accounts on the Stellar network require a memo to identify your payment.",
+                    )}
+                  </div>
+                  <div className="ReviewTx__MemoDetails__Text">
+                    {t(
+                      "If a required memo is missing or incorrect, your funds may not reach the intended recipient.",
+                    )}
+                  </div>
+                </div>
+              </div>,
             ]}
           />
           <div className="ReviewTx__Actions">
-            <Button
-              size="lg"
-              isFullWidth
-              isRounded
-              variant="secondary"
-              data-testid="SubmitAction"
-              onClick={(e) => {
-                e.preventDefault();
-                onConfirmTx();
-              }}
-            >
-              {dstAsset && dest
-                ? `Swap ${asset.code} to ${dest.code}`
-                : `Send to ${truncatedDest}`}
-            </Button>
+            {isRequiredMemoMissing && !isValidatingMemo && onAddMemo ? (
+              <Button
+                size="lg"
+                isFullWidth
+                isRounded
+                variant="secondary"
+                data-testid="AddMemoAction"
+                onClick={(e) => {
+                  e.preventDefault();
+                  onAddMemo();
+                }}
+              >
+                {t("Add Memo")}
+              </Button>
+            ) : (
+              <Button
+                size="lg"
+                isFullWidth
+                isRounded
+                variant="secondary"
+                data-testid="SubmitAction"
+                disabled={isSubmitDisabled}
+                isLoading={isValidatingMemo}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onConfirmTx();
+                }}
+              >
+                {dstAsset && dest
+                  ? `Swap ${asset.code} to ${dest.code}`
+                  : `Send to ${truncatedDest}`}
+              </Button>
+            )}
             <Button
               size="lg"
               isFullWidth
               isRounded
               variant="tertiary"
+              disabled={isValidatingMemo}
               onClick={(e) => {
                 e.preventDefault();
                 onCancel();