fix: get chain id from collections

src/lib/apis/product/list-products.ts

@@ -18,6 +18,7 @@ export interface ProductResponseData {
 	description: string;
 	created_at: string;
 	featured_at: string;
+	product_collections: { collection: { chain_id: string } }[];
 	attributes: [{ name: string; value: string }];
 }
 
@@ -56,6 +57,11 @@ export async function listProduct(
         owner {
           name
         }
+        product_collections {
+          collection {
+            chain_id
+          }
+        }
       }
       ipscan_products_aggregate(where: {name: {_ilike: $name}, category: {_eq: $category}}) {
         aggregate {

src/lib/ui-components/badges/ChainBadge.svelte

@@ -1,23 +1,18 @@
 <script lang="ts">
+	import { CHAINS } from '$lib/constants';
 	import { Badge } from 'flowbite-svelte';
 	import type { BadgeProps } from 'flowbite-svelte/Badge.svelte';
 
-	export let chainName: string;
+	export let chainId: string;
 	export let dark: boolean = false;
 
-	const chains: Record<string, string> = {
-		'Aura network': 'Aura network',
-		Ethereum: 'Ethereum',
-		'Arbitrum One': 'Arbitrum One',
-		'Avalanche C-Chain': 'Avalanche C-Chain'
-	};
-
 	const colors: Record<string, BadgeProps['color']> = {
-		'Aura network': 'green',
-		Ethereum: 'red',
-		'Arbitrum One': 'yellow',
-		'Avalanche C-Chain': 'purple'
+		'6322': 'green',
+		'1': 'red',
+		'11155111': 'yellow'
 	};
+
+	console.log(chainId);
 </script>
 
-<Badge color={colors[chainName] ?? 'dark'} border={dark}>{chains[chainName] ?? 'Unknown'}</Badge>
+<Badge color={colors[chainId] ?? 'dark'} border={dark}>{CHAINS[chainId] ?? 'Unknown'}</Badge>

src/routes/(sidebar)/crud/products/+page.svelte

@@ -1,13 +1,5 @@
 <script lang="ts">
-	import {
-		Avatar,
-		Badge,
-		Breadcrumb,
-		BreadcrumbItem,
-		Button,
-		Checkbox,
-		Heading
-	} from 'flowbite-svelte';
+	import { Avatar, Badge, Breadcrumb, BreadcrumbItem, Button, Heading } from 'flowbite-svelte';
 	import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead } from 'flowbite-svelte';
 	import { TableHeadCell, Toolbar, ToolbarButton } from 'flowbite-svelte';
 	import { EyeOutline, FilterSolid, SearchSolid } from 'flowbite-svelte-icons';
@@ -35,8 +27,10 @@
 
 	export let form;
 	export let data: ListWithPagingResponse<ProductResponseData>;
-	const extractChainNames = (product: ProductResponseData) =>
-		product.attributes.filter((att) => att.name === 'Chain').map((att) => att.value);
+	const extractChainIds = (product: ProductResponseData) =>
+		product.product_collections.map(
+			(pc: { collection: { chain_id: string } }) => pc.collection.chain_id
+		);
 
 	let searchConditions: ListProductQuery = _.omit(data.paging, 'total');
 	async function handleSearch(pageQuery?: { limit: number; offset: number }) {
@@ -136,8 +130,8 @@
 					</TableBodyCell>
 
 					<TableBodyCell class="p-4">
-						{#each extractChainNames(product) as chainName, index}
-							<ChainBadge {chainName} />
+						{#each extractChainIds(product) as chainId, index}
+							<ChainBadge {chainId} />
 							<!-- new line for each 2 chains-->
 							{#if index % 2 === 1}
 								<br />