ui bug fixes, staking balance fix

ampleforth · Dec 15, 2024 · cdd9e63 · cdd9e63
1 parent 728bea6
commit cdd9e63
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 46 deletions.
diff --git a/frontend/.yarn/install-state.gz b/frontend/.yarn/install-state.gz
diff --git a/frontend/craco.config.js b/frontend/craco.config.js
@@ -11,7 +11,13 @@ module.exports = {
     configure: (webpackConfig) => {
       webpackConfig.module.rules.push({
         test: /\.js$/,
-        include: [path.resolve(__dirname, 'node_modules/@web3-onboard'), path.resolve(__dirname, 'node_modules/viem')], // Include @web3-onboard and viem packages
+        include: [
+          path.resolve(__dirname, 'node_modules/@web3-onboard/core'),
+          path.resolve(__dirname, 'node_modules/@web3-onboard/injected-wallets'),
+          path.resolve(__dirname, 'node_modules/@web3-onboard/wagmi'),
+          path.resolve(__dirname, 'node_modules/@wagmi'),
+          path.resolve(__dirname, 'node_modules/viem'),
+        ],
         use: {
           loader: 'babel-loader',
           options: {

diff --git a/frontend/package.json b/frontend/package.json
@@ -6,7 +6,7 @@
     "@ampleforthorg/sdk": "1.0.33",
     "@apollo/client": "^3.3.16",
     "@craco/craco": "^6.1.2",
-    "@headlessui/react": "^1.4.1",
+    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "v1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -15,10 +15,10 @@ import { GeyserFirstContainer } from 'components/GeyserFirst/GeyserFirstContaine
 function App() {
   return (
     <Web3Provider>
-      <WalletContextProvider>
-        <SubgraphProvider>
-          <GeyserContextProvider>
-            <VaultContextProvider>
+      <SubgraphProvider>
+        <GeyserContextProvider>
+          <VaultContextProvider>
+            <WalletContextProvider>
               <StatsContextProvider>
                 <Router>
                   <Header />
@@ -46,10 +46,10 @@ function App() {
                   </Routes>
                 </Router>
               </StatsContextProvider>
-            </VaultContextProvider>
-          </GeyserContextProvider>
-        </SubgraphProvider>
-      </WalletContextProvider>
+            </WalletContextProvider>
+          </VaultContextProvider>
+        </GeyserContextProvider>
+      </SubgraphProvider>
     </Web3Provider>
   )
 }

diff --git a/frontend/src/components/GeyserFirst/EstimatedRewards.tsx b/frontend/src/components/GeyserFirst/EstimatedRewards.tsx
@@ -34,26 +34,39 @@ export const EstimatedRewards: React.FC<Props> = ({ parsedUserInput }) => {
   } = useContext(StatsContext)
 
   useEffect(() => {
+    let isMounted = true
     setIsCalculating(true)
     const debounceTimer = setTimeout(async () => {
-      const aggregateDepositUSD = new BigNumber(parsedUserInput.toString())
-        .div(10 ** stakingTokenDecimals)
-        .plus(currentStake)
-        .times(stakingTokenPrice)
-      const isZero = aggregateDepositUSD.eq('0')
-      const newRewards = isZero ? 0.0 : await computeRewardsFromAdditionalStakes(parsedUserInput)
-      const newDeposits = isZero ? 0.0 : aggregateDepositUSD.toNumber()
-      setRewards(newRewards)
-      setDeposits(newDeposits)
-      setIsCalculating(false)
+      try {
+        const aggregateDepositUSD = new BigNumber(parsedUserInput.toString())
+          .div(10 ** stakingTokenDecimals)
+          .plus(currentStake)
+          .times(stakingTokenPrice)
+        const isZero = aggregateDepositUSD.eq('0')
+        const newRewards = isZero ? 0.0 : await computeRewardsFromAdditionalStakes(parsedUserInput)
+        const newDeposits = isZero ? 0.0 : aggregateDepositUSD.toNumber()
+
+        if (isMounted) {
+          setRewards(newRewards)
+          setDeposits(newDeposits)
+          setIsCalculating(false)
+        }
+      } catch (error) {
+        if (isMounted) {
+          setIsCalculating(false)
+        }
+        console.error('Error calculating rewards:', error)
+      }
     }, 500)
 
     return () => {
+      isMounted = false
       clearTimeout(debounceTimer)
     }
   }, [parsedUserInput, computeRewardsFromAdditionalStakes, currentStake, stakingTokenPrice, stakingTokenDecimals])
 
   const geyserRewardsUSD = rewards * rewardTokenPrice
+
   return (
     <EstimatedRewardsContainer>
       <ColoredDiv />

diff --git a/frontend/src/components/GeyserFirst/GeyserStakeView.tsx b/frontend/src/components/GeyserFirst/GeyserStakeView.tsx
@@ -67,23 +67,29 @@ export const GeyserStakeView = () => {
     setParsedUserInput(BigNumber.from('0'))
   }
 
+  const setDefaultInputAmount = () => {
+    if (stakingTokenInfo.price > 0) {
+      const initialStakeAmountUSD = 1000
+      const stakeAmt = Math.max(initialStakeAmountUSD / stakingTokenInfo.price, 0.000001)
+      const stakeAmtFP = parseUnits(stakeAmt.toFixed(stakingTokenInfo.decimals), stakingTokenInfo.decimals)
+      setUserInput(stakeAmt)
+      setParsedUserInput(BigNumber.from(stakeAmtFP))
+    }
+  }
+
   useEffect(() => {
     refreshInputAmount()
-    if (geyserAction === GeyserAction.STAKE && stakingTokenInfo.price > 0) {
-      if (currentStakeAmount.eq(0)) {
-        if (stakableAmount.gt(0)) {
-          setUserInput(formatUnits(stakableAmount, stakingTokenDecimals))
-          setParsedUserInput(stakableAmount)
-        } else {
-          const initialStakeAmountUSD = 1000
-          const stakeAmt = Math.max(initialStakeAmountUSD / stakingTokenInfo.price, 0.000001)
-          const stakeAmtFP = parseUnits(stakeAmt.toFixed(stakingTokenInfo.decimals), stakingTokenInfo.decimals)
-          setUserInput(stakeAmt)
-          setParsedUserInput(BigNumber.from(stakeAmtFP))
-        }
+    if (geyserAction === GeyserAction.STAKE) {
+      if (!address) {
+        setDefaultInputAmount()
+      } else if (currentStakeAmount.eq(0) && stakableAmount.eq(0)) {
+        setDefaultInputAmount()
+      } else if (currentStakeAmount.eq(0) && stakableAmount.gt(0)) {
+        setUserInput(formatUnits(stakableAmount, stakingTokenDecimals))
+        setParsedUserInput(stakableAmount)
       }
     }
-  }, [geyserAction, stakingTokenBalance, currentStakeable])
+  }, [address, geyserAction, stakingTokenBalance, currentStakeable])
 
   const handleGeyserInteraction = () => {
     if (geyserAction === GeyserAction.STAKE) {

diff --git a/frontend/src/components/GeyserFirst/UnstakeSummary.tsx b/frontend/src/components/GeyserFirst/UnstakeSummary.tsx
@@ -33,15 +33,25 @@ export const UnstakeSummary: React.FC<Props> = ({ userInput, parsedUserInput })
   const rewardUSD = rewardAmount * rewardTokenPrice + bonusRewards.reduce((m, b) => m + rewardsShare * b.value, 0)
 
   useEffect(() => {
+    let isMounted = true
     ;(async () => {
       try {
-        setRewardAmount(await computeRewardsFromUnstake(parsedUserInput))
-        setRewardsShare(await computeRewardsShareFromUnstake(parsedUserInput))
+        const computedRewardAmount = await computeRewardsFromUnstake(parsedUserInput)
+        const computedRewardsShare = await computeRewardsShareFromUnstake(parsedUserInput)
+        if (isMounted) {
+          setRewardAmount(computedRewardAmount)
+          setRewardsShare(computedRewardsShare)
+        }
       } catch (e) {
-        console.log('Error: user input higher than user stake')
+        if (isMounted) {
+          console.log('Error: user input higher than user stake')
+        }
       }
     })()
-  }, [parsedUserInput])
+    return () => {
+      isMounted = false
+    }
+  }, [parsedUserInput, computeRewardsFromUnstake, computeRewardsShareFromUnstake])
 
   return (
     <Container>

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -104,7 +104,9 @@ const RightContainer = styled.div`
   ${tw`ml-0 order-3 w-4/12`}
 `
 
-const HeaderTabItem = styled(Tab)<{ isSelected: boolean }>`
+const HeaderTabItem = styled(Tab).withConfig({
+  shouldForwardProp: (prop) => prop !== 'isSelected',
+})<{ isSelected: boolean }>`
   ${tw`font-normal tracking-wider px-4 py-2 text-center cursor-pointer`}
   ${({ isSelected }) => (isSelected ? tw`text-black font-bold` : tw`text-gray hover:text-black`)};
   ${({ isSelected }) => isSelected && `background-color: #f9f9f9;`}

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
@@ -99,7 +99,7 @@ export const Home = () => {
                 </TableCell>
                 <DataCell>{g.tvl > 0 ? `${safeNumeral(g.tvl, '$0,0')}` : 'N/A'}</DataCell>
                 <DataCell>{g.rewards > 0 ? `${safeNumeral(g.rewards, '$0,0')}` : 'N/A'}</DataCell>
-                <ApyCell>{g.apy > 0 ? `>${safeNumeral(g.apy, '0.00%')}` : 'N/A'}</ApyCell>
+                <ApyCell>{g.apy > 0 ? `~${safeNumeral(g.apy, '0.00%')}` : 'N/A'}</ApyCell>
               </BodyRow>
             ))}
           </tbody>

diff --git a/frontend/src/context/StatsContext.tsx b/frontend/src/context/StatsContext.tsx
@@ -50,7 +50,7 @@ export const StatsContextProvider: React.FC = ({ children }) => {
   const [geyserStats, setGeyserStats] = useState<GeyserStats>(defaultGeyserStats())
   const [vaultStats, setVaultStats] = useState<VaultStats>(defaultVaultStats())
 
-  const { signer, provider } = useContext(Web3Context)
+  const { signer, provider, validNetwork } = useContext(Web3Context)
   const { selectedGeyserInfo, allTokensInfos } = useContext(GeyserContext)
   const { selectedVault, currentLock } = useContext(VaultContext)
 
@@ -179,7 +179,7 @@ export const StatsContextProvider: React.FC = ({ children }) => {
     ;(async () => {
       try {
         const { geyser: selectedGeyser, stakingTokenInfo, rewardTokenInfo } = selectedGeyserInfo
-        if (selectedGeyser && stakingTokenInfo.address && rewardTokenInfo.address) {
+        if (validNetwork && selectedGeyser && stakingTokenInfo.address && rewardTokenInfo.address) {
           if (mounted) {
             await refreshStats()
           }

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3498,13 +3498,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@headlessui/react@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "@headlessui/react@npm:1.4.1"
+"@headlessui/react@npm:^1.7.18":
+  version: 1.7.19
+  resolution: "@headlessui/react@npm:1.7.19"
+  dependencies:
+    "@tanstack/react-virtual": ^3.0.0-beta.60
+    client-only: ^0.0.1
   peerDependencies:
     react: ^16 || ^17 || ^18
     react-dom: ^16 || ^17 || ^18
-  checksum: e036941e31b02a17e8c27b018d40cced1e7165ec85ce00cddf74884349e86cb7ef75e3c645d7d0f133f63dfbac97ad4a5765d996db3b8f3cc4a678c84402ad6e
+  checksum: 2a343a5fcf1f45e870cc94613231b89a8da78114001ffafa4751a0eceae7569ff9237aff1f2aedfa6f6e53ee3bb9ba5e5d19ebf1878fee3ff4f3c733fddc1087
   languageName: node
   linkType: hard
 
@@ -5353,6 +5356,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-virtual@npm:^3.0.0-beta.60":
+  version: 3.11.1
+  resolution: "@tanstack/react-virtual@npm:3.11.1"
+  dependencies:
+    "@tanstack/virtual-core": 3.10.9
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: ccc525e048ebf48470bcc3b89a3ea652d7d92abf372f269ae0e3bd7c21a6724971e56b65da3457b481498298e6cb788fbaf04b0a52ce0e7aff2df4f254b3c5fe
+  languageName: node
+  linkType: hard
+
+"@tanstack/virtual-core@npm:3.10.9":
+  version: 3.10.9
+  resolution: "@tanstack/virtual-core@npm:3.10.9"
+  checksum: df1c673040e3700ba12774ef1fec775f84342e80fb5f1586096a1ed347ee9d35b6db6829e665fed86fa3f08e86235a68bbd331fd5aedec4314c2a565384199ba
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^7.28.1":
   version: 7.31.0
   resolution: "@testing-library/dom@npm:7.31.0"
@@ -9820,6 +9842,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"client-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
+  languageName: node
+  linkType: hard
+
 "clipboardy@npm:3.0.0":
   version: 3.0.0
   resolution: "clipboardy@npm:3.0.0"
@@ -13485,7 +13514,7 @@ __metadata:
     "@apollo/client": ^3.3.16
     "@babel/plugin-proposal-numeric-separator": ^7.18.6
     "@craco/craco": ^6.1.2
-    "@headlessui/react": ^1.4.1
+    "@headlessui/react": ^1.7.18
     "@heroicons/react": v1
     "@testing-library/jest-dom": ^5.11.4
     "@testing-library/react": ^11.1.0