feat: fix sendTransfer & add sendTransfer confirmation

Author: baptiste-marchand

packages/snap/src/entities/confirmation.ts

@@ -1,4 +1,4 @@
-import type { Network } from '@metamask/bitcoindevkit';
+import type { Network, Psbt } from '@metamask/bitcoindevkit';
 
 import type { BitcoinAccount } from './account';
 
@@ -33,4 +33,21 @@ export type ConfirmationRepository = {
     message: string,
     origin: string,
   ): Promise<void>;
+
+  /**
+   * Inserts a send transfer confirmation interface.
+   *
+   * @param account - The account sending the transfer.
+   * @param psbt - The PSBT of the transfer.
+   * @param recipient - The recipient of the transfer.
+   * @param recipient.address - The address of the recipient.
+   * @param recipient.amount - The amount to send to the recipient.
+   * @param origin - The origin of the request.
+   */
+  insertSendTransfer(
+    account: BitcoinAccount,
+    psbt: Psbt,
+    recipient: { address: string; amount: string },
+    origin: string,
+  ): Promise<void>;
 };

packages/snap/src/entities/send-flow.ts

@@ -17,6 +17,7 @@ export type ConfirmSendFormContext = {
   backgroundEventId?: string;
   locale: string;
   psbt: string;
+  origin?: string;
 };
 
 export type SendFormContext = {

packages/snap/src/index.ts

@@ -51,6 +51,7 @@ const sendFlowRepository = new JSXSendFlowRepository(snapClient, translator);
 const confirmationRepository = new JSXConfirmationRepository(
   snapClient,
   translator,
+  chainClient,
 );
 
 // Business layer

packages/snap/src/infra/jsx/unified-send-flow/UnifiedSendFormView.tsx

@@ -35,8 +35,15 @@ export const UnifiedSendFormView: SnapComponent<UnifiedSendFormViewProps> = ({
   messages,
 }) => {
   const t = translate(messages);
-  const { amount, exchangeRate, network, from, recipient, explorerUrl } =
-    context;
+  const {
+    amount,
+    exchangeRate,
+    network,
+    from,
+    recipient,
+    explorerUrl,
+    origin,
+  } = context;
 
   const psbt = Psbt.from_string(context.psbt);
   const fee = psbt.fee().to_sat();
@@ -83,7 +90,7 @@ export const UnifiedSendFormView: SnapComponent<UnifiedSendFormViewProps> = ({
             <SnapText fontWeight="medium" color="alternative">
               {t('confirmation.requestOrigin')}
             </SnapText>
-            <SnapText>MetaMask</SnapText>
+            <SnapText>{origin ?? 'MetaMask'}</SnapText>
           </Box>
           <Box>{null}</Box>
           <Box alignment="space-between" direction="horizontal">

packages/snap/src/store/JSXConfirmationRepository.test.tsx

@@ -2,7 +2,12 @@ import type { Address } from '@metamask/bitcoindevkit';
 import type { GetPreferencesResult } from '@metamask/snaps-sdk';
 import { mock } from 'jest-mock-extended';
 
-import type { SnapClient, Translator, BitcoinAccount } from '../entities';
+import type {
+  SnapClient,
+  Translator,
+  BitcoinAccount,
+  BlockchainClient,
+} from '../entities';
 import { JSXConfirmationRepository } from './JSXConfirmationRepository';
 import { SignMessageConfirmationView } from '../infra/jsx';
 
@@ -14,8 +19,13 @@ describe('JSXConfirmationRepository', () => {
   const mockMessages = { foo: { message: 'bar' } };
   const mockSnapClient = mock<SnapClient>();
   const mockTranslator = mock<Translator>();
+  const mockChainClient = mock<BlockchainClient>();
 
-  const repo = new JSXConfirmationRepository(mockSnapClient, mockTranslator);
+  const repo = new JSXConfirmationRepository(
+    mockSnapClient,
+    mockTranslator,
+    mockChainClient,
+  );
 
   describe('insertSignMessage', () => {
     const mockAccount = mock<BitcoinAccount>({

packages/snap/src/store/JSXConfirmationRepository.tsx

@@ -1,21 +1,33 @@
+import type { Psbt } from '@metamask/bitcoindevkit';
+
 import type {
   BitcoinAccount,
+  BlockchainClient,
   ConfirmationRepository,
+  ConfirmSendFormContext,
   SignMessageConfirmationContext,
   SnapClient,
   Translator,
 } from '../entities';
-import { UserActionError } from '../entities';
+import { networkToCurrencyUnit, UserActionError } from '../entities';
 import { SignMessageConfirmationView } from '../infra/jsx';
+import { UnifiedSendFormView } from '../infra/jsx/unified-send-flow';
 
 export class JSXConfirmationRepository implements ConfirmationRepository {
   readonly #snapClient: SnapClient;
 
   readonly #translator: Translator;
 
-  constructor(snapClient: SnapClient, translator: Translator) {
+  readonly #chainClient: BlockchainClient;
+
+  constructor(
+    snapClient: SnapClient,
+    translator: Translator,
+    chainClient: BlockchainClient,
+  ) {
     this.#snapClient = snapClient;
     this.#translator = translator;
+    this.#chainClient = chainClient;
   }
 
   async insertSignMessage(
@@ -48,4 +60,38 @@ export class JSXConfirmationRepository implements ConfirmationRepository {
       throw new UserActionError('User canceled the confirmation');
     }
   }
+
+  async insertSendTransfer(
+    account: BitcoinAccount,
+    psbt: Psbt,
+    recipient: { address: string; amount: string },
+    origin: string,
+  ): Promise<void> {
+    const { locale } = await this.#snapClient.getPreferences();
+
+    const context: ConfirmSendFormContext = {
+      from: account.publicAddress.toString(),
+      explorerUrl: this.#chainClient.getExplorerUrl(account.network),
+      network: account.network,
+      currency: networkToCurrencyUnit[account.network],
+      exchangeRate: undefined,
+      recipient: recipient.address,
+      amount: recipient.amount,
+      locale,
+      psbt: psbt.toString(),
+      origin,
+    };
+
+    const messages = await this.#translator.load(locale);
+    const interfaceId = await this.#snapClient.createInterface(
+      <UnifiedSendFormView context={context} messages={messages} />,
+      context,
+    );
+
+    const confirmed =
+      await this.#snapClient.displayConfirmation<boolean>(interfaceId);
+    if (!confirmed) {
+      throw new UserActionError('User canceled the confirmation');
+    }
+  }
 }

packages/snap/src/use-cases/AccountUseCases.ts

@@ -461,21 +461,37 @@ export class AccountUseCases {
       recipients,
     );
 
+    if (!recipients[0] || recipients.length > 1) {
+      throw new ValidationError('There should be exactly one recipient', {
+        recipients,
+      });
+    }
+    const recipient = recipients[0];
+
     const account = await this.#repository.getWithSigner(id);
     if (!account) {
       throw new NotFoundError('Account not found', { id });
     }
     this.#checkCapability(account, AccountCapability.SendTransfer);
 
-    // Create a template PSBT with the recipients as outputs
-    let builder = account.buildTx();
-    for (const { address, amount } of recipients) {
-      builder = builder.addRecipient(amount, address);
-    }
-    const templatePsbt = builder.finish();
+    const frozenUTXOs = await this.#repository.getFrozenUTXOs(account.id);
+    const feeRateToUse = feeRate ?? (await this.getFallbackFeeRate(account));
+
+    // Build PSBT with the recipient as output
+    const psbt = account
+      .buildTx()
+      .feeRate(feeRateToUse)
+      .unspendable(frozenUTXOs)
+      .addRecipient(recipient.amount, recipient.address)
+      .finish();
+
+    await this.#confirmationRepository.insertSendTransfer(
+      account,
+      psbt,
+      recipient,
+      origin,
+    );
 
-    // Complete the PSBT with the necessary inputs, fee rate, etc.
-    const psbt = await this.#fillPsbt(account, templatePsbt, feeRate);
     const signedPsbt = account.sign(psbt);
     const tx = account.extractTransaction(signedPsbt);
     const txid = await this.#broadcast(account, tx, origin);