Skip to content
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.

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

Feat/footer #1972

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
34 changes: 34 additions & 0 deletions src/app/_components/Footer/StacksSmiley.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useColorMode } from '@/components/ui/color-mode';
import { StacksSmileyDarkIcon } from '@/ui/icons/StacksSmileyDarkIcon';
import { StacksSmileyLaserEyesDarkIcon } from '@/ui/icons/StacksSmileyLaserEyesDarkIcon';
import { StacksSmileyLaserEyesLightIcon } from '@/ui/icons/StacksSmileyLaserEyesLightIcon';
import { StacksSmileyLightIcon } from '@/ui/icons/StacksSmileyLightIcon';
import { Box, BoxProps, ClientOnly } from '@chakra-ui/react';
import { useState } from 'react';

Check warning on line 7 in src/app/_components/Footer/StacksSmiley.tsx

Codecov / codecov/patch

src/app/_components/Footer/StacksSmiley.tsx#L1-L7

Added lines #L1 - L7 were not covered by tests

export const StacksSmiley = (boxProps: BoxProps) => {
const { colorMode } = useColorMode();
const [isHovered, setIsHovered] = useState(false);

Check warning on line 11 in src/app/_components/Footer/StacksSmiley.tsx

Codecov / codecov/patch

src/app/_components/Footer/StacksSmiley.tsx#L9-L11

Added lines #L9 - L11 were not covered by tests
return (
<ClientOnly>
<Box
className="stacks-smiley"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}

Check warning on line 17 in src/app/_components/Footer/StacksSmiley.tsx

Codecov / codecov/patch

src/app/_components/Footer/StacksSmiley.tsx#L16-L17

Added lines #L16 - L17 were not covered by tests
{...boxProps}
>
{colorMode === 'light' ? (
isHovered ? (
<StacksSmileyLaserEyesLightIcon h={14} w={14} />

Check warning on line 22 in src/app/_components/Footer/StacksSmiley.tsx

Codecov / codecov/patch

src/app/_components/Footer/StacksSmiley.tsx#L22

Added line #L22 was not covered by tests
) : (
<StacksSmileyLightIcon h={14} w={14} />

Check warning on line 24 in src/app/_components/Footer/StacksSmiley.tsx

Codecov / codecov/patch

src/app/_components/Footer/StacksSmiley.tsx#L24

Added line #L24 was not covered by tests
)
) : isHovered ? (
<StacksSmileyLaserEyesDarkIcon h={14} w={14} />
) : (
<StacksSmileyDarkIcon h={14} w={14} />
)}
</Box>
</ClientOnly>
);
};
211 changes: 211 additions & 0 deletions src/app/_components/NewFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
'use client';

import { ExplorerLink } from '@/common/components/ExplorerLinks';
import { HiroIcon } from '@/ui/icons/HiroIcon';
import { StacksNameAndLogo } from '@/ui/icons/StacksNameAndLogo';
import { Box, Flex, Grid, Stack, Text } from '@chakra-ui/react';

Check warning on line 6 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L3-L6

Added lines #L3 - L6 were not covered by tests

import { PAGE_MAX_WIDTH } from '../../common/constants/constants';
import { Link } from '../../ui/Link';
import { StacksSmiley } from './Footer/StacksSmiley';

Check warning on line 10 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L8-L10

Added lines #L8 - L10 were not covered by tests

interface Link {
label: string;
href: string;
}

const rightSideLinks: Link[] = [

Check warning on line 17 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L17

Added line #L17 was not covered by tests
{
label: 'Home',
href: '/',
},
{
label: 'Blocks',
href: '/blocks',
},
{
label: 'Transactions',
href: '/transactions',
},
{
label: 'sBTC',
href: '/token/SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token',
},
{
// This page is not implemented yet
label: 'Stacking',
href: '/stacking',
},
{
// This page is not implemented yet
label: 'Mempool',
href: '/mempool',
},
{
label: 'Signers',
href: '/signers',
},
{
label: 'Tokens',
href: '/tokens',
},
{
// This page is not implemented yet
label: 'NFTs',
href: '/nfts',
},
{
// This page is not implemented yet
label: 'Analytics',
href: '/analytics',
},
{
label: 'Search',
href: '/search',
},
];

const leftSideLinks: Link[] = [

Check warning on line 68 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L68

Added line #L68 was not covered by tests
{
label: 'Sandbox',
href: '/sandbox/deploy',
},
{
label: 'Status Center',
href: 'https://status.hiro.so/',
},
{
label: 'Support',
href: '/support',
},
];

const xPadding = 8;

Check warning on line 83 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L83

Added line #L83 was not covered by tests

export const NewFooter = () => {

Check warning on line 85 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L85

Added line #L85 was not covered by tests
return (
<Stack
width="100%"
maxWidth={PAGE_MAX_WIDTH}
py={6}
px={xPadding}
border="1px solid"
borderColor="newBorderSecondary"
borderRadius="lg"
position="relative"
gap={0}
justifyContent="center"
>
<Link href="https://stacks.co">
<StacksSmiley
h={14}
w={14}
position="absolute"
bottom={-5}
right={xPadding}
transform="translateY(50%)"
transition="bottom 0.6s ease-in-out"
_hover={{
bottom: -2,
}}
/>
</Link>
<Stack gap={8}>
<Box hideBelow="lg">
<Flex justifyContent="space-between">
<Flex gap={4}>
{rightSideLinks.map(link => (
<ExplorerLink key={link.label} href={link.href} fontWeight="medium" fontSize="xs">

Check warning on line 118 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L118

Added line #L118 was not covered by tests
{link.label}
</ExplorerLink>
))}
</Flex>

<Flex gap={4}>
{leftSideLinks.map(link => (
<ExplorerLink key={link.label} href={link.href} fontWeight="medium" fontSize="xs">

Check warning on line 126 in src/app/_components/NewFooter.tsx

Codecov / codecov/patch

src/app/_components/NewFooter.tsx#L126

Added line #L126 was not covered by tests
{link.label}
</ExplorerLink>
))}
</Flex>
</Flex>
</Box>
<Box hideFrom="lg">
<Grid templateColumns={['repeat(2, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)']} gap={4}>
{rightSideLinks.concat(leftSideLinks).map(link => (
<ExplorerLink href={link.href} fontWeight="medium" fontSize="xs">
{link.label}
</ExplorerLink>
))}
</Grid>
</Box>
<Flex justifyContent="space-between" alignItems="center" flexWrap="wrap" rowGap={3}>
<Flex gap={6} flexWrap="wrap" rowGap={3}>
<Flex gap={1.5} alignItems="center" flexWrap="nowrap">
<HiroIcon h={4} w={4} color="var(--stacks-colors-icon-tertiary)" />
<Text fontSize="xs" color="textSecondary" whiteSpace="nowrap">
This Stacks Explorer is built and maintained by{' '}
<Link
href="https://www.hiro.so"
textDecoration="underline"
color="textSecondary"
_hover={{
color: 'textInteractiveHover',
}}
>
Hiro
</Link>
</Text>
</Flex>
<Link
href="https://www.hiro.so/terms"
target="_blank"
rel="noopener noreferrer nofollow"
fontSize="xs"
textDecoration="underline"
color="textSecondary"
whiteSpace="nowrap"
_hover={{
color: 'textInteractiveHover',
}}
>
Terms of Use
</Link>
<Link
href="https://www.hiro.so/privacy"
target="_blank"
rel="noopener noreferrer nofollow"
fontSize="xs"
textDecoration="underline"
color="textSecondary"
whiteSpace="nowrap"
_hover={{
color: 'textInteractiveHover',
}}
>
Privacy Policy
</Link>
<Text fontSize="xs" color="textSecondary" whiteSpace="nowrap">
Market data provided by{' '}
<Link
href="https://lunarcrush.com/"
target="_blank"
rel="noopener noreferrer nofollow"
textDecoration="underline"
color="textSecondary"
_hover={{
color: 'textInteractiveHover',
}}
>
LunarCrush
</Link>
</Text>
</Flex>
<Link href="https://stacks.co">
<StacksNameAndLogo h={3.5} w={18} color="var(--stacks-colors-stacks-name-and-logo)" />
</Link>
</Flex>
</Stack>
</Stack>
);
};
5 changes: 4 additions & 1 deletion src/app/_components/PageWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import { isRedesignUrl } from '@/common/utils/url-utils';

Check warning on line 3 in src/app/_components/PageWrapper.tsx

Codecov / codecov/patch

src/app/_components/PageWrapper.tsx#L3

Added line #L3 was not covered by tests
import { Stack } from '@chakra-ui/react';
import styled from '@emotion/styled';
import { ReactNode } from 'react';
@@ -11,6 +12,7 @@
import { Footer } from './Footer';
import { NavBar } from './NavBar';
import { NetworkModeToast } from './NetworkModeToast';
import { NewFooter } from './NewFooter';

Check warning on line 15 in src/app/_components/PageWrapper.tsx

Codecov / codecov/patch

src/app/_components/PageWrapper.tsx#L15

Added line #L15 was not covered by tests
import { CMSStatusBars } from './StatusBar/CMSStatusBars';
import { IncidentsStatusBarWithErrorBoundary } from './StatusBar/IncidentsStatusBar';
import { NonHiroNetworkWarningBar } from './StatusBar/NonHiroNetworkWarningBar';
@@ -82,6 +84,7 @@
statusBarContent: IncidentContent | null;
serverThemeCookie: string;
}) {
const redesignUrl = isRedesignUrl();

Check warning on line 87 in src/app/_components/PageWrapper.tsx

Codecov / codecov/patch

src/app/_components/PageWrapper.tsx#L87

Added line #L87 was not covered by tests
return (
<>
<Stack width={'100%'} top={0} backdropFilter={'blur(10px)'} bg={'surfaceOpposite'}>
@@ -99,7 +102,7 @@
>
{children}
</Stack>
<Footer />
{redesignUrl ? <NewFooter /> : <Footer />}
</Stack>
</WrapperWithBg>

20 changes: 0 additions & 20 deletions src/app/txid/[txId]/TxDetails/__tests__/Broadcast.test.tsx

This file was deleted.

Loading
Loading