add "new" badge to strategy tiles < 90 days old

tradingstrategy-ai · Sep 18, 2024 · c99c0a4 · c99c0a4
1 parent 1932a55
commit c99c0a4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 42 deletions.
diff --git a/src/routes/strategies/StrategyBadges.svelte b/src/routes/strategies/StrategyBadges.svelte
diff --git a/src/routes/strategies/StrategyTile.svelte b/src/routes/strategies/StrategyTile.svelte
@@ -5,9 +5,8 @@
 	import { utcDay } from 'd3-time';
 	import { normalizeDataForInterval } from '$lib/chart';
 	import { getChain } from '$lib/helpers/chain.js';
-	import { Button, DataBadge, EntitySymbol, Tooltip } from '$lib/components';
+	import { Button, DataBadge, Tooltip } from '$lib/components';
 	import { StrategyIcon } from 'trade-executor/components';
-	import StrategyBadges from './StrategyBadges.svelte';
 	import ChartThumbnail from './ChartThumbnail.svelte';
 	import StrategyDataSummary from './StrategyDataSummary.svelte';
 	import { getTradeExecutorErrorHtml } from 'trade-executor/strategy/error';
@@ -20,6 +19,12 @@
 
 	const chain = getChain(strategy.on_chain_data?.chain_id);
 
+	const tags = strategy.tags?.filter((tag) => tag !== 'live') ?? [];
+	const isLive = strategy.tags?.includes('live');
+
+	const launchedAt = strategy.summary_statistics?.launched_at;
+	const isNew = launchedAt ? utcDay.count(launchedAt, new Date()) < 90 : false;
+
 	const href = `/strategies/${strategy.id}`;
 	const errorHtml = getTradeExecutorErrorHtml(strategy);
 
@@ -51,33 +56,45 @@
 				{/if}
 			</div>
 
-			{#if !simplified}
-				<div class="badges">
-					{#if errorHtml}
-						<Tooltip>
-							<DataBadge slot="trigger" status="error">Error</DataBadge>
-							<svelte:fragment slot="popup">{@html errorHtml}</svelte:fragment>
-						</Tooltip>
-					{/if}
-
-					<StrategyBadges tags={strategy.tags ?? []} includeLive={admin} />
-
-					{#if strategy.new_version_id}
-						<Tooltip>
-							<DataBadge slot="trigger" status="error">Outdated</DataBadge>
-							<svelte:fragment slot="popup">
-								This is an outdated strategy. An updated version is available
-								<a href="/strategies/{strategy.new_version_id}">here</a>.
-							</svelte:fragment>
-						</Tooltip>
-					{/if}
-				</div>
-			{/if}
+			<div class="badges">
+				{#if !simplified && errorHtml}
+					<Tooltip>
+						<DataBadge slot="trigger" status="error">Error</DataBadge>
+						<svelte:fragment slot="popup">{@html errorHtml}</svelte:fragment>
+					</Tooltip>
+				{/if}
+
+				{#if !simplified && admin && isLive}
+					<DataBadge status="success">live</DataBadge>
+				{/if}
+
+				{#if isNew && !strategy.new_version_id}
+					<DataBadge status="success">new</DataBadge>
+				{/if}
+
+				{#if !simplified}
+					{#each tags as tag}
+						<DataBadge status="warning">{tag}</DataBadge>
+					{/each}
+				{/if}
+
+				{#if !simplified && strategy.new_version_id}
+					<Tooltip>
+						<DataBadge slot="trigger" status="error">Outdated</DataBadge>
+						<svelte:fragment slot="popup">
+							This is an outdated strategy. An updated version is available
+							<a href="/strategies/{strategy.new_version_id}">here</a>.
+						</svelte:fragment>
+					</Tooltip>
+				{/if}
+			</div>
 		</div>
+
 		<div class="chart">
 			<ChartThumbnail data={chartData} dateRange={chartDateRange} />
 		</div>
 	</div>
+
 	<div class="content">
 		<header>
 			<div class="avatar">

diff --git a/src/routes/strategies/[strategy]/+layout.svelte b/src/routes/strategies/[strategy]/+layout.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import Breadcrumbs from '$lib/breadcrumb/Breadcrumbs.svelte';
-	import { AlertList, PageHeading } from '$lib/components';
+	import { AlertList, DataBadge, PageHeading } from '$lib/components';
 	import { StrategyIcon } from 'trade-executor/components';
 	import { menuOptions, default as StrategyNav } from './StrategyNav.svelte';
-	import StrategyBadges from '../StrategyBadges.svelte';
 	import { WalletWidget } from '$lib/wallet';
 	import { getTradeExecutorErrorHtml } from 'trade-executor/strategy/error';
 
@@ -14,6 +13,8 @@
 
 	$: isOverviewPage = $page.url.pathname.endsWith(strategy.id);
 
+	$: tags = strategy.tags.filter((tag) => tag !== 'live');
+
 	$: errorHtml = getTradeExecutorErrorHtml(strategy);
 
 	$: isOutdated = Boolean(strategy.new_version_id);
@@ -35,7 +36,10 @@
 			<StrategyIcon slot="icon" {strategy} />
 			<div class="title" slot="title">
 				{strategy.name}
-				<StrategyBadges class="badge" tags={strategy.tags} />
+
+				{#each tags as tag}
+					<DataBadge class="badge" status="warning">{tag}</DataBadge>
+				{/each}
 			</div>
 			<div class="wallet-widget" slot="cta">
 				<WalletWidget {strategy} />