fix(frontend): Token group with disabled native token network should not display CK icon name and symbol

[daviddecentage]

Motivation

When we disable the network for the native token of a token group, but there still is another token that gets grouped with the CK token, the icon, name and symbol of the group shows the CK tokens data which isnt correct.

Changes

• Introduces token groups, with a groupData prop on the tokens. This will decide what group icon, name and symbol will be displayed when the token forms a group in the homepage token list. In the future we could also use this to define how groups should be formed instead of figuring it out based on token data as it is now.
• Refactored all tokens to include the group
• Used main token group for ck tokens
• Adjusted TokenCard and TokenCardGroup to now display the groupData info when rendering the TokenCard with prop asGroup
• Added groupData prop to schemas for Token and IcCkInterface

Tests

Before:

After:

[AntonioVentilii]

For the future development (including more networks) and to have a global solution, I suggest that we tackle this issue in a different way. Let's create a common prop inside Token (or maybe TokenUI) type

groupingData: {
  symbol,
  icon,
  name
}

so, we create base grouping data objects (like USDC, ETH, or similars) and add it to all the existing tokens where required. So, when we group, instead of using twinTokens for ICRC, and other props for the rest, we use this directly for all tokens (if present).

WDYT?