DRY up getProjectColor between explore pages

drips-network · Jan 13, 2025 · bc128ba · bc128ba
1 parent 9ca204d
commit bc128ba
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/src/routes/(pages)/app/(app)/components/default-explore-page.svelte b/src/routes/(pages)/app/(app)/components/default-explore-page.svelte
@@ -59,6 +59,7 @@
   import type { postsListingSchema } from '../../../../api/blog/posts/schema';
   import LatestNewsSection from './latest-news-section.svelte';
   import ConnectWalletPrompt from './connect-wallet-prompt.svelte';
+  import getProjectColor from './project-color';
 
   const FEATURED_WEB_3_PROJECTS_ACCOUNT_IDS =
     {
@@ -137,16 +138,6 @@
     maximumFractionDigits: 0,
   }).format(Math.round(tlv));
 
-  function getProjectColor(project: (typeof featuredWeb3Projects)[number]) {
-    const chainData = filterCurrentChainData(project.chainData);
-
-    if (!isClaimed(chainData)) {
-      return;
-    }
-
-    return chainData.color;
-  }
-
   let tickHandle: number;
   onMount(async () => {
     tickHandle = tickStore.register(update);

diff --git a/src/routes/(pages)/app/(app)/components/filecoin-explore-page.svelte b/src/routes/(pages)/app/(app)/components/filecoin-explore-page.svelte
@@ -17,12 +17,9 @@
   import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte';
   import BoxIcon from '$lib/components/icons/Box.svelte';
   import Box from '$lib/components/icons/Box.svelte';
-  // import ProjectCard, {
-  //   PROJECT_CARD_FRAGMENT,
-  // } from '$lib/components/project-card/project-card.svelte';
-  // import { gql } from 'graphql-request';
   import type { DefaultExplorePageFeaturedProjectFragment } from './__generated__/gql.generated';
   import ProjectCard from '$lib/components/project-card/project-card.svelte';
+  import getProjectColor from './project-color';
 
   export let blogPosts: z.infer<typeof postsListingSchema>;
   export let projects: DefaultExplorePageFeaturedProjectFragment[];
@@ -32,17 +29,6 @@
   );
 
   $: recentlyClaimedProjects = projectsWithoutJasonTests.slice(-4).filter((p) => p.isVisible);
-
-  // TODO: duplicated
-  function getProjectColor(project: (typeof projects)[number]) {
-    const chainData = filterCurrentChainData(project.chainData);
-
-    if (!isClaimed(chainData)) {
-      return;
-    }
-
-    return chainData.color;
-  }
 </script>
 
 <div class="explore">

diff --git a/src/routes/(pages)/app/(app)/components/project-color.ts b/src/routes/(pages)/app/(app)/components/project-color.ts
@@ -0,0 +1,15 @@
+import type { DefaultExplorePageFeaturedProjectFragment } from './__generated__/gql.generated';
+import filterCurrentChainData from '../../../../../lib/utils/filter-current-chain-data';
+import isClaimed from '../../../../../lib/utils/project/is-claimed';
+
+// This would be a great utility, but so far we rely on the generated DefaultExplorePageFeaturedProjectFragment
+// type, so I'm keeping it near the type's generation.
+export default function getProjectColor(project: DefaultExplorePageFeaturedProjectFragment) {
+  const chainData = filterCurrentChainData(project.chainData);
+
+  if (!isClaimed(chainData)) {
+    return;
+  }
+
+  return chainData.color;
+}