From 162e957de8da3a61809ff05ff92ffffd7f55c80a Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Thu, 7 Mar 2024 17:28:23 +0100
Subject: [PATCH] feat: add network column to list view

---
 src/components/@shared/AssetList/index.tsx | 27 ++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx
index 736bc21e2..4fcaf31c8 100644
--- a/src/components/@shared/AssetList/index.tsx
+++ b/src/components/@shared/AssetList/index.tsx
@@ -1,5 +1,5 @@
 import AssetTeaser from '@shared/AssetTeaser'
-import { ReactElement, useState } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import Pagination from '@shared/Pagination'
 import styles from './index.module.css'
 import AssetTitle from '@shared/AssetListTitle'
@@ -10,8 +10,20 @@ import { getServiceByName } from '@utils/ddo'
 import AssetViewSelector, { AssetViewOptions } from './AssetViewSelector'
 import Time from '../atoms/Time'
 import Loader from '../atoms/Loader'
+import NetworkName from '../NetworkName'
+import { useUserPreferences } from '../../../@context/UserPreferences'
+import { ChainDoesNotSupportMulticallError } from 'wagmi'
 
-const columns: TableOceanColumn<AssetExtended>[] = [
+const networkColumn: TableOceanColumn<AssetExtended> = {
+  name: 'Network',
+  selector: (row) => {
+    const { chainId } = row
+    return <NetworkName networkId={chainId} />
+  },
+  maxWidth: '10rem'
+}
+
+const tableColumns: TableOceanColumn<AssetExtended>[] = [
   {
     name: 'Dataset',
     selector: (row) => {
@@ -96,6 +108,17 @@ export default function AssetList({
   showAssetViewSelector,
   defaultAssetView
 }: AssetListProps): ReactElement {
+  const { chainIds } = useUserPreferences()
+
+  const [columns, setColumns] = useState(tableColumns)
+
+  useEffect(() => {
+    if (chainIds.length > 1) {
+      const [datasetColumn, ...otherColumns] = tableColumns
+      setColumns([datasetColumn, networkColumn, ...otherColumns])
+    } else setColumns(tableColumns)
+  }, [chainIds])
+
   const [activeAssetView, setActiveAssetView] = useState<AssetViewOptions>(
     defaultAssetView || AssetViewOptions.Grid
   )