Merge pull request #275 from Synthetixio/staging

Release
Synthetixio · Mar 5, 2024 · e5b9c17 · e5b9c17
2 parents cbd1bcf + cb6b1ae
commit e5b9c17
Show file tree

Hide file tree

Showing 36 changed files with 4,390 additions and 2,818 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,10 +1,10 @@
 {
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": true,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "arrowParens": "avoid",
-  "endOfLine": "lf"
+	"printWidth": 80,
+	"tabWidth": 2,
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"arrowParens": "avoid",
+	"endOfLine": "lf"
 }
diff --git a/pages/governance.tsx b/pages/governance.tsx
@@ -1,9 +1,10 @@
 import Head from 'next/head';
 import { PageLayout } from 'src/components';
-import FurtherLinking from 'src/sections/governance/furtherLinking';
-import GovernanceMain from 'src/sections/governance/main';
-import Table from 'src/sections/governance/table';
-import { Line } from 'src/styles/common';
+import GovernanceAction from 'src/sections/governance/action';
+import GovernanceCallout from 'src/sections/governance/callout';
+import GovernanceEcosystem from 'src/sections/governance/ecosystem';
+import GovernanceFeatures from 'src/sections/governance/features';
+import GovernanceHeader from 'src/sections/governance/header';
 
 export default function Governance() {
 	return (
@@ -12,10 +13,11 @@ export default function Governance() {
 				<title>Synthetix - Governance</title>
 			</Head>
 			<PageLayout>
-				<GovernanceMain />
-				<Table />
-				<FurtherLinking />
-				<Line showOnMobile />
+				<GovernanceHeader />
+				<GovernanceCallout />
+				<GovernanceEcosystem />
+				<GovernanceFeatures />
+				<GovernanceAction />
 			</PageLayout>
 		</>
 	);

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -60,7 +60,7 @@ const Home = ({
 			<Head>
 				<title>Synthetix</title>
 			</Head>
-			<PageLayout useChakra>
+			<PageLayout>
 				<Hero />
 				{totalStakedValue && tradingVolume && swapsVolumeTotal && (
 					<Volume

diff --git a/pages/perps.tsx b/pages/perps.tsx
@@ -13,7 +13,7 @@ export default function DecentralizedPerpetualFutures() {
 			<Head>
 				<title>Synthetix - Decentralized Perps</title>
 			</Head>
-			<PageLayout useChakra>
+			<PageLayout>
 				<FuturesMain />
 				<Callout />
 				<USP />

diff --git a/public/spartan-governance.svg b/public/spartan-governance.svg
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -2,15 +2,22 @@ import { FlexDivCol } from '../../styles/common';
 import styled from 'styled-components';
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
 
-export type AccordionItemsType = Omit<AccordionItemProps, 'onHeaderClick' | 'open' | 'isLast'>;
+export type AccordionItemsType = Omit<
+	AccordionItemProps,
+	'onHeaderClick' | 'open' | 'isLast'
+>;
 
 export interface AccordionProps {
 	items: AccordionItemsType[];
 	onAccordionItemChange: (index: number) => void;
 	activeIndex: number;
 }
 
-export default function Accordion({ items, onAccordionItemChange, activeIndex }: AccordionProps) {
+export default function Accordion({
+	items,
+	onAccordionItemChange,
+	activeIndex,
+}: AccordionProps) {
 	return (
 		<AccordionContainer>
 			{items.map((item, index) => {

diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx
@@ -30,7 +30,9 @@ export default function AccordionItem({
 				<AccordionItemInner isLast={isLast}>
 					{open && (
 						<AnimationContainer>
-							<AccordionItemDescriptionContainer>{descriptions}</AccordionItemDescriptionContainer>
+							<AccordionItemDescriptionContainer>
+								{descriptions}
+							</AccordionItemDescriptionContainer>
 							{buttons}
 						</AnimationContainer>
 					)}
@@ -79,7 +81,8 @@ const Circle = styled.span<ActiveItemProps>`
 	left: -4px;
 	width: 10px;
 	height: 10px;
-	border: 2px solid ${({ active, theme }) => (active ? theme.colors.cyan : theme.colors.gray50)};
+	border: 2px solid
+		${({ active, theme }) => (active ? theme.colors.cyan : theme.colors.gray50)};
 	border-radius: 50%;
 `;
 
@@ -91,7 +94,8 @@ const LastCircle = styled(Circle)`
 
 const AccordionItemHeadline = styled.h3<ActiveItemProps>`
 	${({ theme }) => theme.fonts.smallHeadline};
-	color: ${({ active, theme }) => (active ? theme.colors.cyan : theme.colors.gray50)};
+	color: ${({ active, theme }) =>
+		active ? theme.colors.cyan : theme.colors.gray50};
 	margin-left: 24px;
 	line-height: 19px;
 	text-align: start;

diff --git a/src/components/Accordion/__test__/index.spec.tsx b/src/components/Accordion/__test__/index.spec.tsx
@@ -17,11 +17,17 @@ const queryTextsDictionary = {
 
 const items: AccordionItemsType[] = [
 	{
-		descriptions: [<span key="test-key1">{queryTextsDictionary.descriptions.notVisible}</span>],
+		descriptions: [
+			<span key="test-key1">
+				{queryTextsDictionary.descriptions.notVisible}
+			</span>,
+		],
 		title: queryTextsDictionary.titles.first,
 	},
 	{
-		descriptions: [<span key="test-key2">{queryTextsDictionary.descriptions.visible}</span>],
+		descriptions: [
+			<span key="test-key2">{queryTextsDictionary.descriptions.visible}</span>,
+		],
 		title: queryTextsDictionary.titles.second,
 	},
 ];
@@ -43,10 +49,12 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
 
-		expect(screen.queryByText(queryTextsDictionary.descriptions.notVisible)).toBeNull();
+		expect(
+			screen.queryByText(queryTextsDictionary.descriptions.notVisible),
+		).toBeNull();
 	});
 
 	test('should render the accordion item description if it have the active index', () => {
@@ -58,10 +66,12 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
 
-		expect(screen.queryByText(queryTextsDictionary.descriptions.notVisible)).toBeInTheDocument();
+		expect(
+			screen.queryByText(queryTextsDictionary.descriptions.notVisible),
+		).toBeInTheDocument();
 	});
 
 	test('should render the all the existing titles', () => {
@@ -72,11 +82,11 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
-		const allTitles = items.map((item) => screen.queryByText(item.title));
+		const allTitles = items.map(item => screen.queryByText(item.title));
 		expect(allTitles.length).toBe(2);
-		allTitles.forEach((title) => expect(title).toBeInTheDocument());
+		allTitles.forEach(title => expect(title).toBeInTheDocument());
 	});
 
 	test('should call the onAccordionItemChange when the title of the accordion item is clicked', async () => {
@@ -88,7 +98,7 @@ describe('Accordion', () => {
 					onAccordionItemChange={mockHandleClick}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
 
 		userEvent.click(screen.queryByText(queryTextsDictionary.titles.first)!);
@@ -104,10 +114,10 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
 		expect(
-			screen.queryByText(queryTextsDictionary.descriptions.notVisible)
+			screen.queryByText(queryTextsDictionary.descriptions.notVisible),
 		).not.toBeInTheDocument();
 		userEvent.click(screen.queryByText(queryTextsDictionary.titles.first)!);
 
@@ -118,10 +128,12 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
 
-		expect(screen.queryByText(queryTextsDictionary.descriptions.notVisible)).toBeInTheDocument();
+		expect(
+			screen.queryByText(queryTextsDictionary.descriptions.notVisible),
+		).toBeInTheDocument();
 	});
 
 	test('should not render any other description when the already active title is clicked', async () => {
@@ -132,9 +144,11 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
-		expect(screen.queryByText(queryTextsDictionary.descriptions.visible)).toBeInTheDocument();
+		expect(
+			screen.queryByText(queryTextsDictionary.descriptions.visible),
+		).toBeInTheDocument();
 		userEvent.click(screen.queryByText(queryTextsDictionary.titles.second)!);
 
 		rerender(
@@ -144,12 +158,14 @@ describe('Accordion', () => {
 					onAccordionItemChange={onAccordionItemChange}
 					items={items}
 				/>
-			</ThemeProvider>
+			</ThemeProvider>,
 		);
 		expect(
-			screen.queryByText(queryTextsDictionary.descriptions.notVisible)
+			screen.queryByText(queryTextsDictionary.descriptions.notVisible),
 		).not.toBeInTheDocument();
 
-		expect(screen.queryByText(queryTextsDictionary.descriptions.visible)).toBeInTheDocument();
+		expect(
+			screen.queryByText(queryTextsDictionary.descriptions.visible),
+		).toBeInTheDocument();
 	});
 });
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { Logo, Socials } from '../';
-import { Box, Divider, Flex, Link, Show, Text } from '@chakra-ui/react';
+import { Box, Divider, Flex, Hide, Link, Show, Text } from '@chakra-ui/react';
 import {
 	Accordion,
 	AccordionItem,
@@ -129,7 +129,7 @@ export function Footer() {
 					</Flex>
 				</Flex>
 			</Show>
-			<Show below="lg">
+			<Hide above="lg">
 				<Flex
 					as="footer"
 					w="100%"
@@ -194,7 +194,7 @@ export function Footer() {
 						<Socials isFooter />
 					</Flex>
 				</Flex>
-			</Show>
+			</Hide>
 		</>
 	);
 }
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -19,7 +19,7 @@ const data: {
 		label: 'Governance',
 	},
 	{
-		link: 'https://docs.synthetix.io/',
+		externalLink: 'https://docs.synthetix.io/',
 		label: 'Docs',
 	},
 	{
@@ -96,6 +96,7 @@ export const Menu = ({ isOpen, ...rest }: MenuProps) => {
 									color="#828295"
 									_hover={{ color: 'cyan.500' }}
 									key={item.link}
+									target="_blank"
 								>
 									<Text
 										fontFamily="heading"

diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -2,48 +2,30 @@ import { Divider, Flex, FlexProps } from '@chakra-ui/react';
 import { PropsWithChildren } from 'react';
 import { Footer, Header } from '..';
 
-interface PageLayoutProps extends PropsWithChildren, FlexProps {
-	useChakra?: boolean;
-}
-
-export function PageLayout({ children, useChakra, ...props }: PageLayoutProps) {
-	if (useChakra) {
-		return (
-			<Flex minW="100vw" bg="navy.900" justifyContent="center">
-				<Flex
-					direction="column"
-					alignItems="center"
-					w="100%"
-					maxW={{
-						base: '100vw',
-						md: '48rem',
-						lg: '62rem',
-						xl: '80rem',
-						'2xl': '96rem',
-					}}
-					px={{ base: '16px', lg: '24px' }}
-					{...props}
-				>
-					<Header />
-					{children}
-					<Divider minW="100vw" borderColor="gray.900" />
-					<Footer />
-				</Flex>
-			</Flex>
-		);
-	}
+interface PageLayoutProps extends PropsWithChildren, FlexProps {}
 
+export function PageLayout({ children, ...props }: PageLayoutProps) {
 	return (
-		<Flex
-			direction="column"
-			alignItems="center"
-			bg="navy.900"
-			px="2"
-			{...props}
-		>
-			<Header />
-			{children}
-			<Footer />
+		<Flex minW="100vw" bg="navy.900" justifyContent="center">
+			<Flex
+				direction="column"
+				alignItems="center"
+				w="100%"
+				maxW={{
+					base: '100vw',
+					md: '48rem',
+					lg: '62rem',
+					xl: '80rem',
+					'2xl': '96rem',
+				}}
+				px={{ base: '16px', lg: '24px' }}
+				{...props}
+			>
+				<Header />
+				{children}
+				<Divider minW="100vw" borderColor="gray.900" />
+				<Footer />
+			</Flex>
 		</Flex>
 	);
 }