Skip to content

feat: improve subgraphs demo design #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 26, 2025
Merged

feat: improve subgraphs demo design #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7af8622
feat: improve dubgraphs demo design
tloffler May 23, 2025
b6e8cdc
fix: cut text row name on mobile
tloffler May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 119 additions & 0 deletions src/components/pageComponents/home/Examples/demos/subgraphs/Subgraph/Components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import {
Box,
type BoxProps,
Flex,
type FlexProps,
Heading,
type HeadingProps,
} from '@chakra-ui/react'
import type { FC } from 'react'

export const Wrapper: FC<FlexProps> = ({ children, ...restProps }) => (
<Flex
backgroundColor="var(--theme-subgraph-background)"
borderRadius="8px"
padding={4}
counterReset="item-number"
flexDirection="column"
rowGap={1}
{...restProps}
>
{children}
</Flex>
)

export const Title: FC<HeadingProps> = ({ children, ...restProps }) => (
<Heading
alignItems="center"
as="h3"
color="var(--theme-subgraph-title-color)"
columnGap={2}
display="flex"
fontFamily="{fonts.body}"
fontSize="16px"
fontWeight="700"
lineHeight="1.2"
margin="0"
paddingTop={2}
paddingBottom={4}
{...restProps}
>
{children}
</Heading>
)

export const Row: FC<FlexProps> = ({ children, ...restProps }) => (
<Flex
alignItems="center"
color="var(--theme-subgraph-name-color)"
columnGap={2}
borderRadius={4}
padding={2}
marginInline={-2}
display="flex"
justifyContent="space-between"
_hover={{ bg: 'var(--theme-subgraph-row-hover-background)' }}
{...restProps}
>
{children}
</Flex>
)

export const RowTitle: FC<BoxProps> = ({ children, ...restProps }) => (
<Box
fontSize="16px"
fontWeight="400"
lineHeight="1.2"
overflow="hidden"
textOverflow="ellipsis"
whiteSpace="nowrap"
alignItems="center"
columnGap={2}
display="flex"
{...restProps}
_before={{
'--base-size': '32px',
alignItems: 'center',
backgroundColor: 'var(--theme-subgraph-bullet-background-color)',
borderRadius: '50%',
color: 'var(--theme-subgraph-bullet-color)',
content: 'counter(item-number, decimal-leading-zero)',
counterIncrement: 'item-number',
display: 'flex',
flexShrink: '0',
fontSize: '10px',
fontWeight: '400',
height: 'var(--base-size)',
justifyContent: 'center',
letterSpacing: '-1px',
lineHeight: '1',
paddingRight: '1px',
width: 'var(--base-size)',
opacity: 0.6,
}}
>
{children}
</Box>
)

export const RowName: FC<BoxProps> = ({ children, ...restProps }) => (
<Box
overflow="hidden"
textOverflow="ellipsis"
whiteSpace="nowrap"
{...restProps}
>
{children}
</Box>
)

export const RowActions: FC<BoxProps> = ({ children, ...restProps }) => (
<Box
display="flex"
alignItems="center"
columnGap={2}
{...restProps}
>
{children}
</Box>
)
173 changes: 49 additions & 124 deletions src/components/pageComponents/home/Examples/demos/subgraphs/Subgraph/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { OptionsDropdown } from '@/src/components/pageComponents/home/Examples/demos/OptionsDropdown'
import {
Row,
RowActions,
RowName,
RowTitle,
Title,
Wrapper,
} from '@/src/components/pageComponents/home/Examples/demos/subgraphs/Subgraph/Components'
import Icon from '@/src/components/pageComponents/home/Examples/demos/subgraphs/Subgraph/Icon'
import CopyButton from '@/src/components/sharedComponents/ui/CopyButton'
import ExternalLink from '@/src/components/sharedComponents/ui/ExternalLink'
Expand All @@ -8,7 +16,7 @@ import { allAaveReservesQueryDocument } from '@/src/subgraphs/queries/aave/reser
import { allUniswapPoolsQueryDocument } from '@/src/subgraphs/queries/uniswap/pools'
import { withSuspenseAndRetry } from '@/src/utils/suspenseWrapper'
import { generateSchemasMapping } from '@bootnodedev/db-subgraph'
import { Box, Flex, Heading, Skeleton, Span } from '@chakra-ui/react'
import { Box, Flex, Skeleton } from '@chakra-ui/react'
import { useSuspenseQuery } from '@tanstack/react-query'
import { NetworkArbitrumOne, NetworkBase, NetworkOptimism, NetworkPolygon } from '@web3icons/react'
import request from 'graphql-request'
Expand Down Expand Up @@ -126,70 +134,31 @@ const Uniswap = withSuspenseAndRetry(({ chain }: { chain: Chain }) => {
const baseUrl = `https://app.uniswap.org/explore/pools/${chainNameMapping[chain.id]}/`

return (
<Flex
counterReset="item-number"
flexDirection="column"
padding={{ base: '0 px', lg: 0 }}
rowGap={4}
>
<Heading
alignItems="center"
as="h3"
color="var(--theme-subgraph-title-color)"
columnGap={2}
display="flex"
fontFamily="{fonts.body}"
fontSize="16px"
fontWeight="700"
lineHeight="1.2"
margin="0"
paddingBottom={2}
title={chain.name}
>
<Wrapper>
<Title title={chain.name}>
Uniswap Pool{' '}
<Box
rounded="full"
overflow="hidden"
>
{getNetworkIcon(chain.name.toLowerCase())}
</Box>
</Heading>
</Title>
{data.map((position) => (
<Flex
alignItems="center"
color="var(--theme-subgraph-name-color)"
columnGap={2}
display="flex"
_before={{
'--base-size': '18px',
alignItems: 'center',
backgroundColor: 'var(--theme-subgraph-bullet-background-color)',
borderRadius: '50%',
color: 'var(--theme-subgraph-bullet-color)',
content: 'counter(item-number, decimal-leading-zero)',
counterIncrement: 'item-number',
display: 'flex',
flexShrink: '0',
fontSize: '10px',
fontWeight: '700',
height: 'var(--base-size)',
justifyContent: 'center',
letterSpacing: '-1px',
lineHeight: '18px',
paddingRight: '1px',
width: 'var(--base-size)',
}}
key={position.id}
>
<Span>{position.pool.symbol}</Span>
<Copy value={position.pool.id} />
<ExternalLink
href={`${baseUrl}${position.pool.id}`}
aria-label="Explore"
/>
</Flex>
<Row key={position.id}>
<RowTitle>
<RowName>{position.pool.symbol}</RowName>
</RowTitle>
<RowActions>
<Copy value={position.pool.id} />
<ExternalLink
href={`${baseUrl}${position.pool.id}`}
aria-label="Explore"
/>
</RowActions>
</Row>
))}
</Flex>
</Wrapper>
)
})

Expand All @@ -204,79 +173,31 @@ const Aave = withSuspenseAndRetry(() => {
const baseUrl = 'https://app.aave.com/reserve-overview/?marketName=proto_base_v3&underlyingAsset='

return (
<Flex
counterReset="item-number"
flexDirection="column"
padding={{ base: '0 px', lg: 0 }}
rowGap={4}
>
<Heading
alignItems="center"
as="h3"
color="var(--theme-subgraph-title-color)"
columnGap={2}
display="flex"
fontFamily="{fonts.body}"
fontSize="16px"
fontWeight="700"
lineHeight="1.2"
margin="0"
paddingBottom={2}
title={base.name}
>
<Wrapper>
<Title title={base.name}>
AAVE Reserves
<Box
rounded="full"
overflow="hidden"
>
{getNetworkIcon(base.name.toLowerCase())}
</Box>
</Heading>
</Title>
{data.map(({ id, name, underlyingAsset }) => (
<Flex
alignItems="center"
color="var(--theme-subgraph-name-color)"
columnGap={2}
display="flex"
_before={{
'--base-size': '18px',
alignItems: 'center',
backgroundColor: 'var(--theme-subgraph-bullet-background-color)',
borderRadius: '50%',
color: 'var(--theme-subgraph-bullet-color)',
content: 'counter(item-number, decimal-leading-zero)',
counterIncrement: 'item-number',
display: 'flex',
flexShrink: '0',
fontSize: '10px',
fontWeight: '700',
height: 'var(--base-size)',
justifyContent: 'center',
letterSpacing: '-1px',
lineHeight: '1',
paddingRight: '1px',
width: 'var(--base-size)',
}}
key={id}
>
<Box
fontSize="16px"
fontWeight="400"
lineHeight="1.2"
overflow="hidden"
textOverflow="ellipsis"
whiteSpace="nowrap"
>
{name}
</Box>
<Copy value={underlyingAsset} />
<ExternalLink
href={`${baseUrl}${underlyingAsset}`}
aria-label="Explore"
/>
</Flex>
<Row key={id}>
<RowTitle>
<RowName>{name}</RowName>
</RowTitle>
<RowActions>
<Copy value={underlyingAsset} />
<ExternalLink
href={`${baseUrl}${underlyingAsset}`}
aria-label="Explore"
/>
</RowActions>
</Row>
))}
</Flex>
</Wrapper>
)
})

Expand All @@ -298,16 +219,20 @@ const Subgraph = ({ ...restProps }) => {
<Flex
css={{
'.light &': {
'--theme-subgraph-background': '#fff',
'--theme-subgraph-row-hover-background': '#fafafa',
'--theme-subgraph-title-color': '#2e3048',
'--theme-subgraph-name-color': '#2e3048',
'--theme-subgraph-bullet-color': '#f7f7f7',
'--theme-subgraph-bullet-background-color': '#2e3048',
'--theme-subgraph-bullet-color': '#2e3048',
'--theme-subgraph-bullet-background-color': '#e5e5e5',
},
'.dark &': {
'--theme-subgraph-background': '#3a3c57',
'--theme-subgraph-row-hover-background': '#3e405a',
'--theme-subgraph-title-color': '#fff',
'--theme-subgraph-name-color': '#fff',
'--theme-subgraph-bullet-color': '#2e3048',
'--theme-subgraph-bullet-background-color': '#fff',
'--theme-subgraph-bullet-color': '#fff',
'--theme-subgraph-bullet-background-color': '#4d506f',
},
}}
flexDirection="column"
Expand Down
2 changes: 1 addition & 1 deletion src/components/sharedComponents/ui/CopyButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Copy: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
xmlns="http://www.w3.org/2000/svg"
{...restProps}
>
<title>Icon</title>
<title>Copy Icon</title>
<path
clipRule="evenodd"
d="M6.91669 6.33335C6.59452 6.33335 6.33335 6.59452 6.33335 6.91669V12.1667C6.33335 12.4889 6.59452 12.75 6.91669 12.75H12.1667C12.4889 12.75 12.75 12.4889 12.75 12.1667V6.91669C12.75 6.59452 12.4889 6.33335 12.1667 6.33335H6.91669ZM5.16669 6.91669C5.16669 5.95019 5.95019 5.16669 6.91669 5.16669H12.1667C13.1332 5.16669 13.9167 5.95019 13.9167 6.91669V12.1667C13.9167 13.1332 13.1332 13.9167 12.1667 13.9167H6.91669C5.95019 13.9167 5.16669 13.1332 5.16669 12.1667V6.91669Z"
Expand Down
2 changes: 1 addition & 1 deletion src/components/sharedComponents/ui/CopyButton/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const styles = {
'html.light &': {
'--color': '#000',
'--color': '#2e3048',
'--color-hover': '#8b46a4',
},
'html.dark &': {
Expand Down
6 changes: 3 additions & 3 deletions src/components/sharedComponents/ui/ExternalLink/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const LinkSVG: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
xmlns="http://www.w3.org/2000/svg"
{...restProps}
>
<title>Icon</title>
<title>External link Icon</title>
<path
clipRule="evenodd"
d="M3.41669 4.58335C3.26198 4.58335 3.1136 4.64481 3.00421 4.75421C2.89481 4.8636 2.83335 5.01198 2.83335 5.16669V11.5834C2.83335 11.7381 2.89481 11.8864 3.00421 11.9958C3.1136 12.1052 3.26198 12.1667 3.41669 12.1667H9.83335C9.98806 12.1667 10.1364 12.1052 10.2458 11.9958C10.3552 11.8864 10.4167 11.7381 10.4167 11.5834V8.08335C10.4167 7.76119 10.6779 7.50002 11 7.50002C11.3222 7.50002 11.5834 7.76119 11.5834 8.08335V11.5834C11.5834 12.0475 11.399 12.4926 11.0708 12.8208C10.7426 13.149 10.2975 13.3334 9.83335 13.3334H3.41669C2.95256 13.3334 2.50744 13.149 2.17925 12.8208C1.85106 12.4926 1.66669 12.0475 1.66669 11.5834V5.16669C1.66669 4.70256 1.85106 4.25744 2.17925 3.92925C2.50744 3.60106 2.95256 3.41669 3.41669 3.41669H6.91669C7.23885 3.41669 7.50002 3.67785 7.50002 4.00002C7.50002 4.32219 7.23885 4.58335 6.91669 4.58335H3.41669Z"
Expand All @@ -38,7 +38,7 @@ const LinkSVG: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
* @description A button that opens a link in a new tab.
* @param {React.HTMLAttributeAnchorTarget} target - The target attribute specifies where to open the linked document. Default is '_blank'.
*/
export const CopyButton: FC<LinkProps> = ({
export const ExternalLinkButton: FC<LinkProps> = ({
children = <LinkSVG />,
css,
target = '_blank',
Expand Down Expand Up @@ -81,4 +81,4 @@ export const CopyButton: FC<LinkProps> = ({
)
}

export default CopyButton
export default ExternalLinkButton
Loading