feat: add new Asset component

.changeset/weak-camels-brush.md

@@ -0,0 +1,5 @@
+---
+'@fuel-ui/react': minor
+---
+
+Feat: add `Asset` component. Check it's story to know how to use it.

design-system/react/package.json

@@ -36,7 +36,7 @@
     "generate:defs": "node scripts/create-defs.mjs"
   },
   "dependencies": {
-    "@fuel-ts/math": "^0.49.1",
+    "@fuel-ts/math": "^0.53.0",
     "@fuel-ui/css": "workspace:*",
     "@fuel-ui/icons": "workspace:~",
     "@radix-ui/react-accordion": "^1.1.2",

design-system/react/src/components/Asset/Asset.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+
+import { Asset } from './Asset';
+import { MOCK_ASSETS } from './__mocks__/assets';
+
+const meta: Meta<typeof Asset> = {
+  title: 'UI/Asset',
+  component: Asset,
+};
+
+export default meta;
+type Story = StoryObj<typeof Asset>;
+
+const DEFAULT_ARGS = {
+  asset: MOCK_ASSETS.eth,
+  amount: '1000000000',
+};
+
+function Full(args: Story['args']) {
+  return (
+    <Asset {...args} {...DEFAULT_ARGS}>
+      <Asset.Icon />
+      <Asset.Name />
+      <Box.HStack css={{ ml: '$4' }}>
+        <Asset.Amount />
+        <Asset.Symbol />
+      </Box.HStack>
+    </Asset>
+  );
+}
+
+export const Usage: Story = {
+  render: (args) => <Full {...args} />,
+};
+
+export const IconName: Story = {
+  name: 'Icon + Name',
+  render: (args) => (
+    <Asset {...args} {...DEFAULT_ARGS}>
+      <Asset.Icon />
+      <Asset.Name />
+    </Asset>
+  ),
+};
+
+export const CustomIcon: Story = {
+  render: (args) => (
+    <Asset {...args} {...DEFAULT_ARGS}>
+      <Asset.Icon icon={<Icon icon={Icon.is('CurrencyEthereum')} />} />
+      <Asset.Name />
+    </Asset>
+  ),
+};
+
+export const NoIcon: Story = {
+  render: (args) => (
+    <Asset
+      {...args}
+      {...DEFAULT_ARGS}
+      asset={{ name: 'Ethereum', symbol: 'ETH' }}
+    >
+      <Asset.Icon />
+      <Asset.Name />
+    </Asset>
+  ),
+};
+
+export const AmountSymbol: Story = {
+  name: 'Amount + Symbol',
+  render: (args) => (
+    <Asset {...args} {...DEFAULT_ARGS}>
+      <Asset.Amount />
+      <Asset.Symbol />
+    </Asset>
+  ),
+};
+
+const AMOUNT_ARGS = {
+  asset: MOCK_ASSETS.eth,
+  amount: '1000000001',
+  precision: 9,
+};
+export const AmountExamples: Story = {
+  render: (args) => (
+    <Box.HStack gap="$8">
+      <Asset {...args} {...AMOUNT_ARGS}>
+        <Asset.Amount />
+        <Asset.Symbol />
+      </Asset>
+      <Asset {...args} {...AMOUNT_ARGS} negative>
+        <Asset.Amount />
+        <Asset.Symbol />
+      </Asset>
+    </Box.HStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <Box.VStack gap="$4">
+      <Full {...args} iconSize="sm" />
+      <Full {...args} iconSize="md" />
+      <Full {...args} iconSize="lg" />
+      <Full {...args} iconSize="xl" />
+      <Full {...args} iconSize={60} />
+    </Box.VStack>
+  ),
+};

design-system/react/src/components/Asset/Asset.test.tsx

@@ -0,0 +1,76 @@
+import { testA11y, screen, render } from '@fuels/jest';
+import { composeStory } from '@storybook/react';
+
+import { SIZES_MAP } from '../Avatar/styles';
+
+import Meta, * as Stories from './Asset.stories';
+import { MOCK_ASSETS } from './__mocks__/assets';
+
+const Usage = composeStory(Stories.Usage, Meta);
+const Sizes = composeStory(Stories.Sizes, Meta);
+const Amounts = composeStory(Stories.AmountExamples, Meta);
+const NoIcon = composeStory(Stories.NoIcon, Meta);
+const CustomIcon = composeStory(Stories.CustomIcon, Meta);
+
+describe('Asset', () => {
+  it('a11y', async () => {
+    await testA11y(<Usage />);
+  });
+
+  it('should render story usage properly', () => {
+    const { container } = render(<Usage />);
+    const img = screen.getByRole('img', { name: /ethereum image/i });
+    const asset = MOCK_ASSETS.eth;
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('width', String(SIZES_MAP.sm));
+    expect(img).toHaveAttribute('height', String(SIZES_MAP.sm));
+    expect(img).toHaveAttribute('src', asset.imageUrl);
+    expect(screen.getByText(asset.name)).toBeInTheDocument();
+    expect(screen.getByText(asset.symbol)).toBeInTheDocument();
+    expect(screen.getByText('1.000')).toBeInTheDocument();
+    expect(container.querySelector('.fuel_Asset')).toBeInTheDocument();
+    expect(container.querySelector('.fuel_Asset-name')).toBeInTheDocument();
+    expect(container.querySelector('.fuel_Asset-icon')).toBeInTheDocument();
+    expect(container.querySelector('.fuel_Asset-amount')).toBeInTheDocument();
+    expect(container.querySelector('.fuel_Asset-symbol')).toBeInTheDocument();
+  });
+
+  it('should render sizes according sizes map', () => {
+    render(<Sizes />);
+    const img = screen.getAllByRole('img', { name: /ethereum image/i });
+    ['sm', 'md', 'lg', 'xl'].forEach((size, index) => {
+      expect(img[index]).toBeInTheDocument();
+      expect(img[index]).toHaveAttribute('width', String(SIZES_MAP[size]));
+      expect(img[index]).toHaveAttribute('height', String(SIZES_MAP[size]));
+    });
+  });
+
+  it('should render amount in a different precision', () => {
+    render(<Amounts />);
+    expect(screen.getAllByText('1.000000001')).toHaveLength(2);
+  });
+
+  it('should render different icons for amount', () => {
+    render(<Amounts />);
+    expect(screen.getByLabelText('Icon ArrowUp')).toBeInTheDocument();
+    expect(screen.getByLabelText('Icon ArrowDown')).toBeInTheDocument();
+  });
+
+  it('should hide icon using prop', () => {
+    render(<Amounts hideIcon />);
+    expect(() => screen.getByLabelText('Icon ArrowUp')).toThrow();
+    expect(() => screen.getByLabelText('Icon ArrowDown')).toThrow();
+  });
+
+  it('should render a custom icon', () => {
+    render(<CustomIcon />);
+    expect(screen.getByLabelText('Icon CurrencyEthereum')).toBeInTheDocument();
+    expect(screen.getByLabelText('Ethereum icon')).toBeInTheDocument();
+  });
+
+  it('should render asset initial if no image url is passed', () => {
+    render(<NoIcon />);
+    expect(screen.getByText('ET')).toBeInTheDocument();
+    expect(screen.getByLabelText('Ethereum initials')).toBeInTheDocument();
+  });
+});

design-system/react/src/components/Asset/Asset.tsx

@@ -0,0 +1,80 @@
+import { bn } from '@fuel-ts/math';
+import { createContext, useContext } from 'react';
+import { useStyles } from '~/hooks';
+import { useStrictedChildren } from '~/hooks/useStrictedChildren';
+import { Components } from '~/utils/components-list';
+
+import { _unstable_createComponent, _unstable_createEl } from '../../utils';
+import { Box } from '../Box';
+import { DECIMAL_UNITS } from '../InputAmount/utils';
+
+import { AssetAmount } from './AssetAmount';
+import { AssetIcon } from './AssetIcon';
+import { AssetName } from './AssetName';
+import { AssetSymbol } from './AssetSymbol';
+import type { AssetDef, AssetProps } from './defs';
+import { styles } from './styles';
+
+type ContextProps = AssetProps & {
+  amountStr: string;
+  isNegative: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ctx = createContext<ContextProps>({} as any);
+export function useAssetProps() {
+  return useContext(ctx);
+}
+
+const CHILD_ITEMS = [
+  'AssetIcon',
+  'AssetSymbol',
+  'AssetName',
+  'AssetAmount',
+  'HStack',
+  'VStack',
+];
+
+export const Asset = _unstable_createComponent<AssetDef>(
+  Components.Asset,
+  ({
+    children,
+    gap = '$4',
+    iconSize = 'sm',
+    units = DECIMAL_UNITS,
+    precision = 3,
+    negative,
+    asset,
+    amount,
+    hideIcon,
+    ...props
+  }) => {
+    const classes = useStyles(styles, props, ['root']);
+    const newChildren = useStrictedChildren('Asset', CHILD_ITEMS, children);
+    const amountStr = bn(amount).format({ units, precision });
+    const isNegative = negative || bn(amount).lt(0);
+    return (
+      <ctx.Provider
+        value={{
+          iconSize,
+          asset,
+          units,
+          precision,
+          hideIcon,
+          amount,
+          amountStr,
+          isNegative,
+        }}
+      >
+        <Box.Stack {...props} {...classes.root} direction="row" gap={gap}>
+          {newChildren}
+        </Box.Stack>
+      </ctx.Provider>
+    );
+  },
+);
+
+Asset.Icon = AssetIcon;
+Asset.Name = AssetName;
+Asset.Symbol = AssetSymbol;
+Asset.Amount = AssetAmount;

design-system/react/src/components/Asset/AssetAmount.tsx

@@ -0,0 +1,38 @@
+import { useStyles } from '~/hooks';
+import { Components } from '~/utils/components-list';
+
+import {
+  _unstable_createComponent,
+  _unstable_createEl,
+  createPolymorphicComponent,
+} from '../../utils';
+import { Text } from '../Text';
+
+import { useAssetProps } from './Asset';
+import type { AssetAmountDef } from './defs';
+import { styles } from './styles';
+
+const _AssetAmount = _unstable_createComponent<AssetAmountDef>(
+  Components.AssetAmount,
+  (props) => {
+    const { hideIcon, amountStr, isNegative } = useAssetProps();
+    const classes = useStyles(styles, props, ['amount']);
+    return (
+      <Text
+        {...props}
+        {...classes.amount}
+        iconColor={isNegative ? 'intentsError9' : 'brand'}
+        {...(!hideIcon && {
+          leftIcon: isNegative ? 'ArrowDown' : 'ArrowUp',
+        })}
+      >
+        {amountStr}
+      </Text>
+    );
+  },
+);
+
+export const AssetAmount =
+  createPolymorphicComponent<AssetAmountDef>(_AssetAmount);
+
+AssetAmount.id = 'AssetAmount';