feat: add new Asset component

[pedronauck]

This pull request intends to add a new component called Asset to handle different scenarios using visual information related to assets across all applications.

Usage

Works as a namespace component, using context to set data, and just using the child component to manage UI.

import { Asset } from '@fuel-ui/react'

function App() {
  return (
    <Asset asset={Asset.get('eth')} amount="1000000000">
      <Asset.Icon />
      <Asset.Name />
      <Box.HStack>
        <Asset.Amount />
        <Asset.Symbol />
      </Box.HStack>
    </Asset>
  );
}

This code will render a component like this:

You can see other variations that are possible to create inside the Asset story.

[luizstacio]

We should not include this here, but instead, we can receive a JSON with these configs on the application level. This is because we will need an asset package with only asset information and images, that will contain more information.

[pedronauck]

✅

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟢	Statements	84.95%	2388/2811
🟡	Branches	75.49%	425/563
🟢	Functions	83.55%	254/304
🟢	Lines	90.41%	2121/2346

Test suite run success

197 tests passing in 49 suites.

Report generated by 🧪jest coverage report action from b1ede38

[luizstacio]

This looks like something that could affect the performance of the application. As if create arrays on every execution, and not caches anything. What do you think?

[pedronauck]

hm, I guess isn't a big thing, but I just added two useMemo to prevent head and last from being on every render and added the check inside an useEffect. We already have other children map operations inside components, which isn't something so unusual in fact.