Skip to content

Commit 728bea6

Browse files
aalavandhanaalavandhan
committed
ui bug fixes, and updated geyser apy math
1 parent efd3e9a commit 728bea6

20 files changed

+88
-156
lines changed

‎frontend/src/components/GeyserFirst/EstimatedRewards.tsx‎

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from 'styled-components/macro'
22
import tw from 'twin.macro'
3-
import { useContext, useEffect, useState, useRef } from 'react'
3+
import { useContext, useEffect, useState } from 'react'
44
import { StatsContext } from 'context/StatsContext'
55
import { safeNumeral } from 'utils/numeral'
66
import BigNumber from 'bignumber.js'
@@ -33,42 +33,19 @@ export const EstimatedRewards: React.FC<Props> = ({ parsedUserInput }) => {
3333
vaultStats: { currentStake },
3434
} = useContext(StatsContext)
3535

36-
const cacheRef = useRef<{
37-
[key: string]: { rewards: number; deposits: number }
38-
}>({})
39-
4036
useEffect(() => {
41-
const inputKey = parsedUserInput.toString()
4237
setIsCalculating(true)
43-
4438
const debounceTimer = setTimeout(async () => {
45-
if (cacheRef.current[inputKey]) {
46-
// Use cached results
47-
const { rewards: cachedRewards, deposits: cachedDeposits } = cacheRef.current[inputKey]
48-
setRewards(cachedRewards)
49-
setDeposits(cachedDeposits)
50-
setIsCalculating(false)
51-
} else {
52-
// Compute and store results
53-
const aggregateDepositUSD = new BigNumber(parsedUserInput.toString())
54-
.div(10 ** stakingTokenDecimals)
55-
.plus(currentStake)
56-
.times(stakingTokenPrice)
57-
58-
const isZero = aggregateDepositUSD.eq('0')
59-
60-
const newRewards = isZero ? 0.0 : await computeRewardsFromAdditionalStakes(parsedUserInput)
61-
const newDeposits = isZero ? 0.0 : aggregateDepositUSD.toNumber()
62-
63-
cacheRef.current[inputKey] = {
64-
rewards: newRewards,
65-
deposits: newDeposits,
66-
}
67-
68-
setRewards(newRewards)
69-
setDeposits(newDeposits)
70-
setIsCalculating(false)
71-
}
39+
const aggregateDepositUSD = new BigNumber(parsedUserInput.toString())
40+
.div(10 ** stakingTokenDecimals)
41+
.plus(currentStake)
42+
.times(stakingTokenPrice)
43+
const isZero = aggregateDepositUSD.eq('0')
44+
const newRewards = isZero ? 0.0 : await computeRewardsFromAdditionalStakes(parsedUserInput)
45+
const newDeposits = isZero ? 0.0 : aggregateDepositUSD.toNumber()
46+
setRewards(newRewards)
47+
setDeposits(newDeposits)
48+
setIsCalculating(false)
7249
}, 500)
7350

7451
return () => {

‎frontend/src/components/GeyserFirst/GeyserMultiStatsBox.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import styled from 'styled-components/macro'
33
import tw from 'twin.macro'
44
import { animated } from 'react-spring'
5-
import { ResponsiveSubText, ResponsiveText } from 'styling/styles'
65

76
interface Stat {
87
value: number
@@ -41,18 +40,13 @@ const GeyserStatsBoxContainer = styled.div`
4140
`
4241

4342
const GeyserStatsBoxLabel = styled.span`
44-
${ResponsiveText}
4543
${tw`mb-1 flex font-light`}
4644
`
4745

4846
const GeyserStatsBoxValueContainer = styled.div`
4947
${tw`flex flex-row`}
5048
`
5149

52-
const GeyserStatsBoxValue = styled.span`
53-
${ResponsiveText}
54-
`
50+
const GeyserStatsBoxValue = styled.span``
5551

56-
const GeyserStatsBoxUnits = styled.span`
57-
${ResponsiveSubText}
58-
`
52+
const GeyserStatsBoxUnits = styled.span``

‎frontend/src/components/GeyserFirst/GeyserStakeView.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const GeyserStakeView = () => {
4949
useContext(VaultContext)
5050
const { stakingTokenBalance, underlyingTokenBalance, refreshWalletBalances } = useContext(WalletContext)
5151
const {
52-
refreshVaultStats,
52+
refreshStats,
5353
vaultStats: { currentStakeable },
5454
} = useContext(StatsContext)
5555
const { connectWallet, address } = useContext(Web3Context)
@@ -70,15 +70,17 @@ export const GeyserStakeView = () => {
7070
useEffect(() => {
7171
refreshInputAmount()
7272
if (geyserAction === GeyserAction.STAKE && stakingTokenInfo.price > 0) {
73-
if (stakableAmount.eq(0)) {
74-
const initialStakeAmountUSD = 1000
75-
const stakeAmt = Math.max(initialStakeAmountUSD / stakingTokenInfo.price, 0.000001)
76-
const stakeAmtFP = parseUnits(stakeAmt.toFixed(stakingTokenInfo.decimals), stakingTokenInfo.decimals)
77-
setUserInput(stakeAmt)
78-
setParsedUserInput(BigNumber.from(stakeAmtFP))
79-
} else {
80-
setUserInput(formatUnits(stakableAmount, stakingTokenDecimals))
81-
setParsedUserInput(stakableAmount)
73+
if (currentStakeAmount.eq(0)) {
74+
if (stakableAmount.gt(0)) {
75+
setUserInput(formatUnits(stakableAmount, stakingTokenDecimals))
76+
setParsedUserInput(stakableAmount)
77+
} else {
78+
const initialStakeAmountUSD = 1000
79+
const stakeAmt = Math.max(initialStakeAmountUSD / stakingTokenInfo.price, 0.000001)
80+
const stakeAmtFP = parseUnits(stakeAmt.toFixed(stakingTokenInfo.decimals), stakingTokenInfo.decimals)
81+
setUserInput(stakeAmt)
82+
setParsedUserInput(BigNumber.from(stakeAmtFP))
83+
}
8284
}
8385
}
8486
}, [geyserAction, stakingTokenBalance, currentStakeable])
@@ -111,7 +113,7 @@ export const GeyserStakeView = () => {
111113
const onCloseTxModal = async () => {
112114
setTxModalOpen(false)
113115
refreshInputAmount()
114-
await refreshVaultStats()
116+
await refreshStats()
115117
await refreshWalletBalances()
116118
}
117119

‎frontend/src/components/GeyserFirst/GeyserStats.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useContext } from 'react'
44
import { StatsContext } from 'context/StatsContext'
55
import { GeyserContext } from 'context/GeyserContext'
66
import { safeNumeral } from 'utils/numeral'
7-
import { ResponsiveText } from 'styling/styles'
87
import TooltipTable from 'components/TooltipTable'
98
import { GeyserStatsBox } from './GeyserStatsBox'
109
import { DAY_IN_SEC, TOTAL_REWARDS_MSG } from '../../constants'
@@ -77,7 +76,6 @@ const GeyserStatsContainer = styled.div`
7776
`
7877

7978
const Header = styled.h3`
80-
${ResponsiveText}
8179
${tw`uppercase flex font-medium text-radicalRed`}
8280
${tw`sm:pl-3`}
8381
`

‎frontend/src/components/GeyserFirst/GeyserStatsBox.tsx‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import styled from 'styled-components/macro'
33
import tw from 'twin.macro'
44
import { useSpring, animated } from 'react-spring'
55
import { Popover, Transition } from '@headlessui/react'
6-
import { ResponsiveSubText, ResponsiveText } from 'styling/styles'
76
import { TooltipMessage } from 'types'
87

98
interface Props {
@@ -59,7 +58,6 @@ export const GeyserStatsBox: React.FC<Props> = ({
5958
}
6059

6160
const handleMouseLeave = () => {
62-
// Only close if not locked open by a click
6361
if (!clicked) {
6462
setIsTooltipOpen(false)
6563
}
@@ -89,7 +87,6 @@ export const GeyserStatsBox: React.FC<Props> = ({
8987
<GeyserStatsBoxContainer className={`relative ${containerClassName}`}>
9088
<GeyserStatsBoxLabel>{name}</GeyserStatsBoxLabel>
9189
<GeyserStatsBoxValueContainer>
92-
{/* Wrap Popover in a DOM element to attach ref */}
9390
<div ref={popoverRef} className="relative inline-block">
9491
<Popover>
9592
<Popover.Button
@@ -117,7 +114,6 @@ export const GeyserStatsBox: React.FC<Props> = ({
117114
<Popover.Panel
118115
className="absolute z-30 w-max max-w-sm mt-3 -ml-3 transform"
119116
onClick={(e) => e.stopPropagation()}
120-
// Keep popover open if cursor inside the panel
121117
onMouseEnter={() => setIsTooltipOpen(true)}
122118
onMouseLeave={() => {
123119
if (!clicked) setIsTooltipOpen(false)
@@ -142,35 +138,29 @@ export const GeyserStatsBox: React.FC<Props> = ({
142138
}
143139

144140
const GeyserStatsBoxContainer = styled.div`
145-
${tw`w-full h-40px`}
146-
${tw`sm:mr-5 sm:p-3 sm:h-72px`}
141+
${tw`w-full h-40px mb-3`}
142+
${tw`sm:mr-5 sm:p-3 sm:h-72px sm:mb-0`}
147143
${tw`sm:bg-paleBlue sm:border sm:border-lightGray sm:rounded-sm`}
148144
`
149145

150146
const GeyserStatsBoxLabel = styled.span`
151-
${ResponsiveText}
152147
${tw`mb-1 flex font-light relative`}
153148
`
154149

155150
const GeyserStatsBoxValueContainer = styled.div`
156151
${tw`flex flex-row`}
157152
`
158153

159-
const GeyserStatsBoxValue = styled.span`
160-
${ResponsiveText}
161-
`
154+
const GeyserStatsBoxValue = styled.span``
162155

163156
const GeyserStatsBoxValueWithTooltip = styled.span`
164-
${ResponsiveText}
165-
${tw`cursor-pointer border-b border-dotted border-darkGray transition-all ease-out duration-100`}
157+
${tw`cursor-pointer border-b border-dotted border-darkGray transition-all ease-out duration-100`}
166158
&:hover {
167159
${tw`border-b-2 border-greenDark border-dashed`}
168160
}
169161
`
170162

171-
const GeyserStatsBoxUnits = styled.span`
172-
${ResponsiveSubText}
173-
`
163+
const GeyserStatsBoxUnits = styled.span``
174164

175165
const TooltipOuterLayer = styled.div`
176166
${tw`shadow-all max-w-sm rounded-lg overflow-hidden ring-1 ring-black ring-opacity-5`}
@@ -185,11 +175,9 @@ const TooltipMessageContainer = styled.div`
185175
`
186176

187177
const TooltipTitle = styled.p`
188-
${ResponsiveText}
189-
${tw`text-gray mb-2`}
178+
${tw`text-gray text-lg mb-2`}
190179
`
191180

192181
const TooltipBody = styled.div`
193-
${ResponsiveSubText}
194-
${tw`text-white text-left font-semiBold`}
182+
${tw`text-white text-left font-semiBold sm:leading-5 text-sm`}
195183
`

‎frontend/src/components/GeyserFirst/MyStats.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import tw from 'twin.macro'
44
import Web3Context from 'context/Web3Context'
55
import { GeyserContext } from 'context/GeyserContext'
66
import { StatsContext } from 'context/StatsContext'
7-
import { ResponsiveText } from 'styling/styles'
87
import { safeNumeral } from 'utils/numeral'
98
import TooltipTable from 'components/TooltipTable'
109
import { GeyserStatsBox } from './GeyserStatsBox'
@@ -139,7 +138,6 @@ const MyStatsContainer = styled.div`
139138
`
140139

141140
const Header = styled.h3`
142-
${ResponsiveText}
143141
${tw`uppercase flex text-radicalRed font-medium sm:pl-3`}
144142
`
145143

‎frontend/src/components/GeyserFirst/MyStatsBox.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import styled from 'styled-components/macro'
22
import tw from 'twin.macro'
33
import { useSpring, animated } from 'react-spring'
44
import { useState } from 'react'
5-
import { ResponsiveSubText, ResponsiveText } from 'styling/styles'
65

76
interface Props {
87
name: string
@@ -53,7 +52,6 @@ const MyStatContainer = styled.div`
5352
`
5453

5554
const MyStatName = styled.span`
56-
${ResponsiveText}
5755
${tw`mb-1 flex font-light`}
5856
${tw`sm:mb-2 sm:mr-8 sm:block sm:ml-3`}
5957
`
@@ -65,9 +63,6 @@ const MyStatValueContainer = styled.div`
6563

6664
const MyStatValue = styled.span`
6765
${tw`w-full text-left sm:text-center sm:font-bold`}
68-
${ResponsiveSubText}
6966
`
7067

71-
const MyStatUnits = styled.span`
72-
${ResponsiveSubText}
73-
`
68+
const MyStatUnits = styled.span``

‎frontend/src/components/GeysersList.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from 'styled-components/macro'
22
import tw from 'twin.macro'
3-
import { ResponsiveText } from 'styling/styles'
43
import { useContext } from 'react'
54
import { GeyserContext } from 'context/GeyserContext'
65
import { VaultContext } from 'context/VaultContext'
@@ -72,6 +71,5 @@ const Heading = styled.div`
7271
`
7372

7473
const Label = styled.span`
75-
${ResponsiveText}
7674
${tw`tracking-wider`}
7775
`

‎frontend/src/components/Header.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useContext } from 'react'
55
import styled from 'styled-components/macro'
66
import tw from 'twin.macro'
77
import { Tab } from '@headlessui/react'
8-
import { ResponsiveHeader } from 'styling/styles'
98
import { useLocation, useNavigate } from 'react-router-dom'
109
import { HeaderWalletButton } from './HeaderWalletButton'
1110

@@ -106,7 +105,6 @@ const RightContainer = styled.div`
106105
`
107106

108107
const HeaderTabItem = styled(Tab)<{ isSelected: boolean }>`
109-
${ResponsiveHeader}
110108
${tw`font-normal tracking-wider px-4 py-2 text-center cursor-pointer`}
111109
${({ isSelected }) => (isSelected ? tw`text-black font-bold` : tw`text-gray hover:text-black`)};
112110
${({ isSelected }) => isSelected && `background-color: #f9f9f9;`}

‎frontend/src/components/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const ProgramName = styled.div`
159159
`
160160

161161
const InfoText = styled.div`
162-
${tw`font-mono text-yellow-600 text-xs uppercase font-bold`}
162+
${tw`font-mono text-yellow-600 text-xxs uppercase font-bold`}
163163
`
164164

165165
const LoaderContainer = styled.div`

0 commit comments

Comments
 (0)