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

…feat-1205

.changeset/brown-wasps-swim.md

@@ -0,0 +1,6 @@
+---
+"@fuel-wallet/types": patch
+"fuels-wallet": patch
+---
+
+feat: show token value converted to USD

packages/app/playwright/crx/assets.test.ts

@@ -41,40 +41,79 @@ test.describe('Check assets', () => {
   });
 
   test('should show valid asset value 0.002000', async () => {
+    await expect
+      .poll(
+        async () =>
+          await page
+            .getByLabel('ETH token balance', { exact: true })
+            .isVisible(),
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
     expect(
-      await page.getByText('0.002000', { exact: true }).isVisible()
-    ).toBeTruthy();
+      await page.getByLabel('ETH token balance', { exact: true }).textContent()
+    ).toContain('0.002000 ETH');
   });
 
   test('should show USDCIcon AlertTriangle', async () => {
-    expect(
-      await page.getByText('USDCIcon AlertTriangle').isVisible()
-    ).toBeTruthy();
+    await expect
+      .poll(
+        async () => await page.getByText('USDCIcon AlertTriangle').isVisible(),
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
   });
 
   test('should show 1 SCAM NFT', async () => {
-    expect(await page.getByText('1 SCAM').isVisible()).toBeTruthy();
+    await expect
+      .poll(async () => await page.getByText('1 SCAM').isVisible(), {
+        timeout: 10000,
+      })
+      .toBeTruthy();
   });
 
   // Verified assets should never show the (Add) button
   test('should not show (Add) button for verified assets', async () => {
-    expect(
-      await page.getByRole('button', { name: '(Add)' }).isVisible()
-    ).toBeFalsy();
+    await expect
+      .poll(
+        async () =>
+          await page.getByRole('button', { name: '(Add)' }).isVisible(),
+        { timeout: 10000 }
+      )
+      .toBeFalsy();
   });
 
   // Verified assets will never be inside of "Hidden assets" part
   test('should not show verified assets in hidden assets', async () => {
     // get all h6 text from div.fuel_CardList as an array, and then click Show unknown assets button, and then check if the array added a new element with a name other than Unknown
-    const h6Texts = await page.$$eval('div.fuel_CardList h6', (els) =>
-      els.map((el) => el.textContent)
-    );
-    await page.getByRole('button', { name: 'Show unknown assets' }).click();
-    await page.waitForTimeout(1000);
-    const h6TextsAfter = await page.$$eval('div.fuel_CardList h6', (els) =>
-      els.map((el) => el.textContent)
-    );
-    expect(h6TextsAfter.length).toBeGreaterThan(h6Texts.length);
+    let h6Texts: string[] = [];
+    await expect
+      .poll(
+        async () => {
+          h6Texts = await page.$$eval('div.fuel_CardList h6', (els) =>
+            els.map((el) => el.textContent)
+          );
+          return h6Texts;
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
+
+    await page.getByLabel('Show unknown assets').click();
+
+    let h6TextsAfter: string[] = [];
+
+    await expect
+      .poll(
+        async () => {
+          h6TextsAfter = await page.$$eval('div.fuel_CardList h6', (els) =>
+            els.map((el) => el.textContent)
+          );
+          return h6TextsAfter.length;
+        },
+        { timeout: 10000 }
+      )
+      .toBeGreaterThan(h6Texts.length);
 
     for (const el of h6Texts) {
       expect(el.includes('(Add)')).toBeFalsy();
@@ -96,17 +135,49 @@ test.describe('Check assets', () => {
   });
 
   test('Should add unknown asset', async () => {
-    await page.getByRole('button', { name: 'Show unknown assets' }).click();
+    await expect
+      .poll(async () => page.getByLabel('Show unknown assets'), {
+        timeout: 10000,
+      })
+      .toBeDefined();
+    await page.getByLabel('Show unknown assets').click();
+    await expect
+      .poll(async () => page.getByRole('button', { name: '(Add)' }).nth(1), {
+        timeout: 10000,
+      })
+      .toBeDefined();
     await page.getByRole('button', { name: '(Add)' }).nth(1).click();
+
+    await expect
+      .poll(async () => await page.getByText('Token 2'), {
+        timeout: 10000,
+      })
+      .toBeDefined();
     await page.getByPlaceholder('Asset name').fill('Token 2');
     await page.getByPlaceholder('Asset symbol').fill('TKN2');
     await page.getByLabel('Save Asset').click();
     await page.waitForTimeout(1000);
+
     await page.reload({ waitUntil: 'domcontentloaded' });
-    await page.waitForTimeout(1000);
-    await waitAriaLabel(page, 'Account 1 selected');
-    await page.waitForTimeout(1000);
-    expect(await page.getByText('1 TKN2').isVisible()).toBeTruthy();
+
+    await expect
+      .poll(
+        async () => {
+          return page.getByLabel('Account 1 selected').isVisible();
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
+
+    await expect
+      .poll(
+        async () => {
+          const text = await page.getByText('1 TKN2');
+          return text.isVisible();
+        },
+        { timeout: 10000 }
+      )
+      .toBeTruthy();
 
     // The following tests are disabled because the added tokens need a refresh to show up. Fix FE-1122 and enable these.
 

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

@@ -39,7 +39,7 @@ test.describe('HomeWallet', () => {
     await page.waitForTimeout(2000);
     await page.reload();
     await hasText(page, /Ethereum/i);
-    await hasText(page, /ETH.0\.002/i);
+    await hasText(page, /[$]\d{1,}\.\d{1,}/);
     await getByAriaLabel(page, 'Selected Network').click();
     await getByAriaLabel(page, 'fuel_network-item-2').click();
     await hasText(page, "You don't have any assets");
@@ -55,14 +55,14 @@ test.describe('HomeWallet', () => {
 
   test('should not show user balance when user sets it to hidden', async () => {
     await visit(page, '/wallet');
-    await hasText(page, /ETH.+0/i);
+    await hasText(page, /[$]\d{1,}\.\d{2,}/i);
     await getByAriaLabel(page, 'Hide balance').click(); // click on the hide balance
-    await hasText(page, /ETH.+•••••/i); // should hide balance
+    await hasText(page, /•••••/i); // should hide balance
     await reload(page); // reload the page
-    await hasText(page, /ETH.+•••••/i); // should not show balance
+    await hasText(page, /•••••/i); // should not show balance
     await getByAriaLabel(page, 'Show balance').click();
-    await hasText(page, /ETH.+0/i);
+    await hasText(page, /[$]\d{1,}\.\d{2,}/);
     await reload(page); // reload the page
-    await hasText(page, /ETH.+0/i);
+    await hasText(page, /[$]\d{1,}\.\d{2,}/);
   });
 });

packages/app/src/systems/Account/components/BalanceAssets/BalanceAssets.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 import { isUnknownAsset } from '~/systems/Asset';
 import { AssetItem, AssetList } from '~/systems/Asset/components';
 import type { AssetListEmptyProps } from '~/systems/Asset/components/AssetList/AssetListEmpty';
+import { UnknownAssetsButton } from '~/systems/Asset/components/UnknownAssetsButton/UnknownAssetsButton';
 
 export type BalanceAssetListProp = {
   balances?: CoinAsset[];
@@ -64,11 +65,12 @@ export const BalanceAssets = ({
           />
         );
       })}
-      {!!(!isLoading && unknownLength) && (
-        <Button size="xs" variant="link" onPress={toggle}>
-          {showUnknown ? 'Hide' : 'Show'} unknown assets ({unknownLength})
-        </Button>
-      )}
+      <UnknownAssetsButton
+        showUnknown={showUnknown}
+        unknownLength={unknownLength}
+        isLoading={!!isLoading}
+        toggle={toggle}
+      />
     </CardList>
   );
 };

packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.stories.tsx

@@ -17,6 +17,8 @@ const ACCOUNT: AccountWithBalance = {
   balance: bn(12008943834),
   balanceSymbol: '$',
   balances: [],
+  amountInUsd: '$38,830.32',
+  totalBalanceInUsd: 38830.32,
 };
 
 export const Usage = (args: BalanceWidgetProps) => (

packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.test.tsx

@@ -16,6 +16,8 @@ const ACCOUNT: AccountWithBalance = {
   balance: bn(4999989994),
   balanceSymbol: 'ETH',
   balances: [],
+  amountInUsd: '$16,167.22',
+  totalBalanceInUsd: 16167.22,
 };
 
 describe('BalanceWidget', () => {
@@ -37,7 +39,7 @@ describe('BalanceWidget', () => {
 
   it('should show formatted balance', async () => {
     renderWithProvider(<BalanceWidget account={ACCOUNT} />);
-    expect(screen.getByText(/4\.999/)).toBeInTheDocument();
+    expect(screen.getByText(ACCOUNT.amountInUsd ?? '$0')).toBeInTheDocument();
   });
 
   it('should hide balance when user sets his balance to hide', async () => {

packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.tsx

@@ -3,23 +3,22 @@ import {
   Avatar,
   Box,
   Button,
+  HStack,
   Heading,
   Icon,
   Text,
   Tooltip,
+  VStack,
 } from '@fuel-ui/react';
 import type { AccountWithBalance } from '@fuel-wallet/types';
 import { type ReactNode, useMemo } from 'react';
 import { FuelAddress } from '~/systems/Account';
-import {
-  AmountVisibility,
-  VisibilityButton,
-  formatBalance,
-} from '~/systems/Core';
+import { VisibilityButton, formatBalance } from '~/systems/Core';
 
 import { useAccounts } from '../../hooks';
 
 import { DEFAULT_DECIMAL_UNITS } from 'fuels';
+import { INTL_FORMATTER } from '~/systems/Asset/constants';
 import { BalanceWidgetLoader } from './BalanceWidgetLoader';
 
 type BalanceWidgetWrapperProps = {
@@ -48,20 +47,23 @@ export type BalanceWidgetProps = {
 };
 
 const decimals = DEFAULT_DECIMAL_UNITS;
+
 export function BalanceWidget({
   account,
   isLoading,
   visibility = true,
   onChangeVisibility,
 }: BalanceWidgetProps) {
   const { handlers } = useAccounts();
-
+  const totalBalanceInUsd = account?.totalBalanceInUsd ?? 0;
   const { original, tooltip } = useMemo(() => {
     return formatBalance(account?.balance, decimals);
   }, [account]);
 
   if (isLoading || !account) return <BalanceWidget.Loader />;
 
+  const totalValue = INTL_FORMATTER.format(totalBalanceInUsd);
+
   return (
     <BalanceWidgetWrapper
       top={
@@ -99,20 +101,20 @@ export function BalanceWidget({
       }
       bottom={
         <>
-          <Text className="label">Balance</Text>
+          <Text className="label">Total balance</Text>
           <Box.Flex>
             <Tooltip
               content={original.display}
               delayDuration={0}
               open={visibility && tooltip ? undefined : false}
             >
-              <Text aria-hidden={visibility} data-account-name={account.name}>
-                {account.balanceSymbol || '$'}&nbsp;
-                <AmountVisibility
-                  value={account.balance}
-                  visibility={visibility}
-                  units={decimals}
-                />
+              <Text
+                aria-hidden={visibility}
+                aria-label={`${account.balanceSymbol} conversion rate to USD`}
+                data-account-name={account.name}
+                className="value"
+              >
+                {visibility ? totalValue : '$•••••'}
               </Text>
             </Tooltip>
             <VisibilityButton
@@ -160,6 +162,14 @@ const styles = {
     },
     '.label': {
       lineHeight: '$tight',
+      fontSize: '$sm',
+      fontWeight: '$medium',
+    },
+    '.value': {
+      fontSize: 32,
+      fontFamily: '$mono',
+      fontWeight: '$bold',
+      lineHeight: '36px',
     },
   }),
   name: cssObj({