input-output-hk · AngelCastilloB · Jul 15, 2025 · Jul 8, 2025
@@ -0,0 +1,63 @@
+@import '../../../../../../../../packages/common/src/ui/styles/theme.scss';
+@import '../../../../../../../../packages/common/src/ui/styles/abstracts/typography';
+
+.opReturnMessageInput {
+  margin-top: size_unit(2);
+  padding-bottom: size_unit(3);
+  width: 100%;
+
+  :global(.ant-input-affix-wrapper) {
+    transition: none !important;
+  }
+
+  &.visibleCounter {
+    padding-bottom: size_unit(2.5);
+
+    :global(.ant-input-suffix) {
+      position: absolute;
+      right: size_unit(0.5);
+      top: size_unit(0.5);
+      width: size_unit(6.5);
+    }
+  }
+
+  input {
+    @include text-bodyLarge-medium;
+    color: var(--text-color-primary) !important;
+    transition: none;
+    ::placeholder {
+      color: var(--text-color-secondary) !important;
+    }
+  }
+
+  @media (max-width: 400px) {
+    margin-top: size_unit(1);
+    padding-bottom: size_unit(5);
+
+    &.visibleCounter {
+      padding-bottom: size_unit(4);
+    }
+  }
+
+  .suffixContent {
+    margin-right: -7px;
+    &.focus {
+      margin-bottom: -#{size_unit(1.5)};
+    }
+  }
+}
+
+.characterCounter {
+  margin: size_unit(0.5) 0 0;
+  padding-left: size_unit(3);
+  @include text-form-label($weight: 500);
+  color: var(--text-color-secondary);
+
+  &.error {
+    color: var(--data-pink);
+  }
+}
+
+.iconSize {
+  font-size: size_unit(3) !important;
+}
@@ -0,0 +1,78 @@
+/* eslint-disable unicorn/no-useless-undefined */
+import React, { useState } from 'react';
+import { Input, TextBoxItem } from '@lace/common';
+import classnames from 'classnames';
+import styles from './OpReturnMessageInput.module.scss';
+import { useTranslation, Trans } from 'react-i18next';
+
+const MAX_LENGTH = 80;
+
+interface OpReturnInputProps {
+  onOpReturnMessageChange: (value: string) => void;
+  opReturnMessage: string;
+  disabled?: boolean;
+}
+
+export const OpReturnMessageInput: React.FC<OpReturnInputProps> = ({
+  onOpReturnMessageChange,
+  opReturnMessage,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+  const [value, setOpReturnMessageMsg] = useState(opReturnMessage);
+  const [focused, setFocused] = useState(false);
+  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+    setOpReturnMessageMsg(target.value);
+    onOpReturnMessageChange(target.value);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.stopPropagation();
+    setOpReturnMessageMsg(undefined);
+    onOpReturnMessageChange('');
+  };
+
+  const handleFocusedState = () => setFocused((prev) => !prev);
+
+  const hasReachedCharLimit = value?.length > MAX_LENGTH;
+  const displayCounter = !!value || focused;
+  return (
+    <div
+      data-testid="opReturn-message-input-container"
+      className={classnames(styles.opReturnMessageInput, { [styles.visibleCounter]: displayCounter })}
+    >
+      <Input
+        onFocus={handleFocusedState}
+        onBlur={handleFocusedState}
+        data-testid="opReturn-message-input"
+        value={value}
+        onChange={handleChange}
+        suffix={
+          <div
+            data-testid="opReturn-message-input-suffix"
+            className={classnames(styles.suffixContent, { [styles.focus]: focused || value?.length > 0 })}
+          >
+            <TextBoxItem iconClassName={styles.iconSize} onClick={handleClick} disabled={!value} />
+          </div>
+        }
+        label={t('browserView.transaction.send.metadata.addAOpReturnNote')}
+        focus={focused}
+        disabled={disabled}
+      />
+
+      {displayCounter && (
+        <p
+          data-testid="opReturn-message-counter"
+          className={classnames(styles.characterCounter, {
+            [styles.error]: hasReachedCharLimit
+          })}
+        >
+          <Trans
+            values={{ count: `${value?.length || 0}/${MAX_LENGTH}` }}
+            i18nKey="browserView.transaction.send.metadata.count"
+          />
+        </p>
+      )}
+    </div>
+  );
+};
@@ -1,4 +1,4 @@
-/* eslint-disable complexity */
+/* eslint-disable complexity, sonarjs/cognitive-complexity */
 /* eslint-disable no-magic-numbers */
 import React from 'react';
 import { renderLabel, RowContainer } from '@lace/core';
@@ -16,6 +16,7 @@ interface ReviewTransactionProps {
   unsignedTransaction: Bitcoin.UnsignedTransaction & { isHandle: boolean; handle: string };
   btcToUsdRate: number;
   feeRate: number;
+  opReturnMessage: string;
   estimatedTime: string;
   onConfirm: () => void;
   onClose: () => void;
@@ -29,12 +30,14 @@ export const ReviewTransaction: React.FC<ReviewTransactionProps> = ({
   estimatedTime,
   onConfirm,
   isPopupView,
-  onClose
+  onClose,
+  opReturnMessage
 }) => {
   const { t } = useTranslation();
   const amount = Number(unsignedTransaction.amount);
   const usdValue = (amount / SATS_IN_BTC) * btcToUsdRate;
   const feeInBtc = unsignedTransaction.fee;
+  const hasOpReturn = opReturnMessage && opReturnMessage.length > 0;
 
   return (
     <Flex flexDirection="column" w="$fill" className={mainStyles.container}>
@@ -94,6 +97,24 @@ export const ReviewTransaction: React.FC<ReviewTransactionProps> = ({
           </RowContainer>
         </Box>
 
+        {hasOpReturn && (
+          <Box w="$fill" mt={isPopupView ? '$24' : '$32'}>
+            <RowContainer>
+              {renderLabel({
+                label: t('core.outputSummaryList.note'),
+                dataTestId: 'output-summary-note'
+              })}
+              <Flex flexDirection="column">
+                <Flex flexDirection="column" w="$fill" alignItems="flex-end" gap="$4">
+                  <Text.Address className={styles.address} data-testid="output-summary-note">
+                    {opReturnMessage}
+                  </Text.Address>
+                </Flex>
+              </Flex>
+            </RowContainer>
+          </Box>
+        )}
+
         <Box w="$fill" mt={isPopupView ? '$32' : '$40'} mb="$8" className={styles.divider} />
 
         <Box w="$fill" mt={isPopupView ? '$24' : '$32'}>

@@ -80,6 +80,7 @@ type BuildTxProps = {
   knownAddresses: Bitcoin.DerivedAddress[];
   changeAddress: string;
   recipientAddress: string;
+  opReturnMessage: string;
   feeRate: number;
   amount: bigint;
   utxos: Bitcoin.UTxO[];
@@ -93,12 +94,14 @@ const buildTransaction = ({
   feeRate,
   amount,
   utxos,
+  opReturnMessage,
   network
 }: BuildTxProps): Bitcoin.UnsignedTransaction =>
   new Bitcoin.TransactionBuilder(network, feeRate, knownAddresses)
     .setChangeAddress(changeAddress)
     .setUtxoSet(utxos)
     .addOutput(recipientAddress, amount)
+    .addOpReturnOutput(opReturnMessage)
     .build();
 
 const btcStringToSatoshisBigint = (btcString: string): bigint => {
@@ -132,7 +135,7 @@ export const SendFlow: React.FC = () => {
   const [confirmationHash, setConfirmationHash] = useState<string>('');
   const [txError, setTxError] = useState<Error | undefined>();
   const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
-
+  const [opReturnMessage, setOpReturnMessage] = useState<string>('');
   const { priceResult } = useFetchCoinPrice();
   const { bitcoinWallet } = useWalletManager();
 
@@ -268,7 +271,8 @@ export const SendFlow: React.FC = () => {
         feeRate: newFeeRate,
         amount: btcStringToSatoshisBigint(amount),
         utxos,
-        network
+        network,
+        opReturnMessage
       }),
       isHandle: address.isHandle,
       handle: address.isHandle ? address.address : ''
@@ -333,6 +337,8 @@ export const SendFlow: React.FC = () => {
           onContinue={goToReview}
           network={network}
           hasUtxosInMempool={hasUtxosInMempool}
+          onOpReturnMessageChange={setOpReturnMessage}
+          opReturnMessage={opReturnMessage}
         />
       );
     }
@@ -348,6 +354,7 @@ export const SendFlow: React.FC = () => {
             feeRate={feeRate}
             estimatedTime={estimatedTime}
             onConfirm={goToPassword}
+            opReturnMessage={opReturnMessage}
           />
         </>
       );

@@ -21,6 +21,7 @@ import debounce from 'lodash/debounce';
 import { CustomConflictError, CustomError, ensureHandleOwnerHasntChanged, verifyHandle } from '@utils/validators';
 import { AddressValue, HandleVerificationState } from './types';
 import { CheckCircleOutlined, ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { OpReturnMessageInput } from './OpReturnMessageInput';
 
 const SATS_IN_BTC = 100_000_000;
 
@@ -51,6 +52,8 @@ interface SendStepOneProps {
   onClose: () => void;
   network: Bitcoin.Network | null;
   hasUtxosInMempool: boolean;
+  onOpReturnMessageChange: (value: string) => void;
+  opReturnMessage: string;
 }
 
 const InputError = ({
@@ -87,7 +90,9 @@ export const SendStepOne: React.FC<SendStepOneProps> = ({
   isPopupView,
   onClose,
   network,
-  hasUtxosInMempool
+  hasUtxosInMempool,
+  onOpReturnMessageChange,
+  opReturnMessage
 }) => {
   const { t } = useTranslation();
   const numericAmount = Number.parseFloat(amount) || 0;
@@ -369,6 +374,12 @@ export const SendStepOne: React.FC<SendStepOneProps> = ({
           />
         </Box>
 
+        <OpReturnMessageInput
+          opReturnMessage={opReturnMessage}
+          disabled={hasUtxosInMempool}
+          onOpReturnMessageChange={onOpReturnMessageChange}
+        />
+
         <Box mt={isPopupView ? '$24' : '$32'}>
           {isPopupView ? (
             <Text.Body.Large weight="$bold">{t('browserView.transaction.btc.send.feeRate')}</Text.Body.Large>
@@ -445,7 +456,14 @@ export const SendStepOne: React.FC<SendStepOneProps> = ({
         className={mainStyles.buttons}
       >
         <Button
-          disabled={hasNoValue || exceedsBalance || !address || address?.address?.trim() === '' || !isValidAddress}
+          disabled={
+            hasNoValue ||
+            exceedsBalance ||
+            !address ||
+            address?.address?.trim() === '' ||
+            !isValidAddress ||
+            opReturnMessage?.length > 80
+          }
           color="primary"
           block
           size="medium"

@@ -1,2 +1,3 @@
 export * from './SendContainer';
 export * from './BitcoinSendDrawer';
+export * from './OpReturnMessageInput';
@@ -13,7 +13,8 @@ export class GreedyInputSelector implements InputSelector {
     changeAddress: string,
     utxos: UTxO[],
     outputs: { address: string; value: bigint }[],
-    feeRate: number
+    feeRate: number,
+    hasOpReturn: boolean
   ): { selectedUTxOs: UTxO[]; outputs: { address: string; value: number }[]; fee: number } | undefined {
     const selected: UTxO[] = [];
     const totalOutput = outputs.reduce((acc, o) => acc + o.value, ZERO);
@@ -23,7 +24,7 @@ export class GreedyInputSelector implements InputSelector {
     for (const utxo of utxos) {
       selected.push(utxo);
       inputSum += utxo.satoshis;
-      fee = this.computeFee(selected.length, outputs.length + 1, feeRate);
+      fee = this.computeFee(selected.length, outputs.length + 1, feeRate, hasOpReturn);
       if (inputSum >= totalOutput + BigInt(fee)) break;
     }
 
@@ -39,7 +40,8 @@ export class GreedyInputSelector implements InputSelector {
         remaining: utxos.slice(selected.length),
         inputSum,
         totalOutput,
-        outputsCount: outputs.length
+        outputsCount: outputs.length,
+        hasOpReturn
       });
       change = newChange;
       fee += feeDelta;
@@ -60,8 +62,9 @@ export class GreedyInputSelector implements InputSelector {
   }
 
   /** Estimate the fee for a given input / output count */
-  private computeFee(inputCount: number, outputCount: number, feeRate: number): number {
-    const size = inputCount * INPUT_SIZE + outputCount * OUTPUT_SIZE + TRANSACTION_OVERHEAD;
+  private computeFee(inputCount: number, outputCount: number, feeRate: number, hasOpReturn: boolean): number {
+    const size =
+      inputCount * INPUT_SIZE + (outputCount + (hasOpReturn ? 1 : 0)) * OUTPUT_SIZE + Number(TRANSACTION_OVERHEAD);
     return Math.ceil(size * feeRate);
   }
 
@@ -76,7 +79,8 @@ export class GreedyInputSelector implements InputSelector {
     remaining,
     inputSum,
     totalOutput,
-    outputsCount
+    outputsCount,
+    hasOpReturn
   }: {
     change: bigint;
     feeRate: number;
@@ -85,6 +89,7 @@ export class GreedyInputSelector implements InputSelector {
     inputSum: bigint;
     totalOutput: bigint;
     outputsCount: number;
+    hasOpReturn: boolean;
   }): { change: bigint; fee: number } {
     if (change === ZERO || Number(change) >= DUST_THRESHOLD) return { change, fee: 0 };
 
@@ -93,15 +98,15 @@ export class GreedyInputSelector implements InputSelector {
 
     for (const utxo of remaining) {
       const newInputSum = inputSum + utxo.satoshis;
-      const newFee = this.computeFee(selected.length + 1, outputsCount + 1, feeRate);
+      const newFee = this.computeFee(selected.length + 1, outputsCount + 1, feeRate, hasOpReturn);
       const newChange = newInputSum - totalOutput - BigInt(newFee);
 
       const rescued = newChange - originalChange;
       const extraCost = BigInt(Math.ceil(INPUT_SIZE * feeRate));
 
       if (rescued >= extraCost && newChange >= BigInt(DUST_THRESHOLD)) {
         selected.push(utxo);
-        feeDelta = newFee - this.computeFee(selected.length - 1, outputsCount + 1, feeRate);
+        feeDelta = newFee - this.computeFee(selected.length - 1, outputsCount + 1, feeRate, hasOpReturn);
         return { change: newChange, fee: feeDelta };
       }
     }