marina.sendTransaction: fix value display + add playwright test (#491)

playwright-tests/injected-script.spec.ts

@@ -101,3 +101,51 @@ pwTest(
     ]);
   }
 );
+
+pwTest(
+  'marina.sendTransaction popup should display the correct amount of spent asset',
+  async ({ page, extensionId, context }) => {
+    await makeOnboardingRestore(page, extensionId);
+    await switchToRegtestNetwork(page, extensionId); 
+
+    await page.goto(vulpemFaucetURL);
+    let provider = new PlaywrightMarinaProvider(page);
+    if (!(await provider.isEnabled())) {
+      await page.getByRole('button', { name: 'Connect with Marina' }).click();
+      const popup = await context.waitForEvent('page');
+      await popup.getByRole('button', { name: 'Connect' }).click();
+    }
+    const toFaucet = await provider.getNextAddress();
+    await faucet(toFaucet.confidentialAddress, 1); // send 1 L-BTC to the address
+    await page.goto(marinaURL(extensionId, 'popup.html'));
+    await page.waitForSelector('text=1 L-BTC');
+
+    await page.goto(vulpemFaucetURL);
+    provider = new PlaywrightMarinaProvider(page);
+    // random regtest address
+    const receiver = 'el1qqdfjtdv5a7jez0qmj5g4u07pcg0qsm8jrwx0c6rza8kmquad2k62mwxw92f7vw0460wdx36m97er86rlkl3xsz774h2w3zpc9'
+    const recipients = [
+      { 
+        address: receiver,
+        asset: networks.regtest.assetHash,
+        value: 1_0000_0000 - 1500,
+      }
+    ];
+
+    const handleSendTransactionPopup = async () => {
+      const popup = await context.waitForEvent('page');
+      await popup.waitForSelector(`text= L-BTC`); // wait for loading to finish
+      const value = popup.getByTestId(networks.regtest.assetHash)
+      pwExpect(value).toBeTruthy();
+      pwExpect(await value.innerText()).toEqual('0.999985');
+      const btn = popup.getByRole('button', { name: 'Reject' })
+      pwExpect(btn).toBeTruthy();
+      await btn.click();
+    };
+
+    await Promise.all([
+      pwExpect(provider.sendTransaction(recipients)).rejects.toThrow('user rejected the sendTransaction request'),
+      handleSendTransactionPopup(),
+    ]);
+  }
+);

playwright-tests/utils.ts

@@ -174,12 +174,17 @@ export class PlaywrightMarinaProvider implements MarinaProvider {
   getAddresses(accountIDs?: string[] | undefined): Promise<Address[]> {
     throw new Error('Method not implemented.');
   }
+
   sendTransaction(
     recipients: Recipient[],
-    feeAsset?: string | undefined
+    feeAsset?: string
   ): Promise<SentTransaction> {
-    throw new Error('Method not implemented.');
+    return this.page.evaluate<SentTransaction, [string, Recipient[], string | undefined]>(
+      ([name, recipients, feeAsset]) => (window[name as any] as unknown as MarinaProvider).sendTransaction(recipients, feeAsset),
+      [Marina.PROVIDER_NAME, recipients, feeAsset]
+    );
   }
+
   signTransaction(pset: string): Promise<string> {
     return this.page.evaluate<string, [string, string]>(
       ([name, pset]) => (window[name as any] as unknown as MarinaProvider).signTransaction(pset),

src/content/marina/marinaBroker.ts

@@ -315,9 +315,9 @@ export default class MarinaBroker extends Broker<keyof Marina> {
           const { accepted, signedPset } =
             await this.openAndWaitPopup<SignTransactionPopupResponse>('sign-pset');
 
+          await this.popupsRepository.clear();
           if (!accepted) throw new Error('User rejected the sign request');
           if (!signedPset) throw new Error('Something went wrong with tx signing');
-          await this.popupsRepository.clear();
 
           return successMsg(signedPset);
         }
@@ -374,7 +374,9 @@ export default class MarinaBroker extends Broker<keyof Marina> {
             'spend'
           );
 
-          if (!accepted) throw new Error('the user rejected the create tx request');
+          await this.popupsRepository.clear();
+
+          if (!accepted) throw new Error('user rejected the sendTransaction request');
           if (!signedTxHex) throw new Error('something went wrong with the tx crafting');
 
           // try to broadcast the tx

src/extension/popups/spend.tsx

@@ -110,8 +110,8 @@ const ConnectSpend: React.FC = () => {
             {spendParameters.addressRecipients.map((recipient, index) => (
               <div key={index}>
                 <div className="container flex justify-between mt-6">
-                  <span className="text-lg font-medium">
-                    {(fromSatoshi(recipient.value), getPrecision(recipient.asset))}
+                  <span data-testid={recipient.asset} className="text-lg font-medium">
+                    {fromSatoshi(recipient.value, getPrecision(recipient.asset))}
                   </span>
                   <span className="text-lg font-medium">{getTicker(recipient.asset)}</span>
                 </div>