Skip to content

Commit 6e18325

Browse files
noahlitvinnoahlitvin
committed
explore page update
1 parent c11ecbd commit 6e18325

File tree

9 files changed

+31535
-34
lines changed

9 files changed

+31535
-34
lines changed

‎package-lock.json

+31,300-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/website/public/images/thegraph.svg

+1-1
Loading

‎packages/website/src/features/GetStarted/BuildPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ export const BuildPage = () => {
1818
p={8}
1919
maxW="container.lg"
2020
m="auto"
21-
background="gray.900"
21+
background="black"
2222
border="1px solid"
23-
borderColor="gray.800"
23+
borderColor="gray.700"
2424
borderRadius="md"
2525
>
2626
<BuildWithCannon />

‎packages/website/src/features/GetStarted/GetStartedPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export const GetStartedPage = () => {
1616
p={8}
1717
maxW="container.md"
1818
m="auto"
19-
background="gray.900"
19+
background="black"
2020
border="1px solid"
21-
borderColor="gray.800"
21+
borderColor="gray.700"
2222
borderRadius="md"
2323
>
2424
<RunPackage />

‎packages/website/src/features/Search/PackageCard/Chain.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ const newChain = {
5353
// Also see https://github.com/rainbow-me/rainbowkit/blob/7b31af2431cda62bf215a84b9d40fb7f66f24381/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts
5454
const Chain: FC<{
5555
id: number;
56-
}> = ({ id }) => {
56+
isSmall?: boolean;
57+
}> = ({ id, isSmall }) => {
5758
const chain = useMemo(() => {
5859
const enrichedChainData: Record<string, ChainData> = {
5960
...merge({ cannon: newChain }, chains, metadata),
@@ -65,11 +66,15 @@ const Chain: FC<{
6566
const color = chain?.color || 'gray.700';
6667
return (
6768
<Flex gap={1.5} alignItems="baseline">
68-
<Box h={3} w={3} borderRadius={999} bg={color} />
69-
{name}
70-
<Text fontSize="xs" color="gray.500" letterSpacing={'-0.3px'}>
71-
ID {id}
72-
</Text>
69+
<Box h="0.66rem" w="0.66rem" borderRadius={999} bg={color} />
70+
{!isSmall && (
71+
<>
72+
{name}
73+
<Text fontSize="xs" color="gray.500" letterSpacing={'-0.3px'}>
74+
ID {id}
75+
</Text>
76+
</>
77+
)}
7378
</Flex>
7479
);
7580
};

‎packages/website/src/features/Search/PackageCard/ChainNav.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FC } from 'react';
2+
import { Button, Tooltip, Flex } from '@chakra-ui/react';
3+
import { Variant } from '@/types/graphql/graphql';
4+
import NextLink from 'next/link';
5+
import Chain from './Chain';
6+
import { find } from 'lodash';
7+
import * as chains from 'wagmi/chains';
8+
9+
const ChainNav: FC<{
10+
variants: Variant[];
11+
packageName: string;
12+
}> = ({ variants, packageName }) => {
13+
const sortedVariants = [...variants].sort((a, b) => {
14+
if (a.chain_id === 13370) return -1;
15+
if (b.chain_id === 13370) return 1;
16+
return a.chain_id - b.chain_id;
17+
});
18+
19+
const chainName = (chainId: number) => {
20+
if (chainId == 13370) return 'Cannon';
21+
return find(chains, (chain) => chain.id === chainId)?.name;
22+
};
23+
24+
return (
25+
<Flex gap={2}>
26+
{sortedVariants.map((variant) => (
27+
<Tooltip
28+
key={variant.id}
29+
placement="top"
30+
label={chainName(variant.chain_id) + ` (ID ${variant.chain_id})`}
31+
>
32+
<Button
33+
as={NextLink}
34+
size="xs"
35+
variant="outline"
36+
colorScheme="black"
37+
border="1px solid"
38+
borderColor="gray.500"
39+
backgroundColor="black"
40+
_hover={{ backgroundColor: 'gray.800' }}
41+
href={`/packages/${packageName}/${variant.tag.name}/${variant.chain_id}-${variant.preset}`}
42+
>
43+
<Chain id={variant.chain_id} isSmall />
44+
</Button>
45+
</Tooltip>
46+
))}
47+
</Flex>
48+
);
49+
};
50+
51+
export default ChainNav;

‎packages/website/src/features/Search/PackageCard/PackageCardExpandable.tsx

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { LinkIcon } from '@chakra-ui/icons';
2+
import PackageTable from './PackageTable';
3+
import { Package } from '@/types/graphql/graphql';
4+
import {
5+
Box,
6+
Collapse,
7+
Flex,
8+
Heading,
9+
Link,
10+
useDisclosure,
11+
Text,
12+
Button,
13+
} from '@chakra-ui/react';
14+
import NextLink from 'next/link';
15+
import { FC } from 'react';
16+
import PublishInfo from '@/features/Search/PackageCard/PublishInfo';
17+
import ChainNav from './ChainNav';
18+
19+
interface IPackageCardProps {
20+
pkg: Package;
21+
maxHeight?: string;
22+
}
23+
24+
export const PackageCardExpandable: FC<IPackageCardProps> = ({
25+
pkg,
26+
maxHeight,
27+
}) => {
28+
const { isOpen, onToggle } = useDisclosure();
29+
30+
const latestUpdate = pkg.variants.reduce((max, variant) => {
31+
return max > variant.last_updated ? max : variant.last_updated;
32+
}, pkg.variants[0]?.last_updated);
33+
34+
const latestMainVariants = pkg.variants.filter(
35+
(variant) => variant.tag.name === 'latest' && variant.preset === 'main'
36+
);
37+
38+
return (
39+
<Box
40+
key={pkg.name}
41+
bg="black"
42+
display="block"
43+
borderWidth="1px"
44+
borderStyle="solid"
45+
borderColor="gray.600"
46+
borderRadius="4px"
47+
transition="all 0.12s"
48+
overflow="hidden"
49+
>
50+
<Flex
51+
bg="gray.800"
52+
p={2}
53+
flexDirection={['column', 'column', 'row']}
54+
alignItems={['flex-start', 'flex-start', 'center']}
55+
>
56+
<Box py={2} px={[1, 1, 3]}>
57+
<Heading display="inline-block" as="h4" size="md" mb={1.5}>
58+
{pkg.name}
59+
</Heading>
60+
<Link
61+
as={NextLink}
62+
href={'/packages/' + pkg.name}
63+
display="inline-block"
64+
ml={2}
65+
transform="translateY(-2px)"
66+
>
67+
<LinkIcon />
68+
</Link>
69+
<PublishInfo p={{ last_updated: latestUpdate }} />
70+
</Box>
71+
<Box p={1} ml={[0, 0, 'auto']}>
72+
{latestMainVariants.length ? (
73+
<Flex
74+
mb="2"
75+
justifyContent={['flex-start', 'flex-start', 'flex-end']}
76+
>
77+
<ChainNav packageName={pkg.name} variants={latestMainVariants} />
78+
</Flex>
79+
) : null}
80+
<Flex justifyContent={['flex-start', 'flex-start', 'flex-end']}>
81+
<Text fontSize="sm" color="gray.300" display="inline" mr={2}>
82+
{pkg.variants.length} variant
83+
{pkg.variants.length !== 1 ? 's' : ''}
84+
</Text>
85+
<Button
86+
size="xs"
87+
variant="outline"
88+
colorScheme="black"
89+
width="56px"
90+
fontWeight={500}
91+
textTransform="uppercase"
92+
letterSpacing="1px"
93+
fontFamily="var(--font-miriam)"
94+
textShadow="0px 0px 4px rgba(255, 255, 255, 0.33)"
95+
fontSize="12px"
96+
background="gray.900"
97+
borderColor="gray.500"
98+
_hover={{
99+
background: 'gray.800',
100+
}}
101+
onClick={onToggle}
102+
>
103+
{isOpen ? 'Hide' : 'Show'}
104+
</Button>
105+
</Flex>
106+
</Box>
107+
</Flex>
108+
<Collapse in={isOpen} animateOpacity>
109+
<Box
110+
borderTop="1px solid"
111+
borderColor="gray.600"
112+
position="relative"
113+
_after={{
114+
content: '""',
115+
position: 'absolute',
116+
bottom: 0,
117+
left: 0,
118+
right: 0,
119+
height: '4px',
120+
background:
121+
'linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent)',
122+
pointerEvents: 'none',
123+
}}
124+
>
125+
<Box verticalAlign="middle" overflow="auto" maxHeight={maxHeight}>
126+
<PackageTable pkg={pkg} />
127+
</Box>
128+
</Box>
129+
</Collapse>
130+
</Box>
131+
);
132+
};

‎packages/website/src/features/Search/PackageCard/PublishInfo.tsx

+19-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Box, Link, Text } from '@chakra-ui/react';
44

55
type PublishInfo = {
66
last_updated: number;
7-
last_publisher: string;
7+
last_publisher?: string;
88
};
99
const PublishInfo: FC<{
1010
p: PublishInfo;
@@ -21,18 +21,24 @@ const PublishInfo: FC<{
2121
return (
2222
<Box>
2323
<Text color="gray.300" fontSize="xs" fontFamily="mono">
24-
published by&nbsp;
25-
<Link
26-
isExternal
27-
styleConfig={{ 'text-decoration': 'none' }}
28-
borderBottom="1px dotted"
29-
borderBottomColor="gray.300"
30-
href={`https://etherscan.io/address/${p.last_publisher}`}
31-
>
32-
{`${p.last_publisher.substring(0, 6)}...${p.last_publisher.slice(
33-
-4
34-
)}`}
35-
</Link>
24+
{!p.last_publisher && 'last'} published
25+
{p.last_publisher && (
26+
<>
27+
{' '}
28+
by{' '}
29+
<Link
30+
isExternal
31+
styleConfig={{ 'text-decoration': 'none' }}
32+
borderBottom="1px dotted"
33+
borderBottomColor="gray.300"
34+
href={`https://etherscan.io/address/${p.last_publisher}`}
35+
>
36+
{`${p.last_publisher.substring(0, 6)}...${p.last_publisher.slice(
37+
-4
38+
)}`}
39+
</Link>
40+
</>
41+
)}
3642
{lineBreak && <br />}
3743
{' ' + timeAgo}
3844
</Text>

‎packages/website/src/features/Search/SearchPage.tsx

+17-9
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ import {
2626
Package,
2727
} from '@/types/graphql/graphql';
2828
import { SearchIcon } from '@chakra-ui/icons';
29-
import { PackageCard } from './PackageCard/PackageCard';
29+
import { PackageCardExpandable } from './PackageCard/PackageCardExpandable';
3030
import { CustomSpinner } from '@/components/CustomSpinner';
31+
import { debounce } from 'lodash';
3132

3233
export const SearchPage = () => {
3334
const [searchTerm, setSearchTerm] = useState<string>('');
@@ -36,12 +37,13 @@ export const SearchPage = () => {
3637
GetTotalPackagesQuery,
3738
GetTotalPackagesQueryVariables
3839
>(TOTAL_PACKAGES, {
39-
variables: { query: searchTerm },
40+
variables: { query: '' },
4041
});
4142

42-
const handleSearch = (e: any) => {
43-
setSearchTerm(e.target.value);
43+
const handleSearch = (value: string) => {
44+
setSearchTerm(value);
4445
};
46+
const debouncedHandleSearch = debounce(handleSearch, 300);
4547

4648
const { loading, error, data } = useQuery<
4749
GetFilteredPackagesAndVariantsQuery,
@@ -77,7 +79,10 @@ export const SearchPage = () => {
7779
const pkg = variant.cannon_package;
7880
if (packageMap[pkg.id]) {
7981
if (!variantExistsInPackage(packageMap[pkg.id], variant.id)) {
80-
packageMap[pkg.id].variants.push(variant);
82+
packageMap[pkg.id] = {
83+
...packageMap[pkg.id],
84+
variants: [...packageMap[pkg.id].variants, variant],
85+
};
8186
}
8287
} else {
8388
packageMap[pkg.id] = {
@@ -98,7 +103,7 @@ export const SearchPage = () => {
98103
Math.max(variant.last_updated, maxTimestamp),
99104
0
100105
);
101-
console.log(latestUpdatedA, latestUpdatedB);
106+
102107
return latestUpdatedB - latestUpdatedA; // Descending order
103108
});
104109

@@ -131,7 +136,7 @@ export const SearchPage = () => {
131136
<InputLeftElement pointerEvents="none">
132137
<SearchIcon color="gray.500" />
133138
</InputLeftElement>
134-
<Input onChange={handleSearch} />
139+
<Input onChange={(e) => debouncedHandleSearch(e.target.value)} />
135140
</InputGroup>
136141
</Box>
137142
<Box
@@ -148,7 +153,6 @@ export const SearchPage = () => {
148153
alt="The Graph"
149154
w="12px"
150155
objectFit="contain"
151-
opacity={0.6}
152156
mr={2}
153157
ml={[2, 2, 0]}
154158
transform="translateY(0.5px)"
@@ -186,7 +190,11 @@ export const SearchPage = () => {
186190
<Container ml={0} maxWidth="container.xl">
187191
{results.map((pkg: any) => (
188192
<Box mb="8" key={pkg.id}>
189-
<PackageCard maxHeight="186px" pkg={pkg} key={pkg.name} />
193+
<PackageCardExpandable
194+
maxHeight="186px"
195+
pkg={pkg}
196+
key={pkg.name}
197+
/>
190198
</Box>
191199
))}
192200
</Container>

0 commit comments

Comments
 (0)