Merge branch 'master' of github.com:FuelLabs/fuels-wallet into hf/fea…

…t/custom-gas-limit

.changeset/young-nails-build.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Add new e2e tests for custom fees in "Send Screen"

.github/CODEOWNERS

@@ -1 +1 @@
-* @luizstacio @pedronauck @LuizAsFight @helciofranco @arthurgeron
+* @luizstacio @pedronauck @LuizAsFight @helciofranco @arthurgeron @rodrigobranas

packages/app/CHANGELOG.md

@@ -1,5 +1,24 @@
 # fuels-wallet
 
+## 0.23.0
+
+### Minor Changes
+
+- [#1403](https://github.com/FuelLabs/fuels-wallet/pull/1403) [`d4f89b17`](https://github.com/FuelLabs/fuels-wallet/commit/d4f89b17b84dcf9f02251787c17048829b74ccdb) Thanks [@rodrigobranas](https://github.com/rodrigobranas)! - re-enabling faucet e2e tests
+
+- [#1402](https://github.com/FuelLabs/fuels-wallet/pull/1402) [`b8b03704`](https://github.com/FuelLabs/fuels-wallet/commit/b8b03704e6ca093ab98831160ff195e50187f6b5) Thanks [@rodrigobranas](https://github.com/rodrigobranas)! - Converted the address from bech32 to b256 on faucet link
+
+### Patch Changes
+
+- [#1319](https://github.com/FuelLabs/fuels-wallet/pull/1319) [`e3bf65aa`](https://github.com/FuelLabs/fuels-wallet/commit/e3bf65aa5a070a0c2b5490d422b70e462090b25b) Thanks [@arthurgeron](https://github.com/arthurgeron)! - - Added aria labels to Recipient Sender and Asset Name on transaction approval screen;
+
+  - Validate all asset names during e2e contract tests on the transaction approval screen
+
+- [#1408](https://github.com/FuelLabs/fuels-wallet/pull/1408) [`24840bfe`](https://github.com/FuelLabs/fuels-wallet/commit/24840bfe38cda3a45b1dc43b4e4f8c8890b3ebaf) Thanks [@LuizAsFight](https://github.com/LuizAsFight)! - TransactionList breaking when have a failed transaction
+
+- Updated dependencies []:
+  - @fuel-wallet/connections@0.23.0
+
 ## 0.22.0
 
 ### Minor Changes

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fuels-wallet",
   "private": true,
-  "version": "0.22.0",
+  "version": "0.23.0",
   "database": "17",
   "scripts": {
     "build:all": "run-s build:web build:crx build:storybook",

packages/app/playwright/commons/locator.ts

@@ -11,3 +11,7 @@ export async function waitAriaLabel(page: Page, selector: string) {
 export function getInputByName(page: Page, name: string) {
   return page.locator(`input[name="${name}"]`);
 }
+
+export function getInputByValue(page: Page, value: string) {
+  return page.locator(`input[value='${value}']`);
+}

packages/app/playwright/e2e/HomeWallet.test.ts

@@ -5,6 +5,7 @@ import {
   getButtonByText,
   getByAriaLabel,
   getInputByName,
+  getInputByValue,
   hasText,
   reload,
   visit,
@@ -22,26 +23,19 @@ test.describe('HomeWallet', () => {
     await mockData(page);
   });
 
-  // @TODO: re-enable when interacting with faucet popup
-  test.skip('should change balance when select a new network', async ({
-    context,
-  }) => {
+  test('should change balance when select a new network', async () => {
     await visit(page, '/wallet');
-    await getButtonByText(page, 'Faucet').click();
-
-    // @TODO: detect faucetPage here
-    const pages = context.pages();
-    const faucetPage = pages.find((page) => {
-      page.url().includes('address');
-    });
-    await getInputByName(faucetPage, 'agreement1').click();
-    await getInputByName(faucetPage, 'agreement2').click();
-    await getInputByName(faucetPage, 'agreement3').click();
-    await getButtonByText(faucetPage, 'Give me ETH').click();
+    const faucetTabPromise = page.waitForEvent('popup');
+    const faucetButton = getButtonByText(page, 'Faucet');
+    await faucetButton.click();
+    const faucetTab = await faucetTabPromise;
+    await faucetTab.waitForLoadState();
+    await getInputByName(faucetTab, 'agreement1').click();
+    await getInputByName(faucetTab, 'agreement2').click();
+    await getInputByName(faucetTab, 'agreement3').click();
+    await getInputByValue(faucetTab, 'Give me Test Ether').click();
     await hasText(page, /Ethereum/i);
     await hasText(page, /ETH.0\.5/i);
-
-    /** Select a new network */
     await getByAriaLabel(page, 'Selected Network').click();
     await getByAriaLabel(page, 'fuel_network-item-2').click();
     await hasText(page, "You don't have any assets");

packages/app/playwright/e2e/SendTransaction.test.ts

@@ -123,6 +123,170 @@ test.describe('SendTransaction', () => {
     await hasText(page, 'success');
   });
 
+  test('Send transaction with regular fee', async () => {
+    const receiverWallet = Wallet.generate({
+      provider,
+    });
+    await visit(page, '/send');
+    await page.waitForSelector('[aria-disabled="true"]');
+    await getButtonByText(page, 'Select one asset').click();
+    await page.getByText('Ethereum').click();
+    await getInputByName(page, 'address').fill(receiverWallet.address.toB256());
+    await getInputByName(page, 'amount').fill('0.001');
+
+    // Waiting button change to Review in order to ensure that fee amount is updated
+    await page.waitForSelector('button:has-text("Review")');
+
+    // Selecting and extracting regular fee amount
+    const regularFeeComponent = getByAriaLabel(page, 'fee value:Regular');
+    const regularFeeAmount = (await regularFeeComponent.textContent())
+      .replace(' ETH', '')
+      .trim();
+
+    await getButtonByText(page, 'Review').click();
+
+    // Extract and compare the network fee amount, checking if its equal to regular fee amont
+    const networkFeeComponentWithRegular = getByAriaLabel(
+      page,
+      'fee value:Network'
+    ).first();
+    const networkFeeAmountWithRegular = (
+      await networkFeeComponentWithRegular.textContent()
+    )
+      .replace(' ETH', '')
+      .trim();
+    // Validating the amount
+    expect(regularFeeAmount).toBe(networkFeeAmountWithRegular);
+
+    await hasText(page, /(.*)ETH/);
+
+    await getButtonByText(page, 'Approve').click();
+    await hasText(page, '0.001 ETH');
+
+    // Wait for transaction to be confirmed
+    await hasText(page, 'success');
+  });
+
+  test('Send transaction with fast fee', async () => {
+    const receiverWallet = Wallet.generate({
+      provider,
+    });
+    await visit(page, '/send');
+    await page.waitForSelector('[aria-disabled="true"]');
+    await getButtonByText(page, 'Select one asset').click();
+    await page.getByText('Ethereum').click();
+    await getInputByName(page, 'address').fill(receiverWallet.address.toB256());
+    await getInputByName(page, 'amount').fill('0.001');
+
+    //Selecting and extracting fast fee amount
+    const fastFeeComponent = getByAriaLabel(page, 'fee value:Fast');
+    await fastFeeComponent.click();
+
+    // Waiting button change to Review in order to change fee amount
+    await page.waitForSelector('button:has-text("Review")');
+
+    const fastFeeAmount = (await fastFeeComponent.textContent())
+      .replace(' ETH', '')
+      .trim();
+
+    await getButtonByText(page, 'Review').click();
+
+    // Extract and compere the network fee amount, checking if its equal to fast fee amount
+    const networkFeeComponentWithFast = getByAriaLabel(
+      page,
+      'fee value:Network'
+    ).first();
+    const networkFeeAmountWithFast = (
+      await networkFeeComponentWithFast.textContent()
+    )
+      .replace(' ETH', '')
+      .trim();
+    // Validating the amount
+    expect(fastFeeAmount).toBe(networkFeeAmountWithFast);
+
+    await hasText(page, /(.*)ETH/);
+
+    await getButtonByText(page, 'Approve').click();
+    await hasText(page, '0.001 ETH');
+
+    // Wait for transaction to be confirmed
+    await hasText(page, 'success');
+  });
+
+  test('Send transaction starting with regular and changing to fast fee', async () => {
+    const receiverWallet = Wallet.generate({
+      provider,
+    });
+    await visit(page, '/send');
+    await page.waitForSelector('[aria-disabled="true"]');
+    await getButtonByText(page, 'Select one asset').click();
+    await page.getByText('Ethereum').click();
+    await getInputByName(page, 'address').fill(receiverWallet.address.toB256());
+    await getInputByName(page, 'amount').fill('0.001');
+
+    // Waiting button change to Review in order to ensure that fee amount is updated
+    await page.waitForSelector('button:has-text("Review")');
+
+    // Selecting and extracting regular fee amount
+    const regularFeeComponent = getByAriaLabel(page, 'fee value:Regular');
+    await regularFeeComponent.click();
+    const regularFeeAmount = (await regularFeeComponent.textContent())
+      .replace(' ETH', '')
+      .trim();
+
+    await getButtonByText(page, 'Review').click();
+
+    // Extract and compare the network fee amount, checking if its equal to regular fee amont
+    const networkFeeComponentWithRegular = getByAriaLabel(
+      page,
+      'fee value:Network'
+    ).first();
+    const networkFeeAmountWithRegular = (
+      await networkFeeComponentWithRegular.textContent()
+    )
+      .replace(' ETH', '')
+      .trim();
+    // Validating the amount
+    expect(regularFeeAmount).toBe(networkFeeAmountWithRegular);
+
+    // Going back to select other fee value
+    await getButtonByText(page, 'Back').click();
+
+    //Selecting and extracting fast fee amount
+    const fastFeeComponent = getByAriaLabel(page, 'fee value:Fast');
+    await fastFeeComponent.click();
+
+    // Waiting button change to Review in order to change fee amount
+    await page.waitForSelector('button:has-text("Review")');
+
+    const fastFeeAmount = (await fastFeeComponent.textContent())
+      .replace(' ETH', '')
+      .trim();
+
+    await getButtonByText(page, 'Review').click();
+
+    // Extract and compere the network fee amount, checking if its equal to fast fee amount
+    const networkFeeComponentWithFast = getByAriaLabel(
+      page,
+      'fee value:Network'
+    ).first();
+    const networkFeeAmountWithFast = (
+      await networkFeeComponentWithFast.textContent()
+    )
+      .replace(' ETH', '')
+      .trim();
+    // Validating the amount
+    expect(fastFeeAmount).toBe(networkFeeAmountWithFast);
+
+    await hasText(page, /(.*)ETH/);
+
+    await getButtonByText(page, 'Approve').click();
+    await hasText(page, '0.001 ETH');
+
+    // Wait for transaction to be confirmed
+    await hasText(page, 'success');
+  });
+
   test('Send max amount transaction', async () => {
     const receiverWallet = Wallet.generate({
       provider,
@@ -147,7 +311,7 @@ test.describe('SendTransaction', () => {
 
     // Get calculated fee
     await hasText(page, /(.*)ETH/);
-    const regularFee = await getByAriaLabel(page, 'Fee Value').first();
+    const regularFee = await getByAriaLabel(page, 'fee value:Regular').first();
     const feeAmountText = (await regularFee.textContent())
       .replace(' ETH', '')
       .trim();

packages/app/src/systems/Faucet/hooks/useOpenFaucet.ts

@@ -1,3 +1,4 @@
+import { Address } from 'fuels';
 import { useCallback } from 'react';
 import { IS_CRX, VITE_FUEL_FAUCET_URL } from '~/config';
 import { useAccounts } from '~/systems/Account';
@@ -8,8 +9,10 @@ export function useOpenFaucet() {
   const { account } = useAccounts();
 
   const openFaucet = useCallback(() => {
+    if (!account || !account.address) return VITE_FUEL_FAUCET_URL;
+    const address = Address.fromDynamicInput(account.address).toB256();
     const url = stringifyUrl(VITE_FUEL_FAUCET_URL, {
-      address: account?.address,
+      address,
     });
 
     if (IS_CRX) {

packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.tsx

@@ -1,7 +1,7 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Card, Copyable, Icon, Text } from '@fuel-ui/react';
 import { Address, type TransactionSummary } from 'fuels';
-import type { FC } from 'react';
+import { type FC, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Pages, shortAddress } from '~/systems/Core';
 
@@ -34,6 +34,12 @@ export const ActivityItem: TxItemComponent = ({
     status,
   } = useTxMetadata({ ownerAddress, transaction });
 
+  const address = useMemo(() => {
+    if (!toOrFromAddress) return;
+
+    return Address.fromDynamicInput(toOrFromAddress);
+  }, [toOrFromAddress]);
+
   return (
     <Card
       css={styles.root}
@@ -56,9 +62,7 @@ export const ActivityItem: TxItemComponent = ({
         <Box.Flex css={styles.row}>
           <Box.Flex css={styles.fromToTextWrapper}>
             <Text css={styles.label}>{toOrFromText}</Text>
-            <Text>
-              {shortAddress(Address.fromDynamicInput(toOrFromAddress).toB256())}
-            </Text>
+            <Text>{!!address && shortAddress(address.toB256())}</Text>
           </Box.Flex>
           {timeFormatted && (
             <Box.Flex css={styles.item}>

packages/app/src/systems/Transaction/components/TxFee/TxFee.tsx

@@ -1,5 +1,5 @@
 import { Card, Text } from '@fuel-ui/react';
-import type { BN } from 'fuels';
+import { type BN, DEFAULT_PRECISION } from 'fuels';
 import type { FC } from 'react';
 
 import { TxFeeLoader } from './TxFeeLoader';
@@ -27,11 +27,24 @@ export const TxFee: TxFeeComponent = ({
       css={styles.detailItem(!!checked, !!onChecked)}
       onClick={() => onChecked?.(true)}
     >
-      <Text color="intentsBase11" css={styles.title}>
+      <Text
+        color="intentsBase11"
+        css={styles.title}
+        aria-label={`fee title:${title || 'Network'}`}
+      >
         {title || 'Fee (network)'}
       </Text>
-      <Text color="intentsBase12" css={styles.amount} aria-label="Fee Value">
-        {fee ? `${fee.format()} ETH` : '--'}
+      <Text
+        color="intentsBase12"
+        css={styles.amount}
+        aria-label={`fee value:${title || 'Network'}`}
+      >
+        {fee
+          ? `${fee.format({
+              minPrecision: DEFAULT_PRECISION,
+              precision: DEFAULT_PRECISION,
+            })} ETH`
+          : '--'}
       </Text>
     </Card>
   );

packages/connections/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @fuel-wallet/connections
 
+## 0.23.0
+
 ## 0.22.0
 
 ## 0.21.3

packages/connections/package.json

@@ -2,7 +2,7 @@
   "name": "@fuel-wallet/connections",
   "private": true,
   "description": "Fuel Wallet Connections for CRX.",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "license": "Apache-2.0",
   "main": "src/index.ts",
   "publishConfig": {

packages/docs/docs/dev/connecting.mdx

@@ -23,7 +23,7 @@ As a user installs a wallet, you can listen for changes on the status of the `cu
 
 <Examples.CheckWallet />
 
-You can learn more about connectors and how they work to allow multiple wallet's [here](https://github.com/FuelLabs/fuels-wallet/wiki/Fuel-Wallet-Connectors)
+You can learn more about connectors and how they work to allow multiple wallet's [here](https://github.com/FuelLabs/fuel-connectors/wiki)
 
 ## Requesting a Connection