Skip to content

Commit

Permalink
list view
Browse files Browse the repository at this point in the history
  • Loading branch information
@Majorfi
Majorfi committed Nov 13, 2024
1 parent 5d9af79 commit 86ed6d2
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 41 deletions.
92 changes: 53 additions & 39 deletions app/components/Lists.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ 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';
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);
Expand Down Expand Up @@ -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>(
Expand Down Expand Up @@ -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')}
Expand Down Expand Up @@ -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>
);
Expand Down
88 changes: 88 additions & 0 deletions app/components/TokenListTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
25 changes: 25 additions & 0 deletions app/components/ViewToggle.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
4 changes: 2 additions & 2 deletions app/list/[list]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 86ed6d2

Please sign in to comment.