Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; | ||
|
|
||
| export const StacksSmiley = (boxProps: BoxProps) => { | ||
| const { colorMode } = useColorMode(); | ||
| const [isHovered, setIsHovered] = useState(false); | ||
| return ( | ||
| <ClientOnly> | ||
| <Box | ||
| className="stacks-smiley" | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} | ||
| {...boxProps} | ||
| > | ||
| {colorMode === 'light' ? ( | ||
| isHovered ? ( | ||
| <StacksSmileyLaserEyesLightIcon h={14} w={14} /> | ||
| ) : ( | ||
| <StacksSmileyLightIcon h={14} w={14} /> | ||
| ) | ||
| ) : isHovered ? ( | ||
| <StacksSmileyLaserEyesDarkIcon h={14} w={14} /> | ||
| ) : ( | ||
| <StacksSmileyDarkIcon h={14} w={14} /> | ||
| )} | ||
| </Box> | ||
| </ClientOnly> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; | ||
|
|
||
| import { PAGE_MAX_WIDTH } from '../../common/constants/constants'; | ||
| import { Link } from '../../ui/Link'; | ||
| import { StacksSmiley } from './Footer/StacksSmiley'; | ||
|
|
||
| interface Link { | ||
| label: string; | ||
| href: string; | ||
| } | ||
|
|
||
| const rightSideLinks: Link[] = [ | ||
| { | ||
| 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[] = [ | ||
| { | ||
| label: 'Sandbox', | ||
| href: '/sandbox/deploy', | ||
| }, | ||
| { | ||
| label: 'Status Center', | ||
| href: 'https://status.hiro.so/', | ||
| }, | ||
| { | ||
| label: 'Support', | ||
| href: '/support', | ||
| }, | ||
| ]; | ||
|
|
||
| const xPadding = 8; | ||
|
|
||
| export const NewFooter = () => { | ||
| 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"> | ||
| {link.label} | ||
| </ExplorerLink> | ||
| ))} | ||
| </Flex> | ||
|
|
||
| <Flex gap={4}> | ||
| {leftSideLinks.map(link => ( | ||
| <ExplorerLink key={link.label} href={link.href} fontWeight="medium" fontSize="xs"> | ||
| {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> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.