Yield farming user deposit UI fix

src/App.tsx

@@ -81,15 +81,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) {
@@ -360,6 +360,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 === 1 || currentChainId === 11155111) {
+ 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,29 +1,33 @@
-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);
 
- const [availableRewards, userFeeInfo] = await Promise.all([
+ let totalStaked = coreV2Contract.totalStakedAmount();
+ let claimedR = coreV2Contract.usersRewardsClaimed(userAddress);
+
+ const [availableRewards, userFeeInfo, totalStakedAmount, claimedReward] = await Promise.all([
  avilableRewardHelper.estimateHarvestAll(),
  userRewardInfoHelper.getUserPotentialEpochReward(),
+ totalStaked,
+ claimedR,
  ]);
 
  return {
  availableRewards,
+ totalStakedAmount,
+ claimedReward,
  ...userFeeInfo,
  };
 };

src/primaries/Profile.tsx

@@ -25,7 +25,7 @@ import { AppContextType } from 'types/context';
 
 // Create Header
 const Profile = ({ isDarkMode }) => {
- const { web3NameList,initialisePushSdkReadMode }: AppContextType = useContext(AppContext);
+ const { web3NameList, initialisePushSdkReadMode }: AppContextType = useContext(AppContext);
  const { setReadOnlyWallet, readOnlyWallet, mode, setMode }: GlobalContextType = useContext(GlobalContext);
  const { authError } = useContext(ErrorContext);
  const toggleArrowRef = useRef(null);
@@ -44,7 +44,7 @@ const Profile = ({ isDarkMode }) => {
  // Get theme
  const theme = useTheme();
  const [showDropdown, setShowDropdown] = React.useState<boolean>(false);
- useClickAway(modalRef, dropdownRef, () => showDropdown && setShowDropdown(false));
+ // useClickAway(modalRef, dropdownRef, () => showDropdown && setShowDropdown(false));
 
  const dropdownValues = [
  {
@@ -88,11 +88,11 @@ const Profile = ({ isDarkMode }) => {
  setShowDropdown(false);
  });
 
- const ConnectWallet = ()=>{
+ const ConnectWallet = () => {
  connect();
  }
 
- 
+
  // to create blockies
  return (
  <>
@@ -105,7 +105,7 @@ const Profile = ({ isDarkMode }) => {
  bg="linear-gradient(87.17deg, #B6A0F5 0%, #F46EF7 57.29%, #FF95D5 100%)"
  color='#FFF'
  isDarkMode={isDarkMode}
- onClick={()=>ConnectWallet()}
+ onClick={() => ConnectWallet()}
  >
  Connect Wallet
  </Wallet>
@@ -149,7 +149,7 @@ const Profile = ({ isDarkMode }) => {
  align="flex-start"
  ref={dropdownRef}
  >
- <Dropdown dropdownValues={dropdownValues} setShowDropdown={setShowDropdown}/>
+ <Dropdown dropdownValues={dropdownValues} setShowDropdown={setShowDropdown} />
  </DropdownItem>
  <ItemModal ref={modalRef}>
  <ProfileModal
@@ -168,7 +168,7 @@ const Profile = ({ isDarkMode }) => {
  bg="linear-gradient(87.17deg, #B6A0F5 0%, #F46EF7 57.29%, #FF95D5 100%)"
  color='#FFF'
  isDarkMode={isDarkMode}
- onClick={()=>ConnectWallet()}
+ onClick={() => ConnectWallet()}
  >
  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
@@ -17,17 +17,16 @@ 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 { 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 !== 1 && chainId !== 11155111) {
+ 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 (
  <>