Fix/bugs and pools adjusts

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "adex-staking-ui",
-	"version": "0.11.1",
+	"version": "0.11.13",
 	"private": true,
 	"engines": {
 		"npm": "use-yarn",

public/locales/en/translation.json

@@ -118,7 +118,8 @@
 		"tomV5RewardPolicy": "The \"Validator Tom\" pool will distribute its fee earnings proportionally to each staker. The fee earnings will be 7% of the total volume, which you can track on the statistics page. All rewards will be paid in ADX and will be automatically added to your stake.",
 		"tomV5SlashPolicy": "No slashing.",
 		"tomLegacyPoolDisabledInfo": "Staking to Tom Legacy pool is disabled. Use updated pool.",
-		"tomV5LockupPeriodTxt": "{{count}} days ({{count}} days need to pass before unlocking ADX, during that period no rewards are received)"
+		"tomV5LockupPeriodTxt": "{{count}} days ({{count}} days need to pass before unlocking ADX, during that period no rewards are received)",
+		"loyaltyPoolDisabledInfo": "This pool is closed for new deposits. Withdrawals can be made via the “Staked” button in the menu."
 	},
 	"eventTypes": {
 		"enter": "Enter",

src/components/CustomButton.js

@@ -1,4 +1,4 @@
-import { ButtonBase, makeStyles } from "@material-ui/core"
+import { Button, makeStyles } from "@material-ui/core"
 import clsx from "clsx"
 import { alpha } from "@material-ui/core/styles"
 
@@ -16,7 +16,7 @@ const CustomButton = ({
 	...rest
 }) => {
 	const useStyles = makeStyles(theme => {
-		const getDisabledBgColor = bgColor => alpha(bgColor, 0.5)
+		const getColorWithOpacity = bgColor => alpha(bgColor, 0.5)
 		return {
 			common: {
 				padding: "0 20px",
@@ -25,52 +25,73 @@ const CustomButton = ({
 				borderRadius: radius ? "20px" : "",
 				minWidth: "40px",
 				width: w || "auto",
-				height: h || "40px"
+				height: h || "40px",
+				[theme.breakpoints.down("sm")]: {
+					lineHeight: "1",
+					padding: "5px 20px"
+				}
 			},
 			disabled: {
 				cursor: "default",
 				pointerEvents: "none",
+				BorderColor: "#f3f3f3",
 				boxShadow: "none",
 				color: theme.palette.primary.contrastText
 			},
 			primary: {
 				background: theme.palette.button.primary,
 				color: theme.palette.primary.contrastText,
 				"&$disabled": {
-					background: getDisabledBgColor(theme.palette.button.primary)
+					background: getColorWithOpacity(theme.palette.button.primary),
+					color: theme.palette.primary.contrastText
+				},
+				"&:hover": {
+					background: getColorWithOpacity(theme.palette.button.primary)
 				}
 			},
 			secondary: {
 				background: theme.palette.button.secondary,
 				color: theme.palette.primary.contrastText,
 				"&$disabled": {
-					background: getDisabledBgColor(theme.palette.button.secondary)
+					background: getColorWithOpacity(theme.palette.button.secondary),
+					color: theme.palette.primary.contrastText
+				},
+				"&:hover": {
+					background: getColorWithOpacity(theme.palette.button.secondary)
 				}
 			},
 			outline: {
 				color: theme.palette.button.secondary,
 				border: `2px solid ${theme.palette.button.secondary}`,
 				fontWeight: "500",
 				"&$disabled": {
-					background: getDisabledBgColor(theme.palette.button.secondary)
+					background: "#d1d1d160",
+					borderColor: "#b1b1b160"
+				},
+				"&:hover": {
+					background: getColorWithOpacity("#ccc")
 				}
 			},
 			icon: {
-				padding: 0
+				padding: 0,
+				"&$disabled": {
+					background: "#d1d1d160"
+				}
 			}
 		}
 	})
 
 	const classes = useStyles()
 	return (
-		<ButtonBase
+		<Button
 			{...rest}
+			disabled={disabled}
 			className={clsx(classes.common, classes[btnType], {
 				[classes.disabled]: disabled
 			})}
 		>
 			{children}
-		</ButtonBase>
+		</Button>
 	)
 }
 

src/components/DepositForm.js

@@ -570,7 +570,6 @@ export default function DepositForm({
 								disabled={
 									!confirmed || !!amountErr || !activePool || !!selectErr
 								}
-								disabledWithOpacity
 								color="primary"
 								btnType="primary"
 								variant="contained"

src/components/Deposits.js

@@ -561,27 +561,6 @@ export default function Deposits() {
 		// }
 
 		let loadedDeposits = [...deposits]
-		if (loyaltyPoolStats.loaded) {
-			// const disabledDepositsMsg = !chosenWalletType.name ?
-			// 	'Connect wallet' :
-			// 	(loyaltyPoolStats.poolTotalStaked.gte(loyaltyPoolStats.poolDepositsLimit) ?
-			// 		'Pool deposits limit reached' : ''
-			// 	)
-			const disabledWithdrawsMsg = disableActionsMsg
-			const withdrawsMsg = t("eventTypes.withdraw")
-
-			const loyaltyPoolDeposit = getLoyaltyPoolDeposit({
-				classes,
-				t,
-				stats,
-				disabledDepositsMsg: disableDepositsMsg,
-				disabledWithdrawsMsg,
-				depositsMsg: depositsMsg,
-				withdrawsMsg: withdrawsMsg,
-				hasExternalStakingTokenTransfers: hasExternalStakingTokenTransfersLP
-			})
-			loadedDeposits = updateDeposits(loadedDeposits, loyaltyPoolDeposit)
-		}
 
 		if (tomStakingV5PoolStats.loaded) {
 			const disableDepositsMsg = disableActionsMsg
@@ -612,6 +591,28 @@ export default function Deposits() {
 			loadedDeposits = updateDeposits(loadedDeposits, stakingPoolDeposit)
 		}
 
+		if (loyaltyPoolStats.loaded) {
+			// const disabledDepositsMsg = !chosenWalletType.name ?
+			// 	'Connect wallet' :
+			// 	(loyaltyPoolStats.poolTotalStaked.gte(loyaltyPoolStats.poolDepositsLimit) ?
+			// 		'Pool deposits limit reached' : ''
+			// 	)
+			const disabledWithdrawsMsg = disableActionsMsg
+			const withdrawsMsg = t("eventTypes.withdraw")
+
+			const loyaltyPoolDeposit = getLoyaltyPoolDeposit({
+				classes,
+				t,
+				stats,
+				disabledDepositsMsg: disableDepositsMsg,
+				disabledWithdrawsMsg,
+				depositsMsg: depositsMsg,
+				withdrawsMsg: withdrawsMsg,
+				hasExternalStakingTokenTransfers: hasExternalStakingTokenTransfersLP
+			})
+			loadedDeposits = updateDeposits(loadedDeposits, loyaltyPoolDeposit)
+		}
+
 		setDeposits(loadedDeposits)
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps

src/components/Pools.js

@@ -145,8 +145,12 @@ const Pools = () => {
 							})
 						]}
 						loading={!loyaltyPoolStats.loaded}
-						disabled={!canStake}
-						disabledInfo={t("pools.connectWalletToDeposit")}
+						disabled
+						disabledInfo={
+							!canStake
+								? t("pools.connectWalletToDeposit")
+								: t("pools.loyaltyPoolDisabledInfo")
+						}
 						lockupPeriodTitle={t("common.unbondPeriod")}
 						lockupPeriodInfo={t("common.noUnbondPeriod")}
 						lockupPeriod={t("common.noUnbondPeriod")}
@@ -170,9 +174,9 @@ const Pools = () => {
 								title={t("common.addNewDeposit")}
 								btnLabel={t("common.deposit")}
 								color="secondary"
+								disabled
 								size="large"
 								variant="contained"
-								disabled={!canStake}
 								depositPool={LOYALTY_POOL.id}
 								actionType={DEPOSIT_ACTION_TYPES.deposit}
 							/>

src/components/Root.js

@@ -348,7 +348,7 @@ export default function Root() {
 									severity="info"
 									action={
 										<CustomButton
-											variant="contained"
+											btnType="primary"
 											radius={false}
 											onClick={onIdleDialogAction}
 										>

src/components/SideNav.js

@@ -11,16 +11,16 @@ import {
 	alpha
 } from "@material-ui/core"
 import clsx from "clsx"
-// import Anchor from "./Anchor"
+import Anchor from "./Anchor"
 import logo from "./../resources/adex_staking.svg"
 import { makeStyles } from "@material-ui/core/styles"
 import { useLocation } from "react-router-dom"
-// import packageJson from "./../../package.json"
-// import { ADDR_ADX } from "./../helpers/constants"
+import packageJson from "./../../package.json"
+import { ADDR_ADX } from "./../helpers/constants"
 import WithRouterLink from "./WithRouterLink"
 import UserData from "./UserData"
 import MigrationBtn from "./MigrationBtn"
-// import { HomeSharp as HomeIcon } from "@material-ui/icons"
+import { HomeSharp as HomeIcon } from "@material-ui/icons"
 import { ReactComponent as StakingIcon } from "./../resources/staked-ic.svg"
 import { ReactComponent as GiftIcon } from "./../resources/gift-orange-ic.svg"
 // import { ReactComponent as StatsIcon } from "./../resources/stats-ic.svg"
@@ -330,8 +330,8 @@ function SideNav({
 						</RRListItem> */}
 					</List>
 				</Box>
-				{/* <Box>
-					<RRListItem
+				<Box>
+					{/* <RRListItem
 						id="side-nav-link-staking-landing-page"
 						button
 						className={clsx(classes.listItem)}
@@ -350,8 +350,8 @@ function SideNav({
 						</ListItemIcon>
 						<ListItemText primary={t("Home page")} />
 					</RRListItem>
-					<Divider />
-					<ListItem>
+					<Divider /> */}
+					<ListItem className={classes.listItem}>
 						<Box>
 							<div>
 								<small>
@@ -399,7 +399,7 @@ function SideNav({
 							</div>
 						</Box>
 					</ListItem>
-				</Box> */}
+				</Box>
 			</Box>
 		</Box>
 	)