Yield farming user deposit UI fix

src/App.tsx

@@ -82,15 +82,15 @@ const extendConsole = () => {
  window.console = {};
  }
  if (window.console[level] === 'undefined' || !window.console[level] || window.console[level] === null) {
- window.console[level] = function () {};
+ window.console[level] = function () { };
  }
  if (enabled) {
  if (disabledConsoles[level]) {
  window.console[level] = disabledConsoles[level];
  }
  } else {
  disabledConsoles[level] = window.console[level];
- window.console[level] = function () {};
+ window.console[level] = function () { };
  }
  };
  } catch (e) {
@@ -376,6 +376,8 @@ const HeaderContainer = styled.header`
 
 const ParentContainer = styled.div`
  flex-wrap: wrap;
+ position: relative;
+ z-index:0;
  display: flex;
  flex-direction: row;
  justify-content: center;

src/components/YieldFarmChainError.tsx

@@ -1,24 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Close from 'assets/chat/group-chat/close.svg?react';
 import { ButtonV2, ItemHV2, ItemVV2 } from './reusables/SharedStylingV2';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { ethers } from 'ethers';
 import { appConfig } from 'config/index.js';
 import { useAccount } from 'hooks';
 
-const YieldFarmChainError = () => {
+const YieldFarmChainError = ({ onClose }) => {
  const { account, chainId: currentChainId, switchChain } = useAccount();
 
+ const theme = useTheme();
+
  const handleChainChange = () => {
  const chainIdToPass = appConfig.allowedNetworks[0];
 
  if (currentChainId !== 1 && currentChainId !== 11155111) {
- console.debug('Current Chain ID ', currentChainId);
- console.debug('Chain Id to pass', chainIdToPass);
+ console.info('Current Chain ID ', currentChainId);
+ console.info('Chain Id to pass', chainIdToPass);
  switchChain(appConfig.coreContractChain);
  }
  };
 
+ useEffect(() => {
+ if (currentChainId === appConfig.coreContractChain || currentChainId === appConfig.mainnetCoreContractChain) {
+ onClose();
+ }
+ }, [currentChainId])
+
+
  return (
  <Container>
  <Close style={{ cursor: 'pointer', alignSelf: 'end' }} />
@@ -56,10 +65,11 @@ const BodyContainer = styled(ItemVV2)`
 const PrimaryText = styled.div`
  font-size: 28px;
  font-weight: 500;
+ color: ${(props) => props.theme.stakingSecondaryText};
 `;
 
 const SecondaryText = styled.div`
- color: #657795;
+ color: ${(props) => props.theme.activeButtonText};
  text-align: center;
  font-size: 18px;
  font-weight: 400;

src/helpers/pushStaking/src/index.ts

@@ -1,18 +1,15 @@
-import { ethers } from "ethers";
-import { PushCoreV2 } from "../types";
-import { CoreV2Reward } from "./CoreV2Reward";
-import { Helpers } from "./helpers";
-import { Constants } from "./constants";
+import { ethers } from 'ethers';
+import { PushCoreV2 } from '../types';
+import { CoreV2Reward } from './CoreV2Reward';
+import { Helpers } from './helpers';
+import { Constants } from './constants';
 
 export const getUserPushStakingInfo = async (
  provider: ethers.providers.JsonRpcProvider,
  userAddress: string,
- contractAddress:string
+ contractAddress: string
 ) => {
- const coreV2Contract = Helpers.getCoreV2Contract(
- provider,
- contractAddress
- );
+ const coreV2Contract = Helpers.getCoreV2Contract(provider, contractAddress);
 
  const avilableRewardHelper = new CoreV2Reward(coreV2Contract, userAddress);
  const userRewardInfoHelper = new CoreV2Reward(coreV2Contract, userAddress);

src/primaries/Profile.tsx

@@ -51,21 +51,21 @@ const Profile = ({ isDarkMode }) => {
  id: 'walletAddress',
  value: account,
  title: account,
- function: () => {},
+ function: () => { },
  invertedIcon: './copy.svg',
  },
  {
  id: 'userSettings',
  value: '',
  title: 'Settings',
- function: () => {},
+ function: () => { },
  to: APP_PATHS.UserSettings,
  invertedIcon: 'svg/setting.svg',
  },
  {
  id: 'prodDapp',
  value: '',
- function: () => {},
+ function: () => { },
  link: `https://${envUtil.prod}`,
  title: 'Production dapp',
  invertedIcon: './prod.svg',
@@ -89,7 +89,7 @@ const Profile = ({ isDarkMode }) => {
  setShowDropdown(false);
  });
 
- const ConnectWallet = () => {
+ const handleConnectWallet = () => {
  connect();
  };
 
@@ -103,7 +103,7 @@ const Profile = ({ isDarkMode }) => {
  bg="linear-gradient(87.17deg, #B6A0F5 0%, #F46EF7 57.29%, #FF95D5 100%)"
  color="#FFF"
  isDarkMode={isDarkMode}
- onClick={() => ConnectWallet()}
+ onClick={() => handleConnectWallet()}
  >
  Connect Wallet
  </Wallet>
@@ -169,7 +169,7 @@ const Profile = ({ isDarkMode }) => {
  bg="linear-gradient(87.17deg, #B6A0F5 0%, #F46EF7 57.29%, #FF95D5 100%)"
  color="#FFF"
  isDarkMode={isDarkMode}
- onClick={() => ConnectWallet()}
+ onClick={() => handleConnectWallet()}
  >
  Connect Wallet
  </Wallet>

src/sections/yield/NewYieldFarming.tsx

@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 
 // External Packages
@@ -16,18 +16,17 @@ import YieldPushFeeV3 from 'components/yield/YieldPushFeeV3';
 import { useAccount } from 'hooks';
 
 // Internal Configs
-import { abis, addresses } from 'config/index.js';
-import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
-import StepsTransactionModal from 'components/StepsTransactionModal';
+import { abis, addresses, appConfig } from 'config/index.js';
+import { GlobalContext } from 'contexts/GlobalContext';
 
 const NewYieldFarming = ({ setActiveTab }) => {
- const { provider, account } = useAccount();
+ const { provider, account, chainId } = useAccount();
 
- const [pushToken, setPushToken] = useState(null);
- const [staking, setStaking] = useState(null);
- const [yieldFarmingLP, setYieldFarmingLP] = useState(null);
- const [pushCoreV2, setPushCoreV2] = useState(null);
- const [uniswapV2Router02Instance, setUniswapV2Router02Instance] = useState(null);
+ const [pushToken, setPushToken] = useState<ethers.Contract>();
+ const [staking, setStaking] = useState<ethers.Contract>();
+ const [yieldFarmingLP, setYieldFarmingLP] = useState<ethers.Contract>();
+ const [pushCoreV2, setPushCoreV2] = useState<ethers.Contract>();
+ const [uniswapV2Router02Instance, setUniswapV2Router02Instance] = useState<ethers.Contract>();
 
  const [poolStats, setPoolStats] = useState(null);
  const [lpPoolStats, setLpPoolStats] = useState(null);
@@ -37,13 +36,19 @@ const NewYieldFarming = ({ setActiveTab }) => {
 
  const library = provider?.getSigner(account);
 
+ const getPoolStats = React.useCallback(async () => {
+ const poolStats = await YieldFarmingDataStoreV2.getInstance().getPoolStats(provider);
+
+ setPoolStats({ ...poolStats });
+ }, [staking, pushToken, pushCoreV2, yieldFarmingLP, uniswapV2Router02Instance, provider]);
+
+
  const getLpPoolStats = React.useCallback(async () => {
  const poolStats = await YieldFarmingDataStoreV2.getInstance().getPoolStats(provider);
  const lpPoolStats = await YieldFarmingDataStoreV2.getInstance().getLPPoolStats(poolStats);
 
- setPoolStats({ ...poolStats });
  setLpPoolStats({ ...lpPoolStats });
- }, [staking, pushToken, pushCoreV2, yieldFarmingLP, uniswapV2Router02Instance]);
+ }, [staking, pushToken, pushCoreV2, yieldFarmingLP, uniswapV2Router02Instance, provider]);
 
  const getPUSHPoolStats = React.useCallback(async () => {
  // const pushPoolStats = await YieldFarmingDataStoreV2.getInstance().getPUSHPoolStats(provider);
@@ -54,17 +59,22 @@ const NewYieldFarming = ({ setActiveTab }) => {
  const userDataLP = await YieldFarmingDataStoreV2.getInstance().getUserDataLP();
 
  setUserDataLP({ ...userDataLP });
- }, [yieldFarmingLP]);
+ }, [staking, pushToken, pushCoreV2, yieldFarmingLP, uniswapV2Router02Instance]);
 
  const getUserDataPush = React.useCallback(async () => {
  const [pushPoolStats, userDataPush] = await YieldFarmingDataStoreV2.getInstance().getUserDataPUSH(provider);
 
  setPUSHPoolStats({ ...pushPoolStats });
  setUserDataPush({ ...userDataPush });
- }, [staking, pushToken, pushCoreV2, yieldFarmingLP, uniswapV2Router02Instance]);
+ }, [staking, pushToken, pushCoreV2, yieldFarmingLP, uniswapV2Router02Instance, provider]);
 
  //initiate the YieldFarmV2 data store here
  React.useEffect(() => {
+
+ if (chainId !== appConfig.coreContractChain && chainId !== appConfig.mainnetCoreContractChain) {
+ return;
+ }
+
  setLpPoolStats(null);
  setUserDataLP(null);
  setPUSHPoolStats(null);
@@ -98,6 +108,7 @@ const NewYieldFarming = ({ setActiveTab }) => {
  setUniswapV2Router02Instance(uniswapV2Router02Instance);
  }
 
+
  YieldFarmingDataStoreV2.getInstance().init(
  account,
  staking,
@@ -107,11 +118,12 @@ const NewYieldFarming = ({ setActiveTab }) => {
  uniswapV2Router02Instance
  );
 
- getLpPoolStats();
+ getPoolStats();
  getUserDataLP();
+ getLpPoolStats();
  getUserDataPush();
- getPUSHPoolStats();
- }, [account]);
+
+ }, [account, chainId]);
 
  return (
  <>