Merge pull request #269 from ampleforth/wallet-connect

Wallet connect

Author: nms-7

frontend/.yarn/install-state.gz

@@ -2,7 +2,7 @@ const path = require('path')
 
 module.exports = {
   style: {
-    postcss: {
+    postcssOptions: {
       plugins: [require('tailwindcss'), require('autoprefixer')],
     },
   },

frontend/craco.config.js

@@ -32,7 +32,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.6.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "react-spring": "^9.2.3",
     "string_decoder": "^1.3.0",
     "styled-components": "^5.3.0",

frontend/package.json

@@ -37,7 +37,7 @@ function App() {
                       path="/vault"
                       element={
                         <div>
-                          <DropdownsContainer showVaults />
+                          <DropdownsContainer showVaults showGeysers={false} />
                           <VaultFirstContainer />
                         </div>
                       }

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useRef } from 'react'
 import * as THREE from 'assets/three.module'
 
 const DepositInfoGraphic = () => {
-  const containerRef = useRef(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     let camera
     let scene

frontend/src/components/GeyserFirst/DepositInfoGraphic.tsx

@@ -151,13 +151,13 @@ export const GeyserStakeView = () => {
         const tx = await withdrawUnlockedFromVault(rewardTokenAddress)
         if (tx) {
           const { response, amount } = tx
-          setActualRewardsFromUnstake(amount)
+          // setActualRewardsFromUnstake(amount)
           return response
         }
       }
     }
     if (receipt && rewardAmountClaimedOnUnstake) {
-      setActualRewardsFromUnstake(await rewardAmountClaimedOnUnstake(receipt))
+      // setActualRewardsFromUnstake(await rewardAmountClaimedOnUnstake(receipt))
     }
     return undefined
   }
@@ -187,7 +187,7 @@ export const GeyserStakeView = () => {
           decimals={stakingTokenDecimals}
           symbol={stakingTokenSymbol}
           isStakingAction
-          poolAddress={poolAddress}
+          poolAddress={poolAddress ?? ''}
         />
         <PositiveInput
           placeholder="Enter amount"
@@ -202,7 +202,7 @@ export const GeyserStakeView = () => {
         {!ready && <ConnectWalletWarning onClick={() => connectWallet()} />}
         {ready && parsedUserInput.gt(0) && (
           <StakeWarning
-            poolAddress={poolAddress}
+            poolAddress={poolAddress ?? ''}
             balance={stakableAmount.sub(parsedUserInput)}
             staked={currentStakeAmount}
             otherActiveLock={otherActiveLock}
@@ -238,7 +238,7 @@ export const GeyserStakeView = () => {
           decimals={stakingTokenDecimals}
           symbol={stakingTokenSymbol}
           isStakingAction={false}
-          poolAddress={poolAddress}
+          poolAddress={poolAddress ?? ''}
         />
         <PositiveInput
           placeholder="Enter amount"

frontend/src/components/GeyserFirst/GeyserStakeView.tsx

@@ -10,7 +10,7 @@ import { DAY_IN_SEC, TOTAL_REWARDS_MSG } from '../../constants'
 
 export const GeyserStats = () => {
   const {
-    geyserStats: { duration, totalDepositVal, totalRewards, totalRewardsVal },
+    geyserStats: { duration, totalDepositVal, totalRewards, totalRewardVal },
   } = useContext(StatsContext)
   const {
     selectedGeyserInfo: {
@@ -41,7 +41,7 @@ export const GeyserStats = () => {
         <GeyserStatsBox
           containerClassName="w-full"
           name="Total Rewards"
-          value={totalRewardsVal}
+          value={totalRewardVal}
           units="USD"
           interpolate={(val) => safeNumeral(val, '0,0')}
           tooltipMessage={{
@@ -53,12 +53,12 @@ export const GeyserStats = () => {
                   rows={[
                     {
                       label: `${rewardTokenSymbol} (${safeNumeral(totalRewards, '0,0')})`,
-                      value: `${safeNumeral(totalRewardsVal, '0,0.00')} USD`,
+                      value: `${safeNumeral(totalRewardVal, '0,0.00')} USD`,
                     },
                     { label: 'bonus (0)', value: `${safeNumeral(0, '0,0.00')} USD` },
                   ]}
                   totalLabel="Total"
-                  totalValue={`${safeNumeral(totalRewardsVal, '0,0.00')} USD`}
+                  totalValue={`${safeNumeral(totalRewardVal, '0,0.00')} USD`}
                 />
               </div>
             ),

frontend/src/components/GeyserFirst/GeyserStats.tsx

@@ -29,13 +29,14 @@ export const MyStats = () => {
   const [lpAPY, setLPAPY] = useState<number>(0)
   const [geyserAPY, setGeyserAPY] = useState<number>(0)
   const [finalAPY, setFinalAPY] = useState<number>(0)
-  useEffect(async () => {
+  useEffect(() => {
+    (async () => {
     if (!selectedGeyser) {
       return
     }
     const config = getGeyserConfig(selectedGeyser.id)
-    const lpAPYNew = (stakeAPYs.lp && stakeAPYs.lp[config.lpRef]) || 0
-    const geyserAPYGlobal = stakeAPYs.geysers && stakeAPYs.geysers[config.slug]
+    const lpAPYNew = (stakeAPYs.lp && config && config.lpRef && stakeAPYs.lp[config.lpRef]) || 0
+    const geyserAPYGlobal = stakeAPYs.geysers && config && stakeAPYs.geysers[config.slug]
     // const geyserAPYNew = ready ? apy : geyserAPYGlobal || apy
     // NOTE: just showing the global APY as a guideline for most users.
     let geyserAPYNew = geyserAPYGlobal || apy
@@ -45,7 +46,7 @@ export const MyStats = () => {
     setLPAPY(lpAPYNew)
     setGeyserAPY(geyserAPYNew)
     setFinalAPY(Math.min(geyserAPYNew + lpAPYNew, 100000))
-  }, [selectedGeyser, apy, duration])
+  })()}, [selectedGeyser, apy, duration])
 
   // TODO: handle bonus tokens
   const baseRewards = currentReward * rewardTokenPrice

frontend/src/components/GeyserFirst/MyStats.tsx

@@ -11,7 +11,7 @@ interface Props {
 }
 
 export const StakeWarning: React.FC<Props> = ({ poolAddress, balance, staked, otherActiveLock }) => {
-  const renderStakeWarning = (message: string, buttonLabel: string, url: string, newTab: bool) => (
+  const renderStakeWarning = (message: string, buttonLabel: string, url: string, newTab: boolean) => (
     <StakeWarningContainer>
       <ColoredDiv />
       <Content>

frontend/src/components/GeyserFirst/StakeWarning.tsx

@@ -37,7 +37,7 @@ export const UnstakeSummary: React.FC<Props> = ({ userInput, parsedUserInput })
         const computedRewardsShare = await computeRewardsShareFromUnstake(parsedUserInput)
         if (isMounted) {
           setRewardAmount(computedRewardAmount)
-          setRewardsShare(computedRewardsShare)
+          // setRewardsShare(computedRewardsShare)
         }
       } catch (e) {
         if (isMounted) {