Commit a6781901 authored by 贾浩@五瓣科技's avatar 贾浩@五瓣科技

edit footer

parent 0fb327b3
Pipeline #761 failed with stages
...@@ -18,8 +18,8 @@ import getApiVersionUrl from './utils/getApiVersionUrl'; ...@@ -18,8 +18,8 @@ import getApiVersionUrl from './utils/getApiVersionUrl';
const MAX_LINKS_COLUMNS = 4; const MAX_LINKS_COLUMNS = 4;
const FRONT_VERSION_URL = `https://github.com/blockscout/frontend/tree/${ config.UI.footer.frontendVersion }`; const FRONT_VERSION_URL = `https://github.com/blockscout/frontend/tree/${config.UI.footer.frontendVersion}`;
const FRONT_COMMIT_URL = `https://github.com/blockscout/frontend/commit/${ config.UI.footer.frontendCommit }`; const FRONT_COMMIT_URL = `https://github.com/blockscout/frontend/commit/${config.UI.footer.frontendCommit}`;
const Footer = () => { const Footer = () => {
...@@ -50,9 +50,9 @@ const Footer = () => { ...@@ -50,9 +50,9 @@ const Footer = () => {
url: 'https://github.com/blockscout/blockscout', url: 'https://github.com/blockscout/blockscout',
}, },
{ {
icon: 'social/tweet' as const, icon: 'social/twitter' as const,
iconSize: '18px', iconSize: '18px',
text: 'Twitter', text: 'X (ex-Twitter)',
url: 'https://www.twitter.com/blockscoutcom', url: 'https://www.twitter.com/blockscoutcom',
}, },
{ {
...@@ -77,11 +77,11 @@ const Footer = () => { ...@@ -77,11 +77,11 @@ const Footer = () => {
const frontendLink = (() => { const frontendLink = (() => {
if (config.UI.footer.frontendVersion) { if (config.UI.footer.frontendVersion) {
return <Link href={ FRONT_VERSION_URL } target="_blank">{ config.UI.footer.frontendVersion }</Link>; return <Link href={FRONT_VERSION_URL} target="_blank">{config.UI.footer.frontendVersion}</Link>;
} }
if (config.UI.footer.frontendCommit) { if (config.UI.footer.frontendCommit) {
return <Link href={ FRONT_COMMIT_URL } target="_blank">{ config.UI.footer.frontendCommit }</Link>; return <Link href={FRONT_COMMIT_URL} target="_blank">{config.UI.footer.frontendCommit}</Link>;
} }
return null; return null;
...@@ -90,8 +90,8 @@ const Footer = () => { ...@@ -90,8 +90,8 @@ const Footer = () => {
const fetch = useFetch(); const fetch = useFetch();
const { isPlaceholderData, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>({ const { isPlaceholderData, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>({
queryKey: [ 'footer-links' ], queryKey: ['footer-links'],
queryFn: async() => fetch(config.UI.footer.links || '', undefined, { resource: 'footer-links' }), queryFn: async () => fetch(config.UI.footer.links || '', undefined, { resource: 'footer-links' }),
enabled: Boolean(config.UI.footer.links), enabled: Boolean(config.UI.footer.links),
staleTime: Infinity, staleTime: Infinity,
placeholderData: [], placeholderData: [],
...@@ -102,41 +102,41 @@ const Footer = () => { ...@@ -102,41 +102,41 @@ const Footer = () => {
const renderNetworkInfo = React.useCallback((gridArea?: GridProps['gridArea']) => { const renderNetworkInfo = React.useCallback((gridArea?: GridProps['gridArea']) => {
return ( return (
<Flex <Flex
gridArea={ gridArea } gridArea={gridArea}
flexWrap="wrap" flexWrap="wrap"
columnGap={ 8 } columnGap={8}
rowGap={ 6 } rowGap={6}
mb={{ base: 5, lg: 10 }} mb={{ base: 5, lg: 10 }}
_empty={{ display: 'none' }} _empty={{ display: 'none' }}
> >
{ !config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus/> } {!config.UI.indexingAlert.intTxs.isHidden && <IntTxsIndexingStatus />}
<NetworkAddToWallet/> <NetworkAddToWallet />
</Flex> </Flex>
); );
}, []); }, []);
const renderProjectInfo = React.useCallback((gridArea?: GridProps['gridArea']) => { const renderProjectInfo = React.useCallback((gridArea?: GridProps['gridArea']) => {
return ( return (
<Box gridArea={ gridArea }> <Box gridArea={gridArea}>
<Link fontSize="xs" href="https://www.blockscout.com">blockscout.com</Link> <Link fontSize="xs" href="https://www.blockscout.com">blockscout.com</Link>
<Text mt={ 3 } fontSize="xs"> <Text mt={3} fontSize="xs">
Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks. Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
</Text> </Text>
<VStack spacing={ 1 } mt={ 6 } alignItems="start"> <VStack spacing={1} mt={6} alignItems="start">
{ apiVersionUrl && ( {apiVersionUrl && (
<Text fontSize="xs"> <Text fontSize="xs">
Backend: <Link href={ apiVersionUrl } target="_blank">{ backendVersionData?.backend_version }</Link> Backend: <Link href={apiVersionUrl} target="_blank">{backendVersionData?.backend_version}</Link>
</Text> </Text>
) } )}
{ frontendLink && ( {frontendLink && (
<Text fontSize="xs"> <Text fontSize="xs">
Frontend: { frontendLink } Frontend: {frontendLink}
</Text> </Text>
) } )}
</VStack> </VStack>
</Box> </Box>
); );
}, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink ]); }, [apiVersionUrl, backendVersionData?.backend_version, frontendLink]);
const containerProps: GridProps = { const containerProps: GridProps = {
as: 'footer', as: 'footer',
...@@ -150,18 +150,18 @@ const Footer = () => { ...@@ -150,18 +150,18 @@ const Footer = () => {
if (config.UI.footer.links) { if (config.UI.footer.links) {
return ( return (
<Grid { ...containerProps }> <Grid {...containerProps}>
<div> <div>
{ renderNetworkInfo() } {renderNetworkInfo()}
{ renderProjectInfo() } {renderProjectInfo()}
</div> </div>
<Grid <Grid
gap={{ base: 6, lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8, xl: 12 }} gap={{ base: 6, lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8, xl: 12 }}
gridTemplateColumns={{ gridTemplateColumns={{
base: 'repeat(auto-fill, 160px)', base: 'repeat(auto-fill, 160px)',
lg: `repeat(${ colNum }, 135px)`, lg: `repeat(${colNum}, 135px)`,
xl: `repeat(${ colNum }, 160px)`, xl: `repeat(${colNum}, 160px)`,
}} }}
justifyContent={{ lg: 'flex-end' }} justifyContent={{ lg: 'flex-end' }}
mt={{ base: 8, lg: 0 }} mt={{ base: 8, lg: 0 }}
...@@ -173,10 +173,10 @@ const Footer = () => { ...@@ -173,10 +173,10 @@ const Footer = () => {
]) ])
.slice(0, colNum) .slice(0, colNum)
.map(linkGroup => ( .map(linkGroup => (
<Box key={ linkGroup.title }> <Box key={linkGroup.title}>
<Skeleton fontWeight={ 500 } mb={ 3 } display="inline-block" isLoaded={ !isPlaceholderData }>{ linkGroup.title }</Skeleton> <Skeleton fontWeight={500} mb={3} display="inline-block" isLoaded={!isPlaceholderData}>{linkGroup.title}</Skeleton>
<VStack spacing={ 1 } alignItems="start"> <VStack spacing={1} alignItems="start">
{ linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text } isLoading={ isPlaceholderData }/>) } {linkGroup.links.map(link => <FooterLinkItem {...link} key={link.text} isLoading={isPlaceholderData} />)}
</VStack> </VStack>
</Box> </Box>
)) ))
...@@ -188,7 +188,7 @@ const Footer = () => { ...@@ -188,7 +188,7 @@ const Footer = () => {
return ( return (
<Grid <Grid
{ ...containerProps } {...containerProps}
gridTemplateAreas={{ gridTemplateAreas={{
lg: ` lg: `
"network links-top" "network links-top"
...@@ -196,8 +196,12 @@ const Footer = () => { ...@@ -196,8 +196,12 @@ const Footer = () => {
`, `,
}} }}
> >
<Text fontSize="xs">
© AGICoin Foundation
</Text>
{ renderNetworkInfo({ lg: 'network' }) }
{/* { renderNetworkInfo({ lg: 'network' }) }
{ renderProjectInfo({ lg: 'info' }) } { renderProjectInfo({ lg: 'info' }) }
<Grid <Grid
...@@ -219,7 +223,7 @@ const Footer = () => { ...@@ -219,7 +223,7 @@ const Footer = () => {
mt={{ base: 8, lg: 0 }} mt={{ base: 8, lg: 0 }}
> >
{ BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) } { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
</Grid> </Grid> */}
</Grid> </Grid>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment