Feat: Implementing Staking V2

packages/app/package.json

@@ -19,8 +19,6 @@
 		"@eth-optimism/contracts": "0.5.37",
 		"@ethersproject/bignumber": "^5.7.0",
 		"@ethersproject/providers": "^5.7.2",
-		"@gnosis.pm/safe-apps-provider": "^0.14.0",
-		"@gnosis.pm/safe-apps-sdk": "^7.8.0",
 		"@kwenta/sdk": "workspace:*",
 		"@material-ui/core": "^4.12.4",
 		"@pythnetwork/pyth-evm-js": "1.17.0",
@@ -41,7 +39,7 @@
 		"date-fns": "2.21.3",
 		"date-fns-tz": "2.0.0",
 		"echarts": "5.4.2",
-		"eslint-config-next": "^13.4.6",
+		"eslint-config-next": "^13.4.8",
 		"ethcall": "4.7.2",
 		"ethers": "5.7.2",
 		"graphql-request": "3.4.0",
@@ -50,23 +48,24 @@
 		"lightweight-charts": "4.0.1",
 		"lodash": "4.17.21",
 		"moment-business-time": "2.0.0",
-		"next": "^13.3.4",
+		"next": "^13.4.8",
 		"next-compose-plugins": "2.2.1",
 		"next-connect": "^0.13.0",
 		"next-transpile-modules": "10.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-i18next": "12.1.1",
 		"react-infinite-scroll-component": "^6.1.0",
-		"react-is": "^18.0.0",
+		"react-is": "^18.2.0",
 		"react-query": "3.39.3",
 		"react-redux": "8.1.1",
 		"react-responsive": "^9.0.2",
-		"react-rnd": "^10.3.7",
+		"react-rnd": "^10.4.1",
 		"react-select": "4.3.1",
 		"react-slick": "0.29.0",
-		"react-toastify": "^9.0.4",
-		"recharts": "^2.5.0",
+		"react-table": "7.7.0",
+		"react-toastify": "^9.1.3",
+		"recharts": "^2.7.2",
 		"redux-logger": "^3.0.6",
 		"redux-persist": "^6.0.0",
 		"slick-carousel": "1.8.1",
@@ -89,8 +88,8 @@
 		"@testing-library/react": "14.0.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.4.3",
-		"@typechain/ethers-v5": "^10.1.0",
-		"@types/cors": "^2.8.12",
+		"@typechain/ethers-v5": "^10.2.1",
+		"@types/cors": "^2.8.13",
 		"@types/date-fns": "2.6.0",
 		"@types/ethereum-block-by-date": "^1.4.1",
 		"@types/jest": "27.0.2",
@@ -111,7 +110,7 @@
 		"jest": "28.1.0",
 		"jest-environment-jsdom": "28.1.0",
 		"jest-preview": "^0.3.1",
-		"jest-transformer-svg": "^2.0.0",
+		"jest-transformer-svg": "^2.0.1",
 		"next-router-mock": "0.9.3",
 		"pinst": "3.0.0",
 		"postcss": "^8.4.24",

packages/app/src/components/Button/Button.tsx

@@ -16,6 +16,7 @@ export type ButtonVariant =
 	| 'yellow'
 	| 'long'
 	| 'short'
+	| 'staking-button'
 
 type BaseButtonProps = {
 	$size: 'xsmall' | 'small' | 'medium' | 'large'
@@ -25,6 +26,7 @@ type BaseButtonProps = {
 	fullWidth?: boolean
 	noOutline?: boolean
 	textColor?: 'yellow'
+	outlineColor?: 'yellow'
 	textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase'
 	$active?: boolean
 	$mono?: boolean
@@ -151,9 +153,8 @@ const BaseButton = styled.button<BaseButtonProps>`
 			}
 		`}
 
-
 	${(props) =>
-		props.$variant === 'yellow' &&
+		(props.$variant === 'yellow' || props.$variant === 'staking-button') &&
 		css`
 			background: ${props.theme.colors.selectedTheme.button.yellow.fill};
 			border: 1px solid ${props.theme.colors.selectedTheme.button.yellow.border};
@@ -166,6 +167,11 @@ const BaseButton = styled.button<BaseButtonProps>`
 			&::before {
 				display: none;
 			}
+
+			${props.$variant === 'staking-button' &&
+			css`
+				border: 1px solid ${props.theme.colors.selectedTheme.button.yellow.text};
+			`}
 		`}
 
 	font-family: ${(props) =>
@@ -233,6 +239,7 @@ type ButtonProps = {
 	fullWidth?: boolean
 	noOutline?: boolean
 	textColor?: 'yellow'
+	outlineColor?: 'yellow'
 	textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase'
 	style?: React.CSSProperties
 	disabled?: boolean

packages/app/src/components/Button/TabButton.tsx

@@ -21,6 +21,7 @@ export type TabButtonProps = {
 	isRounded?: boolean
 	onClick?: () => any
 	flat?: boolean
+	variant?: 'noOutline'
 }
 
 const InnerButton: React.FC<TabButtonProps> = React.memo(
@@ -63,6 +64,7 @@ const TabButton: React.FC<TabButtonProps> = React.memo(
 				$nofill={props.nofill}
 				$flat={flat}
 				onClick={onClick}
+				$variant={props.variant}
 			>
 				<InnerButton {...props} />
 			</StyledButton>
@@ -127,6 +129,7 @@ const sharedStyle = css<{
 	&:hover {
 		background: ${(props) =>
 			props.theme.colors.selectedTheme.newTheme.button.default.hover.background};
+		border-width: 1px;
 	}
 
 	.title {
@@ -184,6 +187,7 @@ const StyledButton = styled(Button).attrs({ size: 'small' })<{
 	$nofill?: boolean
 	$flat?: boolean
 	active?: boolean
+	$variant?: 'noOutline' | undefined
 }>`
 	p {
 		text-align: left;
@@ -194,6 +198,15 @@ const StyledButton = styled(Button).attrs({ size: 'small' })<{
 		border-radius: ${props.isRounded ? '100px' : '8px'};
 	`}
 	${sharedStyle}
+
+	${(props) =>
+		props.$variant === 'noOutline' &&
+		css`
+			border: none;
+			border-radius: 100px;
+			padding: 10px 15px;
+			width: 75px;
+		`}
 `
 
 export default TabButton

packages/app/src/components/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { FC, memo } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { Body } from 'components/Text'
 
@@ -8,18 +8,35 @@ type CheckboxProps = {
 	label: string
 	checked: boolean
 	checkSide?: 'left' | 'right'
+	variant?: 'item' | 'table'
 	onChange: () => void
 }
 
 export const Checkbox: FC<CheckboxProps> = memo(
-	({ id, label, checked, onChange, checkSide = 'left', ...props }) => (
+	({ id, label, checked, onChange, checkSide = 'left', variant = 'item', ...props }) => (
 		<CheckboxContainer>
 			{checkSide === 'left' && (
-				<Input type="checkbox" id={id} name={id} checked={checked} onChange={onChange} {...props} />
+				<Input
+					type="checkbox"
+					id={id}
+					name={id}
+					checked={checked}
+					onChange={onChange}
+					variant={variant}
+					{...props}
+				/>
 			)}
 			<Label htmlFor={id}>{<Body color="secondary">{label}</Body>}</Label>
 			{checkSide === 'right' && (
-				<Input type="checkbox" id={id} name={id} checked={checked} onChange={onChange} {...props} />
+				<Input
+					type="checkbox"
+					id={id}
+					name={id}
+					checked={checked}
+					onChange={onChange}
+					variant={variant}
+					{...props}
+				/>
 			)}
 		</CheckboxContainer>
 	)
@@ -34,7 +51,7 @@ const CheckboxContainer = styled.div`
 	gap: 8px;
 `
 
-const Input = styled.input`
+const Input = styled.input<{ variant: 'item' | 'table' }>`
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	-o-appearance: none;
@@ -66,9 +83,27 @@ const Input = styled.input`
 		box-shadow: inset 1em 1em var(--form-control-color);
 		background-color: ${(props) => props.theme.colors.selectedTheme.newTheme.text.primary};
 	}
+
 	&:checked::before {
 		transform: scale(1);
 	}
+
+	${(props) =>
+		props.variant === 'table' &&
+		css`
+			background-color: ${(props) => props.theme.colors.selectedTheme.newTheme.checkBox.background};
+			width: 13px;
+			height: 13px;
+			border-radius: 4px;
+
+			&::before {
+				clip-path: none;
+			}
+			&:checked::before {
+				background-color: ${props.theme.colors.selectedTheme.newTheme.checkBox.checked};
+				border-radius: 4px;
+			}
+		`}
 `
 
 const Label = styled.label`

packages/app/src/components/Media.tsx

@@ -15,6 +15,14 @@ export const DesktopOnlyView: FC<MediaProps> = memo(({ children }) => (
 	<MediaQuery minWidth={BREAKPOINTS.md}>{children}</MediaQuery>
 ))
 
+export const DesktopLargeOnlyView: FC<MediaProps> = memo(({ children }) => (
+	<MediaQuery minWidth={BREAKPOINTS.lg}>{children}</MediaQuery>
+))
+
+export const DesktopSmallOnlyView: FC<MediaProps> = memo(({ children }) => (
+	<MediaQuery maxWidth={BREAKPOINTS.lg}>{children}</MediaQuery>
+))
+
 export const TabletOnlyView: FC<MediaProps> = memo(({ children }) => (
 	<MediaQuery minWidth={BREAKPOINTS.sm} maxWidth={BREAKPOINTS.md - 1}>
 		{children}

packages/app/src/components/Nav/NavLink.tsx

@@ -2,6 +2,8 @@ import Link from 'next/link'
 import React, { ReactNode } from 'react'
 import styled from 'styled-components'
 
+import LinkIconLight from 'assets/svg/app/link-light.svg'
+import { FlexDivRowCentered } from 'components/layout/flex'
 import { linkCSS } from 'styles/common'
 
 type NavButtonProps = {
@@ -16,15 +18,25 @@ type NavButtonProps = {
 const NavButton: React.FC<NavButtonProps> = ({ title, href, external, disabled, ...props }) => {
 	return (
 		<div>
-			<Link href={href} passHref>
+			{external ? (
 				<StyledLink
-					target={external ? '_blank' : '_self'}
+					href={href}
+					target="_blank"
+					rel="noopener noreferrer"
 					className={disabled ? 'disabled' : undefined}
 					{...props}
 				>
-					{title}
+					<FlexDivRowCentered columnGap="5px">
+						{title} <LinkIconLight />
+					</FlexDivRowCentered>
 				</StyledLink>
-			</Link>
+			) : (
+				<Link href={href} passHref>
+					<StyledLink className={disabled ? 'disabled' : undefined} {...props}>
+						{title}
+					</StyledLink>
+				</Link>
+			)}
 		</div>
 	)
 }