From 86ed6d2f02fcf7d2d3cf1b5b82362af3eba91021 Mon Sep 17 00:00:00 2001
From: Majorfi <major@ycorpo.com>
Date: Wed, 13 Nov 2024 10:46:41 +0100
Subject: [PATCH] list view

---
 app/components/Lists.tsx          | 92 ++++++++++++++++++-------------
 app/components/TokenListTable.tsx | 88 +++++++++++++++++++++++++++++
 app/components/ViewToggle.tsx     | 25 +++++++++
 app/list/[list]/page.tsx          |  4 +-
 package.json                      |  1 +
 5 files changed, 169 insertions(+), 41 deletions(-)
 create mode 100644 app/components/TokenListTable.tsx
 create mode 100644 app/components/ViewToggle.tsx

diff --git a/app/components/Lists.tsx b/app/components/Lists.tsx
index b908520..1e9e06d 100644
--- a/app/components/Lists.tsx
+++ b/app/components/Lists.tsx
@@ -8,6 +8,7 @@ import useSWR from 'swr';
 import {motion} from 'framer-motion';
 
 import TokenListCard, {LegacyTokenListCard} from './TokenListCard';
+import {ViewToggle} from './ViewToggle';
 
 import type {Variants} from 'framer-motion';
 import type {ReactElement} from 'react';
@@ -15,6 +16,7 @@ import type {TNDict} from '@builtbymom/web3/types';
 import type {TTokenListItem, TTokenListSummary} from '@/utils/types/types';
 
 import TokenListHero from '@/app/components/TokenListHero';
+import {TokenListTable} from '@/app/components/TokenListTable';
 import LEGACY_TOKEN_LISTS from '@/utils/legacyTokenLists';
 
 const fetcher = async (url: string): Promise<any> => axios.get(url).then(res => res.data);
@@ -101,6 +103,7 @@ export function Filters({
 
 function Lists(): ReactElement {
 	const [typeOfList, set_typeOfList] = useState<'tokens' | 'pools' | 'chains' | 'statics' | 'legacy'>('chains');
+	const [viewMode, set_viewMode] = useState<'grid' | 'list'>('grid');
 	const [search, set_search] = useState('');
 	const [currentNetwork, set_currentNetwork] = useState(-1);
 	const {data: summary} = useSWR<TTokenListSummary>(
@@ -217,12 +220,18 @@ function Lists(): ReactElement {
 			</div>
 
 			<div className={'mx-auto mt-2 flex w-full max-w-5xl grid-cols-2 flex-col-reverse md:grid'}>
-				<Filters
-					allSupportedChains={allSupportedChains}
-					network={currentNetwork}
-					set_network={set_currentNetwork}
-					set_search={set_search}
-				/>
+				<div className={'flex flex-row items-center'}>
+					<Filters
+						allSupportedChains={allSupportedChains}
+						network={currentNetwork}
+						set_network={set_currentNetwork}
+						set_search={set_search}
+					/>
+					<ViewToggle
+						currentView={viewMode}
+						onViewChange={set_viewMode}
+					/>
+				</div>
 				<menu className={'flex flex-row items-center text-xs md:mb-4 md:justify-end'}>
 					<button
 						onClick={(): void => set_typeOfList('chains')}
@@ -277,40 +286,45 @@ function Lists(): ReactElement {
 			</div>
 
 			<div className={'mx-auto grid w-full max-w-5xl'}>
-				<div
-					id={'tokenlistooor'}
-					className={'grid grid-cols-1 gap-6 pb-32 md:grid-cols-3'}>
-					{typeOfList === 'legacy'
-						? LEGACY_TOKEN_LISTS.map(
-								(tokenListItem, i): ReactElement => (
-									<motion.div
-										key={tokenListItem.name}
-										custom={i}
-										initial={'initial'}
-										whileInView={'enter'}
-										variants={variants as Variants}
-										className={'box-0 relative flex w-full pt-4 md:pt-6'}>
-										<LegacyTokenListCard item={tokenListItem} />
-									</motion.div>
-								)
-							)
-						: (listToRender || []).map(
-								(tokenListItem: TTokenListItem, i: number): ReactElement => (
-									<motion.div
-										key={tokenListItem.name}
-										custom={i}
-										initial={'initial'}
-										whileInView={'enter'}
-										variants={variants as Variants}
-										className={'box-0 relative flex w-full pt-4 md:pt-6'}>
-										<TokenListCard
-											network={currentNetwork}
-											item={tokenListItem}
-										/>
-									</motion.div>
+				{viewMode === 'grid' ? (
+					<div className={'grid grid-cols-1 gap-6 pb-32 md:grid-cols-3'}>
+						{typeOfList === 'legacy'
+							? LEGACY_TOKEN_LISTS.map(
+									(tokenListItem, i): ReactElement => (
+										<motion.div
+											key={tokenListItem.name}
+											custom={i}
+											initial={'initial'}
+											whileInView={'enter'}
+											variants={variants as Variants}
+											className={'box-0 relative flex w-full pt-4 md:pt-6'}>
+											<LegacyTokenListCard item={tokenListItem} />
+										</motion.div>
+									)
 								)
-							)}
-				</div>
+							: (listToRender || []).map(
+									(tokenListItem: TTokenListItem, i: number): ReactElement => (
+										<motion.div
+											key={tokenListItem.name}
+											custom={i}
+											initial={'initial'}
+											whileInView={'enter'}
+											variants={variants as Variants}
+											className={'box-0 relative flex w-full pt-4 md:pt-6'}>
+											<TokenListCard
+												network={currentNetwork}
+												item={tokenListItem}
+											/>
+										</motion.div>
+									)
+								)}
+					</div>
+				) : (
+					<TokenListTable
+						items={listToRender || []}
+						network={currentNetwork}
+					/>
+				)}
 			</div>
 		</Fragment>
 	);
diff --git a/app/components/TokenListTable.tsx b/app/components/TokenListTable.tsx
new file mode 100644
index 0000000..c1d15d2
--- /dev/null
+++ b/app/components/TokenListTable.tsx
@@ -0,0 +1,88 @@
+import Link from 'next/link';
+import {ArrowUpRight} from 'lucide-react';
+import {formatAmount} from '@builtbymom/web3/utils';
+
+import type {ReactElement} from 'react';
+import type {TTokenListItem} from '@utils/types/types';
+
+import {ImageWithFallback} from '@/app/components/ImageWithFallback';
+
+type TTokenListTableProps = {
+	items: TTokenListItem[];
+	network: number;
+};
+
+export function TokenListTable({items, network}: TTokenListTableProps): ReactElement {
+	return (
+		<div className={'mb-10 w-full overflow-x-auto rounded-lg border border-neutral-400'}>
+			<table className={'w-full'}>
+				<thead>
+					<tr className={'border-b border-neutral-400 bg-neutral-0'}>
+						<th className={'px-4 py-3 text-left text-sm font-medium'}>{'Name'}</th>
+						<th className={'px-4 py-3 text-right text-sm font-medium'}>{'Version'}</th>
+						<th className={'px-4 py-3 text-right text-sm font-medium'}>{'Tokens'}</th>
+						<th className={'px-4 py-3 text-right text-sm font-medium'}>{'View'}</th>
+					</tr>
+				</thead>
+				<tbody className={'divide-y divide-neutral-400'}>
+					{items.map(item => {
+						const fileName = (item.URI || '')
+							.toLowerCase()
+							.replace('https://raw.githubusercontent.com/smoldapp/tokenlists/main/lists/', '');
+
+						return (
+							<tr
+								key={item.URI}
+								className={'hover:bg-neutral-50 bg-neutral-0'}>
+								<td className={'px-4 py-3'}>
+									<Link
+										href={`/list/${fileName.replace('.json', '')}`}
+										className={'flex items-center gap-3'}>
+										<ImageWithFallback
+											unoptimized
+											src={item.logoURI || ''}
+											altSrc={
+												(item.logoURI || '').startsWith('ipfs://')
+													? `https://ipfs.io/ipfs/${(item.logoURI || '').replace('ipfs://', '')}`
+													: item.logoURI || ''
+											}
+											width={40}
+											height={40}
+											alt={''}
+											className={'rounded-full'}
+										/>
+										<div>
+											<span className={'font-medium'}>{item.name}</span>
+											<p className={'max-w-xl text-sm text-neutral-600'}>
+												{item.description || `A list of token for ${item.name}`}
+											</p>
+										</div>
+									</Link>
+								</td>
+								<td className={'px-4 py-3 text-right text-sm'}>
+									{`v${item.version.major}.${item.version.minor}.${item.version.patch}`}
+								</td>
+								<td className={'px-4 py-3 text-right font-medium'}>
+									{formatAmount(
+										network === -1
+											? item.tokenCount
+											: item.metadata.tokenCountPerChain[network] || 0,
+										0,
+										0
+									)}
+								</td>
+								<td className={'px-4 py-3 text-right font-medium'}>
+									<Link href={`/list/${fileName.replace('.json', '')}`}>
+										<button className={'text-sm text-neutral-600'}>
+											<ArrowUpRight />
+										</button>
+									</Link>
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		</div>
+	);
+}
diff --git a/app/components/ViewToggle.tsx b/app/components/ViewToggle.tsx
new file mode 100644
index 0000000..7fb6039
--- /dev/null
+++ b/app/components/ViewToggle.tsx
@@ -0,0 +1,25 @@
+import {LayoutGrid, LayoutList} from 'lucide-react';
+
+import Button from './Button';
+
+import type {ReactElement} from 'react';
+
+type TViewMode = 'grid' | 'list';
+
+type TViewToggleProps = {
+	currentView: TViewMode;
+	onViewChange: (view: TViewMode) => void;
+};
+
+export function ViewToggle({currentView, onViewChange}: TViewToggleProps): ReactElement {
+	return (
+		<div className={'-mt-4 flex gap-1 pl-4'}>
+			<Button
+				className={'!h-8 border border-neutral-300 bg-neutral-0 !px-4'}
+				variant={'ligth'}
+				onClick={() => onViewChange(currentView === 'grid' ? 'list' : 'grid')}>
+				{currentView === 'grid' ? <LayoutGrid className={'size-4'} /> : <LayoutList className={'size-4'} />}
+			</Button>
+		</div>
+	);
+}
diff --git a/app/list/[list]/page.tsx b/app/list/[list]/page.tsx
index e5d10de..1182d5e 100644
--- a/app/list/[list]/page.tsx
+++ b/app/list/[list]/page.tsx
@@ -55,8 +55,8 @@ async function getList(listId: string): Promise<TTokenListItem | null> {
 	}
 }
 
-export default async function ListPage({params}: any): Promise<unknown> {
-	const list = await getList(params.list);
+export default async function ListPage({params}: {params: {list: string}}): Promise<unknown> {
+	const list = await getList(await params.list);
 
 	if (!list) {
 		return {
diff --git a/package.json b/package.json
index 2542c45..4074ee0 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "dayjs": "^1.11.11",
     "framer-motion": "^11.3.3",
     "graphql-request": "^7.1.0",
+    "lucide-react": "^0.456.0",
     "next": "^15.0.3",
     "next-pwa": "^5.6.0",
     "next-seo": "^6.5.0",