Merge pull request #1584 from Badger-Finance/staging

release: 2.13.0

changelog.md

@@ -1,5 +1,11 @@
 # v2 UI Changelog
 
+### 2.13.0 - 01/14/2022
+
+-   add new vault list styles
+-   combine vault pages
+-   resolve issue showing no apr for non boosted vaults
+
 ### 2.12.0 - 01/05/2022
 
 -   resolve hot reload failures

src/components-v2/landing/NoVaults.tsx

@@ -1,11 +1,5 @@
-import { makeStyles, Typography, Button, Grid } from '@material-ui/core';
-import React, { useContext } from 'react';
-import views from '../../config/routes';
-import { Route } from 'mobx-router';
-import { RootStore } from 'mobx/RootStore';
-import { StoreContext } from '../../mobx/store-context';
-import { QueryParams } from '../../../node_modules/mobx-router/src/route';
-import { VaultState } from '@badger-dao/sdk';
+import React from 'react';
+import { makeStyles, Typography } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
 	messageContainer: {
@@ -20,71 +14,21 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-const linkObjects = (
-	state: VaultState,
-	goTo: <
-		P extends QueryParams = Record<string, string | number | boolean | undefined>,
-		Q extends QueryParams = Record<string, string | number | boolean | undefined>,
-	>(
-		route: Route<RootStore, P, Q>,
-		paramsObj?: P | undefined,
-		queryParamsObj?: Q | undefined,
-	) => Promise<void>,
-) => {
-	const linkStates = Object.values(VaultState).filter((s) => s !== state);
-	const links: JSX.Element[] = [];
-	linkStates.forEach((linkState) => {
-		switch (linkState) {
-			case VaultState.Experimental:
-				links.push(
-					<Grid item xs={2} key={`${VaultState.Experimental}-link-button`}>
-						<Button variant="outlined" color="primary" onClick={() => goTo(views.experimental)}>
-							{VaultState.Experimental}
-						</Button>
-					</Grid>,
-				);
-				break;
-			case VaultState.Open:
-				links.push(
-					<Grid item xs={2} key={`${VaultState.Open}-link-button`}>
-						<Button variant="outlined" color="primary" onClick={() => goTo(views.home)}>
-							{VaultState.Open}
-						</Button>
-					</Grid>,
-				);
-				break;
-			case VaultState.Guarded:
-				links.push(
-					<Grid item xs={2} key={`${VaultState.Guarded}-link-button`}>
-						<Button variant="outlined" color="primary" onClick={() => goTo(views.guarded)}>
-							{VaultState.Guarded}
-						</Button>
-					</Grid>,
-				);
-				break;
-		}
-	});
-	return links;
-};
+interface Props {
+	network: string;
+}
 
-export default function NoVaults(props: { state: VaultState; network: string }): JSX.Element {
+export default function NoVaults({ network }: Props): JSX.Element {
 	const classes = useStyles();
-	const store = useContext(StoreContext);
-	const { state, network } = props;
-	const {
-		router: { goTo },
-	} = store;
+
 	return (
 		<div className={classes.messageContainer}>
 			<img src={'/assets/icons/builder.png'} alt="Badger Builder" />
 			<Typography
 				className={classes.titleText}
 				variant="h4"
-			>{`There are currently no ${state} vaults on ${network}.`}</Typography>
+			>{`There are currently no vaults on ${network}.`}</Typography>
 			<Typography variant="h6">Check our other zones for more potential vaults</Typography>
-			<Grid className={classes.linkContainer} container justifyContent="center">
-				{linkObjects(state, goTo)}
-			</Grid>
 		</div>
 	);
 }

src/components-v2/landing/VaultItemApr.tsx

@@ -44,8 +44,22 @@ export const VaultItemApr = ({ vault, boost, multiplier }: Props): JSX.Element =
 		);
 	}
 
-	if (!vaultBoost || !vault.minApr) {
-		return (
+	let vaultApr: JSX.Element;
+
+	if (vaultBoost && vault.minApr) {
+		const boostContribution = Math.max(0, vaultBoost - vault.minApr);
+		vaultApr = (
+			<div>
+				<Typography className={classes.apr} variant="body1" color={'textPrimary'}>
+					{`${vaultBoost.toFixed(2)}%`}
+				</Typography>
+				<Typography variant="body1" color="textSecondary" className={classes.boost}>
+					My Boost: {boostContribution.toFixed(2)}%
+				</Typography>
+			</div>
+		);
+	} else {
+		vaultApr = (
 			<Typography
 				className={clsx(classes.apr, isMobile && classes.nonBoostedMobileApr)}
 				variant="body1"
@@ -56,8 +70,6 @@ export const VaultItemApr = ({ vault, boost, multiplier }: Props): JSX.Element =
 		);
 	}
 
-	const boostContribution = Math.max(0, vaultBoost - vault.minApr);
-
 	return (
 		<Tooltip
 			enterTouchDelay={0}
@@ -70,15 +82,10 @@ export const VaultItemApr = ({ vault, boost, multiplier }: Props): JSX.Element =
 			PopperProps={{
 				disablePortal: true,
 			}}
+			// needs to be set otherwise MUI will set a random one on every run causing snapshots to break
+			id={`${vault.name} apr breakdown`}
 		>
-			<div>
-				<Typography className={classes.apr} variant="body1" color={'textPrimary'}>
-					{`${vaultBoost.toFixed(2)}%`}
-				</Typography>
-				<Typography variant="body1" color="textSecondary" className={classes.boost}>
-					My Boost: {boostContribution.toFixed(2)}%
-				</Typography>
-			</div>
+			{vaultApr}
 		</Tooltip>
 	);
 };

src/components-v2/landing/VaultList.tsx

@@ -19,7 +19,6 @@ const useStyles = makeStyles((theme) => ({
 export interface VaultTableProps {
 	title: string;
 	settList: JSX.Element[];
-	displayValue?: string;
 }
 
 const VaultList = ({ title, settList }: VaultTableProps): JSX.Element => {

src/components-v2/landing/VaultListDisplay.tsx

@@ -10,7 +10,6 @@ import VaultListItem from './VaultListItem';
 import VaultList from './VaultList';
 import IbbtcVaultDepositDialog from '../ibbtc-vault/IbbtcVaultDepositDialog';
 import { isVaultVaultIbbtc } from '../../utils/componentHelpers';
-import { VaultState } from '@badger-dao/sdk';
 
 const useStyles = makeStyles((theme) => ({
 	messageContainer: {
@@ -19,21 +18,16 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-interface Props {
-	state: VaultState;
-}
-
-const VaultListDisplay = observer((props: Props) => {
+const VaultListDisplay = observer(() => {
 	const classes = useStyles();
-	const { state } = props;
 	const store = useContext(StoreContext);
 	const {
 		vaults,
 		network: { network },
 		user,
 	} = store;
 
-	const vaultOrder = vaults.getVaultOrderByState(state, vaults.vaultsFilters.sortOrder);
+	const vaultOrder = vaults.getVaultOrder();
 
 	if (vaultOrder === undefined) {
 		return <Loader message={`Loading ${network.name} Setts...`} />;
@@ -68,10 +62,10 @@ const VaultListDisplay = observer((props: Props) => {
 	});
 
 	if (settListItems.length === 0 && vaults.vaultsFiltersCount === 0) {
-		return <NoVaults state={state} network={network.name} />;
+		return <NoVaults network={network.name} />;
 	}
 
-	return <VaultList title={'All Vaults'} displayValue={''} settList={settListItems} />;
+	return <VaultList title="All Vaults" settList={settListItems} />;
 });
 
 export default VaultListDisplay;

src/components-v2/landing/VaultListHeader.tsx

@@ -8,8 +8,7 @@ import { StoreContext } from 'mobx/store-context';
 import { VaultSortOrder } from '../../mobx/model/ui/vaults-filters';
 import VaultListFiltersWidget from '../common/VaultListFiltersWidget';
 
-export const NAME_COLUMN_MAX_WIDTH = '45%';
-export const APR_COLUMN_MAX_WIDTH = '16%';
+export const NAME_COLUMN_MAX_WIDTH = '40%';
 export const INFORMATION_SECTION_MAX_WIDTH = '75%';
 
 const useStyles = makeStyles((theme) => ({
@@ -43,13 +42,6 @@ const useStyles = makeStyles((theme) => ({
 			flexBasis: NAME_COLUMN_MAX_WIDTH,
 		},
 	},
-	aprColumn: {
-		[theme.breakpoints.up('lg')]: {
-			flexGrow: 0,
-			maxWidth: APR_COLUMN_MAX_WIDTH,
-			flexBasis: APR_COLUMN_MAX_WIDTH,
-		},
-	},
 	tvlColumn: {
 		[theme.breakpoints.down('md')]: {
 			display: 'none',
@@ -211,7 +203,7 @@ const VaultListHeader = observer(({ title, helperText }: Props): JSX.Element =>
 		<>
 			<Grid item container className={classes.root}>
 				<Grid item container xs={12} md={9} lg alignItems="center" className={classes.titlesContainer}>
-					<Grid item xs={12} md={7} lg className={clsx(classes.title, classes.nameColumn)}>
+					<Grid item xs={12} md={6} lg className={clsx(classes.title, classes.nameColumn)}>
 						<Typography className={classes.title} variant="body2" color="textSecondary">
 							{title}
 						</Typography>
@@ -231,7 +223,7 @@ const VaultListHeader = observer(({ title, helperText }: Props): JSX.Element =>
 						xs={12}
 						md
 						alignItems="center"
-						className={clsx(classes.title, classes.columnTitle, classes.aprColumn)}
+						className={clsx(classes.title, classes.columnTitle)}
 					>
 						<Typography variant="body2" color="textSecondary">
 							APR

src/components-v2/landing/VaultListItem.tsx

@@ -15,7 +15,7 @@ import { VaultWithdraw } from '../common/dialogs/VaultWithdraw';
 import { Vault, VaultState } from '@badger-dao/sdk';
 import { TokenBalance } from '../../mobx/model/tokens/token-balance';
 import { currencyConfiguration } from '../../config/currency.config';
-import { NAME_COLUMN_MAX_WIDTH, INFORMATION_SECTION_MAX_WIDTH, APR_COLUMN_MAX_WIDTH } from './VaultListHeader';
+import { NAME_COLUMN_MAX_WIDTH, INFORMATION_SECTION_MAX_WIDTH } from './VaultListHeader';
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -61,13 +61,6 @@ const useStyles = makeStyles((theme) => ({
 	itemText: {
 		fontSize: 16,
 	},
-	apr: {
-		[theme.breakpoints.up('lg')]: {
-			flexGrow: 0,
-			maxWidth: APR_COLUMN_MAX_WIDTH,
-			flexBasis: APR_COLUMN_MAX_WIDTH,
-		},
-	},
 	tvl: {
 		[theme.breakpoints.down('md')]: {
 			display: 'none',
@@ -216,17 +209,17 @@ const VaultListItem = observer(({ vault, CustomDepositModal, depositBalance }: V
 				<Grid
 					container
 					item
-					spacing={2}
+					spacing={4}
 					xs={12}
 					md={9}
 					lg
 					className={classes.clickableSection}
 					onClick={goToVaultDetail}
 				>
-					<Grid item xs={12} md={7} lg className={classes.name} container>
+					<Grid item xs={12} md={6} lg className={classes.name} container>
 						<VaultItemName vault={vault} />
 					</Grid>
-					<Grid item xs={12} md className={classes.apr}>
+					<Grid item xs={12} md>
 						<VaultItemApr vault={vault} multiplier={multiplier} boost={user.accountDetails?.boost} />
 					</Grid>
 					<Grid item xs={12} md className={classes.tvl}>

src/components-v2/sidebar/index.tsx

@@ -188,7 +188,6 @@ const Sidebar = observer(() => {
 					</div>
 				</Collapse>
 				<SidebarItem route="/" view={views.home} title="Vaults" />
-				<SidebarItem route="/guarded" view={views.guarded} title="Guarded Vaults" />
 				{config.digg && <SidebarItem route="/digg" view={views.digg} title="Digg" />}
 				{config.ibBTC && <SidebarItem route="/ibBTC" view={views.IbBTC} title="ibBTC" />}
 				{config.bridge && <SidebarItem route="/bridge" view={views.bridge} title="Bridge" />}
@@ -209,19 +208,10 @@ const Sidebar = observer(() => {
 						]}
 					/>
 				)}
-				{(config.experimental || config.honey || config.airdrops) && (
+				{(config.honey || config.airdrops) && (
 					<SidebarSection
 						title="Arcade"
 						items={[
-							...(config.experimental
-								? [
-										{
-											title: 'Experimental Vaults',
-											route: '/experimental',
-											view: views.experimental,
-										},
-								  ]
-								: []),
 							...(config.airdrops
 								? [
 										{

src/components-v2/sidebar/interface/sidebar-config.interface.ts

@@ -4,7 +4,6 @@ export interface SidebarConfig {
 	ibBTC: boolean;
 	bridge: boolean;
 	boost: boolean;
-	experimental: boolean;
 	airdrops: boolean;
 	honey: boolean;
 	auction: boolean;

src/components-v2/sidebar/sidebar.config.ts

@@ -9,7 +9,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: true,
 		bridge: true,
 		boost: true,
-		experimental: true,
 		airdrops: true,
 		honey: true,
 		auction: FLAGS.CITADEL_SALE,
@@ -20,7 +19,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: false,
 		bridge: false,
 		boost: true,
-		experimental: true,
 		airdrops: false,
 		honey: false,
 		auction: false,
@@ -31,7 +29,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: false,
 		bridge: false,
 		boost: false,
-		experimental: true,
 		airdrops: false,
 		honey: false,
 		auction: false,
@@ -42,7 +39,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: false,
 		bridge: false,
 		boost: false,
-		experimental: true,
 		airdrops: false,
 		honey: false,
 		auction: false,
@@ -53,7 +49,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: false,
 		bridge: false,
 		boost: false,
-		experimental: true,
 		airdrops: false,
 		honey: false,
 		auction: false,
@@ -64,7 +59,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: false,
 		bridge: false,
 		boost: false,
-		experimental: true,
 		airdrops: false,
 		honey: false,
 		auction: false,
@@ -75,7 +69,6 @@ const sidebarConfig: Record<Network, SidebarConfig> = {
 		ibBTC: false,
 		bridge: false,
 		boost: false,
-		experimental: true,
 		airdrops: false,
 		honey: false,
 		auction: false,