updated tooltip messages

Author: aalavandhan

frontend/src/components/GeyserFirst/MyStats.tsx

@@ -7,7 +7,7 @@ import { StatsContext } from 'context/StatsContext'
 import { safeNumeral } from 'utils/numeral'
 import TooltipTable from 'components/TooltipTable'
 import { GeyserStatsBox } from './GeyserStatsBox'
-import { GET_APY_STAKE_MSG, GET_REWARD_MULTIPLIER_MSG, CURRENT_REWARDS_MSG } from '../../constants'
+import { GET_APY_STAKE_MSG, GET_APY_WARN_MSG, GET_REWARD_MULTIPLIER_MSG, CURRENT_REWARDS_MSG } from '../../constants'
 
 export const MyStats = () => {
   const { ready } = useContext(Web3Context)
@@ -62,13 +62,14 @@ export const MyStats = () => {
                   {GET_APY_STAKE_MSG()}
                   <TooltipTable
                     rows={[
-                      { label: 'LP yield', value: safeNumeral(lpAPY, '0.00%') },
-                      { label: 'Geyser drip', value: safeNumeral(geyserAPY, '0.00%') },
-                      { label: 'Bonus', value: '0.00%' },
+                      { label: 'LP APY', value: safeNumeral(lpAPY, '0.00%') },
+                      { label: 'Geyser drip rate', value: safeNumeral(geyserAPY, '0.00%') },
+                      // { label: 'Bonus', value: '0.00%' },
                     ]}
                     totalLabel="Combined APY"
                     totalValue={safeNumeral(finalAPY, '0.00%')}
                   />
+                  <ApyWarning>{GET_APY_WARN_MSG()}</ApyWarning>
                 </div>
               ),
             }}
@@ -149,3 +150,7 @@ const GeyserStatsContainer = styled.div`
 const GeyserStatsBoxContainer = styled.div`
   ${tw`flex mt-4 sm:mt-3`}
 `
+
+const ApyWarning = styled.div`
+  ${tw`mt-4 text-xs italic leading-4`}
+`

frontend/src/components/Home.tsx

@@ -12,6 +12,7 @@ import TokenIcons from 'components/TokenIcons'
 import { safeNumeral } from 'utils/numeral'
 import { getGeyserTotalDeposit } from 'utils/stats'
 import { formatUnits } from 'ethers/lib/utils'
+import { getPlatformConfig } from 'config/app'
 
 const nowInSeconds = () => Math.round(Date.now() / 1000)
 
@@ -37,6 +38,7 @@ export const Home = () => {
       const geyserAPY = (stakeAPYs.geysers && stakeAPYs.geysers[config.ref]) || 0
       const apy = lpAPY + geyserAPY
       const programName = extractProgramName(config.name)
+      const platform = getPlatformConfig(config)
 
       let rewards = 0
       if (rewardTokenInfo) {
@@ -60,6 +62,7 @@ export const Home = () => {
         ref: config.ref,
         poolAddress: config.poolAddress,
         poolType,
+        platform,
       }
     })
     .sort((g1, g2) => g2.apy - g1.apy)
@@ -87,9 +90,14 @@ export const Home = () => {
             {geysersToShow.map((g) => (
               <BodyRow key={g.ref} $inactive={!g.active}>
                 <TableCell>
-                  <a href={g.poolAddress} target="_blank" rel="noreferrer">
-                    <TokenIcons tokens={g.stakingTokens} />
-                  </a>
+                  <IconContainer>
+                    <a href={g.poolAddress} target="_blank" rel="noreferrer">
+                      <TokenIcons tokens={g.stakingTokens} />
+                    </a>
+                    <a href={g.platform?.url} target="_blank" rel="noreferrer">
+                      <PlaformName>{g.platform?.name}</PlaformName>
+                    </a>
+                  </IconContainer>
                 </TableCell>
                 <TableCell>
                   <ProgramInfo>
@@ -142,11 +150,20 @@ const TableCell = styled.td`
 `
 
 const DataCell = styled.td`
-  ${tw`text-right pr-8`}
+  ${tw`text-right pr-8 pt-2`}
 `
 
 const ApyCell = styled.td`
-  ${tw`text-right pr-8 font-bold text-md`}
+  ${tw`text-right pr-8 font-bold text-md pt-2`}
+`
+
+const IconContainer = styled.div`
+  ${tw`-mt-3`}
+`
+
+const PlaformName = styled.div`
+  ${tw`cursor-pointer text-black text-xxs uppercase font-bold`}
+  ${tw`hover:underline -mt-2`}
 `
 
 const ProgramInfo = styled.div`

frontend/src/components/VaultFirst/VaultFirstContainer.tsx

@@ -15,7 +15,10 @@ export const VaultFirstContainer = () => {
   const { ready, connectWallet, validNetwork } = useContext(Web3Context)
   const { vaults, loading } = useContext(VaultContext)
   const navigate = useNavigate()
-  if (loading) return <PageLoader />
+
+  if (!ready) {
+    return <ErrorPage message="Wallet not connected" button="connect" onClick={() => connectWallet()} />
+  }
 
   if (ready && validNetwork === false) {
     return <ErrorPage message="Unsupported Network" button="Go back" onClick={() => navigate('/')} />
@@ -25,8 +28,8 @@ export const VaultFirstContainer = () => {
     return <ErrorPage message="Vault not found" button="Go back" onClick={() => navigate('/')} />
   }
 
-  if (!ready) {
-    return <ErrorPage message="Wallet not connected" button="connect" onClick={() => connectWallet()} />
+  if (ready && loading) {
+    return <PageLoader />
   }
 
   return (

frontend/src/constants.ts

@@ -95,7 +95,10 @@ export const AMPL_LAUNCH_DATE = 1561687200
 export const INITIAL_SUPPLY = 50000000
 
 export const GET_APY_STAKE_MSG = () =>
-  'The aggregate staking APY is estimated by combining geyser emissions and fees from liquidity provisioning. The geyser emission rate assumes that you have reached the max multiplier. The aggregated figure does not capture the gains or losses from holding liquidity tokens.'
+  'The aggregate staking APY is an estimate based on two components: fees from liquidity provisioning and rewards from geyser emissions. This figure does not account for potential gains or losses associated with holding liquidity tokens.'
+
+export const GET_APY_WARN_MSG = () =>
+  '1) The LP APY is estimated by annualizing the yield from swap fees generated over the past 30 days. 2) The geyser drip rate assumes that you have reached the max multiplier.'
 
 export const GET_REWARD_MULTIPLIER_MSG = ({ days = '30', multiplier = '3.0' }) =>
   `Stake at-least ${days} days to achieve a ${multiplier}x reward multiplier.`

frontend/src/context/StatsContext.tsx

@@ -140,7 +140,7 @@ export const StatsContextProvider: React.FC = ({ children }) => {
 
   const refreshStats = async () => {
     const { geyser: selectedGeyser, stakingTokenInfo, rewardTokenInfo, bonusTokensInfo } = selectedGeyserInfo
-    if (validNetwork && selectedGeyser && stakingTokenInfo.address && rewardTokenInfo.address) {
+    if (validNetwork && selectedGeyser && stakingTokenInfo?.address && rewardTokenInfo?.address) {
       setGeyserStats(await getGeyserStats(selectedGeyser, stakingTokenInfo, rewardTokenInfo, bonusTokensInfo))
 
       let activeLock = null

frontend/src/context/VaultContext.tsx

@@ -79,11 +79,11 @@ export const VaultContextProvider: React.FC = ({ children }) => {
       : null
 
   useEffect(() => {
-    if (address) {
-      console.log('vault refresh')
-      setVaults([])
-      setSelectedVault(null)
-      setCurrentLock(null)
+    console.log('vault refresh')
+    setVaults([])
+    setSelectedVault(null)
+    setCurrentLock(null)
+    if (ready) {
       getVaults({ variables: { id: address.toLowerCase() } })
     }
   }, [ready, networkId, address, getVaults])
@@ -124,7 +124,7 @@ export const VaultContextProvider: React.FC = ({ children }) => {
         withdrawRewardsFromVault,
         withdrawUnlockedFromVault,
         rewardAmountClaimedOnUnstake,
-        loading: !ready || vaultLoading || geyserLoading,
+        loading: vaultLoading || geyserLoading,
       }}
     >
       {children}

frontend/tailwind.config.js

@@ -76,7 +76,7 @@ module.exports = {
         '120px': '120px',
         '336px': '336px',
         btnsm: '120px',
-        sm: '608px',
+        sm: '638px',
         md: '768px',
         lg: '1024px',
         xl: '1280px',