chore: add alert on not implemented action and remove other buttons. (F…

…uelLabs#216)

.changeset/ten-spies-move.md

@@ -0,0 +1,2 @@
+---
+---

packages/app/src/config.ts

@@ -10,7 +10,7 @@ export const {
 } = import.meta.env;
 
 export const DECIMAL_UNITS = 9;
-export const FORMAT_LANGUAGE = 'es';
+export const FORMAT_LANGUAGE = 'en-US';
 export const MIN_FRACTION_DIGITS = 1;
 export const MAX_FRACTION_DIGITS = 3;
 export const MNEMONIC_SIZE = 16;

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

@@ -1,12 +1,4 @@
-import {
-  Avatar,
-  CardList,
-  Flex,
-  Heading,
-  Icon,
-  IconButton,
-  Text,
-} from '@fuel-ui/react';
+import { Avatar, CardList, Flex, Heading, Text } from '@fuel-ui/react';
 import type { Account } from '@fuel-wallet/types';
 
 import { shortAddress } from '~/systems/Core';
@@ -26,22 +18,22 @@ export function AccountItem({
   /**
    * TODO: add DropdownMenu here with actions after it's done on @fuel-ui
    */
-  const rightEl = (
-    <IconButton
-      size="xs"
-      variant="link"
-      color="gray"
-      icon={<Icon icon="DotsThreeOutline" color="gray8" />}
-      aria-label="Action"
-      css={{
-        px: '$0',
-        color: '$gray10',
-      }}
-    />
-  );
+  // const rightEl = (
+  //   <IconButton
+  //     size="xs"
+  //     variant="link"
+  //     color="gray"
+  //     icon={<Icon icon="DotsThreeOutline" color="gray8" />}
+  //     aria-label="Action"
+  //     css={{
+  //       px: '$0',
+  //       color: '$gray10',
+  //     }}
+  //   />
+  // );
   return (
-    <CardList.Item isActive={isSelected} rightEl={rightEl}>
-      <Avatar.Generated size="md" hash={account.address} />
+    <CardList.Item isActive={isSelected}>
+      <Avatar.Generated size="md" background="fuel" hash={account.address} />
       <Flex direction="column">
         <Heading as="h5" css={{ margin: 0 }}>
           {account.name}

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

@@ -22,17 +22,17 @@ describe('BalanceWidget', () => {
 
   it('should show formatted balance', () => {
     render(<BalanceWidget account={ACCOUNT} />);
-    expect(screen.getByText(/12,009/)).toBeInTheDocument();
+    expect(screen.getByText(/12.009/)).toBeInTheDocument();
   });
 
   it('should hide balance when click on toggle button', async () => {
     const { user } = render(<BalanceWidget account={ACCOUNT} />);
     const btn = screen.getByLabelText(/Hide balance/i);
     expect(btn).toBeInTheDocument();
 
-    expect(screen.getByText(/12,009/)).toBeInTheDocument();
+    expect(screen.getByText(/12.009/)).toBeInTheDocument();
     await user.click(btn);
-    expect(() => screen.getByText(/12,009/)).toThrow();
+    expect(() => screen.getByText(/12.009/)).toThrow();
   });
 
   it('should copy full address when click on copy icon', async () => {

packages/app/src/systems/Asset/components/AssetItem/AssetItem.test.tsx

@@ -18,6 +18,6 @@ describe('AssetItem', () => {
   });
   it('should show asset amount formatted', () => {
     render(<AssetItem asset={MOCK_ASSETS[0]} />);
-    expect(screen.getByText('14,564 ETH')).toBeInTheDocument();
+    expect(screen.getByText('14.564 ETH')).toBeInTheDocument();
   });
 });

packages/app/src/systems/Core/utils/math.test.ts

@@ -40,21 +40,21 @@ describe('Math', () => {
 
   describe('formatUnits()', () => {
     it('should format units to string using string', () => {
-      expect(formatUnits('1500000000')).toBe('1,5');
+      expect(formatUnits('1500000000')).toBe('1.5');
     });
     it('should format units to string using number', () => {
-      expect(formatUnits(1500000000)).toBe('1,5');
+      expect(formatUnits(1500000000)).toBe('1.5');
     });
     it('should format units to string using BigNumberish', () => {
-      expect(formatUnits(1500000000n)).toBe('1,5');
+      expect(formatUnits(1500000000n)).toBe('1.5');
     });
     it('should be able to set minimum and max fraction digits', () => {
       const opts = { minDigits: 4, maxDigits: 4 };
-      expect(formatUnits(1512345678n, opts)).toBe('1,5123');
+      expect(formatUnits(1512345678n, opts)).toBe('1.5123');
     });
     it('should be round digits when necessary', () => {
       const opts = { minDigits: 3 };
-      expect(formatUnits(1512500000n, opts)).toBe('1,513');
+      expect(formatUnits(1512500000n, opts)).toBe('1.513');
     });
   });
 });

packages/app/src/systems/Home/pages/Home/Home.tsx

@@ -12,6 +12,10 @@ export function Home() {
   const { isLoading, account } = useAccount();
   const navigate = useNavigate();
 
+  const sendAction = useCallback(() => {
+    window.alert('Send is not implemeted yet');
+  }, []);
+
   const goToReceive = useCallback(() => {
     navigate(Pages.receive());
   }, [navigate]);
@@ -22,7 +26,11 @@ export function Home() {
       <Layout.Content>
         <Flex css={{ height: '100%', flexDirection: 'column' }}>
           <BalanceWidget account={account} isLoading={isLoading} />
-          <HomeActions receiveAction={goToReceive} isDisabled={isLoading} />
+          <HomeActions
+            receiveAction={goToReceive}
+            sendAction={sendAction}
+            isDisabled={isLoading}
+          />
           <AssetsTitle />
           <AssetList
             assets={account?.balances}

packages/app/src/systems/SignUp/components/WalletCreated/WalletCreated.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Header } from '../Header';
 
+import { IS_CRX } from '~/config';
 import { AccountItem } from '~/systems/Account';
 import type { Maybe } from '~/systems/Core';
 import { Pages, ImageLoader, relativeUrl } from '~/systems/Core';
@@ -33,9 +34,11 @@ export function WalletCreated({ account }: WalletCreatedProps) {
         subtitle="These are your Fuel wallet details"
       />
       {account && <AccountItem account={account} />}
-      <Button color="accent" onPress={handleGoToWallet}>
-        Go to wallet
-      </Button>
+      {!IS_CRX && (
+        <Button color="accent" onPress={handleGoToWallet}>
+          Go to wallet
+        </Button>
+      )}
     </Stack>
   );
 }