Skip to content

Commit

Permalink
feat: footer redesign done
Browse files Browse the repository at this point in the history
  • Loading branch information
@BLuEScioN
BLuEScioN committed Jan 30, 2025
1 parent 8570829 commit f33a9a6
Show file tree
Hide file tree
Showing 14 changed files with 1,286 additions and 6 deletions.
34 changes: 34 additions & 0 deletions src/app/_components/Footer/StacksSmiley.tsx
View file
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>
);
};
211 changes: 211 additions & 0 deletions src/app/_components/NewFooter.tsx
View file
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"
_groupHover={{
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
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import { isRedesignUrl } from '@/common/utils/url-utils';
import { Stack } from '@chakra-ui/react';
import styled from '@emotion/styled';
import { ReactNode } from 'react';
Expand All @@ -11,6 +12,7 @@ import { TokenPrice } from '../../common/types/tokenPrice';
import { Footer } from './Footer';
import { NavBar } from './NavBar';
import { NetworkModeToast } from './NetworkModeToast';
import { NewFooter } from './NewFooter';
import { CMSStatusBars } from './StatusBar/CMSStatusBars';
import { IncidentsStatusBarWithErrorBoundary } from './StatusBar/IncidentsStatusBar';
import { NonHiroNetworkWarningBar } from './StatusBar/NonHiroNetworkWarningBar';
Expand Down Expand Up @@ -82,6 +84,7 @@ export function PageWrapper({
statusBarContent: IncidentContent | null;
serverThemeCookie: string;
}) {
const redesignUrl = isRedesignUrl();
return (
<>
<Stack width={'100%'} top={0} backdropFilter={'blur(10px)'} bg={'surfaceOpposite'}>
Expand All @@ -99,7 +102,7 @@ export function PageWrapper({
>
{children}
</Stack>
<Footer />
{redesignUrl ? <NewFooter /> : <Footer />}
</Stack>
</WrapperWithBg>

Expand Down
6 changes: 6 additions & 0 deletions src/common/utils/url-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,9 @@ const isImage = (url: string): boolean => {
const extension = urlWithoutParams.split('.').pop();
return !!extension && ['png', 'jpg', 'jpeg', 'gif', 'svg'].includes(extension);
};

export const isRedesignUrl = (): boolean => {
const queryParams = new URLSearchParams(window.location.search);
const redesignParam = queryParams.get('redesign');
return !!redesignParam;
};
32 changes: 32 additions & 0 deletions src/ui/icons/HiroIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Icon, IconProps } from '@chakra-ui/react';

export const HiroIcon = ({ color, ...rest }: IconProps) => {
return (
<Icon {...rest}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" fill="none">
<rect x="0.613281" width="16" height="16" rx="4" fill={(color as string) ?? '#95918C'} />
<path
d="M9.78612 11.2553C9.78097 11.2706 9.78348 11.2874 9.79288 11.3005C9.80227 11.3136 9.81739 11.3213 9.8335 11.3213H10.675C10.6965 11.3213 10.7155 11.3076 10.7224 11.2873L12.9318 4.74464C12.9369 4.72938 12.9344 4.71257 12.925 4.69949C12.9156 4.6864 12.9005 4.67865 12.8844 4.67865H12.0429C12.0214 4.67865 12.0024 4.69233 11.9955 4.71265L9.78612 11.2553Z"
fill="#F3F2F0"
stroke="#F3F2F0"
stroke-width="0.1"
stroke-linejoin="round"
/>
<path
d="M4.34276 11.3214H5.18357C5.20502 11.3214 5.22408 11.3077 5.23094 11.2874L7.44032 4.74467C7.44547 4.72941 7.44296 4.7126 7.43357 4.69952C7.42418 4.68643 7.40906 4.67867 7.39295 4.67867H6.55214C6.53069 4.67867 6.51163 4.69235 6.50476 4.71268L4.29796 11.2477C4.29418 11.2548 4.29204 11.2628 4.29204 11.2714C4.29204 11.299 4.31443 11.3214 4.34204 11.3214H4.34276Z"
fill="#F3F2F0"
stroke="#F3F2F0"
stroke-width="0.1"
stroke-linejoin="round"
/>
<path
d="M9.90967 7.66701C9.91482 7.65175 9.91231 7.63494 9.90292 7.62185C9.89353 7.60877 9.8784 7.60101 9.8623 7.60101H7.6005C7.57906 7.60101 7.56 7.61469 7.55313 7.63501L7.31762 8.33222C7.31246 8.34748 7.31498 8.36428 7.32437 8.37737C7.33376 8.39046 7.34888 8.39822 7.36499 8.39822H9.62678C9.64823 8.39822 9.66729 8.38454 9.67415 8.36422L9.90967 7.66701Z"
fill="#F3F2F0"
stroke="#F3F2F0"
stroke-width="0.1"
stroke-linejoin="round"
/>
</svg>
</Icon>
);
};
50 changes: 50 additions & 0 deletions src/ui/icons/StacksNameAndLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Icon, IconProps } from '@chakra-ui/react';

export const StacksNameAndLogo = ({ color, ...rest }: { color: string } & IconProps) => {
return (
<Icon {...rest} aria-label="Stacks Name and Logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 15" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.6406 5.39372C9.58743 5.30246 9.59503 5.18839 9.65579 5.09714L12.1928 1.33288C12.2611 1.22642 12.2687 1.09714 12.208 0.990676C12.1472 0.876608 12.0333 0.815771 11.9117 0.815771H10.9243C10.8179 0.815771 10.7116 0.869003 10.6432 0.967862L7.6809 5.37851C7.60495 5.49258 7.48342 5.55341 7.34669 5.55341H6.9745C6.83778 5.55341 6.71625 5.48497 6.64029 5.37851L3.69315 0.960258C3.63238 0.861398 3.51844 0.808167 3.4121 0.808167H2.42466C2.30313 0.808167 2.1816 0.876608 2.12842 0.990676C2.06766 1.10474 2.08285 1.23402 2.14362 1.33288L4.68059 5.10474C4.74136 5.18839 4.74895 5.30246 4.69578 5.39372C4.64261 5.49258 4.55146 5.54581 4.44512 5.54581H0.563704C0.373811 5.54581 0.229492 5.6979 0.229492 5.88041V6.7017C0.229492 6.89182 0.381407 7.0363 0.563704 7.0363H13.7727C13.9626 7.0363 14.1069 6.88421 14.1069 6.7017V5.88041C14.1069 5.7055 13.9778 5.56862 13.8107 5.54581C13.7955 5.54581 13.7803 5.54581 13.7651 5.54581H9.89126C9.78492 5.54581 9.68618 5.49258 9.6406 5.39372ZM6.64788 10.2378L3.68555 14.6485C3.62478 14.7473 3.51085 14.8006 3.40451 14.8006H2.41706C2.29553 14.8006 2.1816 14.7321 2.12083 14.6257C2.06006 14.5192 2.06766 14.3823 2.13602 14.2835L4.6654 10.5192C4.72617 10.4279 4.73376 10.3215 4.68059 10.2226C4.62742 10.1314 4.53627 10.0705 4.42993 10.0705H0.563704C0.381407 10.0705 0.229492 9.92604 0.229492 9.73592V8.91463C0.229492 8.73212 0.373811 8.58003 0.563704 8.58003H13.7423C13.7423 8.58003 13.7651 8.58003 13.7727 8.58003C13.955 8.58003 14.1069 8.72452 14.1069 8.91463V9.73592C14.1069 9.91843 13.9626 10.0705 13.7727 10.0705H9.89886C9.78492 10.0705 9.69377 10.1238 9.6482 10.2226C9.59503 10.3215 9.60262 10.4279 9.66339 10.5116L12.2004 14.2835C12.2611 14.3823 12.2763 14.5116 12.2156 14.6257C12.1548 14.7397 12.0409 14.8082 11.9193 14.8082H10.9319C10.8179 14.8082 10.7192 14.7549 10.6584 14.6637L7.6961 10.253C7.62014 10.139 7.49861 10.0781 7.36188 10.0781H6.98969C6.85297 10.0781 6.73144 10.1466 6.65548 10.253L6.64788 10.2378Z"
fill={color as string ?? "#F7F6F5"}
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M45.5532 4.86223H44.3227C44.2467 4.86223 44.186 4.91546 44.1708 4.99151L44.034 6.01052C43.4112 5.26527 42.4617 4.75577 41.0945 4.75577C39.8336 4.75577 38.7246 5.22725 37.9423 6.05615C37.1523 6.88504 36.689 8.05615 36.689 9.44778C36.689 10.9231 37.1523 12.1018 37.9423 12.9079C38.7322 13.7139 39.8336 14.1398 41.0945 14.1398C42.4693 14.1398 43.4036 13.5618 44.0264 12.8318L44.1708 13.8965C44.1784 13.9725 44.2467 14.0257 44.3227 14.0257H45.5532C45.6367 14.0257 45.7051 13.9573 45.7051 13.8736V5.01432C45.7051 4.93067 45.6367 4.86223 45.5532 4.86223ZM39.2183 11.7063C38.7322 11.1664 38.4436 10.3831 38.4436 9.44778C38.4436 8.51242 38.7322 7.73676 39.2183 7.18923C39.7045 6.6493 40.3957 6.32991 41.2236 6.32991C42.0516 6.32991 42.7352 6.6493 43.2213 7.19683C43.7074 7.74436 43.9885 8.53523 43.9885 9.4782C43.9885 10.4212 43.7074 11.1664 43.2289 11.7063C42.7504 12.2463 42.0591 12.558 41.2236 12.558C40.3881 12.558 39.6969 12.2387 39.2107 11.6987L39.2183 11.7063Z"
fill={color as string ?? "#F7F6F5"}
/>
<path
d="M69.876 8.53506L69.7621 8.51985C68.4936 8.36015 67.8403 8.23848 67.8403 7.46281C67.8403 6.74038 68.5695 6.2765 69.7089 6.2765C70.8482 6.2765 71.6154 6.86966 71.7142 7.72897L71.7445 7.85825H73.3548L73.446 7.74418V7.68335C73.3017 5.86586 71.9041 4.7708 69.7089 4.74799H69.6633C68.524 4.74799 67.5365 5.1054 66.8833 5.74418C66.3896 6.23088 66.1313 6.86205 66.1313 7.56167C66.1313 9.53886 67.8555 9.92669 69.7772 10.17C71.1749 10.3373 71.9041 10.4666 71.9041 11.4096C71.9041 12.132 71.1217 12.6187 69.952 12.6187C68.6379 12.6187 67.7188 11.9495 67.6732 10.9533V10.8925L67.5821 10.8088H65.9414V10.9685C65.9794 12.9229 67.5213 14.1396 69.952 14.1396C72.1091 14.1396 73.6131 12.9761 73.6131 11.3107C73.6131 9.16624 71.7673 8.7708 69.876 8.53506Z"
fill={color as string ?? "#F7F6F5"}
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M65.4766 13.7972L61.899 8.66412L65.2184 5.1204C65.2563 5.07477 65.2715 5.01393 65.2487 4.9531C65.2259 4.89987 65.1728 4.86184 65.112 4.86184H63.4106C63.3726 4.86184 63.327 4.87705 63.2966 4.90747L59.0582 9.39416V1.71355C59.0582 1.6299 58.9899 1.56146 58.9063 1.56146H57.4859C57.4023 1.56146 57.334 1.6299 57.334 1.71355V13.8809C57.334 13.9645 57.4023 14.0329 57.4859 14.0329H58.9063C58.9899 14.0329 59.0582 13.9645 59.0582 13.8809V11.5919L60.6609 9.91127L63.5093 13.9645C63.5397 14.0025 63.5853 14.0253 63.6308 14.0253H65.3475C65.4007 14.0253 65.4538 13.9949 65.4842 13.9417C65.507 13.8885 65.507 13.8276 65.4766 13.782V13.7972Z"
fill={color as string ?? "#F7F6F5"}
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M55.6178 10.6721H54.1974C54.1291 10.6721 54.0683 10.7253 54.0455 10.7938C53.924 11.3413 53.6429 11.7824 53.248 12.0866C52.853 12.3907 52.3289 12.5657 51.706 12.5657C50.9009 12.5657 50.2325 12.2463 49.7615 11.6987C49.2906 11.1512 49.0096 10.3679 49.0096 9.43257C49.0096 8.49721 49.2906 7.72155 49.7615 7.18162C50.2325 6.6417 50.9009 6.32991 51.706 6.32991C52.9062 6.32991 53.7645 7.01432 54.0227 8.07136C54.0379 8.1398 54.0987 8.18542 54.1671 8.18542H55.6102C55.6558 8.18542 55.7014 8.16261 55.7242 8.13219C55.7546 8.09417 55.7622 8.04854 55.7546 8.01052C55.5723 7.02193 55.1241 6.20824 54.4405 5.6379C53.7569 5.06756 52.8378 4.75577 51.7516 4.75577C50.4148 4.75577 49.283 5.21965 48.4854 6.04854C47.6879 6.86984 47.2397 8.04094 47.2397 9.43257C47.2397 10.8242 47.6803 11.9953 48.4627 12.8318C49.2374 13.6531 50.3388 14.1322 51.6529 14.1398C51.6681 14.1398 51.6832 14.1398 51.6984 14.1398C52.7846 14.1398 53.7037 13.828 54.4025 13.2501C55.1013 12.6797 55.5647 11.8508 55.7546 10.847C55.7622 10.8014 55.7546 10.7558 55.7242 10.7253C55.6938 10.6873 55.6558 10.6721 55.6102 10.6721H55.6178Z"
fill={color as string ?? "#F7F6F5"}
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M36.1409 12.4212H34.5913C34.2495 12.4212 34.0596 12.3528 33.9457 12.2387C33.8318 12.117 33.771 11.9117 33.771 11.5543V6.47446H35.8598C35.9434 6.47446 36.0117 6.40602 36.0117 6.32237V5.02199C36.0117 4.93834 35.9434 4.8699 35.8598 4.8699H33.771V2.5353C33.771 2.45165 33.7026 2.38321 33.6191 2.38321H32.1987C32.1151 2.38321 32.0468 2.45165 32.0468 2.5353V4.8699H30.6036C30.52 4.8699 30.4517 4.93834 30.4517 5.02199V6.32237C30.4517 6.40602 30.52 6.47446 30.6036 6.47446H32.0468V11.5695C32.0468 12.368 32.1987 12.9916 32.6088 13.4174C33.0114 13.8433 33.6419 14.0334 34.5078 14.0334H36.1409C36.2244 14.0334 36.2928 13.965 36.2928 13.8813V12.5809C36.2928 12.4973 36.2244 12.4288 36.1409 12.4288V12.4212Z"
fill={color as string ?? "#F7F6F5"}
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M28.5146 7.83557C27.7322 7.31846 26.6992 7.05991 25.7118 6.90021C24.7927 6.74051 23.9951 6.59603 23.4254 6.30705C23.1444 6.17017 22.9241 5.99527 22.7722 5.78994C22.6279 5.57701 22.5443 5.31846 22.5443 4.98386C22.5443 4.37549 22.7722 3.92682 23.19 3.61504C23.6077 3.30325 24.2306 3.13595 25.0357 3.13595C26.6081 3.13595 27.7094 4.01808 27.8689 5.33367C27.8765 5.40971 27.9449 5.47055 28.0209 5.47055H29.5096C29.5552 5.47055 29.5932 5.45534 29.6236 5.42492C29.6539 5.39451 29.6691 5.35648 29.6615 5.31086C29.5856 4.17778 29.0995 3.212 28.2943 2.53519C27.4892 1.85838 26.365 1.47055 25.0357 1.47055C23.7748 1.47055 22.7038 1.82796 21.9367 2.45914C21.1695 3.09793 20.729 4.00287 20.729 5.08272C20.729 6.31466 21.2607 7.11314 22.0506 7.63785C22.8254 8.15496 23.8508 8.39831 24.8307 8.56561C25.7573 8.7253 26.5625 8.8774 27.1474 9.17397C27.436 9.31846 27.6563 9.49337 27.8082 9.7139C27.9601 9.93443 28.0436 10.2006 28.0436 10.558C28.0436 11.1664 27.7778 11.6379 27.3221 11.9648C26.8587 12.2918 26.1979 12.4744 25.4003 12.4744C24.4964 12.4744 23.7445 12.2158 23.2052 11.7671C22.6659 11.3185 22.3317 10.6797 22.2709 9.90401C22.2709 9.82797 22.2025 9.75953 22.119 9.75953H20.6226C20.5846 9.75953 20.5391 9.77473 20.5163 9.80515C20.4859 9.83557 20.4707 9.87359 20.4707 9.91922C20.5163 11.1588 20.9948 12.2158 21.8455 12.9687C22.6963 13.7215 23.904 14.1474 25.3775 14.1474C26.684 14.1474 27.8006 13.7671 28.5905 13.1131C29.3881 12.4515 29.8514 11.5162 29.8514 10.4135C29.8514 9.17397 29.3121 8.37549 28.5222 7.84317L28.5146 7.83557Z"
fill={color as string ?? "#F7F6F5"}
/>
</svg>
</Icon>
);
};
Loading

0 comments on commit f33a9a6

Please sign in to comment.