refactor: Pool feature metadata

src/components/chips/PoolFeatureChip.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { Protocol, protocolIconPaths } from '@/composables/useProtocols';
+import { PoolFeature } from '@/types/pools';
+import { useI18n } from 'vue-i18n';
+
+type Props = {
+  feature: PoolFeature;
+  protocols: Protocol[];
+};
+
+const props = defineProps<Props>();
+
+const iconURIs = props.protocols.map(protocol => protocolIconPaths[protocol]);
+
+const hasIcons = props.protocols.length > 0;
+
+const width = 20 + (iconURIs.length - 1) * 16;
+
+const { t } = useI18n();
+
+function getFeatureClasses() {
+  switch (props.feature) {
+    case PoolFeature.Boosted:
+      return 'bg-gradient-to-tr from-yellow-500 to-pink-500';
+    case PoolFeature.CLP:
+      return 'bg-gradient-to-tr from-pink-300 to-yellow-200';
+    default:
+      return '';
+  }
+}
+
+function getFeatureLabel(): string {
+  switch (props.feature) {
+    case PoolFeature.Boosted:
+      return t('boosted');
+    case PoolFeature.CLP:
+      return 'CLP';
+    default:
+      return '';
+  }
+}
+</script>
+
+<template>
+  <div
+    data-testid="feature-chip"
+    :class="[
+      'flex relative items-center py-1 pr-1.5 pl-2 max-h-10 rounded',
+      getFeatureClasses(),
+    ]"
+  >
+    <BalAssetSet
+      v-if="hasIcons"
+      :logoURIs="iconURIs"
+      :width="width"
+      :size="16"
+      :ringSize="1"
+    />
+    <span class="text-xs font-semibold text-white">{{
+      getFeatureLabel()
+    }}</span>
+  </div>
+</template>

src/components/tables/PoolsTable/PoolsTableExtraInfo.spec.ts

@@ -17,7 +17,7 @@ test('Renders boosted pool button with boosted chip', () => {
   renderInfo(aPool({ id: boostedPoolId }));
 
   expect(screen.getByRole('button', { name: 'Boosted' })).toBeInTheDocument();
-  expect(screen.getByTestId('boosted-chip')).toBeInTheDocument();
+  expect(screen.getByTestId('feature-chip')).toBeInTheDocument();
 });
 
 test('Renders NEW pool chip', () => {

src/components/tables/PoolsTable/PoolsTableExtraInfo.vue

@@ -2,13 +2,14 @@
 import {
   isLiquidityBootstrapping,
   isBoosted,
+  protocolsFor,
+  isClp,
 } from '@/composables/usePoolHelpers';
-import { poolMetadata } from '@/lib/config/metadata';
 import { Pool } from '@/services/pool/types';
-import { PoolMetadata } from '@/types/pools';
+import { PoolFeature } from '@/types/pools';
 import BalChipNew from '@/components/chips/BalChipNew.vue';
-import BoostedChip from '@/components/chips/BoostedChip.vue';
 import PoolWarningTooltip from '@/components/pool/PoolWarningTooltip.vue';
+import PoolFeatureChip from '@/components/chips/PoolFeatureChip.vue';
 
 type Props = {
   pool: Pool;
@@ -21,8 +22,19 @@ defineProps<Props>();
   <div>
     <BalTooltip v-if="isBoosted(pool)" :text="$t('boostedTooltip')" width="56">
       <template #activator>
-        <BoostedChip
-          :metadata="poolMetadata(pool.id) as PoolMetadata"
+        <PoolFeatureChip
+          :feature="PoolFeature.Boosted"
+          :protocols="protocolsFor(pool, PoolFeature.Boosted)"
+          class="ml-1"
+        />
+      </template>
+    </BalTooltip>
+
+    <BalTooltip v-if="isClp(pool)" :text="$t('clpTooltip')" width="56">
+      <template #activator>
+        <PoolFeatureChip
+          :feature="PoolFeature.CLP"
+          :protocols="protocolsFor(pool, PoolFeature.CLP)"
           class="ml-1"
         />
       </template>

src/composables/usePoolHelpers.ts

@@ -13,7 +13,11 @@ import {
 } from '@/lib/utils';
 import { includesWstEth } from '@/lib/utils/balancer/lido';
 import { configService } from '@/services/config/config.service';
-import { DeprecatedDetails, NewVersionAvailableDetails } from '@/types/pools';
+import {
+  DeprecatedDetails,
+  NewVersionAvailableDetails,
+  PoolFeature,
+} from '@/types/pools';
 
 import { AnyPool, Pool, PoolToken, SubPool } from '@/services/pool/types';
 import { hasBalEmissions } from './useAPR';
@@ -27,6 +31,7 @@ import {
 import useNumbers, { FNumFormats, numF } from './useNumbers';
 import { dateToUnixTimestamp } from './useTime';
 import { poolMetadata } from '@/lib/config/metadata';
+import { Protocol } from './useProtocols';
 
 const POOLS = configService.network.pools;
 
@@ -93,11 +98,25 @@ export function isDeep(pool: Pool): boolean {
 }
 
 export function isBoosted(pool: Pool) {
-  return !!poolMetadata(pool.id)?.boosted;
+  return !!Object.keys(poolMetadata(pool.id)?.features || {}).includes(
+    PoolFeature.Boosted
+  );
+}
+
+export function isClp(pool: Pool) {
+  return !!Object.keys(poolMetadata(pool.id)?.features || {}).includes(
+    PoolFeature.CLP
+  );
+}
+
+export function protocolsFor(pool: Pool, feature: PoolFeature): Protocol[] {
+  return poolMetadata(pool.id)?.features?.[feature]?.featureProtocols || [];
 }
 
 export function boostedProtocols(pool: Pool) {
-  return poolMetadata(pool.id)?.boostedProtocols;
+  if (!isBoosted(pool)) return [];
+  return poolMetadata(pool.id)?.features?.[PoolFeature.Boosted]
+    ?.featureProtocols;
 }
 
 /**

src/composables/usePoolRisks.ts

@@ -1,4 +1,4 @@
-import { BoostedProtocol } from '@/composables/useBoostedPool';
+import { Protocol } from '@/composables/useProtocols';
 import {
   isArbitrum,
   isGnosis,
@@ -93,17 +93,13 @@ export function riskLinks(pool: Pool): Risk[] {
 export function generateThirdPartyComposabilityRisks(pool): Risk | undefined {
   const protocols = boostedProtocols(pool);
 
-  if (
-    protocols?.includes(BoostedProtocol.Tetu) ||
-    protocols?.includes(BoostedProtocol.Idle)
-  )
+  if (protocols?.includes(Protocol.Tetu) || protocols?.includes(Protocol.Idle))
     return aLink(
       RiskKey.Composability,
       'Third party DeFi composability risks: May use multiple yield protocols'
     );
 
-  if (protocols?.includes(BoostedProtocol.Reaper))
-    protocols.push(BoostedProtocol.Granary);
+  if (protocols?.includes(Protocol.Reaper)) protocols.push(Protocol.Granary);
 
   if (protocols) {
     return aLink(

src/composables/useBoostedPool.ts → src/composables/useProtocols.ts

@@ -1,4 +1,4 @@
-export enum BoostedProtocol {
+export enum Protocol {
   Aave = 'aave',
   Agave = 'agave',
   Beefy = 'beefy',
@@ -15,60 +15,60 @@ export enum BoostedProtocol {
   Zerovix = '0vix',
 }
 
-export const boostedProtocolIconPaths: Record<BoostedProtocol, string> = {
-  [BoostedProtocol.Aave]: new URL(
+export const protocolIconPaths: Record<Protocol, string> = {
+  [Protocol.Aave]: new URL(
     '@/assets/images/icons/protocols/aave.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Agave]: new URL(
+  [Protocol.Agave]: new URL(
     '@/assets/images/icons/protocols/agave.png',
     import.meta.url
   ).href,
-  [BoostedProtocol.Beefy]: new URL(
+  [Protocol.Beefy]: new URL(
     '@/assets/images/icons/protocols/beefy.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Euler]: new URL(
+  [Protocol.Euler]: new URL(
     '@/assets/images/icons/protocols/euler.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Yearn]: new URL(
+  [Protocol.Yearn]: new URL(
     '@/assets/images/icons/protocols/yearn.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Gearbox]: new URL(
+  [Protocol.Gearbox]: new URL(
     '@/assets/images/icons/protocols/gearbox.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Idle]: new URL(
+  [Protocol.Idle]: new URL(
     '@/assets/images/icons/protocols/idle.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Morpho]: new URL(
+  [Protocol.Morpho]: new URL(
     '@/assets/images/icons/protocols/morpho.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Tessera]: new URL(
+  [Protocol.Tessera]: new URL(
     '@/assets/images/icons/protocols/tessera.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Sturdy]: new URL(
+  [Protocol.Sturdy]: new URL(
     '@/assets/images/icons/protocols/sturdy.png',
     import.meta.url
   ).href,
-  [BoostedProtocol.Reaper]: new URL(
+  [Protocol.Reaper]: new URL(
     '@/assets/images/icons/protocols/reaper.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Granary]: new URL(
+  [Protocol.Granary]: new URL(
     '@/assets/images/icons/protocols/granary.svg',
     import.meta.url
   ).href,
-  [BoostedProtocol.Tetu]: new URL(
+  [Protocol.Tetu]: new URL(
     '@/assets/images/icons/protocols/tetu.png',
     import.meta.url
   ).href,
-  [BoostedProtocol.Zerovix]: new URL(
+  [Protocol.Zerovix]: new URL(
     '@/assets/images/icons/protocols/0vix.svg',
     import.meta.url
   ).href,