feat(icons): enhance HBRIcon and add new product icons

- Updated HBRIcon component to accept a color prop for dynamic coloring.
- Added KosmosProductIcon and StakeProductIcon to the actions index for better modularity.
- Refactored PRODUCTS to utilize new icons and adjusted scales for improved UI consistency.

Author: ArturHoncharuk

src/components/svg/icons/TokenHBR.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { Path, Svg } from 'react-native-svg';
 import { IconProps } from './Icon.types';
 
-export function HBRIcon({ scale = 1 }: IconProps) {
+export function HBRIcon({ scale = 1, color = '#FFC93E' }: IconProps) {
   const size = 29 * scale;
   return (
     <Svg width={size} height={size} viewBox="0 0 32 33" fill="none">
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2 16.6958C2 9.68803 6.93003 3.84256 13.4802 2.50022V7.10895C9.79249 8.23249 7.01095 11.4646 6.51161 15.4164H10.94C11.5733 13.0201 13.7561 11.2536 16.3514 11.2536C18.9467 11.2536 21.1295 13.0201 21.7628 15.4164H26.1903C25.6909 11.4642 22.9089 8.23187 19.2206 7.10862V2.5C25.7713 3.84192 30.7019 9.68765 30.7019 16.6958C30.7019 24.6958 24.2768 31.1812 16.351 31.1812C8.42514 31.1812 2 24.6958 2 16.6958ZM26.146 18.2866L21.7623 18.2866C21.2496 20.2235 19.7245 21.7487 17.7876 22.2614V26.604C22.0696 25.977 25.4655 22.589 26.146 18.2866ZM14.9174 26.6045V22.262C12.9794 21.7498 11.4534 20.2242 10.9405 18.2866L6.5559 18.2866C7.23656 22.59 10.6339 25.9786 14.9174 26.6045Z"
-        fill="#FFC93E"
+        fill={color}
       />
     </Svg>
   );

src/components/svg/icons/v2/actions/KosmosProduct.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Circle, Path, Svg } from 'react-native-svg';
+import { COLORS } from '@constants/colors';
+import { IconProps } from '../../Icon.types';
+
+export function KosmosProductIcon({
+  scale = 1,
+  color = COLORS.neutral0
+}: IconProps) {
+  const size = 24;
+  const scaled = size * scale;
+
+  return (
+    <Svg width={scaled} height={scaled} fill="none" viewBox="0 0 60 60">
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M58.194 19.718c-3.442-6.043-9.941-10.117-17.392-10.117-11.047 0-20.001 8.954-20.001 20 0 11.047 8.954 20.001 20 20.001 7.976 0 14.86-4.668 18.073-11.42-3.561 12.593-15.14 21.82-28.873 21.82C13.432 60.003 0 46.572 0 30.002S13.432 0 30.001 0c12.957 0 23.995 8.214 28.193 19.718"
+        clipRule="evenodd"
+      ></Path>
+      <Circle cx="50.217" cy="29.348" r="9.783" fill="#fff"></Circle>
+    </Svg>
+  );
+}

src/components/svg/icons/v2/actions/StakeProduct.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Circle, Path, Svg } from 'react-native-svg';
+import { COLORS } from '@constants/colors';
+import { IconProps } from '../../Icon.types';
+
+export function StakeProductIcon({ scale = 1 }: IconProps) {
+  const size = 24;
+  const scaled = size * scale;
+
+  return (
+    <Svg width={scaled} height={scaled} fill="none" viewBox="0 0 60 60">
+      <Circle cx="30.004" cy="30.001" r="24" fill="#fff"></Circle>
+      <Circle cx="30" cy="30" r="29.5" stroke="#fff"></Circle>
+      <Path
+        fill={COLORS.brand600}
+        fillRule="evenodd"
+        d="M22.149 45.074a.43.43 0 0 1-.58-.126l-.495-.728a.437.437 0 0 1 .096-.59 19.1 19.1 0 0 0 4.014-4.242c3.915-5.72 3.915-12.919 0-18.639a19.1 19.1 0 0 0-4.014-4.243.437.437 0 0 1-.096-.589l.494-.728a.43.43 0 0 1 .58-.126l21.934 13.37a1.915 1.915 0 0 1 0 3.27z"
+        clipRule="evenodd"
+      ></Path>
+    </Svg>
+  );
+}

src/components/svg/icons/v2/actions/index.ts

@@ -3,3 +3,5 @@ export { SwapAccountActionIcon } from './SwapAccountAction';
 export { StakeAccountActionIcon } from './StakeAccountAction';
 export { BridgeAccountActionIcon } from './BridgeAccountAction';
 export { KosmosAccountActionIcon } from './KosmosAccountAction';
+export { KosmosProductIcon } from './KosmosProduct';
+export { StakeProductIcon } from './StakeProduct';

src/features/products/entities/_products.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { TFunction } from 'i18next';
+import { HBRIcon } from '@components/svg/icons';
 import {
   BridgeAccountActionIcon,
+  KosmosProductIcon,
+  StakeProductIcon,
   SwapAccountActionIcon
 } from '@components/svg/icons/v2/actions';
-import { HarborAccountAction } from '@components/svg/icons/v2/harbor';
+import { COLORS } from '@constants/colors';
 import { CustomAppEvents } from '@lib/firebaseEventAnalytics';
 import { SectionizedProducts } from '../utils';
 
@@ -18,7 +21,7 @@ export const PRODUCTS = (t: TFunction<string>): SectionizedProducts[] => {
           name: t('token.actions.swap'),
           description: t('products.swap.description'),
           icon: (
-            <SwapAccountActionIcon scale={2} color="rgba(166, 129, 239, 1)" />
+            <SwapAccountActionIcon scale={2.5} color="rgba(166, 129, 239, 1)" />
           ),
           background: ['rgba(132, 224, 255, 0.2)', 'rgba(160, 99, 221, 0.2)'],
           color: 'rgba(52, 27, 104, 1)',
@@ -30,7 +33,10 @@ export const PRODUCTS = (t: TFunction<string>): SectionizedProducts[] => {
           name: t('account.actions.bridge'),
           description: t('products.bridge.description'),
           icon: (
-            <BridgeAccountActionIcon scale={2} color="rgba(255, 152, 99, 1)" />
+            <BridgeAccountActionIcon
+              scale={2.5}
+              color="rgba(255, 152, 99, 1)"
+            />
           ),
           background: ['rgba(164, 128, 235, 0.2)', 'rgba(210, 95, 95, 0.2)'],
           color: 'rgba(118, 43, 6, 1)',
@@ -46,9 +52,7 @@ export const PRODUCTS = (t: TFunction<string>): SectionizedProducts[] => {
           id: 2,
           name: t('account.actions.stake'),
           description: t('products.stake.description'),
-          icon: (
-            <SwapAccountActionIcon scale={2} color="rgba(255, 255, 255, 1)" />
-          ),
+          icon: <StakeProductIcon scale={2.5} color="rgba(255, 255, 255, 1)" />,
           background: ['rgba(53, 104, 221, 1)', 'rgba(33, 65, 140, 1)'],
           color: 'rgba(255, 255, 255, 1)',
           route: 'StakingPools',
@@ -59,7 +63,7 @@ export const PRODUCTS = (t: TFunction<string>): SectionizedProducts[] => {
           name: 'KOSMOS',
           description: t('products.kosmos.description'),
           icon: (
-            <SwapAccountActionIcon scale={2} color="rgba(255, 255, 255, 1)" />
+            <KosmosProductIcon scale={2.5} color="rgba(255, 255, 255, 1)" />
           ),
           background: ['rgba(67, 68, 145, 1)', 'rgba(51, 48, 96, 1)'],
           color: 'rgba(255, 255, 255, 1)',
@@ -70,7 +74,7 @@ export const PRODUCTS = (t: TFunction<string>): SectionizedProducts[] => {
           id: 4,
           name: 'HARBOR',
           description: t('products.harbor.description'),
-          icon: <HarborAccountAction scale={1} />,
+          icon: <HBRIcon scale={2.35} color={COLORS.neutral0} />,
           background: ['rgba(255, 201, 62, 1)', 'rgba(224, 131, 0, 1)'],
           color: 'rgba(255, 255, 255, 1)',
           route: 'Harbor',